Restore call view mode after presentation end

This commit is contained in:
Fedor Indutny 2022-05-25 11:03:27 -07:00 committed by GitHub
parent 9e1528fa24
commit 80c90540f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 289 additions and 51 deletions

View file

@ -12,6 +12,7 @@ import {
CallEndedReason,
CallMode,
CallState,
CallViewMode,
GroupCallConnectionState,
GroupCallJoinState,
} from '../types/Calling';
@ -51,7 +52,11 @@ const getCommonActiveCallData = () => ({
hasLocalAudio: boolean('hasLocalAudio', true),
hasLocalVideo: boolean('hasLocalVideo', false),
localAudioLevel: select('localAudioLevel', [0, 0.5, 1], 0),
isInSpeakerView: boolean('isInSpeakerView', false),
viewMode: select(
'viewMode',
[CallViewMode.Grid, CallViewMode.Presentation, CallViewMode.Speaker],
CallViewMode.Grid
),
outgoingRing: boolean('outgoingRing', true),
pip: boolean('pip', false),
settingsDialogOpen: boolean('settingsDialogOpen', false),
@ -101,6 +106,8 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
setOutgoingRing: action('set-outgoing-ring'),
startCall: action('start-call'),
stopRingtone: action('stop-ringtone'),
switchToPresentationView: action('switch-to-presentation-view'),
switchFromPresentationView: action('switch-from-presentation-view'),
theme: ThemeType.light,
toggleParticipants: action('toggle-participants'),
togglePip: action('toggle-pip'),

View file

@ -91,6 +91,8 @@ export type PropsType = {
setPresenting: (_?: PresentedSource) => void;
setRendererCanvas: (_: SetRendererCanvasType) => void;
stopRingtone: () => unknown;
switchToPresentationView: () => void;
switchFromPresentationView: () => void;
hangUpActiveCall: () => void;
theme: ThemeType;
togglePip: () => void;
@ -127,6 +129,8 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
setRendererCanvas,
setOutgoingRing,
startCall,
switchToPresentationView,
switchFromPresentationView,
theme,
toggleParticipants,
togglePip,
@ -270,8 +274,9 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
setGroupCallVideoRequest={setGroupCallVideoRequestForConversation}
setLocalPreview={setLocalPreview}
setRendererCanvas={setRendererCanvas}
switchToPresentationView={switchToPresentationView}
switchFromPresentationView={switchFromPresentationView}
togglePip={togglePip}
toggleSpeakerView={toggleSpeakerView}
/>
);
}
@ -313,6 +318,8 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
setLocalVideo={setLocalVideo}
setPresenting={setPresenting}
stickyControls={showParticipantsList}
switchToPresentationView={switchToPresentationView}
switchFromPresentationView={switchFromPresentationView}
toggleScreenRecordingPermissionsDialog={
toggleScreenRecordingPermissionsDialog
}

View file

@ -10,6 +10,7 @@ import { action } from '@storybook/addon-actions';
import type { GroupCallRemoteParticipantType } from '../types/Calling';
import {
CallMode,
CallViewMode,
CallState,
GroupCallConnectionState,
GroupCallJoinState,
@ -45,7 +46,7 @@ type OverridePropsBase = {
hasLocalAudio?: boolean;
hasLocalVideo?: boolean;
localAudioLevel?: number;
isInSpeakerView?: boolean;
viewMode?: CallViewMode;
};
type DirectCallOverrideProps = OverridePropsBase & {
@ -126,9 +127,10 @@ const createActiveCallProp = (
[0, 0.5, 1],
overrideProps.localAudioLevel || 0
),
isInSpeakerView: boolean(
'isInSpeakerView',
overrideProps.isInSpeakerView || false
viewMode: select(
'viewMode',
[CallViewMode.Grid, CallViewMode.Speaker, CallViewMode.Presentation],
overrideProps.viewMode || CallViewMode.Grid
),
outgoingRing: true,
pip: false,
@ -172,6 +174,8 @@ const createProps = (
setPresenting: action('toggle-presenting'),
setRendererCanvas: action('set-renderer-canvas'),
stickyControls: boolean('stickyControls', false),
switchToPresentationView: action('switch-to-presentation-view'),
switchFromPresentationView: action('switch-from-presentation-view'),
toggleParticipants: action('toggle-participants'),
togglePip: action('toggle-pip'),
toggleScreenRecordingPermissionsDialog: action(

View file

@ -12,6 +12,7 @@ import type {
SetLocalVideoType,
SetRendererCanvasType,
} from '../state/ducks/calling';
import { isInSpeakerView } from '../state/selectors/calling';
import { Avatar } from './Avatar';
import { CallingHeader } from './CallingHeader';
import { CallingPreCallInfo, RingMode } from './CallingPreCallInfo';
@ -61,6 +62,8 @@ export type PropsType = {
setPresenting: (_?: PresentedSource) => void;
setRendererCanvas: (_: SetRendererCanvasType) => void;
stickyControls: boolean;
switchToPresentationView: () => void;
switchFromPresentationView: () => void;
toggleParticipants: () => void;
togglePip: () => void;
toggleScreenRecordingPermissionsDialog: () => unknown;
@ -120,6 +123,8 @@ export const CallScreen: React.FC<PropsType> = ({
setPresenting,
setRendererCanvas,
stickyControls,
switchToPresentationView,
switchFromPresentationView,
toggleParticipants,
togglePip,
toggleScreenRecordingPermissionsDialog,
@ -131,18 +136,17 @@ export const CallScreen: React.FC<PropsType> = ({
hasLocalAudio,
hasLocalVideo,
localAudioLevel,
isInSpeakerView,
presentingSource,
remoteParticipants,
showNeedsScreenRecordingPermissionsWarning,
showParticipantsList,
} = activeCall;
useActivateSpeakerViewOnPresenting(
useActivateSpeakerViewOnPresenting({
remoteParticipants,
isInSpeakerView,
toggleSpeakerView
);
switchToPresentationView,
switchFromPresentationView,
});
const activeCallShortcuts = useActiveCallShortcuts(hangUpActiveCall);
useKeyboardShortcuts(activeCallShortcuts);
@ -293,7 +297,7 @@ export const CallScreen: React.FC<PropsType> = ({
<GroupCallRemoteParticipants
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
i18n={i18n}
isInSpeakerView={isInSpeakerView}
isInSpeakerView={isInSpeakerView(activeCall)}
remoteParticipants={activeCall.remoteParticipants}
setGroupCallVideoRequest={setGroupCallVideoRequest}
remoteAudioLevels={activeCall.remoteAudioLevels}
@ -448,7 +452,7 @@ export const CallScreen: React.FC<PropsType> = ({
>
<CallingHeader
i18n={i18n}
isInSpeakerView={isInSpeakerView}
isInSpeakerView={isInSpeakerView(activeCall)}
isGroupCall={isGroupCall}
message={headerMessage}
participantCount={participantCount}

View file

@ -14,6 +14,7 @@ import { CallingPip } from './CallingPip';
import type { ActiveCallType } from '../types/Calling';
import {
CallMode,
CallViewMode,
CallState,
GroupCallConnectionState,
GroupCallJoinState,
@ -40,7 +41,11 @@ const getCommonActiveCallData = () => ({
hasLocalAudio: boolean('hasLocalAudio', true),
hasLocalVideo: boolean('hasLocalVideo', false),
localAudioLevel: select('localAudioLevel', [0, 0.5, 1], 0),
isInSpeakerView: boolean('isInSpeakerView', false),
viewMode: select(
'viewMode',
[CallViewMode.Grid, CallViewMode.Speaker, CallViewMode.Presentation],
CallViewMode.Grid
),
joinedAt: Date.now(),
outgoingRing: true,
pip: true,
@ -67,8 +72,9 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
setGroupCallVideoRequest: action('set-group-call-video-request'),
setLocalPreview: action('set-local-preview'),
setRendererCanvas: action('set-renderer-canvas'),
switchFromPresentationView: action('switch-to-presentation-view'),
switchToPresentationView: action('switch-to-presentation-view'),
togglePip: action('toggle-pip'),
toggleSpeakerView: action('toggleSpeakerView'),
});
const story = storiesOf('Components/CallingPip', module);

View file

@ -57,8 +57,9 @@ export type PropsType = {
setGroupCallVideoRequest: (_: Array<GroupCallVideoRequest>) => void;
setLocalPreview: (_: SetLocalPreviewType) => void;
setRendererCanvas: (_: SetRendererCanvasType) => void;
switchToPresentationView: () => void;
switchFromPresentationView: () => void;
togglePip: () => void;
toggleSpeakerView: () => void;
};
const PIP_HEIGHT = 156;
@ -75,8 +76,9 @@ export const CallingPip = ({
setGroupCallVideoRequest,
setLocalPreview,
setRendererCanvas,
switchToPresentationView,
switchFromPresentationView,
togglePip,
toggleSpeakerView,
}: PropsType): JSX.Element | null => {
const videoContainerRef = React.useRef<null | HTMLDivElement>(null);
const localVideoRef = React.useRef(null);
@ -88,11 +90,11 @@ export const CallingPip = ({
offsetY: PIP_TOP_MARGIN,
});
useActivateSpeakerViewOnPresenting(
activeCall.remoteParticipants,
activeCall.isInSpeakerView,
toggleSpeakerView
);
useActivateSpeakerViewOnPresenting({
remoteParticipants: activeCall.remoteParticipants,
switchToPresentationView,
switchFromPresentationView,
});
React.useEffect(() => {
setLocalPreview({ element: localVideoRef });