Fix storybook for calling sources modal

ts/components/CallingSelectPresentingSourcesModal.stories.tsx

@@ -21,29 +21,34 @@ const createProps = (): PropsType => ({
     {
       id: 'screen',
       name: 'Entire Screen',
+      isScreen: true,
       thumbnail:
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P/1PwAF8AL1sEVIPAAAAABJRU5ErkJggg==',
     },
     {
       id: 'window:123',
       name: 'Bozirro Airhorse',
+      isScreen: false,
       thumbnail:
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z1D4HwAF5wJxzsNOIAAAAABJRU5ErkJggg==',
     },
     {
       id: 'window:456',
       name: 'Discoverer',
+      isScreen: false,
       thumbnail:
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8HwHwAFHQIIj4yLtgAAAABJRU5ErkJggg==',
     },
     {
       id: 'window:789',
       name: 'Signal Beta',
+      isScreen: false,
       thumbnail: '',
     },
     {
       id: 'window:xyz',
       name: 'Window that has a really long name and overflows',
+      isScreen: false,
       thumbnail:
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+O/wHwAEhgJAyqFnAgAAAABJRU5ErkJggg==',
     },

ts/components/CallingSelectPresentingSourcesModal.tsx

@@ -9,7 +9,6 @@ import { LocalizerType } from '../types/Util';
 import { Modal } from './Modal';
 import { PresentedSource, PresentableSource } from '../types/Calling';
 import { Theme } from '../util/theme';
-import { isScreenSource, translateSourceName } from '../services/calling';
 
 export type PropsType = {
   i18n: LocalizerType;
@@ -18,18 +17,14 @@ export type PropsType = {
 };
 
 const Source = ({
-  i18n,
   onSourceClick,
   source,
   sourceToPresent,
 }: {
-  i18n: LocalizerType;
   onSourceClick: (source: PresentedSource) => void;
   source: PresentableSource;
   sourceToPresent?: PresentedSource;
 }): JSX.Element => {
-  const name = translateSourceName(i18n, source);
-
   return (
     <button
       className={classNames({
@@ -47,14 +42,14 @@ const Source = ({
       type="button"
     >
       <img
-        alt={name}
+        alt={source.name}
         className="module-CallingSelectPresentingSourcesModal__name--screenshot"
         src={source.thumbnail}
       />
       <div className="module-CallingSelectPresentingSourcesModal__name--container">
         {source.appIcon ? (
           <img
-            alt={name}
+            alt={source.name}
             className="module-CallingSelectPresentingSourcesModal__name--icon"
             height={16}
             src={source.appIcon}
@@ -62,7 +57,7 @@ const Source = ({
           />
         ) : null}
         <span className="module-CallingSelectPresentingSourcesModal__name--text">
-          {name}
+          {source.name}
         </span>
       </div>
     </button>
@@ -82,7 +77,10 @@ export const CallingSelectPresentingSourcesModal = ({
     throw new Error('No sources available for presenting');
   }
 
-  const sources = groupBy(presentingSourcesAvailable, isScreenSource);
+  const sources = groupBy(
+    presentingSourcesAvailable,
+    source => source.isScreen
+  );
 
   return (
     <Modal
@@ -101,7 +99,6 @@ export const CallingSelectPresentingSourcesModal = ({
       <div className="module-CallingSelectPresentingSourcesModal__sources">
         {sources.true.map(source => (
           <Source
-            i18n={i18n}
             key={source.id}
             onSourceClick={selectedSource => setSourceToPresent(selectedSource)}
             source={source}
@@ -115,7 +112,6 @@ export const CallingSelectPresentingSourcesModal = ({
       <div className="module-CallingSelectPresentingSourcesModal__sources">
         {sources.false.map(source => (
           <Source
-            i18n={i18n}
             key={source.id}
             onSourceClick={selectedSource => setSourceToPresent(selectedSource)}
             source={source}

ts/services/calling.ts

@@ -90,11 +90,11 @@ enum GroupCallUpdateMessageState {
   SentLeft,
 }
 
-export function isScreenSource(source: PresentedSource): boolean {
+function isScreenSource(source: PresentedSource): boolean {
   return source.id.startsWith('screen');
 }
 
-export function translateSourceName(
+function translateSourceName(
   i18n: LocalizerType,
   source: PresentedSource
 ): string {
@@ -940,7 +940,8 @@ export class CallingClass {
             ? source.appIcon.toDataURL()
             : undefined,
         id: source.id,
-        name: source.name,
+        name: translateSourceName(window.i18n, source),
+        isScreen: isScreenSource(source),
         thumbnail: source.thumbnail.toDataURL(),
       });
     });
@@ -982,10 +983,7 @@ export class CallingClass {
     this.setOutgoingVideoIsScreenShare(call, isPresenting);
 
     if (source) {
-      ipcRenderer.send(
-        'show-screen-share',
-        translateSourceName(window.i18n, source)
-      );
+      ipcRenderer.send('show-screen-share', source.name);
       notify({
         icon: 'images/icons/v2/video-solid-24.svg',
         message: window.i18n('calling__presenting--notification-body'),

ts/types/Calling.ts

@@ -14,6 +14,7 @@ export type PresentableSource = {
   appIcon?: string;
   id: string;
   name: string;
+  isScreen: boolean;
   thumbnail: string;
 };