Remote Play popup: use radio inputs & add Help button

better-xcloud.user.js

@@ -3673,40 +3673,56 @@ class RemotePlay {
 
         if (!RemotePlay.#CONSOLES || RemotePlay.#CONSOLES.length === 0) {
             $fragment.appendChild(CE('span', {}, t('no-consoles-found')));
-        } else {
+            RemotePlay.#$content = CE('div', {}, $fragment);
+            return;
+        }
+
         const $settingNote = CE('p', {});
 
         const resolutions = [1080, 720];
         const currentResolution = getPref(Preferences.REMOTE_PLAY_RESOLUTION);
-            const $resolutionSelect = CE('select', {});
+        const $resolutionGroup = CE('div', {});
         for (const resolution of resolutions) {
             const value = `${resolution}p`;
+            const id = `bx_radio_xhome_resolution_${resolution}`;
 
-                const $option = CE('option', {'value': value}, value);
+            const $radio = CE('input', {
-                if (currentResolution === value) {
+                'type': 'radio',
-                    $option.selected = true;
+                'value': value,
-                }
+                'id': id,
+                'name': 'bx_radio_xhome_resolution',
+            }, value);
 
-                $resolutionSelect.appendChild($option);
+            $radio.addEventListener('change', e => {
-            }
+                const value = e.target.value;
-            $resolutionSelect.addEventListener('change', e => {
-                const value = $resolutionSelect.value;
 
                 $settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games');
                 setPref(Preferences.REMOTE_PLAY_RESOLUTION, value);
             });
-            $resolutionSelect.dispatchEvent(new Event('change'));
+
+            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('change'));
+            }
+        }
 
         const $qualitySettings = CE('div', {'class': 'bx-remote-play-settings'},
                                     CE('div', {},
                                        CE('label', {}, t('target-resolution'), $settingNote),
-                    $resolutionSelect,
+                                       $resolutionGroup,
                                       )
                                    );
 
         $fragment.appendChild($qualitySettings);
-        }
 
+        // Render concoles list
         for (let con of RemotePlay.#CONSOLES) {
             let $connectButton;
             const $child = CE('div', {'class': 'bx-remote-play-device-wrapper'},
@@ -3732,6 +3748,14 @@ class RemotePlay {
             $fragment.appendChild($child);
         }
 
+        // Add Help button
+        $fragment.appendChild(createButton({
+            icon: Icon.QUESTION,
+            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+            url: 'https://better-xcloud.github.io/remote-play',
+            label: t('help'),
+        }));
+
         RemotePlay.#$content = CE('div', {}, $fragment);
     }
 
@@ -9730,6 +9754,11 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
   }
 }
 
+.bx-remote-play-container > .bx-button {
+    display: table;
+    margin: 0 0 0 auto;
+}
+
 .bx-remote-play-settings {
     margin-bottom: 12px;
     padding-bottom: 12px;
@@ -9759,6 +9788,19 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
     text-align: center;
 }
 
+.bx-remote-play-resolution {
+    display: block;
+}
+
+.bx-remote-play-resolution input[type="radio"] {
+    accent-color: var(--bx-primary-button-color);
+    margin-right: 6px;
+}
+
+.bx-remote-play-resolution input[type="radio"]:focus {
+    accent-color: var(--bx-primary-button-hover-color);
+}
+
 .bx-remote-play-device-wrapper {
     display: flex;
     margin-bottom: 12px;