From 98f638bff6985b2ac91b460c4233628085d2ce83 Mon Sep 17 00:00:00 2001
From: Kiran Niranjan <kiran.niranjan@symphony.com>
Date: Thu, 4 Apr 2024 15:15:20 +0530
Subject: [PATCH] SDA-4506 - Apply Zoom for notification window (#2120)

---
 src/app/notifications/notification-helper.ts  |   2 +
 src/app/window-utils.ts                       | 196 ++++++++++++------
 src/common/api-interface.ts                   |   2 +
 src/renderer/call-notification-helper.ts      |   2 +
 src/renderer/components/call-notification.tsx |  20 +-
 src/renderer/components/notification-comp.tsx |  14 +-
 src/renderer/notification.ts                  |   1 +
 7 files changed, 167 insertions(+), 70 deletions(-)

diff --git a/src/app/notifications/notification-helper.ts b/src/app/notifications/notification-helper.ts
index bb0cce64c..65ca24a77 100644
--- a/src/app/notifications/notification-helper.ts
+++ b/src/app/notifications/notification-helper.ts
@@ -48,6 +48,8 @@ class NotificationHelper {
       electronToast.show();
       return;
     }
+    options.zoomFactor =
+      windowHandler?.getMainWebContents()?.getZoomFactor() || 1;
     notification.showNotification(options, this.notificationCallback);
   }
 
diff --git a/src/app/window-utils.ts b/src/app/window-utils.ts
index 251c760e5..fcdf7ef95 100644
--- a/src/app/window-utils.ts
+++ b/src/app/window-utils.ts
@@ -90,6 +90,7 @@ const TITLE_BAR_EVENTS = [
   'enter-full-screen',
   'leave-full-screen',
 ];
