mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-04 22:57:19 +02:00
Refactor Game Bar actions
This commit is contained in:
parent
f2bc98229f
commit
6d2e04aff1
75
dist/better-xcloud.user.js
vendored
75
dist/better-xcloud.user.js
vendored
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user