Add active dialog title feature (#2114)

https://github.com/getferdi/ferdi/issues/1280
WhatsApp-like services can set active dialog title to the app title eg. Ferdi - WhatsApp - Contact Name

4 files changed, 70 insertions, 2 deletions

diff --git a/src/webview/dialogTitle.ts b/src/webview/dialogTitle.ts
new file mode 100644
index 000000000..f9a1aac6f
--- /dev/null
+++ b/src/webview/dialogTitle.ts
@@ -0,0 +1,33 @@
+import { ipcRenderer } from 'electron';
+
+const debug = require('debug')('Ferdi:Plugin:DialogTitleHandler');
+
+export class DialogTitleHandler {
+  titleCache: { title: string };
+
+  constructor() {
+    this.titleCache = {
+      title: '',
+    };
+  }
+
+  safeGetTitle(title: string | undefined | null) {
+    if (!title) {
+      return '';
+    }
+
+    return title;
+  }
+
+  setDialogTitle(title: string | undefined | null) {
+    const newTitle = this.safeGetTitle(title);
+    if (this.titleCache.title === newTitle) {
+      return;
+    }
+
+    debug('Sending active dialog title to host %s', newTitle);
+    ipcRenderer.sendToHost('active-dialog-title', newTitle);
+
+    this.titleCache.title = newTitle;
+  }
+}
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index f1d493e7c..ebe88ed85 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -5,8 +5,14 @@ import { pathExistsSync, readFileSync, existsSync } from 'fs-extra';
 const debug = require('debug')('Ferdi:Plugin:RecipeWebview');
 
 class RecipeWebview {
-  constructor(badgeHandler, notificationsHandler, sessionHandler) {
+  constructor(
+    badgeHandler,
+    dialogTitleHandler,
+    notificationsHandler,
+    sessionHandler,
+  ) {
     this.badgeHandler = badgeHandler;
+    this.dialogTitleHandler = dialogTitleHandler;
     this.notificationsHandler = notificationsHandler;
     this.sessionHandler = sessionHandler;
 
@@ -59,6 +65,17 @@ class RecipeWebview {
   }
 
   /**
+   * Set the active dialog title to the app title
+   *
+   * @param {string | undefined | null} title                Set the active dialog title
+   *                                                         to the app title
+   *                                                         eg. WhatsApp contact name
+   */
+  setDialogTitle(title) {
+    this.dialogTitleHandler.setDialogTitle(title);
+  }
+
+  /**
    * Safely parse the given text into an integer
    *
    * @param  {string | number | undefined | null} text to be parsed
@@ -127,7 +144,10 @@ class RecipeWebview {
   }
 
   clearStorageData(serviceId, targetsToClear) {
-    ipcRenderer.send('clear-storage-data', { serviceId, targetsToClear });
+    ipcRenderer.send('clear-storage-data', {
+      serviceId,
+      targetsToClear,
+    });
   }
 
   releaseServiceWorkers() {
diff --git a/src/webview/lib/Userscript.js b/src/webview/lib/Userscript.js
index bed2b1ff8..f7bb99206 100644
--- a/src/webview/lib/Userscript.js
+++ b/src/webview/lib/Userscript.js
@@ -60,6 +60,16 @@ export default class Userscript {
   }
 
   /**
+   * Set active dialog title to the app title
+   * @param {*} title Dialog title
+   */
+  setDialogTitle(title) {
+    if (this.recipe && this.recipe.setDialogTitle) {
+      this.recipe.setDialogTitle(title);
+    }
+  }
+
+  /**
    * Inject CSS files into the current page
    *
    * @param  {...string} files
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 5cab28c09..92c1ee2f0 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -23,6 +23,7 @@ import RecipeWebview from './lib/RecipeWebview';
 import Userscript from './lib/Userscript';
 
 import { BadgeHandler } from './badge';
+import { DialogTitleHandler } from './dialogTitle';
 import { SessionHandler } from './sessionHandler';
 import contextMenu from './contextMenu';
 import {
@@ -51,6 +52,8 @@ const debug = require('debug')('Ferdi:Plugin');
 
 const badgeHandler = new BadgeHandler();
 
+const dialogTitleHandler = new DialogTitleHandler();
+
 const sessionHandler = new SessionHandler();
 
 const notificationsHandler = new NotificationsHandler();
@@ -106,6 +109,7 @@ contextBridge.exposeInMainWorld('ferdi', {
   open: window.open,
   setBadge: (direct, indirect) => badgeHandler.setBadge(direct, indirect),
   safeParseInt: text => badgeHandler.safeParseInt(text),
+  setDialogTitle: title => dialogTitleHandler.setDialogTitle(title),
   displayNotification: (title, options) =>
     notificationsHandler.displayNotification(title, options),
   getDisplayMediaSelector,
@@ -200,6 +204,7 @@ class RecipeController {
     try {
       this.recipe = new RecipeWebview(
         badgeHandler,
+        dialogTitleHandler,
         notificationsHandler,
         sessionHandler,
       );