From 6ebef28ad893ed3975866d6115c89a02818ea5f6 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 20 Nov 2023 20:42:27 -0500
Subject: [PATCH] Properly disable picture-in-picture controls

There were some outdated comments regarding Firefox's support of the disablePictureInPicture flag which I decided to clean up.
---
 src/room/VideoPreview.tsx    | 16 +++++++++++++++-
 src/video-grid/VideoTile.tsx | 13 ++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index d218ca7d3..4f54feb6c 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -106,7 +106,21 @@ export const VideoPreview: FC<Props> = ({
 
   const content = (
     <>
-      <video ref={videoEl} muted playsInline disablePictureInPicture />
+      <video
+        ref={videoEl}
+        muted
+        playsInline
+        // There's no reason for this to be focusable
+        tabIndex={-1}
+        // React supports the disablePictureInPicture attribute, but Firefox
+        // only recognizes a value of "true", whereas React sets it to the empty
+        // string. So we need to bypass React and set it specifically to "true".
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
+        disablepictureinpicture="true"
+      />
       {!muteStates.video.enabled && (
         <div className={styles.avatarContainer}>
           <Avatar
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index b19d94097..8695cf0bd 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -156,9 +156,6 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       }
     }
 
-    // Firefox doesn't respect the disablePictureInPicture attribute
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
-
     return (
       <animated.div
         className={classNames(styles.videoTile, className, {
@@ -220,6 +217,16 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
               ? Track.Source.Camera
               : Track.Source.ScreenShare
           }
+          // There's no reason for this to be focusable
+          tabIndex={-1}
+          // React supports the disablePictureInPicture attribute, but Firefox
+          // only recognizes a value of "true", whereas React sets it to the empty
+          // string. So we need to bypass React and set it specifically to "true".
+          // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line react/no-unknown-property
+          disablepictureinpicture="true"
         />
         {!maximised && (
           <VideoTileSettingsModal