Proyectos de Subversion LeadersLinked - SPA

Rev

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