Make sure screen name is internationalized

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 =>
-    source.id.startsWith('screen')
-  );
+  const sources = groupBy(presentingSourcesAvailable, isScreenSource);
 
   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}