Merge pull request #2 from beef331/pip

Add setting to control picture in picture setting for videos

Author: wrigglebug

src/room/VideoPreview.tsx

@@ -11,6 +11,11 @@ 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";
@@ -44,6 +49,8 @@ export const VideoPreview: FC<Props> = ({
 
   const videoEl = useRef<HTMLVideoElement | null>(null);
 
+  const [allowPip] = useSetting(allowPipSetting);
+
   useEffect(() => {
     // Effect to connect the videoTrack with the video element.
     if (videoEl.current) {
@@ -73,7 +80,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

@@ -25,6 +25,7 @@ import {
   soundEffectVolume as soundEffectVolumeSetting,
   backgroundBlur as backgroundBlurSetting,
   developerMode,
+  allowPipSetting,
   advancedScreenShare as advancedScreenShareSetting,
   screenShareResolution as screenShareResolutionSetting,
   screenShareFramerate as screenShareFramerateSetting,
@@ -298,6 +299,28 @@ 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 devices = useMediaDevices();
   useEffect(() => {
     if (open) devices.requestDeviceNames();
@@ -382,6 +405,7 @@ export const SettingsModal: FC<Props> = ({
     name: t("common.video"),
     content: (
       <>
+        <PipSetting />
         <Form>
           <DeviceSelection
             device={devices.videoInput}

src/settings/settings.ts

@@ -227,6 +227,11 @@ export const autoGainControlSetting = new Setting<boolean>(
   true,
 );
 
+export const allowPipSetting = new Setting<boolean>(
+  "allow-pip",
+  false
+);
+
 /**
  * Seed setting defaults from config.json's media_quality section.
  * Call this after Config.init() has resolved.

src/tile/MediaView.tsx

@@ -21,6 +21,7 @@ import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import {
   showConnectionStats,
   showHandRaisedTimer,
+  allowPipSetting,
   useSetting,
 } from "../settings/settings";
 import { type ReactionOption } from "../reactions";
@@ -86,6 +87,7 @@ export const MediaView: FC<Props> = ({
   const { t } = useTranslation();
   const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
   const [showConnectioStats] = useSetting(showConnectionStats);
+  const [allowPip] = useSetting(allowPipSetting);
 
   const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
@@ -114,7 +116,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"
           />