Bump version to 2.1.1

* Redesign Quick Settings bar

* Move stream stats settings to quick settings bar

* Add "for" attributes to labels

* Minor optimization

* Stop rendering Toast

* Don't render UI elements when not playing

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: redphx

README.md

@@ -1,49 +1,94 @@
 # Better xCloud
-Improve [Xbox Cloud Gaming (xCloud)](https://www.xbox.com/play/) experience on web browser.  
+Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbox.com/play). It also allows you to use Remote Play on the xCloud website.  
-The main target of this script is mobile users, but it should work great on desktop too.  
+
+**Supported platforms:**  
+- Windows
+- macOS
+- Linux, SteamOS (Steam Deck)
+- Android, Android TV
+- iOS, iPadOS
 
 This script makes me spend more time with xCloud, and I hope the same thing happens to you.  
 If you like this project please give it a 🌟. Thank you 🙏.
 
 [![Latest version](https://img.shields.io/github/v/release/redphx/better-xcloud?label=latest)](https://github.com/redphx/better-xcloud/releases) 
-[![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)  
-<!--
 [![Total downloads](https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c)](https://github.com/redphx/better-xcloud/releases) 
--->
+[![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)  
+
 
 ## Table of Contents
-- [**Features**](#features)
 - [**How to install**](#how-to-install)
 - [**Compatibility**](#compatibility)
+- [**Features**](#features)
 - [**Stream stats**](#stream-stats)
 - [**Capture screenshot**](#capture-screenshot)
 - [**FAQ**](#faq)
+- [**Translators**](#translators)
 - [**Donation**](#donation)
 - [**Acknowledgements**](#acknowledgements)
 - [**Disclaimers**](#disclaimers)
 
+## How to install
+1. Install an userscript extension:
+   - **Safari**: Install [Userscripts extension](https://apps.apple.com/us/app/userscripts/id1463298887). Check [this page](https://github.com/redphx/better-xcloud/wiki/Using-with-Safari) before using.
+   - **All other browsers**: Install [Tampermonkey extension](https://www.tampermonkey.net/).  
+3. Install **Better xCloud**:
+    - [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)-->  
+    I only distribute **Better xCloud** on GitHub, *DO NOT* download it on other websites or from unknown sources.
+4. Refresh the [xCloud web page](https://www.xbox.com/play/).
+5. Click on the new *\<SERVER NAME\>* button next to your profile picture to adjust settings.
+
+To update manually, just install the script again (you won't lose your settings).
+
+⚠️⚠️⚠️ If you're using Kiwi Browser on Android, make sure to follow the steps correctly and install the script with Tampermonkey (not installing it as an extension), or else it won't work.
+
+## Compatibility
+- 👍 = best choice, all features work as intended
+- ✅ = confirmed to be working, might miss some features
+- ❌ = not supported (mostly because of lacking Userscript/extension support)
+- ➖ = unavailable
+- 🗒️ = see custom notes
+
+|                                         | Windows/Linux/SteamOS | macOS            | Android/Android TV | iOS              |
+|-----------------------------------------|:----------------------|:-----------------|:-------------------|:-----------------|
+| Chrome/Edge/Chromium...                 | 👍                    | 👍               | ❌                  | ❌               |
+| Firefox                                 | ✅                    | ✅               | 🗒️<sup>(1)</sup>    | ❌               |
+| Safari                                  | ➖                    | ✅<sup>(2)</sup> | ➖                  | ✅<sup>(3)</sup> |
+| [Kiwi Browser](https://kiwibrowser.com) | ➖                    | ➖               | 👍                  | ➖               |
+
+Don't see your browser in the table? If it supports Tampermonkey/Userscript then the answer is likely **"YES"**.
+
+<sup>1</sup> Follow [this guide](https://support.mozilla.org/en-US/kb/find-and-install-add-ons-firefox-android) to install Tampermonkey on Firefox Android. Its Gamepad API doesn't work properly so it might not recognize your controller.  
+<sup>2, 3</sup> Requires [Userscripts app](https://apps.apple.com/us/app/userscripts/id1463298887) (free & open-source). Check [this page](https://github.com/redphx/better-xcloud/wiki/Using-with-Safari) before using.  
+
+---
+- **Kiwi Browser** is the best choice on Android. All features work, it means you can get 1080p stream + high-quality codec profile (the best possible quality).  
+- **Better xCloud** also works on Android TV, but you'll have to sideload the browser APK and need a Bluetooth mouse if you want to interact with the Settings.  
 
 ## Features
 
-<img width="400" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/0eedde97-74c7-44df-bc89-2ebf8edb6e2c">
+<img width="400" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/ca38b3fa-1e89-4b37-937c-a6796c07cdf1">
 <br>
-<img width="600" alt="Stream HUD" src="https://github.com/redphx/better-xcloud/assets/96280/e30f6514-13ca-41c6-bff2-979573cff956">
+<img width="400" alt="Remote Play dialog" src="https://github.com/redphx/better-xcloud/assets/96280/daf7f698-a228-4f9c-8f23-9669e061a64c">
 <br>
-<img width="600" alt="Video settings" src="https://github.com/redphx/better-xcloud/assets/96280/a8614693-7f56-4a49-82ad-c1fd7e2e00a5">
+<img width="600" alt="Stream HUD" src="https://github.com/redphx/better-xcloud/assets/96280/51bdb96c-79ab-402f-902a-a9e6229973b2">
-
+<br>
+<img width="600" alt="Stream settings" src="https://github.com/redphx/better-xcloud/assets/96280/ed513cb3-6e6c-4e8e-9e06-c62e71e41c90">
 
 &nbsp;  
   
 **Demo video:** [https://youtu.be/oDr5Eddp55E  ](https://youtu.be/AYb-EUcz72U)  
-
+- **🔥 Support [Remote Play](https://support.xbox.com/help/games-apps/game-setup-and-play/how-to-set-up-remote-play)**  
-- **🔥 Improve visual quality of the stream**
+  > 1080p resolution and can stream Xbox 360 games.  
+- **🔥 Improve visual quality of the stream**  
   > Similar to (but not as good as) the "Clarity Boost" of xCloud on Edge browser. [Demo video](https://youtu.be/ZhW2choAHUs). 
 - **🔥 Show stream stats**  
   > Check [Stream stats section](#stream-stats) for more info.  
 - **🔥 Capture screenshot**
   > Exclusive to **Better xCloud**. Check the [**Capture screenshot** section](#capture-screenshot) for more info.
 - **🔥 Hold the "Quit game" button for one second to refresh the stream**
-  > Sometimes you can fix the bad connection to the stream simply by refreshing the page.  
+  > Sometimes you can fix the bad connection to the stream or low FPS simply by refreshing the page.  
   > Useful on mobile where the pull-to-refresh feature doesn't work while playing.  
 - **🔥 Touch controller**
   > Enable touch controller support for all games.
@@ -62,19 +107,29 @@ If you like this project please give it a 🌟. Thank you 🙏.
 - **Set target resolution**
   > By default you only get 1080p stream when playing on desktop.  
   > This feature can give you 1080p stream even on mobile, without having to change User-Agent.  
-- **Force high-quality codec (if supported)<sup>(\*)</sup>**
+- **Change visual quality**
-  > Force xCloud to use the best streaming codec profile (same as desktop & TV) if possible. You don't have to change User-Agent anymore.  
+  > Increase/decrease the quality of the stream to your liking. Only works in Chrome/Edge/Kiwi...  
-  > You should enable this feature even if you're on desktop.  
-  > Not available for some browsers (Firefox, Safari...).  
-  > Use more bandwidth & battery.  
   > Comparison video with the setting ON & OFF: https://youtu.be/-9PuBJJSgR4  
 - **Disable bandwidth checking**  
-  > xCloud won't warn about slow connection speed.  
+  > xCloud won't warn about slow connection speed.
+- **Enable volume control feature**
+  > Allow increasing stream's volume up to 600%  
+  > ⚠️ Disable this setting if you experience slowdown, choppy/muted stream  
 - **Enable microphone on game launch**  
   > Automatically enable the mic when starting to play a game.  
 - **Hide mouse cursor on idle**  
   > Hide the mouse cursor after 3 seconds of not moving.  
 
+### Controller
+- Enable controller shortcuts  
+  > `Home` is  the button which activates the Xbox sidebar menu (similar to the Xbox/Nexus button on the official controller).  
+  > Not all controllers have this button. It's the `B16` button on the [Gamepad Tester site](https://hardwaretester.com/gamepad).  
+  > More shortcuts will be added later.
+  
+  | Shortcut      | Action           |
+  |---------------|------------------|
+  | Home + RB     | Take screenshot  |
+  | Home + Select | Toggle stats bar |
 
 ### 🔥 Touch controller
 - **Availability**
@@ -93,14 +148,13 @@ If you like this project please give it a 🌟. Thank you 🙏.
   > <img width="400" alt="Button styles" src="https://github.com/redphx/better-xcloud/assets/96280/2bfef2b3-6712-4924-b067-c2312f8c8062">
 
 ### Loading screen
-- Show game art
+- **Show game art**
   > Replace the black background with game art if it's available.  
-- Show the estimated wait time
+- **Show the estimated wait time**
   > The time is estimated by the server.  
-  > It's not 100% correct: you might get in the game sooner or later.
+  > It's not 100% correct: you might get in the game sooner or later.  
-  > Don't be mad when the estimated time is inaccurate.  
   > Check [#51](https://github.com/redphx/better-xcloud/issues/51) for more info.  
-- Show/hide the rocket animation
+- **Show/hide the rocket animation**
   > Always show/Hide when queuing/Always hide.  
   > Hide this animation might save some battery life while queuing.  
   
@@ -108,7 +162,9 @@ If you like this project please give it a 🌟. Thank you 🙏.
 
 
 ### UI
-- **Simplify Stream's menu**
+- **Switch website's layout**  
+  > Switch between default layout and Smart TV layout (without having to change User-Agent).  
+- **Simplify Stream's menu**  
   > Hide the labels of the menu buttons.  
 - **Skip Xbox splash video**
   > Save 3 seconds.
@@ -123,8 +179,13 @@ If you like this project please give it a 🌟. Thank you 🙏.
 - **Disable xCloud analytics**
   > The analytics contains statistics of your streaming session, so I'd recommend allowing analytics to help Xbox improve xCloud's experience in the future.
 
-### Stream's video features
+### In-game settings
-
+- **🔥 Controller & device vibrations**
+  > Control vibration settings  
+  > Adjust vibration intensity  
+- **Volume control**
+  > Increase stream's volume up to 600%  
+  > Can be disabled in the Main Settings  
 - **🔥 Improve stream's clarity**
   > Similar to (but not as good as) the "Clarity Boost" of xCloud on Edge browser. [Demo video](https://youtu.be/ZhW2choAHUs).  
   > Also known as poor man's "Clarity Boost".  
@@ -135,7 +196,7 @@ If you like this project please give it a 🌟. Thank you 🙏.
   > ![clarity](https://github.com/redphx/better-xcloud/assets/96280/ed63bbb0-fcbf-43e2-8e51-ac2733e697b8)
   > *(click to enlarge)*
 
-- **Stretch video to full sctreen**
+- **Change video's ratio**
   > Useful when you don't have a 16:9 screen
 - **Adjust video filters**
   > Brightness/Contrast/Saturation.  
@@ -155,58 +216,13 @@ If you like this project please give it a 🌟. Thank you 🙏.
 
 <sup>(\*)</sup> By default (for compatibility reasons) xCloud only uses high quality codec profile when you use Tizen TV or Chrome/Edge/Chromium browser on Chrome/MacOS. Enable this setting will give you the best experience no matter what platform & browser you're on.
 
-## How to install
-1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers. For Safari, use the [Userscripts extension](https://apps.apple.com/us/app/userscripts/id1463298887) (check [this page](https://github.com/redphx/better-xcloud/wiki/Using-with-Safari) before using).  
-2. Install **Better xCloud**:
-    - [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)  
-    I only distribute **Better xCloud** on GitHub, *DO NOT* download it on other websites or from unknown sources.  
-3. Refresh [xCloud web page](https://www.xbox.com/play/).
-4. Click on the new "SERVER NAME" button next to your profile picture to adjust settings.  
-5. Don't forget to enable auto updating for the script in Tampermonkey.
-
-To update manually, just install the script again (you won't lose your settings).
-
-⚠️⚠️⚠️ If you're using Kiwi Browser on Android, make sure to follow the steps correctly and install the script with Tampermonkey (not installing it as an extension), or else it won't work.
-
-### Tutorial videos  
-If you still have trouble installing **Better xCloud**, you can follow one of these tutorial videos:  
-- 🇧🇷 [Tudo isso agora tem no xCloud!! (ChipTec)](https://youtu.be/zS8Zy0mYIbU?t=40)
-- 🇫🇷 [#Tuto Xbox Cloud Gaming : Ecran ultra large et adieu les bandes noires sur smartphone (Cloud Gaming France)](https://www.youtube.com/watch?v=5U05KoTdDHs)
-
-
-## Compatibility
-✅ = confirmed to be working  
-❓ = not yet tested  
-❌ = not supported (mostly because of lacking Userscript/extension support)  
-➖ = unavailable  
-⚠️ = see custom notes  
-|                                         | Desktop          | Android/Android TV | iOS             |
-|-----------------------------------------|:-----------------|:-------------------|:----------------|
-| Chrome/Edge/Chromium variants           | ✅               | ❌                 | ❌               |
-| Firefox                                 | ✅               | ⚠️<sup>(1)</sup>   | ❌               |
-| Safari                                  | ✅<sup>(2)</sup> | ➖                 | ✅<sup>(3)</sup> |
-| [Hermit](https://hermit.chimbori.com)   | ➖               | ⚠️<sup>(4)</sup>   | ➖               |
-| [Kiwi Browser](https://kiwibrowser.com) | ➖               | ✅                 | ➖               |
-
-Don't see your browser in the table? If it supports Tampermonkey/Userscript then the answer is likely **"YES"**.
-
-<sup>1</sup> Follow [this guide](https://support.mozilla.org/en-US/kb/find-and-install-add-ons-firefox-android) to install Tampermonkey on Firefox Android. Its Gamepad API doesn't work properly so it might not recognize your controller.  
-<sup>2, 3</sup> Requires [Userscripts app](https://apps.apple.com/us/app/userscripts/id1463298887) (free & open-source). Check [this page](https://github.com/redphx/better-xcloud/wiki/Using-with-Safari) before using.  
-<sup>4</sup> NOT RECOMMENDED at the moment since its Userscript implementation is not working properly (see https://github.com/redphx/better-xcloud/issues/5 for full details).    
-
----
-- **Kiwi Browser** is the best choice on Android. All features work, it means you can get 1080p stream + high-quality codec profile (the best possible quality).  
-- **Better xCloud** also works on Android TV, but you'll have to sideload the browser APK and need a Bluetooth mouse if you want to interact with the Settings.  
-
 ## Stream stats  
+<img alt="Stream stats" src="https://github.com/redphx/better-xcloud/assets/96280/9fb51941-85a9-47c4-8d48-331456b9ce73">  
+  
+<img width="418" alt="Stream stats settings" src="https://github.com/redphx/better-xcloud/assets/96280/6313a0c6-03bf-4325-b60d-18a23c681933">  
 
-![stats](https://github.com/redphx/better-xcloud/assets/96280/736548db-316d-4bb3-a0f8-467766ae810b)
+- While playing > `...` > `Stream Stats`.  
-
+- Change settings by opening `Stream settings` while playing.  
-<img width="500" alt="Stream stats" src="https://github.com/redphx/better-xcloud/assets/96280/142625ea-20ab-4392-a111-0c5bc08bae09">
-
-- While playing > `...` > `Stream Stats`.
-- Double-click on the stats bar to show the Settings dialog.
 - This bar is updated every second.  
 - **Quick glance** feature: only show the stats bar when the System menu is expanded. The 👀 emoji at the beginning indicates that the stats bar is in the quick glance mode.  
 - ⚠️ Using **Better xCloud** or showing the stats bar also affects the performance of the stream.  
@@ -215,7 +231,7 @@ Don't see your browser in the table? If it supports Tampermonkey/Userscript then
 |------:|:-------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------|
 | PING  | Ping               | The number of seconds it takes for data to be sent from your device to the server and back over (the correct term is "Round Trip Time")           |
 | FPS   | Frames per Seconds | The number of decoded frames in the last second of the stream (may not be the same as the FPS of the game)                                        |
-| DT    | Decode Time        | The average time it took to decode one frame in the last second (bugged in Kiwi Browser [#26](https://github.com/redphx/better-xcloud/issues/26)) |
+| DT    | Decode Time        | The average time it took to decode one frame in the last second (bugged on Android [#26](https://github.com/redphx/better-xcloud/issues/26))      |
 | BR    | Bitrate            | The amount of data the server sent to your device in the last second                                                                              |
 | PL    | Packets Lost       | The total number of packets lost                                                                                                                  |
 | FL    | Frames Lost        | The total number of frames dropped prior to decode or dropped because the frame missed its display deadline                                       |
@@ -278,16 +294,32 @@ Sorry, no. The server decides all these settings.
 8. **What's the meaning behind the name "Better xCloud"?**  
 It's a reference to an Userscript called "better360" that I created many years ago. I regret not choosing the name "xCloud Enhancement Suite", or XES for short.  
 
-## Donation
+## Translators
-I'm doing this for fun, so you don't have to donate anything. You're already supporting me by using this script. Save that money toward your Xbox Game Pass Ultimate subscription 😄.
+  - **Chinese (Simplified)**: [@nyavana](https://github.com/nyavana)
+  - **French**: rodolphe.chouteau, Stay34yth
+  - **German**: [@KingNothing81](https://github.com/KingNothing81), mynameismanu
+  - **Korean**: [@rightones](https://github.com/rightones)
+  - **Italian**: Greenylie, Rakan129, Carza-104, graziequalcuno, DioCannabinoide
+  - **Japanese**: Tak_attack, udonshi
+  - **Portuguese (Brazilian)**: [@ricardo404](https://github.com/ricardo404), [@Haisom](https://github.com/Haisom), italorafael22062009, PotatoPTT, guilhermecursi, renatomaster01
+  - **Polish**: [@aleksishere](https://github.com/aleksishere)
+  - **Russian**: anpom6, soophik
+  - **Spanish**: [@PabloSebas](https://github.com/PabloSebas), csvnchzn
+  - **Turkish**: [@transbebek](https://github.com/transbebek)
+  - **Ukrainian**: glebanych
+  - **Vietnamese**: [@redphx](https://github.com/redphx)
 
-## User-Agent
+Visit [here](https://crowdin.com/project/better-xcloud) if you want to translate **Better xCloud** to more languages.  
-Moved to [wiki](https://github.com/redphx/better-xcloud/wiki/User‐Agent).
+Use [this post](https://github.com/redphx/better-xcloud/discussions/131) for discussion.  
+
+## Donation
+I'm doing this for fun, so you don't have to donate anything. You're already supporting me by using this script. Save that money toward your Xbox Game Pass Ultimate subscription 😄.  
+But if you still really want to donate, I have a [Ko-fi page](https://ko-fi.com/redphx). Thank you.
 
 ## Acknowledgements  
 - [n-thumann/xbox-cloud-server-selector](https://github.com/n-thumann/xbox-cloud-server-selector) for the idea of IPv6 feature
 - Icons by [Phosphor Icons](https://phosphoricons.com)
 
 ## Disclaimers  
-- Use as it your own risk.  
+- Use it at your own risk.
 - This project is not affiliated with Xbox in any way. All Xbox logos/icons/trademarks are copyright of their respective owners.

better-xcloud.meta.js

@@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      1.14
+// @version      2.1.1
 // ==/UserScript==