import {React, useContext, useState} from 'react';
import { useParams } from 'react-router-dom';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import ConfigContext from '../Config';
import ReactPlayer from 'react-player';




const VideoPlayer = () => {
  const config = useContext(ConfigContext);
  const { filename } = useParams();

  const [isFullScreen, setIsFullScreen] = useState(false);

  const handleFullScreenChange = (player) => {
    setIsFullScreen(!isFullScreen);
    if (isFullScreen) {
      player.exitFullscreen();
    } else {
      player.requestFullscreen();
    }
  };


  return (
    <Container>
      <Typography variant="h6" gutterBottom>
        {filename}
      </Typography>
      <ReactPlayer
        url={`${config.Host}/res/${filename}`}
        controls
        width="100%"
        height="auto"
        playing={isFullScreen}
        onReady={handleFullScreenChange}
      />
    </Container>
  );
};
export default VideoPlayer;