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

@@ -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