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.
This commit is contained in:
Robin
2023-11-20 20:42:27 -05:00
parent aa8ef57ee0
commit 6ebef28ad8
2 changed files with 25 additions and 4 deletions

View File

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

View File

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