+const ZOOM_FACTOR_CHANGE = 'zoom-factor-change';
 
 /**
  * Checks if window is valid and exists
@@ -857,15 +858,6 @@ export const zoomIn = () => {
     return;
   }
 
-  // Disable Zoom for notification windows
-  if (
-    (focusedWindow as ICustomBrowserWindow).winName &&
-    (focusedWindow as ICustomBrowserWindow).winName ===
-      apiName.notificationWindowName
-  ) {
-    return;
-  }
-
   let { webContents } = focusedWindow;
 
   // If the focused window is mainWindow we should use mainWebContents
@@ -878,29 +870,66 @@ export const zoomIn = () => {
     }
   }
 
-  if (windowHandler.isMana) {
+  const setZoomFactor = (
+    webContents: WebContents,
+    notificationWebContents: any = {},
+    isNotificationWindow = false,
+  ) => {
     const zoomFactor = webContents.getZoomFactor();
-    if (zoomFactor < 1.5) {
-      if (zoomFactor < 0.7) {
-        webContents.setZoomFactor(0.7);
-      } else if (zoomFactor >= 0.7 && zoomFactor < 0.8) {
-        webContents.setZoomFactor(0.8);
-      } else if (zoomFactor >= 0.8 && zoomFactor < 0.9) {
-        webContents.setZoomFactor(0.9);
-      } else if (zoomFactor >= 0.9 && zoomFactor < 1.0) {
-        webContents.setZoomFactor(1.0);
-      } else if (zoomFactor >= 1.0 && zoomFactor < 1.1) {
-        webContents.setZoomFactor(1.1);
-      } else if (zoomFactor >= 1.1 && zoomFactor < 1.25) {
-        webContents.setZoomFactor(1.25);
-      } else if (zoomFactor >= 1.25 && zoomFactor < 1.5) {
-        webContents.setZoomFactor(1.5);
+    if (windowHandler.isMana) {
+      if (zoomFactor < 1.5) {
+        if (zoomFactor < 0.7) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 0.7)
+            : webContents.setZoomFactor(0.7);
+        } else if (zoomFactor >= 0.7 && zoomFactor < 0.8) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 0.8)
+            : webContents.setZoomFactor(0.8);
+        } else if (zoomFactor >= 0.8 && zoomFactor < 0.9) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 0.9)
+            : webContents.setZoomFactor(0.9);
+        } else if (zoomFactor >= 0.9 && zoomFactor < 1.0) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.0)
+            : webContents.setZoomFactor(1.0);
+        } else if (zoomFactor >= 1.0 && zoomFactor < 1.1) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.1)
+            : webContents.setZoomFactor(1.1);
+        } else if (zoomFactor >= 1.1 && zoomFactor < 1.25) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.25)
+            : webContents.setZoomFactor(1.25);
+        } else if (zoomFactor >= 1.25 && zoomFactor < 1.5) {
+          isNotificationWindow
+            ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1.5)
+            : webContents.setZoomFactor(1.5);
+        }
       }
+    } else {
+      const currentZoomLevel = webContents.getZoomLevel();
+      isNotificationWindow
+        ? notificationWebContents.send(ZOOM_FACTOR_CHANGE, zoomFactor)
+        : webContents.setZoomLevel(currentZoomLevel + 0.5);
     }
-  } else {
-    const currentZoomLevel = webContents.getZoomLevel();
-    webContents.setZoomLevel(currentZoomLevel + 0.5);
-  }
+  };
+
+  const notificationWindows = BrowserWindow.getAllWindows().filter(
+    (win) =>
+      (win as ICustomBrowserWindow).winName &&
+      (win as ICustomBrowserWindow).winName === apiName.notificationWindowName,
+  );
+
+  notificationWindows.map((notificationWindow) => {
+    const notificationWebContents = notificationWindow?.webContents;
+    if (!notificationWindow || !windowExists(notificationWindow)) {
+      return;
+    }
+    setZoomFactor(webContents, notificationWebContents, true);
+  });
+  setZoomFactor(webContents);
 };
 
 /**
@@ -917,15 +946,6 @@ export const zoomOut = () => {
     return;
   }
 
-  // Disable Zoom for notification windows
-  if (
-    (focusedWindow as ICustomBrowserWindow).winName &&
-    (focusedWindow as ICustomBrowserWindow).winName ===
-      apiName.notificationWindowName
-  ) {
-    return;
-  }
-
   let { webContents } = focusedWindow;
 
   // If the focused window is mainWindow we should use mainWebContents
@@ -938,29 +958,68 @@ export const zoomOut = () => {
     }
   }
 
-  if (windowHandler.isMana) {
+  const setZoomFactor = (
+    webContents: WebContents,
+    notificationWebContents: any = {},
+    isNotificationWindow = false,
+  ) => {
     const zoomFactor = webContents.getZoomFactor();
-    if (zoomFactor > 0.7) {
-      if (zoomFactor > 1.5) {
-        webContents.setZoomFactor(1.5);
-      } else if (zoomFactor > 1.25 && zoomFactor <= 1.5) {
-        webContents.setZoomFactor(1.25);
-      } else if (zoomFactor > 1.1 && zoomFactor <= 1.25) {
-        webContents.setZoomFactor(1.1);
-      } else if (zoomFactor > 1.0 && zoomFactor <= 1.1) {
-        webContents.setZoomFactor(1.0);
-      } else if (zoomFactor > 0.9 && zoomFactor <= 1.0) {
-        webContents.setZoomFactor(0.9);
-      } else if (zoomFactor > 0.8 && zoomFactor <= 0.9) {
-        webContents.setZoomFactor(0.8);
-      } else if (zoomFactor > 0.7 && zoomFactor <= 0.8) {
-        webContents.setZoomFactor(0.7);
+    if (windowHandler.isMana) {
+      const zoomFactor = webContents.getZoomFactor();
+      if (zoomFactor > 0.7) {
+        if (zoomFactor > 1.5) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.5)
+            : webContents.setZoomFactor(1.5);
+        } else if (zoomFactor > 1.25 && zoomFactor <= 1.5) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.25)
+            : webContents.setZoomFactor(1.25);
+        } else if (zoomFactor > 1.1 && zoomFactor <= 1.25) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.1)
+            : webContents.setZoomFactor(1.1);
+        } else if (zoomFactor > 1.0 && zoomFactor <= 1.1) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 1.0)
+            : webContents.setZoomFactor(1.0);
+        } else if (zoomFactor > 0.9 && zoomFactor <= 1.0) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 0.9)
+            : webContents.setZoomFactor(0.9);
+        } else if (zoomFactor > 0.8 && zoomFactor <= 0.9) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 0.8)
+            : webContents.setZoomFactor(0.8);
+        } else if (zoomFactor > 0.7 && zoomFactor <= 0.8) {
+          isNotificationWindow
+            ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, 0.7)
+            : webContents.setZoomFactor(0.7);
+        }
       }
+    } else {
+      const currentZoomLevel = webContents.getZoomLevel();
+      isNotificationWindow
+        ? notificationWebContents?.send(ZOOM_FACTOR_CHANGE, zoomFactor)
+        : webContents.setZoomLevel(currentZoomLevel - 0.5);
     }
-  } else {
-    const currentZoomLevel = webContents.getZoomLevel();
-    webContents.setZoomLevel(currentZoomLevel - 0.5);
-  }
+  };
+
+  const notificationWindows = BrowserWindow.getAllWindows().filter(
+    (win) =>
+      (win as ICustomBrowserWindow).winName &&
+      (win as ICustomBrowserWindow).winName === apiName.notificationWindowName,
+  );
+
+  notificationWindows.map((notificationWindow) => {
+    const notificationWebContents = notificationWindow?.webContents;
+    if (!notificationWindow || !windowExists(notificationWindow)) {
+      return;
+    }
+    setZoomFactor(webContents, notificationWebContents, true);
+  });
+
+  setZoomFactor(webContents);
 };
 
 /**
@@ -972,14 +1031,6 @@ export const resetZoomLevel = () => {
   if (!focusedWindow || !windowExists(focusedWindow)) {
     return;
   }
-  // Disable Zoom for notification windows
-  if (
-    (focusedWindow as ICustomBrowserWindow).winName &&
-    (focusedWindow as ICustomBrowserWindow).winName ===
-      apiName.notificationWindowName
-  ) {
-    return;
-  }
   let { webContents } = focusedWindow;
   // If the focused window is mainWindow we should use mainWebContents
   if (
@@ -990,6 +1041,19 @@ export const resetZoomLevel = () => {
       webContents = mainWebContents;
     }
   }
+  const notificationWebContents = BrowserWindow.getAllWindows().filter(
+    (win) =>
+      (win as ICustomBrowserWindow).winName &&
+      (win as ICustomBrowserWindow).winName === apiName.notificationWindowName,
+  );
+
+  notificationWebContents.map((notificationWindow) => {
+    const notificationWebContents = notificationWindow.webContents;
+    if (!notificationWindow || !windowExists(notificationWindow)) {
+      return;
+    }
+    notificationWebContents.send(ZOOM_FACTOR_CHANGE, 1);
+  });
   webContents.setZoomLevel(0);
 };
 
diff --git a/src/common/api-interface.ts b/src/common/api-interface.ts
index 70ea18ab2..0ee85a9e2 100644
--- a/src/common/api-interface.ts
+++ b/src/common/api-interface.ts
@@ -276,6 +276,7 @@ export interface INotificationData {
   hasReply?: boolean;
   hasMention?: boolean;
   isFederatedEnabled?: boolean;
+  zoomFactor: number;
 }
 
 /**
@@ -300,6 +301,7 @@ export interface ICallNotificationData {
   shouldDisplayBadge: boolean;
   acceptButtonText: string;
   rejectButtonText: string;
+  zoomFactor: number;
 }
 
 export enum NotificationActions {
diff --git a/src/renderer/call-notification-helper.ts b/src/renderer/call-notification-helper.ts
index 247b7c4ae..d99d19e74 100644
--- a/src/renderer/call-notification-helper.ts
+++ b/src/renderer/call-notification-helper.ts
@@ -13,6 +13,8 @@ class CallNotificationHelper {
    * @param options {ICallNotificationData}
    */
   public showNotification(options: ICallNotificationData) {
+    options.zoomFactor =
+      windowHandler?.getMainWebContents()?.getZoomFactor() || 1;
     callNotification.createCallNotificationWindow(
       options,
       this.notificationCallback,
diff --git a/src/renderer/components/call-notification.tsx b/src/renderer/components/call-notification.tsx
index 126d66cd5..2a082701b 100644
--- a/src/renderer/components/call-notification.tsx
+++ b/src/renderer/components/call-notification.tsx
@@ -36,6 +36,7 @@ interface ICallNotificationState {
   isPrimaryTextOverflowing: boolean;
   isSecondaryTextOverflowing: boolean;
   isFederatedEnabled: boolean;
+  zoomFactor: number;
 }
 
 type mouseEventButton =
@@ -78,6 +79,7 @@ export default class CallNotification extends React.Component<
       isPrimaryTextOverflowing: false,
       isSecondaryTextOverflowing: false,
       isFederatedEnabled: false,
+      zoomFactor: 1,
     };
     this.state = { ...this.defaultState };
     this.updateState = this.updateState.bind(this);
@@ -88,6 +90,7 @@ export default class CallNotification extends React.Component<
    */
   public componentDidMount(): void {
     ipcRenderer.on('call-notification-data', this.updateState);
+    ipcRenderer.on('zoom-factor-change', this.setZoomFactor);
   }
 
   /**
@@ -95,6 +98,7 @@ export default class CallNotification extends React.Component<
    */
   public componentWillUnmount(): void {
     ipcRenderer.removeListener('call-notification-data', this.updateState);
+    ipcRenderer.on('zoom-factor-change', this.setZoomFactor);
   }
 
   /**
@@ -121,6 +125,7 @@ export default class CallNotification extends React.Component<
       isPrimaryTextOverflowing,
       isSecondaryTextOverflowing,
       isFederatedEnabled,
+      zoomFactor,
     } = this.state;
 
     let themeClassName;
@@ -168,8 +173,10 @@ export default class CallNotification extends React.Component<
         }}
         onClick={this.eventHandlers.onClick(id)}
       >
-        <div className={`title ${themeClassName}`}>{title}</div>
-        <div className='caller-info-container'>
+        <div className={`title ${themeClassName}`} style={{ zoom: zoomFactor }}>
+          {title}
+        </div>
+        <div className='caller-info-container' style={{ zoom: zoomFactor }}>
           <div className='logo-container'>
             {this.renderImage(
               icon,
@@ -236,7 +243,7 @@ export default class CallNotification extends React.Component<
             )}
           </div>
         </div>
-        <div className='actions'>
+        <div className='actions' style={{ zoom: zoomFactor }}>
           <button
             data-testid='CALL_NOTIFICATION_REJECT_BUTTON'
             className={classNames('decline', {
@@ -323,6 +330,13 @@ export default class CallNotification extends React.Component<
     this.checkTextOverflow();
   }
 
+  /**
+   * Set notification zoom factor
+   */
+  private setZoomFactor = (_event, zoomFactor) => {
+    this.setState({ zoomFactor });
+  };
+
   /**
    * Renders image if provided otherwise renders symphony logo
    * @param imageUrl
diff --git a/src/renderer/components/notification-comp.tsx b/src/renderer/components/notification-comp.tsx
index bbebffc37..348afd65a 100644
--- a/src/renderer/components/notification-comp.tsx
+++ b/src/renderer/components/notification-comp.tsx
@@ -32,6 +32,7 @@ interface INotificationState {
   containerHeight: number;
   canSendMessage: boolean;
   isFederatedEnabled?: boolean;
+  zoomFactor?: number;
 }
 
 type mouseEventButton =
@@ -86,6 +87,7 @@ export default class NotificationComp extends React.Component<
       containerHeight: CONTAINER_HEIGHT,
       canSendMessage: false,
       isFederatedEnabled: false,
+      zoomFactor: 1,
     };
     this.updateState = this.updateState.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
@@ -100,6 +102,7 @@ export default class NotificationComp extends React.Component<
    */
   public componentDidMount(): void {
     ipcRenderer.on('notification-data', this.updateState);
+    ipcRenderer.on('zoom-factor-change', this.setZoomFactor);
   }
 
   /**
@@ -107,6 +110,7 @@ export default class NotificationComp extends React.Component<
    */
   public componentWillUnmount(): void {
     ipcRenderer.removeListener('notification-data', this.updateState);
+    ipcRenderer.removeListener('zoom-factor-change', this.setZoomFactor);
   }
 
   /**
@@ -126,6 +130,7 @@ export default class NotificationComp extends React.Component<
       flash,
       icon,
       isFederatedEnabled,
+      zoomFactor,
     } = this.state;
     let themeClassName;
     if (theme) {
@@ -185,7 +190,7 @@ export default class NotificationComp extends React.Component<
           onClick={this.eventHandlers.onClick(id)}
         >
           <div className='logo-container'>{this.renderImage(icon)}</div>
-          <div className='notification-container'>
+          <div className='notification-container' style={{ zoom: zoomFactor }}>
             <div className='notification-header'>
               <div className='notification-header-content'>
                 <span className={`title ${themeClassName}`}>{title}</span>
@@ -478,6 +483,13 @@ export default class NotificationComp extends React.Component<
     this.setState(data as INotificationState);
   }
 
+  /**
+   * Set notification zoom factor
+   */
+  private setZoomFactor = (_event, zoomFactor) => {
+    this.setState({ zoomFactor });
+  };
+
   /**
    * Reset data for new notification
    * @private
diff --git a/src/renderer/notification.ts b/src/renderer/notification.ts
index 3dcee4841..b4c5d35cc 100644
--- a/src/renderer/notification.ts
+++ b/src/renderer/notification.ts
@@ -297,6 +297,7 @@ class Notification extends NotificationHandler {
       hasReply,
       hasMention,
       isFederatedEnabled,
+      zoomFactor: data?.zoomFactor,
     });
     notificationWindow.showInactive();
   }