Picture in picture

src/components/Icon.tsx

@@ -36,6 +36,7 @@ export enum Icons {
   CASTING = "casting",
   CIRCLE_EXCLAMATION = "circle_exclamation",
   DOWNLOAD = "download",
+  PICTURE_IN_PICTURE = "pictureInPicture",
 }
 
 export interface IconProps {
@@ -79,6 +80,7 @@ const iconList: Record<Icons, string> = {
   circle_exclamation: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
   casting: "",
   download: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
+  pictureInPicture: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" fill="currentColor" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></svg>`,
 };
 
 function ChromeCastButton() {

src/setup/locales/en/translation.json

@@ -61,7 +61,8 @@
       "episodes": "Episodes",
       "source": "Source",
       "captions": "Captions",
-      "download": "Download"
+      "download": "Download",
+      "pictureInPicture": "Picture in Picture"
     },
     "popouts": {
       "sources": "Sources",

src/utils/detectFeatures.ts

@@ -38,3 +38,7 @@ export function canWebkitFullscreen(): boolean {
 export function canFullscreen(): boolean {
   return canFullscreenAnyElement() || canWebkitFullscreen();
 }
+
+export function canPictureInPicture(): boolean {
+  return "pictureInPictureEnabled" in document;
+}

src/video/components/VideoPlayer.tsx

@@ -31,6 +31,7 @@ import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderA
 import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
 import { CastingTextAction } from "@/video/components/actions/CastingTextAction";
 import { DownloadAction } from "@/video/components/actions/DownloadAction";
+import { PictureInPictureAction } from "@/video/components/actions/PictureInPictureAction";
 
 type Props = VideoPlayerBaseProps;
 
@@ -144,6 +145,7 @@ export function VideoPlayer(props: Props) {
                       <div />
                       <div className="flex items-center justify-center">
                         <DownloadAction />
+                        <PictureInPictureAction />
                         <CaptionsSelectionAction />
                         <SeriesSelectionAction />
                         <SourceSelectionAction />
@@ -161,6 +163,7 @@ export function VideoPlayer(props: Props) {
                       <ChromecastAction />
                       <AirplayAction />
                       <DownloadAction />
+                      <PictureInPictureAction />
                       <CaptionsSelectionAction />
                       <FullscreenAction />
                     </>

src/video/components/actions/DownloadAction.tsx

@@ -28,7 +28,7 @@ export function DownloadAction(props: Props) {
       href={isHLS ? undefined : sourceInterface.source?.url}
       rel="noreferrer"
       target="_blank"
-      download={title ? normalizeTitle(title) : undefined}
+      download={title ? `${normalizeTitle(title)}.mp4` : undefined}
     >
       <VideoPlayerIconButton
         className={props.className}

src/video/components/actions/PictureInPictureAction.tsx

@@ -0,0 +1,38 @@
+import { Icons } from "@/components/Icon";
+import { useIsMobile } from "@/hooks/useIsMobile";
+import { useTranslation } from "react-i18next";
+import { useControls } from "@/video/state/logic/controls";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useCallback } from "react";
+import { canPictureInPicture } from "@/utils/detectFeatures";
+import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
+
+interface Props {
+  className?: string;
+}
+
+export function PictureInPictureAction(props: Props) {
+  const { isMobile } = useIsMobile();
+  const { t } = useTranslation();
+
+  const descriptor = useVideoPlayerDescriptor();
+  const controls = useControls(descriptor);
+
+  const handleClick = useCallback(() => {
+    controls.togglePictureInPicture();
+  }, [controls]);
+
+  if (!canPictureInPicture()) return null;
+
+  return (
+    <VideoPlayerIconButton
+      className={props.className}
+      icon={Icons.PICTURE_IN_PICTURE}
+      onClick={handleClick}
+      disabled={false}
+      text={
+        isMobile ? (t("videoPlayer.buttons.pictureInPicture") as string) : ""
+      }
+    />
+  );
+}

src/video/state/init.ts

@@ -31,6 +31,7 @@ function initPlayer(): VideoPlayerState {
       isFocused: false,
       leftControlHovering: false,
       popoutBounds: null,
+      isPictureInPicture: false,
     },
 
     mediaPlaying: {

src/video/state/logic/controls.ts

@@ -13,6 +13,7 @@ export type ControlMethods = {
   setMeta(data?: VideoPlayerMeta): void;
   setCurrentEpisode(sId: string, eId: string): void;
   setDraggingTime(num: number): void;
+  togglePictureInPicture(): void;
 };
 
 export function useControls(
@@ -100,5 +101,9 @@ export function useControls(
         updateMeta(descriptor, state);
       }
     },
+    togglePictureInPicture() {
+      state.stateProvider?.togglePictureInPicture();
+      updateInterface(descriptor, state);
+    },
   };
 }

src/video/state/providers/castingStateProvider.ts

@@ -148,6 +148,10 @@ export function createCastingStateProvider(
         updateSource(descriptor, state);
       }
     },
+    togglePictureInPicture() {
+      controller?.togglePictureInPicture();
+      updateSource(descriptor, state);
+    },
     providerStart() {
       this.setVolume(getStoredVolume());
 

src/video/state/providers/providerTypes.ts

@@ -19,6 +19,7 @@ export type VideoPlayerStateController = {
   setCaption(id: string, url: string): void;
   clearCaption(): void;
   getId(): string;
+  togglePictureInPicture(): void;
 };
 
 export type VideoPlayerStateProvider = VideoPlayerStateController & {

src/video/state/providers/videoStateProvider.ts

@@ -5,6 +5,7 @@ import {
   canFullscreen,
   canFullscreenAnyElement,
   canWebkitFullscreen,
+  canPictureInPicture,
 } from "@/utils/detectFeatures";
 import { MWStreamType } from "@/backend/helpers/streams";
 import { updateInterface } from "@/video/state/logic/interface";
@@ -204,6 +205,20 @@ export function createVideoStateProvider(
         updateSource(descriptor, state);
       }
     },
+    async togglePictureInPicture() {
+      if (!canPictureInPicture()) return;
+      if (player !== document.pictureInPictureElement) {
+        try {
+          await player.requestPictureInPicture();
+        } catch {
+          state.interface.isPictureInPicture = false;
+        }
+        state.interface.isPictureInPicture = true;
+      } else {
+        await document.exitPictureInPicture();
+        state.interface.isPictureInPicture = false;
+      }
+    },
     providerStart() {
       this.setVolume(getStoredVolume());
 

src/video/state/types.ts

@@ -30,6 +30,7 @@ export type VideoPlayerState = {
     isFocused: boolean; // is the video player the users focus? (shortcuts only works when its focused)
     leftControlHovering: boolean; // is the cursor hovered over the left side of player controls
     popoutBounds: null | DOMRect; // bounding box of current popout
+    isPictureInPicture: boolean; // is picture in picture active
   };
 
   // state related to the playing state of the media