Add paginated calling grid for group calls

This commit is contained in:
trevor-signal 2023-11-13 09:56:48 -05:00 committed by GitHub
parent 9c3d404c82
commit cf5b3f78b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 1237 additions and 476 deletions

View file

@ -14,7 +14,7 @@ import type {
SetRendererCanvasType,
} from '../state/ducks/calling';
import { Avatar, AvatarSize } from './Avatar';
import { CallingHeader } from './CallingHeader';
import { CallingHeader, getCallViewIconClassname } from './CallingHeader';
import { CallingPreCallInfo, RingMode } from './CallingPreCallInfo';
import { CallingButton, CallingButtonType } from './CallingButton';
import { Button, ButtonVariant } from './Button';
@ -46,7 +46,10 @@ import type { LocalizerType } from '../types/Util';
import { NeedsScreenRecordingPermissionsModal } from './NeedsScreenRecordingPermissionsModal';
import { missingCaseError } from '../util/missingCaseError';
import * as KeyboardLayout from '../services/keyboardLayout';
import { useActivateSpeakerViewOnPresenting } from '../hooks/useActivateSpeakerViewOnPresenting';
import {
usePresenter,
useActivateSpeakerViewOnPresenting,
} from '../hooks/useActivateSpeakerViewOnPresenting';
import {
CallingAudioIndicator,
SPEAKING_LINGER_MS,
@ -57,6 +60,8 @@ import {
} from '../hooks/useKeyboardShortcuts';
import { useValueAtFixedRate } from '../hooks/useValueAtFixedRate';
import { isReconnecting as callingIsReconnecting } from '../util/callingIsReconnecting';
import { usePrevious } from '../hooks/usePrevious';
import { useCallingToasts } from './CallingToast';
export type PropsType = {
activeCall: ActiveCallType;
@ -83,7 +88,7 @@ export type PropsType = {
togglePip: () => void;
toggleScreenRecordingPermissionsDialog: () => unknown;
toggleSettings: () => void;
toggleSpeakerView: () => void;
changeCallView: (mode: CallViewMode) => void;
};
export const isInSpeakerView = (
@ -123,6 +128,7 @@ function CallDuration({
export function CallScreen({
activeCall,
changeCallView,
getGroupCallVideoFrameSource,
getPresentingSources,
groupMembers,
@ -143,7 +149,6 @@ export function CallScreen({
togglePip,
toggleScreenRecordingPermissionsDialog,
toggleSettings,
toggleSpeakerView,
}: PropsType): JSX.Element {
const {
conversation,
@ -253,6 +258,7 @@ export function CallScreen({
useReconnectingToast({ activeCall, i18n });
useScreenSharingStoppedToast({ activeCall, i18n });
useViewModeChangedToast({ activeCall, i18n });
const currentPresenter = remoteParticipants.find(
participant => participant.presenting
@ -315,9 +321,9 @@ export function CallScreen({
activeCall.connectionState === GroupCallConnectionState.Connected;
remoteParticipantsElement = (
<GroupCallRemoteParticipants
callViewMode={activeCall.viewMode}
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
i18n={i18n}
isInSpeakerView={isInSpeakerView(activeCall)}
remoteParticipants={activeCall.remoteParticipants}
setGroupCallVideoRequest={setGroupCallVideoRequest}
remoteAudioLevels={activeCall.remoteAudioLevels}
@ -470,7 +476,8 @@ export function CallScreen({
)}`,
`module-ongoing-call__container--${
hasCallStarted ? 'call-started' : 'call-not-started'
}`
}`,
{ 'module-ongoing-call__container--hide-controls': !showControls }
)}
onFocus={() => {
setShowControls(true);
@ -493,14 +500,14 @@ export function CallScreen({
className={classNames('module-ongoing-call__header', controlsFadeClass)}
>
<CallingHeader
callViewMode={activeCall.viewMode}
changeCallView={changeCallView}
i18n={i18n}
isInSpeakerView={isInSpeakerView(activeCall)}
isGroupCall={isGroupCall}
participantCount={participantCount}
title={headerTitle}
togglePip={togglePip}
toggleSettings={toggleSettings}
toggleSpeakerView={toggleSpeakerView}
/>
</div>
{isRinging && (
@ -625,3 +632,56 @@ function renderDuration(ms: number): string {
}
return `${mins}:${secs}`;
}
function useViewModeChangedToast({
activeCall,
i18n,
}: {
activeCall: ActiveCallType;
i18n: LocalizerType;
}): void {
const { viewMode } = activeCall;
const previousViewMode = usePrevious(viewMode, viewMode);
const presenterAci = usePresenter(activeCall.remoteParticipants);
const VIEW_MODE_CHANGED_TOAST_KEY = 'view-mode-changed';
const { showToast, hideToast } = useCallingToasts();
useEffect(() => {
if (viewMode !== previousViewMode) {
if (
// If this is an automated change to presentation mode, don't show toast
viewMode === CallViewMode.Presentation ||
// if this is an automated change away from presentation mode, don't show toast
(previousViewMode === CallViewMode.Presentation && !presenterAci)
) {
return;
}
hideToast(VIEW_MODE_CHANGED_TOAST_KEY);
showToast({
key: VIEW_MODE_CHANGED_TOAST_KEY,
content: (
<div className="CallingToast__viewChanged">
<span
className={classNames(
'CallingToast__viewChanged__icon',
getCallViewIconClassname(viewMode)
)}
/>
{i18n('icu:calling__view_mode--updated')}
</div>
),
autoClose: true,
});
}
}, [
showToast,
hideToast,
i18n,
activeCall,
viewMode,
previousViewMode,
presenterAci,
]);
}