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

Refactor Game Bar

Browse Source
This commit is contained in:
redphx 2024-10-14 16:45:57 +07:00
parent 34159fad22
commit 1acb30e3af
9 changed files with 29 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import { BxEvent } from "@/utils/bx-event";
export abstract class BaseGameBarAction {
abstract $content: HTMLElement;
constructor() {}
reset() {}
@ -8,5 +10,7 @@ export abstract class BaseGameBarAction {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
};
abstract render(): HTMLElement;
render(): HTMLElement {
return this.$content;
};
}

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

@ -8,8 +8,6 @@ import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-micro
export class MicrophoneAction extends BaseGameBarAction {
$content: HTMLElement;
visible: boolean = false;
constructor() {
super();
@ -26,12 +24,7 @@ export class MicrophoneAction extends BaseGameBarAction {
onClick: this.onClick.bind(this),
});
this.$content = CE('div', {},
$btnMuted,
$btnDefault,
);
this.reset();
this.$content = CE('div', {}, $btnMuted, $btnDefault);
window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
const microphoneState = (e as any).microphoneState;
@ -49,12 +42,7 @@ export class MicrophoneAction extends BaseGameBarAction {
this.$content.dataset.activated = enabled.toString();
}
render(): HTMLElement {
return this.$content;
}
reset(): void {
this.visible = false;
this.$content.classList.add('bx-gone');
this.$content.dataset.activated = 'false';
}

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

@ -23,12 +23,7 @@ export class RendererAction extends BaseGameBarAction {
classes: ['bx-activated'],
});
this.$content = CE('div', {},
$btnDefault,
$btnActivated,
);
this.reset();
this.$content = CE('div', {}, $btnDefault, $btnActivated);
}
onClick(e: Event) {
@ -37,10 +32,6 @@ export class RendererAction extends BaseGameBarAction {
this.$content.dataset.activated = (!isVisible).toString();
}
render(): HTMLElement {
return this.$content;
}
reset(): void {
this.$content.dataset.activated = 'false';
}

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

@ -22,8 +22,4 @@ export class ScreenshotAction extends BaseGameBarAction {
super.onClick(e);
Screenshot.takeScreenshot();
}
render(): HTMLElement {
return this.$content;
}
}

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

@ -24,12 +24,7 @@ export class SpeakerAction extends BaseGameBarAction {
classes: ['bx-activated'],
});
this.$content = CE('div', {},
$btnEnable,
$btnMuted,
);
this.reset();
this.$content = CE('div', {}, $btnEnable, $btnMuted);
window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, e => {
const speakerState = (e as any).speakerState;
@ -44,10 +39,6 @@ export class SpeakerAction extends BaseGameBarAction {
SoundShortcut.muteUnmute();
}
render(): HTMLElement {
return this.$content;
}
reset(): void {
this.$content.dataset.activated = 'false';
}

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

@ -25,12 +25,7 @@ export class TouchControlAction extends BaseGameBarAction {
classes: ['bx-activated'],
});
this.$content = CE('div', {},
$btnEnable,
$btnDisable,
);
this.reset();
this.$content = CE('div', {}, $btnEnable, $btnDisable);
}
onClick(e: Event) {
@ -39,10 +34,6 @@ export class TouchControlAction extends BaseGameBarAction {
this.$content.dataset.activated = (!isVisible).toString();
}
render(): HTMLElement {
return this.$content;
}
reset(): void {
this.$content.dataset.activated = 'false';
}

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

@ -1,6 +1,5 @@
import { BxIcon } from "@/utils/bx-icon";
import { createButton, ButtonStyle } from "@/utils/html";
import { t } from "@/utils/translation";
import { BaseGameBarAction } from "./action-base";
import { TrueAchievements } from "@/utils/true-achievements";
@ -13,7 +12,6 @@ export class TrueAchievementsAction extends BaseGameBarAction {
this.$content = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.TRUE_ACHIEVEMENTS,
title: t('true-achievements'),
onClick: this.onClick.bind(this),
});
}
@ -22,8 +20,4 @@ export class TrueAchievementsAction extends BaseGameBarAction {
super.onClick(e);
TrueAchievements.open(false);
}
render(): HTMLElement {
return this.$content;
}
}

49
src/modules/game-bar/game-bar.ts
View File

@ -7,7 +7,7 @@ import type { BaseGameBarAction } from "./action-base";
import { STATES } from "@utils/global";
import { MicrophoneAction } from "./action-microphone";
import { PrefKey } from "@/enums/pref-keys";
import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
import { getPref, StreamTouchController, type GameBarPosition } from "@/utils/settings-storages/global-settings-storage";
import { TrueAchievementsAction } from "./action-true-achievements";
import { SpeakerAction } from "./action-speaker";
import { RendererAction } from "./action-renderer";
@ -15,13 +15,7 @@ import { RendererAction } from "./action-renderer";
export class GameBar {
private static instance: GameBar;
public static getInstance(): GameBar {
if (!GameBar.instance) {
GameBar.instance = new GameBar();
}
return GameBar.instance;
}
public static getInstance = () => GameBar.instance ?? (GameBar.instance = new GameBar());
private static readonly VISIBLE_DURATION = 2000;
@ -35,12 +29,12 @@ export class GameBar {
private constructor() {
let $container;
const position = getPref(PrefKey.GAME_BAR_POSITION);
const position = getPref(PrefKey.GAME_BAR_POSITION) as GameBarPosition;
const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone', 'data-position': position},
$container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
);
$container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
);
this.actions = [
new ScreenshotAction(),
@ -78,11 +72,7 @@ export class GameBar {
// Add animation when hiding game bar
$container.addEventListener('transitionend', e => {
const classList = $container.classList;
if (classList.contains('bx-hide')) {
classList.remove('bx-hide');
classList.add('bx-offscreen');
}
$container.classList.replace('bx-hide', 'bx-offscreen');
});
document.documentElement.appendChild($gameBar);
@ -106,9 +96,9 @@ export class GameBar {
this.clearHideTimeout();
this.timeoutId = window.setTimeout(() => {
this.timeoutId = null;
this.hideBar();
}, GameBar.VISIBLE_DURATION);
this.timeoutId = null;
this.hideBar();
}, GameBar.VISIBLE_DURATION);
}
private clearHideTimeout() {
@ -117,19 +107,15 @@ export class GameBar {
}
enable() {
this.$gameBar && this.$gameBar.classList.remove('bx-gone');
this.$gameBar.classList.remove('bx-gone');
}
disable() {
this.hideBar();
this.$gameBar && this.$gameBar.classList.add('bx-gone');
this.$gameBar.classList.add('bx-gone');
}
showBar() {
if (!this.$container) {
return;
}
this.$container.classList.remove('bx-offscreen', 'bx-hide' , 'bx-gone');
this.$container.classList.add('bx-show');
@ -142,18 +128,11 @@ export class GameBar {
// Stop focusing Game Bar
clearFocus();
if (!this.$container) {
return;
}
this.$container.classList.remove('bx-show');
this.$container.classList.add('bx-hide');
this.$container.classList.replace('bx-show', 'bx-hide');
}
// Reset all states
reset() {
for (const action of this.actions) {
action.reset();
}
this.actions.forEach(action => action.reset());
}
}

8
src/utils/settings-storages/global-settings-storage.ts
View File

@ -39,6 +39,10 @@ export const enum ControllerDeviceVibration {
}
export type GameBarPosition = 'bottom-left' | 'bottom-right' | 'off';
export type GameBarPositionOptions = Record<GameBarPosition, string>;
function getSupportedCodecProfiles() {
const options: PartialRecord<CodecProfile, string> = {
default: t('default'),
@ -323,12 +327,12 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
[PrefKey.GAME_BAR_POSITION]: {
requiredVariants: 'full',
label: t('position'),
default: 'bottom-left',
default: 'bottom-left' satisfies GameBarPosition,
options: {
'bottom-left': t('bottom-left'),
'bottom-right': t('bottom-right'),
'off': t('off'),
},
} satisfies GameBarPositionOptions,
},
[PrefKey.LOCAL_CO_OP_ENABLED]: {