Add setDialogTitle feature to api, WhatsApp and Telegram (#750)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

8 files changed, 108 insertions, 34 deletions

diff --git a/all.json b/all.json
index ff82c59..6a970ca 100644
--- a/all.json
+++ b/all.json
@@ -1593,7 +1593,7 @@
     "featured": true,
     "id": "telegram",
     "name": "Telegram",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/telegram/icon.svg"
     }
@@ -1809,7 +1809,7 @@
     "featured": true,
     "id": "whatsapp",
     "name": "WhatsApp",
-    "version": "3.3.5",
+    "version": "3.3.6",
     "icons": {
       "svg": "https://cdn.jsdelivr.net/gh/getferdi/recipes/recipes/whatsapp/icon.svg"
     }
diff --git a/docs/frontend_api.md b/docs/frontend_api.md
index aa1070b..bd0bfef 100644
--- a/docs/frontend_api.md
+++ b/docs/frontend_api.md
@@ -34,6 +34,22 @@ Ferdi.setBadge(4, 2);
 Ferdi.setBadge(3);
 ```
 
+### setDialogTitle(title)
+
+Sets the active dialog title to the app title
+
+#### Arguments
+
+1. `string` title
+
+- sets the active dialog title eg. WhatsApp contact name
+
+#### Usage
+
+```js
+Ferdi.setDialogTitle('Dialog title');
+```
+
 ### injectCSS(pathToCssFile)
 
 Injects the contents of one or more CSS files into the current webview
diff --git a/docs/integration.md b/docs/integration.md
index 08164fc..acbc6b5 100644
--- a/docs/integration.md
+++ b/docs/integration.md
@@ -87,26 +87,26 @@ Please note that the fields `id`, `name`, `version` and `config` are mandatory.
 This is your "backend" code. Right now the options are very limited and most of the services don't need a custom handling here. If your service is relatively straight forward and has a static URL eg. _messenger.com_, _`[TEAMID]`.slack.com_ or _web.skype.com_ all you need to do to return the Ferdi Class:
 
 ```js
-module.exports = (Ferdi) => Ferdi;
+module.exports = Ferdi => Ferdi;
 ```
 
 If your service can be hosted on custom servers, you can validate the given URL to detect if it's your server and not e.g. google.com. To enable validation you can override the function `validateServer`
 
 ```js
 // RocketChat integration
