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