Merge pull request #2 from beef331/pip-sable

Allow user to control whether Picture In Picture is enabled or disabled

Author: wrigglebug

src/room/VideoPreview.tsx

@@ -11,6 +11,8 @@ import { facingModeFromLocalTrack, type LocalVideoTrack } from "livekit-client";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
+import { allowPipSetting, useSetting, } from "../settings/settings";
+
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -58,6 +60,7 @@ export const VideoPreview: FC<Props> = ({
     () => videoEnabled && !videoTrack,
     [videoEnabled, videoTrack],
   );
+  const [allowPip] = useSetting(allowPipSetting);
 
   return (
     <div className={classNames(styles.preview)} ref={previewRef}>
@@ -73,7 +76,7 @@ export const VideoPreview: FC<Props> = ({
         playsInline
         // There's no reason for this to be focusable
         tabIndex={-1}
-        disablePictureInPicture
+        disablePictureInPicture={!allowPip}
       />
       {(!videoEnabled || cameraIsStarting) && (
         <>

src/settings/SettingsModal.tsx

@@ -24,6 +24,7 @@ import {
   soundEffectVolume as soundEffectVolumeSetting,
   backgroundBlur as backgroundBlurSetting,
   developerMode,
+  allowPipSetting,
 } from "./settings";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
@@ -169,11 +170,33 @@ export const SettingsModal: FC<Props> = ({
     ),
   };
 
+  const PipSetting: React.FC = (): ReactNode => {
+    const [allowPip, setAllowPip] = useSetting(allowPipSetting);
+
+    return (
+      <>
+      <FieldRow>
+      <InputField
+      id="allowPip"
+      label={t(
+        "settings.allow_pip_label",
+        "Allow Browser Picture In Picture",
+      )}
+      type="checkbox"
+      checked={allowPip}
+      onChange={(e): void => setAllowPip(e.target.checked)}
+      />
+      </FieldRow>
+      </>
+    );
+  };
+
   const videoTab: Tab<SettingsTab> = {
     key: "video",
     name: t("common.video"),
     content: (
       <>
+        <PipSetting />
         <Form>
           <DeviceSelection
             device={devices.videoInput}

src/settings/settings.ts

@@ -145,3 +145,8 @@ export const customLivekitUrl = new Setting<string | null>(
   "custom-livekit-url",
   null,
 );
+
+export const allowPipSetting = new Setting<boolean>(
+  "allow-pip",
+  false
+);

src/tile/MediaView.tsx

@@ -21,6 +21,7 @@ import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import {
   showConnectionStats as showConnectionStatsSetting,
   showHandRaisedTimer,
+  allowPipSetting,
   useSetting,
 } from "../settings/settings";
 import { type ReactionOption } from "../reactions";
@@ -86,7 +87,7 @@ export const MediaView: FC<Props> = ({
   const { t } = useTranslation();
   const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
   const [showConnectionStats] = useSetting(showConnectionStatsSetting);
-
+  const [allowPip] = useSetting(allowPipSetting);
   const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
   return (
@@ -114,7 +115,7 @@ export const MediaView: FC<Props> = ({
             trackRef={video}
             // There's no reason for this to be focusable
             tabIndex={-1}
-            disablePictureInPicture
+            disablePictureInPicture={!allowPip}
             style={{ display: video && videoEnabled ? "block" : "none" }}
             data-testid="video"
           />