Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3520 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3481 stevensc 1 
import React from 'react'
2 
import { Box } from '@mui/material'
3 
import { CheckCircle } from '@mui/icons-material'
4 
import parse from 'html-react-parser'
5 
 
6 
import SlideQuiz from './slide-quiz'
7 
 
8 
export default function SlideCard({
9 
  slide,
10 
  completed,
11 
  autoPlay = false,
12 
  onComplete
13 
}) {
14 
  const { type, file, description, name, quiz_data, link_take_a_test } = slide
15 
 
16 
  const filesRender = {
17 
    video: (
18 
      <video
19 
        autoPlay={autoPlay}
20 
        controls
21 
        controlsList='nodownload'
22 
        onEnded={onComplete}
23 
      >
24 
        <source src={file} />
25 
      </video>
26 
    ),
27 
 
28 
    image: <img src={file} alt={name} />,
29 
 
30 
    audio: <audio controls src={file} alt={name} onEnded={onComplete} />,
31 
 
32 
    text: parse(description),
33 
 
34 
    document: (
35 
      <a href={file} target='_blank' rel='noreferrer'>
36 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
37 
      </a>
38 
    ),
39 
 
40 
    quiz: (
41 
      <SlideQuiz
42 
        quiz={quiz_data ? quiz_data[0] : {}}
43 
        startUrl={link_take_a_test}
44 
        slide={slide}
45 
        onSync={onComplete}
46 
        completed={completed}
47 
      />
48 
    )
49 
  }
50 
 
51 
  return (
52 
    <Box
53 
      sx={{
54 
        width: '100%',
55 
        minwidth: { xs: '80vw', md: '500px', lg: '800px' },
56 
        overflow: 'hidden',
57 
        borderRadius: '20px',
58 
        position: 'relative',
59 
        '& > svg': {
60 
          position: 'absolute',
61 
          top: '1rem',
62 
          right: '1rem'
63 
        },
64 
        '& img, & video': {
65 
          margin: 'auto',
66 
          width: { xs: '80vw', md: '500px', lg: '800px' },
67 
          maxHeight: '500px',
68 
          objectFit: 'contain'
69 
        },
70 
        '& > img, & > video, & > audio, & > a, & > p': {
71 
          margin: 'auto'
72 
        }
73 
      }}
74 
    >
75 
      {filesRender[type]}
76 
      {completed ? <CheckCircle color='success' /> : null}
77 
    </Box>
78 
  )
79 
}