Reuse html element for local preview visuals
This commit is contained in:
parent
bb69f81b9f
commit
17c908bbf4
14 changed files with 86 additions and 109 deletions
|
@ -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}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue