useVideo

Simplifies video handling, includes play, pause and reset methods. Also includes volume and playrate controls, along with fullscreen request.

Installation

npx rabbithook@latest add use-video

Usage

App.tsx

import useVideo from "@/hooks/use-video";

function Component() {
  const {
    ref,
    isPaused,
    currentSpeed,
    currentVolume,
    setVolume,
    setSpeed,
    play,
    pause,
    reset,
    increaseSpeed,
    decreaseSpeed,
    toggleFullscreen,
  } = useVideo();

  return (
    <div>
      <video ref={ref}>
        ...
      </video>

      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={reset}>Reset</button>
      <button onClick={decreaseSpeed}>Decrease Speed</button>
      <button onClick={increaseSpeed}>Increase Speed</button>
      <button onClick={toggleFullscreen}>Toggle Fullscreen</button>
      <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        value={currentVolume}
        onChange={(e) => setVolume(e.target.value)}
      />
      <input
        type="range"
        min="0.5"
        max="2"
        step="0.1"
        value={currentSpeed}
        onChange={(e) => setSpeed(e.target.value)}
      />
    </div>
    )
}

Code

Typescript

use-async.ts

import { useRef } from "react";

function useVideo() {
  const ref = useRef<HTMLVideoElement>(null);

  const videoAction = (action: (video: HTMLVideoElement) => void) => {
    if (ref.current) action(ref.current);
  }

  const play = () => videoAction(video => video.play());
  const pause = () => videoAction(video => video.pause());
  const reset = () => videoAction(video => video.currentTime = 0);
  const increaseSpeed = () => videoAction(video => video.playbackRate += 0.5);
  const decreaseSpeed = () => videoAction(video => video.playbackRate -= 0.5);
  const setVolume = (volume: number) => videoAction(video => video.volume = volume);
  const fullscreen = () => videoAction(video => video.requestFullscreen());
  const setSpeed = (speed: number) => videoAction(video => video.playbackRate = speed);

  return {
    ref,
    isPaused: !!ref.current?.paused,
    currentSpeed: ref.current?.playbackRate ?? 1,
    currentVolume: ref.current?.volume ?? 0,
    setVolume,
    setSpeed,
    play,
    pause,
    reset,
    increaseSpeed,
    decreaseSpeed,
    toggleFullscreen: fullscreen,
  }
}

export default useVideo;

Javascript

use-async.js

//@ts-nocheck
import { useRef } from "react";

function useVideo() {
  const ref = useRef<HTMLVideoElement>(null);

  const videoAction = (action) => {
    if (ref.current) action(ref.current);
  }

  const play = () => videoAction(video => video.play());
  const pause = () => videoAction(video => video.pause());
  const reset = () => videoAction(video => video.currentTime = 0);
  const increaseSpeed = () => videoAction(video => video.playbackRate += 0.5);
  const decreaseSpeed = () => videoAction(video => video.playbackRate -= 0.5);
  const setVolume = (volume) => videoAction(video => video.volume = volume);
  const fullscreen = () => videoAction(video => video.requestFullscreen());
  const setSpeed = (speed) => videoAction(video => video.playbackRate = speed);

  return {
    ref,
    isPaused: !!ref.current?.paused,
    currentSpeed: ref.current?.playbackRate ?? 1,
    currentVolume: ref.current?.volume ?? 0,
    setVolume,
    setSpeed,
    play,
    pause,
    reset,
    increaseSpeed,
    decreaseSpeed,
    toggleFullscreen: fullscreen,
  }
}

export default useVideo;