Blur participant videos when calls are reconnecting

This commit is contained in:
trevor-signal 2023-10-16 13:58:51 -04:00 committed by GitHub
parent 4ea0970e54
commit 777b9d52e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 68 additions and 21 deletions

View file

@ -2,6 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useRef, useEffect } from 'react';
import classNames from 'classnames';
import type { SetRendererCanvasType } from '../state/ducks/calling';
import type { ConversationType } from '../state/ducks/conversations';
import type { LocalizerType } from '../types/Util';
@ -12,6 +13,7 @@ type PropsType = {
conversation: ConversationType;
hasRemoteVideo: boolean;
i18n: LocalizerType;
isReconnecting: boolean;
setRendererCanvas: (_: SetRendererCanvasType) => void;
};
@ -19,6 +21,7 @@ export function DirectCallRemoteParticipant({
conversation,
hasRemoteVideo,
i18n,
isReconnecting,
setRendererCanvas,
}: PropsType): JSX.Element {
const remoteVideoRef = useRef<HTMLCanvasElement | null>(null);
@ -32,7 +35,11 @@ export function DirectCallRemoteParticipant({
return hasRemoteVideo ? (
<canvas
className="module-ongoing-call__remote-video-enabled"
className={classNames(
'module-ongoing-call__remote-video-enabled',
isReconnecting &&
'module-ongoing-call__remote-video-enabled--reconnecting'
)}
ref={remoteVideoRef}
/>
) : (