marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-08 00:27:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor code (#36)

Browse Source 
* Refactor class names

* Move Quick settings bar's CSS to addCss()

* Adjust Stream menu button's size

* Add shadow to Video settings bar

* Put "Stream Stats" button before "Video Settings" button
This commit is contained in:
redphx 2023-07-29 16:39:40 +07:00 committed by GitHub
parent 9d44c9c779
commit 26528fe2d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 150 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
better-xcloud.user.js
View File

@ -69,9 +69,9 @@ class StreamBadges {
static #renderBadge(name, value, color) { static #renderBadge(name, value, color) {
const CE = createElement; const CE = createElement;
const $badge = CE('div', {'class': 'better_xcloud_badge'}, const $badge = CE('div', {'class': 'better-xcloud-badge'},
CE('span', {'class': 'better_xcloud_badge_name'}, name), CE('span', {'class': 'better-xcloud-badge-name'}, name),
CE('span', {'class': 'better_xcloud_badge_value', 'style': `background-color: ${color}`}, value)); CE('span', {'class': 'better-xcloud-badge-value', 'style': `background-color: ${color}`}, value));
return $badge; return $badge;
} }
@ -102,7 +102,7 @@ class StreamBadges {
StreamBadges.resolution && ['resolution', `${StreamBadges.resolution.width}x${StreamBadges.resolution.height}`, '#ff3977'], StreamBadges.resolution && ['resolution', `${StreamBadges.resolution.width}x${StreamBadges.resolution.height}`, '#ff3977'],
]; ];
const $wrapper = createElement('div', {'class': 'better_xcloud_badges'}); const $wrapper = createElement('div', {'class': 'better-xcloud-badges'});
BADGES.forEach(item => item && $wrapper.appendChild(StreamBadges.#renderBadge(...item))); BADGES.forEach(item => item && $wrapper.appendChild(StreamBadges.#renderBadge(...item)));
return $wrapper; return $wrapper;
@ -230,7 +230,7 @@ class StreamStats {
} }
const CE = createElement; const CE = createElement;
StreamStats.#$container = CE('div', {'class': 'better_xcloud_stats_bar'}, StreamStats.#$container = CE('div', {'class': 'better-xcloud-stats-bar'},
CE('label', {}, 'FPS'), CE('label', {}, 'FPS'),
StreamStats.#$fps = CE('span', {}, 0), StreamStats.#$fps = CE('span', {}, 0),
CE('label', {}, 'RTT'), CE('label', {}, 'RTT'),
@ -273,7 +273,7 @@ class StreamStats {
const $opacity = PREFS.toElement(Preferences.STATS_OPACITY, refreshFunc); const $opacity = PREFS.toElement(Preferences.STATS_OPACITY, refreshFunc);
const $textSize = PREFS.toElement(Preferences.STATS_TEXT_SIZE, refreshFunc); const $textSize = PREFS.toElement(Preferences.STATS_TEXT_SIZE, refreshFunc);
StreamStats.#$settings = CE('div', {'class': 'better_xcloud_stats_settings'}, StreamStats.#$settings = CE('div', {'class': 'better-xcloud-stats-settings'},
CE('b', {}, 'Stream Stats Settings'), CE('b', {}, 'Stream Stats Settings'),
CE('div', {}, CE('div', {},
CE('label', {'for': `xcloud_setting_${Preferences.STATS_SHOW_WHEN_PLAYING}`}, 'Show stats when starting the game'), CE('label', {'for': `xcloud_setting_${Preferences.STATS_SHOW_WHEN_PLAYING}`}, 'Show stats when starting the game'),
@ -695,7 +695,7 @@ function checkForUpdate() {
function addCss() { function addCss() {
let css = ` let css = `
.better_xcloud_settings_button { .better-xcloud-settings-button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: white; color: white;
@ -705,11 +705,11 @@ function addCss() {
padding: 8px; padding: 8px;
} }
.better_xcloud_settings_button:hover, .better_xcloud_settings_button:focus { .better-xcloud-settings-button:hover, .better-xcloud-settings-button:focus {
background-color: #515863; background-color: #515863;
} }
.better_xcloud_settings_button[data-update-available]::after { .better-xcloud-settings-button[data-update-available]::after {
content: ' 🌟'; content: ' 🌟';
} }
@ -720,25 +720,25 @@ function addCss() {
font-family: "Segoe UI", Arial, Helvetica, sans-serif font-family: "Segoe UI", Arial, Helvetica, sans-serif
} }
.better_xcloud_settings_gone { .better-xcloud-settings-gone {
display: none; display: none;
} }
.better_xcloud_settings_wrapper { .better-xcloud-settings-wrapper {
width: 450px; width: 450px;
margin: auto; margin: auto;
padding: 12px 6px; padding: 12px 6px;
} }
.better_xcloud_settings_wrapper *:focus { .better-xcloud-settings-wrapper *:focus {
outline: none !important; outline: none !important;
} }
.better_xcloud_settings_wrapper .better_xcloud_settings_title_wrapper { .better-xcloud-settings-wrapper .better-xcloud-settings-title-wrapper {
display: flex; display: flex;
} }
.better_xcloud_settings_wrapper a.better_xcloud_settings_title { .better-xcloud-settings-wrapper a.better-xcloud-settings-title {
font-family: Bahnschrift, Arial, Helvetica, sans-serif; font-family: Bahnschrift, Arial, Helvetica, sans-serif;
font-size: 20px; font-size: 20px;
text-decoration: none; text-decoration: none;
@ -750,56 +750,56 @@ function addCss() {
} }
@media (hover: hover) { @media (hover: hover) {
.better_xcloud_settings_wrapper a.better_xcloud_settings_title:hover { .better-xcloud-settings-wrapper a.better-xcloud-settings-title:hover {
color: #83f73a; color: #83f73a;
} }
} }
.better_xcloud_settings_wrapper a.better_xcloud_settings_title:focus { .better-xcloud-settings-wrapper a.better-xcloud-settings-title:focus {
color: #83f73a; color: #83f73a;
} }
.better_xcloud_settings_wrapper a.better_xcloud_settings_update { .better-xcloud-settings-wrapper a.better-xcloud-settings-update {
display: none; display: none;
color: #ff834b; color: #ff834b;
text-decoration: none; text-decoration: none;
} }
@media (hover: hover) { @media (hover: hover) {
.better_xcloud_settings_wrapper a.better_xcloud_settings_update:hover { .better-xcloud-settings-wrapper a.better-xcloud-settings-update:hover {
color: #ff9869; color: #ff9869;
text-decoration: underline; text-decoration: underline;
} }
} }
.better_xcloud_settings_wrapper a.better_xcloud_settings_update:focus { .better-xcloud-settings-wrapper a.better-xcloud-settings-update:focus {
color: #ff9869; color: #ff9869;
text-decoration: underline; text-decoration: underline;
} }
.better_xcloud_settings_wrapper .setting_row { .better-xcloud-settings-wrapper .setting_row {
display: flex; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
padding: 2px 4px; padding: 2px 4px;
} }
.better_xcloud_settings_wrapper .setting_row label { .better-xcloud-settings-wrapper .setting_row label {
flex: 1; flex: 1;
align-self: center; align-self: center;
margin-bottom: 0; margin-bottom: 0;
} }
@media not (hover: hover) { @media not (hover: hover) {
.better_xcloud_settings_wrapper .setting_row:focus-within { .better-xcloud-settings-wrapper .setting_row:focus-within {
background-color: #242424; background-color: #242424;
} }
} }
.better_xcloud_settings_wrapper .setting_row input { .better-xcloud-settings-wrapper .setting_row input {
align-self: center; align-self: center;
} }
.better_xcloud_settings_wrapper .setting_button { .better-xcloud-settings-wrapper .setting_button {
padding: 8px 32px; padding: 8px 32px;
margin: 10px auto 0; margin: 10px auto 0;
border: none; border: none;
@ -815,20 +815,20 @@ function addCss() {
} }
@media (hover: hover) { @media (hover: hover) {
.better_xcloud_settings_wrapper .setting_button:hover { .better-xcloud-settings-wrapper .setting_button:hover {
background-color: #00753c; background-color: #00753c;
} }
} }
.better_xcloud_settings_wrapper .setting_button:focus { .better-xcloud-settings-wrapper .setting_button:focus {
background-color: #00753c; background-color: #00753c;
} }
.better_xcloud_settings_wrapper .setting_button:active { .better-xcloud-settings-wrapper .setting_button:active {
background-color: #00753c; background-color: #00753c;
} }
.better_xcloud_settings_custom_user_agent { .better-xcloud-settings-custom-user-agent {
display: block; display: block;
width: 100%; width: 100%;
} }
@ -837,14 +837,14 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
overflow: visible; overflow: visible;
} }
.better_xcloud_badges { .better-xcloud-badges {
position: absolute; position: absolute;
top: 155px; top: 155px;
margin-left: 0px; margin-left: 0px;
user-select: none; user-select: none;
} }
.better_xcloud_badge { .better-xcloud-badge {
border: none; border: none;
display: inline-block; display: inline-block;
line-height: 24px; line-height: 24px;
@ -856,7 +856,7 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
border-radius: 4px; border-radius: 4px;
} }
.better_xcloud_badge .better_xcloud_badge_name { .better-xcloud-badge .better-xcloud-badge-name {
background-color: #2d3036; background-color: #2d3036;
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
@ -864,14 +864,14 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
text-transform: uppercase; text-transform: uppercase;
} }
.better_xcloud_badge .better_xcloud_badge_value { .better-xcloud-badge .better-xcloud-badge-value {
background-color: grey; background-color: grey;
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.better_xcloud_screenshot_button { .better-xcloud-screenshot-button {
display: none; display: none;
opacity: 0; opacity: 0;
position: fixed; position: fixed;
@ -890,19 +890,19 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIgN2E1LjAyIDUuMDIgMCAwIDAtNSA1IDUuMDIgNS4wMiAwIDAgMCA1IDUgNS4wMiA1LjAyIDAgMCAwIDUtNSA1LjAyIDUuMDIgMCAwIDAtNS01em0wIDJjMS42NjkgMCAzIDEuMzMxIDMgM3MtMS4zMzEgMy0zIDMtMy0xLjMzMS0zLTMgMS4zMzEtMyAzLTN6TTYgMkMzLjgwMSAyIDIgMy44MDEgMiA2djJhMSAxIDAgMSAwIDIgMFY2YTEuOTcgMS45NyAwIDAgMSAyLTJoMmExIDEgMCAxIDAgMC0yek0zIDE1YTEgMSAwIDAgMC0xIDF2MmMwIDIuMTk5IDEuODAxIDQgNCA0aDJhMSAxIDAgMSAwIDAtMkg2YTEuOTcgMS45NyAwIDAgMS0yLTJ2LTJhMSAxIDAgMCAwLTEtMXptMTggMGExIDEgMCAwIDAtMSAxdjJhMS45NyAxLjk3IDAgMCAxLTIgMmgtMmExIDEgMCAxIDAgMCAyaDJjMi4xOTkgMCA0LTEuODAxIDQtNHYtMmExIDEgMCAwIDAtMS0xeiIvPjxwYXRoIGQ9Ik0xNiAyYTEgMSAwIDEgMCAwIDJoMmExLjk3IDEuOTcgMCAwIDEgMiAydjJhMSAxIDAgMSAwIDIgMFY2YzAtMi4xOTktMS44MDEtNC00LTR6Ii8+PC9zdmc+Cg==); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIgN2E1LjAyIDUuMDIgMCAwIDAtNSA1IDUuMDIgNS4wMiAwIDAgMCA1IDUgNS4wMiA1LjAyIDAgMCAwIDUtNSA1LjAyIDUuMDIgMCAwIDAtNS01em0wIDJjMS42NjkgMCAzIDEuMzMxIDMgM3MtMS4zMzEgMy0zIDMtMy0xLjMzMS0zLTMgMS4zMzEtMyAzLTN6TTYgMkMzLjgwMSAyIDIgMy44MDEgMiA2djJhMSAxIDAgMSAwIDIgMFY2YTEuOTcgMS45NyAwIDAgMSAyLTJoMmExIDEgMCAxIDAgMC0yek0zIDE1YTEgMSAwIDAgMC0xIDF2MmMwIDIuMTk5IDEuODAxIDQgNCA0aDJhMSAxIDAgMSAwIDAtMkg2YTEuOTcgMS45NyAwIDAgMS0yLTJ2LTJhMSAxIDAgMCAwLTEtMXptMTggMGExIDEgMCAwIDAtMSAxdjJhMS45NyAxLjk3IDAgMCAxLTIgMmgtMmExIDEgMCAxIDAgMCAyaDJjMi4xOTkgMCA0LTEuODAxIDQtNHYtMmExIDEgMCAwIDAtMS0xeiIvPjxwYXRoIGQ9Ik0xNiAyYTEgMSAwIDEgMCAwIDJoMmExLjk3IDEuOTcgMCAwIDEgMiAydjJhMSAxIDAgMSAwIDIgMFY2YzAtMi4xOTktMS44MDEtNC00LTR6Ii8+PC9zdmc+Cg==);
} }
.better_xcloud_screenshot_button[data-showing=true] { .better-xcloud-screenshot-button[data-showing=true] {
opacity: 1; opacity: 1;
} }
.better_xcloud_screenshot_button[data-capturing=true] { .better-xcloud-screenshot-button[data-capturing=true] {
padding: 0px; padding: 0px;
} }
.better_xcloud_screenshot_canvas { .better-xcloud-screenshot-canvas {
display: none; display: none;
} }
.better_xcloud_stats_bar { .better-xcloud-stats-bar {
display: none; display: none;
user-select: none; user-select: none;
position: fixed; position: fixed;
@ -916,25 +916,25 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
text-wrap: nowrap; text-wrap: nowrap;
} }
.better_xcloud_stats_bar[data-position=top-left] { .better-xcloud-stats-bar[data-position=top-left] {
left: 0; left: 0;
} }
.better_xcloud_stats_bar[data-position=top-right] { .better-xcloud-stats-bar[data-position=top-right] {
right: 0; right: 0;
} }
.better_xcloud_stats_bar[data-position=top-center] { .better-xcloud-stats-bar[data-position=top-center] {
transform: translate(-50%, 0); transform: translate(-50%, 0);
left: 50%; left: 50%;
} }
.better_xcloud_stats_bar[data-transparent=true] { .better-xcloud-stats-bar[data-transparent=true] {
background: none; background: none;
filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
} }
.better_xcloud_stats_bar label { .better-xcloud-stats-bar label {
margin: 0 8px 0 0; margin: 0 8px 0 0;
font-family: Bahnschrift, Arial, Helvetica, sans-serif; font-family: Bahnschrift, Arial, Helvetica, sans-serif;
font-size: inherit; font-size: inherit;
@ -942,7 +942,7 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
vertical-align: middle; vertical-align: middle;
} }
.better_xcloud_stats_bar span { .better-xcloud-stats-bar span {
min-width: 60px; min-width: 60px;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
@ -952,28 +952,28 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
vertical-align: middle; vertical-align: middle;
} }
.better_xcloud_stats_bar span[data-grade=good] { .better-xcloud-stats-bar span[data-grade=good] {
color: #6bffff; color: #6bffff;
} }
.better_xcloud_stats_bar span[data-grade=ok] { .better-xcloud-stats-bar span[data-grade=ok] {
color: #fff16b; color: #fff16b;
} }
.better_xcloud_stats_bar span[data-grade=bad] { .better-xcloud-stats-bar span[data-grade=bad] {
color: #ff5f5f; color: #ff5f5f;
} }
.better_xcloud_stats_bar span:first-of-type { .better-xcloud-stats-bar span:first-of-type {
min-width: 30px; min-width: 30px;
} }
.better_xcloud_stats_bar span:last-of-type { .better-xcloud-stats-bar span:last-of-type {
border: 0; border: 0;
margin-right: 0; margin-right: 0;
} }
.better_xcloud_stats_settings { .better-xcloud-stats-settings {
display: none; display: none;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -993,11 +993,11 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
user-select: none; user-select: none;
} }
.better_xcloud_stats_settings *:focus { .better-xcloud-stats-settings *:focus {
outline: none !important; outline: none !important;
} }
.better_xcloud_stats_settings > b { .better-xcloud-stats-settings > b {
color: #fff; color: #fff;
display: block; display: block;
font-family: Bahnschrift, Arial, Helvetica, sans-serif; font-family: Bahnschrift, Arial, Helvetica, sans-serif;
@ -1007,19 +1007,19 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
margin-bottom: 12px; margin-bottom: 12px;
} }
.better_xcloud_stats_settings > div { .better-xcloud-stats-settings > div {
display: flex; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
padding: 2px 4px; padding: 2px 4px;
} }
.better_xcloud_stats_settings label { .better-xcloud-stats-settings label {
flex: 1; flex: 1;
margin-bottom: 0; margin-bottom: 0;
align-self: center; align-self: center;
} }
.better_xcloud_stats_settings button { .better-xcloud-stats-settings button {
padding: 8px 32px; padding: 8px 32px;
margin: 20px auto 0; margin: 20px auto 0;
border: none; border: none;
@ -1036,15 +1036,85 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
} }
@media (hover: hover) { @media (hover: hover) {
.better_xcloud_stats_settings button:hover { .better-xcloud-stats-settings button:hover {
background-color: #515863; background-color: #515863;
} }
} }
.better_xcloud_stats_settings button:focus { .better-xcloud-stats-settings button:focus {
background-color: #515863; background-color: #515863;
} }
.better-xcloud-quick-settings-bar {
display: none;
user-select: none;
position: fixed;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
z-index: 9999;
padding: 20px;
width: 620px;
background: #1a1b1e;
color: #fff;
border-radius: 8px;
font-weight: 400;
font-size: 16px;
font-family: Bahnschrift, Arial, Helvetica, sans-serif;
text-align: center;
box-shadow: 0px 0px 6px #000;
opacity: 0.95;
}
.better-xcloud-quick-settings-bar *:focus {
outline: none !important;
}
.better-xcloud-quick-settings-bar > div {
flex: 1;
}
.better-xcloud-quick-settings-bar label {
font-size: 20px;
display: block;
margin-bottom: 8px;
}
.better-xcloud-quick-settings-bar input {
width: 24px;
height: 24px;
}
.better-xcloud-quick-settings-bar button {
border: none;
width: 24px;
height: 24px;
margin: 0 8px;
line-height: 24px;
background-color: #515151;
color: #fff;
border-radius: 4px;
}
@media (hover: hover) {
.better-xcloud-quick-settings-bar button:hover {
background-color: #414141;
color: white;
}
}
.better-xcloud-quick-settings-bar button:active {
background-color: #414141;
color: white;
}
.better-xcloud-quick-settings-bar span {
display: inline-block;
width: 40px;
font-weight: bold;
font-family: Consolas, "Courier New", Courier, monospace;
}
/* Hide UI elements */ /* Hide UI elements */
#headerArea, #uhfSkipToMain, .uhf-footer { #headerArea, #uhfSkipToMain, .uhf-footer {
display: none; display: none;
@ -1065,7 +1135,12 @@ div[class*=NotFocusedDialog] {
/* Adjust Stream menu icon's size */ /* Adjust Stream menu icon's size */
button[class*=MenuItem-module__container] { button[class*=MenuItem-module__container] {
min-width: auto !important; min-width: auto !important;
width: 110px !important; width: 100px !important;
}
button[class*=MenuItem-module__container] div[class*=MenuItem-module__label] {
margin-left: 8px !important;
margin-right: 8px !important;
} }
`; `;
@ -1368,10 +1443,10 @@ function injectSettingsButton($parent) {
const PREF_PREFERRED_REGION = getPreferredServerRegion(); const PREF_PREFERRED_REGION = getPreferredServerRegion();
const PREF_LATEST_VERSION = PREFS.get(Preferences.LATEST_VERSION, null); const PREF_LATEST_VERSION = PREFS.get(Preferences.LATEST_VERSION, null);
const $button = CE('button', {'class': 'better_xcloud_settings_button'}, PREF_PREFERRED_REGION); const $button = CE('button', {'class': 'better-xcloud-settings-button'}, PREF_PREFERRED_REGION);
$button.addEventListener('click', e => { $button.addEventListener('click', e => {
const $settings = document.querySelector('.better_xcloud_settings'); const $settings = document.querySelector('.better_xcloud_settings');
$settings.classList.toggle('better_xcloud_settings_gone'); $settings.classList.toggle('better-xcloud-settings-gone');
$settings.scrollIntoView(); $settings.scrollIntoView();
}); });
@ -1382,19 +1457,19 @@ function injectSettingsButton($parent) {
$parent.appendChild($button); $parent.appendChild($button);
const $container = CE('div', { const $container = CE('div', {
'class': 'better_xcloud_settings better_xcloud_settings_gone', 'class': 'better_xcloud_settings better-xcloud-settings-gone',
}); });
let $updateAvailable; let $updateAvailable;
const $wrapper = CE('div', {'class': 'better_xcloud_settings_wrapper'}, const $wrapper = CE('div', {'class': 'better-xcloud-settings-wrapper'},
CE('div', {'class': 'better_xcloud_settings_title_wrapper'}, CE('div', {'class': 'better-xcloud-settings-title-wrapper'},
CE('a', { CE('a', {
'class': 'better_xcloud_settings_title', 'class': 'better-xcloud-settings-title',
'href': SCRIPT_HOME, 'href': SCRIPT_HOME,
'target': '_blank', 'target': '_blank',
}, 'Better xCloud ' + SCRIPT_VERSION), }, 'Better xCloud ' + SCRIPT_VERSION),
$updateAvailable = CE('a', { $updateAvailable = CE('a', {
'class': 'better_xcloud_settings_update', 'class': 'better-xcloud-settings-update',
'href': 'https://github.com/redphx/better-xcloud/releases', 'href': 'https://github.com/redphx/better-xcloud/releases',
'target': '_blank', 'target': '_blank',
}) })
@ -1421,7 +1496,7 @@ function injectSettingsButton($parent) {
$inpCustomUserAgent = CE('input', { $inpCustomUserAgent = CE('input', {
'type': 'text', 'type': 'text',
'placeholder': defaultUserAgent, 'placeholder': defaultUserAgent,
'class': 'better_xcloud_settings_custom_user_agent', 'class': 'better-xcloud-settings-custom-user-agent',
}); });
$inpCustomUserAgent.addEventListener('change', e => { $inpCustomUserAgent.addEventListener('change', e => {
PREFS.set(Preferences.USER_AGENT_CUSTOM, e.target.value.trim()); PREFS.set(Preferences.USER_AGENT_CUSTOM, e.target.value.trim());
@ -1566,7 +1641,7 @@ function updateVideoPlayerCss() {
function checkHeader() { function checkHeader() {
const $button = document.querySelector('#PageContent header .better_xcloud_settings_button'); const $button = document.querySelector('#PageContent header .better-xcloud-settings-button');
if (!$button) { if (!$button) {
const $rightHeader = document.querySelector('#PageContent header div[class*=EdgewaterHeader-module__rightSectionSpacing]'); const $rightHeader = document.querySelector('#PageContent header div[class*=EdgewaterHeader-module__rightSectionSpacing]');
@ -1620,7 +1695,7 @@ function injectVideoSettingsButton() {
$screen.xObserving = true; $screen.xObserving = true;
const $quickBar = document.querySelector('.better_xcloud_quick_settings_bar'); const $quickBar = document.querySelector('.better-xcloud-quick-settings-bar');
const $parent = $screen.parentElement; const $parent = $screen.parentElement;
const hideQuickBarFunc = e => { const hideQuickBarFunc = e => {
if (e.target != $parent && e.target.id !== 'MultiTouchSurface') { if (e.target != $parent && e.target.id !== 'MultiTouchSurface') {
@ -1695,7 +1770,7 @@ function injectVideoSettingsButton() {
}); });
// Insert after Video Settings button // Insert after Video Settings button
$orgButton.parentElement.insertBefore($btnStreamStats, $btnVideoSettings.nextSibling); $orgButton.parentElement.insertBefore($btnStreamStats, $btnVideoSettings);
// Render stream badges // Render stream badges
const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]'); const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
@ -1758,7 +1833,7 @@ function patchVideoApi() {
}); });
if (PREF_SCREENSHOT_BUTTON_POSITION !== 'none') { if (PREF_SCREENSHOT_BUTTON_POSITION !== 'none') {
const $btn = document.querySelector('.better_xcloud_screenshot_button'); const $btn = document.querySelector('.better-xcloud-screenshot-button');
$btn.style.display = 'block'; $btn.style.display = 'block';
if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') { if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') {
@ -1905,7 +1980,7 @@ function setupVideoSettingsBar() {
const CE = createElement; const CE = createElement;
let $stretchInp; let $stretchInp;
const $wrapper = CE('div', {'class': 'better_xcloud_quick_settings_bar'}, const $wrapper = CE('div', {'class': 'better-xcloud-quick-settings-bar'},
CE('div', {}, CE('div', {},
CE('label', {'for': 'better-xcloud-quick-setting-stretch'}, 'Stretch Video'), CE('label', {'for': 'better-xcloud-quick-setting-stretch'}, 'Stretch Video'),
$stretchInp = CE('input', {'id': 'better-xcloud-quick-setting-stretch', 'type': 'checkbox'})), $stretchInp = CE('input', {'id': 'better-xcloud-quick-setting-stretch', 'type': 'checkbox'})),
@ -1926,89 +2001,18 @@ function setupVideoSettingsBar() {
updateVideoPlayerCss(); updateVideoPlayerCss();
}); });
const $style = CE('style', {}, `
.better_xcloud_quick_settings_bar {
display: none;
user-select: none;
position: fixed;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
z-index: 9999;
padding: 20px;
width: 620px;
background: #1a1b1e;
color: #fff;
border-radius: 8px;
font-weight: 400;
font-size: 16px;
font-family: Bahnschrift, Arial, Helvetica, sans-serif;
text-align: center;
}
.better_xcloud_quick_settings_bar *:focus {
outline: none !important;
}
.better_xcloud_quick_settings_bar > div {
flex: 1;
}
.better_xcloud_quick_settings_bar label {
font-size: 20px;
display: block;
margin-bottom: 8px;
}
.better_xcloud_quick_settings_bar input {
width: 24px;
height: 24px;
}
.better_xcloud_quick_settings_bar button {
border: none;
width: 24px;
height: 24px;
margin: 0 8px;
line-height: 24px;
background-color: #515151;
color: #fff;
border-radius: 4px;
}
@media (hover: hover) {
.better_xcloud_quick_settings_bar button:hover {
background-color: #414141;
color: white;
}
}
.better_xcloud_quick_settings_bar button:active {
background-color: #414141;
color: white;
}
.better_xcloud_quick_settings_bar span {
display: inline-block;
width: 40px;
font-weight: bold;
font-family: Consolas, "Courier New", Courier, monospace;
}
`);
document.documentElement.appendChild($wrapper); document.documentElement.appendChild($wrapper);
document.documentElement.appendChild($style);
} }
function setupScreenshotButton() { function setupScreenshotButton() {
$SCREENSHOT_CANVAS = createElement('canvas', {'class': 'better_xcloud_screenshot_canvas'}); $SCREENSHOT_CANVAS = createElement('canvas', {'class': 'better-xcloud-screenshot-canvas'});
document.documentElement.appendChild($SCREENSHOT_CANVAS); document.documentElement.appendChild($SCREENSHOT_CANVAS);
const $canvasContext = $SCREENSHOT_CANVAS.getContext('2d'); const $canvasContext = $SCREENSHOT_CANVAS.getContext('2d');
const delay = 2000; const delay = 2000;
const $btn = createElement('div', {'class': 'better_xcloud_screenshot_button', 'data-showing': false}); const $btn = createElement('div', {'class': 'better-xcloud-screenshot-button', 'data-showing': false});
let timeout; let timeout;
const detectDbClick = e => { const detectDbClick = e => {
@ -2085,10 +2089,10 @@ function patchHistoryMethod(type) {
function onHistoryChange() { function onHistoryChange() {
const $settings = document.querySelector('.better_xcloud_settings'); const $settings = document.querySelector('.better_xcloud_settings');
if ($settings) { if ($settings) {
$settings.classList.add('better_xcloud_settings_gone'); $settings.classList.add('better-xcloud-settings-gone');
} }
const $quickBar = document.querySelector('.better_xcloud_quick_settings_bar'); const $quickBar = document.querySelector('.better-xcloud-quick-settings-bar');
if ($quickBar) { if ($quickBar) {
$quickBar.style.display = 'none'; $quickBar.style.display = 'none';
} }
@ -2097,7 +2101,7 @@ function onHistoryChange() {
$STREAM_VIDEO = null; $STREAM_VIDEO = null;
StreamStats.stop(); StreamStats.stop();
StreamStats.hideSettingsUi(); StreamStats.hideSettingsUi();
document.querySelector('.better_xcloud_screenshot_button').style = ''; document.querySelector('.better-xcloud-screenshot-button').style = '';
MouseCursorHider.stop(); MouseCursorHider.stop();
} }
@ -2110,8 +2114,6 @@ window.addEventListener('popstate', onHistoryChange);
window.history.pushState = patchHistoryMethod('pushState'); window.history.pushState = patchHistoryMethod('pushState');
window.history.replaceState = patchHistoryMethod('replaceState'); window.history.replaceState = patchHistoryMethod('replaceState');
UserAgent.spoof(); UserAgent.spoof();
// Disable bandwidth checking // Disable bandwidth checking