Make sure screen name is internationalized

_locales/en/messages.json

@@ -3384,7 +3384,17 @@
   },
   "calling__SelectPresentingSourcesModal--entireScreen": {
     "message": "Entire screen",
-    "description": "Title for the select your screen sharing sources modal"
+    "description": "Title for the select your screen sharing sources modal and 'Entire Screen' source"
+  },
+  "calling__SelectPresentingSourcesModal--screen": {
+    "message": "Screen $id$",
+    "description": "Title for `Screen #N` source in screen sharing sources modal and overlay",
+    "placeholders": {
+      "id": {
+        "content": "$1",
+        "example": "1"
+      }
+    }
   },
   "calling__SelectPresentingSourcesModal--window": {
     "message": "A window",

ts/components/CallingSelectPresentingSourcesModal.tsx

@@ -9,6 +9,7 @@ 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;
@@ -17,14 +18,18 @@ 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({
@@ -42,14 +47,14 @@ const Source = ({
       type="button"
     >
       <img
-        alt={source.name}
+        alt={name}
         className="module-CallingSelectPresentingSourcesModal__name--screenshot"
         src={source.thumbnail}
       />
       <div className="module-CallingSelectPresentingSourcesModal__name--container">
         {source.appIcon ? (
           <img
-            alt={source.name}
+            alt={name}
             className="module-CallingSelectPresentingSourcesModal__name--icon"
             height={16}
             src={source.appIcon}
@@ -57,7 +62,7 @@ const Source = ({
           />
         ) : null}
         <span className="module-CallingSelectPresentingSourcesModal__name--text">
-          {source.name}
+          {name}
         </span>
       </div>
     </button>
@@ -77,9 +82,7 @@ export const CallingSelectPresentingSourcesModal = ({
     throw new Error('No sources available for presenting');
   }
 
-  const sources = groupBy(presentingSourcesAvailable, source =>
+  const sources = groupBy(presentingSourcesAvailable, isScreenSource);
-    source.id.startsWith('screen')
-  );
 
   return (
     <Modal
@@ -98,6 +101,7 @@ export const CallingSelectPresentingSourcesModal = ({
       <div className="module-CallingSelectPresentingSourcesModal__sources">
         {sources.true.map(source => (
           <Source
+            i18n={i18n}
             key={source.id}
             onSourceClick={selectedSource => setSourceToPresent(selectedSource)}
             source={source}
@@ -111,6 +115,7 @@ 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

@@ -48,6 +48,7 @@ import {
   PresentableSource,
   PresentedSource,
 } from '../types/Calling';
+import { LocalizerType } from '../types/Util';
 import { ConversationModel } from '../models/conversations';
 import {
   base64ToArrayBuffer,
@@ -89,6 +90,33 @@ enum GroupCallUpdateMessageState {
   SentLeft,
 }
 
+export function isScreenSource(source: PresentedSource): boolean {
+  return source.id.startsWith('screen');
+}
+
+export function translateSourceName(
+  i18n: LocalizerType,
+  source: PresentedSource
+): string {
+  const { name } = source;
+  if (!isScreenSource(source)) {
+    return name;
+  }
+
+  if (name === 'Entire Screen') {
+    return i18n('calling__SelectPresentingSourcesModal--entireScreen');
+  }
+
+  const match = name.match(/^Screen (\d+)$/);
+  if (match) {
+    return i18n('calling__SelectPresentingSourcesModal--screen', {
+      id: match[1],
+    });
+  }
+
+  return name;
+}
+
 export class CallingClass {
   readonly videoCapturer: GumVideoCapturer;
 
@@ -954,7 +982,10 @@ export class CallingClass {
     this.setOutgoingVideoIsScreenShare(call, isPresenting);
 
     if (source) {
-      ipcRenderer.send('show-screen-share', source.name);
+      ipcRenderer.send(
+        'show-screen-share',
+        translateSourceName(window.i18n, source)
+      );
       notify({
         icon: 'images/icons/v2/video-solid-24.svg',
         message: window.i18n('calling__presenting--notification-body'),