Update URL of "updateURL" and "downloadURL"

README.md

@@ -1,21 +1,22 @@
 # Better xCloud
-Improve [Xbox Cloud Gaming (xCloud)](https://www.xbox.com/play/) experience.  
+Improve [Xbox Cloud Gaming (xCloud)](https://www.xbox.com/play/) experience on web browser.  
 The main target of this script is Android users, but it should work great on desktop too.
 
 ## Features:
 
-<img width="474" alt="screenshot" src="https://github.com/redphx/better-xcloud/assets/96280/a0e85915-4e3f-4c1b-8885-eda1c712eeb6">
+<img width="474" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/2793d404-3185-4c91-a500-dde362c661dd">
 
 - Switch region of streaming server.
 - Prefer IPv6 streaming server (might improve latency).
 - Force HD stream by disabling bandwidth checking -> xCloud always tries to use the best possible quality.
 - Skip Xbox splash video.
 - 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).
 - Hide footer and other UI elements.
 - Reduce UI animations (the smooth scrolling cannot be disabled).
 - Disable social features (friends, chat...).
-- Disable xCloud analytics. The analytics contains statistics of your streaming session, so I'd recommend to enable analytics to help Xbox improve xCloud's experence in the future.  
+- Disable xCloud analytics. The analytics contains statistics of your streaming session, so I'd recommend to allow analytics to help Xbox improve xCloud's experence in the future.  
 
 ## How to use:
 1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers. It's also available for Firefox on Android.
@@ -54,7 +55,10 @@ It's because not many browsers on Android support installing extensions (and not
 That means Tampermonkey is not working properly. Please make sure you're using the latest version or switch to a well-known browser.  
 
 3. **Can I use this with the Xbox Android app?**  
-No you can't. You'll have to modidy the app.
+No you can't. You'll have to modify the app.
+
+4. **Will you able to enable "Clarity Boost" feature on non-Edge browsers?**  
+No. "Clarity Boost" feature uses an exclusive API (`Video.msVideoProcessing`) that's only available on Edge browser for desktop at the moment.
 
 ## Acknowledgements  
 **Better xCloud** is inspired by these projects:  

better-xcloud.user.js

@@ -1,19 +1,19 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      1.0
+// @version      1.1
 // @description  Improve Xbox Cloud Gaming (xCloud) experience
 // @author       redphx
 // @license      MIT
 // @match        https://www.xbox.com/*/play*
 // @run-at       document-start
 // @grant        none
-// @updateURL    https://github.com/redphx/better-xcloud/raw/main/better-xcloud.user.js
-// @downloadURL  https://github.com/redphx/better-xcloud/raw/main/better-xcloud.user.js
+// @updateURL    https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js
+// @downloadURL  https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js
 // ==/UserScript==
 'use strict';
 
-const SCRIPT_VERSION = '1.0';
+const SCRIPT_VERSION = '1.1';
 const SCRIPT_HOME = 'https://github.com/redphx/better-xcloud';
 
 const SERVER_REGIONS = {};
@@ -30,6 +30,7 @@ class Preferences {
     static get HIDE_DOTS_ICON() { return 'hide_dots_icon'; }
     static get REDUCE_ANIMATIONS() { return 'reduce_animations'; }
 
+    static get VIDEO_FILL_FULL_SCREEN() { return 'video_fill_full_screen'; }
     static get VIDEO_BRIGHTNESS() { return 'video_brightness'; }
     static get VIDEO_CONTRAST() { return 'video_contrast'; }
     static get VIDEO_SATURATION() { return 'video_saturation'; }
@@ -83,6 +84,12 @@ class Preferences {
             'default': false,
         },
 
+        {
+            'id': Preferences.VIDEO_FILL_FULL_SCREEN,
+            'label': 'Stretch video to full screen',
+            'default': false,
+        },
+
         {
             'id': Preferences.VIDEO_SATURATION,
             'label': 'Video saturation (%)',
@@ -243,14 +250,24 @@ function addCss() {
     background-color: #06743f;
 }
 
-.better_xcloud_settings_color_bars {
+.better_xcloud_settings_preview_screen {
     display: none;
-    width: 100%;
-    aspect-ratio: 16/6;
-    margin-top: 10px;
+    aspect-ratio: 20/9;
+    background: #1e1e1e;
+    border-radius: 8px;
+    overflow: hidden;
+    max-height: 180px;
+    margin: 10px auto;
 }
 
-.better_xcloud_settings_color_bars div {
+.better_xcloud_settings_preview_video {
+    display: flex;
+    aspect-ratio: 16/9;
+    height: 100%;
+    margin: auto;
+}
+
+.better_xcloud_settings_preview_video div {
     flex: 1;
 }
 
@@ -508,6 +525,31 @@ 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;
@@ -587,13 +629,7 @@ function injectSettingsButton($parent) {
                     }
 
                     PREFS.set(e.target.getAttribute('data-key'), parseInt(e.target.value));
-
-                    const filters = getVideoPlayerFilterStyle();
-                    const $elm = document.querySelector('.better_xcloud_settings_color_bars');
-                    $elm.style.display = 'flex';
-                    $elm.style.filter = filters;
-
-                    updateVideoPlayerCss();
+                    updateVideoPlayerPreview();
                 });
             }
         } else {
@@ -602,8 +638,13 @@ function injectSettingsButton($parent) {
                 type: 'checkbox',
                 'data-key': setting.id,
             });
+
             $control.addEventListener('change', e => {
                 PREFS.set(e.target.getAttribute('data-key'), e.target.checked);
+
+                if (setting.id == Preferences.VIDEO_FILL_FULL_SCREEN) {
+                    updateVideoPlayerPreview();
+                }
             });
 
             setting.value = PREFS.get(setting.id);
@@ -618,25 +659,8 @@ function injectSettingsButton($parent) {
         $wrapper.appendChild($elm);
     }
 
-    const COLOR_BARS = [
-        'white',
-        'yellow',
-        'cyan',
-        'green',
-        'magenta',
-        'red',
-        'blue',
-        'black',
-    ];
-
-    const $colorBars = CE('div', {'class': 'better_xcloud_settings_color_bars'});
-    COLOR_BARS.forEach(color => {
-        $colorBars.appendChild(CE('div', {
-                style: `background-color: ${color}`,
-            }));
-    });
-
-    $wrapper.appendChild($colorBars);
+    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());
@@ -678,13 +702,39 @@ function updateVideoPlayerCss() {
     let filters = getVideoPlayerFilterStyle();
     let css = '';
     if (filters) {
-        css = `#game-stream video {filter: ${filters}}`;
+        css += `filter: ${filters} !important;`;
+    }
+
+    if (PREFS.get(Preferences.VIDEO_FILL_FULL_SCREEN)) {
+        css += 'object-fit: fill !important;';
+    }
+
+    if (css) {
+        css = `#game-stream video {${css}}`;
     }
 
     $elm.textContent = css;
 }
 
 
+function updateVideoPlayerPreview() {
+    const $screen = document.querySelector('.better_xcloud_settings_preview_screen');
+    $screen.style.display = 'block';
+
+    const filters = getVideoPlayerFilterStyle();
+    const $video = document.querySelector('.better_xcloud_settings_preview_video');
+    $video.style.filter = filters;
+
+    if (PREFS.get(Preferences.VIDEO_FILL_FULL_SCREEN)) {
+        $video.style.height = 'auto';
+    } else {
+        $video.style.height = '100%';
+    }
+
+    updateVideoPlayerCss();
+}
+
+
 function checkHeader() {
     const $button = document.querySelector('#PageContent header .better_xcloud_settings_button');