Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3562 | Rev 3654 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3561 stevensc 1 
import React, { useMemo, useState } from 'react';
2 
import { useSelector } from 'react-redux';
3 
import { styled } from '@mui/material';
2838 stevensc 4 
 
3561 stevensc 5 
import Widget from '@components/UI/Widget';
6 
import SurveyForm from '@components/survey-form/SurveyForm';
7 
import FeedDescription from './feed-description';
2838 stevensc 8 
 
3100 stevensc 9 
const FeedContainer = styled(Widget.Body)(({ theme }) => ({
3099 stevensc 10 
  padding: 0,
11 
  '& > *:not(img, video, .MuiCard-root)': {
12 
    padding: theme.spacing(0, 1)
13 
  },
14 
  '.MuiCard-root': {
15 
    margin: theme.spacing(0, 1)
16 
  },
17 
  '& > p, & > span': {
18 
    fontSize: '1rem',
19 
    wordWrap: 'break-word',
20 
    fontWeight: 'normal'
21 
  },
22 
  '& > img, & > video ': {
23 
    width: '100%',
24 
    maxHeight: '600px',
25 
    objectFit: 'contain',
3562 stevensc 26 
    position: 'relative'
3099 stevensc 27 
  }
3561 stevensc 28 
}));
3099 stevensc 29 
 
2838 stevensc 30 
export default function FeedContent({ id }) {
3561 stevensc 31 
  const [showModal, setShowModal] = useState(false);
2838 stevensc 32 
 
33 
  const {
34 
    owner_description: description,
35 
    owner_file_image: image,
36 
    owner_file_document: document,
37 
    owner_file_video: video,
38 
    owner_file_image_preview: imagePreview,
39 
    feed_vote_url: voteUrl,
40 
    feed_content_type: contentType,
41 
    shared_name: sharedName,
42 
    shared_image: sharedImage,
43 
    shared_time_elapse: sharedTimeElapse,
44 
    shared_description: sharedFeedDescription,
45 
    shared_file_video: sharedFileVideo,
46 
    shared_file_image_preview: sharedFileImagePreview,
47 
    shared_file_image: sharedFileImage,
48 
    shared_file_document: sharedFileDocument,
49 
    shared_content_type: sharedContentType
3561 stevensc 50 
  } = useSelector(({ feed }) => feed.feeds.byId[id]);
2838 stevensc 51 
 
52 
  const answers = useMemo(() => {
3561 stevensc 53 
    if (contentType !== 'fast-survey') return [];
3017 stevensc 54 
    return Array.from(
55 
      { length: description.number_of_answers },
56 
      (_, i) => description[`answer${i + 1}`]
3561 stevensc 57 
    );
58 
  }, [description, contentType]);
2838 stevensc 59 
 
60 
  const votes = useMemo(() => {
3561 stevensc 61 
    if (contentType !== 'fast-survey') return [];
3017 stevensc 62 
    return Array.from(
63 
      { length: description.number_of_votes ?? 0 },
64 
      (_, i) => description[`votes${i + 1}`]
3561 stevensc 65 
    );
66 
  }, [description, contentType]);
2838 stevensc 67 
 
3561 stevensc 68 
  const toggleModal = () => setShowModal(!showModal);
2838 stevensc 69 
 
70 
  return (
3099 stevensc 71 
    <FeedContainer>
3564 stevensc 72 
      {description && contentType !== 'fast-survey' && (
73 
        <FeedDescription description={description} />
74 
      )}
3561 stevensc 75 
      {contentType === 'video' && (
76 
        <video poster={imagePreview} src={video} onClick={toggleModal} controls />
77 
      )}
78 
      {contentType === 'image' && <Widget.Media src={image} onClick={toggleModal} />}
79 
      {contentType === 'document' && (
80 
        <a href={document} target='_blank' rel='noreferrer'>
81 
          <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
82 
        </a>
83 
      )}
84 
      {contentType === 'fast-survey' && (
85 
        <SurveyForm
86 
          voteUrl={voteUrl}
87 
          active={Boolean(description.active)}
88 
          question={description.question}
89 
          time={description.time_remaining}
90 
          resultType={description.result_type}
91 
          result={description.result}
92 
          answers={answers}
93 
          votes={votes}
94 
        />
95 
      )}
96 
      {contentType === 'shared' && (
97 
        <Widget styles={{ width: 'inherit' }}>
98 
          <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />
99 
          <FeedContainer>
3562 stevensc 100 
            <FeedDescription description={sharedFeedDescription} />
101 
            {sharedContentType === 'video' && (
102 
              <video
103 
                poster={sharedFileImagePreview}
104 
                src={sharedFileVideo}
105 
                onClick={toggleModal}
106 
                controls
107 
              />
108 
            )}
109 
            {sharedContentType === 'image' && (
110 
              <Widget.Media src={sharedFileImage} onClick={toggleModal} />
111 
            )}
112 
            {sharedContentType === 'document' && (
113 
              <a href={sharedFileDocument} target='_blank' rel='noreferrer'>
114 
                <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
115 
              </a>
116 
            )}
3561 stevensc 117 
          </FeedContainer>
118 
        </Widget>
119 
      )}
3099 stevensc 120 
    </FeedContainer>
3561 stevensc 121 
  );
2838 stevensc 122 
}