Feature/move from lucidlog to electron log (#1346)

* adding help option to show the configuration options. Adding logConfig option to allow to use console, electron-log or no logging (default)

* documenting changes and refactoring customBackground to be its own file/service. Provinding also an example of it

* updating the appdata

* updating version in the package.json file

* small review changes

* updating dependencies

* fix typo

* updating electron to 30.2.0

* fixing some sonarcloud worries

.github/ISSUE_TEMPLATE/bug_report.md

@@ -34,8 +34,10 @@ When possible, please run the application from the terminal using `--webDebug` a
 The provide in this section the output from both the terminal and the browser debug console.
 
 ```bash
-teams-for-linux --webDebug --appLogLevels=error,info,warn,debug
+teams-for-linux --webDebug --logConfig='{}'
 ```
 
+*IMPORTANT:* Ensure that you mask any sensitive information before posting the output.
+
 **Additional context**
 Add any other context about the problem here.

app/browser/index.js

@@ -36,9 +36,9 @@
 					title: title,
 					body: options.body
 				};
-				console.log('Requesting application to play sound');
+				console.debug('Requesting application to play sound');
 				ipcRenderer.invoke('play-notification-sound', notifSound);
-				console.log('Continues to default notification workflow');
+				console.debug('Continues to default notification workflow');
 				return new classicNotification(title, options);
 			} else {
 				ipcRenderer.invoke('show-notification', options);

app/browser/tools/activityHub.js

@@ -41,7 +41,7 @@ class ActivityHub {
 		const teams2IdleTracker = ReactHandler.getTeams2IdleTracker();
 		if (teams2IdleTracker) {
 			try {
-				console.log(`setMachineState teams2 state=${state}`);
+				console.debug(`setMachineState teams2 state=${state}`);
 				if (state === 1) {
 					teams2IdleTracker.handleMonitoredWindowEvent();
 				} else {
@@ -67,7 +67,7 @@ class ActivityHub {
 		const teams2IdleTracker = ReactHandler.getTeams2IdleTracker();
 		if (teams2IdleTracker) {
 			try {
-				console.log(`setUserStatus teams2 status=${status}`);
+				console.debug(`setUserStatus teams2 status=${status}`);
 				if (status === 1) {
 					teams2IdleTracker.handleMonitoredWindowEvent();
 				} else {

app/browser/tools/chromeApi.js

@@ -31,7 +31,7 @@ async function customGetDisplayMediaWayland(...args) {
 function customGetDisplayMediaX11() {
 	return new Promise((resolve, reject) => {
 		// Request main process to allow access to screen sharing
-		ipcRenderer.once('select-source', (event, source) => {
+		ipcRenderer.once('select-source', (_event, source) => {
 			startStreaming({ source, resolve, reject });
 		});
 		ipcRenderer.send('select-source');
@@ -55,7 +55,7 @@ function startStreaming(properties) {
 		}).then(stream => {
 			properties.resolve(stream);
 		}).catch(e => {
-			console.log(e.message);
+			console.error(e.message);
 			properties.reject(e.message);
 		});
 	} else {

app/browser/tools/disableAutogain.js

@@ -29,7 +29,7 @@ let disableAutogain = function () {
 		constraint[name] = value;
 	}
 	function disableAutogain(constraints) {
-		console.log('Automatically unsetting gain!', constraints);
+		console.debug('Automatically unsetting gain!', constraints);
 		if (constraints?.audio) {
 			if (typeof constraints.audio !== 'object') {
 				constraints.audio = {};
@@ -70,7 +70,7 @@ let disableAutogain = function () {
 			return original.call(this, constraints);
 		};
 	});
-	console.log(
+	console.debug(
 		'Disable Autogain by Joey Watts!',
 		navigator.mediaDevices.getUserMedia
 	);

app/browser/tools/mutationTitle.js

@@ -2,27 +2,25 @@ class MutationObserverTitle {
 
 	init(config) {
 		if (config.useMutationTitleLogic) {
-			console.log('MutationObserverTitle enabled');
+			console.debug('MutationObserverTitle enabled');
 			window.addEventListener('DOMContentLoaded', this._applyMutationToTitleLogic);
 		}
 	}
 
 	_applyMutationToTitleLogic() {
-		console.log('Appliying MutationObserverTitle logic');
+		console.debug('Appliying MutationObserverTitle logic');
 		const observer = new window.MutationObserver(
 			() => {
-				console.log('title changed');
-				console.log(window.document.title);
+				console.debug(`title changed to ${window.document.title}`);
 				const regex = /^\((\d+)\)/;
 				const match = regex.exec(window.document.title);
 				const number = match ? match[1] : 0;
-				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');
+		console.debug('MutationObserverTitle logic applied');
 	}
 }
 

app/browser/tools/reactHandler.js

@@ -19,5 +19,6 @@ class ReactHandler {
         return internalRoot?.current?.updateQueue?.baseState?.element?.props?.coreServices;
     }
 }
+//document.getElementById('app')._reactRootContainer.current.updateQueue.baseState.element.props.coreServices
 
 module.exports = new ReactHandler();

app/browser/tools/theme.js

@@ -8,12 +8,12 @@ class ThemeManager {
 
 		const clientPreferences = ReactHandler.getTeams2ClientPreferences();
 		if (clientPreferences) {
-			console.log('Using react to set the follow system theme');
+			console.debug('Using react to set the follow system theme');
 			ReactHandler.getTeams2ClientPreferences().theme.followOsTheme = config.followSystemTheme;
 		}
 
 		if (config.followSystemTheme) {
-			console.log('followSystemTheme', config.followSystemTheme);
+			console.debug('followSystemTheme', config.followSystemTheme);
 			this.ipcRenderer.on('system-theme-changed', this.applyTheme);   
 		}
 	}
@@ -22,11 +22,11 @@ class ThemeManager {
 		const theme = args[0] ? 'dark' : 'default';
 		const clientPreferences = ReactHandler.getTeams2ClientPreferences();
 		if (clientPreferences) {
-			console.log('Using react to set the theme');
+			console.debug('Using react to set the theme');
 			clientPreferences.theme.userTheme = theme;
-			console.log('Theme changed to', theme);    
+			console.debug('Theme changed to', theme);    
 		} else {
-			console.log('Using angular to set the theme');
+			console.debug('Using angular to set the theme');
 			const inst = await instance.whenReady().catch(() => {
 				console.error('Failed to apply Theme');
 			});

app/browser/tools/trayIconRenderer.js

@@ -13,7 +13,7 @@ class TrayIconRenderer {
 	updateActivityCount(event) {
 		const count = event.detail.number;
 		this.render(count).then(icon => {
-			console.log('sending tray-update');
+			console.debug('sending tray-update');
 			this.ipcRenderer.send('tray-update', {
 				icon: icon,
 				flash: (count > 0 && !this.config.disableNotificationWindowFlash)

app/browser/tools/wakeLock.js

@@ -8,13 +8,13 @@ class WakeLock {
 		try {
 			let lock = await navigator.wakeLock.request('screen');
 			lock.addEventListener('release', () => {
-				console.log('Wake Lock was released');
+				console.debug('Wake Lock was released');
 			});
-			console.log('Wake Lock is active');
+			console.debug('Wake Lock is active');
 			_WakeLock_lock.set(this, lock);
 
 		} catch (err) {
-			console.error(`${err.name}, ${err.message}`);
+			console.error(`wakelog enable error ${err.name}, ${err.message}`);
 		}
 	}
 
@@ -28,7 +28,7 @@ class WakeLock {
 			lock = null;
 			_WakeLock_lock.set(this, lock);
 		} catch (err) {
-			console.error(`${err.name}, ${err.message}`);
+			console.error(`wakelog disable error ${err.name}, ${err.message}`);
 		}
 	}
 }

app/browser/tools/zoom.js

@@ -1,8 +1,4 @@
 const { webFrame, ipcRenderer } = require('electron');
-const { LucidLog } = require('lucid-log');
-const logger = new LucidLog({
-	levels: ['debug']
-});
 
 //zoomFactor can be configurable
 const zoomFactor = 0.25;
@@ -64,7 +60,7 @@ function restoreZoomLevelInternal(config) {
 function setNextZoomLevel(keyName, config) {
 	const zoomOffset = zoomOffsets[keyName];
 	let zoomLevel = webFrame.getZoomLevel();
-	logger.debug(`Current zoom level: ${zoomLevel}`);
+	console.debug(`Current zoom level: ${zoomLevel}`);
 	if (typeof (zoomOffset) !== 'number') {
 		return;
 	}

app/certificate/index.js

@@ -1,18 +1,18 @@
 
-exports.onAppCertificateError = function onAppCertificateError(arg, logger) {
+exports.onAppCertificateError = function onAppCertificateError(arg) {
 	if (arg.error === 'net::ERR_CERT_AUTHORITY_INVALID') {
 		let unknownIssuerCert = getCertIssuer(arg.certificate);
 		if (arg.config.customCACertsFingerprints.indexOf(unknownIssuerCert.fingerprint) !== -1) {
 			arg.event.preventDefault();
 			arg.callback(true);
 		} else {
-			logger.error('Unknown cert issuer for url: ' + arg.url);
-			logger.error('Issuer Name: ' + unknownIssuerCert.issuerName);
-			logger.error('The unknown certificate fingerprint is: ' + unknownIssuerCert.fingerprint);
+			console.error('Unknown cert issuer for url: ' + arg.url);
+			console.error('Issuer Name: ' + unknownIssuerCert.issuerName);
+			console.error('The unknown certificate fingerprint is: ' + unknownIssuerCert.fingerprint);
 			arg.callback(false);
 		}
 	} else {
-		logger.error('An unexpected SSL error has occurred: ' + arg.error);
+		console.error('An unexpected SSL error has occurred: ' + arg.error);
 		arg.callback(false);
 	}
 };

app/config/README.md

@@ -1,6 +1,10 @@
 # Config
 
-This folder contains the configuration options available for the app.
+This folder contains the configuration options available for the app. You can see this options by running the app with the `--help` flag.
+
+```bash
+teams-for-linux --help
+```
 
 ## Available starting arguments
 
@@ -20,7 +24,7 @@ Here is the list of available arguments and its usage:
 | authServerWhitelist             | Set auth-server-whitelist value (string)                                                           | *                |
 | awayOnSystemIdle                | Boolean to set the user status as away when system goes idle                                        | false               |
 | chromeUserAgent                 | Google Chrome User Agent                                                                 | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${process.versions.chrome} Safari/537.36                |
-| contextIsolation 	   | Use context isolation in the renderer process (disabling this will break functionality) | false               |
+| contextIsolation 	   | Use context isolation in the renderer process (disabling this will break some functionality) | false               |
 | customBGServiceBaseUrl          | Base URL of the server which provides custom background images                            | http://localhost                |
 | customBGServiceIgnoreMSDefaults | A boolean flag indicates whether to ignore Microsoft provided images or not                       | false               |
 | customBGServiceConfigFetchInterval | A numeric value in seconds as poll interval to download background service config download | 0                |
@@ -47,6 +51,7 @@ Here is the list of available arguments and its usage:
 | incomingCallCommand             | Command to execute on an incoming call.  (string)                                                 |                       |
 | incomingCallCommandArgs         | Arguments for the incomming call command.                                                 |       []                |
 | isCustomBackgroundEnabled	   | A boolean flag to enable/disable custom background images                       | false              |
+| logConfig                       | A string value to set the log manager to use (`Falsy`, `console`, or a valid electron-log configuration)                | *console*                 |
 | meetupJoinRegEx |  Meetup-join and channel regular expession | /^https:\/\/teams\.(microsoft|live)\.com\/.*(?:meetup-join|channel)/g |
 | menubar                         | A value controls the menu bar behaviour                                                   | *auto*, visible, hidden               |
 | minimized                       | Boolean to start the application minimized                                                          | false               |
@@ -111,11 +116,12 @@ Example:
 
 As you can see from the above example, switches with values must be of array where the first entry will be the switch and the second one will be the value. It can be a simple string otherwise.
 
-
 ## Custom backgrounds
 
 We added a feature to load custom background images during a video call. This is available from version `1.0.84`.
 
+You can find an example of this feature in the [../customBackground/example/README.md](../customBackground/example/README.md) file.
+
 ### Things to remember:
 
 1. Currently app does not feature adding or removing custom images. You have to rely on any locally/remotely hosted web servers to serve images.
@@ -168,10 +174,77 @@ For apache2, `/etc/apache2/apache2.conf` may need to have an entry like this.
 As you can see from the above example, it's a JSON array so you can configure any number of images of your choice.
 
 ### About the entries
+
 - `filetype`: Type of image (Ex: jpg)
 - `id`: Id of the image. Give a unique name without spaces.
 - `name`: Name of your image.
 - `src`: Path to the image to be loaded when selected from the preview. Provide a picture with resolution 1920x1080 (Based on Microsoft CDN) though any resolution would work. This is to avoid unnecessary traffic by loading large size images.
 - `thumb_src`: Path to the image to be shown on the preview screen. Provide a low resolution picture (280x158 based on Microsoft CDN) as it's shown on the preview page. The smaller the image the quicker the preview will be.
 
 Image paths are relative to `customBGServiceBaseUrl`. If your customBGServiceBaseUrl is `https://example.com` and your image is at `https://example.com/images/sample.jpg`, then `src` would be `/images/sample.jpg` and in Teams V2 `src` would be `/evergreen-assets/backgroundimages/images/sample.jpg`.
+
+## LogConfig option.
+
+IMPORTANT: This option deprecates `appLogLevels`, that would be removed in the next major version.
+
+In version 1.9.0 we added the ability to log to the console (default), or use electron-log as your log manager or to not log at all.
+
+This is managed by the `logConfig` option, that has the following options:
+
+| Option                          | Usage                                                                                      |
+|---------------------------------|--------------------------------------------------------------------------------------------|
+| Falsy                           | Any [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value as described  would result in no logs recorded |
+| console  (default)              | Log to the console using the `console` object                                              |
+| object  (*)                     | A valid [electron-log](https://www.npmjs.com/package/electron-log) configuration object.  |
+
+(*) The object must be a valid `electron-log` configuration object. You can see the available options in the [electron-log documentation](https://www.npmjs.com/package/electron-log).
+
+### Examples of `electron-log` config options
+
+You have some simple options to use the `electron-log` as your log manager. Like:
+
+* Use the default `electron-log` values:
+```json
+{ "logConfig": "{}" }
+```
+
+* Making console level as `debug` and disabling the log to file
+```json
+{
+	"logConfig": {
+		"transports": {
+			"console": {
+				"level": "debug"
+			},
+			"file": {
+				"level": false
+			}
+		}
+	}
+}
+```
+
+or more complex
+
+* Changing the console log format and rotating the file logs:
+```json
+{
+	"logConfig": {
+		"transports": {
+			"file": {
+				"maxSize": 100000,
+				"format": "{processType} [{h}:{i}:{s}.{ms}] {text}",
+				"level": "debug"
+			},
+			"console": {
+				"format": "[{h}:{i}:{s}.{ms}] {text}",
+				"level": "info"
+			}
+		}
+	}
+}
+```
+
+### Limitations
+
+I haven't explore all the options available in the `electron-log` configuration, so I can't guarantee all the options would work. (specially those options that require a function to be passed)