Restore call view mode after presentation end
This commit is contained in:
parent
9e1528fa24
commit
80c90540f6
13 changed files with 289 additions and 51 deletions
|
@ -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'),
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 });
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue