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

Refactor buttons in guide-menu

Browse Source
This commit is contained in:
redphx 2024-07-02 18:06:33 +07:00
parent d31a06be89
commit dee8c9dbd0
2 changed files with 76 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/stream/stream-settings.ts
View File

@ -255,6 +255,8 @@ export class StreamSettings {
$container.classList.remove('bx-gone'); $container.classList.remove('bx-gone');
document.body.classList.add('bx-no-scroll'); document.body.classList.add('bx-no-scroll');
BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_SHOWN);
} }
hide() { hide() {
@ -262,6 +264,8 @@ export class StreamSettings {
this.$container!.classList.add('bx-gone'); this.$container!.classList.add('bx-gone');
document.body.classList.remove('bx-no-scroll'); document.body.classList.remove('bx-no-scroll');
BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_DISMISSED);
} }
#setupDialog() { #setupDialog() {

125
src/modules/ui/guide-menu.ts
View File

@ -9,6 +9,67 @@ export enum GuideMenuTab {
} }
export class GuideMenu { export class GuideMenu {
static #BUTTONS = {
streamSetting: createButton({
label: t('stream-settings'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
// Wait until the Guide dialog is closed
window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
setTimeout(() => StreamSettings.getInstance().show(), 50);
}, {once: true});
// Close all xCloud's dialogs
window.BX_EXPOSED.dialogRoutes.closeAll();
},
}),
appSettings: createButton({
label: t('android-app-settings'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
// Close all xCloud's dialogs
window.BX_EXPOSED.dialogRoutes.closeAll();
AppInterface.openAppSettings && AppInterface.openAppSettings();
},
}),
closeApp: createButton({
label: t('close-app'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
onClick: e => {
AppInterface.closeApp();
},
}),
reloadStream: createButton({
label: t('reload-stream'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('confirm-reload-stream')) && window.location.reload();
},
}),
backToHome: createButton({
label: t('back-to-home'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
},
}),
}
static #renderButtons(buttons: HTMLElement[]) {
const $div = CE('div', {});
for (const $button of buttons) {
$div.appendChild($button);
}
return $div;
}
static #injectHome($root: HTMLElement) { static #injectHome($root: HTMLElement) {
// Find the last divider // Find the last divider
const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]'); const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]');
@ -16,51 +77,21 @@ export class GuideMenu {
return; return;
} }
const buttons = []; const buttons: HTMLElement[] = [];
// "Stream settings" button // "Stream settings" button
buttons.push(createButton({ buttons.push(GuideMenu.#BUTTONS.streamSetting);
label: t('stream-settings'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
// Close all xCloud's dialogs
window.BX_EXPOSED.dialogRoutes.closeAll();
StreamSettings.getInstance().show();
},
}));
// "App settings" & "Close app" buttons // "App settings" & "Close app" buttons
if (AppInterface) { if (AppInterface) {
buttons.push(createButton({ buttons.push(GuideMenu.#BUTTONS.appSettings);
label: t('android-app-settings'), buttons.push(GuideMenu.#BUTTONS.closeApp);
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
AppInterface.openAppSettings && AppInterface.openAppSettings();
},
}));
buttons.push(createButton({
label: t('close-app'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
onClick: e => {
AppInterface.closeApp();
},
}));
} }
if (!buttons.length) { const $buttons = GuideMenu.#renderButtons(buttons);
return;
}
const $div = CE('div', {});
for (const $button of buttons) {
$div.appendChild($button);
}
const $lastDivider = $dividers[$dividers.length - 1]; const $lastDivider = $dividers[$dividers.length - 1];
$lastDivider.insertAdjacentElement('afterend', $div); $lastDivider.insertAdjacentElement('afterend', $buttons);
} }
static #injectHomePlaying($root: HTMLElement) { static #injectHomePlaying($root: HTMLElement) {
@ -69,25 +100,13 @@ export class GuideMenu {
return; return;
} }
// Add buttons const buttons: HTMLElement[] = [];
const $btnReload = createButton({
label: t('reload-stream'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('confirm-reload-stream')) && window.location.reload();
},
});
const $btnHome = createButton({ buttons.push(GuideMenu.#BUTTONS.streamSetting);
label: t('back-to-home'), AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
},
});
$btnQuit.insertAdjacentElement('afterend', $btnReload); const $buttons = GuideMenu.#renderButtons(buttons);
$btnReload.insertAdjacentElement('afterend', $btnHome); $btnQuit.insertAdjacentElement('afterend', $buttons);
// Hide xCloud's Home button // Hide xCloud's Home button
const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement; const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;