Refactor Game Bar actions

dist/better-xcloud.user.js

@@ -7340,21 +7340,24 @@ function patchPointerLockApi() {
 class BaseGameBarAction {
   constructor() {}
   reset() {}
+  onClick(e) {
+    BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+  }
 }
 class ScreenshotAction extends BaseGameBarAction {
   $content;
   constructor() {
     super();
-    const onClick = (e) => {
-      BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED), Screenshot.takeScreenshot();
-    };
     this.$content = createButton({
       style: 4,
       icon: BxIcon.SCREENSHOT,
       title: t("take-screenshot"),
-      onClick
+      onClick: this.onClick.bind(this)
     });
   }
+  onClick(e) {
+    super.onClick(e), Screenshot.takeScreenshot();
+  }
   render() {
     return this.$content;
   }
@@ -7363,24 +7366,25 @@ class TouchControlAction extends BaseGameBarAction {
   $content;
   constructor() {
     super();
-    const onClick = (e) => {
+    const $btnEnable = createButton({
-      BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-      const $parent = e.target.closest("div[data-activated]"), isVisible = TouchController.toggleVisibility();
-      $parent.dataset.activated = (!isVisible).toString();
-    }, $btnEnable = createButton({
       style: 4,
       icon: BxIcon.TOUCH_CONTROL_ENABLE,
       title: t("show-touch-controller"),
-      onClick
+      onClick: this.onClick.bind(this)
     }), $btnDisable = createButton({
       style: 4,
       icon: BxIcon.TOUCH_CONTROL_DISABLE,
       title: t("hide-touch-controller"),
-      onClick,
+      onClick: this.onClick.bind(this),
       classes: ["bx-activated"]
     });
     this.$content = CE("div", {}, $btnEnable, $btnDisable), this.reset();
   }
+  onClick(e) {
+    super.onClick(e);
+    const isVisible = TouchController.toggleVisibility();
+    this.$content.dataset.activated = (!isVisible).toString();
+  }
   render() {
     return this.$content;
   }
@@ -7393,25 +7397,26 @@ class MicrophoneAction extends BaseGameBarAction {
   visible = !1;
   constructor() {
     super();
-    const onClick = (e) => {
+    const $btnDefault = createButton({
-      BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-      const enabled = MicrophoneShortcut.toggle(!1);
-      this.$content.dataset.activated = enabled.toString();
-    }, $btnDefault = createButton({
       style: 4,
       icon: BxIcon.MICROPHONE,
-      onClick,
+      onClick: this.onClick.bind(this),
       classes: ["bx-activated"]
     }), $btnMuted = createButton({
       style: 4,
       icon: BxIcon.MICROPHONE_MUTED,
-      onClick
+      onClick: this.onClick.bind(this)
     });
     this.$content = CE("div", {}, $btnMuted, $btnDefault), this.reset(), window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, (e) => {
       const enabled = e.microphoneState === "Enabled";
       this.$content.dataset.activated = enabled.toString(), this.$content.classList.remove("bx-gone");
     });
   }
+  onClick(e) {
+    super.onClick(e);
+    const enabled = MicrophoneShortcut.toggle(!1);
+    this.$content.dataset.activated = enabled.toString();
+  }
   render() {
     return this.$content;
   }
@@ -7423,16 +7428,16 @@ class TrueAchievementsAction extends BaseGameBarAction {
   $content;
   constructor() {
     super();
-    const onClick = (e) => {
-      BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED), TrueAchievements.open(!1);
-    };
     this.$content = createButton({
       style: 4,
       icon: BxIcon.TRUE_ACHIEVEMENTS,
       title: t("true-achievements"),
-      onClick
+      onClick: this.onClick.bind(this)
     });
   }
+  onClick(e) {
+    super.onClick(e), TrueAchievements.open(!1);
+  }
   render() {
     return this.$content;
   }
@@ -7441,16 +7446,14 @@ class SpeakerAction extends BaseGameBarAction {
   $content;
   constructor() {
     super();
-    const onClick = (e) => {
+    const $btnEnable = createButton({
-      BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED), SoundShortcut.muteUnmute();
-    }, $btnEnable = createButton({
       style: 4,
       icon: BxIcon.AUDIO,
-      onClick
+      onClick: this.onClick.bind(this)
     }), $btnMuted = createButton({
       style: 4,
       icon: BxIcon.SPEAKER_MUTED,
-      onClick,
+      onClick: this.onClick.bind(this),
       classes: ["bx-activated"]
     });
     this.$content = CE("div", {}, $btnEnable, $btnMuted), this.reset(), window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, (e) => {
@@ -7458,6 +7461,9 @@ class SpeakerAction extends BaseGameBarAction {
       this.$content.dataset.activated = (!enabled).toString();
     });
   }
+  onClick(e) {
+    super.onClick(e), SoundShortcut.muteUnmute();
+  }
   render() {
     return this.$content;
   }
@@ -7476,22 +7482,23 @@ class RendererAction extends BaseGameBarAction {
   $content;
   constructor() {
     super();
-    const onClick = (e) => {
+    const $btnDefault = createButton({
-      BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-      const isVisible = RendererShortcut.toggleVisibility();
-      this.$content.dataset.activated = (!isVisible).toString();
-    }, $btnDefault = createButton({
       style: 4,
       icon: BxIcon.EYE,
-      onClick
+      onClick: this.onClick.bind(this)
     }), $btnActivated = createButton({
       style: 4,
       icon: BxIcon.EYE_SLASH,
-      onClick,
+      onClick: this.onClick.bind(this),
       classes: ["bx-activated"]
     });
     this.$content = CE("div", {}, $btnDefault, $btnActivated), this.reset();
   }
+  onClick(e) {
+    super.onClick(e);
+    const isVisible = RendererShortcut.toggleVisibility();
+    this.$content.dataset.activated = (!isVisible).toString();
+  }
   render() {
     return this.$content;
   }

src/modules/game-bar/action-base.ts

@@ -1,6 +1,12 @@
+import { BxEvent } from "@/utils/bx-event";
+
 export abstract class BaseGameBarAction {
     constructor() {}
     reset() {}
 
+    onClick(e: Event) {
+        BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+    };
+
     abstract render(): HTMLElement;
 }

src/modules/game-bar/action-microphone.ts

@@ -13,24 +13,17 @@ export class MicrophoneAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-
-            const enabled = MicrophoneShortcut.toggle(false);
-            this.$content.dataset.activated = enabled.toString();
-        };
-
         const $btnDefault = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.MICROPHONE,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
             classes: ['bx-activated'],
         });
 
         const $btnMuted = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.MICROPHONE_MUTED,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
 
         this.$content = CE('div', {},
@@ -50,6 +43,12 @@ export class MicrophoneAction extends BaseGameBarAction {
         });
     }
 
+    onClick(e: Event) {
+        super.onClick(e);
+        const enabled = MicrophoneShortcut.toggle(false);
+        this.$content.dataset.activated = enabled.toString();
+    }
+
     render(): HTMLElement {
         return this.$content;
     }

src/modules/game-bar/action-renderer.ts

@@ -1,4 +1,3 @@
-import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BaseGameBarAction } from "./action-base";
@@ -11,22 +10,16 @@ export class RendererAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-            const isVisible = RendererShortcut.toggleVisibility();
-            this.$content.dataset.activated = (!isVisible).toString();
-        };
-
         const $btnDefault = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.EYE,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
 
         const $btnActivated = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.EYE_SLASH,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
             classes: ['bx-activated'],
         });
 
@@ -38,6 +31,12 @@ export class RendererAction extends BaseGameBarAction {
         this.reset();
     }
 
+    onClick(e: Event) {
+        super.onClick(e);
+        const isVisible = RendererShortcut.toggleVisibility();
+        this.$content.dataset.activated = (!isVisible).toString();
+    }
+
     render(): HTMLElement {
         return this.$content;
     }

src/modules/game-bar/action-screenshot.ts

@@ -1,4 +1,3 @@
-import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle } from "@utils/html";
 import { BaseGameBarAction } from "./action-base";
@@ -11,19 +10,19 @@ export class ScreenshotAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-            Screenshot.takeScreenshot();
-        };
-
         this.$content = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.SCREENSHOT,
             title: t('take-screenshot'),
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
     }
 
