Reuse html element for local preview visuals

This commit is contained in:
Fedor Indutny 2024-10-01 15:17:43 -07:00 committed by GitHub
parent bb69f81b9f
commit 17c908bbf4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 86 additions and 109 deletions

View file

@ -13,7 +13,6 @@ import type {
SendGroupCallRaiseHandType,
SendGroupCallReactionType,
SetLocalAudioType,
SetLocalPreviewType,
SetLocalVideoType,
SetRendererCanvasType,
} from '../state/ducks/calling';
@ -119,7 +118,7 @@ export type PropsType = {
) => void;
setLocalAudio: (_: SetLocalAudioType) => void;
setLocalVideo: (_: SetLocalVideoType) => void;
setLocalPreview: (_: SetLocalPreviewType) => void;
setLocalPreviewContainer: (container: HTMLDivElement | null) => void;
setRendererCanvas: (_: SetRendererCanvasType) => void;
stickyControls: boolean;
switchToPresentationView: () => void;
@ -209,7 +208,7 @@ export function CallScreen({
sendGroupCallReaction,
setLocalAudio,
setLocalVideo,
setLocalPreview,
setLocalPreviewContainer,
setRendererCanvas,
stickyControls,
switchToPresentationView,
@ -294,15 +293,6 @@ export function CallScreen({
const [showControls, setShowControls] = useState(true);
const localVideoRef = useRef<HTMLVideoElement | null>(null);
useEffect(() => {
setLocalPreview({ element: localVideoRef });
return () => {
setLocalPreview({ element: undefined });
};
}, [setLocalPreview, setRendererCanvas]);
useEffect(() => {
if (
!showControls ||
@ -431,7 +421,10 @@ export function CallScreen({
)}
>
{isSendingVideo ? (
<video ref={localVideoRef} autoPlay />
<div
className="module-ongoing-call__local-preview-container"
ref={setLocalPreviewContainer}
/>
) : (
<CallBackgroundBlur avatarUrl={me.avatarUrl}>
<div className="module-calling__spacer module-calling__camera-is-off-spacer" />
@ -444,14 +437,13 @@ export function CallScreen({
);
} else {
localPreviewNode = isSendingVideo ? (
<video
<div
className={classNames(
'module-ongoing-call__footer__local-preview__video',
presentingSource &&
'module-ongoing-call__footer__local-preview__video--presenting'
)}
ref={localVideoRef}
autoPlay
ref={setLocalPreviewContainer}
/>
) : (
<CallBackgroundBlur avatarUrl={me.avatarUrl}>