Merge pull request #1913 from robintown/disable-pip

Properly disable picture-in-picture controls

src/room/VideoPreview.tsx

@@ -108,7 +108,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

src/video-grid/VideoTile.tsx

@@ -171,9 +171,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, {
@@ -252,6 +249,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