Picture in Picture React Hook

usePictureInPicture.js

import { useState, useEffect } from 'react';

function usePictureInPicture(videoRef) {
  const [pictureInPictureEnabled, setPictureInPictureEnabled] = useState(false);

  useEffect(() => {
    if (!videoRef.current) return;
    const video = videoRef.current;

    function onEnterPictureInPicture() {
      setPictureInPictureEnabled(true);
    }

    function onLeavePictureInPicture() {
      setPictureInPictureEnabled(false);
    }

    video.addEventListener('enterpictureinpicture', onEnterPictureInPicture);
    video.addEventListener('leavepictureinpicture', onLeavePictureInPicture);

    return () => {
      video.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);
      video.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);
    };
  }, [videoRef]);

  function togglePictureInPicture() {
    if (!videoRef.current) return;
    const video = videoRef.current;
    if (pictureInPictureEnabled) {
      document.exitPictureInPicture();
    } else {
      video.requestPictureInPicture();
    }
  }

  return [pictureInPictureEnabled, togglePictureInPicture];
}