/** @format */

import 'video-react/dist/video-react.css'; // import css
import './index.less';

import merge from 'lodash/merge';
import React, { useEffect, useRef, useState } from 'react';
import {
  ControlBar,
  CurrentTimeDisplay,
  ForwardControl, // 前进按钮
  PlaybackRateMenuButton, // 倍速播放选项
  Player,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  ReplayControl, // 后退按钮
  TimeDivider,
  VolumeMenuButton,
} from 'video-react';

const styleBase = {
  width: 460,
  height: 260,
};

interface VideoProps {
  size?: Record<string, any>;
  url: string;
  autoPlay: boolean;
  muted: boolean;
  loop: boolean;
  title?: string;
}

const Video = (props: VideoProps) => {
  const { size, url, autoPlay = true, muted = false, loop = false } = props;

  const videoRef = useRef<HTMLVideoElement>(null);
  const style = merge(styleBase, size);

  useEffect(() => {}, [videoRef]);

  return (
    <div style={{ ...size }}>
      <Player autoPlay={autoPlay} muted={muted} loop={loop}>
        <source src={url} type="video/mp4" />
        <ControlBar autoHide={true} disableDefaultControls={false}>
          <ReplayControl seconds={10} order={1.1} />
          <ForwardControl seconds={30} order={1.2} />
          <PlayToggle />
          <CurrentTimeDisplay order={4.1} />
          <TimeDivider order={4.2} />
          <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
          <VolumeMenuButton />
        </ControlBar>
      </Player>
    </div>
  );
};

export default Video;