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:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user