fix: privileged API access

Privileged browser APIs should be accessed from webview.js via the Ferdi
parameter to the exported function.

If any service is broken (e.g., screen sharing), then most likely we
have to fix recipe.js or screenshare.js

19 files changed, 113 insertions, 170 deletions

diff --git a/all.json b/all.json
index 87bb41d..f02c35d 100644
--- a/all.json
+++ b/all.json
@@ -42,7 +42,7 @@
     "featured": false,
     "id": "android-messages",
     "name": "Android Messages",
-    "version": "2.2.1",
+    "version": "2.2.2",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/android-messages/icon.svg"
     }
@@ -270,7 +270,7 @@
     "featured": false,
     "id": "devRant",
     "name": "devRant",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/devRant/icon.svg"
     }
@@ -297,7 +297,7 @@
     "featured": true,
     "id": "discord",
     "name": "Discord",
-    "version": "1.4.1",
+    "version": "1.4.2",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/discord/icon.svg"
     }
@@ -876,7 +876,7 @@
     "featured": false,
     "id": "lastpass",
     "name": "LastPass",
-    "version": "2.2.1",
+    "version": "2.2.2",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/lastpass/icon.svg"
     }
@@ -975,7 +975,7 @@
     "featured": false,
     "id": "msteams",
     "name": "Microsoft Teams",
-    "version": "3.1.4",
+    "version": "3.1.5",
     "aliases": [
       "teamsChat"
     ],
@@ -1350,7 +1350,7 @@
     "featured": false,
     "id": "rocketchat",
     "name": "Rocket.Chat",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/rocketchat/icon.svg"
     }
@@ -1413,7 +1413,7 @@
     "featured": true,
     "id": "slack",
     "name": "Slack",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/slack/icon.svg"
     }
@@ -1656,7 +1656,7 @@
     "featured": true,
     "id": "tweetdeck",
     "name": "Tweetdeck",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/tweetdeck/icon.svg"
     }
@@ -1773,7 +1773,7 @@
     "featured": true,
     "id": "whatsapp",
     "name": "WhatsApp",
-    "version": "3.3.2",
+    "version": "3.3.3",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/whatsapp/icon.svg"
     }
