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

2 files changed, 29 insertions, 132 deletions

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);
   }