smov/src/components/video/hooks/controlVideo.ts

import fscreen from "fscreen";
import { canFullscreen, isSafari } from "./fullscreen";

export interface PlayerControls {
  play(): void;
  pause(): void;
  exitFullscreen(): void;
  enterFullscreen(): void;
  setTime(time: number): void;
  setVolume(volume: number): void;
}

export const initialControls: PlayerControls = {
  play: () => null,
  pause: () => null,
  enterFullscreen: () => null,
  exitFullscreen: () => null,
  setTime: () => null,
  setVolume: () => null,
};

export function populateControls(
  player: HTMLVideoElement,
  wrapper: HTMLDivElement
): PlayerControls {
  return {
    play() {
      player.play();
    },
    pause() {
      player.pause();
    },
    enterFullscreen() {
      if (!canFullscreen || fscreen.fullscreenElement) return;
      if (fscreen.fullscreenEnabled) {
        fscreen.requestFullscreen(wrapper);
        return;
      }
      if (isSafari) {
        (player as any).webkitEnterFullscreen();
      }
    },
    exitFullscreen() {
      if (!fscreen.fullscreenElement) return;
      fscreen.exitFullscreen();
    },
    setTime(t) {
      // clamp time between 0 and max duration
      let time = Math.min(t, player.duration);
      time = Math.max(0, time);
      // eslint-disable-next-line no-param-reassign
      player.currentTime = time;
    },
    setVolume(v) {
      // clamp time between 0 and 1
      let volume = Math.min(v, 1);
      volume = Math.max(0, volume);
      // eslint-disable-next-line no-param-reassign
      player.volume = volume;
    },
  };
}