Feature/teams v2 changes theme (#1177)

* adding how to debug in bug report, moving react logic into its own handler, moving theme.js to use react instead of angular, change regex in mainAppWindow to allow for v1 and v2 versions and removing some rough lines * adding some extra escape characters for the dots in the url * bug fixes and adding the ability to support both v1 and v2 for themes
IsmaelMartinez · Apr 4, 2024 · ab4d0cb · ab4d0cb
1 parent dfab5ad
commit ab4d0cb
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 27 deletions.
diff --git a/app/browser/tools/settings.js b/app/browser/tools/settings.js
@@ -1,4 +1,5 @@
 const instance = require('./instance');
+const ReactHandler = require('./reactHandler');
 
 let _Settings_config = new WeakMap();
 let _Settings_ipcRenderer = new WeakMap();
@@ -33,19 +34,30 @@ class Settings {
  * @param {Electron.IpcRendererEvent} event 
  */
 async function retrieve(event) {
-	const inst = await instance.whenReady().catch(() => {
-		console.error('Failed to retrieve Teams settings');
-		return;
-	});
-	const settings = {
-		theme: inst.controller.layoutService.getTheme(),
-		chatDensity: inst.controller.layoutService.getChatDensity(),
-		devices: inst.controller.callingService._deviceManagerService.deviceManager.getSelectedDevices()
-	};
-	settings.devices.camera = getDeviceLabelFromId(inst.controller, settings.devices.camera, 1);
-	settings.devices.microphone = getDeviceLabelFromId(inst.controller, settings.devices.microphone, 2);
-	settings.devices.speaker = getDeviceLabelFromId(inst.controller, settings.devices.speaker, 3);
-	event.sender.send('get-teams-settings', settings);
+	const clientPreferences = ReactHandler.getTeams2ClientPreferences();
+
+	if (!clientPreferences) {
+		console.warn('Failed to retrieve Teams settings from react');
+		const inst = await instance.whenReady().catch(() => {
+			console.warn('Failed to retrieve Teams settings from angular');
+			return;
+		});
+		const settings = {
+			theme: inst.controller.layoutService.getTheme(),
+			chatDensity: inst.controller.layoutService.getChatDensity(),
+			devices: inst.controller.callingService._deviceManagerService.deviceManager.getSelectedDevices()
+		};
+		settings.devices.camera = getDeviceLabelFromId(inst.controller, settings.devices.camera, 1);
+		settings.devices.microphone = getDeviceLabelFromId(inst.controller, settings.devices.microphone, 2);
+		settings.devices.speaker = getDeviceLabelFromId(inst.controller, settings.devices.speaker, 3);
+		event.sender.send('get-teams-settings', settings);
+	} else {
+		const settings = {
+			theme: clientPreferences.theme.userTheme,
+			chatDensity: clientPreferences.density.chatDensity,
+		};
+		event.sender.send('get-teams-settings', settings);
+	}
 }
 
 function getDeviceLabelFromId(controller, id, kind) {
@@ -58,17 +70,27 @@ function getDeviceLabelFromId(controller, id, kind) {
  * @param {...any} args 
  */
 async function restore(event, ...args) {
-	const inst = await instance.whenReady().catch(() => {
-		console.error('Failed to restore Teams settings');
-		return;
-	});
-	inst.controller.layoutService.setTheme(args[0].theme);
-	inst.controller.layoutService.setChatDensity(args[0].chatDensity);
-	args[0].devices.camera = getDeviceIdFromLabel(inst.controller,args[0].devices.camera,1);
-	args[0].devices.microphone = getDeviceIdFromLabel(inst.controller,args[0].devices.microphone,2);
-	args[0].devices.speaker = getDeviceIdFromLabel(inst.controller,args[0].devices.speaker,3);
-	inst.controller.callingService._deviceManagerService.deviceManager.selectDevices(args[0].devices);
-	event.sender.send('set-teams-settings', true);
+	const clientPreferences = ReactHandler.getTeams2ClientPreferences();
+
+	if (!clientPreferences) {
+		console.warn('Failed to retrieve Teams settings from react');
+		const inst = await instance.whenReady().catch(() => {
+			console.warn('Failed to retrieve Teams settings from angular');
+			return;
+		});
+
+		inst.controller.layoutService.setTheme(args[0].theme);
+		inst.controller.layoutService.setChatDensity(args[0].chatDensity);
+		args[0].devices.camera = getDeviceIdFromLabel(inst.controller,args[0].devices.camera,1);
+		args[0].devices.microphone = getDeviceIdFromLabel(inst.controller,args[0].devices.microphone,2);
+		args[0].devices.speaker = getDeviceIdFromLabel(inst.controller,args[0].devices.speaker,3);
+		inst.controller.callingService._deviceManagerService.deviceManager.selectDevices(args[0].devices);
+		event.sender.send('set-teams-settings', true);
+	} else {
+		clientPreferences.theme.userTheme = args[0].theme;
+		clientPreferences.density.chatDensity = args[0].chatDensity;
+		event.sender.send('set-teams-settings', true);
+	}
 }
 
 function getDeviceIdFromLabel(controller, label, kind) {

diff --git a/app/browser/tools/theme.js b/app/browser/tools/theme.js
@@ -1,4 +1,5 @@
 const ReactHandler = require('./reactHandler');
+const instance = require('./instance');
 
 class ThemeManager {
     /**
@@ -8,7 +9,13 @@ class ThemeManager {
     init(config, ipcRenderer) {
         this.ipcRenderer = ipcRenderer;
         this.config = config;
-        ReactHandler.getTeams2ClientPreferences().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);   
@@ -18,8 +25,17 @@ class ThemeManager {
     applyTheme = async (event, ...args) => {
         const theme = args[0] ? 'dark' : 'default';
         const clientPreferences = ReactHandler.getTeams2ClientPreferences();
-        clientPreferences.useTheme = theme;
-        console.log('Theme changed to', theme);
+        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);
+        }
     }
 }