Update Microsoft Teams to allow Desktop Sharing (#116)

4 files changed, 120 insertions, 4 deletions

diff --git a/uncompressed/msteams/index.js b/uncompressed/msteams/index.js
index b85bf33..918b7b3 100644
--- a/uncompressed/msteams/index.js
+++ b/uncompressed/msteams/index.js
@@ -2,7 +2,6 @@
 
 module.exports = Franz => class MicrosoftTeams extends Franz {
   overrideUserAgent() {
-    return window.navigator.userAgent.replace(/(Ferdi|Electron)\/\S+ \([^)]+\)/g, '').replace(/(Chrome\/)([^ ]*)/g, '$163.0.3239.84');
+    return window.navigator.userAgent.replace(/(Ferdi|Electron)\/\S+ \([^)]+\)/g, '');
   }
-
 };
\ No newline at end of file
diff --git a/uncompressed/msteams/package.json b/uncompressed/msteams/package.json
index 85993a8..240d059 100644
--- a/uncompressed/msteams/package.json
+++ b/uncompressed/msteams/package.json
@@ -1,7 +1,7 @@
 {
   "id": "msteams",
   "name": "Microsoft Teams",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Microsoft Teams",
   "main": "index.js",
   "author": "Stefan Malzner <stefan@adlk.io>",
diff --git a/uncompressed/msteams/service.css b/uncompressed/msteams/service.css
index 533004f..fdaeac6 100644
--- a/uncompressed/msteams/service.css
+++ b/uncompressed/msteams/service.css
@@ -1,3 +1,63 @@
 notification-banner {
         display: none !important;
 }
+.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;
+  transition: background-color .15s, box-shadow .15s;
+}
+.desktop-capturer-selection__btn:hover,
+.desktop-capturer-selection__btn:focus {
+  background: rgba(98,100,167,.8);
+}
+.desktop-capturer-selection__thumbnail {
+  width: 100%;
+  height: 81px;
+  object-fit: cover;
+}
+.desktop-capturer-selection__name {
+  margin: 6px 0 6px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/uncompressed/msteams/webview.js b/uncompressed/msteams/webview.js
index d614097..0fd5253 100644
--- a/uncompressed/msteams/webview.js
+++ b/uncompressed/msteams/webview.js
@@ -1,7 +1,64 @@
 "use strict";
 
+const { desktopCapturer } = require('electron');
 const path = require('path');
 
+window.navigator.mediaDevices.getDisplayMedia = () => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
+
+      const selectionElem = document.createElement('div');
+      selectionElem.classList = 'desktop-capturer-selection';
+      selectionElem.innerHTML = `
+        <div class="desktop-capturer-selection__scroller">
+          <ul class="desktop-capturer-selection__list">
+            ${sources.map(({ id, name, thumbnail, display_id, appIcon }) => `
+              <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('')}
+          </ul>
+        </div>
+      `;
+      document.body.appendChild(selectionElem);
+
+      document.querySelectorAll('.desktop-capturer-selection__btn')
+        .forEach(button => {
+          button.addEventListener('click', async () => {
+            try {
+              const id = button.getAttribute('data-id');
+              const source = sources.find(source => source.id === id);
+              if (!source) {
+                throw new Error(`Source with id ${id} does not exist`);
+              }
+
+              const stream = await window.navigator.mediaDevices.getUserMedia({
+                audio: false,
+                video: {
+                  mandatory: {
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: source.id
+                  }
+                }
+              });
+              resolve(stream);
+
+              selectionElem.remove();
+            } catch (err) {
+              reject(err);
+            }
+          });
+        });
+    } catch (err) {
+      reject(err);
+    }
+  })
+}
+
 window.electronSafeIpc = {
   send: () => null,
   on: () => null
@@ -26,4 +83,4 @@ module.exports = Franz => {
 
   Franz.injectCSS(path.join(__dirname, 'service.css'));
   Franz.loop(getMessages);
-};
\ No newline at end of file
+};