Rev 3100 | Rev 3562 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import { styled } from '@mui/material'
import Widget from '@components/UI/Widget'
import SurveyForm from '@components/survey-form/SurveyForm'
import FeedDescription from './feed-description'
const FeedContainer = styled(Widget.Body)(({ theme }) => ({
padding: 0,
'& > *:not(img, video, .MuiCard-root)': {
padding: theme.spacing(0, 1)
},
'.MuiCard-root': {
margin: theme.spacing(0, 1)
},
'& > p, & > span': {
fontSize: '1rem',
wordWrap: 'break-word',
fontWeight: 'normal'
},
'& > img, & > video ': {
width: '100%',
maxHeight: '600px',
objectFit: 'contain',
position: 'relative',
backgroundColor: '#000e'
}
}))
export default function FeedContent({ id }) {
const [showModal, setShowModal] = useState(false)
const {
owner_description: description,
owner_file_image: image,
owner_file_document: document,
owner_file_video: video,
owner_file_image_preview: imagePreview,
feed_vote_url: voteUrl,
feed_content_type: contentType,
shared_name: sharedName,
shared_image: sharedImage,
shared_time_elapse: sharedTimeElapse,
shared_description: sharedFeedDescription,
shared_file_video: sharedFileVideo,
shared_file_image_preview: sharedFileImagePreview,
shared_file_image: sharedFileImage,
shared_file_document: sharedFileDocument,
shared_content_type: sharedContentType
} = useSelector(({ feed }) => feed.feeds.byId[id])
const answers = useMemo(() => {
if (contentType !== 'fast-survey') return []
return Array.from(
{ length: description.number_of_answers },
(_, i) => description[`answer${i + 1}`]
)
}, [description, contentType])
const votes = useMemo(() => {
if (contentType !== 'fast-survey') return []
return Array.from(
{ length: description.number_of_votes ?? 0 },
(_, i) => description[`votes${i + 1}`]
)
}, [description, contentType])
const toggleModal = () => setShowModal(!showModal)
const renderContent = ({
description,
image,
document,
video,
imagePreview,
voteUrl,
sharedName,
sharedImage,
sharedTimeElapse,
type
}) => {
switch (type) {
case 'video': {
return (
<>
<FeedDescription description={description} />
<Widget.Media
type='video'
poster={imagePreview}
src={video}
onClick={toggleModal}
controls
/>
</>
)
}
case 'image': {
return (
<>
<FeedDescription description={description} />
<Widget.Media src={image} onClick={toggleModal} />
</>
)
}
case 'document': {
return (
<>
<FeedDescription description={description} />
<a href={document} target='_blank' rel='noreferrer'>
<img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
</a>
</>
)
}
case 'fast-survey': {
return (
<SurveyForm
voteUrl={voteUrl}
active={Boolean(description.active)}
question={description.question}
time={description.time_remaining}
resultType={description.result_type}
answers={answers}
votes={votes}
/>
)
}
case 'shared': {
return (
<>
<FeedDescription description={description} />
<Widget styles={{ width: 'inherit' }}>
<Widget.Header
avatar={sharedImage}
title={sharedName}
subheader={sharedTimeElapse}
/>
<FeedContainer>
{renderContent({
type: sharedContentType,
description: sharedFeedDescription,
document: sharedFileDocument,
image: sharedFileImage,
video: sharedFileVideo,
imagePreview: sharedFileImagePreview
})}
</FeedContainer>
</Widget>
</>
)
}
default:
return <FeedDescription description={description} />
}
}
return (
<FeedContainer>
{renderContent({
description,
image,
document,
video,
imagePreview,
voteUrl,
type: sharedName ? 'shared' : contentType,
sharedName,
sharedImage,
sharedTimeElapse
})}
</FeedContainer>
)
}