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

Improve shortcut actions selection box

Browse Source
This commit is contained in:
redphx 2024-05-25 11:41:02 +07:00
parent bf135d34d1
commit 17e02e5b32
2 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/css/stream-settings.styl
View File

@ -142,10 +142,24 @@
flex: 1; flex: 1;
font-family: var(--bx-promptfont-font); font-family: var(--bx-promptfont-font);
font-size: 26px; font-size: 26px;
margin-bottom: 0;
} }
select { .bx-shortcut-actions {
flex: 2; flex: 2;
position: relative;
select {
position: absolute;
width: 100%;
height: 100%;
display: block;
&:last-of-type {
opacity: 0;
z-index: calc(var(--bx-stream-settings-z-index) + 1);
}
}
} }
} }
} }

41
src/modules/controller-shortcut.ts
View File

@ -9,6 +9,7 @@ import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui"; import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
import { PrefKey, getPref } from "@utils/preferences"; import { PrefKey, getPref } from "@utils/preferences";
import { SoundShortcut } from "./shortcuts/shortcut-sound"; import { SoundShortcut } from "./shortcuts/shortcut-sound";
import { BxEvent } from "@/utils/bx-event";
enum ShortcutAction { enum ShortcutAction {
STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture', STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
@ -201,6 +202,10 @@ export class ControllerShortcut {
for (button in ControllerShortcut.#$selectActions) { for (button in ControllerShortcut.#$selectActions) {
const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!; const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
$select.value = actions[button] || ''; $select.value = actions[button] || '';
BxEvent.dispatch($select, 'change', {
ignoreOnChange: true,
});
} }
} }
@ -241,13 +246,13 @@ export class ControllerShortcut {
*/ */
[t('stream')]: { [t('stream')]: {
[ShortcutAction.STREAM_SCREENSHOT_CAPTURE]: [t('stream'), t('take-screenshot')], [ShortcutAction.STREAM_SCREENSHOT_CAPTURE]: t('take-screenshot'),
[ShortcutAction.STREAM_STATS_TOGGLE]: [t('stream'), t('stats'), t('show-hide')], [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')],
[ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('stream'), t('microphone'), t('toggle')], [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
[ShortcutAction.STREAM_MENU_TOGGLE]: [t('stream'), t('menu'), t('show')], [ShortcutAction.STREAM_MENU_TOGGLE]: [t('menu'), t('show')],
[ShortcutAction.STREAM_SOUND_TOGGLE]: [t('stream'), t('sound'), t('toggle')], [ShortcutAction.STREAM_SOUND_TOGGLE]: [t('sound'), t('toggle')],
[ShortcutAction.STREAM_VOLUME_INC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('stream'), t('volume'), t('increase')], [ShortcutAction.STREAM_VOLUME_INC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('volume'), t('increase')],
[ShortcutAction.STREAM_VOLUME_DEC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('stream'), t('volume'), t('decrease')], [ShortcutAction.STREAM_VOLUME_DEC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('volume'), t('decrease')],
} }
}; };
@ -293,7 +298,16 @@ export class ControllerShortcut {
const button: unknown = $target.dataset.button; const button: unknown = $target.dataset.button;
const action = $target.value as ShortcutAction; const action = $target.value as ShortcutAction;
ControllerShortcut.#updateAction(profile, button as GamepadKey, action); const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
let fakeText = '---';
if (action) {
const $selectedOption = $target.options[$target.selectedIndex];
const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
}
($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
!(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
}; };
const $remap = CE('div', {'class': 'bx-gone'}); const $remap = CE('div', {'class': 'bx-gone'});
@ -305,14 +319,23 @@ export class ControllerShortcut {
const prompt = buttons[button]; const prompt = buttons[button];
const $label = CE('label', {'class': 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`); const $label = CE('label', {'class': 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
const $div = CE('div', {'class': 'bx-shortcut-actions'});
const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
CE('option', {}, '---'),
);
$div.appendChild($fakeSelect);
const $select = $baseSelect.cloneNode(true) as HTMLSelectElement; const $select = $baseSelect.cloneNode(true) as HTMLSelectElement;
$select.dataset.button = button.toString(); $select.dataset.button = button.toString();
$select.addEventListener('change', onActionChanged); $select.addEventListener('change', onActionChanged);
ControllerShortcut.#$selectActions[button] = $select; ControllerShortcut.#$selectActions[button] = $select;
$div.appendChild($select);
$row.appendChild($label); $row.appendChild($label);
$row.appendChild($select); $row.appendChild($div);
$remap.appendChild($row); $remap.appendChild($row);
} }