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

Remote Play dialog: replace radio buttons with select box

Browse Source
This commit is contained in:
redphx 2024-09-24 19:47:55 +07:00
parent 135193813c
commit f704452171
2 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/modules/ui/dialog/remote-play-dialog.ts
View File

@ -1,10 +1,12 @@
import { ButtonStyle, CE, createButton } from "@/utils/html"; import { ButtonStyle, CE, createButton } from "@/utils/html";
import { NavigationDialog } from "./navigation-dialog"; import { NavigationDialog, type NavigationElement } from "./navigation-dialog";
import { PrefKey } from "@/enums/pref-keys"; import { PrefKey } from "@/enums/pref-keys";
import { BxIcon } from "@/utils/bx-icon"; import { BxIcon } from "@/utils/bx-icon";
import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage"; import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
import { t } from "@/utils/translation"; import { t } from "@/utils/translation";
import { RemotePlayConsoleState, RemotePlayManager } from "@/modules/remote-play-manager"; import { RemotePlayConsoleState, RemotePlayManager } from "@/modules/remote-play-manager";
import { BxSelectElement } from "@/web-components/bx-select";
import { BxEvent } from "@/utils/bx-event";
export class RemotePlayNavigationDialog extends NavigationDialog { export class RemotePlayNavigationDialog extends NavigationDialog {
@ -35,48 +37,33 @@ export class RemotePlayNavigationDialog extends NavigationDialog {
const $settingNote = CE('p', {}); const $settingNote = CE('p', {});
const resolutions = [1080, 720];
const currentResolution = getPref(PrefKey.REMOTE_PLAY_RESOLUTION); const currentResolution = getPref(PrefKey.REMOTE_PLAY_RESOLUTION);
const $resolutionGroup = CE('div', {}); let $resolutions : HTMLSelectElement | NavigationElement = CE<HTMLSelectElement>('select', {},
CE('option', {value: '1080p'}, '1080p'),
CE('option', {value: '720p'}, '720p'),
);
const onResolutionChange = (e: Event) => { if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
const value = (e.target as HTMLInputElement).value; $resolutions = BxSelectElement.wrap($resolutions as HTMLSelectElement);
}
$resolutions.addEventListener('input', (e: Event) => {
const value = (e.target as HTMLSelectElement).value;
$settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games'); $settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games');
setPref(PrefKey.REMOTE_PLAY_RESOLUTION, value); setPref(PrefKey.REMOTE_PLAY_RESOLUTION, value);
}; });
for (const resolution of resolutions) { ($resolutions as any).value = currentResolution;
const value = `${resolution}p`; BxEvent.dispatch($resolutions, 'input', {
const id = `bx_radio_xhome_resolution_${resolution}`; manualTrigger: true,
});
const $radio = CE<HTMLInputElement>('input', {
type: 'radio',
value: value,
id: id,
name: 'bx_radio_xhome_resolution',
}, value);
$radio.addEventListener('input', onResolutionChange);
const $label = CE('label', {
for: id,
class: 'bx-remote-play-resolution',
}, $radio, `${resolution}p`);
$resolutionGroup.appendChild($label);
if (currentResolution === value) {
$radio.checked = true;
$radio.dispatchEvent(new Event('input'));
}
}
const $qualitySettings = CE('div', { const $qualitySettings = CE('div', {
class: 'bx-remote-play-settings', class: 'bx-remote-play-settings',
}, CE('div', {}, }, CE('div', {},
CE('label', {}, t('target-resolution'), $settingNote), CE('label', {}, t('target-resolution'), $settingNote),
$resolutionGroup, $resolutions,
)); ));
$fragment.appendChild($qualitySettings); $fragment.appendChild($qualitySettings);

4
src/web-components/bx-select.ts
View File

@ -164,6 +164,10 @@ export class BxSelectElement {
Object.defineProperty($div, 'value', { Object.defineProperty($div, 'value', {
get() { get() {
return $select.value; return $select.value;
},
set(value) {
($div as any).setValue(value);
} }
}); });