Feature/teams v2 activityhub changes (#1178)

* initial wip work to move the tray notifications out of the activity manager/handler

* adding tray notification for react option

* adding the changes into the appdata file for flathub:

app/browser/index.js

@@ -57,6 +57,8 @@ function initializeModules(config, ipcRenderer) {
 	require('./tools/zoom').init(config);
 	require('./tools/shortcuts').init(config);
 	require('./tools/chromeApi')(config);
+	require('./tools/mutationTitle').init(config);
+	require('./tools/trayIconRenderer').init(config, ipcRenderer);
 	require('./tools/settings').init(config, ipcRenderer);
 	require('./tools/customBackgrounds')(config, ipcRenderer);
 	require('./tools/theme').init(config, ipcRenderer);

app/browser/notifications/activityManager.js

@@ -1,4 +1,3 @@
-const TrayIconRenderer = require('../tools/trayIconRenderer');
 const activityHub = require('../tools/activityHub');
 const wakeLock = require('../tools/wakeLock');
 
@@ -9,21 +8,10 @@ class ActivityManager {
 	 */
 	constructor(ipcRenderer, config) {
 		this.ipcRenderer = ipcRenderer;
-		this.iconRenderer = new TrayIconRenderer(config);
 		this.config = config;
 		this.myStatus = -1;
 	}
 
-	updateActivityCount(count) {
-		this.iconRenderer.render(count).then(icon => {
-			this.ipcRenderer.send('tray-update', {
-				icon: icon,
-				flash: (count > 0 && !this.config.disableNotificationWindowFlash)
-			});
-		});
-		this.ipcRenderer.invoke('set-badge-count', count);
-	}
-
 	start() {
 		setActivityHandlers(this);
 		setEventHandlers(this);
@@ -51,9 +39,6 @@ class ActivityManager {
 	}
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function setActivityHandlers(self) {
 	activityHub.on('activities-count-updated', updateActivityCountHandler(self));
 	activityHub.on('incoming-call-created', incomingCallCreatedHandler(self));
@@ -65,71 +50,48 @@ function setActivityHandlers(self) {
 	activityHub.on('my-status-changed', myStatusChangedHandler(self));
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function setEventHandlers(self) {
 	self.ipcRenderer.on('enable-wakelock', () => wakeLock.enable());
 	self.ipcRenderer.on('disable-wakelock', () => wakeLock.disable());
 }
 
-/**
- * @param {ActivityManager} self 
- */
-function updateActivityCountHandler(self) {
+function updateActivityCountHandler() {
 	return async (data) => {
-		self.updateActivityCount(data.count);
+		const event = new CustomEvent('unread-count', { detail: { number: data.count } });
+		window.dispatchEvent(event);
 	};
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function incomingCallCreatedHandler(self) {
 	return async (data) => {
 		self.ipcRenderer.invoke('incoming-call-created', data);
 	};
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function incomingCallConnectingHandler(self) {
 	return async () => {
 		self.ipcRenderer.invoke('incoming-call-connecting');
 	};
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function incomingCallDisconnectingHandler(self) {
 	return async () => {
 		self.ipcRenderer.invoke('incoming-call-disconnecting');
 	};
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function callConnectedHandler(self) {
 	return async () => {
 		self.ipcRenderer.invoke('call-connected');
 	};
 }
 
-/**
- * @param {ActivityManager} self 
- */
 function callDisconnectedHandler(self) {
 	return async () => {
 		self.ipcRenderer.invoke('call-disconnected');
 	};
 }
 
-/**
- * @param {ActivityManager} self 
- */
 // eslint-disable-next-line no-unused-vars
 function meetingStartNotifyHandler(self) {
 	if (!self.config.disableMeetingNotifications) {
@@ -142,9 +104,6 @@ function meetingStartNotifyHandler(self) {
 	return null;
 }
 
-/**
- * @param {ActivityManager} self 
- */
 // eslint-disable-next-line no-unused-vars
 function myStatusChangedHandler(self) {
 	// eslint-disable-next-line no-unused-vars

app/browser/tools/mutationTitle.js

@@ -0,0 +1,32 @@
+class MutationObserverTitle {
+
+	init(config) {
+		if (config.useMutationTitleLogic) {
+			console.log('MutationObserverTitle enabled');
+			window.addEventListener('DOMContentLoaded', this._applyMutationToTitleLogic);
+		}
+	}
+
+	_applyMutationToTitleLogic() {
+		console.log('Appliying MutationObserverTitle logic');
+		const observer = new window.MutationObserver(
+			() => {
+				console.log('title changed');
+				console.log(window.document.title);
+				const regex = /^\((\d+)\)/;
+				const match = window.document.title.match(regex);
+				if (match) {
+					const number = match[1];
+					console.log(number);
+					const event = new CustomEvent('unread-count', { detail: { number: number } });
+					window.dispatchEvent(event);
+				}
+			}
+		);
+		observer.observe(window.document.querySelector('title'),{ childList: true });
+		console.log('MutationObserverTitle logic applied');
+	}
+
+}
+
+exports = module.exports = new MutationObserverTitle();

app/browser/tools/reactHandler.js

@@ -1,19 +1,21 @@
 class ReactHandler {
-
-    _getTeams2ReactElement() {
-        return document.getElementById('app');
+    getTeams2IdleTracker() {
+        const teams2CoreServices = this._getTeams2CoreServices();
+        return teams2CoreServices?.clientState?._idleTracker;
     }
 
-    _getTeams2CoreServices() {
-        return this._getTeams2ReactElement()?._reactRootContainer?._internalRoot?.current?.updateQueue?.baseState?.element?.props?.coreServices;
+    getTeams2ClientPreferences() {
+        const teams2CoreServices = this._getTeams2CoreServices();
+        return teams2CoreServices?.clientPreferences?.clientPreferences;
     }
 
-    getTeams2IdleTracker() {
-        return this._getTeams2CoreServices()?.clientState?._idleTracker;
+    _getTeams2ReactElement() {
+        return document.getElementById('app');
     }
 
-    getTeams2ClientPreferences() {
-        return this._getTeams2CoreServices()?.clientPreferences?.clientPreferences;
+    _getTeams2CoreServices() {
+        const reactElement = this._getTeams2ReactElement();
+        return reactElement?._reactRootContainer?._internalRoot?.current?.updateQueue?.baseState?.element?.props?.coreServices;
     }
 }
 

app/browser/tools/theme.js

@@ -2,41 +2,37 @@ const ReactHandler = require('./reactHandler');
 const instance = require('./instance');
 
 class ThemeManager {
-    /**
-     * @param {object} config
-     * @param {Electron.IpcRenderer} ipcRenderer
-     */
-    init(config, ipcRenderer) {
-        this.ipcRenderer = ipcRenderer;
-        this.config = config;
+	init(config, ipcRenderer) {
+		this.ipcRenderer = ipcRenderer;
+		this.config = config;
 
-        const clientPreferences = ReactHandler.getTeams2ClientPreferences();
-        if (clientPreferences) {
-            console.log('Using react to set the follow system theme');
-            ReactHandler.getTeams2ClientPreferences().theme.followOsTheme = config.followSystemTheme;
-        }
+		const clientPreferences = ReactHandler.getTeams2ClientPreferences();
+		if (clientPreferences) {
+			console.log('Using react to set the follow system theme');
+			ReactHandler.getTeams2ClientPreferences().theme.followOsTheme = config.followSystemTheme;
+		}
 
-        if (config.followSystemTheme) {
-            console.log('followSystemTheme', config.followSystemTheme);
-            this.ipcRenderer.on('system-theme-changed', this.applyTheme);   
-        }
-    }
+		if (config.followSystemTheme) {
+			console.log('followSystemTheme', config.followSystemTheme);
+			this.ipcRenderer.on('system-theme-changed', this.applyTheme);   
+		}
+	}
 
-    applyTheme = async (event, ...args) => {
-        const theme = args[0] ? 'dark' : 'default';
-        const clientPreferences = ReactHandler.getTeams2ClientPreferences();
-        if (clientPreferences) {
-            console.log('Using react to set the theme');
-            clientPreferences.theme.userTheme = theme;
-            console.log('Theme changed to', theme);    
-        } else {
-            console.log('Using angular to set the theme');
-            const inst = await instance.whenReady().catch(() => {
-                console.error('Failed to apply Theme');
-            });
-            inst.controller.layoutService.setTheme(theme);
-        }
-    }
+	async applyTheme (event, ...args) {
+		const theme = args[0] ? 'dark' : 'default';
+		const clientPreferences = ReactHandler.getTeams2ClientPreferences();
+		if (clientPreferences) {
+			console.log('Using react to set the theme');
+			clientPreferences.theme.userTheme = theme;
+			console.log('Theme changed to', theme);    
+		} else {
+			console.log('Using angular to set the theme');
+			const inst = await instance.whenReady().catch(() => {
+				console.error('Failed to apply Theme');
+			});
+			inst.controller.layoutService.setTheme(theme);
+		}
+	}
 }
 
 module.exports = new ThemeManager();

app/browser/tools/trayIconRenderer.js

@@ -1,10 +1,25 @@
 const { nativeImage } = require('electron');
 const TrayIconChooser = require('./trayIconChooser');
 class TrayIconRenderer {
-	constructor(config) {
+	init(config, ipcRenderer) {
+		this.ipcRenderer = ipcRenderer;
+		this.config = config;
 		const iconChooser = new TrayIconChooser(config);
 		this.baseIcon = nativeImage.createFromPath(iconChooser.getFile());
 		this.iconSize = this.baseIcon.getSize();
+		window.addEventListener('unread-count', this.updateActivityCount.bind(this));
+	}
+
+	updateActivityCount(event) {
+		const count = event.detail.number;
+		this.render(count).then(icon => {
+			console.log('sending tray-update');
+			this.ipcRenderer.send('tray-update', {
+				icon: icon,
+				flash: (count > 0 && !this.config.disableNotificationWindowFlash)
+			});
+		});
+		this.ipcRenderer.invoke('set-badge-count', count);
 	}
 
 	render(newActivityCount) {
@@ -57,4 +72,4 @@ class TrayIconRenderer {
 	}
 }
 
-module.exports = exports = TrayIconRenderer;
+module.exports = exports = new TrayIconRenderer();