Create BxLogger to show colored logs

src/index.ts

@@ -26,6 +26,7 @@ import { PreloadedState } from "./utils/titles-info";
 import { patchAudioContext, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "./utils/monkey-patches";
 import { STATES } from "./utils/global";
 import { injectStreamMenuButtons } from "./modules/stream/stream-ui";
+import { BxLogger } from "./utils/bx-logger";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -40,7 +41,7 @@ if (window.location.pathname.includes('/auth/msa')) {
     throw new Error('[Better xCloud] Refreshing the page after logging in');
 }
 
-console.log(`[Better xCloud] readyState: ${document.readyState}`);
+BxLogger.info('readyState', document.readyState);
 
 if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     // Stop loading

src/modules/mkb/mkb-handler.ts

@@ -11,6 +11,9 @@ import type { MkbStoredPreset } from "../../types/mkb";
 import { showStreamSettings } from "../stream/stream-ui";
 import { STATES } from "../../utils/global";
 import { UserAgent } from "../../utils/user-agent";
+import { BxLogger } from "../../utils/bx-logger";
+
+const LOG_TAG = 'MkbHandler';
 
 /*
 This class uses some code from Yuzu emulator to handle mouse's movements
@@ -472,7 +475,7 @@ export class MkbHandler {
         getPref(PrefKey.MKB_ENABLED) && !UserAgent.isMobile() && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
             // Enable MKB
             if (!STATES.currentStream.titleInfo?.details.hasMkbSupport) {
-                console.log('Emulate MKB');
+                BxLogger.info(LOG_TAG, 'Emulate MKB');
                 MkbHandler.INSTANCE.init();
             }
         });

src/modules/patcher.ts

@@ -2,6 +2,9 @@ import { STATES } from "../utils/global";
 import { BX_FLAGS } from "../utils/bx-flags";
 import { getPref, PrefKey } from "../utils/preferences";
 import { VibrationManager } from "./vibration-manager";
+import { BxLogger } from "../utils/bx-logger";
+
+const LOG_TAG = 'Patcher';
 
 const PATCHES = {
     // Disable ApplicationInsights.track() function
@@ -243,7 +246,7 @@ if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
             return false;
         }
 
-        console.log('[Better xCloud] Remaining patches:', PATCH_ORDERS);
+        BxLogger.info(LOG_TAG, 'Remaining patches:', PATCH_ORDERS);
         PATCH_ORDERS = PATCH_ORDERS.concat(PLAYING_PATCH_ORDERS);
         Patcher.cleanupPatches();
 
@@ -293,9 +296,9 @@ if (match) {
     const gamepadIndexVar = match[0];
     onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', \`this.gamepadStates.get(\${gamepadIndexVar},\`);
     eval(\`this.onGamepadInput = function \${onGamepadInputStr}\`);
-    console.log('[Better xCloud] ✅ Successfully patched local co-op support');
+    BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
 } else {
-    console.log('[Better xCloud] ❌ Unable to patch local co-op support');
+    BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
 }
 `;
 
@@ -389,7 +392,7 @@ window.BX_EXPOSED.onPollingModeChanged && window.BX_EXPOSED.onPollingModeChanged
 
         const newCode = `
 ${titleInfoVar} = window.BX_EXPOSED.modifyTitleInfo(${titleInfoVar});
-console.log(${titleInfoVar});
+BxLogger.info('patchXcloudTitleInfo', ${titleInfoVar});
 `;
         str = str.substring(0, backetIndex + 1) + newCode + str.substring(backetIndex + 1);
         return str;
@@ -415,7 +418,7 @@ Object.assign(${configsVar}.inputConfiguration, {
     enableKeyboardInput: false,
     enableAbsoluteMouse: false,
 });
-console.log(${configsVar});
+BxLogger.info('patchRemotePlayMkb', ${configsVar});
 `;
 
         str = str.substring(0, backetIndex + 1) + newCode + str.substring(backetIndex + 1);
@@ -508,7 +511,7 @@ export class Patcher {
             }
 
             if (typeof arguments[1] === 'function') {
-                console.log('[Better xCloud] Restored Function.prototype.bind()');
+                BxLogger.info(LOG_TAG, 'Restored Function.prototype.bind()');
                 Function.prototype.bind = nativeBind;
             }
 
@@ -566,7 +569,7 @@ export class Patcher {
                     modified = true;
                     str = patchedstr;
 
-                    console.log(`[Better xCloud] Applied "${patchName}" patch`);
+                    BxLogger.info(LOG_TAG, `Applied "${patchName}" patch`);
                     appliedPatches.push(patchName);
 
                     // Remove patch from group

src/modules/remote-play.ts

@@ -5,6 +5,9 @@ import { BxEvent } from "../utils/bx-event";
 import { getPref, PrefKey, setPref } from "../utils/preferences";
 import { t } from "../utils/translation";
 import { localRedirect } from "./ui/ui";
+import { BxLogger } from "../utils/bx-logger";
+
+const LOG_TAG = 'RemotePlay';
 
 enum RemotePlayConsoleState {
     ON = 'On',
@@ -92,7 +95,7 @@ export class RemotePlay {
         RemotePlay.#$content = CE('div', {}, t('getting-consoles-list'));
         RemotePlay.#getXhomeToken(() => {
             RemotePlay.#getConsolesList(() => {
-                console.log(RemotePlay.#CONSOLES);
+                BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES);
                 RemotePlay.#renderConsoles();
                 BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
             });

src/modules/stream/stream-stats.ts

@@ -5,6 +5,7 @@ import { StreamBadges } from "./stream-badges"
 import { CE } from "../../utils/html"
 import { t } from "../../utils/translation"
 import { STATES } from "../../utils/global"
+import { BxLogger } from "../../utils/bx-logger"
 
 export enum StreamStat {
     PING = 'ping',
@@ -274,7 +275,7 @@ export class StreamStats {
 
             // Get server type
             if (candidateId) {
-                console.log('candidate', candidateId, allCandidates);
+                BxLogger.info('candidate', candidateId, allCandidates);
                 StreamBadges.ipv6 = allCandidates[candidateId].includes(':');
             }
 

src/modules/touch-controller.ts

@@ -6,6 +6,9 @@ import { BX_FLAGS } from "../utils/bx-flags";
 import { getPref, PrefKey } from "../utils/preferences";
 import { t } from "../utils/translation";
 import { NATIVE_FETCH } from "../utils/network";
+import { BxLogger } from "../utils/bx-logger";
+
+const LOG_TAG = 'TouchController';
 
 export class TouchController {
     static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
@@ -296,7 +299,7 @@ export class TouchController {
                         STATES.currentStream.xboxTitleId = parseInt(json.titleid, 16).toString();
                     }
                 } catch (e) {
-                    console.log(e);
+                    BxLogger.error(LOG_TAG, 'Load custom layout', e);
                 }
             });
         });

src/utils/bx-logger.ts

@@ -0,0 +1,27 @@
+enum TextColor {
+    INFO = '#008746',
+    WARNING = '#c1a404',
+    ERROR = '#c10404',
+}
+
+export class BxLogger {
+    static #PREFIX = '[BxC]';
+
+    static info(tag: string, ...args: any[]) {
+        BxLogger.#log(TextColor.INFO, tag, ...args);
+    }
+
+    static warning(tag: string, ...args: any[]) {
+        BxLogger.#log(TextColor.WARNING, tag, ...args);
+    }
+
+    static error(tag: string, ...args: any[]) {
+        BxLogger.#log(TextColor.ERROR, tag, ...args);
+    }
+
+    static #log(color: TextColor, tag: string, ...args: any) {
+        console.log('%c' + BxLogger.#PREFIX, 'color:' + color + ';font-weight:bold;', tag, '-', ...args);
+    }
+}
+
+(window as any).BxLogger = BxLogger;

src/utils/gamepad.ts

@@ -2,6 +2,7 @@ import { MkbHandler } from "../modules/mkb/mkb-handler";
 import { PrefKey, getPref } from "./preferences";
 import { t } from "./translation";
 import { Toast } from "./toast";
+import { BxLogger } from "./bx-logger";
 
 // Show a toast when connecting/disconecting controller
 export function showGamepadToast(gamepad: Gamepad) {
@@ -10,7 +11,7 @@ export function showGamepadToast(gamepad: Gamepad) {
         return;
     }
 
-    console.log(gamepad);
+    BxLogger.info('Gamepad', gamepad);
     let text = '🎮';
 
     if (getPref(PrefKey.LOCAL_CO_OP_ENABLED)) {

src/utils/monkey-patches.ts

@@ -2,6 +2,7 @@ import { BxEvent } from "./bx-event";
 import { getPref, PrefKey } from "./preferences";
 import { STATES } from "./global";
 import { UserAgent } from "./user-agent";
+import { BxLogger } from "./bx-logger";
 
 export function patchVideoApi() {
     const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO);
@@ -77,7 +78,7 @@ export function patchRtcCodecs() {
             nativeSetCodecPreferences.apply(this, [newCodecs]);
         } catch (e) {
             // Didn't work -> use default codecs
-            console.log(e);
+            BxLogger.error('setCodecPreferences', e);
             nativeSetCodecPreferences.apply(this, [codecs]);
         }
     }
@@ -106,7 +107,8 @@ export function patchRtcPeerConnection() {
                 if (conn.connectionState === 'connecting') {
                     STATES.currentStream.audioGainNode = null;
                 }
-                console.log('connectionState', conn.connectionState);
+
+                BxLogger.info('connectionstatechange', conn.connectionState);
             });
         return conn;
     }