Restore call view mode after presentation end

ts/components/CallManager.stories.tsx

@@ -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'),

ts/components/CallManager.tsx

@@ -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
         }

ts/components/CallScreen.stories.tsx

@@ -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(

ts/components/CallScreen.tsx

@@ -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}

ts/components/CallingPip.stories.tsx

@@ -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);

ts/components/CallingPip.tsx

@@ -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 });