Proyectos de Subversion LeadersLinked - SPA

Rev

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

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