mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-07-11 00:31:43 +02:00
Compare commits
6 Commits
Author | SHA1 | Date | |
---|---|---|---|
9971fe6c0c | |||
cc11bcea41 | |||
048d085e91 | |||
ed32044480 | |||
32c087966b | |||
e4ad010e0a |
11
README.md
11
README.md
@ -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> | ❌ |
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
`);
|
`);
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user