431 lines
17 KiB
TypeScript
431 lines
17 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import { IReduxState, IStore } from '../../app/types';
|
|
import { getAvatarFont, getAvatarInitialsColor } from '../../base/avatar/components/web/styles';
|
|
import { browser } from '../../base/lib-jitsi-meet';
|
|
import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants/functions';
|
|
import { getDisplayNameColor } from '../../display-name/components/web/styles';
|
|
import { getThumbnailBackgroundColor } from '../../filmstrip/functions.web';
|
|
import { getLargeVideoParticipant } from '../../large-video/functions';
|
|
import { isPrejoinPageVisible } from '../../prejoin/functions.any';
|
|
import { handlePiPLeaveEvent, handlePipEnterEvent, handleWindowBlur, handleWindowFocus } from '../actions';
|
|
import { getPiPVideoTrack, shouldShowPiPAvatar } from '../functions';
|
|
import { useCanvasAvatar } from '../hooks';
|
|
import logger from '../logger';
|
|
import type { IWebKitPictureInPictureVideoElement } from '../types';
|
|
|
|
/**
|
|
* Electron-only delay before reacting to window focus, so that the browser's
|
|
* leavepictureinpicture event is processed first (see the comment at the usage site).
|
|
*/
|
|
const FOCUS_CHECK_DELAY_MS = 100;
|
|
|
|
/**
|
|
* Interval between canvas frame re-publish attempts while WebKit asynchronously wires the video
|
|
* element to the canvas stream (see the comment at the usage site for why polling is needed).
|
|
*/
|
|
const WEBKIT_REPUBLISH_INTERVAL_MS = 50;
|
|
|
|
/**
|
|
* Cap on canvas frame re-publish attempts (a ~1.25 s total budget). One attempt has been enough
|
|
* in practice (Safari 26.6); the bound only prevents polling forever against a dead stream.
|
|
*/
|
|
const WEBKIT_REPUBLISH_MAX_ATTEMPTS = 25;
|
|
|
|
const baseVideoStyle = {
|
|
width: '1px',
|
|
height: '1px',
|
|
pointerEvents: 'none' as const,
|
|
opacity: 0,
|
|
position: 'absolute' as const
|
|
};
|
|
|
|
const useStyles = makeStyles()(() => {
|
|
return {
|
|
hiddenVideo: {
|
|
...baseVideoStyle,
|
|
left: '-9999px',
|
|
top: '-9999px'
|
|
},
|
|
// Safari 26.5.2 was observed to produce black PiP content when this video was positioned offscreen.
|
|
webKitVideo: {
|
|
...baseVideoStyle,
|
|
left: 0,
|
|
top: 0
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Component that renders a hidden video element for Picture-in-Picture.
|
|
* Automatically switches between real video track and canvas-based avatar
|
|
* depending on video availability.
|
|
*
|
|
* @returns {JSX.Element} The hidden video element.
|
|
*/
|
|
const PiPVideoElement: React.FC = () => {
|
|
const { classes, theme } = useStyles();
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const previousTrackRef = useRef<any>(null);
|
|
|
|
// True only when PiP was dismissed while the tab was still hidden; reset once the tab becomes
|
|
// visible again. Safari 26.5.2 fires `playing` after such a dismissal, which would immediately
|
|
// reopen PiP, so automatic re-entry is suppressed while this is set.
|
|
const webKitPiPDismissedWhileHiddenRef = useRef(false);
|
|
|
|
// Redux selectors.
|
|
const isOnPrejoin = useSelector(isPrejoinPageVisible);
|
|
const localParticipant = useSelector(getLocalParticipant);
|
|
const largeVideoParticipant = useSelector(getLargeVideoParticipant);
|
|
|
|
// Use local participant during prejoin, otherwise large video participant.
|
|
const participant = isOnPrejoin ? localParticipant : largeVideoParticipant;
|
|
|
|
// Get appropriate video track based on prejoin state.
|
|
const videoTrack = useSelector((state: IReduxState) =>
|
|
getPiPVideoTrack(state, participant)
|
|
);
|
|
const displayName = useSelector((state: IReduxState) =>
|
|
participant?.id
|
|
? getParticipantDisplayName(state, participant.id)
|
|
: ''
|
|
);
|
|
const customAvatarBackgrounds = useSelector((state: IReduxState) =>
|
|
state['features/dynamic-branding']?.avatarBackgrounds || []
|
|
);
|
|
|
|
const dispatch: IStore['dispatch'] = useDispatch();
|
|
const avatarFont = getAvatarFont(theme);
|
|
const fontFamily = (avatarFont as any).fontFamily ?? 'Inter, sans-serif';
|
|
const initialsColor = getAvatarInitialsColor(theme);
|
|
const displayNameColor = getDisplayNameColor(theme);
|
|
const shouldShowAvatar = shouldShowPiPAvatar(videoTrack);
|
|
|
|
const { canvasStreamRef, publishFrame } = useCanvasAvatar({
|
|
participant,
|
|
displayName,
|
|
customAvatarBackgrounds,
|
|
backgroundColor: getThumbnailBackgroundColor(theme),
|
|
fontFamily,
|
|
initialsColor,
|
|
displayNameColor,
|
|
shouldShowAvatar
|
|
});
|
|
|
|
/**
|
|
* Effect: Handle switching between real video track and canvas avatar stream.
|
|
*/
|
|
useEffect(() => {
|
|
const videoElement = videoRef.current;
|
|
|
|
if (!videoElement) {
|
|
return;
|
|
}
|
|
|
|
const previousTrack = previousTrackRef.current;
|
|
let republishInterval: number | undefined;
|
|
|
|
// Detach previous track.
|
|
if (previousTrack?.jitsiTrack) {
|
|
try {
|
|
previousTrack.jitsiTrack.detach(videoElement);
|
|
} catch (error) {
|
|
logger.error('Error detaching previous track:', error);
|
|
}
|
|
}
|
|
|
|
if (shouldShowAvatar) {
|
|
// Use canvas stream for avatar.
|
|
// Access ref inside effect - stream is created in useCanvasAvatar's effect.
|
|
const canvasStream = canvasStreamRef.current;
|
|
|
|
// Only set srcObject if it's different to avoid interrupting playback.
|
|
if (canvasStream && videoElement.srcObject !== canvasStream) {
|
|
videoElement.srcObject = canvasStream;
|
|
publishFrame();
|
|
|
|
// Safari wires the element to a new srcObject asynchronously and silently drops canvas
|
|
// frames published before that completes: streams never buffer for late sinks (W3C
|
|
// resolution in w3c/mediacapture-transform#114) and the media-provider fetch runs
|
|
// "in parallel" per the HTML spec, so no readiness event exists — republishing until
|
|
// the element itself reports data is the only reliable strategy. Chromium captures
|
|
// synchronously on requestFrame() and redelivers the current frame to late sinks,
|
|
// so it needs no retry.
|
|
if (browser.isWebKitBased()) {
|
|
let attempts = 0;
|
|
|
|
republishInterval = window.setInterval(() => {
|
|
const done = videoElement.readyState >= videoElement.HAVE_CURRENT_DATA
|
|
|| videoElement.srcObject !== canvasStream;
|
|
|
|
if (done || ++attempts > WEBKIT_REPUBLISH_MAX_ATTEMPTS) {
|
|
window.clearInterval(republishInterval);
|
|
republishInterval = undefined;
|
|
|
|
if (!done) {
|
|
logger.warn('Canvas stream produced no data after repeated frame requests');
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
publishFrame();
|
|
}, WEBKIT_REPUBLISH_INTERVAL_MS);
|
|
}
|
|
}
|
|
} else if (videoTrack?.jitsiTrack) {
|
|
// Attach real video track.
|
|
videoTrack.jitsiTrack.attach(videoElement)
|
|
.catch((error: Error) => {
|
|
logger.error('Error attaching video track:', error);
|
|
});
|
|
}
|
|
|
|
previousTrackRef.current = videoTrack;
|
|
|
|
// Cleanup on unmount or track change.
|
|
return () => {
|
|
if (republishInterval) {
|
|
window.clearInterval(republishInterval);
|
|
}
|
|
if (videoTrack?.jitsiTrack && videoElement) {
|
|
try {
|
|
videoTrack.jitsiTrack.detach(videoElement);
|
|
} catch (error) {
|
|
logger.error('Error during cleanup:', error);
|
|
}
|
|
}
|
|
};
|
|
}, [ videoTrack, shouldShowAvatar, publishFrame ]);
|
|
|
|
/**
|
|
* Effect: Use WebKit presentation modes to enter and leave Video PiP on tab switches.
|
|
*
|
|
*/
|
|
useEffect(() => {
|
|
const videoElement = videoRef.current as IWebKitPictureInPictureVideoElement | null;
|
|
|
|
if (!videoElement
|
|
|| !browser.isWebKitBased()
|
|
|| typeof videoElement.webkitSupportsPresentationMode !== 'function'
|
|
|| typeof videoElement.webkitSetPresentationMode !== 'function') {
|
|
return;
|
|
}
|
|
|
|
let enteringWebKitPiP = false;
|
|
let isPiPActive = false;
|
|
|
|
const resumeWebKitPiPPlayback = () => {
|
|
if (videoElement.webkitPresentationMode !== 'picture-in-picture'
|
|
|| !videoElement.paused) {
|
|
return;
|
|
}
|
|
|
|
// A muted live-MediaStream mirror has no meaningful paused state: any pause while in PiP
|
|
// (Safari's hidden-tab interruption churn around the PiP transition, media keys) just
|
|
// freezes the PiP frame, so playback is always resumed.
|
|
videoElement.play()
|
|
.catch(error => logger.warn('Failed to resume WebKit Picture-in-Picture video:', error));
|
|
};
|
|
const onEnterPiP = () => {
|
|
if (!isPiPActive) {
|
|
isPiPActive = true;
|
|
dispatch(handlePipEnterEvent());
|
|
}
|
|
};
|
|
const onLeavePiP = () => {
|
|
if (!isPiPActive) {
|
|
return;
|
|
}
|
|
|
|
isPiPActive = false;
|
|
dispatch(handlePiPLeaveEvent());
|
|
webKitPiPDismissedWhileHiddenRef.current = document.hidden;
|
|
|
|
};
|
|
const enterWebKitPiP = async () => {
|
|
if (enteringWebKitPiP || videoElement.webkitPresentationMode === 'picture-in-picture') {
|
|
return;
|
|
}
|
|
enteringWebKitPiP = true;
|
|
|
|
try {
|
|
if (videoElement.paused) {
|
|
// Safari pauses hidden MediaStream videos, but a rejected play() (autoplay policy)
|
|
// must not prevent the PiP entry attempt — WebKit does the final eligibility check
|
|
// and the playback recovery below resumes playback once PiP is entered.
|
|
await videoElement.play()
|
|
.catch(error => logger.warn('Failed to play video before entering WebKit PiP:', error));
|
|
}
|
|
|
|
// The tab may have become visible or PiP may have been dismissed while play() was pending.
|
|
if (!document.hidden || webKitPiPDismissedWhileHiddenRef.current) {
|
|
return;
|
|
}
|
|
|
|
const hasCurrentMedia = !videoElement.ended
|
|
&& videoElement.readyState >= videoElement.HAVE_CURRENT_DATA;
|
|
|
|
if (hasCurrentMedia
|
|
&& videoElement.webkitSupportsPresentationMode?.('picture-in-picture')) {
|
|
videoElement.webkitSetPresentationMode?.('picture-in-picture');
|
|
}
|
|
} catch (error) {
|
|
logger.warn('Failed to enter WebKit Picture-in-Picture:', error);
|
|
} finally {
|
|
enteringWebKitPiP = false;
|
|
}
|
|
};
|
|
const exitWebKitPiP = () => {
|
|
if (videoElement.webkitPresentationMode !== 'picture-in-picture') {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
videoElement.webkitSetPresentationMode?.('inline');
|
|
} catch (error) {
|
|
logger.warn('Failed to exit WebKit Picture-in-Picture:', error);
|
|
}
|
|
};
|
|
const onVisibilityChange = (event: Event) => {
|
|
if (!event.isTrusted) {
|
|
return;
|
|
}
|
|
|
|
if (document.hidden) {
|
|
if (!webKitPiPDismissedWhileHiddenRef.current) {
|
|
void enterWebKitPiP();
|
|
}
|
|
} else {
|
|
webKitPiPDismissedWhileHiddenRef.current = false;
|
|
exitWebKitPiP();
|
|
}
|
|
};
|
|
const onPlaying = (event: Event) => {
|
|
if (event.isTrusted && document.hidden && !webKitPiPDismissedWhileHiddenRef.current) {
|
|
void enterWebKitPiP();
|
|
}
|
|
};
|
|
const onWebKitPresentationModeChanged = () => {
|
|
if (videoElement.webkitPresentationMode === 'picture-in-picture') {
|
|
resumeWebKitPiPPlayback();
|
|
onEnterPiP();
|
|
} else {
|
|
onLeavePiP();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('visibilitychange', onVisibilityChange);
|
|
videoElement.addEventListener('pause', resumeWebKitPiPPlayback);
|
|
videoElement.addEventListener('playing', onPlaying);
|
|
videoElement.addEventListener('webkitpresentationmodechanged', onWebKitPresentationModeChanged);
|
|
|
|
return () => {
|
|
document.removeEventListener('visibilitychange', onVisibilityChange);
|
|
videoElement.removeEventListener('pause', resumeWebKitPiPPlayback);
|
|
videoElement.removeEventListener('playing', onPlaying);
|
|
videoElement.removeEventListener('webkitpresentationmodechanged', onWebKitPresentationModeChanged);
|
|
exitWebKitPiP();
|
|
};
|
|
}, [ dispatch ]);
|
|
|
|
/**
|
|
* Effect: Electron-only window blur/focus and visibility change listeners.
|
|
* Enters PiP on blur and exits on focus, matching the old AOT behavior.
|
|
*/
|
|
useEffect(() => {
|
|
const videoElement = videoRef.current;
|
|
|
|
if (!videoElement || !browser.isElectron()) {
|
|
return;
|
|
}
|
|
|
|
const onWindowBlur = () => dispatch(handleWindowBlur(videoElement));
|
|
const onWindowFocus = () => {
|
|
|
|
// In the use case where the PiP is closed by the 'X' or 'back to main window' buttons, this handler is
|
|
// called before the leavepictureinpicture handler. From there we call document.exitPictureInPicture()
|
|
// which seems to put Chrome into a weird state - document.exitPictureInPicture() never resolves, the
|
|
// leavepictureinpicture is never triggered and it is not possible to display PiP again.
|
|
// This is probably a browser bug. To workaround it we have the 100ms timeout here. This way this event
|
|
// is triggered after the leavepictureinpicture event and everything seems to work well.
|
|
setTimeout(() => {
|
|
dispatch(handleWindowFocus());
|
|
}, FOCUS_CHECK_DELAY_MS);
|
|
};
|
|
const onVisibilityChange = () => {
|
|
if (document.hidden) {
|
|
onWindowBlur();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('blur', onWindowBlur);
|
|
window.addEventListener('focus', onWindowFocus);
|
|
document.addEventListener('visibilitychange', onVisibilityChange);
|
|
|
|
// Check if window is already blurred on mount (handles PiP enable while app is in background).
|
|
// Wait for video to be ready before attempting PiP (canvas stream may not be attached yet).
|
|
const checkFocusAndEnterPiP = () => {
|
|
if (!document.hasFocus()) {
|
|
onWindowBlur();
|
|
}
|
|
};
|
|
|
|
if (videoElement.readyState >= 1) {
|
|
// Video already has metadata loaded (e.g., real video track was already attached).
|
|
checkFocusAndEnterPiP();
|
|
} else {
|
|
// Wait for video source to be ready (e.g., canvas stream being created).
|
|
videoElement.addEventListener('loadedmetadata', checkFocusAndEnterPiP, { once: true });
|
|
}
|
|
|
|
return () => {
|
|
window.removeEventListener('blur', onWindowBlur);
|
|
window.removeEventListener('focus', onWindowFocus);
|
|
document.removeEventListener('visibilitychange', onVisibilityChange);
|
|
videoElement.removeEventListener('loadedmetadata', checkFocusAndEnterPiP);
|
|
};
|
|
}, [ dispatch ]);
|
|
|
|
/**
|
|
* Effect: PiP enter/leave event listeners.
|
|
* Updates Redux state when browser PiP events occur.
|
|
*/
|
|
useEffect(() => {
|
|
const videoElement = videoRef.current;
|
|
|
|
if (!videoElement || browser.isWebKitBased()) {
|
|
return;
|
|
}
|
|
|
|
const onEnterPiP = () => {
|
|
dispatch(handlePipEnterEvent());
|
|
};
|
|
const onLeavePiP = () => {
|
|
dispatch(handlePiPLeaveEvent());
|
|
};
|
|
|
|
videoElement.addEventListener('enterpictureinpicture', onEnterPiP);
|
|
videoElement.addEventListener('leavepictureinpicture', onLeavePiP);
|
|
|
|
return () => {
|
|
videoElement.removeEventListener('enterpictureinpicture', onEnterPiP);
|
|
videoElement.removeEventListener('leavepictureinpicture', onLeavePiP);
|
|
};
|
|
}, [ dispatch ]);
|
|
|
|
return (
|
|
<video
|
|
autoPlay = { true }
|
|
className = { browser.isWebKitBased() ? classes.webKitVideo : classes.hiddenVideo }
|
|
id = 'pipVideo'
|
|
muted = { true }
|
|
playsInline = { true }
|
|
ref = { videoRef } />
|
|
);
|
|
};
|
|
|
|
export default PiPVideoElement;
|