From ab4d0cbee2d67d01d91254e36e20ae9babdceb73 Mon Sep 17 00:00:00 2001 From: IsmaelMartinez Date: Thu, 4 Apr 2024 12:45:44 +0100 Subject: [PATCH] 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 --- app/browser/tools/settings.js | 70 +++++++++++++++++++++++------------ app/browser/tools/theme.js | 22 +++++++++-- 2 files changed, 65 insertions(+), 27 deletions(-) diff --git a/app/browser/tools/settings.js b/app/browser/tools/settings.js index 1401b88e..155c4ae9 100644 --- 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 index a9add77e..96a0b60d 100644 --- 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); + } } }