fix: screenshare feature not working on Teams (#1733)

9 files changed, 207 insertions, 132 deletions

diff --git a/src/components/MediaSource.tsx b/src/components/MediaSource.tsx
new file mode 100644
index 000000000..ceb7701b9
--- /dev/null
+++ b/src/components/MediaSource.tsx
@@ -0,0 +1,82 @@
+import { ipcRenderer } from 'electron';
+import { useEffect, useState } from 'react';
+import { SCREENSHARE_CANCELLED_BY_USER } from '../config';
+import type Service from '../models/Service';
+
+export interface IProps {
+  service: Service;
+}
+
+export default function MediaSource(props: IProps) {
+  const { service } = props;
+  const [sources, setSources] = useState<any>([]);
+  const [show, setShow] = useState<boolean>(false);
+  const [trackerId, setTrackerId] = useState<string | null>(null);
+
+  ipcRenderer.on(`select-capture-device:${service.id}`, (_event, data) => {
+    setShow(true);
+    setTrackerId(data.trackerId);
+  });
+
+  useEffect(() => {
+    ipcRenderer
+      .invoke('get-desktop-capturer-sources')
+      .then(sources => setSources(sources));
+  }, []);
+
+  if (sources.length === 0 || !show) {
+    return null;
+  }
+
+  const handleOnClick = (e: any) => {
+    const { id } = e.currentTarget.dataset;
+    window['ferdium'].actions.service.sendIPCMessage({
+      serviceId: service.id,
+      channel: `selected-media-source:${trackerId}`,
+      args: {
+        mediaSourceId: id,
+      },
+    });
+
+    setShow(false);
+    setTrackerId(null);
+  };
+
+  return (
+    <div className="desktop-capturer-selection">
+      <ul className="desktop-capturer-selection__list">
+        {sources.map(({ id, name, thumbnail }) => (
+          <li className="desktop-capturer-selection__item" key={id}>
+            <button
+              type="button" // Add explicit type attribute
+              className="desktop-capturer-selection__btn"
+              data-id={id}
+              title={name}
+              onClick={handleOnClick}
+            >
+              <img
+                alt="Desktop capture preview"
+                className="desktop-capturer-selection__thumbnail"
+                src={thumbnail.toDataURL()}
+              />
+              <span className="desktop-capturer-selection__name">{name}</span>
+            </button>
+          </li>
+        ))}
+        <li className="desktop-capturer-selection__item">
+          <button
+            type="button" // Add explicit type attribute
+            className="desktop-capturer-selection__btn"
+            data-id={SCREENSHARE_CANCELLED_BY_USER}
+            title="Cancel"
+            onClick={handleOnClick}
+          >
+            <span className="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">
+              Cancel
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/services/content/ServiceView.tsx b/src/components/services/content/ServiceView.tsx
index 577473b5d..b7f539a5d 100644
--- a/src/components/services/content/ServiceView.tsx
+++ b/src/components/services/content/ServiceView.tsx
@@ -7,6 +7,7 @@ import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import type ServiceModel from '../../../models/Service';
 import type { RealStores } from '../../../stores';
+import MediaSource from '../../MediaSource';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 import WebviewLoader from '../../ui/WebviewLoader';
 import ServiceDisabled from './ServiceDisabled';
@@ -164,6 +165,7 @@ class ServiceView extends Component<IProps, IState> {
             ) : (
               <>
                 {showNavBar && <WebControlsScreen service={service} />}
+                <MediaSource service={service} />
                 <ServiceWebview
                   service={service}
                   setWebviewReference={setWebviewRef}
diff --git a/src/config.ts b/src/config.ts
index f086c54ee..612aa6871 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -49,6 +49,9 @@ export const WEBRTC_IP_HANDLING_POLICY = {
   [disableWebRTCIPHandlingPolicy]: 'Do not expose public or local IPs',
 };
 
+export const SCREENSHARE_CANCELLED_BY_USER =
+  'desktop-capturer-selection__cancel';
+
 // TODO: Need to convert many of these to i18n
 export const HIBERNATION_STRATEGIES = {
   10: 'Extremely Fast Hibernation (10sec)',
diff --git a/src/index.ts b/src/index.ts
index 999d84348..cccf0ef66 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -610,6 +610,11 @@ ipcMain.on('feature-basic-auth-cancel', () => {
   authCallback = noop;
 });
 
+ipcMain.on('load-available-displays', (_e, data) => {
+  debug('MAIN PROCESS: Received load-desktop-capturer-sources');
+  mainWindow?.webContents.send(`select-capture-device:${data.serviceId}`, data);
+});
+
 // Handle synchronous messages from service webviews.
 
 ipcMain.on('find-in-page', (e, text, options) => {
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 6c7a55d6b..fd7414004 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -838,6 +838,16 @@ export default class ServicesStore extends TypedStore {
 
         break;
       }
+
+      case 'load-available-displays': {
+        debug('Received request for capture devices from', serviceId);
+        ipcRenderer.send('load-available-displays', {
+          serviceId,
+          ...args[0],
+        });
+        break;
+      }
+
       case 'notification': {
         const { notificationId, options } = args[0];
 
diff --git a/src/styles/capture-sources.scss b/src/styles/capture-sources.scss
new file mode 100644
index 000000000..c9ee69f09
--- /dev/null
+++ b/src/styles/capture-sources.scss
@@ -0,0 +1,75 @@
+.desktop-capturer-selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(30, 30, 30, 0.75);
+  color: #fff;
+  z-index: 10000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.desktop-capturer-selection__scroller {
+  width: 100%;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+.desktop-capturer-selection__list {
+  max-width: calc(100% - 100px);
+  margin: 50px;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  overflow: hidden;
+  justify-content: center;
+}
+.desktop-capturer-selection__item {
+  display: flex;
+  margin: 4px;
+}
+.desktop-capturer-selection__btn {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 145px;
+  margin: 0;
+  border: 0;
+  border-radius: 3px;
+  padding: 4px;
+  background: #252626;
+  text-align: left;
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.15s,
+      box-shadow 0.15s,
+      color 0.15s;
+  }
+  color: #dedede;
+}
+.desktop-capturer-selection__btn:hover,
+.desktop-capturer-selection__btn:focus {
+  background: rgba(98, 100, 167, 0.8);
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.45),
+    0 0 2px rgba(0, 0, 0, 0.25);
+  color: #fff;
+}
+.desktop-capturer-selection__thumbnail {
+  width: 100%;
+  height: 81px;
+  object-fit: cover;
+}
+.desktop-capturer-selection__name {
+  margin: 6px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  overflow: hidden;
+}
+.desktop-capturer-selection__name--cancel {
+  margin: auto 0;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 8369c9298..fafb1b861 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -23,6 +23,7 @@
 @import './invite.scss';
 @import './title-bar.scss';
 @import './features.scss';
+@import './capture-sources.scss';
 
 // form
 @import './input.scss';
diff --git a/src/webview/recipe.ts b/src/webview/recipe.ts
index d6db39779..a35a99699 100644
--- a/src/webview/recipe.ts
+++ b/src/webview/recipe.ts
@@ -32,11 +32,7 @@ import {
   NotificationsHandler,
   notificationsClassDefinition,
 } from './notifications';
-import {
-  getDisplayMediaSelector,
-  screenShareCss,
-  screenShareJs,
-} from './screenshare';
+import { getDisplayMediaSelector, screenShareJs } from './screenshare';
 import SessionHandler from './sessionHandler';
 import {
   getSpellcheckerLocaleByFuzzyIdentifier,
@@ -267,7 +263,6 @@ class RecipeController {
 
   async loadUserFiles(recipe, config) {
     const styles = document.createElement('style');
-    styles.innerHTML = screenShareCss;
 
     const userCss = join(recipe.path, 'user.css');
     if (pathExistsSync(userCss)) {
diff --git a/src/webview/screenshare.ts b/src/webview/screenshare.ts
index e631ce52f..521f95bd6 100644
--- a/src/webview/screenshare.ts
+++ b/src/webview/screenshare.ts
@@ -1,139 +1,41 @@
 import { ipcRenderer } from 'electron';
+import { v4 as uuidV4 } from 'uuid';
 
-const CANCEL_ID = 'desktop-capturer-selection__cancel';
+const debug = require('../preload-safe-debug')('Ferdium:Screenshare');
 
 export async function getDisplayMediaSelector() {
-  const sources = await ipcRenderer.invoke('get-desktop-capturer-sources');
-  return `<div class="desktop-capturer-selection__scroller">
-  <ul class="desktop-capturer-selection__list">
-    ${sources
-      .map(
-        ({ id, name, thumbnail }) => `
-      <li class="desktop-capturer-selection__item">
-        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
-          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
-          <span class="desktop-capturer-selection__name">${name}</span>
-        </button>
-      </li>
-    `,
-      )
-      .join('')}
-    <li class="desktop-capturer-selection__item">
-      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
-        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
-      </button>
-    </li>
-  </ul>
-</div>`;
-}
+  return new Promise((resolve, reject) => {
+    const trackerId = uuidV4();
+    debug('New screenshare request', trackerId);
 
-export const screenShareCss = `
-.desktop-capturer-selection {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  background: rgba(30,30,30,.75);
-  color: #fff;
-  z-index: 10000000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.desktop-capturer-selection__scroller {
-  width: 100%;
-  max-height: 100vh;
-  overflow-y: auto;
-}
-.desktop-capturer-selection__list {
-  max-width: calc(100% - 100px);
-  margin: 50px;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  overflow: hidden;
-  justify-content: center;
-}
-.desktop-capturer-selection__item {
-  display: flex;
-  margin: 4px;
-}
-.desktop-capturer-selection__btn {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 145px;
-  margin: 0;
-  border: 0;
-  border-radius: 3px;
-  padding: 4px;
-  background: #252626;
-  text-align: left;
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color .15s, box-shadow .15s, color .15s;
-  }
-  color: #dedede;
-}
-.desktop-capturer-selection__btn:hover,
-.desktop-capturer-selection__btn:focus {
-  background: rgba(98,100,167,.8);
-  box-shadow: 0 0 4px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.25);
-  color: #fff;
-}
-.desktop-capturer-selection__thumbnail {
-  width: 100%;
-  height: 81px;
-  object-fit: cover;
-}
-.desktop-capturer-selection__name {
-  margin: 6px 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-  overflow: hidden;
-}
-.desktop-capturer-selection__name--cancel {
-  margin: auto 0;
+    ipcRenderer.sendToHost('load-available-displays', {
+      trackerId,
+    });
+
+    ipcRenderer.once(`selected-media-source:${trackerId}`, (_e, data) => {
+      if (data.mediaSourceId === 'desktop-capturer-selection__cancel') {
+        return reject(new Error('Cancelled by user'));
+      }
+
+      return resolve(data.mediaSourceId);
+    });
+  });
 }
-`;
 
 export const screenShareJs = `
 window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
   try {
-    const selectionElem = document.createElement('div');
-    selectionElem.classList = ['desktop-capturer-selection'];
-    selectionElem.innerHTML = await window.ferdium.getDisplayMediaSelector();
-    document.body.appendChild(selectionElem);
-
-    document
-      .querySelectorAll('.desktop-capturer-selection__btn')
-      .forEach((button) => {
-        button.addEventListener('click', async () => {
-          try {
-            const id = button.getAttribute('data-id');
-            if (id === '${CANCEL_ID}') {
-              reject(new Error('Cancelled by user'));
-            } else {
-              const stream = await window.navigator.mediaDevices.getUserMedia({
-                audio: false,
-                video: {
-                  mandatory: {
-                    chromeMediaSource: 'desktop',
-                    chromeMediaSourceId: id,
-                  },
-                },
-              });
-              resolve(stream);
-            }
-          } catch (err) {
-            reject(err);
-          } finally {
-            selectionElem.remove();
-          }
-        });
-      });
+    const displayId = await window.ferdium.getDisplayMediaSelector();
+    const stream = await window.navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: displayId,
+        },
+      },
+    });
+    resolve(stream);
   } catch (err) {
     reject(err);
   }