-module.exports = (Ferdi) =>
+module.exports = Ferdi =>
   class RocketChat extends Ferdi {
     async validateUrl(url) {
       try {
         const resp = await window.fetch(`${url}/api/info`, {
-          method: "GET",
+          method: 'GET',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
         });
         const data = await resp.json();
 
-        return Object.hasOwnProperty.call(data, "version");
+        return Object.hasOwnProperty.call(data, 'version');
       } catch (err) {
         console.error(err);
       }
@@ -147,24 +147,44 @@ overrideUserAgent() {
 
 ### webview.js
 
-The `webview.js` is the actual script that will be loaded into the webview. Here you can do whatever you want to do in order perfectly integrate the service into Ferdi. For convenience, we have provided a very simple set of functions to set unread message badges (`Ferdi.setBadge()`) and inject CSS files (`Ferdi.injectCSS()`).
+The `webview.js` is the actual script that will be loaded into the webview. Here you can do whatever you want to do in order perfectly integrate the service into Ferdi. For convenience, we have provided a very simple set of functions to set unread message badges (`Ferdi.setBadge()`), set active dialog title (`Ferdi.setDialogTitle()`) and inject CSS files (`Ferdi.injectCSS()`).
 
 ```js
-// orat.io integration
-module.exports = (Ferdi) => {
+// telegram integration
+module.exports = Ferdi => {
   const getMessages = () => {
     let direct = 0;
     let indirect = 0;
-    const FerdiData = document.querySelector("#FerdiMessages").dataset;
-    if (FerdiData) {
-      direct = FerdiData.direct;
-      indirect = FerdiData.indirect;
+    const elements = document.querySelectorAll('.rp');
+    for (const element of elements) {
+      const subtitleBadge = element.querySelector('.dialog-subtitle-badge');
+      if (subtitleBadge) {
+        const parsedValue = Ferdi.safeParseInt(subtitleBadge.textContent);
+        if (element.dataset.peerId > 0) {
+          direct += parsedValue;
+        } else {
+          indirect += parsedValue;
+        }
+      }
     }
 
     Ferdi.setBadge(direct, indirect);
-  }
+  };
+
+  const getActiveDialogTitle = () => {
+    const element = document.querySelector('.top .peer-title');
+
+    Ferdi.setDialogTitle(element ? element.textContent : '');
+  };
+
+  const loopFunc = () => {
+    getMessages();
+    getActiveDialogTitle();
+  };
+
+  Ferdi.loop(loopFunc);
 
-  Ferdi.loop(getMessages);
+  Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));
 };
 ```
 
diff --git a/recipes/element/webview.js b/recipes/element/webview.js
index 771c758..75df4d9 100644
--- a/recipes/element/webview.js
+++ b/recipes/element/webview.js
@@ -9,7 +9,7 @@ module.exports = Ferdi => {
     let indirectCount = 0;
     // Count Badges depending on Element Settings
     if (avatarBadges.length > 0) {
-      avatarBadges.forEach(function(badge) {
+      for (const badge of avatarBadges) {
         if (badge.parentElement.getAttribute('class').includes('mx_NotificationBadge_highlighted')) {
           directCount = directCount + Ferdi.safeParseInt(badge.textContent);
         } else if (badge.parentElement.previousSibling != null && badge.parentElement.previousSibling.getAttribute('class').includes('mx_DecoratedRoomAvatar_icon_online')) {
@@ -19,9 +19,9 @@ module.exports = Ferdi => {
         } else {
           indirectCount = indirectCount + Ferdi.safeParseInt(badge.textContent);
         }
-      });
+      }
     } else {
-      spaceBadges.forEach(function(badge) {
+      for (const badge of spaceBadges) {
         if (badge.parentElement.getAttribute('class').includes('mx_NotificationBadge_highlighted')) {
           directCount = directCount + Ferdi.safeParseInt(badge.textContent);
         } else if (badge.parentElement.getAttribute('class').includes('mx_NotificationBadge_dot')) {
@@ -29,7 +29,7 @@ module.exports = Ferdi => {
         } else {
           indirectCount = indirectCount + Ferdi.safeParseInt(badge.textContent);
         }
-      });
+      }
     }
     // set Ferdi badge
     Ferdi.setBadge(directCount, indirectCount);
diff --git a/recipes/telegram/package.json b/recipes/telegram/package.json
index adb6de6..beda3c3 100644
--- a/recipes/telegram/package.json
+++ b/recipes/telegram/package.json
@@ -1,7 +1,7 @@
 {
   "id": "telegram",
   "name": "Telegram",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "license": "MIT",
   "config": {
     "serviceURL": "https://web.telegram.org",
diff --git a/recipes/telegram/webview.js b/recipes/telegram/webview.js
index 358bdaa..7d2c8e3 100644
--- a/recipes/telegram/webview.js
+++ b/recipes/telegram/webview.js
@@ -8,25 +8,36 @@ function _interopRequireDefault(obj) {
 
 module.exports = Ferdi => {
   const getMessages = () => {
-    let count = 0;
-    let count_sec = 0;
+    let direct = 0;
+    let indirect = 0;
     const elements = document.querySelectorAll('.rp');
     for (const element of elements) {
       const subtitleBadge = element.querySelector('.dialog-subtitle-badge');
       if (subtitleBadge) {
         const parsedValue = Ferdi.safeParseInt(subtitleBadge.textContent);
         if (element.dataset.peerId > 0) {
-          count += parsedValue;
+          direct += parsedValue;
         } else {
-          count_sec += parsedValue;
+          indirect += parsedValue;
         }
       }
     }
 
-    Ferdi.setBadge(count, count_sec);
+    Ferdi.setBadge(direct, indirect);
   };
 
-  Ferdi.loop(getMessages);
+  const getActiveDialogTitle = () => {
+    const element = document.querySelector('.top .peer-title');
+
+    Ferdi.setDialogTitle(element ? element.textContent : '');
+  };
+
+  const loopFunc = () => {
+    getMessages();
+    getActiveDialogTitle();
+  };
+
+  Ferdi.loop(loopFunc);
 
   Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));
 };
diff --git a/recipes/whatsapp/package.json b/recipes/whatsapp/package.json
index 8f4aab7..208a3a8 100644
--- a/recipes/whatsapp/package.json
+++ b/recipes/whatsapp/package.json
@@ -1,7 +1,7 @@
 {
   "id": "whatsapp",
   "name": "WhatsApp",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "license": "MIT",
   "config": {
     "serviceURL": "https://web.whatsapp.com",
diff --git a/recipes/whatsapp/webview.js b/recipes/whatsapp/webview.js
index a908637..1c11edc 100644
--- a/recipes/whatsapp/webview.js
+++ b/recipes/whatsapp/webview.js
@@ -1,14 +1,17 @@
 const _path = _interopRequireDefault(require('path'));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 module.exports = (Ferdi, settings) => {
   const getMessages = () => {
     let count = 0;
     let indirectCount = 0;
 
-    const parentChatElem = [...document.querySelectorAll('div[aria-label]')]
-                           .sort((a, b) => (a.offsetHeight < b.offsetHeight) ? 1 : -1)[0];
+    const parentChatElem = [
+      ...document.querySelectorAll('div[aria-label]'),
+    ].sort((a, b) => (a.offsetHeight < b.offsetHeight ? 1 : -1))[0];
     if (!parentChatElem) {
       return;
     }
@@ -17,7 +20,12 @@ module.exports = (Ferdi, settings) => {
     for (const unreadElem of unreadSpans) {
       const countValue = Ferdi.safeParseInt(unreadElem.textContent);
       if (countValue > 0) {
-        if (!unreadElem.parentNode.previousSibling || unreadElem.parentNode.previousSibling.querySelectorAll('[data-icon=muted]').length === 0) {
+        if (
+          !unreadElem.parentNode.previousSibling ||
+          unreadElem.parentNode.previousSibling.querySelectorAll(
+            '[data-icon=muted]',
+          ).length === 0
+        ) {
           count += countValue;
         } else {
           indirectCount += countValue;
@@ -28,12 +36,31 @@ module.exports = (Ferdi, settings) => {
     Ferdi.setBadge(count, indirectCount);
   };
 
+  const getActiveDialogTitle = () => {
+    const element = document.querySelector('header .emoji-texttt');
+
+    Ferdi.setDialogTitle(element ? element.textContent : '');
+  };
+
+  const loopFunc = () => {
+    getMessages();
+    getActiveDialogTitle();
+  };
+
   window.addEventListener('beforeunload', async () => {
-    Ferdi.clearStorageData(settings.id, { storages: ['appcache', 'serviceworkers', 'cachestorage', 'websql', 'indexdb'] });
+    Ferdi.clearStorageData(settings.id, {
+      storages: [
+        'appcache',
+        'serviceworkers',
+        'cachestorage',
+        'websql',
+        'indexdb',
+      ],
+    });
     Ferdi.releaseServiceWorkers();
   });
 
-  Ferdi.loop(getMessages);
+  Ferdi.loop(loopFunc);
 
   Ferdi.injectCSS(_path.default.join(__dirname, 'service.css'));
 };