hook to autoplay a video

useAutoplay.ts

import { MutableRefObject, useEffect } from 'react';

const AUTO_PLAY_DELAY = 1500;
const PLAY_ERROR_NO_INTERACTION =
  "play() failed because the user didn't interact with the document first";

export default function useAutoplay(
  videoRef: MutableRefObject<HTMLVideoElement | HTMLAudioElement | undefined>,
  isActive: boolean,
) {
  useEffect(() => {
    if (videoRef.current) {
      if (isActive) {
        const timeout = setTimeout(() => {
          if (videoRef.current) {
            videoRef.current.play().catch((error: Error) => {
              const isAcceptableError =
                typeof error.message === 'string' &&
                error.message.includes(PLAY_ERROR_NO_INTERACTION);
              if (!isAcceptableError) {
                throw error;
              }
            });
          }
        }, AUTO_PLAY_DELAY);
        return () => {
          clearTimeout(timeout);
        };
      } else {
        videoRef.current.pause();
      }
    }
  }, [videoRef, isActive]);
}