+    onClick(e: Event): void {
+        super.onClick(e);
+        Screenshot.takeScreenshot();
+    }
+
     render(): HTMLElement {
         return this.$content;
     }

src/modules/game-bar/action-speaker.ts

@@ -11,21 +11,16 @@ export class SpeakerAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-            SoundShortcut.muteUnmute();
-        };
-
         const $btnEnable = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.AUDIO,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
 
         const $btnMuted = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.SPEAKER_MUTED,
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
             classes: ['bx-activated'],
         });
 
@@ -44,6 +39,11 @@ export class SpeakerAction extends BaseGameBarAction {
         });
     }
 
+    onClick(e: Event) {
+        super.onClick(e);
+        SoundShortcut.muteUnmute();
+    }
+
     render(): HTMLElement {
         return this.$content;
     }

src/modules/game-bar/action-touch-control.ts

@@ -1,4 +1,3 @@
-import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { TouchController } from "@modules/touch-controller";
@@ -11,26 +10,18 @@ export class TouchControlAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-
-            const $parent = (e as any).target.closest('div[data-activated]');
-            const isVisible =  TouchController.toggleVisibility();
-            $parent.dataset.activated = (!isVisible).toString();
-        };
-
         const $btnEnable = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.TOUCH_CONTROL_ENABLE,
             title: t('show-touch-controller'),
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
 
         const $btnDisable = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.TOUCH_CONTROL_DISABLE,
             title: t('hide-touch-controller'),
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
             classes: ['bx-activated'],
         });
 
@@ -42,6 +33,12 @@ export class TouchControlAction extends BaseGameBarAction {
         this.reset();
     }
 
+    onClick(e: Event) {
+        super.onClick(e);
+        const isVisible = TouchController.toggleVisibility();
+        this.$content.dataset.activated = (!isVisible).toString();
+    }
+
     render(): HTMLElement {
         return this.$content;
     }

src/modules/game-bar/action-true-achievements.ts

@@ -1,4 +1,3 @@
-import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
 import { createButton, ButtonStyle } from "@/utils/html";
 import { t } from "@/utils/translation";
@@ -11,19 +10,19 @@ export class TrueAchievementsAction extends BaseGameBarAction {
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-            TrueAchievements.open(false);
-        };
-
         this.$content = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.TRUE_ACHIEVEMENTS,
             title: t('true-achievements'),
-            onClick: onClick,
+            onClick: this.onClick.bind(this),
         });
     }
 
+    onClick(e: Event) {
+        super.onClick(e);
+        TrueAchievements.open(false);
+    }
+
     render(): HTMLElement {
         return this.$content;
     }