import { useContext, useEffect, useRef, useState } from 'react';
import useDarkMode from '../../hooks/useDarkMode';
import ThemeContext from '../../contexts/themeContext';

import VideojsPlayer from './VideojsPlayer';


const OneBillionMinutesComp = () => {

	const { mobileDesign } = useContext(ThemeContext);
  const { themeStatus } = useDarkMode();

  const playerRef = useRef(null);

  const videoJsOptions = {
    autoplay: true,
    controls: true,
    responsive: true,
    fluid: true,
    sources: [{
      src: 'https://dacastmmd.mmdlive.lldns.net/dacastmmd/e9b3e1cbd1a44119bb48117e95516f3d/manifest.m3u8?p=79&h=802f3cf65264cfc8df83943f94a94474',
      type: 'application/x-mpegURL'
    }]
  };

  const handlePlayerReady = (player: any) => {
    playerRef.current = player;

    // You can handle player events here, for example:
    player.on('waiting', () => {
      //videojs.log('player is waiting');
    });

    player.on('dispose', () => {
      //videojs.log('player will dispose');
    });
  };


	return (
      <div className=''>
        <VideojsPlayer options={videoJsOptions} />
      </div>
	);
};

export default OneBillionMinutesComp;