Picture in picture API in all browsers that support it

picture-in-picture.js

const getPictureInPicture = () => {
  if (typeof document === "undefined") return { supported: false };

  const video = document.createElement("video");

  // if browser is chrome: https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
  if (document.pictureInPictureEnabled && !video.disablePictureInPicture) {
    return {
      supported: true,
      request: (video) => video.requestPictureInPicture(),
      exit: (video) => document.exitPictureInPicture(),
      isActive: (video) => video === document.pictureInPictureElement,
    };
  }

  // if browser is safari: https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
  if (typeof video.webkitSetPresentationMode === "function") {
    return {
      supported: true,
      request: (video) => video.webkitSetPresentationMode("picture-in-picture"),
      exit: (video) => video.webkitSetPresentationMode("inline"),
      isActive: (video) =>
        video.webkitPresentationMode === "picture-in-picture",
    };
  }

  // if browser is firefox: https://github.com/mozilla/standards-positions/issues/72
  return {
    supported: false,
  };
};

export default getPictureInPicture;