diff --git a/recipes/android-messages/package.json b/recipes/android-messages/package.json
index 354c21d..962eb2b 100644
--- a/recipes/android-messages/package.json
+++ b/recipes/android-messages/package.json
@@ -1,7 +1,7 @@
 {
   "id": "android-messages",
   "name": "Android Messages",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "license": "MIT",
   "config": {
     "serviceURL": "https://messages.google.com/web",
diff --git a/recipes/android-messages/webview.js b/recipes/android-messages/webview.js
index 6a73441..db65de6 100644
--- a/recipes/android-messages/webview.js
+++ b/recipes/android-messages/webview.js
@@ -7,17 +7,17 @@ setTimeout(() => {
   }
 }, 1000);
 
-window.addEventListener('beforeunload', async () => {
-  Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
-  Ferdi.releaseServiceWorkers();
-});
-
 module.exports = (Ferdi, settings) => {
   function getMessages() {
     const messages = document.querySelectorAll('.text-content.unread').length;
     Ferdi.setBadge(messages);
   }
 
+  window.addEventListener('beforeunload', async () => {
+    Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
+    Ferdi.releaseServiceWorkers();
+  });
+
   Ferdi.loop(getMessages);
 
   if (settings.isDarkModeEnabled) {
diff --git a/recipes/devRant/package.json b/recipes/devRant/package.json
index 4aa3517..6dee2d6 100644
--- a/recipes/devRant/package.json
+++ b/recipes/devRant/package.json
@@ -1,7 +1,7 @@
 {
   "id": "devRant",
   "name": "devRant",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "repository": "https://github.com/emamut/recipe-devrant",
   "config": {
diff --git a/recipes/devRant/webview.js b/recipes/devRant/webview.js
index e7e41a5..62a47e6 100644
--- a/recipes/devRant/webview.js
+++ b/recipes/devRant/webview.js
@@ -9,11 +9,6 @@ setTimeout(() => {
   }
 }, 1000);
 
-window.addEventListener('beforeunload', async () => {
-  Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
-  Ferdi.releaseServiceWorkers();
-});
-
 module.exports = (Ferdi) => {
   const getMessages = function getMessages() {
     const elements = document.querySelectorAll('.CxUIE, .unread, ._0LqQ');
@@ -27,6 +22,11 @@ module.exports = (Ferdi) => {
     Ferdi.setBadge(count);
   };
 
+  window.addEventListener('beforeunload', async () => {
+    Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
+    Ferdi.releaseServiceWorkers();
+  });
+
   Ferdi.loop(getMessages);
   Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));
 };
diff --git a/recipes/discord/package.json b/recipes/discord/package.json
index c644d66..243e64b 100644
--- a/recipes/discord/package.json
+++ b/recipes/discord/package.json
@@ -1,7 +1,7 @@
 {
   "id": "discord",
   "name": "Discord",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "license": "MIT",
   "config": {
     "serviceURL": "https://discordapp.com/login",
diff --git a/recipes/discord/webview.js b/recipes/discord/webview.js
index 9c96f9f..3134221 100644
--- a/recipes/discord/webview.js
+++ b/recipes/discord/webview.js
@@ -1,65 +1,7 @@
-// TODO: Some/most of this is already present in https://github.com/getferdi/ferdi/blob/develop/src/webview/screenshare.js#L5
-
 const _path = _interopRequireDefault(require('path'));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-window.navigator.mediaDevices.getDisplayMedia = () => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const sources = await Ferdi.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);
-    }
-  })
-}
-
 module.exports = (Ferdi, settings) => {
   const getMessages = function getMessages() {
     let count = 0;
diff --git a/recipes/lastpass/package.json b/recipes/lastpass/package.json
index 75632bd..eed8f9e 100644
--- a/recipes/lastpass/package.json
+++ b/recipes/lastpass/package.json
@@ -1,7 +1,7 @@
 {
   "id": "lastpass",
   "name": "LastPass",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "license": "MIT",
   "config": {
     "serviceURL": "https://lastpass.com/?ac=1&lpnorefresh=1",
diff --git a/recipes/lastpass/webview.js b/recipes/lastpass/webview.js
index 4a92e0c..96e92ff 100644
--- a/recipes/lastpass/webview.js
+++ b/recipes/lastpass/webview.js
@@ -8,11 +8,6 @@ setTimeout(() => {
   }
 }, 1000);
 
-window.addEventListener('beforeunload', async () => {
-  Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
-  Ferdi.releaseServiceWorkers();
-});
-
 module.exports = Ferdi => {
   const getMessages = function getMessages() {
     const elements = document.querySelectorAll('.CxUIE, .unread');
@@ -27,6 +22,11 @@ module.exports = Ferdi => {
     Ferdi.setBadge(count);
   };
 
+  window.addEventListener('beforeunload', async () => {
+    Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
+    Ferdi.releaseServiceWorkers();
+  });
+
   Ferdi.loop(getMessages);
 
   Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));
diff --git a/recipes/msteams/package.json b/recipes/msteams/package.json
index 10fb69b..17c0aa0 100644
--- a/recipes/msteams/package.json
+++ b/recipes/msteams/package.json
@@ -1,7 +1,7 @@
 {
   "id": "msteams",
   "name": "Microsoft Teams",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "license": "MIT",
   "aliases": [
     "teamsChat"
diff --git a/recipes/msteams/webview.js b/recipes/msteams/webview.js
index 786cd9b..94f3ae8 100644
--- a/recipes/msteams/webview.js
+++ b/recipes/msteams/webview.js
@@ -2,11 +2,6 @@ const _path = _interopRequireDefault(require('path'));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-window.addEventListener('beforeunload', async () => {
-  Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
-  Ferdi.releaseServiceWorkers();
-});
-
 module.exports = Ferdi => {
   const getMessages = () => {
     let messages = 0;
@@ -20,6 +15,11 @@ module.exports = Ferdi => {
     Ferdi.setBadge(messages, indirectMessages);
   };
 
+  window.addEventListener('beforeunload', async () => {
+    Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
+    Ferdi.releaseServiceWorkers();
+  });
+
   Ferdi.loop(getMessages);
 
   Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));
diff --git a/recipes/rocketchat/package.json b/recipes/rocketchat/package.json
index 3b807bf..f2c6374 100644
--- a/recipes/rocketchat/package.json
+++ b/recipes/rocketchat/package.json
@@ -1,7 +1,7 @@
 {
   "id": "rocketchat",
   "name": "Rocket.Chat",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "config": {
     "serviceURL": "https://{teamId}.rocket.chat",
diff --git a/recipes/rocketchat/webview.js b/recipes/rocketchat/webview.js
index 4240935..159adea 100644
--- a/recipes/rocketchat/webview.js
+++ b/recipes/rocketchat/webview.js
@@ -1,36 +1,3 @@
-const getTeamIcon = function getTeamIcon() {
-  const manifestElement = document.querySelector('link[rel="manifest"]');
-
-  if (manifestElement == null) {
-    return;
-  }
-
-  const manifestUrl = manifestElement.getAttribute('href');
-
-  if (manifestUrl == null) {
-    return;
-  }
-
-  const xmlhttp = new XMLHttpRequest();
-
-  xmlhttp.onreadystatechange = function () {
-    if (this.readyState != 4 || this.status != 200) {
-      return;
-    }
-
-    const response = JSON.parse(this.responseText);
-
-    if (response.icons.length >= 1) {
-      Ferdi.ipcRenderer.sendToHost(
-        'avatar',
-        `${window.location.protocol}//${window.location.host}${response.icons[0].src}`,
-      );
-    }
-  };
-
-  xmlhttp.open('GET', manifestUrl, true);
-  xmlhttp.send();
-};
 
 module.exports = Ferdi => {
   const getMessages = function getMessages() {
@@ -51,6 +18,40 @@ module.exports = Ferdi => {
 
   Ferdi.loop(getMessages);
 
+  const getTeamIcon = function getTeamIcon() {
+    const manifestElement = document.querySelector('link[rel="manifest"]');
+
+    if (manifestElement == null) {
+      return;
+    }
+
+    const manifestUrl = manifestElement.getAttribute('href');
+
+    if (manifestUrl == null) {
+      return;
+    }
+
+    const xmlhttp = new XMLHttpRequest();
+
+    xmlhttp.onreadystatechange = function () {
+      if (this.readyState != 4 || this.status != 200) {
+        return;
+      }
+
+      const response = JSON.parse(this.responseText);
+
+      if (response.icons.length >= 1) {
+        Ferdi.ipcRenderer.sendToHost(
+          'avatar',
+          `${window.location.protocol}//${window.location.host}${response.icons[0].src}`,
+        );
+      }
+    };
+
+    xmlhttp.open('GET', manifestUrl, true);
+    xmlhttp.send();
+  };
+
   setTimeout(() => {
     getTeamIcon();
   }, 4000);
diff --git a/recipes/slack/package.json b/recipes/slack/package.json
index 7c87e93..877bd8e 100644
--- a/recipes/slack/package.json
+++ b/recipes/slack/package.json
@@ -1,7 +1,7 @@
 {
   "id": "slack",
   "name": "Slack",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
   "config": {
     "serviceURL": "https://{teamId}.slack.com",
diff --git a/recipes/slack/webview.js b/recipes/slack/webview.js
index 1a12e80..3064e79 100644
--- a/recipes/slack/webview.js
+++ b/recipes/slack/webview.js
@@ -2,37 +2,6 @@ const _path = _interopRequireDefault(require('path'));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const getTeamIcon = function getTeamIcon(count = 0) {
-  let countTeamIconCheck = count;
-  let bgUrl = null;
-  const teamMenu = document.querySelector('#team-menu-trigger, .p-ia__sidebar_header__team_name');
-
-  if (teamMenu) {
-    teamMenu.click();
-    const icon = document.querySelector('.c-team_icon');
-
-    if (icon) {
-      bgUrl = window.getComputedStyle(icon, null).getPropertyValue('background-image');
-      bgUrl = /^url\((['"]?)(.*)\1\)$/.exec(bgUrl);
-      bgUrl = bgUrl ? bgUrl[2] : '';
-    }
-
-    setTimeout(() => {
-      document.querySelector('.ReactModal__Overlay').click();
-    }, 10);
-  }
-
-  countTeamIconCheck += 1;
-
-  if (bgUrl) {
-    Ferdi.ipcRenderer.sendToHost('avatar', bgUrl);
-  } else if (countTeamIconCheck <= 5) {
-    setTimeout(() => {
-      getTeamIcon(countTeamIconCheck + 1);
-    }, 2000);
-  }
-};
-
 const SELECTOR_CHANNELS_UNREAD = '.p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted)';
 
 module.exports = Ferdi => {
@@ -44,6 +13,37 @@ module.exports = Ferdi => {
 
   Ferdi.loop(getMessages);
 
+  const getTeamIcon = function getTeamIcon(count = 0) {
+    let countTeamIconCheck = count;
+    let bgUrl = null;
+    const teamMenu = document.querySelector('#team-menu-trigger, .p-ia__sidebar_header__team_name');
+
+    if (teamMenu) {
+      teamMenu.click();
+      const icon = document.querySelector('.c-team_icon');
+
+      if (icon) {
+        bgUrl = window.getComputedStyle(icon, null).getPropertyValue('background-image');
+        bgUrl = /^url\((['"]?)(.*)\1\)$/.exec(bgUrl);
+        bgUrl = bgUrl ? bgUrl[2] : '';
+      }
+
+      setTimeout(() => {
+        document.querySelector('.ReactModal__Overlay').click();
+      }, 10);
+    }
+
+    countTeamIconCheck += 1;
+
+    if (bgUrl) {
+      Ferdi.ipcRenderer.sendToHost('avatar', bgUrl);
+    } else if (countTeamIconCheck <= 5) {
+      setTimeout(() => {
+        getTeamIcon(countTeamIconCheck + 1);
+      }, 2000);
+    }
+  };
+
   setTimeout(() => {
     getTeamIcon();
   }, 4000);
diff --git a/recipes/tweetdeck/package.json b/recipes/tweetdeck/package.json
index a438716..5400bac 100644
--- a/recipes/tweetdeck/package.json
+++ b/recipes/tweetdeck/package.json
@@ -1,7 +1,7 @@
 {
   "id": "tweetdeck",
   "name": "Tweetdeck",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "config": {
     "serviceURL": "https://tweetdeck.twitter.com/",
diff --git a/recipes/tweetdeck/webview.js b/recipes/tweetdeck/webview.js
index b60415d..54b7997 100644
--- a/recipes/tweetdeck/webview.js
+++ b/recipes/tweetdeck/webview.js
@@ -1,9 +1,9 @@
-// Tweetdeck redirect fix
-Ferdi.ipcRenderer.on('redirect-url', (event, url) => {
-  window.location.assign(url);
-});
-
 module.exports = Ferdi => {
+  // Tweetdeck redirect fix
+  Ferdi.ipcRenderer.on('redirect-url', (event, url) => {
+    window.location.assign(url);
+  });
+
   const getMessages = function getMessages() {
     const elements = document.querySelectorAll('.msg-unread-count');
     let count = 0;
diff --git a/recipes/whatsapp/package.json b/recipes/whatsapp/package.json
index 4e59177..a364a1f 100644
--- a/recipes/whatsapp/package.json
+++ b/recipes/whatsapp/package.json
@@ -1,7 +1,7 @@
 {
   "id": "whatsapp",
   "name": "WhatsApp",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "license": "MIT",
   "config": {
     "serviceURL": "https://web.whatsapp.com",
diff --git a/recipes/whatsapp/webview.js b/recipes/whatsapp/webview.js
index 3df34e3..fb1a20b 100644
--- a/recipes/whatsapp/webview.js
+++ b/recipes/whatsapp/webview.js
@@ -2,11 +2,6 @@ const _path = _interopRequireDefault(require('path'));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-window.addEventListener('beforeunload', async () => {
-  Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
-  Ferdi.releaseServiceWorkers();
-});
-
 module.exports = Ferdi => {
   const getMessages = function getMessages() {
     let count = 0;
@@ -34,6 +29,11 @@ module.exports = Ferdi => {
     Ferdi.setBadge(count, indirectCount);
   };
 
+  window.addEventListener('beforeunload', async () => {
+    Ferdi.clearStorageData(['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb']);
+    Ferdi.releaseServiceWorkers();
+  });
+
   Ferdi.loop(getMessages);
 
   Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));