Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { Typography } from '@mui/material';

import { CheckCircle } from '@mui/icons-material';

import { parse } from '@shared/utils';

import { Card, CardContent, CardMedia } from '@shared/components';

import SlideQuiz from './slide-quiz';

export function SlideCard({

  slide: { type, file, description, name, quiz_data, link_take_a_test },

  completed,

  autoPlay = false,

  onComplete

}) {

  return (

    <Card

      styles={{

        width: { xs: '80vw', md: '500px', lg: '800px' },

        maxHeight: '600px'

      }}

    >

      <CardContent styles={{ position: 'relative' }}>

        {!!completed && (

          <CheckCircle sx={{ position: 'absolute', top: '1rem', right: '1rem' }} color='success' />

        )}

        {type === 'quiz' && (

          <SlideQuiz

            quiz={quiz_data ? quiz_data[0] : {}}

            startUrl={link_take_a_test}

            slide={{ type, file, description, name, quiz_data, link_take_a_test }}

            onSync={onComplete}

            completed={completed}

          />

        )}

        {type === 'text' && <Typography>{parse(description)}</Typography>}

        {type === 'image' && (

          <CardMedia

            styles={{ width: '100%', height: '100%', objectFit: 'contain' }}

            src={file}

            alt={name}

            type='image'

          />

        )}

        {type === 'video' && (

          <CardMedia

            styles={{ width: '100%', height: '100%', objectFit: 'contain' }}

            src={file}

            alt={name}

            type='video'

            autoPlay={autoPlay}

            controls

            controlsList='nodownload'

            onEnded={onComplete}

          />

        )}

        {/*  {type === 'audio' && <CardMedia src={file} alt={name} type='audio' />}

        {type === 'document' && <CardMedia src={file} alt={name} type='document' />} */}

      </CardContent>

    </Card>

  );

}