Function App

examples/react/src/App.tsx:9–584

()

import Duration from './Duration';

const App = () => {
  const playerRef = useRef<HTMLVideoElement | null>(null);
  const urlInputRef = useRef<HTMLInputElement | null>(null);

  const initialState = {
    src: undefined,
    pip: false,
    playing: false,
    controls: false,
    light: false,
    volume: 1,
    muted: false,
    played: 0,
    loaded: 0,
    duration: 0,
    playbackRate: 1.0,
    loop: false,
    seeking: false,
    loadedSeconds: 0,
    playedSeconds: 0,
  };

  type PlayerState = Omit<typeof initialState, 'src'> & {
    src?: string;
  };

  const [state, setState] = useState<PlayerState>(initialState);

  const load = (src?: string) => {
    setState(prevState => ({
      ...prevState,
      src,
      played: 0,
      loaded: 0,
      pip: false,
    }));
  };

  const handlePlayPause = () => {
    setState(prevState => ({ ...prevState, playing: !prevState.playing }));
  };

  const handleStop = () => {
    setState(prevState => ({ ...prevState, src: undefined, playing: false }));
  };

  const handleToggleControls = () => {
    setState(prevState => ({ ...prevState, controls: !prevState.controls }));
  };

  const handleToggleLight = () => {
    setState(prevState => ({ ...prevState, light: !prevState.light }));
  };

  const handleToggleLoop = () => {
    setState(prevState => ({ ...prevState, loop: !prevState.loop }));
  };