marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-04 22:57:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Game Bar actions

Browse Source
This commit is contained in:
redphx 2024-10-13 19:15:29 +07:00
parent f2bc98229f
commit 6d2e04aff1
8 changed files with 90 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
dist/better-xcloud.user.js vendored
View File

@ -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) => {
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({
const $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) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const enabled = MicrophoneShortcut.toggle(!1);
this.$content.dataset.activated = enabled.toString();
}, $btnDefault = createButton({
const $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) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED), SoundShortcut.muteUnmute();
}, $btnEnable = createButton({
const $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) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const isVisible = RendererShortcut.toggleVisibility();
this.$content.dataset.activated = (!isVisible).toString();
}, $btnDefault = createButton({
const $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;
}

6
src/modules/game-bar/action-base.ts
View File

@ -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;
}

17
src/modules/game-bar/action-microphone.ts
View File

@ -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;
}

17
src/modules/game-bar/action-renderer.ts
View File

@ -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;
}

13
src/modules/game-bar/action-screenshot.ts
View File

@ -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;
}

14
src/modules/game-bar/action-speaker.ts
View File

@ -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;
}

19
src/modules/game-bar/action-touch-control.ts
View File

@ -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;
}

13
src/modules/game-bar/action-true-achievements.ts
View File

@ -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;
}