From 17e02e5b32edd985ad755ad1617e6de7c0f20765 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sat, 25 May 2024 11:41:02 +0700
Subject: [PATCH] Improve shortcut actions selection box

---
 src/assets/css/stream-settings.styl | 16 ++++++++++-
 src/modules/controller-shortcut.ts  | 41 ++++++++++++++++++++++-------
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/assets/css/stream-settings.styl b/src/assets/css/stream-settings.styl
index 0d87214..1970a85 100644
--- a/src/assets/css/stream-settings.styl
+++ b/src/assets/css/stream-settings.styl
@@ -142,10 +142,24 @@
                 flex: 1;
                 font-family: var(--bx-promptfont-font);
                 font-size: 26px;
+                margin-bottom: 0;
             }
 
-            select {
+            .bx-shortcut-actions {
                 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);
+                    }
+                }
             }
         }
     }
diff --git a/src/modules/controller-shortcut.ts b/src/modules/controller-shortcut.ts
index 19a212d..8771d8c 100644
--- a/src/modules/controller-shortcut.ts
+++ b/src/modules/controller-shortcut.ts
@@ -9,6 +9,7 @@ import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
 import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
 import { PrefKey, getPref } from "@utils/preferences";
 import { SoundShortcut } from "./shortcuts/shortcut-sound";
+import { BxEvent } from "@/utils/bx-event";
 
 enum ShortcutAction {
     STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
@@ -201,6 +202,10 @@ export class ControllerShortcut {
         for (button in ControllerShortcut.#$selectActions) {
             const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
             $select.value = actions[button] || '';
+
+            BxEvent.dispatch($select, 'change', {
+                    ignoreOnChange: true,
+                });
         }
     }
 
@@ -241,13 +246,13 @@ export class ControllerShortcut {
             */
 
             [t('stream')]: {
-                [ShortcutAction.STREAM_SCREENSHOT_CAPTURE]: [t('stream'), t('take-screenshot')],
-                [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stream'), t('stats'), t('show-hide')],
-                [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('stream'), t('microphone'), t('toggle')],
-                [ShortcutAction.STREAM_MENU_TOGGLE]: [t('stream'), t('menu'), t('show')],
-                [ShortcutAction.STREAM_SOUND_TOGGLE]: [t('stream'), t('sound'), t('toggle')],
-                [ShortcutAction.STREAM_VOLUME_INC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('stream'), t('volume'), t('increase')],
-                [ShortcutAction.STREAM_VOLUME_DEC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('stream'), t('volume'), t('decrease')],
+                [ShortcutAction.STREAM_SCREENSHOT_CAPTURE]: t('take-screenshot'),
+                [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')],
+                [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
+                [ShortcutAction.STREAM_MENU_TOGGLE]: [t('menu'), t('show')],
+                [ShortcutAction.STREAM_SOUND_TOGGLE]: [t('sound'), t('toggle')],
+                [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('volume'), t('decrease')],
             }
         };
 
@@ -293,7 +298,16 @@ export class ControllerShortcut {
             const button: unknown = $target.dataset.button;
             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'});
@@ -305,14 +319,23 @@ export class ControllerShortcut {
             const prompt = buttons[button];
             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;
             $select.dataset.button = button.toString();
             $select.addEventListener('change', onActionChanged);
 
             ControllerShortcut.#$selectActions[button] = $select;
 
+            $div.appendChild($select);
+
             $row.appendChild($label);
-            $row.appendChild($select);
+            $row.appendChild($div);
 
             $remap.appendChild($row);
         }