Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3266 | Rev 3562 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3266 Rev 3561
Línea 1... Línea 1...
1 
import React, { useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react';
2 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux';
3 
import { styled } from '@mui/material'
 3 
import { styled } from '@mui/material';
4 
 
 4 
 
5 
import Widget from '@components/UI/Widget'
 5 
import Widget from '@components/UI/Widget';
6 
import SurveyForm from '@components/survey-form/SurveyForm'
 6 
import SurveyForm from '@components/survey-form/SurveyForm';
7 
import FeedDescription from './feed-description'
 7 
import FeedDescription from './feed-description';
Línea 8... Línea 8...
8 
 
 8 
 
9 
const FeedContainer = styled(Widget.Body)(({ theme }) => ({
 9 
const FeedContainer = styled(Widget.Body)(({ theme }) => ({
10 
  padding: 0,
 10 
  padding: 0,
11 
  '& > *:not(img, video, .MuiCard-root)': {
 11 
  '& > *:not(img, video, .MuiCard-root)': {
Línea 24... Línea 24...
24 
    maxHeight: '600px',
 24 
    maxHeight: '600px',
25 
    objectFit: 'contain',
 25 
    objectFit: 'contain',
26 
    position: 'relative',
 26 
    position: 'relative',
27 
    backgroundColor: '#000e'
 27 
    backgroundColor: '#000e'
28 
  }
 28 
  }
29 
}))
 29 
}));
Línea 30... Línea 30...
30 
 
 30 
 
31 
export default function FeedContent({ id }) {
 31 
export default function FeedContent({ id }) {
Línea 32... Línea 32...
32 
  const [showModal, setShowModal] = useState(false)
 32 
  const [showModal, setShowModal] = useState(false);
33 
 
 33 
 
34 
  const {
 34 
  const {
35 
    owner_description: description,
 35 
    owner_description: description,
Línea 46... Línea 46...
46 
    shared_file_video: sharedFileVideo,
 46 
    shared_file_video: sharedFileVideo,
47 
    shared_file_image_preview: sharedFileImagePreview,
 47 
    shared_file_image_preview: sharedFileImagePreview,
48 
    shared_file_image: sharedFileImage,
 48 
    shared_file_image: sharedFileImage,
49 
    shared_file_document: sharedFileDocument,
 49 
    shared_file_document: sharedFileDocument,
50 
    shared_content_type: sharedContentType
 50 
    shared_content_type: sharedContentType
51 
  } = useSelector(({ feed }) => feed.feeds.byId[id])
 51 
  } = useSelector(({ feed }) => feed.feeds.byId[id]);
Línea 52... Línea 52...
52 
 
 52 
 
53 
  const answers = useMemo(() => {
 53 
  const answers = useMemo(() => {
54 
    if (contentType !== 'fast-survey') return []
 54 
    if (contentType !== 'fast-survey') return [];
55 
    return Array.from(
 55 
    return Array.from(
56 
      { length: description.number_of_answers },
 56 
      { length: description.number_of_answers },
57 
      (_, i) => description[`answer${i + 1}`]
 57 
      (_, i) => description[`answer${i + 1}`]
58 
    )
 58 
    );
Línea 59... Línea 59...
59 
  }, [description, contentType])
 59 
  }, [description, contentType]);
60 
 
 60 
 
61 
  const votes = useMemo(() => {
 61 
  const votes = useMemo(() => {
62 
    if (contentType !== 'fast-survey') return []
 62 
    if (contentType !== 'fast-survey') return [];
63 
    return Array.from(
 63 
    return Array.from(
64 
      { length: description.number_of_votes ?? 0 },
 64 
      { length: description.number_of_votes ?? 0 },
65 
      (_, i) => description[`votes${i + 1}`]
 65 
      (_, i) => description[`votes${i + 1}`]
Línea 66... Línea 66...
66 
    )
 66 
    );
Línea 67... Línea 67...
67 
  }, [description, contentType])
 67 
  }, [description, contentType]);
68 
 
 68 
 
69 
  const toggleModal = () => setShowModal(!showModal)
 69 
  const toggleModal = () => setShowModal(!showModal);
70 
 
 70 
 
Línea 83... Línea 83...
83 
    switch (type) {
 83 
    switch (type) {
84 
      case 'video': {
 84 
      case 'video': {
85 
        return (
 85 
        return (
86 
          <>
 86 
          <>
87 
            <FeedDescription description={description} />
 87 
            <FeedDescription description={description} />
88 
            <Widget.Media
 - 
 
89 
              type='video'
 - 
 
90 
              poster={imagePreview}
 - 
 
91 
              src={video}
 - 
 
92 
              onClick={toggleModal}
 88 
            <video poster={imagePreview} src={video} onClick={toggleModal} controls />
93 
              controls
 - 
 
94 
            />
 - 
 
95 
          </>
 89 
          </>
96 
        )
 90 
        );
97 
      }
 91 
      }
98 
      case 'image': {
 92 
      case 'image': {
99 
        return (
 93 
        return (
100 
          <>
 94 
          <>
101 
            <FeedDescription description={description} />
 95 
            <FeedDescription description={description} />
102 
            <Widget.Media src={image} onClick={toggleModal} />
 96 
            <Widget.Media src={image} onClick={toggleModal} />
103 
          </>
 97 
          </>
104 
        )
 98 
        );
105 
      }
 99 
      }
106 
      case 'document': {
 100 
      case 'document': {
107 
        return (
 101 
        return (
108 
          <>
 102 
          <>
109 
            <FeedDescription description={description} />
 103 
            <FeedDescription description={description} />
110 
            <a href={document} target='_blank' rel='noreferrer'>
 104 
            <a href={document} target='_blank' rel='noreferrer'>
111 
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
 105 
              <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
112 
            </a>
 106 
            </a>
113 
          </>
 107 
          </>
114 
        )
 108 
        );
115 
      }
 109 
      }
116 
      case 'fast-survey': {
 110 
      case 'fast-survey': {
117 
        return (
 111 
        return (
118 
          <SurveyForm
 112 
          <SurveyForm
119 
            voteUrl={voteUrl}
 113 
            voteUrl={voteUrl}
Línea 122... Línea 116...
122 
            time={description.time_remaining}
 116 
            time={description.time_remaining}
123 
            resultType={description.result_type}
 117 
            resultType={description.result_type}
124 
            answers={answers}
 118 
            answers={answers}
125 
            votes={votes}
 119 
            votes={votes}
126 
          />
 120 
          />
127 
        )
 121 
        );
128 
      }
 122 
      }
129 
      case 'shared': {
 123 
      case 'shared': {
130 
        return (
 124 
        return (
131 
          <>
 125 
          <>
132 
            <FeedDescription description={description} />
 126 
            <FeedDescription description={description} />
133 
            <Widget styles={{ width: 'inherit' }}>
 127 
            <Widget styles={{ width: 'inherit' }}>
134 
              <Widget.Header
 - 
 
135 
                avatar={sharedImage}
 - 
 
136 
                title={sharedName}
 - 
 
137 
                subheader={sharedTimeElapse}
 128 
              <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />
138 
              />
 - 
 
139 
              <FeedContainer>
 129 
              <FeedContainer>
140 
                {renderContent({
 130 
                {renderContent({
141 
                  type: sharedContentType,
 131 
                  type: sharedContentType,
142 
                  description: sharedFeedDescription,
 132 
                  description: sharedFeedDescription,
143 
                  document: sharedFileDocument,
 133 
                  document: sharedFileDocument,
Línea 146... Línea 136...
146 
                  imagePreview: sharedFileImagePreview
 136 
                  imagePreview: sharedFileImagePreview
147 
                })}
 137 
                })}
148 
              </FeedContainer>
 138 
              </FeedContainer>
149 
            </Widget>
 139 
            </Widget>
150 
          </>
 140 
          </>
151 
        )
 141 
        );
152 
      }
 142 
      }
153 
      default:
 143 
      default:
154 
        return <FeedDescription description={description} />
 144 
        return <FeedDescription description={description} />;
155 
    }
 145 
    }
156 
  }
 146 
  };
Línea 157... Línea 147...
157 
 
 147 
 
158 
  return (
 148 
  return (
- 
 
 149 
    <FeedContainer>
- 
 
 150 
      {description && <FeedDescription description={description} />}
- 
 
 151 
      {contentType === 'video' && (
- 
 
 152 
        <video poster={imagePreview} src={video} onClick={toggleModal} controls />
- 
 
 153 
      )}
- 
 
 154 
      {contentType === 'image' && <Widget.Media src={image} onClick={toggleModal} />}
- 
 
 155 
      {contentType === 'document' && (
- 
 
 156 
        <a href={document} target='_blank' rel='noreferrer'>
- 
 
 157 
          <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
- 
 
 158 
        </a>
- 
 
 159 
      )}
- 
 
 160 
      {contentType === 'fast-survey' && (
- 
 
 161 
        <SurveyForm
- 
 
 162 
          voteUrl={voteUrl}
- 
 
 163 
          active={Boolean(description.active)}
- 
 
 164 
          question={description.question}
- 
 
 165 
          time={description.time_remaining}
- 
 
 166 
          resultType={description.result_type}
- 
 
 167 
          result={description.result}
- 
 
 168 
          answers={answers}
- 
 
 169 
          votes={votes}
- 
 
 170 
        />
- 
 
 171 
      )}
- 
 
 172 
      {contentType === 'shared' && (
- 
 
 173 
        <Widget styles={{ width: 'inherit' }}>
- 
 
 174 
          <Widget.Header avatar={sharedImage} title={sharedName} subheader={sharedTimeElapse} />
- 
 
 175 
          <FeedContainer>
- 
 
 176 
            {renderContent({
- 
 
 177 
              type: sharedContentType,
- 
 
 178 
              description: sharedFeedDescription,
- 
 
 179 
              document: sharedFileDocument,
- 
 
 180 
              image: sharedFileImage,
- 
 
 181 
              video: sharedFileVideo,
- 
 
 182 
              imagePreview: sharedFileImagePreview
- 
 
 183 
            })}
- 
 
 184 
          </FeedContainer>
- 
 
 185 
        </Widget>
- 
 
 186 
      )}
159 
    <FeedContainer>
 187 
 
160 
      {renderContent({
 188 
      {renderContent({
161 
        description,
 189 
        description,
162 
        image,
 190 
        image,
163 
        document,
 191 
        document,
Línea 168... Línea 196...
168 
        sharedName,
 196 
        sharedName,
169 
        sharedImage,
 197 
        sharedImage,
170 
        sharedTimeElapse
 198 
        sharedTimeElapse
171 
      })}
 199 
      })}
172 
    </FeedContainer>
 200 
    </FeedContainer>
173 
  )
 201 
  );
174 
}
 202 
}