leumas-private-shared/src/Components/Downloaders/VideoPlayer.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import { Box, Button, Typography } from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';

const VideoPlayer = ({ videoSrc, videoName }) => {
  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">Video Player</Typography>
      <video controls style={{ width: '100%', marginTop: '10px' }}>
        <source src={videoSrc} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        href={videoSrc}
        download={videoName}
        sx={{ mt: 2 }}
      >
        Download Video
      </Button>
    </Box>
  );
};

export default VideoPlayer;