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 = ( 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 && ( {!muteStates.video.enabled && (
<div className={styles.avatarContainer}> <div className={styles.avatarContainer}>
<Avatar <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 ( return (
<animated.div <animated.div
className={classNames(styles.videoTile, className, { className={classNames(styles.videoTile, className, {
@@ -220,6 +217,16 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
? Track.Source.Camera ? Track.Source.Camera
: Track.Source.ScreenShare : 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 && ( {!maximised && (
<VideoTileSettingsModal <VideoTileSettingsModal