Update README.md

README.md

@@ -4,7 +4,9 @@ The main target of this script is Android users, but it should work great on des
 
 ## Features
 
-<img width="474" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/2793d404-3185-4c91-a500-dde362c661dd">
+<img width="500" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/db9b4f88-6958-4ec8-90cb-3cf37da5ab26">  
+<img width="500" alt="Video Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/130aa870-6938-4604-9e23-45e217b800cc">
+
 
 - Switch region of streaming server.
 - Prefer IPv6 streaming server (might reduce latency).
@@ -13,7 +15,6 @@ The main target of this script is Android users, but it should work great on des
 - Make the top-left dots icon invisible while playing. You can still click on it, but it doesn't block the screen anymore.
 - Stretch video to full sctreen. Useful when you don't have a 16:9 screen.
 - Adjust video filters (brightness/contrast/saturation).
-- You can change video settings while playing.
 - Hide footer and other UI elements.
 - Reduce UI animations (the smooth scrolling cannot be disabled).
 - Disable social features (friends, chat...).
@@ -22,7 +23,8 @@ The main target of this script is Android users, but it should work great on des
 ## How to use
 1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers. It's also available for Firefox on Android.
 2. Install **Better xCloud**:
-    - [Directly on Github](https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js)
+    - [Stable version](https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js)
+    - [Dev version](https://github.com/redphx/better-xcloud/raw/main/better-xcloud.user.js)
 4. Refresh [xCloud web page](https://www.xbox.com/play/).
 5. Click on the new "SERVER NAME" button next to your profile picture to adjust settings.
 6. Optional but recommended: change your browser's User-Agent. Check the [User-Agent section](#user-agent) below for more info.
@@ -50,9 +52,8 @@ Other options (only do one of these):
 ⚠️ = see custom notes  
 |                                        | Desktop  | Android          | iOS |
 |----------------------------------------|----------|------------------|-----|
-| Chrome                                 | ✅       | ❌               | ❌   |
+| Chrome/Edge/Chromium variants          | ✅       | ❌               | ❌   |
 | Firefox                                | ✅       | ✅               | ❌   |
-| Edge                                   | ❓       | ❌               | ❌   |
 | Safari                                 | ❓       | ❌               | ❓   |
 | [Hermit](https://hermit.chimbori.com)  | ❌       | ⚠️<sup>(1)</sup> | ❌   |
 

better-xcloud.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      1.2
+// @version      1.2.1
 // @description  Improve Xbox Cloud Gaming (xCloud) experience
 // @author       redphx
 // @license      MIT
@@ -13,7 +13,7 @@
 // ==/UserScript==
 'use strict';
 
-const SCRIPT_VERSION = '1.2';
+const SCRIPT_VERSION = '1.2.1';
 const SCRIPT_HOME = 'https://github.com/redphx/better-xcloud';
 
 const SERVER_REGIONS = {};
@@ -88,6 +88,7 @@ class Preferences {
             'id': Preferences.VIDEO_FILL_FULL_SCREEN,
             'label': 'Stretch video to full screen',
             'default': false,
+            'hidden': true,
         },
 
         {
@@ -96,6 +97,7 @@ class Preferences {
             'default': 100,
             'min': 0,
             'max': 150,
+            'hidden': true,
         },
 
         {
@@ -104,6 +106,7 @@ class Preferences {
             'default': 100,
             'min': 0,
             'max': 150,
+            'hidden': true,
         },
 
         {
@@ -112,6 +115,7 @@ class Preferences {
             'default': 100,
             'min': 0,
             'max': 150,
+            'hidden': true,
         },
     ]
 
@@ -246,31 +250,6 @@ function addCss() {
     line-height: 24px;
 }
 
-.better_xcloud_settings_wrapper .setting_button:hover {
-    background-color: #06743f;
-}
-
-.better_xcloud_settings_preview_screen {
-    display: none;
-    aspect-ratio: 20/9;
-    background: #1e1e1e;
-    border-radius: 8px;
-    overflow: hidden;
-    max-height: 180px;
-    margin: 10px auto;
-}
-
-.better_xcloud_settings_preview_video {
-    display: flex;
-    aspect-ratio: 16/9;
-    height: 100%;
-    margin: auto;
-}
-
-.better_xcloud_settings_preview_video div {
-    flex: 1;
-}
-
 /* Hide UI elements */
 #headerArea, #uhfSkipToMain, .uhf-footer {
     display: none;
@@ -536,31 +515,6 @@ function createElement(elmName, props = {}) {
 }
 
 
-function generateVideoPreviewBox() {
-    const $screen = createElement('div', {'class': 'better_xcloud_settings_preview_screen'});
-    const $video = createElement('div', {'class': 'better_xcloud_settings_preview_video'});
-
-    const COLOR_BARS = [
-        'white',
-        'yellow',
-        'cyan',
-        'green',
-        'magenta',
-        'red',
-        'blue',
-        'black',
-    ];
-
-    COLOR_BARS.forEach(color => {
-        $video.appendChild(createElement('div', {
-                style: `background-color: ${color}`,
-            }));
-    });
-
-    $screen.appendChild($video);
-    return $screen;
-}
-
 function injectSettingsButton($parent) {
     if (!$parent) {
         return;
@@ -593,8 +547,11 @@ function injectSettingsButton($parent) {
     $wrapper.appendChild($title);
 
     for (let setting of Preferences.SETTINGS) {
-        let $control;
+        if (setting.hidden) {
+            continue;
+        }
 
+        let $control;
         if (setting.id === Preferences.SERVER_REGION) {
             $control = CE('select', {id: 'xcloud_setting_' + setting.id});
             $control.addEventListener('change', e => {
@@ -616,33 +573,6 @@ function injectSettingsButton($parent) {
 
                 $control.appendChild($option);
             }
-        } else if (typeof setting.default === 'number') {
-            $control = CE('input', {
-                id: 'xcloud_setting_' + setting.id,
-                type: 'number',
-                size: 5,
-                'data-key': setting.id,
-            });
-
-            if ('min' in setting) {
-                $control.setAttribute('min', setting.min);
-            }
-
-            if ('max' in setting) {
-                $control.setAttribute('max', setting.max);
-            }
-
-            $control.value = PREFS.get(setting.id);
-            if (setting.id.startsWith('video_')) {
-                $control.addEventListener('change', e => {
-                    if (!e.target.value) {
-                        return;
-                    }
-
-                    PREFS.set(e.target.getAttribute('data-key'), parseInt(e.target.value));
-                    updateVideoPlayerPreview();
-                });
-            }
         } else {
             $control = CE('input', {
                 id: 'xcloud_setting_' + setting.id,
@@ -670,9 +600,6 @@ function injectSettingsButton($parent) {
         $wrapper.appendChild($elm);
     }
 
-    const $videoPreview = generateVideoPreviewBox();
-    $wrapper.appendChild($videoPreview);
-
     const $reloadBtn = CE('button', {'class': 'setting_button'}, 'Reload page to reflect changes');
     $reloadBtn.addEventListener('click', e => window.location.reload());
     $wrapper.appendChild($reloadBtn);
@@ -907,7 +834,7 @@ function numberPicker(key) {
     const CE = createElement;
     const $wrapper = CE('div', {},
                         $decBtn = CE('button', {'data-type': 'dec'}, '-'),
-                        $text = CE('span', {}, value),
+                        $text = CE('span', {}, value + '%'),
                         $incBtn = CE('button', {'data-type': 'inc'}, '+'),
                     );
 
@@ -929,7 +856,7 @@ function numberPicker(key) {
             value = (value >= MAX) ? MAX : value + 1;
         }
 
-        $text.textContent = value;
+        $text.textContent = value + '%';
         PREFS.set(key, value);
         updateVideoPlayerCss();
 
@@ -1022,8 +949,9 @@ function setupVideoSettingsBar() {
 }
 
 .better_xcloud_quick_settings_bar label {
-    font-size: 24px;
+    font-size: 20px;
     display: block;
+    margin-bottom: 8px;
 }
 
 .better_xcloud_quick_settings_bar input {
@@ -1037,8 +965,9 @@ function setupVideoSettingsBar() {
     height: 24px;
     margin: 0 8px;
     line-height: 24px;
-    background-color: #fff;
-    color: #000;
+    background-color: #515151;
+    color: #fff;
+    border-radius: 4px;
 }
 
 @media (hover: hover) {
@@ -1055,7 +984,9 @@ function setupVideoSettingsBar() {
 
 .better_xcloud_quick_settings_bar span {
     display: inline-block;
-    width: 26px;
+    width: 40px;
+    font-weight: bold;
+    font-family: Consolas, "Courier New", Courier, monospace;
 }
 `);