Refactor screen share picker internals

ts/components/CallManager.stories.tsx

@@ -120,17 +120,18 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
   playRingtone: action('play-ringtone'),
   removeClient: action('remove-client'),
   blockClient: action('block-client'),
+  cancelPresenting: action('cancel-presenting'),
   renderDeviceSelection: () => <div />,
   renderEmojiPicker: () => <>EmojiPicker</>,
   renderReactionPicker: () => <div />,
   sendGroupCallRaiseHand: action('send-group-call-raise-hand'),
   sendGroupCallReaction: action('send-group-call-reaction'),
+  selectPresentingSource: action('select-presenting-source'),
   setGroupCallVideoRequest: action('set-group-call-video-request'),
   setIsCallActive: action('set-is-call-active'),
   setLocalAudio: action('set-local-audio'),
   setLocalPreview: action('set-local-preview'),
   setLocalVideo: action('set-local-video'),
-  setPresenting: action('toggle-presenting'),
   setRendererCanvas: action('set-renderer-canvas'),
   setOutgoingRing: action('set-outgoing-ring'),
   showContactModal: action('show-contact-modal'),

ts/components/CallManager.tsx

@@ -16,7 +16,6 @@ import type {
   CallingConversationType,
   CallViewMode,
   GroupCallVideoRequest,
-  PresentedSource,
 } from '../types/Calling';
 import {
   CallEndedReason,
@@ -105,6 +104,7 @@ export type PropsType = {
   batchUserAction: (payload: BatchUserActionPayloadType) => void;
   bounceAppIconStart: () => unknown;
   bounceAppIconStop: () => unknown;
+  cancelPresenting: () => void;
   declineCall: (_: DeclineCallType) => void;
   denyUser: (payload: PendingUserActionPayloadType) => void;
   hasInitialLoadCompleted: boolean;
@@ -120,6 +120,7 @@ export type PropsType = {
   playRingtone: () => unknown;
   removeClient: (payload: RemoveClientType) => void;
   blockClient: (payload: RemoveClientType) => void;
+  selectPresentingSource: (id: string) => void;
   sendGroupCallRaiseHand: (payload: SendGroupCallRaiseHandType) => void;
   sendGroupCallReaction: (payload: SendGroupCallReactionType) => void;
   setGroupCallVideoRequest: (_: SetGroupCallVideoRequestType) => void;
@@ -128,7 +129,6 @@ export type PropsType = {
   setLocalVideo: (_: SetLocalVideoType) => void;
   setLocalPreview: (_: SetLocalPreviewType) => void;
   setOutgoingRing: (_: boolean) => void;
-  setPresenting: (_?: PresentedSource) => void;
   setRendererCanvas: (_: SetRendererCanvasType) => void;
   showShareCallLinkViaSignal: (
     callLink: CallLinkType,
@@ -171,6 +171,7 @@ function ActiveCallManager({
   blockClient,
   callLink,
   cancelCall,
+  cancelPresenting,
   changeCallView,
   closeNeedPermissionScreen,
   denyUser,
@@ -186,13 +187,13 @@ function ActiveCallManager({
   renderEmojiPicker,
   renderReactionPicker,
   removeClient,
+  selectPresentingSource,
   sendGroupCallRaiseHand,
   sendGroupCallReaction,
   setGroupCallVideoRequest,
   setLocalAudio,
   setLocalPreview,
   setLocalVideo,
-  setPresenting,
   setRendererCanvas,
   setOutgoingRing,
   showContactModal,
@@ -452,6 +453,7 @@ function ActiveCallManager({
         activeCall={activeCall}
         approveUser={approveUser}
         batchUserAction={batchUserAction}
+        cancelPresenting={cancelPresenting}
         changeCallView={changeCallView}
         denyUser={denyUser}
         getPresentingSources={getPresentingSources}
@@ -473,7 +475,6 @@ function ActiveCallManager({
         setRendererCanvas={setRendererCanvas}
         setLocalAudio={setLocalAudio}
         setLocalVideo={setLocalVideo}
-        setPresenting={setPresenting}
         stickyControls={showParticipantsList}
         switchToPresentationView={switchToPresentationView}
         switchFromPresentationView={switchFromPresentationView}
@@ -491,7 +492,8 @@ function ActiveCallManager({
         <CallingSelectPresentingSourcesModal
           i18n={i18n}
           presentingSourcesAvailable={presentingSourcesAvailable}
-          setPresenting={setPresenting}
+          selectPresentingSource={selectPresentingSource}
+          cancelPresenting={cancelPresenting}
         />
       ) : null}
       {settingsDialogOpen && renderDeviceSelection()}
@@ -536,6 +538,7 @@ export function CallManager({
   bounceAppIconStop,
   callLink,
   cancelCall,
+  cancelPresenting,
   changeCallView,
   closeNeedPermissionScreen,
   declineCall,
@@ -558,6 +561,7 @@ export function CallManager({
   renderDeviceSelection,
   renderEmojiPicker,
   renderReactionPicker,
+  selectPresentingSource,
   sendGroupCallRaiseHand,
   sendGroupCallReaction,
   setGroupCallVideoRequest,
@@ -566,7 +570,6 @@ export function CallManager({
   setLocalPreview,
   setLocalVideo,
   setOutgoingRing,
-  setPresenting,
   setRendererCanvas,
   showContactModal,
   showShareCallLinkViaSignal,
@@ -635,6 +638,7 @@ export function CallManager({
           blockClient={blockClient}
           callLink={callLink}
           cancelCall={cancelCall}
+          cancelPresenting={cancelPresenting}
           changeCallView={changeCallView}
           closeNeedPermissionScreen={closeNeedPermissionScreen}
           denyUser={denyUser}
@@ -653,6 +657,7 @@ export function CallManager({
           renderDeviceSelection={renderDeviceSelection}
           renderEmojiPicker={renderEmojiPicker}
           renderReactionPicker={renderReactionPicker}
+          selectPresentingSource={selectPresentingSource}
           sendGroupCallRaiseHand={sendGroupCallRaiseHand}
           sendGroupCallReaction={sendGroupCallReaction}
           setGroupCallVideoRequest={setGroupCallVideoRequest}
@@ -660,7 +665,6 @@ export function CallManager({
           setLocalPreview={setLocalPreview}
           setLocalVideo={setLocalVideo}
           setOutgoingRing={setOutgoingRing}
-          setPresenting={setPresenting}
           setRendererCanvas={setRendererCanvas}
           showContactModal={showContactModal}
           showShareCallLinkViaSignal={showShareCallLinkViaSignal}

ts/components/CallScreen.stories.tsx

@@ -206,13 +206,13 @@ const createProps = (
   openSystemPreferencesAction: action('open-system-preferences-action'),
   renderEmojiPicker: () => <>EmojiPicker</>,
   renderReactionPicker: () => <div />,
+  cancelPresenting: action('cancel-presenting'),
   sendGroupCallRaiseHand: action('send-group-call-raise-hand'),
   sendGroupCallReaction: action('send-group-call-reaction'),
   setGroupCallVideoRequest: action('set-group-call-video-request'),
   setLocalAudio: action('set-local-audio'),
   setLocalPreview: action('set-local-preview'),
   setLocalVideo: action('set-local-video'),
-  setPresenting: action('toggle-presenting'),
   setRendererCanvas: action('set-renderer-canvas'),
   stickyControls: false,
   switchToPresentationView: action('switch-to-presentation-view'),

ts/components/CallScreen.tsx

@@ -29,7 +29,6 @@ import type {
   ActiveCallReactionsType,
   ConversationsByDemuxIdType,
   GroupCallVideoRequest,
-  PresentedSource,
 } from '../types/Calling';
 import {
   CALLING_REACTIONS_LIFETIME,
@@ -97,6 +96,7 @@ export type PropsType = {
   activeCall: ActiveCallType;
   approveUser: (payload: PendingUserActionPayloadType) => void;
   batchUserAction: (payload: BatchUserActionPayloadType) => void;
+  cancelPresenting: () => void;
   denyUser: (payload: PendingUserActionPayloadType) => void;
   getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
   getPresentingSources: () => void;
@@ -120,7 +120,6 @@ export type PropsType = {
   setLocalAudio: (_: SetLocalAudioType) => void;
   setLocalVideo: (_: SetLocalVideoType) => void;
   setLocalPreview: (_: SetLocalPreviewType) => void;
-  setPresenting: (_?: PresentedSource) => void;
   setRendererCanvas: (_: SetRendererCanvasType) => void;
   stickyControls: boolean;
   switchToPresentationView: () => void;
@@ -190,6 +189,7 @@ export function CallScreen({
   activeCall,
   approveUser,
   batchUserAction,
+  cancelPresenting,
   changeCallView,
   denyUser,
   getGroupCallVideoFrameSource,
@@ -210,7 +210,6 @@ export function CallScreen({
   setLocalAudio,
   setLocalVideo,
   setLocalPreview,
-  setPresenting,
   setRendererCanvas,
   stickyControls,
   switchToPresentationView,
@@ -260,11 +259,11 @@ export function CallScreen({
 
   const togglePresenting = useCallback(() => {
     if (presentingSource) {
-      setPresenting();
+      cancelPresenting();
     } else {
       getPresentingSources();
     }
-  }, [getPresentingSources, presentingSource, setPresenting]);
+  }, [getPresentingSources, presentingSource, cancelPresenting]);
 
   const hangUp = useCallback(() => {
     hangUpActiveCall('button click');

ts/components/CallingScreenSharingController.tsx

@@ -11,7 +11,7 @@ export type PropsType = {
   onCloseController: () => unknown;
   onStopSharing: () => unknown;
   status: ScreenShareStatus;
-  presentedSourceName: string;
+  presentedSourceName: string | undefined;
 };
 
 export function CallingScreenSharingController({
@@ -25,10 +25,12 @@ export function CallingScreenSharingController({
 
   if (status === ScreenShareStatus.Reconnecting) {
     text = i18n('icu:calling__presenting--reconnecting');
-  } else {
+  } else if (presentedSourceName) {
     text = i18n('icu:calling__presenting--info', {
       window: presentedSourceName,
     });
+  } else {
+    text = i18n('icu:calling__presenting--info--unknown');
   }
 
   return (

ts/components/CallingSelectPresentingSourcesModal.stories.tsx

@@ -51,7 +51,8 @@ const createProps = (): PropsType => ({
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+O/wHwAEhgJAyqFnAgAAAABJRU5ErkJggg==',
     },
   ],
-  setPresenting: action('set-presenting'),
+  selectPresentingSource: action('select-presenting-source'),
+  cancelPresenting: action('cancel-presenting'),
 });
 
 export default {

ts/components/CallingSelectPresentingSourcesModal.tsx

@@ -9,11 +9,13 @@ import type { LocalizerType } from '../types/Util';
 import { Modal } from './Modal';
 import type { PresentedSource, PresentableSource } from '../types/Calling';
 import { Theme } from '../util/theme';
+import { strictAssert } from '../util/assert';
 
 export type PropsType = {
   i18n: LocalizerType;
-  presentingSourcesAvailable: Array<PresentableSource>;
-  setPresenting: (_?: PresentedSource) => void;
+  presentingSourcesAvailable: ReadonlyArray<PresentableSource>;
+  selectPresentingSource: (id: string) => void;
+  cancelPresenting: () => void;
 };
 
 function Source({
@@ -67,7 +69,8 @@ function Source({
 export function CallingSelectPresentingSourcesModal({
   i18n,
   presentingSourcesAvailable,
-  setPresenting,
+  selectPresentingSource,
+  cancelPresenting,
 }: PropsType): JSX.Element | null {
   const [sourceToPresent, setSourceToPresent] = useState<
     PresentedSource | undefined
@@ -84,12 +87,15 @@ export function CallingSelectPresentingSourcesModal({
 
   const footer = (
     <>
-      <Button onClick={() => setPresenting()} variant={ButtonVariant.Secondary}>
+      <Button onClick={cancelPresenting} variant={ButtonVariant.Secondary}>
         {i18n('icu:cancel')}
       </Button>
       <Button
         disabled={!sourceToPresent}
-        onClick={() => setPresenting(sourceToPresent)}
+        onClick={() => {
+          strictAssert(sourceToPresent, 'No source to present');
+          selectPresentingSource(sourceToPresent.id);
+        }}
       >
         {i18n('icu:calling__SelectPresentingSourcesModal--confirm')}
       </Button>
@@ -102,9 +108,7 @@ export function CallingSelectPresentingSourcesModal({
       hasXButton
       i18n={i18n}
       moduleClassName="module-CallingSelectPresentingSourcesModal"
-      onClose={() => {
-        setPresenting();
-      }}
+      onClose={cancelPresenting}
       theme={Theme.Dark}
       title={i18n('icu:calling__SelectPresentingSourcesModal--title')}
       modalFooter={footer}