Compare commits

..

178 Commits

Author SHA1 Message Date
40006c5931 Bump version to 5.5.0 2024-07-27 16:45:47 +07:00
8742da0531 Fix not disabling the Reload button correctly 2024-07-27 16:33:40 +07:00
6e17c2e24b Fix not showing default touch control 2024-07-27 16:29:03 +07:00
6a81ee2806 Add Danish 2024-07-27 16:24:09 +07:00
9dfdeb8f12 Merge Global settings and Stream settings into one dialog 2024-07-27 16:09:13 +07:00
023799232e Update better-xcloud.user.js 2024-07-27 15:46:25 +07:00
a44714ed29 Update better-xcloud.user.js 2024-07-27 11:36:48 +07:00
70d5d62890 Update better-xcloud.user.js 2024-07-27 10:49:29 +07:00
5d8dd4e3a9 Update better-xcloud.user.js 2024-07-27 08:02:44 +07:00
60526d5166 Update better-xcloud.user.js 2024-07-27 06:36:28 +07:00
40794f6088 Update better-xcloud.user.js 2024-07-26 21:53:04 +07:00
4de3fd9228 Update better-xcloud.user.js 2024-07-26 21:38:09 +07:00
d75f65e2d2 Update better-xcloud.user.js 2024-07-26 20:07:41 +07:00
21b9b2f661 Update better-xcloud.user.js 2024-07-26 19:48:51 +07:00
fc6f610859 Update better-xcloud.user.js 2024-07-26 18:00:08 +07:00
231febc0ad Update better-xcloud.user.js 2024-07-26 08:05:06 +07:00
e3bd341e57 Update better-xcloud.user.js 2024-07-25 20:26:29 +07:00
a0996eee77 Update better-xcloud.user.js 2024-07-25 08:55:18 +07:00
f46722e540 Update better-xcloud.user.js 2024-07-24 20:48:45 +07:00
1ec162115f Try to fix crashing on iOS (#455) 2024-07-21 06:17:12 +07:00
5a27caad23 Bump version to 5.4.2 2024-07-20 07:18:58 +07:00
e7d7ccf165 Add VIDEO_POWER_PREFERENCE value to Debug info 2024-07-20 07:13:44 +07:00
782c0a6967 Update better-xcloud.user.js 2024-07-20 07:10:22 +07:00
5f696ff0b8 Update translations 2024-07-20 07:04:31 +07:00
c796152bdd Focus the other button when reaching the beginning/end 2024-07-20 06:54:53 +07:00
2ae8452c90 Update layout 2024-07-20 06:39:43 +07:00
bf7d6453ea Fix layout of the "Create shortcut" button 2024-07-20 06:30:26 +07:00
130a7ffbd7 Put "low-power" before "high-performance" 2024-07-20 05:56:34 +07:00
1d590103ce Fix not able to scroll pass hidden settings 2024-07-20 05:52:55 +07:00
a268e49280 Fix unexpected "false" texts 2024-07-20 05:43:32 +07:00
7db004ede3 Fix issue with <select multiple> and BxSelect element 2024-07-19 21:10:28 +07:00
6a8eecab06 Bump version to 5.4.1 2024-07-19 18:25:57 +07:00
640dd2fb5a Update better-xcloud.user.js 2024-07-19 18:12:35 +07:00
30bb8cfbeb Fix not able to loop around in some cases 2024-07-19 18:08:39 +07:00
42b57a2cf8 Set controller-friendly UI as default on Android TV 2024-07-19 18:01:41 +07:00
210fdfbabe Add "GPU configuration" setting 2024-07-19 17:41:52 +07:00
dbbdc48aab Add "Create shortcut" button to Product Details page 2024-07-19 16:48:31 +07:00
66123bc4ef Fix BxSelect element not showing label correctly (#449) 2024-07-19 06:54:00 +07:00
2ecd995e47 Minor updates 2024-07-19 06:24:17 +07:00
0e03d4dc32 Update better-xcloud.user.js 2024-07-18 20:48:21 +07:00
5b4088cc81 Show debug info 2024-07-18 20:47:58 +07:00
1f3e4b8250 Re-arrange buttons in Guide menu 2024-07-18 20:08:59 +07:00
daf3f72736 Loop around settings 2024-07-18 17:30:34 +07:00
fbebb12965 Close Stream settings dialog when not clicking on any child elements 2024-07-18 09:20:40 +07:00
43ef2b7cd0 Update better-xcloud.user.js 2024-07-18 09:06:45 +07:00
e1eca20792 Fix Stream settings dialog in portrait mode 2024-07-18 09:06:37 +07:00
c2d8f1fbf7 Disable Fire OS's "Update required" screen 2024-07-18 07:21:35 +07:00
64be526b2d Bump version to 5.4.0 2024-07-17 18:13:09 +07:00
13527b9cf6 Bug fixes 2024-07-17 18:08:41 +07:00
6999783c07 Update better-xcloud.user.js 2024-07-17 17:56:18 +07:00
0f88396db8 Allow navigating Stream settings using controller/keyboard all the time 2024-07-17 17:54:06 +07:00
e73b4dfe78 Support navigating Stream settings using left stick 2024-07-17 17:47:23 +07:00
0fb83de0ff Add "Reload page" button to the Guide menu even when not playing 2024-07-17 17:43:57 +07:00
714276e552 Hide Stream settings when navigating to another pages 2024-07-17 17:40:08 +07:00
58b83c4eb2 Add BX_EXPOSED.backButtonPressed() 2024-07-17 17:38:59 +07:00
585ec4a598 Update translations and add support for Traditional Chinese 2024-07-17 17:38:27 +07:00
816249e9a5 Minor fix 2024-07-17 08:04:19 +07:00
30421fcdba Update better-xcloud.user.js 2024-07-17 07:59:09 +07:00
7f43db03df Press LB/RB to focus setting tabs 2024-07-17 07:58:51 +07:00
742fd24b8c Fix bugs with Clarity boost select box 2024-07-17 07:48:36 +07:00
2db246e081 Update layout 2024-07-17 07:18:55 +07:00
d8e87e5c2c Reduce polling rate 2024-07-17 06:50:13 +07:00
d7dc6931d6 Only disable buttons in number-stepper when they're at min/max 2024-07-17 06:49:19 +07:00
44083f2469 Update better-xcloud.user.js 2024-07-16 21:53:04 +07:00
64568532cb Allow controlling settings using gamepad 2024-07-16 21:52:44 +07:00
2a0af5d0ab Make Controller shortcuts settings controller-friendly 2024-07-16 17:59:21 +07:00
b66cb448ec Make Stream settings dialog controller-friendly 2024-07-16 17:08:56 +07:00
be338f3e34 Update bx-select's layout 2024-07-15 21:18:51 +07:00
394dc68ece Add "Controller-friendly UI" option 2024-07-15 20:54:35 +07:00
66120d6970 Update better-xcloud.user.js 2024-07-15 17:12:22 +07:00
368a6f726a Add optionsGroup 2024-07-15 17:10:07 +07:00
7409956616 Show Settings button in header when not signed in 2024-07-15 17:04:04 +07:00
d41fd22a47 Update servers 2024-07-15 09:13:23 +07:00
55a56837c8 Bump version to 5.3.0 2024-07-14 17:53:35 +07:00
df713136d8 Update better-xcloud.user.js 2024-07-14 17:51:37 +07:00
29dfdaf72e Show allocation time instead of total wait time 2024-07-14 17:51:32 +07:00
04cf66a466 Update better-xcloud.user.js 2024-07-14 16:44:38 +07:00
1d55026c6d Add option to show wait time in game card 2024-07-14 16:44:18 +07:00
fcfecf7ff9 Update global-settings.styl 2024-07-14 09:18:06 +07:00
5e22bf097a Optimize checkHeader() 2024-07-14 09:17:12 +07:00
542079d53e Update translations 2024-07-13 20:15:36 +07:00
1d00d793b8 Bump version to 5.2.0 2024-07-13 18:27:51 +07:00
2a9da6f827 Update better-xcloud.user.js 2024-07-13 18:24:18 +07:00
b6089a61f9 Update translations 2024-07-13 18:22:43 +07:00
0fe6608be9 Disable "patchSetCurrentlyFocusedInteractable" patch 2024-07-13 18:07:09 +07:00
9e39e80309 Fix watchHeader() being called multiple times 2024-07-13 18:04:17 +07:00
5bfcf3a044 Refactor header.ts 2024-07-13 18:00:15 +07:00
66d5d9edc6 Disable the region selection box when the server lis is empty 2024-07-13 17:41:27 +07:00
9d00082c67 Disable "EnableWifiWarnings" flag 2024-07-13 17:35:45 +07:00
ef2e0892bc Add setting to bypass region restriction 2024-07-13 17:27:40 +07:00
ce1901b300 Refactor network.ts 2024-07-13 16:19:33 +07:00
18a8b8330c Add "patchSetCurrentlyFocusedInteractable" patch 2024-07-13 16:07:53 +07:00
b9e78f09d3 Update better-xcloud.user.js 2024-07-12 06:20:02 +07:00
33b2b36e2b Revert "Remove website's version detection"
This reverts commit 91ab57fa29.
2024-07-12 06:19:30 +07:00
61ed68c40f Update better-xcloud.user.js 2024-07-10 07:18:18 +07:00
4ad0d44929 Disable touch for non-touch supported User-Agent profile 2024-07-10 07:18:10 +07:00
422442071e Bump version to 5.1.3 2024-07-09 18:31:18 +07:00
8d1ae0656c Update better-xcloud.user.js 2024-07-09 07:53:46 +07:00
a78de2ca37 Hide Stream settings when the Guide menu is shown (#441) 2024-07-09 07:53:36 +07:00
db1da22c0a Remove SMART_TV_UNIQUE_ID from SMART_TV_GENERIC profile 2024-07-09 07:48:05 +07:00
91ab57fa29 Remove website's version detection 2024-07-09 07:46:42 +07:00
416307e23a Fix "alwaysShowStreamHud" not working on non-TV devices 2024-07-08 20:05:20 +07:00
e7c94f3ece Update better-xcloud.user.js 2024-07-08 18:06:23 +07:00
ea9ad16770 Don't show negative packetLost 2024-07-08 18:02:07 +07:00
9a2e7de68d Update better-xcloud.user.js 2024-07-08 17:55:01 +07:00
962f4dec6d Minor update 2024-07-08 17:45:38 +07:00
10d0dedc0a Add "alwaysShowStreamHud" patch 2024-07-08 17:17:28 +07:00
c6acc251ae Update bun 2024-07-08 08:06:54 +07:00
a06d061409 Update better-xcloud.user.js 2024-07-08 07:32:33 +07:00
6b2412ff27 Disable Onboarding screen 2024-07-08 07:32:16 +07:00
0f360d4be1 Bump version to 5.1.2 2024-07-07 21:37:15 +07:00
900ab38153 Minor fixes 2024-07-07 19:20:58 +07:00
c03c63f3c3 Update better-xcloud.user.js 2024-07-07 18:23:37 +07:00
d4f4084991 Disable "Most popular" option 2024-07-07 18:22:41 +07:00
975549b4e7 Add option to hide "All games" section 2024-07-07 18:16:50 +07:00
345d0f78dc Add option to hide "News" section 2024-07-07 16:55:57 +07:00
938dfa6aaa Add option to hide "Friends" section 2024-07-07 16:43:56 +07:00
d7ed9e1603 Add "ignorePlayWithFriendsSection" patch 2024-07-07 16:14:08 +07:00
224e98829d Improve "enableXcloudLogger" patch 2024-07-07 15:28:33 +07:00
56a3f1d8c8 Bug fixes 2024-07-07 14:59:12 +07:00
d82a38c0f1 Update better-xcloud.user.js 2024-07-07 11:21:22 +07:00
77729789e3 Fix problems in the Guide menu #436 #438 2024-07-07 11:20:43 +07:00
5763701355 Update better-xcloud.user.js 2024-07-06 20:58:08 +07:00
cafeed1a3c Bug fixes 2024-07-06 20:48:27 +07:00
691f116ea0 Add "enableTvRoutes" patch 2024-07-06 17:14:02 +07:00
481b365e6e Add "IsSupportedTvBrowser" flag 2024-07-06 16:13:53 +07:00
2b63edb7eb Refactor browser & userAgent's capabilities 2024-07-06 15:53:01 +07:00
b6746598a3 Update better-xcloud.user.js 2024-07-13 12:26:53 +07:00
45bda4bb24 Fix script not being loaded after refreshing token 2024-07-13 12:19:07 +07:00
c93db035f3 Update ICE candidates 2024-07-06 11:08:41 +07:00
e75fa397ee Bump version to 5.1.1 2024-07-02 18:11:08 +07:00
98a9f4fc37 Update better-xcloud.user.js 2024-07-02 18:10:52 +07:00
dee8c9dbd0 Refactor buttons in guide-menu 2024-07-02 18:06:33 +07:00
d31a06be89 Use {once: true} in some event listeners 2024-07-02 17:20:23 +07:00
277c777121 Add "Show controller connection status" setting 2024-07-02 17:08:40 +07:00
385fd71e86 Update better-xcloud.user.js 2024-07-02 06:49:40 +07:00
986d9fe088 Show "Stream settings" and "App settings" in the Guide menu 2024-07-02 06:41:23 +07:00
6de235ce2f Fix overriding experimentation stopped working 2024-07-02 05:50:02 +07:00
f027565534 Bump version to 5.1.0 2024-07-01 18:08:46 +07:00
0213b860fd No longer need "Kiwi Browser v123" profile 2024-07-01 17:52:12 +07:00
13feb36aae Update better-xcloud.user.js 2024-07-01 17:44:49 +07:00
d83261d816 Dim Stream settings' overlay when not playing 2024-07-01 17:42:42 +07:00
c1502b5552 Prepare for webOS & Tizen support 2024-07-01 17:26:04 +07:00
64d60aedfa Create bun.lockb 2024-07-01 17:23:13 +07:00
889a97e56b Stop using setCodecPreferences() as it causes stuttering on Chromium 124+ 2024-07-01 17:22:24 +07:00
7aee4d5148 Compress CSS 2024-07-01 17:20:39 +07:00
2000d6d80e Update translations 2024-06-26 21:00:38 +07:00
297c0848d5 Bump version to 5.0.1 2024-06-26 18:14:57 +07:00
51ef9f9e8f Update package.json 2024-06-26 18:14:29 +07:00
9717315b79 Update README.md 2024-06-26 08:44:16 +07:00
e176ef6fc0 Update package.json 2024-06-23 17:59:24 +07:00
52694d8f8e Update better-xcloud.user.js 2024-06-23 17:30:00 +07:00
b7928ebe68 Fix stream badge showing "1h60m" instead of "2h" 2024-06-23 17:27:11 +07:00
05eddce11e Update better-xcloud.user.js 2024-06-22 16:43:22 +07:00
057da5b3ea Fix exception with navigator.vibrate() on start up 2024-06-22 16:43:18 +07:00
11ef014c74 Update build.ts 2024-06-22 16:30:22 +07:00
fa82f0ba95 Update better-xcloud.user.js 2024-06-22 16:30:02 +07:00
36db8db1e7 Minify syntax in dist file 2024-06-22 16:29:54 +07:00
d906de7803 Update better-xcloud.user.js 2024-06-22 10:36:27 +07:00
cf546123db Show "Off" when Sharpness is 0 2024-06-22 10:36:02 +07:00
d6a4d1741b Update NumberStepper 2024-06-22 10:35:45 +07:00
22e7400e06 Bump version to 5.0.0 2024-06-21 18:10:50 +07:00
f169c17e18 Add WebGL2 renderer 2024-06-21 17:45:43 +07:00
6150c2ea70 Update better-xcloud.user.js 2024-06-20 20:46:15 +07:00
2cdf92b159 Update better-xcloud.user.js 2024-06-19 18:17:42 +07:00
6f6a9e223e Show WS error in toast 2024-06-10 08:57:07 +07:00
f71904c30b Bump version to 4.7.1 2024-06-10 08:29:53 +07:00
3a16187504 Update Guide menu detection 2024-06-10 08:03:13 +07:00
00ebb3f672 Fix dispatching STREAM_PLAYING event when playing normal video 2024-06-09 18:31:57 +07:00
ebb4d3c141 Add FeatureGates 2024-06-09 18:31:15 +07:00
902918d7fb Update URLs 2024-06-09 15:56:32 +07:00
b780e4e63b Minor fix 2024-06-09 15:45:41 +07:00
32889e0cf1 Minor fix 2024-06-09 15:43:19 +07:00
d8b9fcc951 Update better-xcloud.user.js 2024-06-09 15:40:15 +07:00
c7734245ae Don't check update for beta version 2024-06-09 11:50:46 +07:00
35e7fdacb5 Disable context menu on devices with touch support by default 2024-06-09 11:48:12 +07:00
504f16b802 Rename "hasTouchSupport" to "userAgentHasTouchSupport" 2024-06-09 11:47:08 +07:00
a3a7a57b51 Get PointerServer's port from the app 2024-06-09 11:41:00 +07:00
103 changed files with 12179 additions and 10610 deletions

View File

@ -1,6 +1,7 @@
MIT License MIT License
Copyright (c) 2023 redphx Copyright (c) 2023 redphx
Copyright (c) 2023 Advanced Micro Devices, Inc.
Copyright (c) 2020 Phosphor Icons Copyright (c) 2020 Phosphor Icons
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy

View File

@ -5,7 +5,9 @@ Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbo
> The Android app is in development at [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android) > The Android app is in development at [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
> [!IMPORTANT] > [!IMPORTANT]
> I don't accept pull requests at the moment (except PR for custom touch controls) > I only accept pull requests for:
> - Custom touch controls
> - Bug fixes
**Supported platforms:** **Supported platforms:**
- Windows - Windows
@ -21,50 +23,15 @@ If you like this project please give it a 🌟. Thank you 🙏.
[![Total downloads](https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c)](https://github.com/redphx/better-xcloud/releases) [![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) [![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)
## How to install
Visit the [home page](https://better-xcloud.github.io) to know how to install Better xCloud on your device.
## Full documentations ## Full documentations
- For the full details please visit: https://better-xcloud.github.io - For the full details please visit: [**better-xcloud.github.io**](https://better-xcloud.github.io)
- [Demo video](https://youtu.be/hyp69Jrb2sQ) - [Demo video](https://youtu.be/hyp69Jrb2sQ)
⚠️ Please DO NOT report **Better xCloud**'s bugs on [/r/xcloud subreddit](https://reddit.com/r/xcloud/). Report bugs in [Issues](https://github.com/redphx/better-xcloud/issues) or [Telegram channel](https://t.me/betterxcloud) instead. ⚠️ Please DO NOT report **Better xCloud**'s bugs on [/r/xcloud subreddit](https://reddit.com/r/xcloud/). Report bugs in [Issues](https://github.com/redphx/better-xcloud/issues) or [Telegram channel](https://t.me/betterxcloud) instead.
## Table of Contents
- [**How to install**](#how-to-install)
- [**Features**](#features)
- [**Donation**](#donation)
- [**Acknowledgements**](#acknowledgements)
- [**Disclaimers**](#disclaimers)
## How to install
Visit [this page](https://better-xcloud.github.io/browsers) to know how to install Better xCloud on your device.
## Features
<img width="400" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/4bec2d62-31df-499c-9aad-2485626b6925">
<br>
<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="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">
<br>
<img width="600" alt="Remapper" src="https://github.com/redphx/better-xcloud/assets/96280/f2e2bc51-f673-4b24-b127-c7169b86462b">
&nbsp;
**Demo video:** [https://youtu.be/oDr5Eddp55E ](https://youtu.be/AYb-EUcz72U)
- **🔥 Totally free and open-source**
- **🔥 Allow playing with [Mouse & Keyboard](https://better-xcloud.github.io/mouse-and-keyboard)**
- **🔥 Enable [Remote Play](https://better-xcloud.github.io/remote-play) support**
> 1080p resolution and can stream Xbox 360 games.
- **🔥 [Improve visual quality](https://better-xcloud.github.io/ingame-features/#improve-streams-clarity) 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](https://better-xcloud.github.io/stream-stats)**
- **🔥 [Screenshot capture](https://better-xcloud.github.io/screenshot-capture)**
- **🔥 [Touch controller](https://better-xcloud.github.io/features/#touch-controller)**
> Enable touch controller support for all games.
- [And more...](https://better-xcloud.github.io/features/)
## Donation ## Donation
If you think this project is useful and want to support future developments, please consider making a donate via [my Ko-fi page](https://ko-fi.com/redphx). If you think this project is useful and want to support future developments, please consider making a donate via [my Ko-fi page](https://ko-fi.com/redphx).
Or you can give this project a star, that's also helpful. Or you can give this project a star, that's also helpful.

123
build.ts
View File

@ -4,12 +4,13 @@ import { parseArgs } from "node:util";
import { sys } from "typescript"; import { sys } from "typescript";
import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" }; import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" }; import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
import { assert } from "node:console";
enum BuildTarget { enum BuildTarget {
ALL = 'all', ALL = 'all',
ANDROID_APP = 'android-app', ANDROID_APP = 'android-app',
MOBILE = 'mobile', MOBILE = 'mobile',
WEBOS = 'webos', WEBOS = 'webos',
} }
const postProcess = (str: string): string => { const postProcess = (str: string): string => {
@ -21,83 +22,97 @@ const postProcess = (str: string): string => {
// Replace "globalThis." with "var"; // Replace "globalThis." with "var";
str = str.replaceAll('globalThis.', 'var '); str = str.replaceAll('globalThis.', 'var ');
// Add ADDITIONAL CODE block // Remove enum's inlining comments
str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS'); str = str.replaceAll(/ \/\* [A-Z0-9_]+ \*\//g, '');
// Remove comments from import
str = str.replaceAll(/\/\/ src.*\n/g, '');
// Add ADDITIONAL CODE block
str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
assert(str.includes('/* ADDITIONAL CODE */'));
assert(str.includes('window.BX_EXPOSED = BxExposed'));
assert(str.includes('window.BxEvent = BxEvent'));
assert(str.includes('window.BX_FETCH = window.fetch'));
return str; return str;
} }
const build = async (target: BuildTarget, version: string, config: any={}) => { const build = async (target: BuildTarget, version: string, config: any={}) => {
console.log('-- Target:', target); console.log('-- Target:', target);
const startTime = performance.now(); const startTime = performance.now();
let outputScriptName = 'better-xcloud'; let outputScriptName = 'better-xcloud';
if (target !== BuildTarget.ALL) { if (target !== BuildTarget.ALL) {
outputScriptName += `.${target}`; outputScriptName += `.${target}`;
} }
let outputMetaName = outputScriptName; let outputMetaName = outputScriptName;
outputScriptName += '.user.js'; outputScriptName += '.user.js';
outputMetaName += '.meta.js'; outputMetaName += '.meta.js';
const outDir = './dist'; const outDir = './dist';
let output = await Bun.build({ let output = await Bun.build({
entrypoints: ['src/index.ts'], entrypoints: ['src/index.ts'],
outdir: outDir, outdir: outDir,
naming: outputScriptName, naming: outputScriptName,
define: { minify: {
'Bun.env.BUILD_TARGET': JSON.stringify(target), syntax: true,
'Bun.env.SCRIPT_VERSION': JSON.stringify(version), },
}, define: {
}); 'Bun.env.BUILD_TARGET': JSON.stringify(target),
'Bun.env.SCRIPT_VERSION': JSON.stringify(version),
},
});
if (!output.success) { if (!output.success) {
console.log(output); console.log(output);
process.exit(1); process.exit(1);
} }
const {path} = output.outputs[0]; const {path} = output.outputs[0];
// Get generated file // Get generated file
let result = postProcess(await readFile(path, 'utf-8')); let result = postProcess(await readFile(path, 'utf-8'));
// Replace [[VERSION]] with real value // Replace [[VERSION]] with real value
const scriptHeader = txtScriptHeader.replace('[[VERSION]]', version); const scriptHeader = txtScriptHeader.replace('[[VERSION]]', version);
// Save to script // Save to script
await Bun.write(path, scriptHeader + result); await Bun.write(path, scriptHeader + result);
console.log(`---- [${target}] done in ${performance.now() - startTime} ms`); console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
// Create meta file // Create meta file
await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version)); await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
} }
const buildTargets = [ const buildTargets = [
BuildTarget.ALL, BuildTarget.ALL,
// BuildTarget.ANDROID_APP, // BuildTarget.ANDROID_APP,
// BuildTarget.MOBILE, // BuildTarget.MOBILE,
// BuildTarget.WEBOS, // BuildTarget.WEBOS,
]; ];
const { values, positionals } = parseArgs({ const { values, positionals } = parseArgs({
args: Bun.argv, args: Bun.argv,
options: { options: {
version: { version: {
type: 'string', type: 'string',
}, },
}, },
strict: true, strict: true,
allowPositionals: true, allowPositionals: true,
}); });
if (!values['version']) { if (!values['version']) {
console.log('Missing --version param'); console.log('Missing --version param');
sys.exit(-1); sys.exit(-1);
} }
console.log('Building: ', values['version']); console.log('Building: ', values['version']);
const config = {}; const config = {};
for (const target of buildTargets) { for (const target of buildTargets) {
await build(target, values['version'], config); await build(target, values['version']!!, config);
} }

BIN
bun.lockb Executable file

Binary file not shown.

View File

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

File diff suppressed because one or more lines are too long

View File

@ -6,12 +6,12 @@
"build": "build.ts" "build": "build.ts"
}, },
"devDependencies": { "devDependencies": {
"@types/bun": "^1.1.3", "@types/bun": "^1.1.6",
"@types/node": "^20.13.0", "@types/node": "^20.14.12",
"@types/stylus": "^0.48.42", "@types/stylus": "^0.48.42",
"stylus": "^0.63.0" "stylus": "^0.63.0"
}, },
"peerDependencies": { "peerDependencies": {
"typescript": "^5.4.5" "typescript": "^5.5.2"
} }
} }

View File

@ -1,5 +1,10 @@
.bx-button { .bx-button {
background-color: var(--bx-default-button-color); --button-rgb: var(--bx-default-button-rgb);
--button-hover-rgb: var(--bx-default-button-hover-rgb);
--button-active-rgb: var(--bx-default-button-active-rgb);
--button-disabled-rgb: var(--bx-default-button-disabled-rgb);
background-color: unquote('rgb(var(--button-rgb))');
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
color: #fff; color: #fff;
@ -14,63 +19,101 @@
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
&:not([disabled]):active {
background-color: unquote('rgb(var(--button-active-rgb))');
}
&:focus { &:focus {
outline: none !important; outline: none !important;
} }
&:hover, &.bx-focusable:focus { &:not([disabled]):not(:active) {
background-color: var(--bx-default-button-hover-color); &:hover, &.bx-focusable:focus {
background-color: unquote('rgb(var(--button-hover-rgb))');
}
} }
&:disabled { &:disabled {
cursor: default; cursor: default;
background-color: var(--bx-default-button-disabled-color); background-color: unquote('rgb(var(--button-disabled-rgb))');
} }
&.bx-ghost { &.bx-ghost {
background-color: transparent; background-color: transparent;
&:hover, &.bx-focusable:focus { &:not([disabled]):not(:active) {
background-color: var(--bx-default-button-hover-color); &:hover, &.bx-focusable:focus {
background-color: unquote('rgb(var(--button-hover-rgb))');
}
} }
} }
&.bx-primary { &.bx-primary {
background-color: var(--bx-primary-button-color); --button-rgb: var(--bx-primary-button-rgb);
&:hover, &.bx-focusable:focus { &:not([disabled]):active {
background-color: var(--bx-primary-button-hover-color); --button-active-rgb: var(--bx-primary-button-active-rgb);
}
&:not([disabled]):not(:active) {
&:hover, &.bx-focusable:focus {
--button-hover-rgb: var(--bx-primary-button-hover-rgb);
}
} }
&:disabled { &:disabled {
background-color: var(--bx-primary-button-disabled-color); --button-disabled-rgb: var(--bx-primary-button-disabled-rgb);
} }
} }
&.bx-danger { &.bx-danger {
background-color: var(--bx-danger-button-color); --button-rgb: var(--bx-danger-button-rgb);
&:hover, &.bx-focusable:focus { &:not([disabled]):active {
background-color: var(--bx-danger-button-hover-color); --button-active-rgb: var(--bx-danger-button-active-rgb);
}
&:not([disabled]):not(:active) {
&:hover, &.bx-focusable:focus {
--button-hover-rgb: var(--bx-danger-button-hover-rgb);
}
} }
&:disabled { &:disabled {
background-color: var(--bx-danger-button-disabled-color); --button-disabled-rgb: var(--bx-danger-button-disabled-rgb);
} }
} }
&.bx-frosted {
--button-alpha: 0.2;
background-color: unquote('rgba(var(--button-rgb), var(--button-alpha))');
backdrop-filter: blur(4px) brightness(1.5);
&:not([disabled]):not(:active) {
&:hover, &.bx-focusable:focus {
background-color: unquote('rgba(var(--button-hover-rgb), var(--button-alpha))');
}
}
}
&.bx-drop-shadow {
box-shadow: 0 0 4px #00000080;
}
&.bx-tall { &.bx-tall {
height: calc(var(--bx-button-height) * 1.5) !important; height: calc(var(--bx-button-height) * 1.5) !important;
} }
&.bx-circular {
border-radius: var(--bx-button-height);
height: var(--bx-button-height);
}
svg { svg {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: var(--bx-button-height); height: var(--bx-button-height);
&:not(:only-child) {
margin-right: 4px;
}
} }
span { span {
@ -82,24 +125,37 @@
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
&:not(:only-child) {
margin-left: 10px;
}
}
}
.bx-focusable {
position: relative;
overflow: visible;
&::after {
border: 2px solid transparent;
border-radius: 10px;
} }
&.bx-focusable { &:focus-visible::after {
position: relative; offset = -6px;
content: '';
border-color: white;
position: absolute;
top: offset;
left: offset;
right: offset;
bottom: offset;
}
&.bx-circular {
&::after { &::after {
border: 2px solid transparent; border-radius: var(--bx-button-height);
border-radius: 4px;
}
&:focus::after {
content: '';
border-color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
} }
} }
@ -111,3 +167,21 @@ a.bx-button {
text-align: center; text-align: center;
} }
} }
button.bx-inactive {
pointer-events: none;
opacity: 0.2;
background: transparent !important;
}
.bx-button-shortcut {
max-width: max-content;
margin: 10px 0 0 0;
overflow: hidden;
}
@media (min-width: 568px) and (max-height: 480px) {
.bx-button-shortcut {
margin: 8px 0 0 10px;
}
}

View File

@ -1,183 +0,0 @@
.bx-settings-reload-button {
margin-top: 10px;
}
.bx-settings-container {
background-color: #151515;
user-select: none;
-webkit-user-select: none;
color: #fff;
font-family: var(--bx-normal-font);
}
@media (hover: hover) {
.bx-settings-wrapper a.bx-settings-title:hover {
color: #83f73a;
}
}
.bx-settings-wrapper {
width: 450px;
margin: auto;
padding: 12px 6px;
@media screen and (max-width: 450px) {
width: 100%;
}
*:focus {
outline: none !important;
}
.bx-settings-title-wrapper {
display: flex;
margin-bottom: 10px;
align-items: center;
}
a.bx-settings-title {
font-family: var(--bx-title-font);
font-size: 1.4rem;
text-decoration: none;
font-weight: bold;
display: block;
color: #5dc21e;
flex: 1;
&:focus {
color: #83f73a;
}
}
.bx-button.bx-primary {
margin-top: 8px;
}
a.bx-settings-update {
display: block;
color: #ff834b;
text-decoration: none;
margin-bottom: 8px;
text-align: center;
background: #222;
border-radius: 4px;
padding: 4px;
&:hover {
@media (hover: hover) {
color: #ff9869;
text-decoration: underline;
}
}
&:focus {
color: #ff9869;
text-decoration: underline;
}
}
}
.bx-settings-group-label {
font-weight: bold;
display: block;
font-size: 1.1rem;
}
.bx-settings-row {
display: flex;
padding: 6px 12px;
position: relative;
label {
flex: 1;
align-self: center;
margin-bottom: 0;
}
&:hover, &:focus-within {
background-color: #242424;
}
input {
align-self: center;
accent-color: var(--bx-primary-button-color);
&:focus {
accent-color: var(--bx-danger-button-color);
}
}
select {
&:disabled {
-webkit-appearance: none;
background: transparent;
text-align-last: right;
border: none;
color: #fff;
}
}
input[type=checkbox], select {
&:focus {
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
}
&:has(input:focus), &:has(select:focus) {
&::before {
content: ' ';
border-radius: 4px;
border: 2px solid #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
}
}
.bx-settings-group-label b, .bx-settings-row label b {
display: block;
font-size: 12px;
font-style: italic;
font-weight: normal;
color: #828282;
}
.bx-settings-group-label b {
margin-bottom: 8px;
}
.bx-settings-app-version {
margin-top: 10px;
text-align: center;
color: #747474;
font-size: 12px;
}
.bx-donation-link {
display: block;
text-align: center;
text-decoration: none;
height: 20px;
line-height: 20px;
font-size: 14px;
margin-top: 10px;
color: #5dc21e;
&:hover {
color: #6dd72b;
}
&:focus {
text-decoration: underline;
}
}
.bx-settings-custom-user-agent {
display: block;
width: 100%;
}

View File

@ -4,7 +4,7 @@
svg { svg {
width: 24px; width: 24px;
height: 46px; height: 24px;
} }
} }

View File

@ -0,0 +1,18 @@
.bx-navigation-dialog {
position: absolute;
z-index: var(--bx-navigation-dialog-z-index);
}
.bx-navigation-dialog-overlay {
position: fixed;
background: #0b0b0be3;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--bx-navigation-dialog-overlay-z-index);
&[data-is-playing="true"] {
background: transparent;
}
}

View File

@ -5,14 +5,15 @@
display: inline-block; display: inline-block;
min-width: 40px; min-width: 40px;
font-family: var(--bx-monospaced-font); font-family: var(--bx-monospaced-font);
font-size: 14px; font-size: 12px;
margin: 0 4px;
} }
button { button {
border: none; border: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 4px; margin: 0;
line-height: 24px; line-height: 24px;
background-color: var(--bx-default-button-color); background-color: var(--bx-default-button-color);
color: #fff; color: #fff;
@ -20,7 +21,6 @@
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
font-family: var(--bx-monospaced-font); font-family: var(--bx-monospaced-font);
color: #fff;
&:hover { &:hover {
@media (hover: hover) { @media (hover: hover) {
@ -47,4 +47,10 @@
input[type=range]:disabled, button:disabled { input[type=range]:disabled, button:disabled {
display: none; display: none;
} }
&[data-disabled=true] {
input[type=range], button {
display: none;
}
}
} }

View File

@ -1,3 +1,18 @@
button_color(name, normal, hover, active, disabled)
prefix = unquote('--bx-' + name + '-button');
{prefix + '-color'}: normal;
{prefix + '-rgb'}: red(normal), green(normal), blue(normal);
{prefix + '-hover-color'}: hover;
{prefix + '-hover-rgb'}: red(hover), green(hover), blue(hover);
{prefix + '-active-color'}: active;
{prefix + '-active-rgb'}: red(active), green(active), blue(active);
{prefix + '-disabled-color'}: disabled;
{prefix + '-disabled-rgb'}: red(disabled), green(disabled), blue(disabled);
:root { :root {
--bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif; --bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif;
--bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif; --bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif;
@ -5,28 +20,24 @@
--bx-monospaced-font: Consolas, "Courier New", Courier, monospace; --bx-monospaced-font: Consolas, "Courier New", Courier, monospace;
--bx-promptfont-font: promptfont; --bx-promptfont-font: promptfont;
--bx-button-height: 36px; --bx-button-height: 40px;
--bx-default-button-color: #2d3036; button_color('default', #2d3036, #515863, #222428, #8e8e8e);
--bx-default-button-hover-color: #515863; button_color('primary', #008746, #04b358, #044e2a, #448262);
--bx-default-button-disabled-color: #8e8e8e; button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
--bx-primary-button-color: #008746;
--bx-primary-button-hover-color: #04b358;
--bx-primary-button-disabled-color: #448262;
--bx-danger-button-color: #c10404;
--bx-danger-button-hover-color: #e61d1d;
--bx-danger-button-disabled-color: #a26c6c;
--bx-toast-z-index: 9999; --bx-toast-z-index: 9999;
--bx-dialog-z-index: 9101; --bx-dialog-z-index: 9101;
--bx-dialog-overlay-z-index: 9100; --bx-dialog-overlay-z-index: 9100;
--bx-remote-play-popup-z-index: 9090; --bx-stats-bar-z-index: 9010;
--bx-stats-bar-z-index: 9001; --bx-mkb-pointer-lock-msg-z-index: 9000;
--bx-stream-settings-z-index: 9000;
--bx-mkb-pointer-lock-msg-z-index: 8999; --bx-navigation-dialog-z-index: 8999;
--bx-game-bar-z-index: 8888; --bx-navigation-dialog-overlay-z-index: 8998;
--bx-remote-play-popup-z-index: 2000;
--bx-game-bar-z-index: 1000;
--bx-wait-time-box-z-index: 100; --bx-wait-time-box-z-index: 100;
--bx-screenshot-animation-z-index: 1; --bx-screenshot-animation-z-index: 1;
} }
@ -64,6 +75,14 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
overflow: hidden !important; overflow: hidden !important;
} }
.bx-hide-scroll-bar {
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.bx-gone { .bx-gone {
display: none !important; display: none !important;
} }
@ -79,6 +98,19 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
visibility: hidden !important; visibility: hidden !important;
} }
.bx-invisible {
opacity: 0;
}
.bx-unclickable {
pointer-events: none;
}
.bx-pixel {
width: 1px !important;
height: 1px !important;
}
.bx-no-margin { .bx-no-margin {
margin: 0 !important; margin: 0 !important;
} }
@ -91,6 +123,18 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
font-family: var(--bx-promptfont-font); font-family: var(--bx-promptfont-font);
} }
.bx-line-through {
text-decoration: line-through !important;
}
.bx-normal-case {
text-transform: none !important;
}
select[multiple] {
overflow: auto;
}
/* Hide UI elements */ /* Hide UI elements */
#headerArea, #uhfSkipToMain, .uhf-footer { #headerArea, #uhfSkipToMain, .uhf-footer {
display: none; display: none;
@ -107,3 +151,42 @@ div[class*=NotFocusedDialog] {
#game-stream video:not([src]) { #game-stream video:not([src]) {
visibility: hidden; visibility: hidden;
} }
/* Hide Controller icon in Game tiles */
div[class*=SupportedInputsBadge] {
&:not(:has(:nth-child(2))), svg:first-of-type {
display: none;
}
}
.bx-game-tile-wait-time {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: #0000008c;
display: none;
border-radius: 0 0 4px 0;
align-items: center;
padding: 4px 8px;
a[class^=BaseItem-module__container]:focus &,
button[class^=BaseItem-module__container]:focus & {
display: flex;
}
svg {
width: 14px;
height: 16px;
margin-right: 2px;
}
span {
display: inline-block;
height: 16px;
line-height: 16px;
font-size: 12px;
font-weight: bold;
}
}

View File

@ -0,0 +1,381 @@
.bx-settings-dialog {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
opacity: 0.98;
user-select: none;
-webkit-user-select: none;
.bx-focusable {
&::after {
border-radius: 4px;
}
&:focus::after {
offset = 0;
top: offset;
left: offset;
right: offset;
bottom: offset;
}
}
.bx-settings-reload-note {
font-size: 0.8rem;
display: block;
padding: 8px;
font-style: italic;
font-weight: normal;
height: var(--bx-button-height);
}
}
.bx-settings-tabs-container {
position: fixed;
width: 48px;
max-height: 100vh;
display: flex;
flex-direction: column;
> div:last-of-type {
display: flex;
flex-direction: column;
align-items: end;
button {
flex-shrink: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-top: 8px;
height: unset;
padding: 8px 10px;
svg {
size = 16px;
width: size;
height: size;
}
}
}
}
.bx-settings-tabs {
display: flex;
flex-direction: column;
border-radius: 0 0 0 8px;
box-shadow: 0 0 6px #000;
overflow: overlay;
flex: 1;
svg {
size = 24px;
width: size;
height: size;
padding: 10px;
flex-shrink: 0;
box-sizing: content-box;
background: #131313;
cursor: pointer;
border-left: 4px solid #1e1e1e;
&.bx-active {
background: #222;
border-color: #008746;
}
&:not(.bx-active):hover {
background: #2f2f2f;
border-color: #484848;
}
&:focus {
border-color: #fff;
outline: none;
}
&[data-group=global] {
&[data-need-refresh=true] {
background: var(--bx-danger-button-color) !important;
&:hover {
background: var(--bx-danger-button-hover-color) !important;
}
}
}
}
}
.bx-settings-tab-contents {
tabsWidth = 48px;
flex-direction: column;
padding: 10px;
margin-left: tabsWidth;
width: 450px;
max-width: calc(100vw - tabsWidth);
background: #1a1b1e;
color: #fff;
font-weight: 400;
font-size: 16px;
font-family: var(--bx-title-font);
text-align: center;
box-shadow: 0px 0px 6px #000;
overflow: overlay;
z-index: 1;
> div[data-tab-group=mkb] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
> div[data-tab-group=shortcuts] {
> div {
&[data-has-gamepad=true] {
> div:first-of-type {
display: none;
}
> div:last-of-type {
display: block;
}
}
&[data-has-gamepad=false] {
> div:first-of-type {
display: block;
}
> div:last-of-type {
display: none;
}
}
}
.bx-shortcut-profile {
width: 100%;
height: 36px;
display: block;
}
.bx-shortcut-note {
margin-top: 10px;
font-size: 14px;
}
.bx-shortcut-row {
display: flex;
margin-bottom: 10px;
label.bx-prompt {
flex: 1;
font-size: 26px;
margin-bottom: 0;
}
.bx-shortcut-actions {
flex: 2;
position: relative;
select {
position: absolute;
width: 100%;
height: 100%;
display: block;
&:last-of-type {
opacity: 0;
z-index: calc(var(--bx-settings-z-index) + 1);
}
}
}
}
}
&:focus,
*:focus {
outline: none !important;
}
.bx-top-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 8px;
.bx-button {
display: block;
}
}
h2 {
margin: 16px 0 8px 0;
display: flex;
align-items: center;
&:first-of-type {
margin-top: 0;
}
span {
display: inline-block;
font-size: 20px;
font-weight: bold;
text-align: left;
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
@media (max-width: 500px) {
.bx-settings-tab-contents {
width: calc(100vw - 48px);
}
}
.bx-settings-row {
display: flex;
gap: 10px;
border-bottom: 1px solid #2c2c2e;
padding: 16px 8px;
margin: 0;
border-left: 2px solid transparent;
&:hover, &:focus-within {
background-color: #242424;
}
&:not(:has(> input[type=checkbox])) {
flex-wrap: wrap;
}
input[type=checkbox],
select {
&:focus {
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
}
&:has(input:focus), &:has(select:focus), &:has(button:focus) {
border-left-color: white;
}
> span.bx-settings-label {
font-size: 14px;
display: block;
text-align: left;
align-self: center;
margin-bottom: 0 !important;
+ * {
margin: 0 0 0 auto;
}
}
input {
accent-color: var(--bx-primary-button-color);
&:focus {
accent-color: var(--bx-danger-button-color);
}
}
select:disabled {
-webkit-appearance: none;
background: transparent;
text-align-last: right;
border: none;
color: #fff;
}
select option:disabled {
display: none;
}
}
.bx-settings-dialog-note {
display: block;
color: #afafb0;
font-size: 12px;
font-weight: lighter;
font-style: italic;
&:not(:has(a)) {
margin-top: 4px;
}
a {
display: inline-block;
padding: 4px;
}
}
.bx-settings-custom-user-agent {
display: block;
width: 100%;
padding: 6px;
}
.bx-donation-link {
display: block;
text-align: center;
text-decoration: none;
height: 20px;
line-height: 20px;
font-size: 14px;
margin-top: 10px;
color: #5dc21e;
&:hover {
color: #6dd72b;
}
&:focus {
text-decoration: underline;
}
}
.bx-debug-info {
button {
margin-top: 10px;
}
pre {
margin-top: 10px;
cursor: copy;
color: white;
padding: 8px;
border: 1px solid #2d2d2d;
background: #212121;
white-space: break-spaces;
text-align: left;
&:hover {
background: #272727;
}
}
}
.bx-settings-app-version {
margin-top: 10px;
text-align: center;
color: #747474;
font-size: 12px;
}
.bx-note-unsupported {
display: block;
font-size: 12px;
font-style: italic;
font-weight: normal;
color: #828282;
}

View File

@ -1,189 +0,0 @@
.bx-stream-settings-dialog {
display: flex;
position: fixed;
z-index: var(--bx-stream-settings-z-index);
opacity: 0.98;
user-select: none;
-webkit-user-select: none;
}
.bx-stream-settings-tabs {
position: fixed;
top: 0;
right: 420px;
display: flex;
flex-direction: column;
border-radius: 0 0 0 8px;
box-shadow: 0px 0px 6px #000;
overflow: clip;
svg {
width: 32px;
height: 32px;
padding: 10px;
box-sizing: content-box;
background: #131313;
cursor: pointer;
border-left: 4px solid #1e1e1e;
&.bx-active {
background: #222;
border-color: #008746;
}
&:not(.bx-active):hover {
background: #2f2f2f;
border-color: #484848;
}
}
}
.bx-stream-settings-tab-contents {
flex-direction: column;
position: fixed;
right: 0;
top: 0;
bottom: 0;
padding: 14px 14px 0;
width: 420px;
background: #1a1b1e;
color: #fff;
font-weight: 400;
font-size: 16px;
font-family: var(--bx-title-font);
text-align: center;
box-shadow: 0px 0px 6px #000;
overflow: overlay;
> div[data-group=mkb] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
*:focus {
outline: none !important;
}
h2 {
margin-bottom: 8px;
display: flex;
align-item: center;
span {
display: inline-block;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
text-align: left;
flex: 1;
height: var(--bx-button-height);
line-height: calc(var(--bx-button-height) + 4px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.bx-stream-settings-row {
display: flex;
border-bottom: 1px solid #40404080;
margin-bottom: 16px;
padding-bottom: 16px;
label {
font-size: 16px;
display: block;
text-align: left;
flex: 1;
align-self: center;
margin-bottom: 0 !important;
}
input {
accent-color: var(--bx-primary-button-color);
}
select:disabled {
-webkit-appearance: none;
background: transparent;
text-align-last: right;
border: none;
}
}
.bx-stream-settings-dialog-note {
display: block;
font-size: 12px;
font-weight: lighter;
font-style: italic;
}
.bx-stream-settings-tab-contents {
div[data-group="shortcuts"] {
> div {
&[data-has-gamepad=true] {
> div:first-of-type {
display: none;
}
> div:last-of-type {
display: block;
}
}
&[data-has-gamepad=false] {
> div:first-of-type {
display: block;
}
> div:last-of-type {
display: none;
}
}
}
.bx-shortcut-profile {
width: 100%;
height: 36px;
display: block;
margin-bottom: 10px;
}
.bx-shortcut-note {
font-size: 14px;
}
.bx-shortcut-row {
display: flex;
margin-bottom: 10px;
label.bx-prompt {
flex: 1;
font-size: 26px;
margin-bottom: 0;
}
.bx-shortcut-actions {
flex: 2;
position: relative;
select {
position: absolute;
width: 100%;
height: 100%;
display: block;
&:last-of-type {
opacity: 0;
z-index: calc(var(--bx-stream-settings-z-index) + 1);
}
}
}
}
}
}

View File

@ -16,7 +16,6 @@
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
box-shadow: 0px 0px 6px #000; box-shadow: 0px 0px 6px #000;
border-radius: 4px; border-radius: 4px;
height: 30px;
} }
.bx-badge-name { .bx-badge-name {

View File

@ -66,6 +66,14 @@ div[data-testid=media-container] {
background: #000; background: #000;
} }
#game-stream canvas {
position: absolute;
align-self: center;
margin: auto;
left: 0;
right: 0;
}
#gamepass-dialog-root div[class^=Guide-module__guide] { #gamepass-dialog-root div[class^=Guide-module__guide] {
.bx-button { .bx-button {
overflow: visible; overflow: visible;

View File

@ -2,15 +2,16 @@
@import 'button.styl'; @import 'button.styl';
@import 'header.styl'; @import 'header.styl';
@import 'global-settings.styl';
@import 'dialog.styl'; @import 'dialog.styl';
@import 'navigation-dialog.styl';
@import 'settings-dialog.styl';
@import 'toast.styl'; @import 'toast.styl';
@import 'loading-screen.styl'; @import 'loading-screen.styl';
@import 'remote-play.styl'; @import 'remote-play.styl';
@import 'web-components.styl';
@import 'stream.styl'; @import 'stream.styl';
@import 'number-stepper.styl'; @import 'number-stepper.styl';
@import 'game-bar.styl'; @import 'game-bar.styl';
@import 'stream-stats.styl'; @import 'stream-stats.styl';
@import 'stream-settings.styl';
@import 'mkb.styl'; @import 'mkb.styl';

View File

@ -0,0 +1,94 @@
.bx-select {
display: flex;
align-items: center;
flex: 0 1 auto;
select {
display: none !important;
}
> div, button.bx-select-value {
min-width: 110px;
text-align: center;
margin: 0 8px;
line-height: 24px;
vertical-align: middle;
background: #fff;
color: #000;
border-radius: 4px;
padding: 2px 8px;
flex: 1;
}
> div {
display: inline-block;
input {
display: inline-block;
margin-right: 8px;
}
label {
margin-bottom: 0;
font-size: 14px;
width: 100%;
span {
display: block;
font-size: 10px;
font-weight: bold;
text-align: left;
line-height: initial;
}
}
}
button.bx-select-value {
border: none;
display: inline-flex;
cursor: pointer;
min-height: 30px;
font-size: 0.9rem;
align-items: center;
span {
flex: 1;
text-align: center;
display: inline-block;
}
input {
margin: 0 4px;
accent-color: var(--bx-primary-button-color);
}
&:hover,
&:focus {
input {
accent-color: var(--bx-danger-button-color);
}
&::after {
border-color: #4d4d4d !important;
}
}
}
button.bx-button {
border: none;
height: 24px;
width: 24px;
padding: 0;
line-height: 24px;
color: #fff;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
font-family: var(--bx-monospaced-font);
flex-shrink: 0;
span {
line-height: unset;
}
}
}

View File

@ -12,4 +12,4 @@
// @updateURL https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js // @updateURL https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js
// @downloadURL 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== // ==/UserScript==
'use strict'; "use strict";

View File

@ -0,0 +1,4 @@
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='2' stroke-width='2' viewBox='0 0 32 32'>
<path d='M16.001 7.236h-2.328c-.443 0-1.941-.851-2.357-.905-.824-.106-1.684 0-2.489.176a13.04 13.04 0 0 0-3.137 1.14c-.392.275-.677.668-.866 1.104v.03l-3.302 8.963-.015.015c-.288.867-.553 3.75-.5 4.279a4.89 4.89 0 0 0 1.022 2.55c.654.823 3.71 1.364 4.057 1.016l4.462-4.475c.185-.186 1.547-.706 2.01-.706h6.884c.463 0 1.825.52 2.01.706l4.462 4.475c.347.348 3.403-.193 4.057-1.016a4.89 4.89 0 0 0 1.022-2.55c.053-.529-.212-3.412-.5-4.279l-.015-.015-3.302-8.963v-.03c-.189-.436-.474-.829-.866-1.104a13.04 13.04 0 0 0-3.137-1.14c-.805-.176-1.665-.282-2.489-.176-.416.054-1.914.905-2.357.905h-2.328' fill='none' stroke='#fff'/>
<path d='M8.172 12.914H6.519c-.235 0-.315.267-.335.452l-.052.578c0 .193.033.384.054.576.023.202.091.511.355.511h1.631l-.001 1.652c0 .234.266.315.452.335l.578.052c.193 0 .384-.033.576-.054.203-.023.511-.091.511-.355V15.03l1.652.001c.234 0 .315-.266.335-.452l.052-.578c-.001-.193-.033-.385-.055-.577-.022-.202-.09-.51-.354-.51h-1.632v-1.652c0-.234-.266-.315-.453-.335l-.577-.052c-.193 0-.385.033-.577.054-.202.023-.51.091-.51.355v1.631m16.546 2.994h-3.487c-.206 0-.413-.043-.604-.121-.177-.072-.339-.183-.476-.316-.149-.144-.259-.315-.341-.504-.156-.361-.172-.788-.032-1.157a1.57 1.57 0 0 1 .459-.641c.106-.089.223-.164.349-.222a1.52 1.52 0 0 1 .423-.123c.167-.024.338-.02.504.012a1.83 1.83 0 0 1 .455-.482 1.62 1.62 0 0 1 .522-.252c.307-.089.651-.09.959-.003a1.75 1.75 0 0 1 1.009.764 1.83 1.83 0 0 1 .251.721c.156 0 .312.031.456.09a1.24 1.24 0 0 1 .372.248c.091.087.165.19.221.302a1.19 1.19 0 0 1-.173 1.299c-.119.132-.276.239-.441.305a1.17 1.17 0 0 1-.426.08z' fill='#fff' stroke='none'/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

4
src/assets/svg/close.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
<path d='M29.928,2.072L2.072,29.928'/>
<path d='M29.928,29.928L2.072,2.072'/>
</svg>

After

Width:  |  Height:  |  Size: 264 B

View File

@ -0,0 +1,4 @@
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
<path d='M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957'/>
<path d='M24.24 2.781v9.957'/>
</svg>

After

Width:  |  Height:  |  Size: 711 B

View File

@ -1,10 +1,10 @@
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'> <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
<g stroke-width="2.1"> <g stroke-width='2.1'>
<path d="m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21"/> <path d='m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21'/>
<path d="m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2"/> <path d='m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2'/>
</g> </g>
<g stroke-width="2.13"> <g stroke-width='2.13'>
<path d="m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z"/> <path d='m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z'/>
<path d="m23.705 14.715v-4.753"/> <path d='m23.705 14.715v-4.753'/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 619 B

View File

@ -1,11 +1,11 @@
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'> <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
<g stroke-width="2.06"> <g stroke-width='2.06'>
<path d="M8.417 13.218h4.124"/> <path d='M8.417 13.218h4.124'/>
<path d="M10.479 11.155v4.125"/> <path d='M10.479 11.155v4.125'/>
<path d="M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192"/> <path d='M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192'/>
</g> </g>
<g stroke-width="2.11"> <g stroke-width='2.11'>
<path d="M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z"/> <path d='M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z'/>
<path d="M23.7 14.724V9.966"/> <path d='M23.7 14.724V9.966'/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 680 B

After

Width:  |  Height:  |  Size: 680 B

View File

@ -0,0 +1,15 @@
import { t } from "@/utils/translation"
export const BypassServers = {
'br': t('brazil'),
'jp': t('japan'),
'pl': t('poland'),
'us': t('united-states'),
}
export const BypassServerIps = {
'br': '169.150.198.66',
'jp': '138.199.21.239',
'pl': '45.134.212.66',
'us': '143.244.47.65',
}

View File

@ -1,5 +1,6 @@
export enum GamePassCloudGallery { export enum GamePassCloudGallery {
ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c', ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
MOST_POPULAR = 'e7590b22-e299-44db-ae22-25c61405454c',
NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486', NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486',
TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059', TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
} }

View File

@ -1,5 +1,5 @@
import type { GamepadKeyNameType } from "@/types/mkb"; import type { GamepadKeyNameType } from "@/types/mkb";
import { PrompFont } from "@/utils/prompt-font"; import { PrompFont } from "@enums/prompt-font";
export enum GamepadKey { export enum GamepadKey {
A = 0, A = 0,

101
src/enums/pref-keys.ts Normal file
View File

@ -0,0 +1,101 @@
export enum StorageKey {
GLOBAL = 'better_xcloud',
}
export enum PrefKey {
LAST_UPDATE_CHECK = 'version_last_check',
LATEST_VERSION = 'version_latest',
CURRENT_VERSION = 'version_current',
BETTER_XCLOUD_LOCALE = 'bx_locale',
SERVER_REGION = 'server_region',
SERVER_BYPASS_RESTRICTION = 'server_bypass_restriction',
PREFER_IPV6_SERVER = 'prefer_ipv6_server',
STREAM_TARGET_RESOLUTION = 'stream_target_resolution',
STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
STREAM_CODEC_PROFILE = 'stream_codec_profile',
USER_AGENT_PROFILE = 'user_agent_profile',
STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
STREAM_COMBINE_SOURCES = 'stream_combine_sources',
STREAM_TOUCH_CONTROLLER = 'stream_touch_controller',
STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off',
STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity',
STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard',
STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom',
STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
BITRATE_VIDEO_MAX = 'bitrate_video_max',
GAME_BAR_POSITION = 'game_bar_position',
LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
// LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
CONTROLLER_SHOW_CONNECTION_STATUS = 'controller_show_connection_status',
NATIVE_MKB_ENABLED = 'native_mkb_enabled',
NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'native_mkb_scroll_y_sensitivity',
MKB_ENABLED = 'mkb_enabled',
MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
BLOCK_TRACKING = 'block_tracking',
BLOCK_SOCIAL_FEATURES = 'block_social_features',
SKIP_SPLASH_VIDEO = 'skip_splash_video',
HIDE_DOTS_ICON = 'hide_dots_icon',
REDUCE_ANIMATIONS = 'reduce_animations',
UI_LOADING_SCREEN_GAME_ART = 'ui_loading_screen_game_art',
UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
UI_CONTROLLER_FRIENDLY = 'ui_controller_friendly',
UI_LAYOUT = 'ui_layout',
UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
UI_HIDE_SECTIONS = 'ui_hide_sections',
UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
VIDEO_PLAYER_TYPE = 'video_player_type',
VIDEO_PROCESSING = 'video_processing',
VIDEO_POWER_PREFERENCE = 'video_power_preference',
VIDEO_SHARPNESS = 'video_sharpness',
VIDEO_RATIO = 'video_ratio',
VIDEO_BRIGHTNESS = 'video_brightness',
VIDEO_CONTRAST = 'video_contrast',
VIDEO_SATURATION = 'video_saturation',
AUDIO_MIC_ON_PLAYING = 'audio_mic_on_playing',
AUDIO_ENABLE_VOLUME_CONTROL = 'audio_enable_volume_control',
AUDIO_VOLUME = 'audio_volume',
STATS_ITEMS = 'stats_items',
STATS_SHOW_WHEN_PLAYING = 'stats_show_when_playing',
STATS_QUICK_GLANCE = 'stats_quick_glance',
STATS_POSITION = 'stats_position',
STATS_TEXT_SIZE = 'stats_text_size',
STATS_TRANSPARENT = 'stats_transparent',
STATS_OPACITY = 'stats_opacity',
STATS_CONDITIONAL_FORMATTING = 'stats_conditional_formatting',
REMOTE_PLAY_ENABLED = 'xhome_enabled',
REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
}

View File

@ -0,0 +1,9 @@
export enum StreamPlayerType {
VIDEO = 'default',
WEBGL2 = 'webgl2',
}
export enum StreamVideoProcessing {
USM = 'usm',
CAS = 'cas',
}

8
src/enums/ui-sections.ts Normal file
View File

@ -0,0 +1,8 @@
export enum UiSection {
ALL_GAMES = 'all-games',
FRIENDS = 'friends',
MOST_POPULAR = 'most-popular',
NATIVE_MKB = 'native-mkb',
NEWS = 'news',
TOUCH = 'touch',
}

9
src/enums/user-agent.ts Normal file
View File

@ -0,0 +1,9 @@
export enum UserAgentProfile {
WINDOWS_EDGE = 'windows-edge',
MACOS_SAFARI = 'macos-safari',
SMART_TV_GENERIC = 'smarttv-generic',
SMART_TV_TIZEN = 'smarttv-tizen',
VR_OCULUS = 'vr-oculus',
DEFAULT = 'default',
CUSTOM = 'custom',
}

View File

@ -9,14 +9,11 @@ import { showGamepadToast } from "@utils/gamepad";
import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler"; import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
import { StreamBadges } from "@modules/stream/stream-badges"; import { StreamBadges } from "@modules/stream/stream-badges";
import { StreamStats } from "@modules/stream/stream-stats"; import { StreamStats } from "@modules/stream/stream-stats";
import { addCss } from "@utils/css"; import { addCss, preloadFonts } from "@utils/css";
import { Toast } from "@utils/toast"; import { Toast } from "@utils/toast";
import { setupStreamUi, updateVideoPlayerCss } from "@modules/ui/ui";
import { PrefKey, getPref } from "@utils/preferences";
import { LoadingScreen } from "@modules/loading-screen"; import { LoadingScreen } from "@modules/loading-screen";
import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider"; import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
import { TouchController } from "@modules/touch-controller"; import { TouchController } from "@modules/touch-controller";
import { watchHeader } from "@modules/ui/header";
import { checkForUpdate, disablePwa } from "@utils/utils"; import { checkForUpdate, disablePwa } from "@utils/utils";
import { Patcher } from "@modules/patcher"; import { Patcher } from "@modules/patcher";
import { RemotePlay } from "@modules/remote-play"; import { RemotePlay } from "@modules/remote-play";
@ -31,17 +28,31 @@ import { GameBar } from "./modules/game-bar/game-bar";
import { Screenshot } from "./utils/screenshot"; import { Screenshot } from "./utils/screenshot";
import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler"; import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
import { GuideMenu, GuideMenuTab } from "./modules/ui/guide-menu"; import { GuideMenu, GuideMenuTab } from "./modules/ui/guide-menu";
import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
import { UiSection } from "./enums/ui-sections";
import { HeaderSection } from "./modules/ui/header";
import { GameTile } from "./modules/ui/game-tile";
import { ProductDetailsPage } from "./modules/ui/product-details";
import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
import { PrefKey } from "./enums/pref-keys";
import { getPref } from "./utils/settings-storages/global-settings-storage";
// Handle login page // Handle login page
if (window.location.pathname.includes('/auth/msa')) { if (window.location.pathname.includes('/auth/msa')) {
window.addEventListener('load', e => { const nativePushState = window.history['pushState'];
window.location.search.includes('loggedIn') && window.setTimeout(() => { window.history['pushState'] = function(...args: any[]) {
const location = window.location; const url = args[2];
// @ts-ignore if (url && (url.startsWith('/play') || url.substring(6).startsWith('/play'))) {
location.pathname.includes('/play') && location.reload(true); console.log('Redirecting to xbox.com/play');
}, 2000); window.stop();
}); window.location.href = 'https://www.xbox.com' + url;
return;
}
// @ts-ignore
return nativePushState.apply(this, arguments);
}
// Stop processing the script // Stop processing the script
throw new Error('[Better xCloud] Refreshing the page after logging in'); throw new Error('[Better xCloud] Refreshing the page after logging in');
} }
@ -82,8 +93,8 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
throw new Error('[Better xCloud] Executing workaround for Safari'); throw new Error('[Better xCloud] Executing workaround for Safari');
} }
// Automatically reload the page when running into the "We are sorry..." error message
window.addEventListener('load', e => { window.addEventListener('load', e => {
// Automatically reload the page when running into the "We are sorry..." error message
window.setTimeout(() => { window.setTimeout(() => {
if (document.body.classList.contains('legacyBackground')) { if (document.body.classList.contains('legacyBackground')) {
// Has error message -> reload page // Has error message -> reload page
@ -94,6 +105,31 @@ window.addEventListener('load', e => {
}, 3000); }, 3000);
}); });
document.addEventListener('readystatechange', e => {
if (document.readyState !== 'interactive') {
return;
}
STATES.isSignedIn = (window as any).xbcUser?.isSignedIn;
if (STATES.isSignedIn) {
// Preload Remote Play
getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
} else {
// Show Settings button in the header when not signed
HeaderSection.watchHeader();
}
// Hide "Play with Friends" skeleton section
if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
$parent && ($parent.style.display = 'none');
}
// Preload fonts
preloadFonts();
})
window.BX_EXPOSED = BxExposed; window.BX_EXPOSED = BxExposed;
// Hide Settings UI when navigate to another page // Hide Settings UI when navigate to another page
@ -105,13 +141,13 @@ window.addEventListener('popstate', onHistoryChanged);
window.history.pushState = patchHistoryMethod('pushState'); window.history.pushState = patchHistoryMethod('pushState');
window.history.replaceState = patchHistoryMethod('replaceState'); window.history.replaceState = patchHistoryMethod('replaceState');
window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
STATES.supportedRegion = false;
window.setTimeout(HeaderSection.watchHeader, 2000);
});
window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => { window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
// Start rendering UI HeaderSection.watchHeader();
if (document.querySelector('div[class^=UnsupportedMarketPage]')) {
window.setTimeout(watchHeader, 2000);
} else {
watchHeader();
}
}); });
window.addEventListener(BxEvent.STREAM_LOADING, e => { window.addEventListener(BxEvent.STREAM_LOADING, e => {
@ -126,9 +162,6 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
STATES.currentStream.titleId = 'remote-play'; STATES.currentStream.titleId = 'remote-play';
STATES.currentStream.productId = ''; STATES.currentStream.productId = '';
} }
// Setup UI
setupStreamUi();
}); });
// Setup loading screen // Setup loading screen
@ -146,9 +179,6 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
}); });
window.addEventListener(BxEvent.STREAM_PLAYING, e => { window.addEventListener(BxEvent.STREAM_PLAYING, e => {
const $video = (e as any).$video as HTMLVideoElement;
STATES.currentStream.$video = $video;
STATES.isPlaying = true; STATES.isPlaying = true;
injectStreamMenuButtons(); injectStreamMenuButtons();
@ -159,15 +189,23 @@ window.addEventListener(BxEvent.STREAM_PLAYING, e => {
gameBar.showBar(); gameBar.showBar();
} }
const $video = (e as any).$video as HTMLVideoElement;
Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight); Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
updateVideoPlayerCss(); updateVideoPlayer();
}); });
window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => { window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
BxEvent.dispatch(window, BxEvent.STREAM_STOPPED); BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
}); });
window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
const component = (e as any).component;
if (component === 'product-details') {
ProductDetailsPage.injectShortcutButton();
}
});
function unload() { function unload() {
if (!STATES.isPlaying) { if (!STATES.isPlaying) {
return; return;
@ -177,18 +215,15 @@ function unload() {
EmulatedMkbHandler.getInstance().destroy(); EmulatedMkbHandler.getInstance().destroy();
NativeMkbHandler.getInstance().destroy(); NativeMkbHandler.getInstance().destroy();
// Destroy StreamPlayer
STATES.currentStream.streamPlayer?.destroy();
STATES.isPlaying = false; STATES.isPlaying = false;
STATES.currentStream = {}; STATES.currentStream = {};
window.BX_EXPOSED.shouldShowSensorControls = false; window.BX_EXPOSED.shouldShowSensorControls = false;
window.BX_EXPOSED.stopTakRendering = false; window.BX_EXPOSED.stopTakRendering = false;
const $streamSettingsDialog = document.querySelector('.bx-stream-settings-dialog'); NavigationDialogManager.getInstance().hide();
if ($streamSettingsDialog) {
$streamSettingsDialog.classList.add('bx-gone');
}
STATES.currentStream.audioGainNode = null;
STATES.currentStream.$video = null;
StreamStats.getInstance().onStoppedPlaying(); StreamStats.getInstance().onStoppedPlaying();
MouseCursorHider.stop(); MouseCursorHider.stop();
@ -219,15 +254,18 @@ function observeRootDialog($root: HTMLElement) {
const $addedElm = mutation.addedNodes[0]; const $addedElm = mutation.addedNodes[0];
if ($addedElm instanceof HTMLElement && $addedElm.className) { if ($addedElm instanceof HTMLElement && $addedElm.className) {
if ($addedElm.className.startsWith('NavigationAnimation') || $addedElm.className.startsWith('DialogRoutes') || $addedElm.className.startsWith('Dialog-module__container')) { if ($addedElm.className.startsWith('NavigationAnimation') || $addedElm.className.startsWith('DialogRoutes') || $addedElm.className.startsWith('Dialog-module__container')) {
// Find navigation bar // Make sure it's Guide dialog
const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true'); if (document.querySelector('#gamepass-dialog-root div[class*=GuideDialog]')) {
if ($selectedTab) { // Find navigation bar
let $elm: Element | null = $selectedTab; const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true');
let index; if ($selectedTab) {
for (index = 0; ($elm = $elm?.previousElementSibling); index++); let $elm: Element | null = $selectedTab;
let index;
for (index = 0; ($elm = $elm?.previousElementSibling); index++);
if (index === 0) { if (index === 0) {
BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_MENU_SHOWN, {where: GuideMenuTab.HOME}); BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_MENU_SHOWN, {where: GuideMenuTab.HOME});
}
} }
} }
} }
@ -277,7 +315,7 @@ function main() {
getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext(); getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
getPref(PrefKey.BLOCK_TRACKING) && patchMeControl(); getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
STATES.hasTouchSupport && TouchController.updateCustomList(); STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
overridePreloadState(); overridePreloadState();
VibrationManager.initialSetup(); VibrationManager.initialSetup();
@ -289,7 +327,7 @@ function main() {
addCss(); addCss();
Toast.setup(); Toast.setup();
(getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance(); (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
BX_FLAGS.PreloadUi && setupStreamUi(); Screenshot.setup();
GuideMenu.observe(); GuideMenu.observe();
StreamBadges.setupEvents(); StreamBadges.setupEvents();
@ -301,8 +339,10 @@ function main() {
disablePwa(); disablePwa();
// Show a toast when connecting/disconecting controller // Show a toast when connecting/disconecting controller
window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad)); if (getPref(PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS)) {
window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad)); window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
}
// Preload Remote Play // Preload Remote Play
if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) { if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
@ -314,7 +354,13 @@ function main() {
} }
// Start PointerProviderServer // Start PointerProviderServer
(getPref(PrefKey.MKB_ENABLED)) && AppInterface && AppInterface.startPointerServer(); if (getPref(PrefKey.MKB_ENABLED) && AppInterface) {
STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
}
// Show wait time in game card
getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
} }
main(); main();

View File

@ -4,9 +4,15 @@ import cssStr from "@assets/css/styles.styl" with { type: "text" };
const generatedCss = await (stylus(cssStr, {}) const generatedCss = await (stylus(cssStr, {})
.set('filename', 'styles.css') .set('filename', 'styles.css')
.set('compress', true)
.include('src/assets/css/')) .include('src/assets/css/'))
.render(); .render();
export const renderStylus = () => { export const renderStylus = () => {
return generatedCss; return generatedCss;
}; };
export const compressCss = async (css: string) => {
return await (stylus(css, {}).set('compress', true)).render();
};

View File

@ -1,18 +1,24 @@
import { Screenshot } from "@utils/screenshot"; import { Screenshot } from "@utils/screenshot";
import { GamepadKey } from "./mkb/definitions"; import { GamepadKey } from "@enums/mkb";
import { PrompFont } from "@utils/prompt-font"; import { PrompFont } from "@enums/prompt-font";
import { CE } from "@utils/html"; import { CE } from "@utils/html";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { EmulatedMkbHandler } from "./mkb/mkb-handler"; import { EmulatedMkbHandler } from "./mkb/mkb-handler";
import { StreamStats } from "./stream/stream-stats"; import { StreamStats } from "./stream/stream-stats";
import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone"; import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui"; import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
import { PrefKey, getPref } from "@utils/preferences";
import { SoundShortcut } from "./shortcuts/shortcut-sound"; import { SoundShortcut } from "./shortcuts/shortcut-sound";
import { BxEvent } from "@/utils/bx-event"; import { BxEvent } from "@/utils/bx-event";
import { AppInterface } from "@/utils/global"; import { AppInterface } from "@/utils/global";
import { BxSelectElement } from "@/web-components/bx-select";
import { setNearby } from "@/utils/navigation-utils";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
import { SettingsNavigationDialog } from "./ui/dialog/settings-dialog";
const enum ShortcutAction {
BETTER_XCLOUD_SETTINGS_SHOW = 'bx-settings-show',
enum ShortcutAction {
STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture', STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
STREAM_MENU_SHOW = 'stream-menu-show', STREAM_MENU_SHOW = 'stream-menu-show',
@ -41,7 +47,7 @@ export class ControllerShortcut {
static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {}; static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
static #$container: HTMLElement; static #$container: HTMLElement;
static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} = {}; static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} | null = null;
static reset(index: number) { static reset(index: number) {
ControllerShortcut.#buttonsCache[index] = []; ControllerShortcut.#buttonsCache[index] = [];
@ -49,8 +55,12 @@ export class ControllerShortcut {
} }
static handle(gamepad: Gamepad): boolean { static handle(gamepad: Gamepad): boolean {
if (!ControllerShortcut.#ACTIONS) {
ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
}
const gamepadIndex = gamepad.index; const gamepadIndex = gamepad.index;
const actions = ControllerShortcut.#ACTIONS[gamepad.id]; const actions = ControllerShortcut.#ACTIONS![gamepad.id];
if (!actions) { if (!actions) {
return false; return false;
} }
@ -82,6 +92,10 @@ export class ControllerShortcut {
static #runAction(action: ShortcutAction) { static #runAction(action: ShortcutAction) {
switch (action) { switch (action) {
case ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW:
SettingsNavigationDialog.getInstance().show();
break;
case ShortcutAction.STREAM_SCREENSHOT_CAPTURE: case ShortcutAction.STREAM_SCREENSHOT_CAPTURE:
Screenshot.takeScreenshot(); Screenshot.takeScreenshot();
break; break;
@ -121,15 +135,16 @@ export class ControllerShortcut {
} }
static #updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) { static #updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) {
if (!(profile in ControllerShortcut.#ACTIONS)) { const actions = ControllerShortcut.#ACTIONS!;
ControllerShortcut.#ACTIONS[profile] = []; if (!(profile in actions)) {
actions[profile] = [];
} }
if (!action) { if (!action) {
action = null; action = null;
} }
ControllerShortcut.#ACTIONS[profile][button] = action; actions[profile][button] = action;
// Remove empty profiles // Remove empty profiles
for (const key in ControllerShortcut.#ACTIONS) { for (const key in ControllerShortcut.#ACTIONS) {
@ -182,18 +197,18 @@ export class ControllerShortcut {
$fragment.appendChild($option); $fragment.appendChild($option);
} }
$container.dataset.hasGamepad = hasGamepad.toString();
if (hasGamepad) { if (hasGamepad) {
$select.appendChild($fragment); $select.appendChild($fragment);
$select.selectedIndex = 0; $select.selectedIndex = 0;
$select.dispatchEvent(new Event('change')); $select.dispatchEvent(new Event('input'));
} }
$container.dataset.hasGamepad = hasGamepad.toString();
} }
static #switchProfile(profile: string) { static #switchProfile(profile: string) {
let actions = ControllerShortcut.#ACTIONS[profile]; let actions = ControllerShortcut.#ACTIONS![profile];
if (!actions) { if (!actions) {
actions = []; actions = [];
} }
@ -204,15 +219,22 @@ export class ControllerShortcut {
const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!; const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
$select.value = actions[button] || ''; $select.value = actions[button] || '';
BxEvent.dispatch($select, 'change', { BxEvent.dispatch($select, 'input', {
ignoreOnChange: true, ignoreOnChange: true,
}); manualTrigger: true,
});
} }
} }
static #getActionsFromStorage() {
return JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
}
static renderSettings() { static renderSettings() {
const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
// Read actions from localStorage // Read actions from localStorage
ControllerShortcut.#ACTIONS = JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}'); ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
const buttons: Map<GamepadKey, PrompFont> = new Map(); const buttons: Map<GamepadKey, PrompFont> = new Map();
buttons.set(GamepadKey.Y, PrompFont.Y); buttons.set(GamepadKey.Y, PrompFont.Y);
@ -238,6 +260,10 @@ export class ControllerShortcut {
buttons.set(GamepadKey.R3, PrompFont.R3); buttons.set(GamepadKey.R3, PrompFont.R3);
const actions: {[key: string]: Partial<{[key in ShortcutAction]: string | string[]}>} = { const actions: {[key: string]: Partial<{[key in ShortcutAction]: string | string[]}>} = {
[t('better-xcloud')]: {
[ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW]: [t('settings'), t('show')],
},
[t('device')]: AppInterface && { [t('device')]: AppInterface && {
[ShortcutAction.DEVICE_SOUND_TOGGLE]: [t('sound'), t('toggle')], [ShortcutAction.DEVICE_SOUND_TOGGLE]: [t('sound'), t('toggle')],
[ShortcutAction.DEVICE_VOLUME_INC]: [t('volume'), t('increase')], [ShortcutAction.DEVICE_VOLUME_INC]: [t('volume'), t('increase')],
@ -257,7 +283,7 @@ export class ControllerShortcut {
[ShortcutAction.STREAM_MENU_SHOW]: [t('menu'), t('show')], [ShortcutAction.STREAM_MENU_SHOW]: [t('menu'), t('show')],
[ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')], [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')],
[ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')], [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
} },
}; };
const $baseSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'}, CE('option', {value: ''}, '---')); const $baseSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'}, CE('option', {value: ''}, '---'));
@ -287,23 +313,34 @@ export class ControllerShortcut {
} }
let $remap: HTMLElement; let $remap: HTMLElement;
let $selectProfile: HTMLSelectElement; const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
const $container = CE('div', {'data-has-gamepad': 'false'}, const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
const $container = CE('div', {
'data-has-gamepad': 'false',
_nearby: {
focus: $profile,
},
},
CE('div', {}, CE('div', {},
CE('p', {'class': 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')), CE('p', {class: 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
), ),
$remap = CE('div', {}, $remap = CE('div', {},
$selectProfile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}), CE('div', {
CE('p', {'class': 'bx-shortcut-note'}, _nearby: {
CE('span', {'class': 'bx-prompt'}, PrompFont.HOME), focus: $profile,
},
}, $profile),
CE('p', {class: 'bx-shortcut-note'},
CE('span', {class: 'bx-prompt'}, PrompFont.HOME),
': ' + t('controller-shortcuts-xbox-note'), ': ' + t('controller-shortcuts-xbox-note'),
), ),
), ),
); );
$selectProfile.addEventListener('change', e => { $selectProfile.addEventListener('input', e => {
ControllerShortcut.#switchProfile($selectProfile.value); ControllerShortcut.#switchProfile($selectProfile.value);
}); });
@ -314,38 +351,57 @@ export class ControllerShortcut {
const button: unknown = $target.dataset.button; const button: unknown = $target.dataset.button;
const action = $target.value as ShortcutAction; const action = $target.value as ShortcutAction;
const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement; if (!PREF_CONTROLLER_FRIENDLY_UI) {
let fakeText = '---'; const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
if (action) { let fakeText = '---';
const $selectedOption = $target.options[$target.selectedIndex]; if (action) {
const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement; const $selectedOption = $target.options[$target.selectedIndex];
fakeText = $optGroup.label + ' ' + $selectedOption.text; const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
fakeText = $optGroup.label + ' ' + $selectedOption.text;
}
($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
} }
($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
!(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action); !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
}; };
// @ts-ignore // @ts-ignore
for (const [button, prompt] of buttons) { for (const [button, prompt] of buttons) {
const $row = CE('div', {'class': 'bx-shortcut-row'}); const $row = CE('div', {
class: 'bx-shortcut-row',
});
const $label = CE('label', {'class': 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`); const $label = CE('label', {class: 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
const $div = CE('div', {'class': 'bx-shortcut-actions'}); const $div = CE('div', {class: 'bx-shortcut-actions'});
const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'}, if (!PREF_CONTROLLER_FRIENDLY_UI) {
CE('option', {}, '---'), const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
); CE('option', {}, '---'),
$div.appendChild($fakeSelect); );
$div.appendChild($fakeSelect);
}
const $select = $baseSelect.cloneNode(true) as HTMLSelectElement; const $select = $baseSelect.cloneNode(true) as HTMLSelectElement;
$select.dataset.button = button.toString(); $select.dataset.button = button.toString();
$select.addEventListener('change', onActionChanged); $select.addEventListener('input', onActionChanged);
ControllerShortcut.#$selectActions[button] = $select; ControllerShortcut.#$selectActions[button] = $select;
$div.appendChild($select); if (PREF_CONTROLLER_FRIENDLY_UI) {
const $bxSelect = BxSelectElement.wrap($select);
$div.appendChild($bxSelect);
setNearby($row, {
focus: $bxSelect,
});
} else {
$div.appendChild($select);
setNearby($row, {
focus: $select,
});
}
$row.appendChild($label); $row.appendChild($label);
$row.appendChild($div); $row.appendChild($div);

View File

@ -5,8 +5,9 @@ import { BxEvent } from "@utils/bx-event";
import { BxIcon } from "@utils/bx-icon"; import { BxIcon } from "@utils/bx-icon";
import type { BaseGameBarAction } from "./action-base"; import type { BaseGameBarAction } from "./action-base";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { PrefKey, getPref } from "@utils/preferences";
import { MicrophoneAction } from "./action-microphone"; import { MicrophoneAction } from "./action-microphone";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
export class GameBar { export class GameBar {
@ -41,7 +42,7 @@ export class GameBar {
this.actions = [ this.actions = [
new ScreenshotAction(), new ScreenshotAction(),
...(STATES.hasTouchSupport && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []), ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
new MicrophoneAction(), new MicrophoneAction(),
]; ];

View File

@ -1,8 +1,9 @@
import { CE } from "@utils/html"; import { CE } from "@utils/html";
import { getPreferredServerRegion } from "@utils/region"; import { getPreferredServerRegion } from "@utils/region";
import { PrefKey, getPref } from "@utils/preferences";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
export class LoadingScreen { export class LoadingScreen {
static #$bgStyle: HTMLElement; static #$bgStyle: HTMLElement;
@ -109,7 +110,7 @@ export class LoadingScreen {
let $waitTimeBox = LoadingScreen.#$waitTimeBox; let $waitTimeBox = LoadingScreen.#$waitTimeBox;
if (!$waitTimeBox) { if (!$waitTimeBox) {
$waitTimeBox = CE<HTMLElement>('div', {'class': 'bx-wait-time-box'}, $waitTimeBox = CE('div', {'class': 'bx-wait-time-box'},
CE('label', {}, t('server')), CE('label', {}, t('server')),
CE('span', {}, getPreferredServerRegion()), CE('span', {}, getPreferredServerRegion()),
CE('label', {}, t('wait-time-estimated')), CE('label', {}, t('wait-time-estimated')),

View File

@ -1,4 +1,4 @@
import { MouseButtonCode, WheelCode } from "./definitions"; import { MouseButtonCode, WheelCode } from "@enums/mkb";
export class KeyHelper { export class KeyHelper {
static #NON_PRINTABLE_KEYS = { static #NON_PRINTABLE_KEYS = {

View File

@ -1,20 +1,22 @@
import { MkbPreset } from "./mkb-preset"; import { MkbPreset } from "./mkb-preset";
import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo, WheelCode } from "./definitions"; import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo, WheelCode } from "@enums/mkb";
import { createButton, ButtonStyle, CE } from "@utils/html"; import { createButton, ButtonStyle, CE } from "@utils/html";
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { PrefKey, getPref } from "@utils/preferences";
import { Toast } from "@utils/toast"; import { Toast } from "@utils/toast";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { LocalDb } from "@utils/local-db"; import { LocalDb } from "@utils/local-db";
import { KeyHelper } from "./key-helper"; import { KeyHelper } from "./key-helper";
import type { MkbStoredPreset } from "@/types/mkb"; import type { MkbStoredPreset } from "@/types/mkb";
import { showStreamSettings } from "@modules/stream/stream-ui";
import { AppInterface, STATES } from "@utils/global"; import { AppInterface, STATES } from "@utils/global";
import { UserAgent } from "@utils/user-agent"; import { UserAgent } from "@utils/user-agent";
import { BxLogger } from "@utils/bx-logger"; import { BxLogger } from "@utils/bx-logger";
import { PointerClient } from "./pointer-client"; import { PointerClient } from "./pointer-client";
import { NativeMkbHandler } from "./native-mkb-handler"; import { NativeMkbHandler } from "./native-mkb-handler";
import { MkbHandler, MouseDataProvider } from "./base-mkb-handler"; import { MkbHandler, MouseDataProvider } from "./base-mkb-handler";
import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog";
import { NavigationDialogManager } from "../ui/dialog/navigation-dialog";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
const LOG_TAG = 'MkbHandler'; const LOG_TAG = 'MkbHandler';
@ -33,7 +35,7 @@ class WebSocketMouseDataProvider extends MouseDataProvider {
this.#pointerClient = PointerClient.getInstance(); this.#pointerClient = PointerClient.getInstance();
this.#connected = false; this.#connected = false;
try { try {
this.#pointerClient.start(this.mkbHandler); this.#pointerClient.start(STATES.pointerServerPort, this.mkbHandler);
this.#connected = true; this.#connected = true;
} catch (e) { } catch (e) {
Toast.show('Cannot enable Mouse & Keyboard feature'); Toast.show('Cannot enable Mouse & Keyboard feature');
@ -507,7 +509,10 @@ export class EmulatedMkbHandler extends MkbHandler {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
showStreamSettings('mkb'); // Show Settings dialog & focus the MKB tab
const dialog = SettingsNavigationDialog.getInstance();
dialog.focusTab('mkb');
NavigationDialogManager.getInstance().show(dialog);
}, },
}), }),
), ),

View File

@ -1,9 +1,9 @@
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { SettingElementType } from "@utils/settings"; import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "@enums/mkb";
import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "./definitions";
import { EmulatedMkbHandler } from "./mkb-handler"; import { EmulatedMkbHandler } from "./mkb-handler";
import type { MkbPresetData, MkbConvertedPresetData } from "@/types/mkb"; import type { MkbPresetData, MkbConvertedPresetData } from "@/types/mkb";
import type { PreferenceSettings } from "@/types/preferences"; import type { PreferenceSettings } from "@/types/preferences";
import { SettingElementType } from "@/utils/setting-element";
export class MkbPreset { export class MkbPreset {

View File

@ -1,16 +1,17 @@
import { GamepadKey } from "./definitions";
import { CE, createButton, ButtonStyle } from "@utils/html"; import { CE, createButton, ButtonStyle } from "@utils/html";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { Dialog } from "@modules/dialog"; import { Dialog } from "@modules/dialog";
import { getPref, setPref, PrefKey } from "@utils/preferences";
import { MkbPresetKey, GamepadKeyName } from "./definitions";
import { KeyHelper } from "./key-helper"; import { KeyHelper } from "./key-helper";
import { MkbPreset } from "./mkb-preset"; import { MkbPreset } from "./mkb-preset";
import { EmulatedMkbHandler } from "./mkb-handler"; import { EmulatedMkbHandler } from "./mkb-handler";
import { LocalDb } from "@utils/local-db"; import { LocalDb } from "@utils/local-db";
import { BxIcon } from "@utils/bx-icon"; import { BxIcon } from "@utils/bx-icon";
import { SettingElement } from "@utils/settings";
import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb"; import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb";
import { MkbPresetKey, GamepadKey, GamepadKeyName } from "@enums/mkb";
import { deepClone } from "@utils/global";
import { SettingElement } from "@/utils/setting-element";
import { PrefKey } from "@/enums/pref-keys";
import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
type MkbRemapperElements = { type MkbRemapperElements = {
@ -292,7 +293,7 @@ export class MkbRemapper {
this.#$.wrapper!.classList.toggle('bx-editing', this.#STATE.isEditing); this.#$.wrapper!.classList.toggle('bx-editing', this.#STATE.isEditing);
if (this.#STATE.isEditing) { if (this.#STATE.isEditing) {
this.#STATE.editingPresetData = structuredClone(this.#getCurrentPreset().data); this.#STATE.editingPresetData = deepClone(this.#getCurrentPreset().data);
} else { } else {
this.#STATE.editingPresetData = null; this.#STATE.editingPresetData = null;
} }
@ -317,7 +318,7 @@ export class MkbRemapper {
render() { render() {
this.#$.wrapper = CE('div', {'class': 'bx-mkb-settings'}); this.#$.wrapper = CE('div', {'class': 'bx-mkb-settings'});
this.#$.presetsSelect = CE<HTMLSelectElement>('select', {}); this.#$.presetsSelect = CE<HTMLSelectElement>('select', {tabindex: -1});
this.#$.presetsSelect!.addEventListener('change', e => { this.#$.presetsSelect!.addEventListener('change', e => {
this.#switchPreset(parseInt((e.target as HTMLSelectElement).value)); this.#switchPreset(parseInt((e.target as HTMLSelectElement).value));
}); });
@ -336,80 +337,84 @@ export class MkbRemapper {
}; };
const $header = CE('div', {'class': 'bx-mkb-preset-tools'}, const $header = CE('div', {'class': 'bx-mkb-preset-tools'},
this.#$.presetsSelect, this.#$.presetsSelect,
// Rename button // Rename button
createButton({ createButton({
title: t('rename'), title: t('rename'),
icon: BxIcon.CURSOR_TEXT, icon: BxIcon.CURSOR_TEXT,
onClick: e => { tabIndex: -1,
const preset = this.#getCurrentPreset(); onClick: e => {
const preset = this.#getCurrentPreset();
let newName = promptNewName(preset.name); let newName = promptNewName(preset.name);
if (!newName || newName === preset.name) { if (!newName || newName === preset.name) {
return;
}
// Update preset with new name
preset.name = newName;
LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh());
},
}),
// New button
createButton({
icon: BxIcon.NEW,
title: t('new'),
tabIndex: -1,
onClick: e => {
let newName = promptNewName('');
if (!newName) {
return; return;
} }
// Update preset with new name // Create new preset selected name
preset.name = newName; LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh()); this.#STATE.currentPresetId = id;
this.#refresh();
});
}, },
}), }),
// New button // Copy button
createButton({ createButton({
icon: BxIcon.NEW, icon: BxIcon.COPY,
title: t('new'), title: t('copy'),
onClick: e => { tabIndex: -1,
let newName = promptNewName(''); onClick: e => {
if (!newName) { const preset = this.#getCurrentPreset();
return;
}
// Create new preset selected name let newName = promptNewName(`${preset.name} (2)`);
LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => { if (!newName) {
this.#STATE.currentPresetId = id; return;
this.#refresh(); }
});
},
}),
// Copy button // Create new preset selected name
createButton({ LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => {
icon: BxIcon.COPY, this.#STATE.currentPresetId = id;
title: t('copy'), this.#refresh();
onClick: e => { });
const preset = this.#getCurrentPreset(); },
}),
let newName = promptNewName(`${preset.name} (2)`); // Delete button
if (!newName) { createButton({
return; icon: BxIcon.TRASH,
} style: ButtonStyle.DANGER,
title: t('delete'),
tabIndex: -1,
onClick: e => {
if (!confirm(t('confirm-delete-preset'))) {
return;
}
// Create new preset selected name LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => { this.#STATE.currentPresetId = 0;
this.#STATE.currentPresetId = id; this.#refresh();
this.#refresh(); });
}); },
}, }),
}), );
// Delete button
createButton({
icon: BxIcon.TRASH,
style: ButtonStyle.DANGER,
title: t('delete'),
onClick: e => {
if (!confirm(t('confirm-delete-preset'))) {
return;
}
LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
this.#STATE.currentPresetId = 0;
this.#refresh();
});
},
}),
);
this.#$.wrapper!.appendChild($header); this.#$.wrapper!.appendChild($header);
@ -426,11 +431,11 @@ export class MkbRemapper {
const $fragment = document.createDocumentFragment(); const $fragment = document.createDocumentFragment();
for (let i = 0; i < keysPerButton; i++) { for (let i = 0; i < keysPerButton; i++) {
$elm = CE('button', { $elm = CE('button', {
type: 'button', type: 'button',
'data-prompt': buttonPrompt, 'data-prompt': buttonPrompt,
'data-button-index': buttonIndex, 'data-button-index': buttonIndex,
'data-key-slot': i, 'data-key-slot': i,
}, ' '); }, ' ');
$elm.addEventListener('mouseup', this.#onBindingKey); $elm.addEventListener('mouseup', this.#onBindingKey);
$elm.addEventListener('contextmenu', this.#onContextMenu); $elm.addEventListener('contextmenu', this.#onContextMenu);
@ -440,9 +445,9 @@ export class MkbRemapper {
} }
const $keyRow = CE('div', {'class': 'bx-mkb-key-row'}, const $keyRow = CE('div', {'class': 'bx-mkb-key-row'},
CE('label', {'title': buttonName}, buttonPrompt), CE('label', {'title': buttonName}, buttonPrompt),
$fragment, $fragment,
); );
$rows.appendChild($keyRow); $rows.appendChild($keyRow);
} }
@ -460,10 +465,13 @@ export class MkbRemapper {
const onChange = (e: Event, value: any) => { const onChange = (e: Event, value: any) => {
(this.#STATE.editingPresetData!.mouse as any)[key] = value; (this.#STATE.editingPresetData!.mouse as any)[key] = value;
}; };
const $row = CE('div', {'class': 'bx-stream-settings-row'}, const $row = CE('label', {
CE('label', {'for': `bx_setting_${key}`}, setting.label), class: 'bx-settings-row',
$elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params), for: `bx_setting_${key}`
); },
CE('span', {class: 'bx-settings-label'}, setting.label),
$elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
);
$mouseSettings.appendChild($row); $mouseSettings.appendChild($row);
this.#$.allMouseElements[key as MkbPresetKey] = $elm; this.#$.allMouseElements[key as MkbPresetKey] = $elm;
@ -474,59 +482,63 @@ export class MkbRemapper {
// Render action buttons // Render action buttons
const $actionButtons = CE('div', {'class': 'bx-mkb-action-buttons'}, const $actionButtons = CE('div', {'class': 'bx-mkb-action-buttons'},
CE('div', {}, CE('div', {},
// Edit button // Edit button
createButton({ createButton({
label: t('edit'), label: t('edit'),
onClick: e => this.#toggleEditing(true), tabIndex: -1,
}), onClick: e => this.#toggleEditing(true),
}),
// Activate button // Activate button
this.#$.activateButton = createButton({ this.#$.activateButton = createButton({
label: t('activate'), label: t('activate'),
style: ButtonStyle.PRIMARY, style: ButtonStyle.PRIMARY,
onClick: e => { tabIndex: -1,
setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId); onClick: e => {
EmulatedMkbHandler.getInstance().refreshPresetData(); setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
EmulatedMkbHandler.getInstance().refreshPresetData();
this.#refresh(); this.#refresh();
}, },
}), }),
), ),
CE('div', {}, CE('div', {},
// Cancel button // Cancel button
createButton({ createButton({
label: t('cancel'), label: t('cancel'),
style: ButtonStyle.GHOST, style: ButtonStyle.GHOST,
onClick: e => { tabIndex: -1,
// Restore preset onClick: e => {
this.#switchPreset(this.#STATE.currentPresetId); // Restore preset
this.#toggleEditing(false); this.#switchPreset(this.#STATE.currentPresetId);
}, this.#toggleEditing(false);
}), },
}),
// Save button // Save button
createButton({ createButton({
label: t('save'), label: t('save'),
style: ButtonStyle.PRIMARY, style: ButtonStyle.PRIMARY,
onClick: e => { tabIndex: -1,
const updatedPreset = structuredClone(this.#getCurrentPreset()); onClick: e => {
updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData; const updatedPreset = deepClone(this.#getCurrentPreset());
updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => { LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
// If this is the default preset => refresh preset data // If this is the default preset => refresh preset data
if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) { if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
EmulatedMkbHandler.getInstance().refreshPresetData(); EmulatedMkbHandler.getInstance().refreshPresetData();
} }
this.#toggleEditing(false); this.#toggleEditing(false);
this.#refresh(); this.#refresh();
}); });
}, },
}), }),
), ),
); );
this.#$.wrapper!.appendChild($actionButtons); this.#$.wrapper!.appendChild($actionButtons);

View File

@ -1,11 +1,12 @@
import { Toast } from "@/utils/toast"; import { Toast } from "@/utils/toast";
import { PointerClient } from "./pointer-client"; import { PointerClient } from "./pointer-client";
import { AppInterface } from "@/utils/global"; import { AppInterface, STATES } from "@/utils/global";
import { MkbHandler } from "./base-mkb-handler"; import { MkbHandler } from "./base-mkb-handler";
import { t } from "@/utils/translation"; import { t } from "@/utils/translation";
import { BxEvent } from "@/utils/bx-event"; import { BxEvent } from "@/utils/bx-event";
import { ButtonStyle, CE, createButton } from "@/utils/html"; import { ButtonStyle, CE, createButton } from "@/utils/html";
import { PrefKey, getPref } from "@/utils/preferences"; import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
type NativeMouseData = { type NativeMouseData = {
X: number, X: number,
@ -149,7 +150,7 @@ export class NativeMkbHandler extends MkbHandler {
this.#updateInputConfigurationAsync(false); this.#updateInputConfigurationAsync(false);
try { try {
this.#pointerClient.start(this); this.#pointerClient.start(STATES.pointerServerPort, this);
} catch (e) { } catch (e) {
Toast.show('Cannot enable Mouse & Keyboard feature'); Toast.show('Cannot enable Mouse & Keyboard feature');
} }

View File

@ -14,8 +14,6 @@ enum PointerAction {
export class PointerClient { export class PointerClient {
static #PORT = 9269;
private static instance: PointerClient; private static instance: PointerClient;
public static getInstance(): PointerClient { public static getInstance(): PointerClient {
if (!PointerClient.instance) { if (!PointerClient.instance) {
@ -28,11 +26,15 @@ export class PointerClient {
#socket: WebSocket | undefined | null; #socket: WebSocket | undefined | null;
#mkbHandler: MkbHandler | undefined; #mkbHandler: MkbHandler | undefined;
start(mkbHandler: MkbHandler) { start(port: number, mkbHandler: MkbHandler) {
if (!port) {
throw new Error('PointerServer port is 0');
}
this.#mkbHandler = mkbHandler; this.#mkbHandler = mkbHandler;
// Create WebSocket connection. // Create WebSocket connection.
this.#socket = new WebSocket(`ws://localhost:${PointerClient.#PORT}`); this.#socket = new WebSocket(`ws://localhost:${port}`);
this.#socket.binaryType = 'arraybuffer'; this.#socket.binaryType = 'arraybuffer';
// Connection opened // Connection opened
@ -43,7 +45,7 @@ export class PointerClient {
// Error // Error
this.#socket.addEventListener('error', (event) => { this.#socket.addEventListener('error', (event) => {
BxLogger.error(LOG_TAG, event); BxLogger.error(LOG_TAG, event);
Toast.show('Cannot setup mouse'); Toast.show('Cannot setup mouse: ' + event);
}); });
this.#socket.addEventListener('close', (event) => { this.#socket.addEventListener('close', (event) => {

View File

@ -1,16 +1,22 @@
import { SCRIPT_VERSION, STATES } from "@utils/global"; import { AppInterface, SCRIPT_VERSION, STATES } from "@utils/global";
import { BX_FLAGS } from "@utils/bx-flags"; import { BX_FLAGS } from "@utils/bx-flags";
import { getPref, PrefKey } from "@utils/preferences";
import { VibrationManager } from "@modules/vibration-manager"; import { VibrationManager } from "@modules/vibration-manager";
import { BxLogger } from "@utils/bx-logger"; import { BxLogger } from "@utils/bx-logger";
import { hashCode, renderString } from "@utils/utils"; import { hashCode, renderString } from "@utils/utils";
import { BxEvent } from "@/utils/bx-event"; import { BxEvent } from "@/utils/bx-event";
import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" }; import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
import codeExposeStreamSession from "./patches/expose-stream-session.js" with { type: "text" };
import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" }; import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
import codeSetCurrentlyFocusedInteractable from "./patches/set-currently-focused-interactable.js" with { type: "text" };
import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" }; import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" };
import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" }; import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" }; import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
import { FeatureGates } from "@/utils/feature-gates.js";
import { UiSection } from "@/enums/ui-sections.js";
import { PrefKey } from "@/enums/pref-keys.js";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
import { GamePassCloudGallery } from "@/enums/game-pass-gallery.js";
type PatchArray = (keyof typeof PATCHES)[]; type PatchArray = (keyof typeof PATCHES)[];
@ -23,7 +29,7 @@ const PATCHES = {
disableAiTrack(str: string) { disableAiTrack(str: string) {
const text = '.track=function('; const text = '.track=function(';
const index = str.indexOf(text); const index = str.indexOf(text);
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -90,7 +96,7 @@ const PATCHES = {
// Replace "/direct-connect" with "/play" // Replace "/direct-connect" with "/play"
remotePlayDirectConnectUrl(str: string) { remotePlayDirectConnectUrl(str: string) {
const index = str.indexOf('/direct-connect'); const index = str.indexOf('/direct-connect');
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -156,7 +162,7 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
patchPollGamepads(str: string) { patchPollGamepads(str: string) {
const index = str.indexOf('},this.pollGamepads=()=>{'); const index = str.indexOf('},this.pollGamepads=()=>{');
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -187,12 +193,18 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
}, },
enableXcloudLogger(str: string) { enableXcloudLogger(str: string) {
const text = 'this.telemetryProvider=e}log(e,t,i){'; const text = 'this.telemetryProvider=e}log(e,t,r){';
if (!str.includes(text)) { if (!str.includes(text)) {
return false; return false;
} }
str = str.replaceAll(text, text + 'console.log(Array.from(arguments));'); const newCode = `
const [logTag, logLevel, logMessage] = Array.from(arguments);
const logFunc = [console.debug, console.log, console.warn, console.error][logLevel];
logFunc(logTag, '//', logMessage);
`;
str = str.replaceAll(text, text + newCode);
return str; return str;
}, },
@ -221,19 +233,17 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
// Override website's settings // Override website's settings
overrideSettings(str: string) { overrideSettings(str: string) {
const index = str.indexOf(',EnableStreamGate:'); const index = str.indexOf(',EnableStreamGate:');
if (index === -1) { if (index < 0) {
return false; return false;
} }
// Find the next "}," // Find the next "},"
const endIndex = str.indexOf('},', index); const endIndex = str.indexOf('},', index);
const newSettings = [ let newSettings = JSON.stringify(FeatureGates);
// 'EnableStreamGate: false', newSettings = newSettings.substring(1, newSettings.length - 1);
'PwaPrompt: false',
];
const newCode = newSettings.join(','); const newCode = newSettings;
str = str.substring(0, endIndex) + ',' + newCode + str.substring(endIndex); str = str.substring(0, endIndex) + ',' + newCode + str.substring(endIndex);
return str; return str;
@ -241,7 +251,7 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
disableGamepadDisconnectedScreen(str: string) { disableGamepadDisconnectedScreen(str: string) {
const index = str.indexOf('"GamepadDisconnected_Title",'); const index = str.indexOf('"GamepadDisconnected_Title",');
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -278,7 +288,7 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
// Disable StreamGate // Disable StreamGate
disableStreamGate(str: string) { disableStreamGate(str: string) {
const index = str.indexOf('case"partially-ready":'); const index = str.indexOf('case"partially-ready":');
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -308,7 +318,7 @@ window.dispatchEvent(new Event("${BxEvent.TOUCH_LAYOUT_MANAGER_READY}"));
patchBabylonRendererClass(str: string) { patchBabylonRendererClass(str: string) {
// ()=>{a.current.render(),h.current=window.requestAnimationFrame(l) // ()=>{a.current.render(),h.current=window.requestAnimationFrame(l)
let index = str.indexOf('.current.render(),'); let index = str.indexOf('.current.render(),');
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -444,10 +454,21 @@ BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
return str; return str;
}, },
patchGamepadPolling(str: string) {
let index = str.indexOf('.shouldHandleGamepadInput)())return void');
if (index < 0) {
return false;
}
index = str.indexOf('{', index - 20) + 1;
str = str.substring(0, index) + 'if (window.BX_EXPOSED.disableGamepadPolling) return;' + str.substring(index);
return str;
},
patchXcloudTitleInfo(str: string) { patchXcloudTitleInfo(str: string) {
const text = 'async cloudConnect'; const text = 'async cloudConnect';
let index = str.indexOf(text); let index = str.indexOf(text);
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -469,7 +490,7 @@ BxLogger.info('patchXcloudTitleInfo', ${titleInfoVar});
patchRemotePlayMkb(str: string) { patchRemotePlayMkb(str: string) {
const text = 'async homeConsoleConnect'; const text = 'async homeConsoleConnect';
let index = str.indexOf(text); let index = str.indexOf(text);
if (index === -1) { if (index < 0) {
return false; return false;
} }
@ -566,20 +587,7 @@ window.dispatchEvent(new Event('${BxEvent.STREAM_EVENT_TARGET_READY}'))
} }
const newCode = `; const newCode = `;
window.BX_EXPOSED.streamSession = this; ${codeExposeStreamSession}
const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
this.setMicrophoneState = state => {
orgSetMicrophoneState(state);
const evt = new Event('${BxEvent.MICROPHONE_STATE_CHANGED}');
evt.microphoneState = state;
window.dispatchEvent(evt);
};
window.dispatchEvent(new Event('${BxEvent.STREAM_SESSION_READY}'))
true` + text; true` + text;
str = str.replace(text, newCode); str = str.replace(text, newCode);
@ -636,7 +644,234 @@ true` + text;
str = str.replace(text, text + 'return;'); str = str.replace(text, text + 'return;');
return str; return str;
},
// Fix crashing when RequestInfo.origin is empty
patchRequestInfoCrash(str: string) {
const text = 'if(!e)throw new Error("RequestInfo.origin is falsy");';
if (!str.includes(text)) {
return false;
}
str = str.replace(text, 'if (!e) e = "https://www.xbox.com";');
return str;
},
exposeDialogRoutes(str: string) {
const text = 'return{goBack:function(){';
if (!str.includes(text)) {
return false;
}
str = str.replace(text, 'return window.BX_EXPOSED.dialogRoutes = {goBack:function(){');
return str;
},
/*
(x.AW, {
path: V.LoginDeviceCode.path,
exact: !0,
render: () => (0, n.jsx)(qe, {
children: (0, n.jsx)(Et.R, {})
})
}, V.LoginDeviceCode.name),
const qe = e => {
let {
children: t
} = e;
const {
isTV: a,
isSupportedTVBrowser: r
} = (0, T.d)();
return a && r ? (0, n.jsx)(n.Fragment, {
children: t
}) : (0, n.jsx)(x.l_, {
to: V.Home.getLink()
})
};
*/
enableTvRoutes(str: string) {
let index = str.indexOf('.LoginDeviceCode.path,');
if (index < 0) {
return false;
}
// Find *qe* name
const match = /render:.*?jsx\)\(([^,]+),/.exec(str.substring(index, index + 100));
if (!match) {
return false;
}
const funcName = match[1];
// Replace *qe*'s return value
// `return a && r ?` => `return a && r || true ?`
index = str.indexOf(`const ${funcName}=e=>{`);
index > -1 && (index = str.indexOf('return ', index));
index > -1 && (index = str.indexOf('?', index));
if (index < 0) {
return false;
}
str = str.substring(0, index) + '|| true' + str.substring(index);
return str;
},
// Don't render "Play With Friends" sections
ignorePlayWithFriendsSection(str: string) {
let index = str.indexOf('location:"PlayWithFriendsRow",');
if (index < 0) {
return false;
}
index = str.indexOf('return', index - 50);
if (index < 0) {
return false;
}
str = str.substring(0, index) + 'return null;' + str.substring(index + 6);
return str;
},
// Don't render "All Games" sections
ignoreAllGamesSection(str: string) {
let index = str.indexOf('className:"AllGamesRow-module__allGamesRowContainer');
if (index < 0) {
return false;
}
index = str.indexOf('grid:!0,', index);
index > -1 && (index = str.indexOf('(0,', index - 70));
if (index < 0) {
return false;
}
str = str.substring(0, index) + 'true ? null :' + str.substring(index);
return str;
},
// home-page.js
ignorePlayWithTouchSection(str: string) {
let index = str.indexOf('("Play_With_Touch"),');
if (index < 0) {
return false;
}
index = str.indexOf('const ', index - 100);
if (index < 0) {
return false;
}
str = str.substring(0, index) + 'return null;' + str.substring(index);
return str;
},
// home-page.js
ignoreSiglSections(str: string) {
let index = str.indexOf('SiglRow-module__heroCard___');
if (index < 0) {
return false;
}
index = str.indexOf('const[', index - 300);
if (index < 0) {
return false;
}
const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS) as UiSection[];
const siglIds: GamePassCloudGallery[] = [];
const sections: Partial<Record<UiSection, GamePassCloudGallery>> = {
[UiSection.NATIVE_MKB]: GamePassCloudGallery.NATIVE_MKB,
[UiSection.MOST_POPULAR]: GamePassCloudGallery.MOST_POPULAR,
};
PREF_HIDE_SECTIONS.forEach(section => {
const galleryId = sections[section];
galleryId && siglIds.push(galleryId);
});
const checkSyntax = siglIds.map(item => `siglId === "${item}"`).join(' || ');
const newCode = `
if (e && e.id) {
const siglId = e.id;
if (${checkSyntax}) {
return null;
} }
}
`;
str = str.substring(0, index) + newCode + str.substring(index);
return str;
},
// Override Storage.getSettings()
overrideStorageGetSettings(str: string) {
const text = '}getSetting(e){';
if (!str.includes(text)) {
return false;
}
const newCode = `
// console.log('setting', this.baseStorageKey, e);
if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
const settings = window.BX_EXPOSED.overrideSettings[this.baseStorageKey];
if (e in settings) {
return settings[e];
}
}
`;
str = str.replace(text, text + newCode);
return str;
},
// game-stream.js 24.16.4
alwaysShowStreamHud(str: string) {
let index = str.indexOf(',{onShowStreamMenu:');
if (index < 0) {
return false;
}
index = str.indexOf('&&(0,', index - 100);
if (index < 0) {
return false;
}
const commaIndex = str.indexOf(',', index - 10);
str = str.substring(0, commaIndex) + ',true' + str.substring(index);
return str;
},
// 24225.js#4127, 24.17.11
patchSetCurrentlyFocusedInteractable(str: string) {
let index = str.indexOf('.setCurrentlyFocusedInteractable=(');
if (index < 0) {
return false;
}
index = str.indexOf('{', index) + 1;
str = str.substring(0, index) + codeSetCurrentlyFocusedInteractable + str.substring(index);
return str;
},
// product-details-page.js#2388, 24.17.20
detectProductDetailsPage(str: string) {
let index = str.indexOf('{location:"ProductDetailPage",');
if (index < 0) {
return false;
}
index = str.indexOf('return', index - 40);
if (index < 0) {
return false;
}
str = str.substring(0, index) + 'BxEvent.dispatch(window, BxEvent.XCLOUD_RENDERING_COMPONENT, {component: "product-details"});' + str.substring(index);
return str;
},
}; };
let PATCH_ORDERS: PatchArray = [ let PATCH_ORDERS: PatchArray = [
@ -647,16 +882,31 @@ let PATCH_ORDERS: PatchArray = [
'exposeInputSink', 'exposeInputSink',
] : []), ] : []),
'patchRequestInfoCrash',
'disableStreamGate', 'disableStreamGate',
'overrideSettings', 'overrideSettings',
'broadcastPollingMode', 'broadcastPollingMode',
'patchGamepadPolling',
'exposeStreamSession', 'exposeStreamSession',
'exposeDialogRoutes',
'enableTvRoutes',
AppInterface && 'detectProductDetailsPage',
'overrideStorageGetSettings',
getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentlyFocusedInteractable',
getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout', getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp', getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole', getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.TOUCH) && 'ignorePlayWithTouchSection',
(getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.NATIVE_MKB) || getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.MOST_POPULAR)) && 'ignoreSiglSections',
...(getPref(PrefKey.BLOCK_TRACKING) ? [ ...(getPref(PrefKey.BLOCK_TRACKING) ? [
'disableAiTrack', 'disableAiTrack',
'disableTelemetry', 'disableTelemetry',
@ -672,7 +922,7 @@ let PATCH_ORDERS: PatchArray = [
'remotePlayKeepAlive', 'remotePlayKeepAlive',
'remotePlayDirectConnectUrl', 'remotePlayDirectConnectUrl',
'remotePlayDisableAchievementToast', 'remotePlayDisableAchievementToast',
STATES.hasTouchSupport && 'patchUpdateInputConfigurationAsync', STATES.userAgent.capabilities.touch && 'patchUpdateInputConfigurationAsync',
] : []), ] : []),
...(BX_FLAGS.EnableXcloudLogging ? [ ...(BX_FLAGS.EnableXcloudLogging ? [
@ -688,6 +938,8 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
'patchStreamHud', 'patchStreamHud',
'playVibration', 'playVibration',
'alwaysShowStreamHud',
// 'exposeEventTarget', // 'exposeEventTarget',
// Patch volume control for normal stream // Patch volume control for normal stream
@ -698,10 +950,10 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
// Skip feedback dialog // Skip feedback dialog
getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog', getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
...(STATES.hasTouchSupport ? [ ...(STATES.userAgent.capabilities.touch ? [
getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls', getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager', getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
(getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer', (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity', getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
'patchBabylonRendererClass', 'patchBabylonRendererClass',
] : []), ] : []),
@ -785,7 +1037,8 @@ export class Patcher {
} }
const func = item[1][id]; const func = item[1][id];
let str = func.toString(); const funcStr = func.toString();
let patchedFuncStr = funcStr;
let modified = false; let modified = false;
@ -800,15 +1053,15 @@ export class Patcher {
} }
// Check function against patch // Check function against patch
const patchedStr = PATCHES[patchName].call(null, str); const tmpStr = PATCHES[patchName].call(null, patchedFuncStr);
// Not patched // Not patched
if (!patchedStr) { if (!tmpStr) {
continue; continue;
} }
modified = true; modified = true;
str = patchedStr; patchedFuncStr = tmpStr;
BxLogger.info(LOG_TAG, `${patchName}`); BxLogger.info(LOG_TAG, `${patchName}`);
appliedPatches.push(patchName); appliedPatches.push(patchName);
@ -821,7 +1074,13 @@ export class Patcher {
// Apply patched functions // Apply patched functions
if (modified) { if (modified) {
item[1][id] = eval(str); try {
item[1][id] = eval(patchedFuncStr);
} catch (e: unknown) {
if (e instanceof Error) {
BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message);
}
}
} }
// Save to cache // Save to cache

View File

@ -1,3 +1,8 @@
if (window.BX_EXPOSED.disableGamepadPolling) {
this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(50) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, 50);
return;
}
const currentGamepad = ${gamepadVar}; const currentGamepad = ${gamepadVar};
// Share button on XS controller // Share button on XS controller

View File

@ -0,0 +1,33 @@
window.BX_EXPOSED.streamSession = this;
const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
this.setMicrophoneState = state => {
orgSetMicrophoneState(state);
const evt = new Event(BxEvent.MICROPHONE_STATE_CHANGED);
evt.microphoneState = state;
window.dispatchEvent(evt);
};
window.dispatchEvent(new Event(BxEvent.STREAM_SESSION_READY));
// Patch updateDimensions() to make native touch work correctly with WebGL2
let updateDimensionsStr = this.updateDimensions.toString();
if (updateDimensionsStr.startsWith('function ')) {
updateDimensionsStr = updateDimensionsStr.substring(9);
}
// if(r){
const renderTargetVar = updateDimensionsStr.match(/if\((\w+)\){/)[1];
updateDimensionsStr = updateDimensionsStr.replaceAll(renderTargetVar + '.scroll', 'scroll');
updateDimensionsStr = updateDimensionsStr.replace(`if(${renderTargetVar}){`, `
if (${renderTargetVar}) {
const scrollWidth = ${renderTargetVar}.dataset.width ? parseInt(${renderTargetVar}.dataset.width) : ${renderTargetVar}.scrollWidth;
const scrollHeight = ${renderTargetVar}.dataset.height ? parseInt(${renderTargetVar}.dataset.height) : ${renderTargetVar}.scrollHeight;
`);
eval(`this.updateDimensions = function ${updateDimensionsStr}`);

View File

@ -1,6 +1,10 @@
let match; let match;
let onGamepadChangedStr = this.onGamepadChanged.toString(); let onGamepadChangedStr = this.onGamepadChanged.toString();
if (onGamepadChangedStr.startsWith('function ')) {
onGamepadChangedStr = onGamepadChangedStr.substring(9);
}
onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]'); onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
eval(`this.onGamepadChanged = function ${onGamepadChangedStr}`); eval(`this.onGamepadChanged = function ${onGamepadChangedStr}`);

View File

@ -0,0 +1 @@
e && BxEvent.dispatch(window, BxEvent.NAVIGATION_FOCUS_CHANGED, {element: e});

View File

@ -0,0 +1,121 @@
const int FILTER_UNSHARP_MASKING = 1;
const int FILTER_CAS = 2;
precision highp float;
uniform sampler2D data;
uniform vec2 iResolution;
uniform int filterId;
uniform float sharpenFactor;
uniform float brightness;
uniform float contrast;
uniform float saturation;
vec3 textureAt(sampler2D tex, vec2 coord) {
return texture2D(tex, coord / iResolution.xy).rgb;
}
vec3 clarityBoost(sampler2D tex, vec2 coord)
{
// Load a collection of samples in a 3x3 neighorhood, where e is the current pixel.
// a b c
// d e f
// g h i
vec3 a = textureAt(tex, coord + vec2(-1, 1));
vec3 b = textureAt(tex, coord + vec2(0, 1));
vec3 c = textureAt(tex, coord + vec2(1, 1));
vec3 d = textureAt(tex, coord + vec2(-1, 0));
vec3 e = textureAt(tex, coord);
vec3 f = textureAt(tex, coord + vec2(1, 0));
vec3 g = textureAt(tex, coord + vec2(-1, -1));
vec3 h = textureAt(tex, coord + vec2(0, -1));
vec3 i = textureAt(tex, coord + vec2(1, -1));
if (filterId == FILTER_CAS) {
// Soft min and max.
// a b c b
// d e f * 0.5 + d e f * 0.5
// g h i h
// These are 2.0x bigger (factored out the extra multiply).
vec3 minRgb = min(min(min(d, e), min(f, b)), h);
vec3 minRgb2 = min(min(a, c), min(g, i));
minRgb += min(minRgb, minRgb2);
vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
vec3 maxRgb2 = max(max(a, c), max(g, i));
maxRgb += max(maxRgb, maxRgb2);
// Smooth minimum distance to signal limit divided by smooth max.
vec3 reciprocalMaxRgb = 1.0 / maxRgb;
vec3 amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, 0.0, 1.0);
// Shaping amount of sharpening.
amplifyRgb = inversesqrt(amplifyRgb);
float contrast = 0.8;
float peak = -3.0 * contrast + 8.0;
vec3 weightRgb = -(1.0 / (amplifyRgb * peak));
vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
// 0 w 0
// Filter shape: w 1 w
// 0 w 0
vec3 window = (b + d) + (f + h);
vec3 outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, 0.0, 1.0);
outColor = mix(e, outColor, sharpenFactor / 2.0);
return outColor;
} else if (filterId == FILTER_UNSHARP_MASKING) {
vec3 gaussianBlur = (a * 1.0 + b * 2.0 + c * 1.0 +
d * 2.0 + e * 4.0 + f * 2.0 +
g * 1.0 + h * 2.0 + i * 1.0) / 16.0;
// Return edge detection
return e + (e - gaussianBlur) * sharpenFactor / 3.0;
}
return e;
}
vec3 adjustBrightness(vec3 color) {
return (1.0 + brightness) * color;
}
vec3 adjustContrast(vec3 color) {
return 0.5 + (1.0 + contrast) * (color - 0.5);
}
vec3 adjustSaturation(vec3 color) {
const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
vec3 grayscale = vec3(dot(color, luminosityFactor));
return mix(grayscale, color, 1.0 + saturation);
}
void main() {
vec3 color;
if (sharpenFactor > 0.0) {
color = clarityBoost(data, gl_FragCoord.xy);
} else {
color = textureAt(data, gl_FragCoord.xy);
}
if (saturation != 0.0) {
color = adjustSaturation(color);
}
if (contrast != 0.0) {
color = adjustContrast(color);
}
if (brightness != 0.0) {
color = adjustBrightness(color);
}
gl_FragColor = vec4(color, 1.0);
}

View File

@ -0,0 +1,5 @@
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}

View File

@ -0,0 +1,254 @@
import vertClarityBoost from "./shaders/clarity_boost.vert" with { type: "text" };
import fsClarityBoost from "./shaders/clarity_boost.fs" with { type: "text" };
import { BxLogger } from "@/utils/bx-logger";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
const LOG_TAG = 'WebGL2Player';
export class WebGL2Player {
#$video: HTMLVideoElement;
#$canvas: HTMLCanvasElement;
#gl: WebGL2RenderingContext | null = null;
#resources: Array<any> = [];
#program: WebGLProgram | null = null;
#stopped: boolean = false;
#options = {
filterId: 1,
sharpenFactor: 0,
brightness: 0.0,
contrast: 0.0,
saturation: 0.0,
};
#animFrameId: number | null = null;
constructor($video: HTMLVideoElement) {
BxLogger.info(LOG_TAG, 'Initialize');
this.#$video = $video;
const $canvas = document.createElement('canvas');
$canvas.width = $video.videoWidth;
$canvas.height = $video.videoHeight;
this.#$canvas = $canvas;
this.#setupShaders();
this.#setupRendering();
$video.insertAdjacentElement('afterend', $canvas);
}
setFilter(filterId: number, update = true) {
this.#options.filterId = filterId;
update && this.updateCanvas();
}
setSharpness(sharpness: number, update = true) {
this.#options.sharpenFactor = sharpness;
update && this.updateCanvas();
}
setBrightness(brightness: number, update = true) {
this.#options.brightness = (brightness - 100) / 100;
update && this.updateCanvas();
}
setContrast(contrast: number, update = true) {
this.#options.contrast = (contrast - 100) / 100;
update && this.updateCanvas();
}
setSaturation(saturation: number, update = true) {
this.#options.saturation = (saturation - 100) / 100;
update && this.updateCanvas();
}
getCanvas() {
return this.#$canvas;
}
updateCanvas() {
const gl = this.#gl!;
const program = this.#program!;
gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.#$canvas.width, this.#$canvas.height);
gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.#options.filterId);
gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.#options.sharpenFactor);
gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.#options.brightness);
gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.#options.contrast);
gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.#options.saturation);
}
drawFrame() {
const gl = this.#gl!;
const $video = this.#$video;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
#setupRendering() {
let animate: any;
if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
const $video = this.#$video;
animate = () => {
if (this.#stopped) {
return;
}
this.drawFrame();
this.#animFrameId = $video.requestVideoFrameCallback(animate);
}
this.#animFrameId = $video.requestVideoFrameCallback(animate);
} else {
animate = () => {
if (this.#stopped) {
return;
}
this.drawFrame();
this.#animFrameId = requestAnimationFrame(animate);
}
this.#animFrameId = requestAnimationFrame(animate);
}
}
#setupShaders() {
BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
const gl = this.#$canvas.getContext('webgl2', {
isBx: true,
antialias: true,
alpha: false,
powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
}) as WebGL2RenderingContext;
this.#gl = gl;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);
// Vertex shader: Identity map
const vShader = gl.createShader(gl.VERTEX_SHADER)!;
gl.shaderSource(vShader, vertClarityBoost);
gl.compileShader(vShader);
const fShader = gl.createShader(gl.FRAGMENT_SHADER)!;
gl.shaderSource(fShader, fsClarityBoost);
gl.compileShader(fShader);
// Create and link program
const program = gl.createProgram()!;
this.#program = program;
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error(`Link failed: ${gl.getProgramInfoLog(program)}`);
console.error(`vs info-log: ${gl.getShaderInfoLog(vShader)}`);
console.error(`fs info-log: ${gl.getShaderInfoLog(fShader)}`);
}
this.updateCanvas();
// Vertices: A screen-filling quad made from two triangles
const buffer = gl.createBuffer();
this.#resources.push(buffer);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1,
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
// Texture to contain the video data
const texture = gl.createTexture();
this.#resources.push(texture);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
// Bind texture to the "data" argument to the fragment shader
gl.uniform1i(gl.getUniformLocation(program, 'data'), 0);
gl.activeTexture(gl.TEXTURE0);
// gl.bindTexture(gl.TEXTURE_2D, texture);
}
resume() {
this.stop();
this.#stopped = false;
BxLogger.info(LOG_TAG, 'Resume');
this.#$canvas.classList.remove('bx-gone');
this.#setupRendering();
}
stop() {
BxLogger.info(LOG_TAG, 'Stop');
this.#$canvas.classList.add('bx-gone');
this.#stopped = true;
if (this.#animFrameId) {
if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
this.#$video.cancelVideoFrameCallback(this.#animFrameId);
} else {
cancelAnimationFrame(this.#animFrameId);
}
this.#animFrameId = null;
}
}
destroy() {
BxLogger.info(LOG_TAG, 'Destroy');
this.stop();
const gl = this.#gl;
if (gl) {
gl.getExtension('WEBGL_lose_context')?.loseContext();
for (const resource of this.#resources) {
if (resource instanceof WebGLProgram) {
gl.useProgram(null);
gl.deleteProgram(resource);
} else if (resource instanceof WebGLShader) {
gl.deleteShader(resource);
} else if (resource instanceof WebGLTexture) {
gl.deleteTexture(resource);
} else if (resource instanceof WebGLBuffer) {
gl.deleteBuffer(resource);
}
}
this.#gl = null;
}
if (this.#$canvas.isConnected) {
this.#$canvas.parentElement?.removeChild(this.#$canvas);
}
this.#$canvas.width = 1;
this.#$canvas.height = 1;
}
}

View File

@ -3,14 +3,16 @@ import { CE, createButton, ButtonStyle } from "@utils/html";
import { BxIcon } from "@utils/bx-icon"; import { BxIcon } from "@utils/bx-icon";
import { Toast } from "@utils/toast"; import { Toast } from "@utils/toast";
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { getPref, PrefKey, setPref } from "@utils/preferences";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { localRedirect } from "@modules/ui/ui"; import { localRedirect } from "@modules/ui/ui";
import { BxLogger } from "@utils/bx-logger"; import { BxLogger } from "@utils/bx-logger";
import { HeaderSection } from "./ui/header";
import { PrefKey } from "@/enums/pref-keys";
import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
const LOG_TAG = 'RemotePlay'; const LOG_TAG = 'RemotePlay';
enum RemotePlayConsoleState { const enum RemotePlayConsoleState {
ON = 'On', ON = 'On',
OFF = 'Off', OFF = 'Off',
STANDBY = 'ConnectedStandby', STANDBY = 'ConnectedStandby',
@ -52,8 +54,8 @@ export class RemotePlay {
env: { env: {
clientAppId: window.location.host, clientAppId: window.location.host,
clientAppType: 'browser', clientAppType: 'browser',
clientAppVersion: '21.1.98', clientAppVersion: '24.17.36',
clientSdkVersion: '8.5.3', clientSdkVersion: '10.1.14',
httpEnvironment: 'prod', httpEnvironment: 'prod',
sdkInstallId: '', sdkInstallId: '',
}, },
@ -81,7 +83,7 @@ export class RemotePlay {
}, },
browser: { browser: {
browserName: 'chrome', browserName: 'chrome',
browserVersion: '119.0', browserVersion: '125.0',
}, },
}, },
}; };
@ -97,6 +99,10 @@ export class RemotePlay {
RemotePlay.#getXhomeToken(() => { RemotePlay.#getXhomeToken(() => {
RemotePlay.#getConsolesList(() => { RemotePlay.#getConsolesList(() => {
BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES); BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES);
if (RemotePlay.#CONSOLES && RemotePlay.#CONSOLES.length > 0) {
STATES.supportedRegion && HeaderSection.showRemotePlayButton();
}
RemotePlay.#renderConsoles(); RemotePlay.#renderConsoles();
BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY); BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
}); });

View File

@ -1,9 +1,9 @@
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { PrefKey, getPref, setPref } from "@utils/preferences";
import { Toast } from "@utils/toast"; import { Toast } from "@utils/toast";
import { BxEvent } from "@/utils/bx-event";
import { ceilToNearest, floorToNearest } from "@/utils/utils"; import { ceilToNearest, floorToNearest } from "@/utils/utils";
import { PrefKey } from "@/enums/pref-keys";
import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
export class SoundShortcut { export class SoundShortcut {
static adjustGainNodeVolume(amount: number): number { static adjustGainNodeVolume(amount: number): number {
@ -27,14 +27,11 @@ export class SoundShortcut {
newValue = currentValue + amount; newValue = currentValue + amount;
} }
newValue = setPref(PrefKey.AUDIO_VOLUME, newValue); newValue = setPref(PrefKey.AUDIO_VOLUME, newValue, true);
SoundShortcut.setGainNodeVolume(newValue); SoundShortcut.setGainNodeVolume(newValue);
// Show toast // Show toast
Toast.show(`${t('stream')} ${t('volume')}`, newValue + '%', {instant: true}); Toast.show(`${t('stream')} ${t('volume')}`, newValue + '%', {instant: true});
BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
volume: newValue,
});
return newValue; return newValue;
} }
@ -51,10 +48,7 @@ export class SoundShortcut {
let targetValue: number; let targetValue: number;
if (settingValue === 0) { // settingValue is 0 => set to 100 if (settingValue === 0) { // settingValue is 0 => set to 100
targetValue = 100; targetValue = 100;
setPref(PrefKey.AUDIO_VOLUME, targetValue); setPref(PrefKey.AUDIO_VOLUME, targetValue, true);
BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
volume: targetValue,
});
} else if (gainValue === 0) { // is being muted => set to settingValue } else if (gainValue === 0) { // is being muted => set to settingValue
targetValue = settingValue; targetValue = settingValue;
} else { // not being muted => mute } else { // not being muted => mute

View File

@ -0,0 +1,280 @@
import { CE } from "@/utils/html";
import { WebGL2Player } from "./player/webgl2-player";
import { Screenshot } from "@/utils/screenshot";
import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
import { STATES } from "@/utils/global";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
export type StreamPlayerOptions = Partial<{
processing: string,
sharpness: number,
saturation: number,
contrast: number,
brightness: number,
}>;
export class StreamPlayer {
#$video: HTMLVideoElement;
#playerType: StreamPlayerType = StreamPlayerType.VIDEO;
#options: StreamPlayerOptions = {};
#webGL2Player: WebGL2Player | null = null;
#$videoCss: HTMLStyleElement | null = null;
#$usmMatrix: SVGFEConvolveMatrixElement | null = null;
constructor($video: HTMLVideoElement, type: StreamPlayerType, options: StreamPlayerOptions) {
this.#setupVideoElements();
this.#$video = $video;
this.#options = options || {};
this.setPlayerType(type);
}
#setupVideoElements() {
this.#$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
if (this.#$videoCss) {
this.#$usmMatrix = this.#$videoCss.querySelector('#bx-filter-usm-matrix') as any;
return;
}
const $fragment = document.createDocumentFragment();
this.#$videoCss = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
$fragment.appendChild(this.#$videoCss);
// Setup SVG filters
const $svg = CE('svg', {
id: 'bx-video-filters',
xmlns: 'http://www.w3.org/2000/svg',
class: 'bx-gone',
}, CE('defs', {xmlns: 'http://www.w3.org/2000/svg'},
CE('filter', {
id: 'bx-filter-usm',
xmlns: 'http://www.w3.org/2000/svg',
}, this.#$usmMatrix = CE('feConvolveMatrix', {
id: 'bx-filter-usm-matrix',
order: '3',
xmlns: 'http://www.w3.org/2000/svg',
})),
),
);
$fragment.appendChild($svg);
document.documentElement.appendChild($fragment);
}
#getVideoPlayerFilterStyle() {
const filters = [];
const sharpness = this.#options.sharpness || 0;
if (this.#options.processing === StreamVideoProcessing.USM && sharpness != 0) {
const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
this.#$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
filters.push(`url(#bx-filter-usm)`);
}
const saturation = this.#options.saturation || 100;
if (saturation != 100) {
filters.push(`saturate(${saturation}%)`);
}
const contrast = this.#options.contrast || 100;
if (contrast != 100) {
filters.push(`contrast(${contrast}%)`);
}
const brightness = this.#options.brightness || 100;
if (brightness != 100) {
filters.push(`brightness(${brightness}%)`);
}
return filters.join(' ');
}
#resizePlayer() {
const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
const $video = this.#$video;
const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
let $webGL2Canvas;
if (this.#playerType == StreamPlayerType.WEBGL2) {
$webGL2Canvas = this.#webGL2Player?.getCanvas()!;
}
let targetWidth;
let targetHeight;
let targetObjectFit;
if (PREF_RATIO.includes(':')) {
const tmp = PREF_RATIO.split(':');
// Get preferred ratio
const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
let width = 0;
let height = 0;
// Get parent's ratio
const parentRect = $video.parentElement!.getBoundingClientRect();
const parentRatio = parentRect.width / parentRect.height;
// Get target width & height
if (parentRatio > videoRatio) {
height = parentRect.height;
width = height * videoRatio;
} else {
width = parentRect.width;
height = width / videoRatio;
}
// Prevent floating points
width = Math.ceil(Math.min(parentRect.width, width));
height = Math.ceil(Math.min(parentRect.height, height));
$video.dataset.width = width.toString();
$video.dataset.height = height.toString();
// Update size
targetWidth = `${width}px`;
targetHeight = `${height}px`;
targetObjectFit = PREF_RATIO === '16:9' ? 'contain' : 'fill';
} else {
targetWidth = '100%';
targetHeight = '100%';
targetObjectFit = PREF_RATIO;
$video.dataset.width = window.innerWidth.toString();
$video.dataset.height = window.innerHeight.toString();
}
$video.style.width = targetWidth;
$video.style.height = targetHeight;
$video.style.objectFit = targetObjectFit;
// $video.style.padding = padding;
if ($webGL2Canvas) {
$webGL2Canvas.style.width = targetWidth;
$webGL2Canvas.style.height = targetHeight;
$webGL2Canvas.style.objectFit = targetObjectFit;
}
// Update video dimensions
if (isNativeTouchGame && this.#playerType == StreamPlayerType.WEBGL2) {
window.BX_EXPOSED.streamSession.updateDimensions();
}
}
setPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
if (this.#playerType !== type) {
// Switch from Video -> WebGL2
if (type === StreamPlayerType.WEBGL2) {
// Initialize WebGL2 player
if (!this.#webGL2Player) {
this.#webGL2Player = new WebGL2Player(this.#$video);
} else {
this.#webGL2Player.resume();
}
this.#$videoCss!.textContent = '';
this.#$video.classList.add('bx-pixel');
} else {
// Cleanup WebGL2 Player
this.#webGL2Player?.stop();
this.#$video.classList.remove('bx-pixel');
}
}
this.#playerType = type;
refreshPlayer && this.refreshPlayer();
}
setOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
this.#options = options;
refreshPlayer && this.refreshPlayer();
}
updateOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
this.#options = Object.assign(this.#options, options);
refreshPlayer && this.refreshPlayer();
}
getPlayerElement(playerType?: StreamPlayerType) {
if (typeof playerType === 'undefined') {
playerType = this.#playerType;
}
if (playerType === StreamPlayerType.WEBGL2) {
return this.#webGL2Player?.getCanvas();
}
return this.#$video;
}
getWebGL2Player() {
return this.#webGL2Player;
}
refreshPlayer() {
if (this.#playerType === StreamPlayerType.WEBGL2) {
const options = this.#options;
const webGL2Player = this.#webGL2Player!;
if (options.processing === StreamVideoProcessing.USM) {
webGL2Player.setFilter(1);
} else {
webGL2Player.setFilter(2);
}
Screenshot.updateCanvasFilters('none');
webGL2Player.setSharpness(options.sharpness || 0);
webGL2Player.setSaturation(options.saturation || 100);
webGL2Player.setContrast(options.contrast || 100);
webGL2Player.setBrightness(options.brightness || 100);
} else {
let filters = this.#getVideoPlayerFilterStyle();
let videoCss = '';
if (filters) {
videoCss += `filter: ${filters} !important;`;
}
// Apply video filters to screenshots
if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
Screenshot.updateCanvasFilters(filters);
}
let css = '';
if (videoCss) {
css = `#game-stream video { ${videoCss} }`;
}
this.#$videoCss!.textContent = css;
}
this.#resizePlayer();
}
reloadPlayer() {
this.#cleanUpWebGL2Player();
this.#playerType = StreamPlayerType.VIDEO;
this.setPlayerType(StreamPlayerType.WEBGL2, false);
}
#cleanUpWebGL2Player() {
// Clean up WebGL2 Player
this.#webGL2Player?.destroy();
this.#webGL2Player = null;
}
destroy() {
this.#cleanUpWebGL2Player();
}
}

View File

@ -91,7 +91,7 @@ export class StreamBadges {
let batteryLevel = '100%'; let batteryLevel = '100%';
let batteryLevelInt = 100; let batteryLevelInt = 100;
let isCharging = false; let isCharging = false;
if ('getBattery' in navigator) { if (STATES.browser.capabilities.batteryApi) {
try { try {
const bm = await (navigator as NavigatorBattery).getBattery(); const bm = await (navigator as NavigatorBattery).getBattery();
isCharging = bm.charging; isCharging = bm.charging;
@ -158,19 +158,26 @@ export class StreamBadges {
} }
#secondsToHm(seconds: number) { #secondsToHm(seconds: number) {
const h = Math.floor(seconds / 3600); let h = Math.floor(seconds / 3600);
const m = Math.floor(seconds % 3600 / 60) + 1; let m = Math.floor(seconds % 3600 / 60) + 1;
const hDisplay = h > 0 ? `${h}h`: ''; if (m === 60) {
const mDisplay = m > 0 ? `${m}m`: ''; h += 1;
return hDisplay + mDisplay; m = 0;
}
const output = [];
h > 0 && output.push(`${h}h`);
m > 0 && output.push(`${m}m`);
return output.join(' ');
} }
// https://stackoverflow.com/a/20732091 // https://stackoverflow.com/a/20732091
#humanFileSize(size: number) { #humanFileSize(size: number) {
const units = ['B', 'KB', 'MB', 'GB', 'TB']; const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024)); const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i]; return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
} }
@ -217,7 +224,7 @@ export class StreamBadges {
// Battery // Battery
let batteryLevel = ''; let batteryLevel = '';
if ('getBattery' in navigator) { if (STATES.browser.capabilities.batteryApi) {
batteryLevel = '100%'; batteryLevel = '100%';
} }
@ -331,7 +338,7 @@ export class StreamBadges {
// Get battery level // Get battery level
try { try {
'getBattery' in navigator && (navigator as NavigatorBattery).getBattery().then(bm => { STATES.browser.capabilities.batteryApi && (navigator as NavigatorBattery).getBattery().then(bm => {
streamBadges.startBatteryLevel = Math.round(bm.level * 100); streamBadges.startBatteryLevel = Math.round(bm.level * 100);
}); });
} catch(e) {} } catch(e) {}

View File

@ -0,0 +1,65 @@
import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
import { STATES } from "@utils/global";
import { UserAgent } from "@utils/user-agent";
import type { StreamPlayerOptions } from "../stream-player";
import { PrefKey } from "@/enums/pref-keys";
import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
export function onChangeVideoPlayerType() {
const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
const $videoProcessing = document.getElementById('bx_setting_video_processing') as HTMLSelectElement;
const $videoSharpness = document.getElementById('bx_setting_video_sharpness') as HTMLElement;
const $videoPowerPreference = document.getElementById('bx_setting_video_power_preference') as HTMLElement;
if (!$videoProcessing) {
return;
}
let isDisabled = false;
const $optCas = $videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement;
if (playerType === StreamPlayerType.WEBGL2) {
$optCas && ($optCas.disabled = false);
} else {
// Only allow USM when player type is Video
$videoProcessing.value = StreamVideoProcessing.USM;
setPref(PrefKey.VIDEO_PROCESSING, StreamVideoProcessing.USM);
$optCas && ($optCas.disabled = true);
if (UserAgent.isSafari()) {
isDisabled = true;
}
}
$videoProcessing.disabled = isDisabled;
$videoSharpness.dataset.disabled = isDisabled.toString();
// Hide Power Preference setting if renderer isn't WebGL2
$videoPowerPreference.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
updateVideoPlayer();
}
export function updateVideoPlayer() {
const streamPlayer = STATES.currentStream.streamPlayer;
if (!streamPlayer) {
return;
}
const options = {
processing: getPref(PrefKey.VIDEO_PROCESSING),
sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
saturation: getPref(PrefKey.VIDEO_SATURATION),
contrast: getPref(PrefKey.VIDEO_CONTRAST),
brightness: getPref(PrefKey.VIDEO_BRIGHTNESS),
} satisfies StreamPlayerOptions;
streamPlayer.setPlayerType(getPref(PrefKey.VIDEO_PLAYER_TYPE));
streamPlayer.updateOptions(options);
streamPlayer.refreshPlayer();
}
window.addEventListener('resize', updateVideoPlayer);

View File

@ -1,9 +1,9 @@
import { PrefKey } from "@utils/preferences"
import { BxEvent } from "@utils/bx-event" import { BxEvent } from "@utils/bx-event"
import { getPref } from "@utils/preferences"
import { CE } from "@utils/html" import { CE } from "@utils/html"
import { t } from "@utils/translation" import { t } from "@utils/translation"
import { STATES } from "@utils/global" import { STATES } from "@utils/global"
import { PrefKey } from "@/enums/pref-keys"
import { getPref } from "@/utils/settings-storages/global-settings-storage"
export enum StreamStat { export enum StreamStat {
PING = 'ping', PING = 'ping',
@ -39,6 +39,10 @@ export class StreamStats {
#quickGlanceObserver?: MutationObserver | null; #quickGlanceObserver?: MutationObserver | null;
constructor() {
this.#render();
}
start(glancing=false) { start(glancing=false) {
if (!this.isHidden() || (glancing && this.isGlancing())) { if (!this.isHidden() || (glancing && this.isGlancing())) {
return; return;
@ -85,11 +89,15 @@ export class StreamStats {
isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing'; isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing';
quickGlanceSetup() { quickGlanceSetup() {
if (this.#quickGlanceObserver) { if (!STATES.isPlaying || this.#quickGlanceObserver) {
return; return;
} }
const $uiContainer = document.querySelector('div[data-testid=ui-container]')!; const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
if (!$uiContainer) {
return;
}
this.#quickGlanceObserver = new MutationObserver((mutationList, observer) => { this.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
for (let record of mutationList) { for (let record of mutationList) {
if (record.attributeName && record.attributeName === 'aria-expanded') { if (record.attributeName && record.attributeName === 'aria-expanded') {
@ -135,10 +143,10 @@ export class StreamStats {
this.#$fps!.textContent = stat.framesPerSecond || 0; this.#$fps!.textContent = stat.framesPerSecond || 0;
// Packets Lost // Packets Lost
const packetsLost = stat.packetsLost; const packetsLost = Math.max(0, stat.packetsLost); // packetsLost can be negative, but we don't care about that
const packetsReceived = stat.packetsReceived; const packetsReceived = stat.packetsReceived;
const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2); const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
this.#$pl!.textContent = packetsLostPercentage === '0.00' ? packetsLost : `${packetsLost} (${packetsLostPercentage}%)`; this.#$pl!.textContent = packetsLostPercentage === '0.00' ? packetsLost.toString() : `${packetsLost} (${packetsLostPercentage}%)`;
// Frames dropped // Frames dropped
const framesDropped = stat.framesDropped; const framesDropped = stat.framesDropped;
@ -161,7 +169,12 @@ export class StreamStats {
const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime; const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime;
const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded; const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded;
const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000; const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000;
this.#$dt!.textContent = `${currentDecodeTime.toFixed(2)}ms`;
if (isNaN(currentDecodeTime)) {
this.#$dt!.textContent = '??ms';
} else {
this.#$dt!.textContent = `${currentDecodeTime.toFixed(2)}ms`;
}
if (PREF_STATS_CONDITIONAL_FORMATTING) { if (PREF_STATS_CONDITIONAL_FORMATTING) {
grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : ''; grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
@ -207,10 +220,6 @@ export class StreamStats {
} }
#render() { #render() {
if (this.#$container) {
return;
}
const stats = { const stats = {
[StreamStat.PING]: [t('stat-ping'), this.#$ping = CE('span', {}, '0')], [StreamStat.PING]: [t('stat-ping'), this.#$ping = CE('span', {}, '0')],
[StreamStat.FPS]: [t('stat-fps'), this.#$fps = CE('span', {}, '0')], [StreamStat.FPS]: [t('stat-fps'), this.#$fps = CE('span', {}, '0')],
@ -241,10 +250,6 @@ export class StreamStats {
} }
static setupEvents() { static setupEvents() {
window.addEventListener(BxEvent.STREAM_LOADING, e => {
StreamStats.getInstance().#render();
});
window.addEventListener(BxEvent.STREAM_PLAYING, e => { window.addEventListener(BxEvent.STREAM_PLAYING, e => {
const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE); const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE);
const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING); const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);

View File

@ -5,6 +5,7 @@ import { BxEvent } from "@utils/bx-event.ts";
import { t } from "@utils/translation.ts"; import { t } from "@utils/translation.ts";
import { StreamBadges } from "./stream-badges.ts"; import { StreamBadges } from "./stream-badges.ts";
import { StreamStats } from "./stream-stats.ts"; import { StreamStats } from "./stream-stats.ts";
import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog.ts";
function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) { function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
@ -34,7 +35,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
} }
}; };
if (STATES.browserHasTouchSupport) { if (STATES.browser.capabilities.touch) {
$container.addEventListener('transitionstart', onTransitionStart); $container.addEventListener('transitionstart', onTransitionStart);
$container.addEventListener('transitionend', onTransitionEnd); $container.addEventListener('transitionend', onTransitionEnd);
} }
@ -87,27 +88,6 @@ export function injectStreamMenuButtons() {
($screen as any).xObserving = true; ($screen as any).xObserving = true;
const $settingsDialog = document.querySelector('.bx-stream-settings-dialog')!;
const $parent = $screen.parentElement;
const hideSettingsFunc = (e?: MouseEvent | TouchEvent) => {
if (e) {
const $target = e.target as HTMLElement;
e.stopPropagation();
if ($target != $parent && $target.id !== 'MultiTouchSurface' && !$target.querySelector('#BabylonCanvasContainer-main')) {
return;
}
if ($target.id === 'MultiTouchSurface') {
$target.removeEventListener('touchstart', hideSettingsFunc);
}
}
// Hide Stream settings dialog
$settingsDialog.classList.add('bx-gone');
$parent?.removeEventListener('click', hideSettingsFunc);
// $parent.removeEventListener('touchstart', hideSettingsFunc);
}
let $btnStreamSettings: HTMLElement; let $btnStreamSettings: HTMLElement;
let $btnStreamStats: HTMLElement; let $btnStreamStats: HTMLElement;
const streamStats = StreamStats.getInstance(); const streamStats = StreamStats.getInstance();
@ -143,11 +123,6 @@ export function injectStreamMenuButtons() {
return; return;
} }
// Hide Stream Settings dialog when closing HUD
$btnCloseHud.addEventListener('click', e => {
$settingsDialog.classList.add('bx-gone');
});
// Create Refresh button from the Close button // Create Refresh button from the Close button
const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => { const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
confirm(t('confirm-reload-stream')) && window.location.reload(); confirm(t('confirm-reload-stream')) && window.location.reload();
@ -165,7 +140,6 @@ export function injectStreamMenuButtons() {
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]');
$menu?.appendChild(await StreamBadges.getInstance().render()); $menu?.appendChild(await StreamBadges.getInstance().render());
hideSettingsFunc();
return; return;
} }
@ -199,19 +173,13 @@ export function injectStreamMenuButtons() {
// Create Stream Settings button // Create Stream Settings button
if (!$btnStreamSettings) { if (!$btnStreamSettings) {
$btnStreamSettings = cloneStreamHudButton($orgButton, t('stream-settings'), BxIcon.STREAM_SETTINGS); $btnStreamSettings = cloneStreamHudButton($orgButton, t('better-xcloud'), BxIcon.BETTER_XCLOUD);
$btnStreamSettings.addEventListener('click', e => { $btnStreamSettings.addEventListener('click', e => {
hideGripHandle(); hideGripHandle();
e.preventDefault(); e.preventDefault();
// Show Stream Settings dialog // Show Stream Settings dialog
$settingsDialog.classList.remove('bx-gone'); SettingsNavigationDialog.getInstance().show();
$parent?.addEventListener('click', hideSettingsFunc);
//$parent.addEventListener('touchstart', hideSettingsFunc);
const $touchSurface = document.getElementById('MultiTouchSurface');
$touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideSettingsFunc);
}); });
} }
@ -249,37 +217,3 @@ export function injectStreamMenuButtons() {
}); });
observer.observe($screen, {subtree: true, childList: true}); observer.observe($screen, {subtree: true, childList: true});
} }
export function showStreamSettings(tabId: string) {
const $wrapper = document.querySelector('.bx-stream-settings-dialog');
if (!$wrapper) {
return;
}
// Select tab
if (tabId) {
const $tab = $wrapper.querySelector(`.bx-stream-settings-tabs svg[data-group=${tabId}]`);
$tab && $tab.dispatchEvent(new Event('click'));
}
$wrapper.classList.remove('bx-gone');
const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
if ($screen && $screen.parentElement) {
const $parent = $screen.parentElement;
if (!$parent || ($parent as any).bxClick) {
return;
}
($parent as any).bxClick = true;
const onClick = (e: Event) => {
$wrapper.classList.add('bx-gone');
($parent as any).bxClick = false;
$parent.removeEventListener('click', onClick);
};
$parent.addEventListener('click', onClick);
}
}

View File

@ -1,14 +1,27 @@
import { STATES } from "@utils/global";
import { escapeHtml } from "@utils/html"; import { escapeHtml } from "@utils/html";
import { Toast } from "@utils/toast"; import { Toast } from "@utils/toast";
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags"; import { NATIVE_FETCH } from "@utils/bx-flags";
import { getPref, PrefKey } from "@utils/preferences";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { BxLogger } from "@utils/bx-logger"; import { BxLogger } from "@utils/bx-logger";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
const LOG_TAG = 'TouchController'; const LOG_TAG = 'TouchController';
type TouchControlLayout = {
name: string,
author: string,
content: any,
};
type TouchControlDefinition = {
name: string,
product_id: string,
default_layout: string,
layouts: Record<string, TouchControlLayout>,
};
export class TouchController { export class TouchController {
static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', { static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
data: JSON.stringify({ data: JSON.stringify({
@ -28,25 +41,40 @@ export class TouchController {
static #$style: HTMLStyleElement; static #$style: HTMLStyleElement;
static #enable = false; static #enabled = false;
static #dataChannel: RTCDataChannel | null; static #dataChannel: RTCDataChannel | null;
static #customLayouts: {[index: string]: any} = {}; static #customLayouts: Record<string, TouchControlDefinition | null> = {};
static #baseCustomLayouts: {[index: string]: any} = {}; static #baseCustomLayouts: Record<string, Record<string, TouchControlLayout>> = {};
static #currentLayoutId: string; static #currentLayoutId: string;
static #customList: string[]; static #customList: string[];
static #xboxTitleId: string | null = null;
static setXboxTitleId(xboxTitleId: string) {
TouchController.#xboxTitleId = xboxTitleId;
}
static getCustomLayouts() {
const xboxTitleId = TouchController.#xboxTitleId;
if (!xboxTitleId) {
return null;
}
return TouchController.#customLayouts[xboxTitleId];
}
static enable() { static enable() {
TouchController.#enable = true; TouchController.#enabled = true;
} }
static disable() { static disable() {
TouchController.#enable = false; TouchController.#enabled = false;
} }
static isEnabled() { static isEnabled() {
return TouchController.#enable; return TouchController.#enabled;
} }
static #showDefault() { static #showDefault() {
@ -70,8 +98,9 @@ export class TouchController {
} }
static reset() { static reset() {
TouchController.#enable = false; TouchController.#enabled = false;
TouchController.#dataChannel = null; TouchController.#dataChannel = null;
TouchController.#xboxTitleId = null;
TouchController.#$style && (TouchController.#$style.textContent = ''); TouchController.#$style && (TouchController.#$style.textContent = '');
} }
@ -83,12 +112,18 @@ export class TouchController {
} }
static #dispatchLayouts(data: any) { static #dispatchLayouts(data: any) {
BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, { // Load default layout
data: data, TouchController.applyCustomLayout(null, 1000);
});
BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED);
}; };
static async getCustomLayouts(xboxTitleId: string, retries: number=1) { static async requestCustomLayouts(retries: number=1) {
const xboxTitleId = TouchController.#xboxTitleId;
if (!xboxTitleId) {
return;
}
if (xboxTitleId in TouchController.#customLayouts) { if (xboxTitleId in TouchController.#customLayouts) {
TouchController.#dispatchLayouts(TouchController.#customLayouts[xboxTitleId]); TouchController.#dispatchLayouts(TouchController.#customLayouts[xboxTitleId]);
return; return;
@ -102,7 +137,7 @@ export class TouchController {
return; return;
} }
const baseUrl = `https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts${BX_FLAGS.UseDevTouchLayout ? '/dev' : ''}`; const baseUrl = 'https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts';
const url = `${baseUrl}/${xboxTitleId}.json`; const url = `${baseUrl}/${xboxTitleId}.json`;
// Get layout info // Get layout info
@ -137,17 +172,17 @@ export class TouchController {
window.setTimeout(() => TouchController.#dispatchLayouts(json), 1000); window.setTimeout(() => TouchController.#dispatchLayouts(json), 1000);
} catch (e) { } catch (e) {
// Retry // Retry
TouchController.getCustomLayouts(xboxTitleId, retries + 1); TouchController.requestCustomLayouts(retries + 1);
} }
} }
static loadCustomLayout(xboxTitleId: string, layoutId: string, delay: number=0) { static applyCustomLayout(layoutId: string | null, delay: number=0) {
// TODO: fix this // TODO: fix this
if (!window.BX_EXPOSED.touchLayoutManager) { if (!window.BX_EXPOSED.touchLayoutManager) {
const listener = (e: Event) => { const listener = (e: Event) => {
window.removeEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener); window.removeEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
if (TouchController.#enable) { if (TouchController.#enabled) {
TouchController.loadCustomLayout(xboxTitleId, layoutId, 0); TouchController.applyCustomLayout(layoutId, 0);
} }
}; };
window.addEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener); window.addEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
@ -155,13 +190,30 @@ export class TouchController {
return; return;
} }
const xboxTitleId = TouchController.#xboxTitleId;
if (!xboxTitleId) {
BxLogger.error(LOG_TAG, 'Invalid xboxTitleId');
return;
}
if (!layoutId) {
// Get default layout ID from definition
layoutId = TouchController.#customLayouts[xboxTitleId]?.default_layout || null;
}
if (!layoutId) {
BxLogger.error(LOG_TAG, 'Invalid layoutId, show default controller');
TouchController.#enabled && TouchController.#showDefault();
return;
}
const layoutChanged = TouchController.#currentLayoutId !== layoutId; const layoutChanged = TouchController.#currentLayoutId !== layoutId;
TouchController.#currentLayoutId = layoutId; TouchController.#currentLayoutId = layoutId;
// Get layout data // Get layout data
const layoutData = TouchController.#customLayouts[xboxTitleId]; const layoutData = TouchController.#customLayouts[xboxTitleId];
if (!xboxTitleId || !layoutId || !layoutData) { if (!xboxTitleId || !layoutId || !layoutData) {
TouchController.#enable && TouchController.#showDefault(); TouchController.#enabled && TouchController.#showDefault();
return; return;
} }
@ -223,7 +275,7 @@ export class TouchController {
touchLayoutManager && touchLayoutManager.changeLayoutForScope({ touchLayoutManager && touchLayoutManager.changeLayoutForScope({
type: 'showLayout', type: 'showLayout',
scope: '' + STATES.currentStream?.xboxTitleId, scope: '' + TouchController.#xboxTitleId,
subscope: 'base', subscope: 'base',
layout: { layout: {
id: 'System.Standard', id: 'System.Standard',
@ -249,7 +301,7 @@ export class TouchController {
// Apply touch controller's style // Apply touch controller's style
let filter = ''; let filter = '';
if (TouchController.#enable) { if (TouchController.#enabled) {
if (PREF_STYLE_STANDARD === 'white') { if (PREF_STYLE_STANDARD === 'white') {
filter = 'grayscale(1) brightness(2)'; filter = 'grayscale(1) brightness(2)';
} else if (PREF_STYLE_STANDARD === 'muted') { } else if (PREF_STYLE_STANDARD === 'muted') {
@ -280,9 +332,9 @@ export class TouchController {
// Dispatch a message to display generic touch controller // Dispatch a message to display generic touch controller
if (msg.data.includes('touchcontrols/showtitledefault')) { if (msg.data.includes('touchcontrols/showtitledefault')) {
if (TouchController.#enable) { if (TouchController.#enabled) {
if (focused) { if (focused) {
TouchController.getCustomLayouts(STATES.currentStream?.xboxTitleId!); TouchController.requestCustomLayouts();
} else { } else {
TouchController.#showDefault(); TouchController.#showDefault();
} }
@ -300,7 +352,7 @@ export class TouchController {
TouchController.#show(); TouchController.#show();
} }
STATES.currentStream.xboxTitleId = parseInt(json.titleid, 16).toString(); TouchController.setXboxTitleId(parseInt(json.titleid, 16).toString());
} }
} catch (e) { } catch (e) {
BxLogger.error(LOG_TAG, 'Load custom layout', e); BxLogger.error(LOG_TAG, 'Load custom layout', e);

View File

@ -0,0 +1,608 @@
import { GamepadKey } from "@/enums/mkb";
import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
import { BxEvent } from "@/utils/bx-event";
import { STATES } from "@/utils/global";
import { CE } from "@/utils/html";
import { setNearby } from "@/utils/navigation-utils";
export enum NavigationDirection {
UP = 1,
RIGHT,
DOWN,
LEFT,
}
export type NavigationNearbyElements = Partial<{
orientation: 'horizontal' | 'vertical',
selfOrientation: 'horizontal' | 'vertical',
focus: NavigationElement | (() => boolean),
loop: ((direction: NavigationDirection) => boolean),
[NavigationDirection.UP]: NavigationElement | (() => void) | 'previous' | 'next',
[NavigationDirection.DOWN]: NavigationElement | (() => void) | 'previous' | 'next',
[NavigationDirection.LEFT]: NavigationElement | (() => void) | 'previous' | 'next',
[NavigationDirection.RIGHT]: NavigationElement | (() => void) | 'previous' | 'next',
}>;
export interface NavigationElement extends HTMLElement {
nearby?: NavigationNearbyElements;
}
export abstract class NavigationDialog {
abstract getDialog(): NavigationDialog;
abstract getContent(): HTMLElement;
abstract focusIfNeeded(): void;
abstract $container: HTMLElement;
dialogManager: NavigationDialogManager;
constructor() {
this.dialogManager = NavigationDialogManager.getInstance();
}
show() {
NavigationDialogManager.getInstance().show(this);
const $currentFocus = this.getFocusedElement();
// If not focusing on any element
if (!$currentFocus) {
this.focusIfNeeded();
}
}
hide() {
NavigationDialogManager.getInstance().hide();
}
getFocusedElement() {
const $activeElement = document.activeElement as HTMLElement;
if (!$activeElement) {
return null;
}
// Check if focused element is a child of dialog
if (this.$container.contains($activeElement)) {
return $activeElement;
}
return null;
}
onBeforeMount(): void {}
onMounted(): void {}
onBeforeUnmount(): void {}
onUnmounted(): void {}
handleKeyPress(key: string): boolean {
return false;
}
handleGamepad(button: GamepadKey): boolean {
return true;
}
}
export class NavigationDialogManager {
private static instance: NavigationDialogManager;
public static getInstance(): NavigationDialogManager {
if (!NavigationDialogManager.instance) {
NavigationDialogManager.instance = new NavigationDialogManager();
}
return NavigationDialogManager.instance;
}
private static readonly GAMEPAD_POLLING_INTERVAL = 50;
private static readonly GAMEPAD_KEYS = [
GamepadKey.UP,
GamepadKey.DOWN,
GamepadKey.LEFT,
GamepadKey.RIGHT,
GamepadKey.A,
GamepadKey.B,
GamepadKey.LB,
GamepadKey.RB,
GamepadKey.LT,
GamepadKey.RT,
];
private static readonly GAMEPAD_DIRECTION_MAP = {
[GamepadKey.UP]: NavigationDirection.UP,
[GamepadKey.DOWN]: NavigationDirection.DOWN,
[GamepadKey.LEFT]: NavigationDirection.LEFT,
[GamepadKey.RIGHT]: NavigationDirection.RIGHT,
[GamepadKey.LS_UP]: NavigationDirection.UP,
[GamepadKey.LS_DOWN]: NavigationDirection.DOWN,
[GamepadKey.LS_LEFT]: NavigationDirection.LEFT,
[GamepadKey.LS_RIGHT]: NavigationDirection.RIGHT,
};
private static readonly SIBLING_PROPERTY_MAP = {
'horizontal': {
[NavigationDirection.LEFT]: 'previousElementSibling',
[NavigationDirection.RIGHT]: 'nextElementSibling',
},
'vertical': {
[NavigationDirection.UP]: 'previousElementSibling',
[NavigationDirection.DOWN]: 'nextElementSibling',
},
};
private gamepadPollingIntervalId: number | null = null;
private gamepadLastStates: Array<[number, GamepadKey, boolean] | null> = [];
private gamepadHoldingIntervalId: number | null = null;
private $overlay: HTMLElement;
private $container: HTMLElement;
private dialog: NavigationDialog | null = null;
constructor() {
this.$overlay = CE('div', {class: 'bx-navigation-dialog-overlay bx-gone'});
this.$overlay.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
this.hide();
});
document.documentElement.appendChild(this.$overlay);
this.$container = CE('div', {class: 'bx-navigation-dialog bx-gone'});
document.documentElement.appendChild(this.$container);
// Hide dialog when the Guide menu is shown
window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
}
handleEvent(event: Event) {
switch (event.type) {
case 'keydown':
const $target = event.target as HTMLElement;
const keyboardEvent = event as KeyboardEvent;
const keyCode = keyboardEvent.code || keyboardEvent.key;
let handled = this.dialog?.handleKeyPress(keyCode);
if (handled) {
event.preventDefault();
event.stopPropagation();
return;
}
if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
handled = true;
this.focusDirection(keyCode === 'ArrowUp' ? NavigationDirection.UP : NavigationDirection.DOWN);
} else if (keyCode === 'ArrowLeft' || keyCode === 'ArrowRight') {
if (!($target instanceof HTMLInputElement && ($target.type === 'text' || $target.type === 'range'))) {
handled = true;
this.focusDirection(keyCode === 'ArrowLeft' ? NavigationDirection.LEFT : NavigationDirection.RIGHT);
}
} else if (keyCode === 'Enter' || keyCode === 'NumpadEnter' || keyCode === 'Space') {
if (!($target instanceof HTMLInputElement && $target.type === 'text')) {
handled = true;
$target.dispatchEvent(new MouseEvent('click'));
}
} else if (keyCode === 'Escape') {
handled = true;
this.hide();
}
if (handled) {
event.preventDefault();
event.stopPropagation();
}
break;
}
}
isShowing() {
return this.$container && !this.$container.classList.contains('bx-gone');
}
private pollGamepad() {
const gamepads = window.navigator.getGamepads();
for (const gamepad of gamepads) {
if (!gamepad || !gamepad.connected) {
continue;
}
// Ignore virtual controller
if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
continue;
}
const axes = gamepad.axes;
const buttons = gamepad.buttons;
let releasedButton: GamepadKey | null = null;
let heldButton: GamepadKey | null = null;
let lastState = this.gamepadLastStates[gamepad.index];
let lastTimestamp;
let lastKey;
let lastKeyPressed;
if (lastState) {
[lastTimestamp, lastKey, lastKeyPressed] = lastState;
}
if (lastTimestamp && lastTimestamp === gamepad.timestamp) {
continue;
}
for (const key of NavigationDialogManager.GAMEPAD_KEYS) {
// Key released
if (lastKey === key && !buttons[key].pressed) {
releasedButton = key;
break;
} else if (buttons[key].pressed) {
// Key pressed
heldButton = key;
break;
}
}
// If not pressing any key => check analog sticks
if (heldButton === null && releasedButton === null && axes && axes.length >= 2) {
// [LEFT left-right, LEFT up-down]
if (lastKey) {
const releasedHorizontal = Math.abs(axes[0]) < 0.1 && (lastKey === GamepadKey.LS_LEFT || lastKey === GamepadKey.LS_RIGHT);
const releasedVertical = Math.abs(axes[1]) < 0.1 && (lastKey === GamepadKey.LS_UP || lastKey === GamepadKey.LS_DOWN);
if (releasedHorizontal || releasedVertical) {
releasedButton = lastKey;
} else {
heldButton = lastKey;
}
} else {
if (axes[0] < -0.5) {
heldButton = GamepadKey.LS_LEFT;
} else if (axes[0] > 0.5) {
heldButton = GamepadKey.LS_RIGHT;
} else if (axes[1] < -0.5) {
heldButton = GamepadKey.LS_UP;
} else if (axes[1] > 0.5) {
heldButton = GamepadKey.LS_DOWN;
}
}
}
// Save state if holding a button
if (heldButton !== null) {
this.gamepadLastStates[gamepad.index] = [gamepad.timestamp, heldButton, false];
this.clearGamepadHoldingInterval();
// Only set turbo for d-pad and stick
if (NavigationDialogManager.GAMEPAD_DIRECTION_MAP[heldButton as keyof typeof NavigationDialogManager.GAMEPAD_DIRECTION_MAP]) {
this.gamepadHoldingIntervalId = window.setInterval(() => {
const lastState = this.gamepadLastStates[gamepad.index];
// Avoid pressing the incorrect key
if (lastState) {
[lastTimestamp, lastKey, lastKeyPressed] = lastState;
if (lastKey === heldButton) {
this.handleGamepad(gamepad, heldButton);
return;
}
}
this.clearGamepadHoldingInterval();
}, 200);
}
continue;
}
// Continue if the button hasn't been released
if (releasedButton === null) {
this.clearGamepadHoldingInterval();
continue;
}
// Button released
this.gamepadLastStates[gamepad.index] = null;
if (lastKeyPressed) {
return;
}
if (releasedButton === GamepadKey.A) {
document.activeElement && document.activeElement.dispatchEvent(new MouseEvent('click'));
return;
} else if (releasedButton === GamepadKey.B) {
this.hide();
return;
}
if (this.handleGamepad(gamepad, releasedButton)) {
return;
}
}
}
private handleGamepad(gamepad: Gamepad, key: GamepadKey): boolean {
let handled = this.dialog?.handleGamepad(key);
if (handled) {
return true;
}
// Handle d-pad & sticks
let direction = NavigationDialogManager.GAMEPAD_DIRECTION_MAP[key as keyof typeof NavigationDialogManager.GAMEPAD_DIRECTION_MAP];
if (!direction) {
return false;
}
if (document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'range') {
const $range = document.activeElement;
if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
$range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
$range.dispatchEvent(new InputEvent('input'));
handled = true;
}
}
if (!handled) {
this.focusDirection(direction);
}
this.gamepadLastStates[gamepad.index] && (this.gamepadLastStates[gamepad.index]![2] = true);
return true;
}
private clearGamepadHoldingInterval() {
this.gamepadHoldingIntervalId && window.clearInterval(this.gamepadHoldingIntervalId);
this.gamepadHoldingIntervalId = null;
}
show(dialog: NavigationDialog) {
this.clearGamepadHoldingInterval();
BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_SHOWN);
// Stop xCloud's navigation polling
(window as any).BX_EXPOSED.disableGamepadPolling = true;
// Lock scroll bar
document.body.classList.add('bx-no-scroll');
// Show overlay
this.$overlay.classList.remove('bx-gone');
if (STATES.isPlaying) {
this.$overlay.classList.add('bx-invisible');
}
// Unmount current dialog
this.unmountCurrentDialog();
// Setup new dialog
this.dialog = dialog;
dialog.onBeforeMount();
this.$container.appendChild(dialog.getContent());
dialog.onMounted();
// Show content
this.$container.classList.remove('bx-gone');
// Add event listeners
this.$container.addEventListener('keydown', this);
// Start gamepad polling
this.startGamepadPolling();
}
hide() {
this.clearGamepadHoldingInterval();
// Unlock scroll bar
document.body.classList.remove('bx-no-scroll');
BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_DISMISSED);
// Hide content
this.$overlay.classList.add('bx-gone');
this.$overlay.classList.remove('bx-invisible');
this.$container.classList.add('bx-gone');
// Remove event listeners
this.$container.removeEventListener('keydown', this);
// Stop gamepad polling
this.stopGamepadPolling();
// Unmount dialog
this.unmountCurrentDialog();
// Enable xCloud's navigation polling
(window as any).BX_EXPOSED.disableGamepadPolling = false;
}
focus($elm: NavigationElement | null): boolean {
if (!$elm) {
return false;
}
// console.log('focus', $elm);
if ($elm.nearby && $elm.nearby.focus) {
if ($elm.nearby.focus instanceof HTMLElement) {
return this.focus($elm.nearby.focus);
} else {
return $elm.nearby.focus();
}
}
$elm.focus();
return $elm === document.activeElement;
}
private getOrientation($elm: NavigationElement): NavigationNearbyElements['orientation'] {
const nearby = $elm.nearby || {};
if (nearby.selfOrientation) {
return nearby.selfOrientation;
}
let orientation;
let $current = $elm.parentElement! as NavigationElement;
while ($current !== this.$container) {
const tmp = $current.nearby?.orientation;
if ($current.nearby && tmp) {
orientation = tmp;
break;
}
$current = $current.parentElement!;
}
orientation = orientation || 'vertical';
setNearby($elm, {
selfOrientation: orientation,
});
return orientation;
}
findNextTarget($focusing: HTMLElement | null, direction: NavigationDirection, checkParent = false, checked: Array<HTMLElement> = []): HTMLElement | null {
if (!$focusing || $focusing === this.$container) {
return null;
}
if (checked.includes($focusing)) {
return null;
}
checked.push($focusing);
let $target: HTMLElement = $focusing;
const $parent = $target.parentElement;
const nearby = ($target as NavigationElement).nearby || {};
const orientation = this.getOrientation($target)!;
// @ts-ignore
let siblingProperty = (NavigationDialogManager.SIBLING_PROPERTY_MAP[orientation])[direction];
if (siblingProperty) {
let $sibling = $target as any;
while ($sibling[siblingProperty]) {
$sibling = $sibling[siblingProperty] as HTMLElement;
const $focusable = this.findFocusableElement($sibling, direction);
if ($focusable) {
return $focusable;
}
}
}
if (nearby.loop) {
// Loop
if (nearby.loop(direction)) {
return null;
}
}
if (checkParent) {
return this.findNextTarget($parent, direction, checkParent, checked);
}
return null;
}
findFocusableElement($elm: HTMLElement | null, direction?: NavigationDirection): HTMLElement | null {
if (!$elm) {
return null;
}
// Ignore disabled element
const isDisabled = !!($elm as any).disabled;
if (isDisabled) {
return null;
}
const rect = $elm.getBoundingClientRect();
const isVisible = !!rect.width && !!rect.height;
// Ignore hidden element
if (!isVisible) {
return null;
}
// Accept element with tabIndex
if ($elm.tabIndex > -1) {
return $elm;
}
const focus = ($elm as NavigationElement).nearby?.focus;
if (focus) {
if (focus instanceof HTMLElement) {
return this.findFocusableElement(focus, direction);
} else if (typeof focus === 'function') {
if (focus()) {
return document.activeElement as HTMLElement;
}
}
}
// Look for child focusable elemnet
const children = Array.from($elm.children);
// Search from right to left if the orientation is horizontal
const orientation = ($elm as NavigationElement).nearby?.orientation;
if (orientation === 'horizontal' || (orientation === 'vertical' && direction === NavigationDirection.UP)) {
children.reverse();
}
for (const $child of children) {
if (!$child || !($child instanceof HTMLElement)) {
return null;
}
const $target = this.findFocusableElement($child, direction);
if ($target) {
return $target;
}
}
return null;
}
private startGamepadPolling() {
this.stopGamepadPolling();
this.gamepadPollingIntervalId = window.setInterval(this.pollGamepad.bind(this), NavigationDialogManager.GAMEPAD_POLLING_INTERVAL);
}
private stopGamepadPolling() {
this.gamepadLastStates = [];
this.gamepadPollingIntervalId && window.clearInterval(this.gamepadPollingIntervalId);
this.gamepadPollingIntervalId = null;
}
private focusDirection(direction: NavigationDirection) {
const dialog = this.dialog;
if (!dialog) {
return;
}
// Get current focused element
const $focusing = dialog.getFocusedElement();
if (!$focusing || !this.findFocusableElement($focusing, direction)) {
dialog.focusIfNeeded();
return null;
}
const $target = this.findNextTarget($focusing, direction, true);
this.focus($target);
}
private unmountCurrentDialog() {
const dialog = this.dialog;
dialog && dialog.onBeforeUnmount();
this.$container.firstChild?.remove();
dialog && dialog.onUnmounted();
this.dialog = null;
}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,87 @@
import { BxEvent } from "@/utils/bx-event";
import { BxIcon } from "@/utils/bx-icon";
import { CE, createSvgIcon, getReactProps } from "@/utils/html";
import { XcloudApi } from "@/utils/xcloud-api";
export class GameTile {
static #timeout: number | null;
static #secondsToHms(seconds: number) {
let h = Math.floor(seconds / 3600);
seconds %= 3600;
let m = Math.floor(seconds / 60);
let s = seconds % 60;
const output = [];
h > 0 && output.push(`${h}h`);
m > 0 && output.push(`${m}m`);
if (s > 0 || output.length === 0) {
output.push(`${s}s`);
}
return output.join(' ');
}
static async #showWaitTime($elm: HTMLElement, productId: string) {
let totalWaitTime;
const api = XcloudApi.getInstance();
const info = await api.getTitleInfo(productId);
if (info) {
const waitTime = await api.getWaitTime(info.titleId);
if (waitTime) {
totalWaitTime = waitTime.estimatedAllocationTimeInSeconds;
}
}
if (typeof totalWaitTime === 'number' && $elm.isConnected) {
const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
createSvgIcon(BxIcon.PLAYTIME),
CE('span', {}, GameTile.#secondsToHms(totalWaitTime)),
);
$elm.insertAdjacentElement('afterbegin', $div);
}
}
static requestWaitTime($elm: HTMLElement, productId: string) {
GameTile.#timeout && clearTimeout(GameTile.#timeout);
GameTile.#timeout = window.setTimeout(async () => {
if (!($elm as any).hasWaitTime) {
($elm as any).hasWaitTime = true;
GameTile.#showWaitTime($elm, productId);
}
}, 1000);
}
static setup() {
window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
let productId;
const $elm = (e as any).element;
try {
if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
let props = getReactProps($elm.parentElement);
// When context menu is enabled
if (Array.isArray(props.children)) {
productId = props.children[0].props.productId;
} else {
productId = props.children.props.productId;
}
} else if ($elm.tagName === 'A' && $elm.className.includes('GameItem')) {
let props = getReactProps($elm.parentElement);
props = props.children.props;
if (props.location !== 'NonStreamableGameItem') {
if ('productId' in props) {
productId = props.productId;
} else {
// Search page
productId = props.children.props.productId;
}
}
}
} catch (e) {}
productId && GameTile.requestWaitTime($elm, productId);
});
}
}

View File

@ -1,410 +0,0 @@
import { STATES, AppInterface, SCRIPT_HOME, SCRIPT_VERSION } from "@utils/global";
import { CE, createButton, ButtonStyle } from "@utils/html";
import { BxIcon } from "@utils/bx-icon";
import { getPreferredServerRegion } from "@utils/region";
import { UserAgent, UserAgentProfile } from "@utils/user-agent";
import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/preferences";
import { t, Translations } from "@utils/translation";
import { PatcherCache } from "../patcher";
const SETTINGS_UI = {
'Better xCloud': {
items: [
PrefKey.BETTER_XCLOUD_LOCALE,
PrefKey.REMOTE_PLAY_ENABLED,
],
},
[t('server')]: {
items: [
PrefKey.SERVER_REGION,
PrefKey.STREAM_PREFERRED_LOCALE,
PrefKey.PREFER_IPV6_SERVER,
],
},
[t('stream')]: {
items: [
PrefKey.STREAM_TARGET_RESOLUTION,
PrefKey.STREAM_CODEC_PROFILE,
PrefKey.BITRATE_VIDEO_MAX,
PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
PrefKey.SCREENSHOT_APPLY_FILTERS,
PrefKey.AUDIO_MIC_ON_PLAYING,
PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
PrefKey.STREAM_COMBINE_SOURCES,
],
},
[t('game-bar')]: {
items: [
PrefKey.GAME_BAR_POSITION,
],
},
[t('local-co-op')]: {
items: [
PrefKey.LOCAL_CO_OP_ENABLED,
],
},
[t('mouse-and-keyboard')]: {
items: [
PrefKey.NATIVE_MKB_ENABLED,
PrefKey.MKB_ENABLED,
PrefKey.MKB_HIDE_IDLE_CURSOR,
],
},
[t('touch-controller')]: {
note: !STATES.hasTouchSupport ? '⚠️ ' + t('device-unsupported-touch') : null,
unsupported: !STATES.hasTouchSupport,
items: [
PrefKey.STREAM_TOUCH_CONTROLLER,
PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF,
PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY,
PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
],
},
[t('loading-screen')]: {
items: [
PrefKey.UI_LOADING_SCREEN_GAME_ART,
PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
PrefKey.UI_LOADING_SCREEN_ROCKET,
],
},
[t('ui')]: {
items: [
PrefKey.UI_LAYOUT,
PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
PrefKey.STREAM_SIMPLIFY_MENU,
PrefKey.SKIP_SPLASH_VIDEO,
!AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
PrefKey.HIDE_DOTS_ICON,
PrefKey.REDUCE_ANIMATIONS,
],
},
[t('other')]: {
items: [
PrefKey.BLOCK_SOCIAL_FEATURES,
PrefKey.BLOCK_TRACKING,
],
},
[t('advanced')]: {
items: [
PrefKey.USER_AGENT_PROFILE,
],
},
};
export function setupSettingsUi() {
// Avoid rendering the Settings multiple times
if (document.querySelector('.bx-settings-container')) {
return;
}
const PREF_PREFERRED_REGION = getPreferredServerRegion();
const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
let $btnReload: HTMLButtonElement;
// Setup Settings UI
const $container = CE<HTMLElement>('div', {
'class': 'bx-settings-container bx-gone',
});
let $updateAvailable;
const $wrapper = CE<HTMLElement>('div', {'class': 'bx-settings-wrapper'},
CE<HTMLElement>('div', {'class': 'bx-settings-title-wrapper'},
CE('a', {
'class': 'bx-settings-title',
'href': SCRIPT_HOME,
'target': '_blank',
}, 'Better xCloud ' + SCRIPT_VERSION),
createButton({
icon: BxIcon.QUESTION,
style: ButtonStyle.FOCUSABLE,
label: t('help'),
url: 'https://better-xcloud.github.io/features/',
}),
)
);
$updateAvailable = CE('a', {
'class': 'bx-settings-update bx-gone',
'href': 'https://github.com/redphx/better-xcloud/releases',
'target': '_blank',
});
$wrapper.appendChild($updateAvailable);
// Show new version indicator
if (PREF_LATEST_VERSION && PREF_LATEST_VERSION != SCRIPT_VERSION) {
$updateAvailable.textContent = `🌟 Version ${PREF_LATEST_VERSION} available`;
$updateAvailable.classList.remove('bx-gone');
}
if (AppInterface) {
// Show Android app settings button
const $btn = createButton({
label: t('android-app-settings'),
icon: BxIcon.STREAM_SETTINGS,
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
AppInterface.openAppSettings && AppInterface.openAppSettings();
},
});
$wrapper.appendChild($btn);
} else {
// Show link to Android app
const userAgent = UserAgent.getDefault().toLowerCase();
if (userAgent.includes('android')) {
const $btn = createButton({
label: '🔥 ' + t('install-android'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
url: 'https://better-xcloud.github.io/android',
});
$wrapper.appendChild($btn);
}
}
const onChange = async (e: Event) => {
// Clear PatcherCache;
PatcherCache.clear();
$btnReload.classList.add('bx-danger');
// Highlight the Settings button in the Header to remind user to reload the page
const $btnHeaderSettings = document.querySelector('.bx-header-settings-button');
$btnHeaderSettings && $btnHeaderSettings.classList.add('bx-danger');
if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
// Update locale
Translations.refreshCurrentLocale();
await Translations.updateTranslations();
$btnReload.textContent = t('settings-reloading');
$btnReload.click();
}
};
// Render settings
for (let groupLabel in SETTINGS_UI) {
const $group = CE('span', {'class': 'bx-settings-group-label'}, groupLabel);
// Render note
if (SETTINGS_UI[groupLabel].note) {
const $note = CE('b', {}, SETTINGS_UI[groupLabel].note);
$group.appendChild($note);
}
$wrapper.appendChild($group);
// Don't render settings if this is an unsupported feature
if (SETTINGS_UI[groupLabel].unsupported) {
continue;
}
const settingItems = SETTINGS_UI[groupLabel].items;
for (let settingId of settingItems) {
// Don't render custom settings
if (!settingId) {
continue;
}
const setting = Preferences.SETTINGS[settingId];
if (!setting) {
continue;
}
let settingLabel = setting.label;
let settingNote = setting.note || '';
// Add Experimental text
if (setting.experimental) {
settingLabel = '🧪 ' + settingLabel;
if (!settingNote) {
settingNote = t('experimental')
} else {
settingNote = `${t('experimental')}: ${settingNote}`
}
}
let $control: any;
let $inpCustomUserAgent: HTMLInputElement;
let labelAttrs: any = {
tabindex: '-1',
};
if (settingId === PrefKey.USER_AGENT_PROFILE) {
let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
$inpCustomUserAgent = CE('input', {
id: `bx_setting_inp_${settingId}`,
type: 'text',
placeholder: defaultUserAgent,
'class': 'bx-settings-custom-user-agent',
});
$inpCustomUserAgent.addEventListener('change', e => {
const profile = $control.value;
const custom = (e.target as HTMLInputElement).value.trim();
UserAgent.updateStorage(profile, custom);
onChange(e);
});
$control = toPrefElement(PrefKey.USER_AGENT_PROFILE, (e: Event) => {
const value = (e.target as HTMLInputElement).value as UserAgentProfile;
let isCustom = value === UserAgentProfile.CUSTOM;
let userAgent = UserAgent.get(value as UserAgentProfile);
UserAgent.updateStorage(value);
$inpCustomUserAgent.value = userAgent;
$inpCustomUserAgent.readOnly = !isCustom;
$inpCustomUserAgent.disabled = !isCustom;
!(e.target as HTMLInputElement).disabled && onChange(e);
});
} else if (settingId === PrefKey.SERVER_REGION) {
let selectedValue;
$control = CE<HTMLSelectElement>('select', {
id: `bx_setting_${settingId}`,
title: settingLabel,
tabindex: 0,
});
$control.name = $control.id;
$control.addEventListener('change', (e: Event) => {
setPref(settingId, (e.target as HTMLSelectElement).value);
onChange(e);
});
selectedValue = PREF_PREFERRED_REGION;
setting.options = {};
for (let regionName in STATES.serverRegions) {
const region = STATES.serverRegions[regionName];
let value = regionName;
let label = `${region.shortName} - ${regionName}`;
if (region.isDefault) {
label += ` (${t('default')})`;
value = 'default';
if (selectedValue === regionName) {
selectedValue = 'default';
}
}
setting.options[value] = label;
}
for (let value in setting.options) {
const label = setting.options[value];
const $option = CE('option', {value: value}, label);
$control.appendChild($option);
}
// Select preferred region
$control.value = selectedValue;
} else {
if (settingId === PrefKey.BETTER_XCLOUD_LOCALE) {
$control = toPrefElement(settingId, (e: Event) => {
localStorage.setItem('better_xcloud_locale', (e.target as HTMLSelectElement).value);
onChange(e);
});
} else {
$control = toPrefElement(settingId, onChange);
}
}
if (!!$control.id) {
labelAttrs['for'] = $control.id;
} else {
labelAttrs['for'] = `bx_setting_${settingId}`;
}
// Disable unsupported settings
if (setting.unsupported) {
($control as HTMLInputElement).disabled = true;
}
// Make disabled control elements un-focusable
if ($control.disabled && !!$control.getAttribute('tabindex')) {
$control.setAttribute('tabindex', -1);
}
const $label = CE('label', labelAttrs, settingLabel);
if (settingNote) {
$label.appendChild(CE('b', {}, settingNote));
}
const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
$label,
$control,
);
$wrapper.appendChild($elm);
// Add User-Agent input
if (settingId === PrefKey.USER_AGENT_PROFILE) {
$wrapper.appendChild($inpCustomUserAgent!);
// Trigger 'change' event
$control.disabled = true;
$control.dispatchEvent(new Event('change'));
$control.disabled = false;
}
}
}
// Setup Reload button
$btnReload = createButton({
label: t('settings-reload'),
classes: ['bx-settings-reload-button'],
style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH | ButtonStyle.TALL,
onClick: e => {
window.location.reload();
$btnReload.disabled = true;
$btnReload.textContent = t('settings-reloading');
},
});
$btnReload.setAttribute('tabindex', '0');
$wrapper.appendChild($btnReload);
// Donation link
const $donationLink = CE('a', {
'class': 'bx-donation-link',
href: 'https://ko-fi.com/redphx',
target: '_blank',
tabindex: 0,
}, `❤️ ${t('support-better-xcloud')}`);
$wrapper.appendChild($donationLink);
// Show Game Pass app version
try {
const appVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement).content;
const appDate = new Date((document.querySelector('meta[name=gamepass-app-date]') as HTMLMetaElement).content).toISOString().substring(0, 10);
$wrapper.appendChild(CE<HTMLElement>('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
} catch (e) {}
$container.appendChild($wrapper);
// Add Settings UI to the web page
const $pageContent = document.getElementById('PageContent');
$pageContent?.parentNode?.insertBefore($container, $pageContent);
}

View File

@ -1,33 +1,107 @@
import { BxEvent } from "@/utils/bx-event"; import { BxEvent } from "@/utils/bx-event";
import { AppInterface, STATES } from "@/utils/global"; import { AppInterface, STATES } from "@/utils/global";
import { createButton, ButtonStyle } from "@/utils/html"; import { createButton, ButtonStyle, CE } from "@/utils/html";
import { t } from "@/utils/translation"; import { t } from "@/utils/translation";
import { SettingsNavigationDialog } from "./dialog/settings-dialog";
export enum GuideMenuTab { export enum GuideMenuTab {
HOME, HOME = 'home',
} }
export class GuideMenu { export class GuideMenu {
static #BUTTONS = {
scriptSettings: createButton({
label: t('better-xcloud'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
onClick: e => {
// Wait until the Guide dialog is closed
window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
setTimeout(() => SettingsNavigationDialog.getInstance().show(), 50);
}, {once: true});
// Close all xCloud's dialogs
window.BX_EXPOSED.dialogRoutes.closeAll();
},
}),
appSettings: createButton({
label: t('app-settings'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
// Close all xCloud's dialogs
window.BX_EXPOSED.dialogRoutes.closeAll();
AppInterface.openAppSettings && AppInterface.openAppSettings();
},
}),
closeApp: createButton({
label: t('close-app'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
onClick: e => {
AppInterface.closeApp();
},
}),
reloadPage: createButton({
label: t('reload-page'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
if (STATES.isPlaying) {
confirm(t('confirm-reload-stream')) && window.location.reload();
} else {
window.location.reload();
}
// Close all xCloud's dialogs
window.BX_EXPOSED.dialogRoutes.closeAll();
},
}),
backToHome: createButton({
label: t('back-to-home'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
},
}),
}
static #renderButtons(buttons: HTMLElement[]) {
const $div = CE('div', {});
for (const $button of buttons) {
$div.appendChild($button);
}
return $div;
}
static #injectHome($root: HTMLElement) { static #injectHome($root: HTMLElement) {
// Find the last divider // Find the last divider
const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]'); const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]');
if (!$dividers) { if (!$dividers) {
return; return;
} }
const buttons: HTMLElement[] = [];
// "Better xCloud" button
buttons.push(GuideMenu.#BUTTONS.scriptSettings);
// "App settings" button
AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
// "Reload page" button
buttons.push(GuideMenu.#BUTTONS.reloadPage);
// "Close app" buttons
AppInterface && buttons.push(GuideMenu.#BUTTONS.closeApp);
const $buttons = GuideMenu.#renderButtons(buttons);
const $lastDivider = $dividers[$dividers.length - 1]; const $lastDivider = $dividers[$dividers.length - 1];
$lastDivider.insertAdjacentElement('afterend', $buttons);
// Add "Close app" button
if (AppInterface) {
const $btnQuit = createButton({
label: t('close-app'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
onClick: e => {
AppInterface.closeApp();
},
});
$lastDivider.insertAdjacentElement('afterend', $btnQuit);
}
} }
static #injectHomePlaying($root: HTMLElement) { static #injectHomePlaying($root: HTMLElement) {
@ -36,25 +110,19 @@ export class GuideMenu {
return; return;
} }
// Add buttons const buttons: HTMLElement[] = [];
const $btnReload = createButton({
label: t('reload-stream'),
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('confirm-reload-stream')) && window.location.reload();
},
});
const $btnHome = createButton({ buttons.push(GuideMenu.#BUTTONS.scriptSettings);
label: t('back-to-home'), AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
onClick: e => {
confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
},
});
$btnQuit.insertAdjacentElement('afterend', $btnReload); // Reload page
$btnReload.insertAdjacentElement('afterend', $btnHome); buttons.push(GuideMenu.#BUTTONS.reloadPage);
// Back to home
buttons.push(GuideMenu.#BUTTONS.backToHome);
const $buttons = GuideMenu.#renderButtons(buttons);
$btnQuit.insertAdjacentElement('afterend', $buttons);
// Hide xCloud's Home button // Hide xCloud's Home button
const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement; const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;
@ -65,11 +133,13 @@ export class GuideMenu {
const where = (e as any).where as GuideMenuTab; const where = (e as any).where as GuideMenuTab;
if (where === GuideMenuTab.HOME) { if (where === GuideMenuTab.HOME) {
const $root = document.querySelector('#gamepass-dialog-root div[role=dialog]') as HTMLElement; const $root = document.querySelector('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]') as HTMLElement;
if (STATES.isPlaying) { if ($root) {
GuideMenu.#injectHomePlaying($root); if (STATES.isPlaying) {
} else { GuideMenu.#injectHomePlaying($root);
GuideMenu.#injectHome($root); } else {
GuideMenu.#injectHome($root);
}
} }
} }
} }

View File

@ -1,85 +1,85 @@
import { SCRIPT_VERSION } from "@utils/global"; import { SCRIPT_VERSION } from "@utils/global";
import { createButton, ButtonStyle } from "@utils/html"; import { createButton, ButtonStyle, CE } from "@utils/html";
import { BxIcon } from "@utils/bx-icon"; import { BxIcon } from "@utils/bx-icon";
import { getPreferredServerRegion } from "@utils/region"; import { getPreferredServerRegion } from "@utils/region";
import { PrefKey, getPref } from "@utils/preferences";
import { RemotePlay } from "@modules/remote-play"; import { RemotePlay } from "@modules/remote-play";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { setupSettingsUi } from "./global-settings"; import { SettingsNavigationDialog } from "./dialog/settings-dialog";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
export class HeaderSection {
function injectSettingsButton($parent?: HTMLElement) { static #$remotePlayBtn = createButton({
if (!$parent) { classes: ['bx-header-remote-play-button', 'bx-gone'],
return; icon: BxIcon.REMOTE_PLAY,
} title: t('remote-play'),
style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
const PREF_PREFERRED_REGION = getPreferredServerRegion(true);
const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
const $headerFragment = document.createDocumentFragment();
// Remote Play button
if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
const $remotePlayBtn = createButton({
classes: ['bx-header-remote-play-button'],
icon: BxIcon.REMOTE_PLAY,
title: t('remote-play'),
style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
onClick: e => {
RemotePlay.togglePopup();
},
});
$headerFragment.appendChild($remotePlayBtn);
}
// Setup Settings button
const $settingsBtn = createButton({
classes: ['bx-header-settings-button'],
label: PREF_PREFERRED_REGION,
style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
onClick: e => { onClick: e => {
setupSettingsUi(); RemotePlay.togglePopup();
const $settings = document.querySelector('.bx-settings-container')!;
$settings.classList.toggle('bx-gone');
window.scrollTo(0, 0);
document.activeElement && (document.activeElement as HTMLElement).blur();
}, },
}); });
// Show new update status static #$settingsBtn = createButton({
if (PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) { classes: ['bx-header-settings-button'],
$settingsBtn.setAttribute('data-update-available', 'true'); label: '???',
} style: ButtonStyle.FROSTED | ButtonStyle.DROP_SHADOW | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
onClick: e => {
// Add the Settings button to the web page SettingsNavigationDialog.getInstance().show();
$headerFragment.appendChild($settingsBtn); },
$parent.appendChild($headerFragment);
}
export function checkHeader() {
const $button = document.querySelector('.bx-header-settings-button');
if (!$button) {
const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
injectSettingsButton($rightHeader as HTMLElement);
}
}
export function watchHeader() {
const $header = document.querySelector('#PageContent header');
if (!$header) {
return;
}
let timeout: number | null;
const observer = new MutationObserver(mutationList => {
timeout && clearTimeout(timeout);
timeout = window.setTimeout(checkHeader, 2000);
}); });
observer.observe($header, {subtree: true, childList: true});
checkHeader(); static #$buttonsWrapper = CE('div', {},
getPref(PrefKey.REMOTE_PLAY_ENABLED) ? HeaderSection.#$remotePlayBtn : null,
HeaderSection.#$settingsBtn,
);
static #observer: MutationObserver;
static #timeout: number | null;
static #injectSettingsButton($parent?: HTMLElement) {
if (!$parent) {
return;
}
const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
// Setup Settings button
const $settingsBtn = HeaderSection.#$settingsBtn;
$settingsBtn.querySelector('span')!.textContent = getPreferredServerRegion(true) || t('better-xcloud');
// Show new update status
if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
$settingsBtn.setAttribute('data-update-available', 'true');
}
// Add the Settings button to the web page
$parent.appendChild(HeaderSection.#$buttonsWrapper);
}
static checkHeader() {
if (!HeaderSection.#$buttonsWrapper.isConnected) {
const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
}
}
static showRemotePlayButton() {
HeaderSection.#$remotePlayBtn.classList.remove('bx-gone');
}
static watchHeader() {
const $header = document.querySelector('#PageContent header');
if (!$header) {
return;
}
HeaderSection.#observer && HeaderSection.#observer.disconnect();
HeaderSection.#observer = new MutationObserver(mutationList => {
HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
});
HeaderSection.#observer.observe($header, {subtree: true, childList: true});
HeaderSection.checkHeader();
}
} }

View File

@ -0,0 +1,35 @@
import { BX_FLAGS } from "@/utils/bx-flags";
import { BxIcon } from "@/utils/bx-icon";
import { AppInterface } from "@/utils/global";
import { ButtonStyle, createButton } from "@/utils/html";
import { t } from "@/utils/translation";
export class ProductDetailsPage {
private static $btnShortcut = createButton({
classes: ['bx-button-shortcut'],
icon: BxIcon.CREATE_SHORTCUT,
label: t('create-shortcut'),
style: ButtonStyle.FOCUSABLE,
tabIndex: 0,
onClick: e => {
AppInterface && AppInterface.createShortcut(window.location.pathname.substring(6));
},
});
private static shortcutTimeoutId: number | null = null;
static injectShortcutButton() {
if (!AppInterface || BX_FLAGS.DeviceInfo!.deviceType !== 'android') {
return;
}
ProductDetailsPage.shortcutTimeoutId && clearTimeout(ProductDetailsPage.shortcutTimeoutId);
ProductDetailsPage.shortcutTimeoutId = window.setTimeout(() => {
// Find action buttons container
const $container = document.querySelector('div[class*=ActionButtons-module__container]');
if ($container) {
$container.parentElement?.appendChild(ProductDetailsPage.$btnShortcut);
}
}, 500);
}
}

View File

@ -1,18 +1,4 @@
import { AppInterface, STATES } from "@utils/global"; import { CE } from "@utils/html";
import { CE, createButton, ButtonStyle, createSvgIcon } from "@utils/html";
import { BxIcon } from "@utils/bx-icon";
import { UserAgent } from "@utils/user-agent";
import { BxEvent } from "@utils/bx-event";
import { MkbRemapper } from "@modules/mkb/mkb-remapper";
import { getPref, Preferences, PrefKey, toPrefElement } from "@utils/preferences";
import { StreamStats } from "@modules/stream/stream-stats";
import { TouchController } from "@modules/touch-controller";
import { t } from "@utils/translation";
import { VibrationManager } from "@modules/vibration-manager";
import { Screenshot } from "@/utils/screenshot";
import { ControllerShortcut } from "../controller-shortcut";
import { SoundShortcut } from "../shortcuts/shortcut-sound";
import { NativeMkbHandler } from "../mkb/native-mkb-handler";
export function localRedirect(path: string) { export function localRedirect(path: string) {
@ -38,518 +24,4 @@ export function localRedirect(path: string) {
$anchor.click(); $anchor.click();
} }
(window as any).localRedirect = localRedirect;
function getVideoPlayerFilterStyle() {
const filters = [];
const clarity = getPref(PrefKey.VIDEO_CLARITY);
if (clarity != 0) {
const level = (7 - (clarity - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
document.getElementById('bx-filter-clarity-matrix')!.setAttributeNS(null, 'kernelMatrix', matrix);
filters.push(`url(#bx-filter-clarity)`);
}
const saturation = getPref(PrefKey.VIDEO_SATURATION);
if (saturation != 100) {
filters.push(`saturate(${saturation}%)`);
}
const contrast = getPref(PrefKey.VIDEO_CONTRAST);
if (contrast != 100) {
filters.push(`contrast(${contrast}%)`);
}
const brightness = getPref(PrefKey.VIDEO_BRIGHTNESS);
if (brightness != 100) {
filters.push(`brightness(${brightness}%)`);
}
return filters.join(' ');
}
function setupStreamSettingsDialog() {
const isSafari = UserAgent.isSafari();
const SETTINGS_UI = [
{
icon: BxIcon.DISPLAY,
group: 'stream',
items: [
{
group: 'audio',
label: t('audio'),
help_url: 'https://better-xcloud.github.io/ingame-features/#audio',
items: [
{
pref: PrefKey.AUDIO_VOLUME,
onChange: (e: any, value: number) => {
SoundShortcut.setGainNodeVolume(value);
},
params: {
disabled: !getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL),
},
onMounted: ($elm: HTMLElement) => {
const $range = $elm.querySelector('input[type=range') as HTMLInputElement;
window.addEventListener(BxEvent.GAINNODE_VOLUME_CHANGED, e => {
$range.value = (e as any).volume;
BxEvent.dispatch($range, 'input', {
ignoreOnChange: true,
});
});
},
},
],
},
{
group: 'video',
label: t('video'),
help_url: 'https://better-xcloud.github.io/ingame-features/#video',
items: [
{
pref: PrefKey.VIDEO_RATIO,
onChange: updateVideoPlayerCss,
},
{
pref: PrefKey.VIDEO_CLARITY,
onChange: updateVideoPlayerCss,
unsupported: isSafari,
},
{
pref: PrefKey.VIDEO_SATURATION,
onChange: updateVideoPlayerCss,
},
{
pref: PrefKey.VIDEO_CONTRAST,
onChange: updateVideoPlayerCss,
},
{
pref: PrefKey.VIDEO_BRIGHTNESS,
onChange: updateVideoPlayerCss,
},
],
},
],
},
{
icon: BxIcon.CONTROLLER,
group: 'controller',
items: [
{
group: 'controller',
label: t('controller'),
help_url: 'https://better-xcloud.github.io/ingame-features/#controller',
items: [
{
pref: PrefKey.CONTROLLER_ENABLE_VIBRATION,
unsupported: !VibrationManager.supportControllerVibration(),
onChange: VibrationManager.updateGlobalVars,
},
{
pref: PrefKey.CONTROLLER_DEVICE_VIBRATION,
unsupported: !VibrationManager.supportDeviceVibration(),
onChange: VibrationManager.updateGlobalVars,
},
(VibrationManager.supportControllerVibration() || VibrationManager.supportDeviceVibration()) && {
pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
unsupported: !VibrationManager.supportDeviceVibration(),
onChange: VibrationManager.updateGlobalVars,
},
],
},
STATES.hasTouchSupport && {
group: 'touch-controller',
label: t('touch-controller'),
items: [
{
label: t('layout'),
content: CE('select', {disabled: true}, CE('option', {}, t('default'))),
onMounted: ($elm: HTMLSelectElement) => {
$elm.addEventListener('change', e => {
TouchController.loadCustomLayout(STATES.currentStream?.xboxTitleId!, $elm.value, 1000);
});
window.addEventListener(BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, e => {
const data = (e as any).data;
if (STATES.currentStream?.xboxTitleId && ($elm as any).xboxTitleId === STATES.currentStream?.xboxTitleId) {
$elm.dispatchEvent(new Event('change'));
return;
}
($elm as any).xboxTitleId = STATES.currentStream?.xboxTitleId;
// Clear options
while ($elm.firstChild) {
$elm.removeChild($elm.firstChild);
}
$elm.disabled = !data;
if (!data) {
$elm.appendChild(CE('option', {value: ''}, t('default')));
$elm.value = '';
$elm.dispatchEvent(new Event('change'));
return;
}
// Add options
const $fragment = document.createDocumentFragment();
for (const key in data.layouts) {
const layout = data.layouts[key];
let name;
if (layout.author) {
name = `${layout.name} (${layout.author})`;
} else {
name = layout.name;
}
const $option = CE('option', {value: key}, name);
$fragment.appendChild($option);
}
$elm.appendChild($fragment);
$elm.value = data.default_layout;
$elm.dispatchEvent(new Event('change'));
});
},
},
],
}
],
},
getPref(PrefKey.MKB_ENABLED) && {
icon: BxIcon.VIRTUAL_CONTROLLER,
group: 'mkb',
items: [
{
group: 'mkb',
label: t('virtual-controller'),
help_url: 'https://better-xcloud.github.io/mouse-and-keyboard/',
content: MkbRemapper.INSTANCE.render(),
},
],
},
AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
icon: BxIcon.NATIVE_MKB,
group: 'native-mkb',
items: [
{
group: 'native-mkb',
label: t('native-mkb'),
items: [
{
pref: PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
onChange: (e: any, value: number) => {
NativeMkbHandler.getInstance().setVerticalScrollMultiplier(value / 100);
},
},
{
pref: PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
onChange: (e: any, value: number) => {
NativeMkbHandler.getInstance().setHorizontalScrollMultiplier(value / 100);
},
},
],
},
],
},
{
icon: BxIcon.COMMAND,
group: 'shortcuts',
items: [
{
group: 'shortcuts_controller',
label: t('controller-shortcuts'),
content: ControllerShortcut.renderSettings(),
},
],
},
{
icon: BxIcon.STREAM_STATS,
group: 'stats',
items: [
{
group: 'stats',
label: t('stream-stats'),
help_url: 'https://better-xcloud.github.io/stream-stats/',
items: [
{
pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
},
{
pref: PrefKey.STATS_QUICK_GLANCE,
onChange: (e: InputEvent) => {
const streamStats = StreamStats.getInstance();
(e.target! as HTMLInputElement).checked ? streamStats.quickGlanceSetup() : streamStats.quickGlanceStop();
},
},
{
pref: PrefKey.STATS_ITEMS,
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_POSITION,
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_TEXT_SIZE,
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_OPACITY,
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_TRANSPARENT,
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
onChange: StreamStats.refreshStyles,
},
],
},
],
},
];
let $tabs: HTMLElement;
let $settings: HTMLElement;
const $wrapper = CE<HTMLElement>('div', {'class': 'bx-stream-settings-dialog bx-gone'},
$tabs = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tabs'}),
$settings = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tab-contents'}),
);
for (const settingTab of SETTINGS_UI) {
if (!settingTab) {
continue;
}
const $svg = createSvgIcon(settingTab.icon);
$svg.addEventListener('click', e => {
// Switch tab
for (const $child of Array.from($settings.children)) {
if ($child.getAttribute('data-group') === settingTab.group) {
$child.classList.remove('bx-gone');
} else {
$child.classList.add('bx-gone');
}
}
// Highlight current tab button
for (const $child of Array.from($tabs.children)) {
$child.classList.remove('bx-active');
}
$svg.classList.add('bx-active');
});
$tabs.appendChild($svg);
const $group = CE<HTMLElement>('div', {'data-group': settingTab.group, 'class': 'bx-gone'});
for (const settingGroup of settingTab.items) {
if (!settingGroup) {
continue;
}
$group.appendChild(CE('h2', {},
CE('span', {}, settingGroup.label),
settingGroup.help_url && createButton({
icon: BxIcon.QUESTION,
style: ButtonStyle.GHOST,
url: settingGroup.help_url,
title: t('help'),
}),
));
if (settingGroup.note) {
if (typeof settingGroup.note === 'string') {
settingGroup.note = document.createTextNode(settingGroup.note);
}
$group.appendChild(settingGroup.note);
}
if (settingGroup.content) {
$group.appendChild(settingGroup.content);
continue;
}
if (!settingGroup.items) {
settingGroup.items = [];
}
for (const setting of settingGroup.items) {
if (!setting) {
continue;
}
const pref = setting.pref;
let $control;
if (setting.content) {
$control = setting.content;
} else if (!setting.unsupported) {
$control = toPrefElement(pref, setting.onChange, setting.params);
}
const label = Preferences.SETTINGS[pref as PrefKey]?.label || setting.label;
const note = Preferences.SETTINGS[pref as PrefKey]?.note || setting.note;
const $content = CE('div', {'class': 'bx-stream-settings-row', 'data-type': settingGroup.group},
CE('label', {for: `bx_setting_${pref}`},
label,
note && CE('div', {'class': 'bx-stream-settings-dialog-note'}, note),
setting.unsupported && CE('div', {'class': 'bx-stream-settings-dialog-note'}, t('browser-unsupported-feature')),
),
!setting.unsupported && $control,
);
$group.appendChild($content);
setting.onMounted && setting.onMounted($control);
}
}
$settings.appendChild($group);
}
// Select first tab
$tabs.firstElementChild!.dispatchEvent(new Event('click'));
document.documentElement.appendChild($wrapper);
}
export function updateVideoPlayerCss() {
let $elm = document.getElementById('bx-video-css');
if (!$elm) {
const $fragment = document.createDocumentFragment();
$elm = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
$fragment.appendChild($elm);
// Setup SVG filters
const $svg = CE('svg', {
'id': 'bx-video-filters',
'xmlns': 'http://www.w3.org/2000/svg',
'class': 'bx-gone',
}, CE('defs', {'xmlns': 'http://www.w3.org/2000/svg'},
CE('filter', {'id': 'bx-filter-clarity', 'xmlns': 'http://www.w3.org/2000/svg'},
CE('feConvolveMatrix', {'id': 'bx-filter-clarity-matrix', 'order': '3', 'xmlns': 'http://www.w3.org/2000/svg'}))
)
);
$fragment.appendChild($svg);
document.documentElement.appendChild($fragment);
}
let filters = getVideoPlayerFilterStyle();
let videoCss = '';
if (filters) {
videoCss += `filter: ${filters} !important;`;
}
// Apply video filters to screenshots
if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
Screenshot.updateCanvasFilters(filters);
}
let css = '';
if (videoCss) {
css = `
#game-stream video {
${videoCss}
}
`;
}
$elm.textContent = css;
resizeVideoPlayer();
}
function resizeVideoPlayer() {
const $video = STATES.currentStream.$video;
if (!$video || !$video.parentElement) {
return;
}
const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
if (PREF_RATIO.includes(':')) {
const tmp = PREF_RATIO.split(':');
// Get preferred ratio
const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
let width = 0;
let height = 0;
// Get parent's ratio
const parentRect = $video.parentElement.getBoundingClientRect();
const parentRatio = parentRect.width / parentRect.height;
// Get target width & height
if (parentRatio > videoRatio) {
height = parentRect.height;
width = height * videoRatio;
} else {
width = parentRect.width;
height = width / videoRatio;
}
// Prevent floating points
width = Math.min(parentRect.width, Math.ceil(width));
height = Math.min(parentRect.height, Math.ceil(height));
// Update size
$video.style.width = `${width}px`;
$video.style.height = `${height}px`;
$video.style.objectFit = PREF_RATIO === '16:9' ? 'contain' : 'fill';
} else {
$video.style.width = '100%';
$video.style.height = '100%';
$video.style.objectFit = PREF_RATIO;
}
}
function preloadFonts() {
const $link = CE<HTMLLinkElement>('link', {
rel: 'preload',
href: 'https://redphx.github.io/better-xcloud/fonts/promptfont.otf',
as: 'font',
type: 'font/otf',
crossorigin: '',
});
document.querySelector('head')?.appendChild($link);
}
export function setupStreamUi() {
// Prevent initializing multiple times
if (!document.querySelector('.bx-stream-settings-dialog')) {
preloadFonts();
window.addEventListener('resize', updateVideoPlayerCss);
setupStreamSettingsDialog();
Screenshot.setup();
}
updateVideoPlayerCss();
}

View File

@ -1,6 +1,7 @@
import { AppInterface } from "@utils/global"; import { AppInterface } from "@utils/global";
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { PrefKey, getPref } from "@utils/preferences"; import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage";
const VIBRATION_DATA_MAP = { const VIBRATION_DATA_MAP = {
'gamepadIndex': 8, 'gamepadIndex': 8,
@ -53,7 +54,7 @@ export class VibrationManager {
return !!window.navigator.vibrate; return !!window.navigator.vibrate;
} }
static updateGlobalVars() { static updateGlobalVars(stopVibration: boolean = true) {
window.BX_ENABLE_CONTROLLER_VIBRATION = VibrationManager.supportControllerVibration() ? getPref(PrefKey.CONTROLLER_ENABLE_VIBRATION) : false; window.BX_ENABLE_CONTROLLER_VIBRATION = VibrationManager.supportControllerVibration() ? getPref(PrefKey.CONTROLLER_ENABLE_VIBRATION) : false;
window.BX_VIBRATION_INTENSITY = getPref(PrefKey.CONTROLLER_VIBRATION_INTENSITY) / 100; window.BX_VIBRATION_INTENSITY = getPref(PrefKey.CONTROLLER_VIBRATION_INTENSITY) / 100;
@ -63,7 +64,7 @@ export class VibrationManager {
} }
// Stop vibration // Stop vibration
window.navigator.vibrate(0); stopVibration && window.navigator.vibrate(0);
const value = getPref(PrefKey.CONTROLLER_DEVICE_VIBRATION); const value = getPref(PrefKey.CONTROLLER_DEVICE_VIBRATION);
let enabled; let enabled;
@ -134,10 +135,10 @@ export class VibrationManager {
} }
static initialSetup() { static initialSetup() {
window.addEventListener('gamepadconnected', VibrationManager.updateGlobalVars); window.addEventListener('gamepadconnected', e => VibrationManager.updateGlobalVars());
window.addEventListener('gamepaddisconnected', VibrationManager.updateGlobalVars); window.addEventListener('gamepaddisconnected', e => VibrationManager.updateGlobalVars());
VibrationManager.updateGlobalVars(); VibrationManager.updateGlobalVars(false);
window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => { window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
const dataChannel = (e as any).dataChannel; const dataChannel = (e as any).dataChannel;

39
src/types/index.d.ts vendored
View File

@ -24,20 +24,35 @@ interface NavigatorBattery extends Navigator {
} }
type BxStates = { type BxStates = {
supportedRegion: boolean;
serverRegions: any;
selectedRegion: any;
gsToken: string;
isSignedIn: boolean;
isPlaying: boolean; isPlaying: boolean;
appContext: any | null; appContext: any | null;
serverRegions: any;
hasTouchSupport: boolean; browser: {
browserHasTouchSupport: boolean; capabilities: {
touch: boolean;
batteryApi: boolean;
};
};
userAgent: {
isTv: boolean;
capabilities: {
touch: boolean;
};
};
currentStream: Partial<{ currentStream: Partial<{
titleId: string; titleId: string;
xboxTitleId: string;
productId: string; productId: string;
titleInfo: XcloudTitleInfo; titleInfo: XcloudTitleInfo;
$video: HTMLVideoElement | null; streamPlayer: StreamPlayer | null;
peerConnection: RTCPeerConnection; peerConnection: RTCPeerConnection;
audioContext: AudioContext | null; audioContext: AudioContext | null;
@ -51,15 +66,20 @@ type BxStates = {
serverId: string; serverId: string;
}; };
}>; }>;
pointerServerPort: number;
} }
type DualEnum = {[index: string]: number} & {[index: number]: string}; type DualEnum = {[index: string]: number} & {[index: number]: string};
type XcloudTitleInfo = { type XcloudTitleInfo = {
titleId: string,
details: { details: {
productId: string; productId: string;
supportedInputTypes: InputType[]; supportedInputTypes: InputType[];
supportedTabs: any[]; supportedTabs: any[];
hasNativeTouchSupport: boolean;
hasTouchSupport: boolean; hasTouchSupport: boolean;
hasFakeTouchSupport: boolean; hasFakeTouchSupport: boolean;
hasMkbSupport: boolean; hasMkbSupport: boolean;
@ -72,10 +92,19 @@ type XcloudTitleInfo = {
}; };
}; };
type XcloudWaitTimeInfo = Partial<{
estimatedAllocationTimeInSeconds: number,
estimatedProvisioningTimeInSeconds: number,
estimatedTotalWaitTimeInSeconds: number,
}>;
declare module '*.js'; declare module '*.js';
declare module '*.svg'; declare module '*.svg';
declare module '*.styl'; declare module '*.styl';
declare module '*.fs';
declare module '*.vert';
type MkbMouseMove = { type MkbMouseMove = {
movementX: number; movementX: number;
movementY: number; movementY: number;

2
src/types/mkb.d.ts vendored
View File

@ -1,4 +1,4 @@
import { MkbPresetKey } from "@modules/mkb/definitions"; import { MkbPresetKey } from "@enums/mkb";
type GamepadKeyNameType = {[index: string | number]: string[]}; type GamepadKeyNameType = {[index: string | number]: string[]};

View File

@ -1,5 +1,6 @@
export type PreferenceSetting = { export type PreferenceSetting = {
default: any; default: any;
optionsGroup?: string;
options?: {[index: string]: string}; options?: {[index: string]: string};
multipleOptions?: {[index: string]: string}; multipleOptions?: {[index: string]: string};
unsupported?: string | boolean; unsupported?: string | boolean;

19
src/types/setting-definition.d.ts vendored Normal file
View File

@ -0,0 +1,19 @@
export type SettingDefinition = {
default: any;
optionsGroup?: string;
options?: {[index: string]: string};
multipleOptions?: {[index: string]: string};
unsupported?: string | boolean;
note?: string | HTMLElement;
type?: SettingElementType;
ready?: (setting: SettingDefinition) => void;
// migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
min?: number;
max?: number;
steps?: number;
experimental?: boolean;
params?: any;
label?: string;
};
export type SettingDefinitions = {[index in PrefKey]: SettingDefinition};

View File

@ -1,58 +1,63 @@
import { AppInterface } from "@utils/global"; import { AppInterface } from "@utils/global";
export enum BxEvent {
JUMP_BACK_IN_READY = 'bx-jump-back-in-ready',
POPSTATE = 'bx-popstate',
TITLE_INFO_READY = 'bx-title-info-ready',
STREAM_LOADING = 'bx-stream-loading',
STREAM_STARTING = 'bx-stream-starting',
STREAM_STARTED = 'bx-stream-started',
STREAM_PLAYING = 'bx-stream-playing',
STREAM_STOPPED = 'bx-stream-stopped',
STREAM_ERROR_PAGE = 'bx-stream-error-page',
STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected',
STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected',
// STREAM_EVENT_TARGET_READY = 'bx-stream-event-target-ready',
STREAM_SESSION_READY = 'bx-stream-session-ready',
CUSTOM_TOUCH_LAYOUTS_LOADED = 'bx-custom-touch-layouts-loaded',
TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready',
REMOTE_PLAY_READY = 'bx-remote-play-ready',
REMOTE_PLAY_FAILED = 'bx-remote-play-failed',
XCLOUD_SERVERS_READY = 'bx-servers-ready',
DATA_CHANNEL_CREATED = 'bx-data-channel-created',
GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated',
MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed',
CAPTURE_SCREENSHOT = 'bx-capture-screenshot',
GAINNODE_VOLUME_CHANGED = 'bx-gainnode-volume-changed',
POINTER_LOCK_REQUESTED = 'bx-pointer-lock-requested',
POINTER_LOCK_EXITED = 'bx-pointer-lock-exited',
// xCloud Dialog events
XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown',
XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed',
XCLOUD_GUIDE_MENU_SHOWN = 'bx-xcloud-guide-menu-shown',
XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed',
}
export enum XcloudEvent {
MICROPHONE_STATE_CHANGED = 'microphoneStateChanged',
}
export namespace BxEvent { export namespace BxEvent {
export function dispatch(target: HTMLElement | Window, eventName: string, data?: any) { export const JUMP_BACK_IN_READY = 'bx-jump-back-in-ready';
export const POPSTATE = 'bx-popstate';
export const TITLE_INFO_READY = 'bx-title-info-ready';
export const SETTINGS_CHANGED = 'bx-settings-changed';
export const STREAM_LOADING = 'bx-stream-loading';
export const STREAM_STARTING = 'bx-stream-starting';
export const STREAM_STARTED = 'bx-stream-started';
export const STREAM_PLAYING = 'bx-stream-playing';
export const STREAM_STOPPED = 'bx-stream-stopped';
export const STREAM_ERROR_PAGE = 'bx-stream-error-page';
export const STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected';
export const STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected';
// export const STREAM_EVENT_TARGET_READY = 'bx-stream-event-target-ready';
export const STREAM_SESSION_READY = 'bx-stream-session-ready';
export const CUSTOM_TOUCH_LAYOUTS_LOADED = 'bx-custom-touch-layouts-loaded';
export const TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready';
export const REMOTE_PLAY_READY = 'bx-remote-play-ready';
export const REMOTE_PLAY_FAILED = 'bx-remote-play-failed';
export const XCLOUD_SERVERS_READY = 'bx-servers-ready';
export const XCLOUD_SERVERS_UNAVAILABLE = 'bx-servers-unavailable';
export const DATA_CHANNEL_CREATED = 'bx-data-channel-created';
export const GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated';
export const MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed';
export const CAPTURE_SCREENSHOT = 'bx-capture-screenshot';
export const POINTER_LOCK_REQUESTED = 'bx-pointer-lock-requested';
export const POINTER_LOCK_EXITED = 'bx-pointer-lock-exited';
export const NAVIGATION_FOCUS_CHANGED = 'bx-nav-focus-changed';
// xCloud Dialog events
export const XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown';
export const XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed';
export const XCLOUD_GUIDE_MENU_SHOWN = 'bx-xcloud-guide-menu-shown';
export const XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed';
export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page';
export function dispatch(target: Element | Window | null, eventName: string, data?: any) {
if (!target) {
return;
}
if (!eventName) { if (!eventName) {
alert('BxEvent.dispatch(): eventName is null'); alert('BxEvent.dispatch(): eventName is null');
return; return;
@ -66,8 +71,8 @@ export namespace BxEvent {
} }
} }
AppInterface && AppInterface.onEvent(eventName);
target.dispatchEvent(event); target.dispatchEvent(event);
AppInterface && AppInterface.onEvent(eventName);
} }
} }

View File

@ -1,40 +1,43 @@
import { ControllerShortcut } from "@/modules/controller-shortcut"; import { ControllerShortcut } from "@/modules/controller-shortcut";
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { STATES } from "@utils/global"; import { deepClone, STATES } from "@utils/global";
import { getPref, PrefKey } from "@utils/preferences";
import { BxLogger } from "./bx-logger"; import { BxLogger } from "./bx-logger";
import { BX_FLAGS } from "./bx-flags"; import { BX_FLAGS } from "./bx-flags";
import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
export enum InputType { export enum SupportedInputType {
CONTROLLER = 'Controller', CONTROLLER = 'Controller',
MKB = 'MKB', MKB = 'MKB',
CUSTOM_TOUCH_OVERLAY = 'CustomTouchOverlay', CUSTOM_TOUCH_OVERLAY = 'CustomTouchOverlay',
GENERIC_TOUCH = 'GenericTouch', GENERIC_TOUCH = 'GenericTouch',
NATIVE_TOUCH = 'NativeTouch', NATIVE_TOUCH = 'NativeTouch',
BATIVE_SENSOR = 'NativeSensor', BATIVE_SENSOR = 'NativeSensor',
} };
export type SupportedInputTypeValue = (typeof SupportedInputType)[keyof typeof SupportedInputType];
export const BxExposed = { export const BxExposed = {
getTitleInfo: () => STATES.currentStream.titleInfo, getTitleInfo: () => STATES.currentStream.titleInfo,
modifyTitleInfo: (titleInfo: XcloudTitleInfo): XcloudTitleInfo => { modifyTitleInfo: (titleInfo: XcloudTitleInfo): XcloudTitleInfo => {
// Clone the object since the original is read-only // Clone the object since the original is read-only
titleInfo = structuredClone(titleInfo); titleInfo = deepClone(titleInfo);
let supportedInputTypes = titleInfo.details.supportedInputTypes; let supportedInputTypes = titleInfo.details.supportedInputTypes;
if (BX_FLAGS.ForceNativeMkbTitles.includes(titleInfo.details.productId)) { if (BX_FLAGS.ForceNativeMkbTitles?.includes(titleInfo.details.productId)) {
supportedInputTypes.push(InputType.MKB); supportedInputTypes.push(SupportedInputType.MKB);
} }
// Remove native MKB support on mobile browsers or by user's choice // Remove native MKB support on mobile browsers or by user's choice
if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') { if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') {
supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.MKB); supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.MKB);
} }
titleInfo.details.hasMkbSupport = supportedInputTypes.includes(InputType.MKB); titleInfo.details.hasMkbSupport = supportedInputTypes.includes(SupportedInputType.MKB);
if (STATES.hasTouchSupport) { if (STATES.userAgent.capabilities.touch) {
let touchControllerAvailability = getPref(PrefKey.STREAM_TOUCH_CONTROLLER); let touchControllerAvailability = getPref(PrefKey.STREAM_TOUCH_CONTROLLER);
// Disable touch control when gamepad found // Disable touch control when gamepad found
@ -54,20 +57,21 @@ export const BxExposed = {
if (touchControllerAvailability === 'off') { if (touchControllerAvailability === 'off') {
// Disable touch on all games (not native touch) // Disable touch on all games (not native touch)
supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.CUSTOM_TOUCH_OVERLAY && i !== InputType.GENERIC_TOUCH); supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.CUSTOM_TOUCH_OVERLAY && i !== SupportedInputType.GENERIC_TOUCH);
// Empty TABs // Empty TABs
titleInfo.details.supportedTabs = []; titleInfo.details.supportedTabs = [];
} }
// Pre-check supported input types // Pre-check supported input types
titleInfo.details.hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || titleInfo.details.hasNativeTouchSupport = supportedInputTypes.includes(SupportedInputType.NATIVE_TOUCH);
supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY) || titleInfo.details.hasTouchSupport = titleInfo.details.hasNativeTouchSupport ||
supportedInputTypes.includes(InputType.GENERIC_TOUCH); supportedInputTypes.includes(SupportedInputType.CUSTOM_TOUCH_OVERLAY) ||
supportedInputTypes.includes(SupportedInputType.GENERIC_TOUCH);
if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === 'all') { if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === 'all') {
// Add generic touch support for non touch-supported games // Add generic touch support for non touch-supported games
titleInfo.details.hasFakeTouchSupport = true; titleInfo.details.hasFakeTouchSupport = true;
supportedInputTypes.push(InputType.GENERIC_TOUCH); supportedInputTypes.push(SupportedInputType.GENERIC_TOUCH);
} }
} }
@ -108,4 +112,22 @@ export const BxExposed = {
handleControllerShortcut: ControllerShortcut.handle, handleControllerShortcut: ControllerShortcut.handle,
resetControllerShortcut: ControllerShortcut.reset, resetControllerShortcut: ControllerShortcut.reset,
overrideSettings: {
'Tv_settings': {
hasCompletedOnboarding: true,
},
},
disableGamepadPolling: false,
backButtonPressed: () => {
const navigationDialogManager = NavigationDialogManager.getInstance();
if (navigationDialogManager.isShowing()) {
navigationDialogManager.hide();
return true;
}
return false;
},
}; };

View File

@ -5,9 +5,15 @@ type BxFlags = Partial<{
EnableXcloudLogging: boolean; EnableXcloudLogging: boolean;
SafariWorkaround: boolean; SafariWorkaround: boolean;
UseDevTouchLayout: boolean;
ForceNativeMkbTitles: string[]; ForceNativeMkbTitles: string[];
FeatureGates: {[key: string]: boolean} | null,
IsSupportedTvBrowser: boolean,
DeviceInfo: Partial<{
deviceType: 'android' | 'android-tv' | 'webos' | 'unknown',
userAgent?: string,
}>,
}> }>
// Setup flags // Setup flags
@ -18,14 +24,21 @@ const DEFAULT_FLAGS: BxFlags = {
EnableXcloudLogging: false, EnableXcloudLogging: false,
SafariWorkaround: true, SafariWorkaround: true,
UseDevTouchLayout: false,
ForceNativeMkbTitles: [], ForceNativeMkbTitles: [],
FeatureGates: null,
DeviceInfo: {
deviceType: 'unknown',
},
} }
export const BX_FLAGS = Object.assign(DEFAULT_FLAGS, window.BX_FLAGS || {}); export const BX_FLAGS: BxFlags = Object.assign(DEFAULT_FLAGS, window.BX_FLAGS || {});
try { try {
delete window.BX_FLAGS; delete window.BX_FLAGS;
} catch (e) {} } catch (e) {}
if (!BX_FLAGS.DeviceInfo!.userAgent) {
BX_FLAGS.DeviceInfo!.userAgent = window.navigator.userAgent;
}
export const NATIVE_FETCH = window.fetch; export const NATIVE_FETCH = window.fetch;

View File

@ -1,6 +1,9 @@
import iconBetterXcloud from "@assets/svg/better-xcloud.svg" with { type: "text" };
import iconClose from "@assets/svg/close.svg" with { type: "text" };
import iconCommand from "@assets/svg/command.svg" with { type: "text" }; import iconCommand from "@assets/svg/command.svg" with { type: "text" };
import iconController from "@assets/svg/controller.svg" with { type: "text" }; import iconController from "@assets/svg/controller.svg" with { type: "text" };
import iconCopy from "@assets/svg/copy.svg" with { type: "text" }; import iconCopy from "@assets/svg/copy.svg" with { type: "text" };
import iconCreateShortcut from "@assets/svg/create-shortcut.svg" with { type: "text" };
import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" }; import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" };
import iconDisplay from "@assets/svg/display.svg" with { type: "text" }; import iconDisplay from "@assets/svg/display.svg" with { type: "text" };
import iconHome from "@assets/svg/home.svg" with { type: "text" }; import iconHome from "@assets/svg/home.svg" with { type: "text" };
@ -11,9 +14,9 @@ import iconRefresh from "@assets/svg/refresh.svg" with { type: "text" };
import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" }; import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" };
import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" }; import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" };
import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" }; import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" };
import iconTrash from "@assets/svg/trash.svg" with { type: "text" };
import iconTouchControlEnable from "@assets/svg/touch-control-enable.svg" with { type: "text" };
import iconTouchControlDisable from "@assets/svg/touch-control-disable.svg" with { type: "text" }; import iconTouchControlDisable from "@assets/svg/touch-control-disable.svg" with { type: "text" };
import iconTouchControlEnable from "@assets/svg/touch-control-enable.svg" with { type: "text" };
import iconTrash from "@assets/svg/trash.svg" with { type: "text" };
import iconVirtualController from "@assets/svg/virtual-controller.svg" with { type: "text" }; import iconVirtualController from "@assets/svg/virtual-controller.svg" with { type: "text" };
// Game Bar // Game Bar
@ -33,10 +36,13 @@ import iconUpload from "@assets/svg/upload.svg" with { type: "text" };
export const BxIcon = { export const BxIcon = {
BETTER_XCLOUD: iconBetterXcloud,
STREAM_SETTINGS: iconStreamSettings, STREAM_SETTINGS: iconStreamSettings,
STREAM_STATS: iconStreamStats, STREAM_STATS: iconStreamStats,
CLOSE: iconClose,
COMMAND: iconCommand, COMMAND: iconCommand,
CONTROLLER: iconController, CONTROLLER: iconController,
CREATE_SHORTCUT: iconCreateShortcut,
DISPLAY: iconDisplay, DISPLAY: iconDisplay,
HOME: iconHome, HOME: iconHome,
NATIVE_MKB: iconNativeMkb, NATIVE_MKB: iconNativeMkb,

View File

@ -1,4 +1,4 @@
enum TextColor { const enum TextColor {
INFO = '#008746', INFO = '#008746',
WARNING = '#c1a404', WARNING = '#c1a404',
ERROR = '#c10404', ERROR = '#c10404',
@ -19,7 +19,7 @@ export class BxLogger {
BxLogger.#log(TextColor.ERROR, tag, ...args); BxLogger.#log(TextColor.ERROR, tag, ...args);
} }
static #log(color: TextColor, tag: string, ...args: any) { static #log(color: string, tag: string, ...args: any) {
console.log(`%c${BxLogger.#PREFIX}`, `color:${color};font-weight:bold;`, tag, '//', ...args); console.log(`%c${BxLogger.#PREFIX}`, `color:${color};font-weight:bold;`, tag, '//', ...args);
} }
} }

View File

@ -1,38 +1,61 @@
import { CE } from "@utils/html"; import { CE } from "@utils/html";
import { PrefKey, getPref } from "@utils/preferences"; import { compressCss, renderStylus } from "@macros/build" with {type: "macro"};
import { renderStylus } from "@macros/build" with {type: "macro"}; import { UiSection } from "@/enums/ui-sections";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
export function addCss() { export function addCss() {
let css = renderStylus(); const STYLUS_CSS = renderStylus();
let css = STYLUS_CSS;
const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);
const selectorToHide = [];
// Hide "News" section
if (PREF_HIDE_SECTIONS.includes(UiSection.NEWS)) {
selectorToHide.push('#BodyContent > div[class*=CarouselRow-module]');
}
// Hide "All games" section
if (PREF_HIDE_SECTIONS.includes(UiSection.ALL_GAMES)) {
selectorToHide.push('#BodyContent div[class*=AllGamesRow-module__gridContainer]');
selectorToHide.push('#BodyContent div[class*=AllGamesRow-module__rowHeader]');
}
// Hide "Most popular" section
if (PREF_HIDE_SECTIONS.includes(UiSection.MOST_POPULAR)) {
selectorToHide.push('#BodyContent div[class*=HomePage-module__bottomSpacing]:has(a[href="/play/gallery/popular"])');
}
// Hide "Play with touch" section
if (PREF_HIDE_SECTIONS.includes(UiSection.TOUCH)) {
selectorToHide.push('#BodyContent div[class*=HomePage-module__bottomSpacing]:has(a[href="/play/gallery/touch"])');
}
// Hide "Start a party" button in the Guide menu
if (getPref(PrefKey.BLOCK_SOCIAL_FEATURES)) { if (getPref(PrefKey.BLOCK_SOCIAL_FEATURES)) {
css += ` selectorToHide.push('#gamepass-dialog-root div[class^=AchievementsPreview-module__container] + button[class*=HomeLandingPage-module__button]');
/* Hide "Play with friends" section */ }
div[class^=HomePage-module__bottomSpacing]:has(button[class*=SocialEmptyCard]),
button[class*=SocialEmptyCard], if (selectorToHide) {
/* Hide "Start a party" button in the Guide menu */ css += selectorToHide.join(',') + '{ display: none; }';
#gamepass-dialog-root div[class^=AchievementsPreview-module__container] + button[class*=HomeLandingPage-module__button]
{
display: none;
}
`;
} }
// Reduce animations // Reduce animations
if (getPref(PrefKey.REDUCE_ANIMATIONS)) { if (getPref(PrefKey.REDUCE_ANIMATIONS)) {
css += ` css += compressCss(`
div[class*=GameCard-module__gameTitleInnerWrapper], div[class*=GameCard-module__gameTitleInnerWrapper],
div[class*=GameCard-module__card], div[class*=GameCard-module__card],
div[class*=ScrollArrows-module] { div[class*=ScrollArrows-module] {
transition: none !important; transition: none !important;
} }
`; `);
} }
// Hide the top-left dots icon while playing // Hide the top-left dots icon while playing
if (getPref(PrefKey.HIDE_DOTS_ICON)) { if (getPref(PrefKey.HIDE_DOTS_ICON)) {
css += ` css += compressCss(`
div[class*=Grip-module__container] { div[class*=Grip-module__container] {
visibility: hidden; visibility: hidden;
} }
@ -54,18 +77,18 @@ button[class*=GripHandle-module__container][aria-expanded=false] {
div[class*=StreamHUD-module__buttonsContainer] { div[class*=StreamHUD-module__buttonsContainer] {
padding: 0px !important; padding: 0px !important;
} }
`; `);
} }
css += ` css += compressCss(`
div[class*=StreamMenu-module__menu] { div[class*=StreamMenu-module__menu] {
min-width: 100vw !important; min-width: 100vw !important;
} }
`; `);
// Simplify Stream's menu // Simplify Stream's menu
if (getPref(PrefKey.STREAM_SIMPLIFY_MENU)) { if (getPref(PrefKey.STREAM_SIMPLIFY_MENU)) {
css += ` css += compressCss(`
div[class*=Menu-module__scrollable] { div[class*=Menu-module__scrollable] {
--bxStreamMenuItemSize: 80px; --bxStreamMenuItemSize: 80px;
--streamMenuItemSize: calc(var(--bxStreamMenuItemSize) + 40px) !important; --streamMenuItemSize: calc(var(--bxStreamMenuItemSize) + 40px) !important;
@ -96,9 +119,9 @@ svg[class*=MenuItem-module__icon] {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
} }
`; `);
} else { } else {
css += ` css += compressCss(`
body[data-media-type=tv] .bx-badges { body[data-media-type=tv] .bx-badges {
top: calc(var(--streamMenuItemSize) + 30px); top: calc(var(--streamMenuItemSize) + 30px);
} }
@ -120,12 +143,12 @@ body:not([data-media-type=tv]) div[class*=MenuItem-module__label] {
margin-left: 8px !important; margin-left: 8px !important;
margin-right: 8px !important; margin-right: 8px !important;
} }
`; `);
} }
// Hide scrollbar // Hide scrollbar
if (getPref(PrefKey.UI_SCROLLBAR_HIDE)) { if (getPref(PrefKey.UI_SCROLLBAR_HIDE)) {
css += ` css += compressCss(`
html { html {
scrollbar-width: none; scrollbar-width: none;
} }
@ -133,9 +156,22 @@ html {
body::-webkit-scrollbar { body::-webkit-scrollbar {
display: none; display: none;
} }
`; `);
} }
const $style = CE('style', {}, css); const $style = CE('style', {}, css);
document.documentElement.appendChild($style); document.documentElement.appendChild($style);
} }
export function preloadFonts() {
const $link = CE<HTMLLinkElement>('link', {
rel: 'preload',
href: 'https://redphx.github.io/better-xcloud/fonts/promptfont.otf',
as: 'font',
type: 'font/otf',
crossorigin: '',
});
document.querySelector('head')?.appendChild($link);
}

View File

@ -0,0 +1,24 @@
import { PrefKey } from "@/enums/pref-keys";
import { BX_FLAGS } from "./bx-flags";
import { getPref } from "./settings-storages/global-settings-storage";
export let FeatureGates: {[key: string]: boolean} = {
'PwaPrompt': false,
'EnableWifiWarnings': false,
'EnableUpdateRequiredPage': false,
'ShowForcedUpdateScreen': false,
};
// Disable context menu in Home page
if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
FeatureGates['EnableHomeContextMenu'] = false;
}
// Disable chat feature
if (getPref(PrefKey.BLOCK_SOCIAL_FEATURES)) {
FeatureGates['EnableGuideChatTab'] = false;
}
if (BX_FLAGS.FeatureGates) {
FeatureGates = Object.assign(BX_FLAGS.FeatureGates, FeatureGates);
}

View File

@ -1,8 +1,9 @@
import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler"; import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
import { PrefKey, getPref } from "@utils/preferences";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { Toast } from "@utils/toast"; import { Toast } from "@utils/toast";
import { BxLogger } from "@utils/bx-logger"; import { BxLogger } from "@utils/bx-logger";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
// Show a toast when connecting/disconecting controller // Show a toast when connecting/disconecting controller
export function showGamepadToast(gamepad: Gamepad) { export function showGamepadToast(gamepad: Gamepad) {

View File

@ -1,7 +1,7 @@
import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
import { UserAgent } from "./user-agent"; import { UserAgent } from "./user-agent";
export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION; export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION!;
export const SCRIPT_HOME = 'https://github.com/redphx/better-xcloud';
export const AppInterface = window.AppInterface; export const AppInterface = window.AppInterface;
@ -11,15 +11,48 @@ const userAgent = window.navigator.userAgent.toLowerCase();
const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') || /\baft.*\b/.test(userAgent); const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') || /\baft.*\b/.test(userAgent);
const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser'); const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser');
const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0; const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
const hasTouchSupport = !isTv && !isVr && browserHasTouchSupport; const userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
export const STATES: BxStates = { export const STATES: BxStates = {
supportedRegion: true,
serverRegions: {},
selectedRegion: {},
gsToken: '',
isSignedIn: false,
isPlaying: false, isPlaying: false,
appContext: {}, appContext: {},
serverRegions: {},
hasTouchSupport: hasTouchSupport, browser: {
browserHasTouchSupport: browserHasTouchSupport, capabilities: {
touch: browserHasTouchSupport,
batteryApi: 'getBattery' in window.navigator,
},
},
userAgent: {
isTv: isTv,
capabilities: {
touch: userAgentHasTouchSupport,
}
},
currentStream: {}, currentStream: {},
remotePlay: {}, remotePlay: {},
pointerServerPort: 9269,
}; };
export const STORAGE: {[key: string]: BaseSettingsStore} = {};
export function deepClone(obj: any): any {
if ('structuredClone' in window) {
return structuredClone(obj);
}
if (!obj) {
return {};
}
return JSON.parse(JSON.stringify(obj));
}

View File

@ -1,7 +1,8 @@
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { LoadingScreen } from "@modules/loading-screen"; import { LoadingScreen } from "@modules/loading-screen";
import { RemotePlay } from "@modules/remote-play"; import { RemotePlay } from "@modules/remote-play";
import { checkHeader } from "@modules/ui/header"; import { HeaderSection } from "@/modules/ui/header";
import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
export function patchHistoryMethod(type: 'pushState' | 'replaceState') { export function patchHistoryMethod(type: 'pushState' | 'replaceState') {
const orig = window.history[type]; const orig = window.history[type];
@ -25,16 +26,20 @@ export function onHistoryChanged(e: PopStateEvent) {
window.setTimeout(RemotePlay.detect, 10); window.setTimeout(RemotePlay.detect, 10);
// Hide Global settings
const $settings = document.querySelector('.bx-settings-container'); const $settings = document.querySelector('.bx-settings-container');
if ($settings) { if ($settings) {
$settings.classList.add('bx-gone'); $settings.classList.add('bx-gone');
} }
// Hide Navigation dialog
NavigationDialogManager.getInstance().hide();
// Hide Remote Play popup // Hide Remote Play popup
RemotePlay.detachPopup(); RemotePlay.detachPopup();
LoadingScreen.reset(); LoadingScreen.reset();
window.setTimeout(checkHeader, 2000); window.setTimeout(HeaderSection.watchHeader, 2000);
BxEvent.dispatch(window, BxEvent.STREAM_STOPPED); BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
} }

View File

@ -1,4 +1,6 @@
import type { BxIcon } from "@utils/bx-icon"; import type { BxIcon } from "@utils/bx-icon";
import { setNearby } from "./navigation-utils";
import type { NavigationNearbyElements } from "@/modules/ui/dialog/navigation-dialog";
type BxButton = { type BxButton = {
style?: number | string | ButtonStyle; style?: number | string | ButtonStyle;
@ -9,12 +11,20 @@ type BxButton = {
title?: string; title?: string;
disabled?: boolean; disabled?: boolean;
onClick?: EventListener; onClick?: EventListener;
tabIndex?: number;
attributes?: {[key: string]: any},
} }
type ButtonStyle = {[index: string]: number} & {[index: number]: string}; type ButtonStyle = {[index: string]: number} & {[index: number]: string};
// Quickly create a tree of elements without having to use innerHTML // Quickly create a tree of elements without having to use innerHTML
function createElement<T=HTMLElement>(elmName: string, props: {[index: string]: any}={}, ..._: any): T { type CreateElementOptions = {
[index: string]: any;
_nearby?: NavigationNearbyElements;
};
function createElement<T=HTMLElement>(elmName: string, props: CreateElementOptions={}, ..._: any): T {
let $elm; let $elm;
const hasNs = 'xmlns' in props; const hasNs = 'xmlns' in props;
@ -25,6 +35,11 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
$elm = document.createElement(elmName); $elm = document.createElement(elmName);
} }
if (props['_nearby']) {
setNearby($elm, props['_nearby']);
delete props['_nearby'];
}
for (const key in props) { for (const key in props) {
if ($elm.hasOwnProperty(key)) { if ($elm.hasOwnProperty(key)) {
continue; continue;
@ -33,18 +48,23 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
if (hasNs) { if (hasNs) {
$elm.setAttributeNS(null, key, props[key]); $elm.setAttributeNS(null, key, props[key]);
} else { } else {
$elm.setAttribute(key, props[key]); if (key === 'on') {
for (const eventName in props[key]) {
$elm.addEventListener(eventName, props[key][eventName]);
}
} else {
$elm.setAttribute(key, props[key]);
}
} }
} }
for (let i = 2, size = arguments.length; i < size; i++) { for (let i = 2, size = arguments.length; i < size; i++) {
const arg = arguments[i]; const arg = arguments[i];
const argType = typeof arg;
if (argType === 'string' || argType === 'number') { if (arg instanceof Node) {
$elm.appendChild(document.createTextNode(arg));
} else if (arg) {
$elm.appendChild(arg); $elm.appendChild(arg);
} else if (arg !== null && arg !== false && typeof arg !== 'undefined') {
$elm.appendChild(document.createTextNode(arg));
} }
} }
@ -64,10 +84,14 @@ export const ButtonStyle: DualEnum = {};
ButtonStyle[ButtonStyle.PRIMARY = 1] = 'bx-primary'; ButtonStyle[ButtonStyle.PRIMARY = 1] = 'bx-primary';
ButtonStyle[ButtonStyle.DANGER = 2] = 'bx-danger'; ButtonStyle[ButtonStyle.DANGER = 2] = 'bx-danger';
ButtonStyle[ButtonStyle.GHOST = 4] = 'bx-ghost'; ButtonStyle[ButtonStyle.GHOST = 4] = 'bx-ghost';
ButtonStyle[ButtonStyle.FOCUSABLE = 8] = 'bx-focusable'; ButtonStyle[ButtonStyle.FROSTED = 8] = 'bx-frosted';
ButtonStyle[ButtonStyle.FULL_WIDTH = 16] = 'bx-full-width'; ButtonStyle[ButtonStyle.DROP_SHADOW = 16] = 'bx-drop-shadow';
ButtonStyle[ButtonStyle.FULL_HEIGHT = 32] = 'bx-full-height'; ButtonStyle[ButtonStyle.FOCUSABLE = 32] = 'bx-focusable';
ButtonStyle[ButtonStyle.TALL = 64] = 'bx-tall'; ButtonStyle[ButtonStyle.FULL_WIDTH = 64] = 'bx-full-width';
ButtonStyle[ButtonStyle.FULL_HEIGHT = 128] = 'bx-full-height';
ButtonStyle[ButtonStyle.TALL = 256] = 'bx-tall';
ButtonStyle[ButtonStyle.CIRCULAR = 512] = 'bx-circular';
ButtonStyle[ButtonStyle.NORMAL_CASE = 1024] = 'bx-normal-case';
const ButtonStyleIndices = Object.keys(ButtonStyle).splice(0, Object.keys(ButtonStyle).length / 2).map(i => parseInt(i)); const ButtonStyleIndices = Object.keys(ButtonStyle).splice(0, Object.keys(ButtonStyle).length / 2).map(i => parseInt(i));
@ -93,10 +117,27 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
options.title && $btn.setAttribute('title', options.title); options.title && $btn.setAttribute('title', options.title);
options.disabled && (($btn as HTMLButtonElement).disabled = true); options.disabled && (($btn as HTMLButtonElement).disabled = true);
options.onClick && $btn.addEventListener('click', options.onClick); options.onClick && $btn.addEventListener('click', options.onClick);
$btn.tabIndex = typeof options.tabIndex === 'number' ? options.tabIndex : 0;
for (const key in options.attributes) {
if (!$btn.hasOwnProperty(key)) {
$btn.setAttribute(key, options.attributes[key]);
}
}
return $btn as T; return $btn as T;
} }
export function getReactProps($elm: HTMLElement): any | null {
for (const key in $elm) {
if (key.startsWith('__reactProps')) {
return ($elm as any)[key];
}
}
return null;
}
export function escapeHtml(html: string): string { export function escapeHtml(html: string): string {
const text = document.createTextNode(html); const text = document.createTextNode(html);
const $span = document.createElement('span'); const $span = document.createElement('span');

View File

@ -1,7 +1,8 @@
import { MkbPreset } from "@modules/mkb/mkb-preset"; import { MkbPreset } from "@modules/mkb/mkb-preset";
import { PrefKey, setPref } from "@utils/preferences";
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import type { MkbStoredPreset, MkbStoredPresets } from "@/types/mkb"; import type { MkbStoredPreset, MkbStoredPresets } from "@/types/mkb";
import { PrefKey } from "@/enums/pref-keys";
import { setPref } from "./settings-storages/global-settings-storage";
export class LocalDb { export class LocalDb {
static #instance: LocalDb; static #instance: LocalDb;

View File

@ -1,8 +1,10 @@
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { getPref, PrefKey } from "@utils/preferences";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { BxLogger } from "@utils/bx-logger"; import { BxLogger } from "@utils/bx-logger";
import { patchSdpBitrate } from "./sdp"; import { patchSdpBitrate, setCodecPreferences } from "./sdp";
import { StreamPlayer, type StreamPlayerOptions } from "@/modules/stream-player";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
export function patchVideoApi() { export function patchVideoApi() {
const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO); const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO);
@ -10,18 +12,26 @@ export function patchVideoApi() {
// Show video player when it's ready // Show video player when it's ready
const showFunc = function(this: HTMLVideoElement) { const showFunc = function(this: HTMLVideoElement) {
this.style.visibility = 'visible'; this.style.visibility = 'visible';
this.removeEventListener('playing', showFunc);
if (!this.videoWidth) { if (!this.videoWidth) {
return; return;
} }
const playerOptions = {
processing: getPref(PrefKey.VIDEO_PROCESSING),
sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
saturation: getPref(PrefKey.VIDEO_SATURATION),
contrast: getPref(PrefKey.VIDEO_CONTRAST),
brightness: getPref(PrefKey.VIDEO_BRIGHTNESS),
} satisfies StreamPlayerOptions;
STATES.currentStream.streamPlayer = new StreamPlayer(this, getPref(PrefKey.VIDEO_PLAYER_TYPE), playerOptions);
BxEvent.dispatch(window, BxEvent.STREAM_PLAYING, { BxEvent.dispatch(window, BxEvent.STREAM_PLAYING, {
$video: this, $video: this,
}); });
} }
const nativePlay = HTMLMediaElement.prototype.play; const nativePlay = HTMLMediaElement.prototype.play;
(HTMLMediaElement.prototype as any).nativePlay = nativePlay;
HTMLMediaElement.prototype.play = function() { HTMLMediaElement.prototype.play = function() {
if (this.className && this.className.startsWith('XboxSplashVideo')) { if (this.className && this.className.startsWith('XboxSplashVideo')) {
if (PREF_SKIP_SPLASH_VIDEO) { if (PREF_SKIP_SPLASH_VIDEO) {
@ -35,12 +45,12 @@ export function patchVideoApi() {
return nativePlay.apply(this); return nativePlay.apply(this);
} }
if (!!this.src) { const $parent = this.parentElement!!;
return nativePlay.apply(this); // Video tag is stream player
if (!this.src && $parent.dataset.testid === 'media-container') {
this.addEventListener('loadedmetadata', showFunc, {once: true});
} }
this.addEventListener('playing', showFunc);
return nativePlay.apply(this); return nativePlay.apply(this);
}; };
} }
@ -55,33 +65,6 @@ export function patchRtcCodecs() {
if (typeof RTCRtpTransceiver === 'undefined' || !('setCodecPreferences' in RTCRtpTransceiver.prototype)) { if (typeof RTCRtpTransceiver === 'undefined' || !('setCodecPreferences' in RTCRtpTransceiver.prototype)) {
return false; return false;
} }
const profilePrefix = codecProfile === 'high' ? '4d' : (codecProfile === 'low' ? '420' : '42e');
const profileLevelId = `profile-level-id=${profilePrefix}`;
const nativeSetCodecPreferences = RTCRtpTransceiver.prototype.setCodecPreferences;
RTCRtpTransceiver.prototype.setCodecPreferences = function(codecs) {
// Use the same codecs as desktop
const newCodecs = codecs.slice();
let pos = 0;
newCodecs.forEach((codec, i) => {
// Find high-quality codecs
if (codec.sdpFmtpLine && codec.sdpFmtpLine.includes(profileLevelId)) {
// Move it to the top of the array
newCodecs.splice(i, 1);
newCodecs.splice(pos, 0, codec);
++pos;
}
});
try {
nativeSetCodecPreferences.apply(this, [newCodecs]);
} catch (e) {
// Didn't work -> use default codecs
BxLogger.error('setCodecPreferences', e);
nativeSetCodecPreferences.apply(this, [codecs]);
}
}
} }
export function patchRtcPeerConnection() { export function patchRtcPeerConnection() {
@ -97,21 +80,30 @@ export function patchRtcPeerConnection() {
return dataChannel; return dataChannel;
} }
const nativeSetLocalDescription = RTCPeerConnection.prototype.setLocalDescription; const maxVideoBitrate = getPref(PrefKey.BITRATE_VIDEO_MAX);
RTCPeerConnection.prototype.setLocalDescription = function(description?: RTCLocalSessionDescriptionInit): Promise<void> { const codec = getPref(PrefKey.STREAM_CODEC_PROFILE);
// set maximum bitrate
try {
const maxVideoBitrate = getPref(PrefKey.BITRATE_VIDEO_MAX);
if (maxVideoBitrate > 0) {
arguments[0].sdp = patchSdpBitrate(arguments[0].sdp, Math.round(maxVideoBitrate / 1000));
}
} catch (e) {
BxLogger.error('setLocalDescription', e);
}
// @ts-ignore if (codec !== 'default' || maxVideoBitrate > 0) {
return nativeSetLocalDescription.apply(this, arguments); const nativeSetLocalDescription = RTCPeerConnection.prototype.setLocalDescription;
}; RTCPeerConnection.prototype.setLocalDescription = function(description?: RTCLocalSessionDescriptionInit): Promise<void> {
// Set preferred codec profile
if (codec !== 'default') {
arguments[0].sdp = setCodecPreferences(arguments[0].sdp, codec);
}
// set maximum bitrate
try {
if (maxVideoBitrate > 0 && description) {
arguments[0].sdp = patchSdpBitrate(arguments[0].sdp, Math.round(maxVideoBitrate / 1000));
}
} catch (e) {
BxLogger.error('setLocalDescription', e);
}
// @ts-ignore
return nativeSetLocalDescription.apply(this, arguments);
};
}
const OrgRTCPeerConnection = window.RTCPeerConnection; const OrgRTCPeerConnection = window.RTCPeerConnection;
// @ts-ignore // @ts-ignore
@ -132,6 +124,10 @@ export function patchAudioContext() {
// @ts-ignore // @ts-ignore
window.AudioContext = function(options?: AudioContextOptions | undefined): AudioContext { window.AudioContext = function(options?: AudioContextOptions | undefined): AudioContext {
if (options && options.latencyHint) {
options.latencyHint = 0;
}
const ctx = new OrgAudioContext(options); const ctx = new OrgAudioContext(options);
BxLogger.info('patchAudioContext', ctx, options); BxLogger.info('patchAudioContext', ctx, options);
@ -160,7 +156,14 @@ export function patchMeControl() {
}; };
const MSA = { const MSA = {
MeControl: {}, MeControl: {
API: {
setDisplayMode: () => {},
setMobileState: () => {},
addEventListener: () => {},
removeEventListener: () => {},
},
},
}; };
const MeControl = {}; const MeControl = {};
@ -207,12 +210,13 @@ export function patchCanvasContext() {
HTMLCanvasElement.prototype.getContext = function(contextType: string, contextAttributes?: any) { HTMLCanvasElement.prototype.getContext = function(contextType: string, contextAttributes?: any) {
if (contextType.includes('webgl')) { if (contextType.includes('webgl')) {
contextAttributes = contextAttributes || {}; contextAttributes = contextAttributes || {};
if (!contextAttributes.isBx) {
contextAttributes.antialias = false;
contextAttributes.antialias = false; // Use low-power profile for touch controller
if (contextAttributes.powerPreference === 'high-performance') {
// Use low-power profile for touch controller contextAttributes.powerPreference = 'low-power';
if (contextAttributes.powerPreference === 'high-performance') { }
contextAttributes.powerPreference = 'low-power';
} }
} }

View File

@ -0,0 +1,14 @@
import type { NavigationElement, NavigationNearbyElements } from "@/modules/ui/dialog/navigation-dialog";
export class NavigationUtils {
static setNearby($elm: NavigationElement, nearby: NavigationNearbyElements) {
$elm.nearby = $elm.nearby || {};
let key: keyof typeof nearby;
for (key in nearby) {
$elm.nearby[key] = nearby[key] as any;
}
}
}
export const setNearby = NavigationUtils.setNearby;

View File

@ -1,19 +1,16 @@
import { BxEvent } from "@utils/bx-event"; import { BxEvent } from "@utils/bx-event";
import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags"; import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
import { LoadingScreen } from "@modules/loading-screen";
import { PrefKey, getPref } from "@utils/preferences";
import { RemotePlay } from "@modules/remote-play";
import { StreamBadges } from "@modules/stream/stream-badges";
import { TouchController } from "@modules/touch-controller"; import { TouchController } from "@modules/touch-controller";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { getPreferredServerRegion } from "@utils/region"; import { GamePassCloudGallery } from "../enums/game-pass-gallery";
import { GamePassCloudGallery } from "./gamepass-gallery"; import { FeatureGates } from "./feature-gates";
import { InputType } from "./bx-exposed"; import { BxLogger } from "./bx-logger";
import { XhomeInterceptor } from "./xhome-interceptor";
import { XcloudInterceptor } from "./xcloud-interceptor";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
enum RequestType { type RequestType = 'xcloud' | 'xhome';
XCLOUD = 'xcloud',
XHOME = 'xhome',
};
function clearApplicationInsightsBuffers() { function clearApplicationInsightsBuffers() {
window.sessionStorage.removeItem('AI_buffer'); window.sessionStorage.removeItem('AI_buffer');
@ -94,12 +91,12 @@ function updateIceCandidates(candidates: any, options: any) {
newCandidates.push(newCandidate('a=end-of-candidates')); newCandidates.push(newCandidate('a=end-of-candidates'));
console.log(newCandidates); BxLogger.info('ICE Candidates', newCandidates);
return newCandidates; return newCandidates;
} }
async function patchIceCandidates(request: Request, consoleAddrs?: {[index: string]: number}) { export async function patchIceCandidates(request: Request, consoleAddrs?: {[index: string]: number}) {
const response = await NATIVE_FETCH(request); const response = await NATIVE_FETCH(request);
const text = await response.clone().text(); const text = await response.clone().text();
@ -123,382 +120,6 @@ async function patchIceCandidates(request: Request, consoleAddrs?: {[index: stri
return response; return response;
} }
class XhomeInterceptor {
static #consoleAddrs: {[index: string]: number} = {};
static async #handleLogin(request: Request) {
try {
const clone = (request as Request).clone();
const obj = await clone.json();
obj.offeringId = 'xhome';
request = new Request('https://xhome.gssv-play-prod.xboxlive.com/v2/login/user', {
method: 'POST',
body: JSON.stringify(obj),
headers: {
'Content-Type': 'application/json',
},
});
} catch (e) {
alert(e);
console.log(e);
}
return NATIVE_FETCH(request);
}
static async #handleConfiguration(request: Request | URL) {
const response = await NATIVE_FETCH(request);
const obj = await response.clone().json()
console.log(obj);
const serverDetails = obj.serverDetails;
if (serverDetails.ipV4Address) {
XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = serverDetails.ipV4Port;
}
if (serverDetails.ipV6Address) {
XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = serverDetails.ipV6Port;
}
response.json = () => Promise.resolve(obj);
response.text = () => Promise.resolve(JSON.stringify(obj));
return response;
}
static async #handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
const response = await NATIVE_FETCH(request);
if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'all') {
return response;
}
const obj = await response.clone().json() as any;
const xboxTitleId = JSON.parse(opts.body).titleIds[0];
STATES.currentStream.xboxTitleId = xboxTitleId;
const inputConfigs = obj[0];
let hasTouchSupport = inputConfigs.supportedTabs.length > 0;
if (!hasTouchSupport) {
const supportedInputTypes = inputConfigs.supportedInputTypes;
hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY);
}
if (hasTouchSupport) {
TouchController.disable();
BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, {
data: null,
});
} else {
TouchController.enable();
TouchController.getCustomLayouts(xboxTitleId);
}
response.json = () => Promise.resolve(obj);
response.text = () => Promise.resolve(JSON.stringify(obj));
return response;
}
static async #handleTitles(request: Request) {
const clone = request.clone();
const headers: {[index: string]: any} = {};
for (const pair of (clone.headers as any).entries()) {
headers[pair[0]] = pair[1];
}
headers.authorization = `Bearer ${RemotePlay.XCLOUD_TOKEN}`;
const index = request.url.indexOf('.xboxlive.com');
request = new Request('https://wus.core.gssv-play-prod' + request.url.substring(index), {
method: clone.method,
body: await clone.text(),
headers: headers,
});
return NATIVE_FETCH(request);
}
static async #handlePlay(request: RequestInfo | URL) {
const clone = (request as Request).clone();
const body = await clone.json();
// body.settings.useIceConnection = true;
const newRequest = new Request(request, {
body: JSON.stringify(body),
});
return NATIVE_FETCH(newRequest);
}
static async handle(request: Request) {
TouchController.disable();
const clone = request.clone();
const headers: {[index: string]: string} = {};
for (const pair of (clone.headers as any).entries()) {
headers[pair[0]] = pair[1];
}
// Add xHome token to headers
headers.authorization = `Bearer ${RemotePlay.XHOME_TOKEN}`;
// Patch resolution
const deviceInfo = RemotePlay.BASE_DEVICE_INFO;
if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === '720p') {
deviceInfo.dev.os.name = 'android';
}
headers['x-ms-device-info'] = JSON.stringify(deviceInfo);
const opts: {[index: string]: any} = {
method: clone.method,
headers: headers,
};
if (clone.method === 'POST') {
opts.body = await clone.text();
}
let newUrl = request.url;
if (!newUrl.includes('/servers/home')) {
const index = request.url.indexOf('.xboxlive.com');
newUrl = STATES.remotePlay.server + request.url.substring(index + 13);
}
request = new Request(newUrl, opts);
let url = (typeof request === 'string') ? request : request.url;
// Get console IP
if (url.includes('/configuration')) {
return XhomeInterceptor.#handleConfiguration(request);
} else if (url.endsWith('/sessions/home/play')) {
return XhomeInterceptor.#handlePlay(request);
} else if (url.includes('inputconfigs')) {
return XhomeInterceptor.#handleInputConfigs(request, opts);
} else if (url.includes('/login/user')) {
return XhomeInterceptor.#handleLogin(request);
} else if (url.endsWith('/titles')) {
return XhomeInterceptor.#handleTitles(request);
} else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
return patchIceCandidates(request, XhomeInterceptor.#consoleAddrs);
}
return await NATIVE_FETCH(request);
}
}
class XcloudInterceptor {
static async #handleLogin(request: RequestInfo | URL, init?: RequestInit) {
const response = await NATIVE_FETCH(request, init);
const obj = await response.clone().json();
// Preload Remote Play
getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
// Store xCloud token
RemotePlay.XCLOUD_TOKEN = obj.gsToken;
// Get server list
const serverEmojis = {
AustraliaEast: '🇦🇺',
AustraliaSouthEast: '🇦🇺',
BrazilSouth: '🇧🇷',
EastUS: '🇺🇸',
EastUS2: '🇺🇸',
JapanEast: '🇯🇵',
KoreaCentral: '🇰🇷',
MexicoCentral: '🇲🇽',
NorthCentralUs: '🇺🇸',
SouthCentralUS: '🇺🇸',
UKSouth: '🇬🇧',
WestEurope: '🇪🇺',
WestUS: '🇺🇸',
WestUS2: '🇺🇸',
};
const serverRegex = /\/\/(\w+)\./;
for (let region of obj.offeringSettings.regions) {
const regionName = region.name as keyof typeof serverEmojis;
let shortName = region.name;
let match = serverRegex.exec(region.baseUri);
if (match) {
shortName = match[1];
if (serverEmojis[regionName]) {
shortName = serverEmojis[regionName] + ' ' + shortName;
}
}
region.shortName = shortName.toUpperCase();
STATES.serverRegions[region.name] = Object.assign({}, region);
}
BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_READY);
const preferredRegion = getPreferredServerRegion();
if (preferredRegion in STATES.serverRegions) {
const tmp = Object.assign({}, STATES.serverRegions[preferredRegion]);
tmp.isDefault = true;
obj.offeringSettings.regions = [tmp];
}
response.json = () => Promise.resolve(obj);
return response;
}
static async #handlePlay(request: RequestInfo | URL, init?: RequestInit) {
const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_TARGET_RESOLUTION);
const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
const url = (typeof request === 'string') ? request : (request as Request).url;
const parsedUrl = new URL(url);
let badgeRegion: string = parsedUrl.host.split('.', 1)[0];
for (let regionName in STATES.serverRegions) {
const region = STATES.serverRegions[regionName];
if (parsedUrl.origin == region.baseUri) {
badgeRegion = regionName;
break;
}
}
StreamBadges.getInstance().setRegion(badgeRegion);
const clone = (request as Request).clone();
const body = await clone.json();
// Force stream's resolution
if (PREF_STREAM_TARGET_RESOLUTION !== 'auto') {
const osName = (PREF_STREAM_TARGET_RESOLUTION === '720p') ? 'android' : 'windows';
body.settings.osName = osName;
}
// Override "locale" value
if (PREF_STREAM_PREFERRED_LOCALE !== 'default') {
body.settings.locale = PREF_STREAM_PREFERRED_LOCALE;
}
const newRequest = new Request(request, {
body: JSON.stringify(body),
});
return NATIVE_FETCH(newRequest);
}
static async #handleWaitTime(request: RequestInfo | URL, init?: RequestInit) {
const response = await NATIVE_FETCH(request, init);
if (getPref(PrefKey.UI_LOADING_SCREEN_WAIT_TIME)) {
const json = await response.clone().json();
if (json.estimatedAllocationTimeInSeconds > 0) {
// Setup wait time overlay
LoadingScreen.setupWaitTime(json.estimatedTotalWaitTimeInSeconds);
}
}
return response;
}
static async #handleConfiguration(request: RequestInfo | URL, init?: RequestInit) {
if ((request as Request).method !== 'GET') {
return NATIVE_FETCH(request, init);
}
// Touch controller for all games
if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
const titleInfo = STATES.currentStream.titleInfo;
if (titleInfo?.details.hasTouchSupport) {
TouchController.disable();
} else {
TouchController.enable();
}
}
// Intercept configurations
const response = await NATIVE_FETCH(request, init);
const text = await response.clone().text();
if (!text.length) {
return response;
}
const obj = JSON.parse(text);
let overrides = JSON.parse(obj.clientStreamingConfigOverrides || '{}') || {};
overrides.inputConfiguration = overrides.inputConfiguration || {};
overrides.inputConfiguration.enableVibration = true;
let overrideMkb: boolean | null = null;
if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' || BX_FLAGS.ForceNativeMkbTitles.includes(STATES.currentStream.titleInfo!.details.productId)) {
overrideMkb = true;
}
if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') {
overrideMkb = false;
}
if (overrideMkb !== null) {
overrides.inputConfiguration = Object.assign(overrides.inputConfiguration, {
enableMouseInput: overrideMkb,
enableKeyboardInput: overrideMkb,
});
}
overrides.videoConfiguration = overrides.videoConfiguration || {};
overrides.videoConfiguration.setCodecPreferences = true;
// Enable touch controller
if (TouchController.isEnabled()) {
overrides.inputConfiguration.enableTouchInput = true;
overrides.inputConfiguration.maxTouchPoints = 10;
}
// Enable mic
if (getPref(PrefKey.AUDIO_MIC_ON_PLAYING)) {
overrides.audioConfiguration = overrides.audioConfiguration || {};
overrides.audioConfiguration.enableMicrophone = true;
}
obj.clientStreamingConfigOverrides = JSON.stringify(overrides);
response.json = () => Promise.resolve(obj);
response.text = () => Promise.resolve(JSON.stringify(obj));
return response;
}
static async handle(request: RequestInfo | URL, init?: RequestInit) {
let url = (typeof request === 'string') ? request : (request as Request).url;
// Server list
if (url.endsWith('/v2/login/user')) {
return XcloudInterceptor.#handleLogin(request, init);
} else if (url.endsWith('/sessions/cloud/play')) { // Get session
return XcloudInterceptor.#handlePlay(request, init);
} else if (url.includes('xboxlive.com') && url.includes('/waittime/')) {
return XcloudInterceptor.#handleWaitTime(request, init);
} else if (url.endsWith('/configuration')) {
return XcloudInterceptor.#handleConfiguration(request, init);
} else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
return patchIceCandidates(request as Request);
}
return NATIVE_FETCH(request, init);
}
}
export function interceptHttpRequests() { export function interceptHttpRequests() {
let BLOCKED_URLS: string[] = []; let BLOCKED_URLS: string[] = [];
if (getPref(PrefKey.BLOCK_TRACKING)) { if (getPref(PrefKey.BLOCK_TRACKING)) {
@ -578,14 +199,10 @@ export function interceptHttpRequests() {
const response = await NATIVE_FETCH(request, init); const response = await NATIVE_FETCH(request, init);
const json = await response.json(); const json = await response.json();
const overrideTreatments: {[key: string]: boolean} = {}; if (json && json.exp && json.exp.treatments) {
for (const key in FeatureGates) {
if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) { json.exp.treatments[key] = FeatureGates[key]
overrideTreatments['EnableHomeContextMenu'] = false; }
}
for (const key in overrideTreatments) {
json.exp.treatments[key] = overrideTreatments[key]
} }
response.json = () => Promise.resolve(json); response.json = () => Promise.resolve(json);
@ -596,7 +213,7 @@ export function interceptHttpRequests() {
} }
// Add list of games with custom layouts to the official list // Add list of games with custom layouts to the official list
if (STATES.hasTouchSupport && url.includes('catalog.gamepass.com/sigls/')) { if (STATES.userAgent.capabilities.touch && url.includes('catalog.gamepass.com/sigls/')) {
const response = await NATIVE_FETCH(request, init); const response = await NATIVE_FETCH(request, init);
const obj = await response.clone().json(); const obj = await response.clone().json();
@ -639,12 +256,12 @@ export function interceptHttpRequests() {
let requestType: RequestType; let requestType: RequestType;
if (url.includes('/sessions/home') || url.includes('xhome.') || (STATES.remotePlay.isPlaying && url.endsWith('/inputconfigs'))) { if (url.includes('/sessions/home') || url.includes('xhome.') || (STATES.remotePlay.isPlaying && url.endsWith('/inputconfigs'))) {
requestType = RequestType.XHOME; requestType = 'xhome';
} else { } else {
requestType = RequestType.XCLOUD; requestType = 'xcloud';
} }
if (requestType === RequestType.XHOME) { if (requestType === 'xhome') {
return XhomeInterceptor.handle(request as Request); return XhomeInterceptor.handle(request as Request);
} }

View File

@ -1,9 +1,10 @@
import { STATES } from "@utils/global"; import { deepClone, STATES } from "@utils/global";
import { BxLogger } from "./bx-logger"; import { BxLogger } from "./bx-logger";
import { TouchController } from "@modules/touch-controller"; import { TouchController } from "@modules/touch-controller";
import { GamePassCloudGallery } from "./gamepass-gallery"; import { GamePassCloudGallery } from "../enums/game-pass-gallery";
import { getPref, PrefKey } from "./preferences";
import { BX_FLAGS } from "./bx-flags"; import { BX_FLAGS } from "./bx-flags";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
const LOG_TAG = 'PreloadState'; const LOG_TAG = 'PreloadState';
@ -24,7 +25,7 @@ export function overridePreloadState() {
} }
// Add list of games with custom layouts to the official list // Add list of games with custom layouts to the official list
if (STATES.hasTouchSupport) { if (STATES.userAgent.capabilities.touch) {
try { try {
const sigls = state.xcloud.sigls; const sigls = state.xcloud.sigls;
if (GamePassCloudGallery.TOUCH in sigls) { if (GamePassCloudGallery.TOUCH in sigls) {
@ -59,7 +60,7 @@ export function overridePreloadState() {
// @ts-ignore // @ts-ignore
_state = state; _state = state;
STATES.appContext = structuredClone(state.appContext); STATES.appContext = deepClone(state.appContext);
} }
}); });
} }

View File

@ -1,8 +1,9 @@
import { getPref, PrefKey } from "@utils/preferences";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
export function getPreferredServerRegion(shortName = false) { export function getPreferredServerRegion(shortName = false): string | null {
let preferredRegion = getPref(PrefKey.SERVER_REGION); let preferredRegion = getPref(PrefKey.SERVER_REGION);
if (preferredRegion in STATES.serverRegions) { if (preferredRegion in STATES.serverRegions) {
if (shortName && STATES.serverRegions[preferredRegion].shortName) { if (shortName && STATES.serverRegions[preferredRegion].shortName) {
@ -25,5 +26,5 @@ export function getPreferredServerRegion(shortName = false) {
} }
} }
return '???'; return null;
} }

View File

@ -1,5 +1,8 @@
import { StreamPlayerType } from "@enums/stream-player";
import { AppInterface, STATES } from "./global"; import { AppInterface, STATES } from "./global";
import { CE } from "./html"; import { CE } from "./html";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
export class Screenshot { export class Screenshot {
@ -31,23 +34,39 @@ export class Screenshot {
Screenshot.#canvasContext.filter = filters; Screenshot.#canvasContext.filter = filters;
} }
private static onAnimationEnd(e: Event) { static #onAnimationEnd(e: Event) {
(e.target as any).classList.remove('bx-taking-screenshot'); const $target = e.target as HTMLElement;
$target.classList.remove('bx-taking-screenshot');
} }
static takeScreenshot(callback?: any) { static takeScreenshot(callback?: any) {
const currentStream = STATES.currentStream; const currentStream = STATES.currentStream;
const $video = currentStream.$video; const streamPlayer = currentStream.streamPlayer;
const $canvas = Screenshot.#$canvas; const $canvas = Screenshot.#$canvas;
if (!$video || !$canvas) { if (!streamPlayer || !$canvas) {
return; return;
} }
$video.parentElement?.addEventListener('animationend', this.onAnimationEnd); let $player;
$video.parentElement?.classList.add('bx-taking-screenshot'); if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
$player = streamPlayer.getPlayerElement();
} else {
$player = streamPlayer.getPlayerElement(StreamPlayerType.VIDEO);
}
if (!$player || !$player.isConnected) {
return;
}
$player.parentElement!.addEventListener('animationend', this.#onAnimationEnd, { once: true });
$player.parentElement!.classList.add('bx-taking-screenshot');
const canvasContext = Screenshot.#canvasContext; const canvasContext = Screenshot.#canvasContext;
canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);
if ($player instanceof HTMLCanvasElement) {
streamPlayer.getWebGL2Player().drawFrame();
}
canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height);
// Get data URL and pass to parent app // Get data URL and pass to parent app
if (AppInterface) { if (AppInterface) {

View File

@ -1,5 +1,59 @@
export function setCodecPreferences(sdp: string, preferredCodec: string) {
const h264Pattern = /a=fmtp:(\d+).*profile-level-id=([0-9a-f]{6})/g;
const profilePrefix = preferredCodec === 'high' ? '4d' : (preferredCodec === 'low' ? '420' : '42e');
const preferredCodecIds: string[] = [];
// Find all H.264 codec profile IDs
const matches = sdp.matchAll(h264Pattern) || [];
for (const match of matches) {
const id = match[1];
const profileId = match[2];
if (profileId.startsWith(profilePrefix)) {
preferredCodecIds.push(id);
}
}
// No preferred IDs found
if (!preferredCodecIds.length) {
return sdp;
}
const lines = sdp.split('\r\n');
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
const line = lines[lineIndex];
if (!line.startsWith('m=video')) {
continue;
}
// https://datatracker.ietf.org/doc/html/rfc4566#section-5.14
// m=<media> <port> <proto> <fmt>
// m=video 9 UDP/TLS/RTP/SAVPF 127 39 102 104 106 108
const tmp = line.trim().split(' ');
// Get array of <fmt>
// ['127', '39', '102', '104', '106', '108']
let ids = tmp.slice(3);
// Remove preferred IDs in the original array
ids = ids.filter(item => !preferredCodecIds.includes(item));
// Put preferred IDs at the beginning
ids = preferredCodecIds.concat(ids);
// Update line's content
lines[lineIndex] = tmp.slice(0, 3).concat(ids).join(' ');
break;
}
return lines.join('\r\n');
}
export function patchSdpBitrate(sdp: string, video?: number, audio?: number) { export function patchSdpBitrate(sdp: string, video?: number, audio?: number) {
const lines = sdp.split('\n'); const lines = sdp.split('\r\n');
const mediaSet: Set<string> = new Set(); const mediaSet: Set<string> = new Set();
!!video && mediaSet.add('video'); !!video && mediaSet.add('video');
@ -57,5 +111,5 @@ export function patchSdpBitrate(sdp: string, video?: number, audio?: number) {
} }
} }
return lines.join('\n'); return lines.join('\r\n');
} }

View File

@ -1,5 +1,8 @@
import type { PreferenceSetting } from "@/types/preferences"; import type { PreferenceSetting } from "@/types/preferences";
import { CE } from "@utils/html"; import { CE } from "@utils/html";
import { setNearby } from "./navigation-utils";
import type { PrefKey } from "@/enums/pref-keys";
import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
type MultipleOptionsParams = { type MultipleOptionsParams = {
size?: number; size?: number;
@ -27,21 +30,31 @@ export enum SettingElementType {
export class SettingElement { export class SettingElement {
static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) { static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
const $control = CE<HTMLSelectElement>('select', { const $control = CE<HTMLSelectElement>('select', {
title: setting.label, // title: setting.label,
tabindex: 0, tabindex: 0,
}) as HTMLSelectElement; }) as HTMLSelectElement;
let $parent: HTMLElement;
if (setting.optionsGroup) {
$parent = CE('optgroup', {'label': setting.optionsGroup});
$control.appendChild($parent);
} else {
$parent = $control;
}
for (let value in setting.options) { for (let value in setting.options) {
const label = setting.options[value]; const label = setting.options[value];
const $option = CE<HTMLOptionElement>('option', {value: value}, label); const $option = CE<HTMLOptionElement>('option', {value: value}, label);
$control.appendChild($option); $parent.appendChild($option);
} }
$control.value = currentValue; $control.value = currentValue;
onChange && $control.addEventListener('change', e => { onChange && $control.addEventListener('input', e => {
const target = e.target as HTMLSelectElement; const target = e.target as HTMLSelectElement;
const value = (setting.type && setting.type === 'number') ? parseInt(target.value) : target.value; const value = (setting.type && setting.type === 'number') ? parseInt(target.value) : target.value;
onChange(e, value);
!(e as any).ignoreOnChange && onChange(e, value);
}); });
// Custom method // Custom method
@ -54,7 +67,7 @@ export class SettingElement {
static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) { static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
const $control = CE<HTMLSelectElement>('select', { const $control = CE<HTMLSelectElement>('select', {
title: setting.label, // title: setting.label,
multiple: true, multiple: true,
tabindex: 0, tabindex: 0,
}); });
@ -76,7 +89,7 @@ export class SettingElement {
const $parent = target.parentElement!; const $parent = target.parentElement!;
$parent.focus(); $parent.focus();
$parent.dispatchEvent(new Event('change')); $parent.dispatchEvent(new Event('input'));
}); });
$control.appendChild($option); $control.appendChild($option);
@ -90,10 +103,11 @@ export class SettingElement {
$control.addEventListener('mousemove', e => e.preventDefault()); $control.addEventListener('mousemove', e => e.preventDefault());
onChange && $control.addEventListener('change', (e: Event) => { onChange && $control.addEventListener('input', (e: Event) => {
const target = e.target as HTMLSelectElement const target = e.target as HTMLSelectElement
const values = Array.from(target.selectedOptions).map(i => i.value); const values = Array.from(target.selectedOptions).map(i => i.value);
onChange(e, values);
!(e as any).ignoreOnChange && onChange(e, values);
}); });
return $control; return $control;
@ -108,7 +122,7 @@ export class SettingElement {
const value = Math.max(setting.min!, Math.min(setting.max!, parseInt(target.value))); const value = Math.max(setting.min!, Math.min(setting.max!, parseInt(target.value)));
target.value = value.toString(); target.value = value.toString();
onChange(e, value); !(e as any).ignoreOnChange && onChange(e, value);
}); });
return $control; return $control;
@ -119,7 +133,7 @@ export class SettingElement {
$control.checked = currentValue; $control.checked = currentValue;
onChange && $control.addEventListener('change', e => { onChange && $control.addEventListener('change', e => {
onChange(e, (e.target as HTMLInputElement).checked); !(e as any).ignoreOnChange && onChange(e, (e.target as HTMLInputElement).checked);
}); });
return $control; return $control;
@ -132,9 +146,11 @@ export class SettingElement {
options.hideSlider = !!options.hideSlider; options.hideSlider = !!options.hideSlider;
let $text: HTMLSpanElement; let $text: HTMLSpanElement;
let $decBtn: HTMLButtonElement; let $btnDec: HTMLButtonElement;
let $incBtn: HTMLButtonElement; let $btnInc: HTMLButtonElement;
let $range: HTMLInputElement; let $range: HTMLInputElement | null = null;
let controlValue = value;
const MIN = setting.min!; const MIN = setting.min!;
const MAX = setting.max!; const MAX = setting.max!;
@ -155,20 +171,31 @@ export class SettingElement {
return textContent; return textContent;
}; };
const $wrapper = CE('div', {'class': 'bx-number-stepper'}, const updateButtonsVisibility = () => {
$decBtn = CE('button', { $btnDec.classList.toggle('bx-inactive', controlValue === MIN);
$btnInc.classList.toggle('bx-inactive', controlValue === MAX);
}
const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
$btnDec = CE('button', {
'data-type': 'dec', 'data-type': 'dec',
type: 'button', type: 'button',
tabindex: -1, class: options.hideSlider ? 'bx-focusable' : '',
tabindex: options.hideSlider ? 0 : -1,
}, '-') as HTMLButtonElement, }, '-') as HTMLButtonElement,
$text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement, $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
$incBtn = CE('button', { $btnInc = CE('button', {
'data-type': 'inc', 'data-type': 'inc',
type: 'button', type: 'button',
tabindex: -1, class: options.hideSlider ? 'bx-focusable' : '',
tabindex: options.hideSlider ? 0 : -1,
}, '+') as HTMLButtonElement, }, '+') as HTMLButtonElement,
); );
if (options.disabled) {
($wrapper as any).disabled = true;
}
if (!options.disabled && !options.hideSlider) { if (!options.disabled && !options.hideSlider) {
$range = CE('input', { $range = CE('input', {
id: `bx_setting_${key}`, id: `bx_setting_${key}`,
@ -182,9 +209,19 @@ export class SettingElement {
$range.addEventListener('input', e => { $range.addEventListener('input', e => {
value = parseInt((e.target as HTMLInputElement).value); value = parseInt((e.target as HTMLInputElement).value);
const valueChanged = controlValue !== value;
if (!valueChanged) {
return;
}
controlValue = value;
updateButtonsVisibility();
$text.textContent = renderTextValue(value); $text.textContent = renderTextValue(value);
!(e as any).ignoreOnChange && onChange && onChange(e, value); !(e as any).ignoreOnChange && onChange && onChange(e, value);
}); });
$wrapper.appendChild($range); $wrapper.appendChild($range);
if (options.ticks || options.exactTicks) { if (options.ticks || options.exactTicks) {
@ -212,14 +249,16 @@ export class SettingElement {
} }
if (options.disabled) { if (options.disabled) {
$incBtn.disabled = true; $btnInc.disabled = true;
$incBtn.classList.add('bx-hidden'); $btnInc.classList.add('bx-inactive');
$decBtn.disabled = true; $btnDec.disabled = true;
$decBtn.classList.add('bx-hidden'); $btnDec.classList.add('bx-inactive');
return $wrapper; return $wrapper;
} }
updateButtonsVisibility();
let interval: number; let interval: number;
let isHolding = false; let isHolding = false;
@ -231,24 +270,24 @@ export class SettingElement {
return; return;
} }
let value: number; const $btn = e.target as HTMLElement;
if ($range) { let value = parseInt(controlValue);
value = parseInt($range.value);
} else { const btnType = $btn.dataset.type;
value = parseInt($text.textContent!);
}
const btnType = (e.target as HTMLElement).getAttribute('data-type');
if (btnType === 'dec') { if (btnType === 'dec') {
value = Math.max(MIN, value - STEPS); value = Math.max(MIN, value - STEPS);
} else { } else {
value = Math.min(MAX, value + STEPS); value = Math.min(MAX, value + STEPS);
} }
controlValue = value;
updateButtonsVisibility();
$text.textContent = renderTextValue(value); $text.textContent = renderTextValue(value);
$range && ($range.value = value.toString()); $range && ($range.value = value.toString());
isHolding = false; isHolding = false;
onChange && onChange(e, value); !(e as any).ignoreOnChange && onChange && onChange(e, value);
} }
const onMouseDown = (e: PointerEvent) => { const onMouseDown = (e: PointerEvent) => {
@ -277,19 +316,25 @@ export class SettingElement {
// Custom method // Custom method
($wrapper as any).setValue = (value: any) => { ($wrapper as any).setValue = (value: any) => {
controlValue = parseInt(value);
$text.textContent = renderTextValue(value); $text.textContent = renderTextValue(value);
$range && ($range.value = value); $range && ($range.value = value);
}; };
$decBtn.addEventListener('click', onClick); $btnDec.addEventListener('click', onClick);
$decBtn.addEventListener('pointerdown', onMouseDown); $btnDec.addEventListener('pointerdown', onMouseDown);
$decBtn.addEventListener('pointerup', onMouseUp); $btnDec.addEventListener('pointerup', onMouseUp);
$decBtn.addEventListener('contextmenu', onContextMenu); $btnDec.addEventListener('contextmenu', onContextMenu);
$incBtn.addEventListener('click', onClick); $btnInc.addEventListener('click', onClick);
$incBtn.addEventListener('pointerdown', onMouseDown); $btnInc.addEventListener('pointerdown', onMouseDown);
$incBtn.addEventListener('pointerup', onMouseUp); $btnInc.addEventListener('pointerup', onMouseUp);
$incBtn.addEventListener('contextmenu', onContextMenu); $btnInc.addEventListener('contextmenu', onContextMenu);
setNearby($wrapper, {
focus: $range || $btnInc,
})
return $wrapper; return $wrapper;
} }
@ -318,4 +363,34 @@ export class SettingElement {
return $control; return $control;
} }
static fromPref(key: PrefKey, storage: BaseSettingsStore, onChange: any, overrideParams={}) {
const definition = storage.getDefinition(key);
let currentValue = storage.getSetting(key);
let type;
if ('type' in definition) {
type = definition.type;
} else if ('options' in definition) {
type = SettingElementType.OPTIONS;
} else if ('multipleOptions' in definition) {
type = SettingElementType.MULTIPLE_OPTIONS;
} else if (typeof definition.default === 'number') {
type = SettingElementType.NUMBER;
} else {
type = SettingElementType.CHECKBOX;
}
const params = Object.assign(overrideParams, definition.params || {});
if (params.disabled) {
currentValue = definition.default;
}
const $control = SettingElement.render(type!, key as string, definition, currentValue, (e: any, value: any) => {
storage.setSetting(key, value);
onChange && onChange(e, value);
}, params);
return $control;
}
} }

View File

@ -0,0 +1,124 @@
import type { PrefKey } from "@/enums/pref-keys";
import type { SettingDefinitions } from "@/types/setting-definition";
import { BxEvent } from "../bx-event";
export class BaseSettingsStore {
private storage: Storage;
private storageKey: string;
private _settings: object | null;
private definitions: SettingDefinitions;
constructor(storageKey: string, definitions: SettingDefinitions) {
this.storage = window.localStorage;
this.storageKey = storageKey;
for (const settingId in definitions) {
const setting = definitions[settingId];
/*
if (setting.migrate && settingId in savedPrefs) {
setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
}
*/
setting.ready && setting.ready.call(this, setting);
}
this.definitions = definitions;
this._settings = null;
}
get settings() {
if (this._settings) {
return this._settings;
}
const settings = JSON.parse(this.storage.getItem(this.storageKey) || '{}');
this._settings = settings;
return settings;
}
getDefinition(key: PrefKey) {
if (!this.definitions[key]) {
const error = 'Request invalid definition: ' + key;
alert(error);
throw Error(error);
}
return this.definitions[key];
}
getSetting(key: PrefKey) {
if (typeof key === 'undefined') {
debugger;
return;
}
// Return default value if the feature is not supported
if (this.definitions[key].unsupported) {
return this.definitions[key].default;
}
if (!(key in this.settings)) {
this.settings[key] = this.validateValue(key, null);
}
return this.settings[key];
}
setSetting(key: PrefKey, value: any, emitEvent = false) {
value = this.validateValue(key, value);
this.settings[key] = value;
this.saveSettings();
emitEvent && BxEvent.dispatch(window, BxEvent.SETTINGS_CHANGED, {
storageKey: this.storageKey,
settingKey: key,
settingValue: value,
});
return value;
}
saveSettings() {
this.storage.setItem(this.storageKey, JSON.stringify(this.settings));
}
private validateValue(key: PrefKey, value: any) {
const def = this.definitions[key];
if (!def) {
return value;
}
if (typeof value === 'undefined' || value === null) {
value = def.default;
}
if ('min' in def) {
value = Math.max(def.min!, value);
}
if ('max' in def) {
value = Math.min(def.max!, value);
}
if ('options' in def && !(value in def.options!)) {
value = def.default;
} else if ('multipleOptions' in def) {
if (value.length) {
const validOptions = Object.keys(def.multipleOptions!);
value.forEach((item: any, idx: number) => {
(validOptions.indexOf(item) === -1) && value.splice(idx, 1);
});
}
if (!value.length) {
value = def.default;
}
}
return value;
}
}

View File

@ -1,102 +1,78 @@
import { CE } from "@utils/html"; import { BypassServers } from "@/enums/bypass-servers";
import { SUPPORTED_LANGUAGES, t } from "@utils/translation"; import { PrefKey, StorageKey } from "@/enums/pref-keys";
import { SettingElement, SettingElementType } from "@utils/settings"; import { StreamPlayerType, StreamVideoProcessing } from "@/enums/stream-player";
import { UserAgent, UserAgentProfile } from "@utils/user-agent"; import { UiSection } from "@/enums/ui-sections";
import { StreamStat } from "@modules/stream/stream-stats"; import { UserAgentProfile } from "@/enums/user-agent";
import type { PreferenceSetting, PreferenceSettings } from "@/types/preferences"; import { StreamStat } from "@/modules/stream/stream-stats";
import { AppInterface, STATES } from "@utils/global"; import type { PreferenceSetting } from "@/types/preferences";
import type { SettingDefinitions } from "@/types/setting-definition";
import { BX_FLAGS } from "../bx-flags";
import { STATES, AppInterface, STORAGE } from "../global";
import { CE } from "../html";
import { SettingElementType } from "../setting-element";
import { t, SUPPORTED_LANGUAGES } from "../translation";
import { UserAgent } from "../user-agent";
import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
export enum PrefKey {
LAST_UPDATE_CHECK = 'version_last_check',
LATEST_VERSION = 'version_latest',
CURRENT_VERSION = 'version_current',
BETTER_XCLOUD_LOCALE = 'bx_locale', function getSupportedCodecProfiles() {
const options: {[index: string]: string} = {
default: t('default'),
};
SERVER_REGION = 'server_region', if (!('getCapabilities' in RTCRtpReceiver)) {
PREFER_IPV6_SERVER = 'prefer_ipv6_server', return options;
STREAM_TARGET_RESOLUTION = 'stream_target_resolution', }
STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
STREAM_CODEC_PROFILE = 'stream_codec_profile',
USER_AGENT_PROFILE = 'user_agent_profile', let hasLowCodec = false;
STREAM_SIMPLIFY_MENU = 'stream_simplify_menu', let hasNormalCodec = false;
let hasHighCodec = false;
STREAM_COMBINE_SOURCES = 'stream_combine_sources', const codecs = RTCRtpReceiver.getCapabilities('video')!.codecs;
for (let codec of codecs) {
if (codec.mimeType.toLowerCase() !== 'video/h264' || !codec.sdpFmtpLine) {
continue;
}
STREAM_TOUCH_CONTROLLER = 'stream_touch_controller', const fmtp = codec.sdpFmtpLine.toLowerCase();
STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off', if (fmtp.includes('profile-level-id=4d')) {
STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity', hasHighCodec = true;
STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard', } else if (fmtp.includes('profile-level-id=42e')) {
STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom', hasNormalCodec = true;
} else if (fmtp.includes('profile-level-id=420')) {
hasLowCodec = true;
}
}
STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog', if (hasHighCodec) {
if (!hasLowCodec && !hasNormalCodec) {
options.default = `${t('visual-quality-high')} (${t('default')})`;
} else {
options.high = t('visual-quality-high');
}
}
BITRATE_VIDEO_MAX = 'bitrate_video_max', if (hasNormalCodec) {
if (!hasLowCodec && !hasHighCodec) {
options.default = `${t('visual-quality-normal')} (${t('default')})`;
} else {
options.normal = t('visual-quality-normal');
}
}
GAME_BAR_POSITION = 'game_bar_position', if (hasLowCodec) {
if (!hasNormalCodec && !hasHighCodec) {
options.default = `${t('visual-quality-low')} (${t('default')})`;
} else {
options.low = t('visual-quality-low');
}
}
LOCAL_CO_OP_ENABLED = 'local_co_op_enabled', return options;
// LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
NATIVE_MKB_ENABLED = 'native_mkb_enabled',
NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'native_mkb_scroll_y_sensitivity',
MKB_ENABLED = 'mkb_enabled',
MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
BLOCK_TRACKING = 'block_tracking',
BLOCK_SOCIAL_FEATURES = 'block_social_features',
SKIP_SPLASH_VIDEO = 'skip_splash_video',
HIDE_DOTS_ICON = 'hide_dots_icon',
REDUCE_ANIMATIONS = 'reduce_animations',
UI_LOADING_SCREEN_GAME_ART = 'ui_loading_screen_game_art',
UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
UI_LAYOUT = 'ui_layout',
UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
VIDEO_CLARITY = 'video_clarity',
VIDEO_RATIO = 'video_ratio',
VIDEO_BRIGHTNESS = 'video_brightness',
VIDEO_CONTRAST = 'video_contrast',
VIDEO_SATURATION = 'video_saturation',
AUDIO_MIC_ON_PLAYING = 'audio_mic_on_playing',
AUDIO_ENABLE_VOLUME_CONTROL = 'audio_enable_volume_control',
AUDIO_VOLUME = 'audio_volume',
STATS_ITEMS = 'stats_items',
STATS_SHOW_WHEN_PLAYING = 'stats_show_when_playing',
STATS_QUICK_GLANCE = 'stats_quick_glance',
STATS_POSITION = 'stats_position',
STATS_TEXT_SIZE = 'stats_text_size',
STATS_TRANSPARENT = 'stats_transparent',
STATS_OPACITY = 'stats_opacity',
STATS_CONDITIONAL_FORMATTING = 'stats_conditional_formatting',
REMOTE_PLAY_ENABLED = 'xhome_enabled',
REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
} }
export class Preferences { export class GlobalSettingsStorage extends BaseSettingsStorage {
static SETTINGS: PreferenceSettings = { private static readonly DEFINITIONS: SettingDefinitions = {
[PrefKey.LAST_UPDATE_CHECK]: { [PrefKey.LAST_UPDATE_CHECK]: {
default: 0, default: 0,
}, },
@ -115,6 +91,16 @@ export class Preferences {
label: t('region'), label: t('region'),
default: 'default', default: 'default',
}, },
[PrefKey.SERVER_BYPASS_RESTRICTION]: {
label: t('bypass-region-restriction'),
note: '⚠️ ' + t('use-this-at-your-own-risk'),
default: 'off',
optionsGroup: t('region'),
options: Object.assign({
'off': t('off'),
}, BypassServers),
},
[PrefKey.STREAM_PREFERRED_LOCALE]: { [PrefKey.STREAM_PREFERRED_LOCALE]: {
label: t('preferred-game-language'), label: t('preferred-game-language'),
default: 'default', default: 'default',
@ -161,61 +147,7 @@ export class Preferences {
[PrefKey.STREAM_CODEC_PROFILE]: { [PrefKey.STREAM_CODEC_PROFILE]: {
label: t('visual-quality'), label: t('visual-quality'),
default: 'default', default: 'default',
options: (() => { options: getSupportedCodecProfiles(),
const options: {[index: string]: string} = {
default: t('default'),
};
if (!('getCapabilities' in RTCRtpReceiver) || typeof RTCRtpTransceiver === 'undefined' || !('setCodecPreferences' in RTCRtpTransceiver.prototype)) {
return options;
}
let hasLowCodec = false;
let hasNormalCodec = false;
let hasHighCodec = false;
const codecs = RTCRtpReceiver.getCapabilities('video')!.codecs;
for (let codec of codecs) {
if (codec.mimeType.toLowerCase() !== 'video/h264' || !codec.sdpFmtpLine) {
continue;
}
const fmtp = codec.sdpFmtpLine.toLowerCase();
if (!hasHighCodec && fmtp.includes('profile-level-id=4d')) {
hasHighCodec = true;
} else if (!hasNormalCodec && fmtp.includes('profile-level-id=42e')) {
hasNormalCodec = true;
} else if (!hasLowCodec && fmtp.includes('profile-level-id=420')) {
hasLowCodec = true;
}
}
if (hasHighCodec) {
if (!hasLowCodec && !hasNormalCodec) {
options.default = `${t('visual-quality-high')} (${t('default')})`;
} else {
options.high = t('visual-quality-high');
}
}
if (hasNormalCodec) {
if (!hasLowCodec && !hasHighCodec) {
options.default = `${t('visual-quality-normal')} (${t('default')})`;
} else {
options.normal = t('visual-quality-normal');
}
}
if (hasLowCodec) {
if (!hasNormalCodec && !hasHighCodec) {
options.default = `${t('visual-quality-low')} (${t('default')})`;
} else {
options.low = t('visual-quality-low');
}
}
return options;
})(),
ready: (setting: PreferenceSetting) => { ready: (setting: PreferenceSetting) => {
const options: any = setting.options; const options: any = setting.options;
const keys = Object.keys(options); const keys = Object.keys(options);
@ -263,7 +195,7 @@ export class Preferences {
all: t('tc-all-games'), all: t('tc-all-games'),
off: t('off'), off: t('off'),
}, },
unsupported: !STATES.hasTouchSupport, unsupported: !STATES.userAgent.capabilities.touch,
ready: (setting: PreferenceSetting) => { ready: (setting: PreferenceSetting) => {
if (setting.unsupported) { if (setting.unsupported) {
setting.default = 'default'; setting.default = 'default';
@ -273,7 +205,7 @@ export class Preferences {
[PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF]: { [PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF]: {
label: t('tc-auto-off'), label: t('tc-auto-off'),
default: false, default: false,
unsupported: !STATES.hasTouchSupport, unsupported: !STATES.userAgent.capabilities.touch,
}, },
[PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY]: { [PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY]: {
type: SettingElementType.NUMBER_STEPPER, type: SettingElementType.NUMBER_STEPPER,
@ -287,7 +219,7 @@ export class Preferences {
ticks: 10, ticks: 10,
hideSlider: true, hideSlider: true,
}, },
unsupported: !STATES.hasTouchSupport, unsupported: !STATES.userAgent.capabilities.touch,
}, },
[PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD]: { [PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD]: {
label: t('tc-standard-layout-style'), label: t('tc-standard-layout-style'),
@ -297,7 +229,7 @@ export class Preferences {
white: t('tc-all-white'), white: t('tc-all-white'),
muted: t('tc-muted-colors'), muted: t('tc-muted-colors'),
}, },
unsupported: !STATES.hasTouchSupport, unsupported: !STATES.userAgent.capabilities.touch,
}, },
[PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM]: { [PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM]: {
label: t('tc-custom-layout-style'), label: t('tc-custom-layout-style'),
@ -306,7 +238,7 @@ export class Preferences {
default: t('default'), default: t('default'),
muted: t('tc-muted-colors'), muted: t('tc-muted-colors'),
}, },
unsupported: !STATES.hasTouchSupport, unsupported: !STATES.userAgent.capabilities.touch,
}, },
[PrefKey.STREAM_SIMPLIFY_MENU]: { [PrefKey.STREAM_SIMPLIFY_MENU]: {
@ -342,16 +274,6 @@ export class Preferences {
} }
}, },
}, },
migrate: function(savedPrefs: any, value: any) {
try {
value = parseInt(value);
if (value !== 0 && value < 100) {
value *= 1024 * 1000;
}
this.set(PrefKey.BITRATE_VIDEO_MAX, value, true);
savedPrefs[PrefKey.BITRATE_VIDEO_MAX] = value;
} catch (e) {}
},
}, },
[PrefKey.GAME_BAR_POSITION]: { [PrefKey.GAME_BAR_POSITION]: {
@ -380,6 +302,11 @@ export class Preferences {
}, },
*/ */
[PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS]: {
label: t('show-controller-connection-status'),
default: true,
},
[PrefKey.CONTROLLER_ENABLE_SHORTCUTS]: { [PrefKey.CONTROLLER_ENABLE_SHORTCUTS]: {
default: false, default: false,
}, },
@ -527,6 +454,12 @@ export class Preferences {
hide: t('rocket-always-hide'), hide: t('rocket-always-hide'),
}, },
}, },
[PrefKey.UI_CONTROLLER_FRIENDLY]: {
label: t('controller-friendly-ui'),
default: BX_FLAGS.DeviceInfo!.deviceType !== 'unknown',
},
[PrefKey.UI_LAYOUT]: { [PrefKey.UI_LAYOUT]: {
label: t('layout'), label: t('layout'),
default: 'default', default: 'default',
@ -544,6 +477,27 @@ export class Preferences {
[PrefKey.UI_HOME_CONTEXT_MENU_DISABLED]: { [PrefKey.UI_HOME_CONTEXT_MENU_DISABLED]: {
label: t('disable-home-context-menu'), label: t('disable-home-context-menu'),
default: STATES.browser.capabilities.touch,
},
[PrefKey.UI_HIDE_SECTIONS]: {
label: t('hide-sections'),
default: [],
multipleOptions: {
[UiSection.NEWS]: t('section-news'),
[UiSection.FRIENDS]: t('section-play-with-friends'),
[UiSection.NATIVE_MKB]: t('section-native-mkb'),
[UiSection.TOUCH]: t('section-touch'),
[UiSection.MOST_POPULAR]: t('section-most-popular'),
[UiSection.ALL_GAMES]: t('section-all-games'),
},
params: {
size: 6,
},
},
[PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME]: {
label: t('show-wait-time-in-game-card'),
default: false, default: false,
}, },
@ -558,31 +512,59 @@ export class Preferences {
[PrefKey.USER_AGENT_PROFILE]: { [PrefKey.USER_AGENT_PROFILE]: {
label: t('user-agent-profile'), label: t('user-agent-profile'),
note: '⚠️ ' + t('unexpected-behavior'), note: '⚠️ ' + t('unexpected-behavior'),
default: 'default', default: BX_FLAGS.DeviceInfo!.deviceType === 'android-tv' ? UserAgentProfile.VR_OCULUS : 'default',
options: { options: {
[UserAgentProfile.DEFAULT]: t('default'), [UserAgentProfile.DEFAULT]: t('default'),
[UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows', [UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows',
[UserAgentProfile.MACOS_SAFARI]: 'Safari + macOS', [UserAgentProfile.MACOS_SAFARI]: 'Safari + macOS',
[UserAgentProfile.SMARTTV_GENERIC]: 'Smart TV', [UserAgentProfile.VR_OCULUS]: 'Android TV',
[UserAgentProfile.SMARTTV_TIZEN]: 'Samsung Smart TV', [UserAgentProfile.SMART_TV_GENERIC]: 'Smart TV',
[UserAgentProfile.VR_OCULUS]: 'Meta Quest VR', [UserAgentProfile.SMART_TV_TIZEN]: 'Samsung Smart TV',
[UserAgentProfile.ANDROID_KIWI_V123]: 'Kiwi Browser v123',
[UserAgentProfile.CUSTOM]: t('custom'), [UserAgentProfile.CUSTOM]: t('custom'),
}, },
}, },
[PrefKey.VIDEO_CLARITY]: { [PrefKey.VIDEO_PLAYER_TYPE]: {
label: t('clarity'), label: t('renderer'),
default: 'default',
options: {
[StreamPlayerType.VIDEO]: t('default'),
[StreamPlayerType.WEBGL2]: t('webgl2'),
},
},
[PrefKey.VIDEO_PROCESSING]: {
label: t('clarity-boost'),
default: StreamVideoProcessing.USM,
options: {
[StreamVideoProcessing.USM]: t('unsharp-masking'),
[StreamVideoProcessing.CAS]: t('amd-fidelity-cas'),
},
},
[PrefKey.VIDEO_POWER_PREFERENCE]: {
label: t('renderer-configuration'),
default: 'default',
options: {
'default': t('default'),
'low-power': t('low-power'),
'high-performance': t('high-performance'),
},
},
[PrefKey.VIDEO_SHARPNESS]: {
label: t('sharpness'),
type: SettingElementType.NUMBER_STEPPER, type: SettingElementType.NUMBER_STEPPER,
default: 0, default: 0,
min: 0, min: 0,
max: 5, max: 10,
params: { params: {
hideSlider: true, exactTicks: 2,
customTextValue: (value: any) => {
value = parseInt(value);
return value === 0 ? t('off') : value.toString();
},
}, },
}, },
[PrefKey.VIDEO_RATIO]: { [PrefKey.VIDEO_RATIO]: {
label: t('ratio'), label: t('aspect-ratio'),
note: t('stretch-note'), note: t('aspect-ratio-note'),
default: '16:9', default: '16:9',
options: { options: {
'16:9': '16:9', '16:9': '16:9',
@ -643,6 +625,7 @@ export class Preferences {
default: 100, default: 100,
min: 0, min: 0,
max: 600, max: 600,
steps: 10,
params: { params: {
suffix: '%', suffix: '%',
ticks: 100, ticks: 100,
@ -701,6 +684,7 @@ export class Preferences {
default: 80, default: 80,
min: 50, min: 50,
max: 100, max: 100,
steps: 10,
params: { params: {
suffix: '%', suffix: '%',
ticks: 10, ticks: 10,
@ -729,169 +713,16 @@ export class Preferences {
default: false, default: false,
note: t('fortnite-allow-stw-mode'), note: t('fortnite-allow-stw-mode'),
}, },
};
// Deprecated
/*
[Preferences.DEPRECATED_CONTROLLER_SUPPORT_LOCAL_CO_OP]: {
default: false,
'migrate': function(savedPrefs, value) {
this.set(Preferences.LOCAL_CO_OP_ENABLED, value);
savedPrefs[Preferences.LOCAL_CO_OP_ENABLED] = value;
},
},
*/
}
#storage = localStorage;
#key = 'better_xcloud';
#prefs: {[index: string]: any} = {};
constructor() { constructor() {
let savedPrefsStr = this.#storage.getItem(this.#key); super(StorageKey.GLOBAL, GlobalSettingsStorage.DEFINITIONS);
if (savedPrefsStr == null) {
savedPrefsStr = '{}';
}
const savedPrefs = JSON.parse(savedPrefsStr);
for (let settingId in Preferences.SETTINGS) {
const setting = Preferences.SETTINGS[settingId];
if (setting.migrate && settingId in savedPrefs) {
setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
}
setting.ready && setting.ready.call(this, setting);
}
for (let settingId in Preferences.SETTINGS) {
const setting = Preferences.SETTINGS[settingId];
if (!setting) {
alert(`Undefined setting key: ${settingId}`);
console.log('Undefined setting key');
continue;
}
// Ignore deprecated/migrated settings
if (setting.migrate) {
continue;
}
if (settingId in savedPrefs) {
this.#prefs[settingId] = this.#validateValue(settingId, savedPrefs[settingId]);
} else {
this.#prefs[settingId] = setting.default;
}
}
}
#validateValue(key: keyof typeof Preferences.SETTINGS, value: any) {
const config = Preferences.SETTINGS[key];
if (!config) {
return value;
}
if (typeof value === 'undefined' || value === null) {
value = config.default;
}
if ('min' in config) {
value = Math.max(config.min!, value);
}
if ('max' in config) {
value = Math.min(config.max!, value);
}
if ('options' in config && !(value in config.options!)) {
value = config.default;
} else if ('multipleOptions' in config) {
if (value.length) {
const validOptions = Object.keys(config.multipleOptions!);
value.forEach((item: any, idx: number) => {
(validOptions.indexOf(item) === -1) && value.splice(idx, 1);
});
}
if (!value.length) {
value = config.default;
}
}
return value;
}
get(key: PrefKey) {
if (typeof key === 'undefined') {
debugger;
return;
}
// Return default value if the feature is not supported
if (Preferences.SETTINGS[key].unsupported) {
return Preferences.SETTINGS[key].default;
}
if (!(key in this.#prefs)) {
this.#prefs[key] = this.#validateValue(key, null);
}
return this.#prefs[key];
}
set(key: PrefKey, value: any, skipSave?: boolean): any {
value = this.#validateValue(key, value);
this.#prefs[key] = value;
!skipSave && this.#updateStorage();
return value;
}
#updateStorage() {
this.#storage.setItem(this.#key, JSON.stringify(this.#prefs));
}
toElement(key: keyof typeof Preferences.SETTINGS, onChange: any, overrideParams={}) {
const setting = Preferences.SETTINGS[key];
let currentValue = this.get(key);
let type;
if ('type' in setting) {
type = setting.type;
} else if ('options' in setting) {
type = SettingElementType.OPTIONS;
} else if ('multipleOptions' in setting) {
type = SettingElementType.MULTIPLE_OPTIONS;
} else if (typeof setting.default === 'number') {
type = SettingElementType.NUMBER;
} else {
type = SettingElementType.CHECKBOX;
}
const params = Object.assign(overrideParams, setting.params || {});
if (params.disabled) {
currentValue = Preferences.SETTINGS[key].default;
}
const $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
this.set(key, value);
onChange && onChange(e, value);
}, params);
return $control;
}
toNumberStepper(key: keyof typeof Preferences.SETTINGS, onChange: any, options={}) {
return SettingElement.render(SettingElementType.NUMBER_STEPPER, key, Preferences.SETTINGS[key], this.get(key), (e: any, value: any) => {
this.set(key, value);
onChange && onChange(e, value);
}, options);
} }
} }
const prefs = new Preferences(); const globalSettings = new GlobalSettingsStorage();
export const getPref = prefs.get.bind(prefs); export const getPrefDefinition = globalSettings.getDefinition.bind(globalSettings);
export const setPref = prefs.set.bind(prefs); export const getPref = globalSettings.getSetting.bind(globalSettings);
export const toPrefElement = prefs.toElement.bind(prefs); export const setPref = globalSettings.setSetting.bind(globalSettings);
STORAGE.Global = globalSettings;

View File

@ -1,9 +1,11 @@
import { NATIVE_FETCH } from "./bx-flags"; import { NATIVE_FETCH } from "./bx-flags";
import { BxLogger } from "./bx-logger";
export const SUPPORTED_LANGUAGES = { export const SUPPORTED_LANGUAGES = {
'en-US': 'English (United States)', 'en-US': 'English (United States)',
'ca-CA': 'Català', 'ca-CA': 'Català',
'da-DK': 'dansk',
'de-DE': 'Deutsch', 'de-DE': 'Deutsch',
'en-ID': 'Bahasa Indonesia', 'en-ID': 'Bahasa Indonesia',
'es-ES': 'español (España)', 'es-ES': 'español (España)',
@ -19,6 +21,7 @@ export const SUPPORTED_LANGUAGES = {
'uk-UA': 'українська', 'uk-UA': 'українська',
'vi-VN': 'Tiếng Việt', 'vi-VN': 'Tiếng Việt',
'zh-CN': '中文(简体)', 'zh-CN': '中文(简体)',
'zh-TW': '中文(繁體)',
}; };
const Texts = { const Texts = {
@ -26,8 +29,13 @@ const Texts = {
"activated": "Activated", "activated": "Activated",
"active": "Active", "active": "Active",
"advanced": "Advanced", "advanced": "Advanced",
"android-app-settings": "Android app settings", "always-off": "Always off",
"always-on": "Always on",
"amd-fidelity-cas": "AMD FidelityFX CAS",
"app-settings": "App settings",
"apply": "Apply", "apply": "Apply",
"aspect-ratio": "Aspect ratio",
"aspect-ratio-note": "Don't use with native touch games",
"audio": "Audio", "audio": "Audio",
"auto": "Auto", "auto": "Auto",
"back-to-home": "Back to home", "back-to-home": "Back to home",
@ -39,16 +47,19 @@ const Texts = {
"badge-playtime": "Playtime", "badge-playtime": "Playtime",
"badge-server": "Server", "badge-server": "Server",
"badge-video": "Video", "badge-video": "Video",
"better-xcloud": "Better xCloud",
"bitrate-audio-maximum": "Maximum audio bitrate", "bitrate-audio-maximum": "Maximum audio bitrate",
"bitrate-video-maximum": "Maximum video bitrate", "bitrate-video-maximum": "Maximum video bitrate",
"bottom-left": "Bottom-left", "bottom-left": "Bottom-left",
"bottom-right": "Bottom-right", "bottom-right": "Bottom-right",
"brazil": "Brazil",
"brightness": "Brightness", "brightness": "Brightness",
"browser-unsupported-feature": "Your browser doesn't support this feature", "browser-unsupported-feature": "Your browser doesn't support this feature",
"bypass-region-restriction": "Bypass region restriction",
"can-stream-xbox-360-games": "Can stream Xbox 360 games", "can-stream-xbox-360-games": "Can stream Xbox 360 games",
"cancel": "Cancel", "cancel": "Cancel",
"cant-stream-xbox-360-games": "Can't stream Xbox 360 games", "cant-stream-xbox-360-games": "Can't stream Xbox 360 games",
"clarity": "Clarity", "clarity-boost": "Clarity boost",
"clarity-boost-warning": "These settings don't work when the Clarity Boost mode is ON", "clarity-boost-warning": "These settings don't work when the Clarity Boost mode is ON",
"clear": "Clear", "clear": "Clear",
"close": "Close", "close": "Close",
@ -62,11 +73,13 @@ const Texts = {
"console-connect": "Connect", "console-connect": "Connect",
"contrast": "Contrast", "contrast": "Contrast",
"controller": "Controller", "controller": "Controller",
"controller-friendly-ui": "Controller-friendly UI",
"controller-shortcuts": "Controller shortcuts", "controller-shortcuts": "Controller shortcuts",
"controller-shortcuts-connect-note": "Connect a controller to use this feature", "controller-shortcuts-connect-note": "Connect a controller to use this feature",
"controller-shortcuts-xbox-note": "Button to open the Guide menu", "controller-shortcuts-xbox-note": "Button to open the Guide menu",
"controller-vibration": "Controller vibration", "controller-vibration": "Controller vibration",
"copy": "Copy", "copy": "Copy",
"create-shortcut": "Shortcut",
"custom": "Custom", "custom": "Custom",
"deadzone-counterweight": "Deadzone counterweight", "deadzone-counterweight": "Deadzone counterweight",
"decrease": "Decrease", "decrease": "Decrease",
@ -104,14 +117,17 @@ const Texts = {
"hide": "Hide", "hide": "Hide",
"hide-idle-cursor": "Hide mouse cursor on idle", "hide-idle-cursor": "Hide mouse cursor on idle",
"hide-scrollbar": "Hide web page's scrollbar", "hide-scrollbar": "Hide web page's scrollbar",
"hide-sections": "Hide sections",
"hide-system-menu-icon": "Hide System menu's icon", "hide-system-menu-icon": "Hide System menu's icon",
"hide-touch-controller": "Hide touch controller", "hide-touch-controller": "Hide touch controller",
"high-performance": "High performance",
"horizontal-scroll-sensitivity": "Horizontal scroll sensitivity", "horizontal-scroll-sensitivity": "Horizontal scroll sensitivity",
"horizontal-sensitivity": "Horizontal sensitivity", "horizontal-sensitivity": "Horizontal sensitivity",
"ignore": "Ignore", "ignore": "Ignore",
"import": "Import", "import": "Import",
"increase": "Increase", "increase": "Increase",
"install-android": "Install Better xCloud app for Android", "install-android": "Better xCloud app for Android",
"japan": "Japan",
"keyboard-shortcuts": "Keyboard shortcuts", "keyboard-shortcuts": "Keyboard shortcuts",
"language": "Language", "language": "Language",
"large": "Large", "large": "Large",
@ -119,6 +135,7 @@ const Texts = {
"left-stick": "Left stick", "left-stick": "Left stick",
"loading-screen": "Loading screen", "loading-screen": "Loading screen",
"local-co-op": "Local co-op", "local-co-op": "Local co-op",
"low-power": "Low power",
"map-mouse-to": "Map mouse to", "map-mouse-to": "Map mouse to",
"may-not-work-properly": "May not work properly!", "may-not-work-properly": "May not work properly!",
"menu": "Menu", "menu": "Menu",
@ -140,6 +157,7 @@ const Texts = {
"opacity": "Opacity", "opacity": "Opacity",
"other": "Other", "other": "Other",
"playing": "Playing", "playing": "Playing",
"poland": "Poland",
"position": "Position", "position": "Position",
"powered-off": "Powered off", "powered-off": "Powered off",
"powered-on": "Powered on", "powered-on": "Powered on",
@ -149,31 +167,34 @@ const Texts = {
"press-esc-to-cancel": "Press Esc to cancel", "press-esc-to-cancel": "Press Esc to cancel",
"press-key-to-toggle-mkb": [ "press-key-to-toggle-mkb": [
(e: any) => `Press ${e.key} to toggle this feature`, (e: any) => `Press ${e.key} to toggle this feature`,
, (e: any) => `Premeu ${e.key} per alternar aquesta funció`,
(e: any) => `Tryk på ${e.key} for at slå denne funktion til`,
(e: any) => `${e.key}: Funktion an-/ausschalten`, (e: any) => `${e.key}: Funktion an-/ausschalten`,
, (e: any) => `Tekan ${e.key} untuk mengaktifkan fitur ini`,
, (e: any) => `Pulsa ${e.key} para alternar esta función`,
(e: any) => `Appuyez sur ${e.key} pour activer cette fonctionnalité`, (e: any) => `Appuyez sur ${e.key} pour activer cette fonctionnalité`,
(e: any) => `Premi ${e.key} per attivare questa funzionalità`, (e: any) => `Premi ${e.key} per attivare questa funzionalità`,
(e: any) => `${e.key} でこの機能を切替`, (e: any) => `${e.key} でこの機能を切替`,
, (e: any) => `${e.key} 키를 눌러 이 기능을 켜고 끄세요`,
, (e: any) => `Naciśnij ${e.key} aby przełączyć tę funkcję`,
, (e: any) => `Pressione ${e.key} para alternar este recurso`,
, (e: any) => `Нажмите ${e.key} для переключения этой функции`,
, (e: any) => `กด ${e.key} เพื่อสลับคุณสมบัตินี้`,
(e: any) => `Etkinleştirmek için ${e.key} tuşuna basın`, (e: any) => `Etkinleştirmek için ${e.key} tuşuna basın`,
(e: any) => `Натисніть ${e.key} щоб перемкнути цю функцію`, (e: any) => `Натисніть ${e.key} щоб перемкнути цю функцію`,
(e: any) => `Nhấn ${e.key} để bật/tắt tính năng này`, (e: any) => `Nhấn ${e.key} để bật/tắt tính năng này`,
, (e: any) => `按下 ${e.key} 来切换此功能`,
(e: any) => `按下 ${e.key} 來啟用此功能`,
], ],
"press-to-bind": "Press a key or do a mouse click to bind...", "press-to-bind": "Press a key or do a mouse click to bind...",
"prompt-preset-name": "Preset's name:", "prompt-preset-name": "Preset's name:",
"ratio": "Ratio",
"reduce-animations": "Reduce UI animations", "reduce-animations": "Reduce UI animations",
"region": "Region", "region": "Region",
"reload-stream": "Reload stream", "reload-page": "Reload page",
"remote-play": "Remote Play", "remote-play": "Remote Play",
"rename": "Rename", "rename": "Rename",
"renderer": "Renderer",
"renderer-configuration": "Renderer configuration",
"right-click-to-unbind": "Right-click on a key to unbind it", "right-click-to-unbind": "Right-click on a key to unbind it",
"right-stick": "Right stick", "right-stick": "Right stick",
"rocket-always-hide": "Always hide", "rocket-always-hide": "Always hide",
@ -184,20 +205,30 @@ const Texts = {
"saturation": "Saturation", "saturation": "Saturation",
"save": "Save", "save": "Save",
"screen": "Screen", "screen": "Screen",
"screenshot-apply-filters": "Applies video filters to screenshots", "screenshot-apply-filters": "Apply video filters to screenshots",
"section-all-games": "All games",
"section-most-popular": "Most popular",
"section-native-mkb": "Play with mouse & keyboard",
"section-news": "News",
"section-play-with-friends": "Play with friends",
"section-touch": "Play with touch",
"separate-touch-controller": "Separate Touch controller & Controller #1", "separate-touch-controller": "Separate Touch controller & Controller #1",
"separate-touch-controller-note": "Touch controller is Player 1, Controller #1 is Player 2", "separate-touch-controller-note": "Touch controller is Player 1, Controller #1 is Player 2",
"server": "Server", "server": "Server",
"settings": "Settings", "settings": "Settings",
"settings-reload": "Reload page to reflect changes", "settings-reload": "Reload page to reflect changes",
"settings-reload-note": "Settings in this tab only go into effect on the next page load",
"settings-reloading": "Reloading...", "settings-reloading": "Reloading...",
"sharpness": "Sharpness",
"shortcut-keys": "Shortcut keys", "shortcut-keys": "Shortcut keys",
"show": "Show", "show": "Show",
"show-controller-connection-status": "Show controller connection status",
"show-game-art": "Show game art", "show-game-art": "Show game art",
"show-hide": "Show/hide", "show-hide": "Show/hide",
"show-stats-on-startup": "Show stats when starting the game", "show-stats-on-startup": "Show stats when starting the game",
"show-touch-controller": "Show touch controller", "show-touch-controller": "Show touch controller",
"show-wait-time": "Show the estimated wait time", "show-wait-time": "Show the estimated wait time",
"show-wait-time-in-game-card": "Show wait time in game card",
"simplify-stream-menu": "Simplify Stream's menu", "simplify-stream-menu": "Simplify Stream's menu",
"skip-splash-video": "Skip Xbox splash video", "skip-splash-video": "Skip Xbox splash video",
"slow": "Slow", "slow": "Slow",
@ -218,7 +249,6 @@ const Texts = {
"stream-settings": "Stream settings", "stream-settings": "Stream settings",
"stream-stats": "Stream stats", "stream-stats": "Stream stats",
"stretch": "Stretch", "stretch": "Stretch",
"stretch-note": "Don't use with native touch games",
"support-better-xcloud": "Support Better xCloud", "support-better-xcloud": "Support Better xCloud",
"swap-buttons": "Swap buttons", "swap-buttons": "Swap buttons",
"take-screenshot": "Take screenshot", "take-screenshot": "Take screenshot",
@ -240,6 +270,7 @@ const Texts = {
"touch-control-layout-by": [ "touch-control-layout-by": [
(e: any) => `Touch control layout by ${e.name}`, (e: any) => `Touch control layout by ${e.name}`,
(e: any) => `Format del control tàctil per ${e.name}`, (e: any) => `Format del control tàctil per ${e.name}`,
(e: any) => `Touch-kontrol layout af ${e.name}`,
(e: any) => `Touch-Steuerungslayout von ${e.name}`, (e: any) => `Touch-Steuerungslayout von ${e.name}`,
(e: any) => `Tata letak Sentuhan layar oleh ${e.name}`, (e: any) => `Tata letak Sentuhan layar oleh ${e.name}`,
(e: any) => `Disposición del control táctil por ${e.nombre}`, (e: any) => `Disposición del control táctil por ${e.nombre}`,
@ -250,20 +281,24 @@ const Texts = {
(e: any) => `Układ sterowania dotykowego stworzony przez ${e.name}`, (e: any) => `Układ sterowania dotykowego stworzony przez ${e.name}`,
(e: any) => `Disposição de controle por toque feito por ${e.name}`, (e: any) => `Disposição de controle por toque feito por ${e.name}`,
(e: any) => `Сенсорная раскладка по ${e.name}`, (e: any) => `Сенсорная раскладка по ${e.name}`,
, (e: any) => `รูปแบบการควบคุมแบบสัมผัสโดย ${e.name}`,
(e: any) => `${e.name} kişisinin dokunmatik kontrolcü tuş şeması`, (e: any) => `${e.name} kişisinin dokunmatik kontrolcü tuş şeması`,
(e: any) => `Розташування сенсорного керування від ${e.name}`, (e: any) => `Розташування сенсорного керування від ${e.name}`,
(e: any) => `Bố cục điều khiển cảm ứng tạo bởi ${e.name}`, (e: any) => `Bố cục điều khiển cảm ứng tạo bởi ${e.name}`,
(e: any) => `${e.name} 提供的虚拟按键样式`, (e: any) => `${e.name} 提供的虚拟按键样式`,
(e: any) => `觸控遊玩佈局由 ${e.name} 提供`,
], ],
"touch-controller": "Touch controller", "touch-controller": "Touch controller",
"transparent-background": "Transparent background", "transparent-background": "Transparent background",
"ui": "UI", "ui": "UI",
"unexpected-behavior": "May cause unexpected behavior", "unexpected-behavior": "May cause unexpected behavior",
"united-states": "United States",
"unknown": "Unknown", "unknown": "Unknown",
"unlimited": "Unlimited", "unlimited": "Unlimited",
"unmuted": "Unmuted", "unmuted": "Unmuted",
"unsharp-masking": "Unsharp masking",
"use-mouse-absolute-position": "Use mouse's absolute position", "use-mouse-absolute-position": "Use mouse's absolute position",
"use-this-at-your-own-risk": "Use this at your own risk",
"user-agent-profile": "User-Agent profile", "user-agent-profile": "User-Agent profile",
"vertical-scroll-sensitivity": "Vertical scroll sensitivity", "vertical-scroll-sensitivity": "Vertical scroll sensitivity",
"vertical-sensitivity": "Vertical sensitivity", "vertical-sensitivity": "Vertical sensitivity",
@ -278,6 +313,7 @@ const Texts = {
"volume": "Volume", "volume": "Volume",
"wait-time-countdown": "Countdown", "wait-time-countdown": "Countdown",
"wait-time-estimated": "Estimated finish time", "wait-time-estimated": "Estimated finish time",
"webgl2": "WebGL2",
}; };
export class Translations { export class Translations {
@ -295,14 +331,20 @@ export class Translations {
static async init() { static async init() {
Translations.#enUsIndex = Translations.#supportedLocales.indexOf(Translations.#EN_US); Translations.#enUsIndex = Translations.#supportedLocales.indexOf(Translations.#EN_US);
Translations.refreshCurrentLocale(); Translations.refreshLocale();
await Translations.#loadTranslations(); await Translations.#loadTranslations();
} }
static refreshCurrentLocale() { static refreshLocale(newLocale?: string) {
let locale;
if (newLocale) {
localStorage.setItem(Translations.#KEY_LOCALE, newLocale);
locale = newLocale;
} else {
locale = localStorage.getItem(Translations.#KEY_LOCALE);
}
const supportedLocales = Translations.#supportedLocales; const supportedLocales = Translations.#supportedLocales;
let locale = localStorage.getItem(Translations.#KEY_LOCALE);
if (!locale) { if (!locale) {
// Get browser's locale // Get browser's locale
locale = window.navigator.language || Translations.#EN_US; locale = window.navigator.language || Translations.#EN_US;
@ -354,6 +396,7 @@ export class Translations {
static async updateTranslations(async=false) { static async updateTranslations(async=false) {
// Don't have to download en-US // Don't have to download en-US
if (Translations.#selectedLocale === Translations.#EN_US) { if (Translations.#selectedLocale === Translations.#EN_US) {
localStorage.removeItem(Translations.#KEY_TRANSLATIONS);
return; return;
} }
@ -369,8 +412,12 @@ export class Translations {
const resp = await NATIVE_FETCH(`https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/translations/${locale}.json`); const resp = await NATIVE_FETCH(`https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/translations/${locale}.json`);
const translations = await resp.json(); const translations = await resp.json();
window.localStorage.setItem(Translations.#KEY_TRANSLATIONS, JSON.stringify(translations)); // Prevent saving incorrect translations
Translations.#foreignTranslations = translations; let currentLocale = localStorage.getItem(Translations.#KEY_LOCALE);
if (currentLocale === locale) {
window.localStorage.setItem(Translations.#KEY_TRANSLATIONS, JSON.stringify(translations));
Translations.#foreignTranslations = translations;
}
return true; return true;
} catch (e) { } catch (e) {
debugger; debugger;
@ -387,8 +434,16 @@ export class Translations {
Translations.#foreignTranslations = translations; Translations.#foreignTranslations = translations;
}); });
} }
static switchLocale(locale: string) {
localStorage.setItem(Translations.#KEY_LOCALE, locale);
}
} }
export const t = Translations.get; export const t = Translations.get;
export const ut = (text: string): string => {
BxLogger.warning('Untranslated text', text);
return text;
}
Translations.init(); Translations.init();

View File

@ -1,18 +1,12 @@
import { UserAgentProfile } from "@enums/user-agent";
import { BX_FLAGS } from "./bx-flags";
type UserAgentConfig = { type UserAgentConfig = {
profile: UserAgentProfile, profile: UserAgentProfile,
custom?: string, custom?: string,
}; };
export enum UserAgentProfile { const SMART_TV_UNIQUE_ID = 'FC4A1DA2-711C-4E9C-BC7F-047AF8A672EA';
WINDOWS_EDGE = 'windows-edge',
MACOS_SAFARI = 'macos-safari',
SMARTTV_GENERIC = 'smarttv-generic',
SMARTTV_TIZEN = 'smarttv-tizen',
VR_OCULUS = 'vr-oculus',
ANDROID_KIWI_V123 = 'android-kiwi-v123',
DEFAULT = 'default',
CUSTOM = 'custom',
}
let CHROMIUM_VERSION = '123.0.0.0'; let CHROMIUM_VERSION = '123.0.0.0';
if (!!(window as any).chrome || window.navigator.userAgent.includes('Chrome')) { if (!!(window as any).chrome || window.navigator.userAgent.includes('Chrome')) {
@ -27,13 +21,16 @@ export class UserAgent {
static readonly STORAGE_KEY = 'better_xcloud_user_agent'; static readonly STORAGE_KEY = 'better_xcloud_user_agent';
static #config: UserAgentConfig; static #config: UserAgentConfig;
static #isMobile: boolean | null = null;
static #isSafari: boolean | null = null;
static #isSafariMobile: boolean | null = null;
static #USER_AGENTS: PartialRecord<UserAgentProfile, string> = { static #USER_AGENTS: PartialRecord<UserAgentProfile, string> = {
[UserAgentProfile.WINDOWS_EDGE]: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36 Edg/${CHROMIUM_VERSION}`, [UserAgentProfile.WINDOWS_EDGE]: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36 Edg/${CHROMIUM_VERSION}`,
[UserAgentProfile.MACOS_SAFARI]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1', [UserAgentProfile.MACOS_SAFARI]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1',
[UserAgentProfile.SMARTTV_GENERIC]: window.navigator.userAgent + ' SmartTV', [UserAgentProfile.SMART_TV_GENERIC]: `${window.navigator.userAgent} SmartTV`,
[UserAgentProfile.SMARTTV_TIZEN]: `Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) ${CHROMIUM_VERSION}/7.0 TV Safari/537.36`, [UserAgentProfile.SMART_TV_TIZEN]: `Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) ${CHROMIUM_VERSION}/7.0 TV Safari/537.36 ${SMART_TV_UNIQUE_ID}`,
[UserAgentProfile.VR_OCULUS]: window.navigator.userAgent + ' OculusBrowser VR', [UserAgentProfile.VR_OCULUS]: window.navigator.userAgent + ' OculusBrowser VR',
[UserAgentProfile.ANDROID_KIWI_V123]: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.6312.118 Mobile Safari/537.36',
} }
static init() { static init() {
@ -50,14 +47,14 @@ export class UserAgent {
} }
static updateStorage(profile: UserAgentProfile, custom?: string) { static updateStorage(profile: UserAgentProfile, custom?: string) {
const clonedConfig = structuredClone(UserAgent.#config); const config = UserAgent.#config;
clonedConfig.profile = profile; config.profile = profile;
if (typeof custom !== 'undefined') { if (profile === UserAgentProfile.CUSTOM && typeof custom !== 'undefined') {
clonedConfig.custom = custom; config.custom = custom;
} }
window.localStorage.setItem(UserAgent.STORAGE_KEY, JSON.stringify(clonedConfig)); window.localStorage.setItem(UserAgent.STORAGE_KEY, JSON.stringify(config));
} }
static getDefault(): string { static getDefault(): string {
@ -79,20 +76,40 @@ export class UserAgent {
} }
} }
static isSafari(mobile=false): boolean { static isSafari(): boolean {
if (this.#isSafari !== null) {
return this.#isSafari;
}
const userAgent = UserAgent.getDefault().toLowerCase(); const userAgent = UserAgent.getDefault().toLowerCase();
let result = userAgent.includes('safari') && !userAgent.includes('chrom'); let result = userAgent.includes('safari') && !userAgent.includes('chrom');
if (result && mobile) { this.#isSafari = result;
result = userAgent.includes('mobile'); return result;
}
static isSafariMobile(): boolean {
if (this.#isSafariMobile !== null) {
return this.#isSafariMobile;
} }
const userAgent = UserAgent.getDefault().toLowerCase();
const result = this.isSafari() && userAgent.includes('mobile');
this.#isSafariMobile = result;
return result; return result;
} }
static isMobile(): boolean { static isMobile(): boolean {
if (this.#isMobile !== null) {
return this.#isMobile;
}
const userAgent = UserAgent.getDefault().toLowerCase(); const userAgent = UserAgent.getDefault().toLowerCase();
return /iphone|ipad|android/.test(userAgent); const result = /iphone|ipad|android/.test(userAgent);
this.#isMobile = result;
return result;
} }
static spoof() { static spoof() {
@ -101,7 +118,12 @@ export class UserAgent {
return; return;
} }
const newUserAgent = UserAgent.get(profile); let newUserAgent = UserAgent.get(profile);
// Pretend to be Tizen TV
if (BX_FLAGS.IsSupportedTvBrowser) {
newUserAgent += ` SmartTV ${SMART_TV_UNIQUE_ID}`;
}
// Clear data of navigator.userAgentData, force xCloud to detect browser based on navigator.userAgent // Clear data of navigator.userAgentData, force xCloud to detect browser based on navigator.userAgent
(window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData; (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;

View File

@ -1,12 +1,19 @@
import { PrefKey, getPref, setPref } from "@utils/preferences";
import { AppInterface, SCRIPT_VERSION } from "@utils/global"; import { AppInterface, SCRIPT_VERSION } from "@utils/global";
import { UserAgent } from "@utils/user-agent"; import { UserAgent } from "@utils/user-agent";
import { Translations } from "./translation"; import { Translations } from "./translation";
import { Toast } from "./toast";
import { PrefKey } from "@/enums/pref-keys";
import { getPref, setPref } from "./settings-storages/global-settings-storage";
/** /**
* Check for update * Check for update
*/ */
export function checkForUpdate() { export function checkForUpdate() {
// Don't check update for beta version
if (SCRIPT_VERSION.includes('beta')) {
return;
}
const CHECK_INTERVAL_SECONDS = 2 * 3600; // check every 2 hours const CHECK_INTERVAL_SECONDS = 2 * 3600; // check every 2 hours
const currentVersion = getPref(PrefKey.CURRENT_VERSION); const currentVersion = getPref(PrefKey.CURRENT_VERSION);
@ -42,7 +49,7 @@ export function disablePwa() {
} }
// Check if it's Safari on mobile // Check if it's Safari on mobile
if (!!AppInterface || UserAgent.isSafari(true)) { if (!!AppInterface || UserAgent.isSafariMobile()) {
// Disable the PWA prompt // Disable the PWA prompt
Object.defineProperty(window.navigator, 'standalone', { Object.defineProperty(window.navigator, 'standalone', {
value: true, value: true,
@ -90,3 +97,16 @@ export function floorToNearest(value: number, interval: number): number {
export function roundToNearest(value: number, interval: number): number { export function roundToNearest(value: number, interval: number): number {
return Math.round(value / interval) * interval; return Math.round(value / interval) * interval;
} }
export async function copyToClipboard(text: string, showToast=true): Promise<boolean> {
try {
await navigator.clipboard.writeText(text);
showToast && Toast.show('Copied to clipboard', '', {instant: true});
return true;
} catch (err) {
console.error('Failed to copy: ', err);
showToast && Toast.show('Failed to copy', '', {instant: true});
}
return false;
}

79
src/utils/xcloud-api.ts Normal file
View File

@ -0,0 +1,79 @@
import { NATIVE_FETCH } from "./bx-flags";
import { STATES } from "./global";
export class XcloudApi {
private static instance: XcloudApi;
public static getInstance(): XcloudApi {
if (!XcloudApi.instance) {
XcloudApi.instance = new XcloudApi();
}
return XcloudApi.instance;
}
#CACHE_TITLES: {[key: string]: XcloudTitleInfo} = {};
#CACHE_WAIT_TIME: {[key: string]: XcloudWaitTimeInfo} = {};
async getTitleInfo(id: string): Promise<XcloudTitleInfo | null> {
if (id in this.#CACHE_TITLES) {
return this.#CACHE_TITLES[id];
}
const baseUri = STATES.selectedRegion.baseUri;
if (!baseUri || !STATES.gsToken) {
return null;
}
let json;
try {
const response = await NATIVE_FETCH(`${baseUri}/v2/titles`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${STATES.gsToken}`,
'Content-Type': 'application/json',
},
// format the data
body: JSON.stringify({
alternateIds: [id],
alternateIdType: 'productId',
}),
});
json = (await response.json()).results[0];
} catch (e) {
json = {}
}
this.#CACHE_TITLES[id] = json;
return json;
}
async getWaitTime(id: string): Promise<XcloudWaitTimeInfo | null> {
if (id in this.#CACHE_WAIT_TIME) {
return this.#CACHE_WAIT_TIME[id];
}
const baseUri = STATES.selectedRegion.baseUri;
if (!baseUri || !STATES.gsToken) {
return null;
}
let json;
try {
const response = await NATIVE_FETCH(`${baseUri}/v1/waittime/${id}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${STATES.gsToken}`,
},
});
json = await response.json();
} catch (e) {
json = {};
}
this.#CACHE_WAIT_TIME[id] = json;
return json;
}
}

View File

@ -0,0 +1,227 @@
import { LoadingScreen } from "@modules/loading-screen";
import { RemotePlay } from "@modules/remote-play";
import { StreamBadges } from "@modules/stream/stream-badges";
import { TouchController } from "@modules/touch-controller";
import { BxEvent } from "./bx-event";
import { NATIVE_FETCH, BX_FLAGS } from "./bx-flags";
import { STATES } from "./global";
import { patchIceCandidates } from "./network";
import { getPreferredServerRegion } from "./region";
import { BypassServerIps } from "@/enums/bypass-servers";
import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "./settings-storages/global-settings-storage";
export
class XcloudInterceptor {
static async #handleLogin(request: RequestInfo | URL, init?: RequestInit) {
const bypassServer = getPref(PrefKey.SERVER_BYPASS_RESTRICTION);
if (bypassServer !== 'off') {
const ip = BypassServerIps[bypassServer as keyof typeof BypassServerIps];
ip && (request as Request).headers.set('X-Forwarded-For', ip);
}
const response = await NATIVE_FETCH(request, init);
if (response.status !== 200) {
// Unsupported region
BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_UNAVAILABLE);
return response;
}
const obj = await response.clone().json();
// Store xCloud token
RemotePlay.XCLOUD_TOKEN = obj.gsToken;
// Get server list
const serverEmojis = {
AustraliaEast: '🇦🇺',
AustraliaSouthEast: '🇦🇺',
BrazilSouth: '🇧🇷',
EastUS: '🇺🇸',
EastUS2: '🇺🇸',
JapanEast: '🇯🇵',
KoreaCentral: '🇰🇷',
MexicoCentral: '🇲🇽',
NorthCentralUs: '🇺🇸',
SouthCentralUS: '🇺🇸',
UKSouth: '🇬🇧',
WestEurope: '🇪🇺',
WestUS: '🇺🇸',
WestUS2: '🇺🇸',
};
const serverRegex = /\/\/(\w+)\./;
for (let region of obj.offeringSettings.regions) {
const regionName = region.name as keyof typeof serverEmojis;
let shortName = region.name;
if (region.isDefault) {
STATES.selectedRegion = Object.assign({}, region);
}
let match = serverRegex.exec(region.baseUri);
if (match) {
shortName = match[1];
if (serverEmojis[regionName]) {
shortName = serverEmojis[regionName] + ' ' + shortName;
}
}
region.shortName = shortName.toUpperCase();
STATES.serverRegions[region.name] = Object.assign({}, region);
}
BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_READY);
const preferredRegion = getPreferredServerRegion();
if (preferredRegion && preferredRegion in STATES.serverRegions) {
const tmp = Object.assign({}, STATES.serverRegions[preferredRegion]);
tmp.isDefault = true;
obj.offeringSettings.regions = [tmp];
STATES.selectedRegion = tmp;
}
STATES.gsToken = obj.gsToken;
response.json = () => Promise.resolve(obj);
return response;
}
static async #handlePlay(request: RequestInfo | URL, init?: RequestInit) {
const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_TARGET_RESOLUTION);
const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
const url = (typeof request === 'string') ? request : (request as Request).url;
const parsedUrl = new URL(url);
let badgeRegion: string = parsedUrl.host.split('.', 1)[0];
for (let regionName in STATES.serverRegions) {
const region = STATES.serverRegions[regionName];
if (parsedUrl.origin == region.baseUri) {
badgeRegion = regionName;
break;
}
}
StreamBadges.getInstance().setRegion(badgeRegion);
const clone = (request as Request).clone();
const body = await clone.json();
// Force stream's resolution
if (PREF_STREAM_TARGET_RESOLUTION !== 'auto') {
const osName = (PREF_STREAM_TARGET_RESOLUTION === '720p') ? 'android' : 'windows';
body.settings.osName = osName;
}
// Override "locale" value
if (PREF_STREAM_PREFERRED_LOCALE !== 'default') {
body.settings.locale = PREF_STREAM_PREFERRED_LOCALE;
}
const newRequest = new Request(request, {
body: JSON.stringify(body),
});
return NATIVE_FETCH(newRequest);
}
static async #handleWaitTime(request: RequestInfo | URL, init?: RequestInit) {
const response = await NATIVE_FETCH(request, init);
if (getPref(PrefKey.UI_LOADING_SCREEN_WAIT_TIME)) {
const json = await response.clone().json();
if (json.estimatedAllocationTimeInSeconds > 0) {
// Setup wait time overlay
LoadingScreen.setupWaitTime(json.estimatedTotalWaitTimeInSeconds);
}
}
return response;
}
static async #handleConfiguration(request: RequestInfo | URL, init?: RequestInit) {
if ((request as Request).method !== 'GET') {
return NATIVE_FETCH(request, init);
}
// Touch controller for all games
if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
const titleInfo = STATES.currentStream.titleInfo;
if (titleInfo?.details.hasTouchSupport) {
TouchController.disable();
} else {
TouchController.enable();
}
}
// Intercept configurations
const response = await NATIVE_FETCH(request, init);
const text = await response.clone().text();
if (!text.length) {
return response;
}
const obj = JSON.parse(text);
let overrides = JSON.parse(obj.clientStreamingConfigOverrides || '{}') || {};
overrides.inputConfiguration = overrides.inputConfiguration || {};
overrides.inputConfiguration.enableVibration = true;
let overrideMkb: boolean | null = null;
if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' || (STATES.currentStream.titleInfo && BX_FLAGS.ForceNativeMkbTitles?.includes(STATES.currentStream.titleInfo.details.productId))) {
overrideMkb = true;
}
if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') {
overrideMkb = false;
}
if (overrideMkb !== null) {
overrides.inputConfiguration = Object.assign(overrides.inputConfiguration, {
enableMouseInput: overrideMkb,
enableKeyboardInput: overrideMkb,
});
}
// Enable touch controller
if (TouchController.isEnabled()) {
overrides.inputConfiguration.enableTouchInput = true;
overrides.inputConfiguration.maxTouchPoints = 10;
}
// Enable mic
if (getPref(PrefKey.AUDIO_MIC_ON_PLAYING)) {
overrides.audioConfiguration = overrides.audioConfiguration || {};
overrides.audioConfiguration.enableMicrophone = true;
}
obj.clientStreamingConfigOverrides = JSON.stringify(overrides);
response.json = () => Promise.resolve(obj);
response.text = () => Promise.resolve(JSON.stringify(obj));
return response;
}
static async handle(request: RequestInfo | URL, init?: RequestInit) {
let url = (typeof request === 'string') ? request : (request as Request).url;
// Server list
if (url.endsWith('/v2/login/user')) {
return XcloudInterceptor.#handleLogin(request, init);
} else if (url.endsWith('/sessions/cloud/play')) { // Get session
return XcloudInterceptor.#handlePlay(request, init);
} else if (url.includes('xboxlive.com') && url.includes('/waittime/')) {
return XcloudInterceptor.#handleWaitTime(request, init);
} else if (url.endsWith('/configuration')) {
return XcloudInterceptor.#handleConfiguration(request, init);
} else if (url && url.endsWith('/ice') && url.includes('/sessions/') && (request as Request).method === 'GET') {
return patchIceCandidates(request as Request);
}
return NATIVE_FETCH(request, init);
}
}

Some files were not shown because too many files have changed in this diff Show More