Compare commits

..

6 Commits
v1.2 ... 1.2.1

Author SHA1 Message Date
9971fe6c0c Update README.md 2023-07-15 20:55:34 +07:00
cc11bcea41 Bump version to 1.2.1 2023-07-15 20:54:15 +07:00
048d085e91 Merge branch 'main' of https://github.com/redphx/better-xcloud 2023-07-15 20:53:37 +07:00
ed32044480 Update Video settings UI 2023-07-15 20:53:28 +07:00
32c087966b Update README.md 2023-07-15 20:52:51 +07:00
e4ad010e0a Remove video settings in the main Settings UI 2023-07-15 20:29:50 +07:00
2 changed files with 26 additions and 94 deletions

View File

@ -4,7 +4,9 @@ The main target of this script is Android users, but it should work great on des
## Features ## 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. - Switch region of streaming server.
- Prefer IPv6 streaming server (might reduce latency). - 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. - 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. - Stretch video to full sctreen. Useful when you don't have a 16:9 screen.
- Adjust video filters (brightness/contrast/saturation). - Adjust video filters (brightness/contrast/saturation).
- You can change video settings while playing.
- Hide footer and other UI elements. - Hide footer and other UI elements.
- Reduce UI animations (the smooth scrolling cannot be disabled). - Reduce UI animations (the smooth scrolling cannot be disabled).
- Disable social features (friends, chat...). - 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 ## How to use
1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers. It's also available for Firefox on Android. 1. Install [Tampermonkey extension](https://www.tampermonkey.net/) on suppported browsers. It's also available for Firefox on Android.
2. Install **Better xCloud**: 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/). 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. 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. 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 ⚠️ = see custom notes
| | Desktop | Android | iOS | | | Desktop | Android | iOS |
|----------------------------------------|----------|------------------|-----| |----------------------------------------|----------|------------------|-----|
| Chrome | ✅ | ❌ | ❌ | | Chrome/Edge/Chromium variants | ✅ | ❌ | ❌ |
| Firefox | ✅ | ✅ | ❌ | | Firefox | ✅ | ✅ | ❌ |
| Edge | ❓ | ❌ | ❌ |
| Safari | ❓ | ❌ | ❓ | | Safari | ❓ | ❌ | ❓ |
| [Hermit](https://hermit.chimbori.com) | ❌ | ⚠️<sup>(1)</sup> | ❌ | | [Hermit](https://hermit.chimbori.com) | ❌ | ⚠️<sup>(1)</sup> | ❌ |

View File

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