Proyectos de Subversion LeadersLinked - SPA

Rev

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

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