mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-29 10:51:44 +02:00
Compare commits
38 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d79aaecb54 | |||
| 148b60cccb | |||
| db78918d34 | |||
| ddc4346da8 | |||
| 4db25e8d62 | |||
| e10a98c245 | |||
| c9b070253c | |||
| ba07e0498e | |||
| 6c8f336e9c | |||
| 522e4dddd2 | |||
| e1627dca61 | |||
| b5a19cd211 | |||
| d5d81f3374 | |||
| 2db78d01a0 | |||
| 8f9976da28 | |||
| 322418ec5b | |||
| 28049e5d22 | |||
| 9593cdf8dd | |||
| 732bd19f3a | |||
| 562c1c95f5 | |||
| 5d1a0a3428 | |||
| 758501bcd3 | |||
| e10eadc832 | |||
| ed3c4041ff | |||
| 60cadb4b04 | |||
| b5c033498e | |||
| a24446a6b4 | |||
| bee190b867 | |||
| 941ed0a00f | |||
| 1f632db6b4 | |||
| c07e3297ca | |||
| 5e43915ff7 | |||
| e21375821d | |||
| 6438e533d6 | |||
| e9671cbe5d | |||
| b99ec65cc9 | |||
| addcf56abf | |||
| db17bda673 |
2
dist/better-xcloud.meta.js
vendored
2
dist/better-xcloud.meta.js
vendored
@ -1,5 +1,5 @@
|
||||
// ==UserScript==
|
||||
// @name Better xCloud
|
||||
// @namespace https://github.com/redphx
|
||||
// @version 4.6.0
|
||||
// @version 4.6.3
|
||||
// ==/UserScript==
|
||||
|
||||
1126
dist/better-xcloud.user.js
vendored
1126
dist/better-xcloud.user.js
vendored
File diff suppressed because it is too large
Load Diff
@ -6,12 +6,12 @@
|
||||
"build": "build.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "latest",
|
||||
"@types/node": "^20.12.7",
|
||||
"@types/bun": "^1.1.3",
|
||||
"@types/node": "^20.13.0",
|
||||
"@types/stylus": "^0.48.42",
|
||||
"stylus": "^0.63.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5.0.0"
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,10 +71,10 @@
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: var(--bx-button-height);
|
||||
/* height: var(--bx-button-height); */
|
||||
line-height: var(--bx-button-height);
|
||||
vertical-align: middle;
|
||||
vertical-align: -webkit-baseline-middle;
|
||||
/* vertical-align: -webkit-baseline-middle; */
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
}
|
||||
|
||||
.bx-mkb-pointer-lock-msg {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
@ -41,16 +40,7 @@
|
||||
background: #151515;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 12px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
div {
|
||||
> div:first-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
@ -69,6 +59,26 @@
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
> div:last-of-type {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-top: 10px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
button
|
||||
}
|
||||
}
|
||||
|
||||
.bx-mkb-preset-tools {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/* STATS BADGE */
|
||||
.bx-badges {
|
||||
position: absolute;
|
||||
margin-left: 0px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
@ -17,27 +16,60 @@
|
||||
margin: 0 8px 8px 0;
|
||||
box-shadow: 0px 0px 6px #000;
|
||||
border-radius: 4px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.bx-badge-name {
|
||||
background-color: #2d3036;
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
text-transform: uppercase;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-badge-value {
|
||||
background-color: grey;
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.bx-badge-name, .bx-badge-value {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
/* height: 30px; */
|
||||
line-height: 30px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.bx-badge-battery[data-charging=true] span:first-of-type::after {
|
||||
content: ' ⚡️';
|
||||
}
|
||||
|
||||
div[class^=StreamMenu-module__container] .bx-badges {
|
||||
position: absolute;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#gamepass-dialog-root .bx-badges {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 460px;
|
||||
max-width: 500px;
|
||||
|
||||
@media (min-width: 568px) and (max-height: 480px) {
|
||||
position: unset;
|
||||
top: unset;
|
||||
left: unset;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (min-height: calc(481px)) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* STATS BAR */
|
||||
.bx-stats-bar {
|
||||
display: block;
|
||||
|
||||
@ -20,6 +20,18 @@ body[data-media-type=tv] .bx-stream-refresh-button {
|
||||
top: calc(var(--gds-focus-borderSize) + 80px) !important;
|
||||
}
|
||||
|
||||
.bx-stream-home-button {
|
||||
top: calc(env(safe-area-inset-top, 0px) + 10px + 50px * 2) !important;
|
||||
}
|
||||
|
||||
body[data-media-type=default] .bx-stream-home-button {
|
||||
left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
|
||||
}
|
||||
|
||||
body[data-media-type=tv] .bx-stream-home-button {
|
||||
top: calc(var(--gds-focus-borderSize) + 80px * 2) !important;
|
||||
}
|
||||
|
||||
@keyframes bx-anim-taking-screenshot {
|
||||
0% {
|
||||
border: 0px solid #ffffff80;
|
||||
@ -53,3 +65,10 @@ div[data-testid=media-container] {
|
||||
align-self: center;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#gamepass-dialog-root div[class^=Guide-module__guide] {
|
||||
.bx-button {
|
||||
overflow: visible;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
3
src/assets/svg/battery-full.svg
Normal file
3
src/assets/svg/battery-full.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke-miterlimit='2' viewBox='0 0 32 32'>
|
||||
<path d='M24.774 6.71H3.097C1.398 6.71 0 8.108 0 9.806v12.387c0 1.699 1.398 3.097 3.097 3.097h21.677c1.699 0 3.097-1.398 3.097-3.097V9.806c0-1.699-1.398-3.097-3.097-3.097zm1.032 15.484a1.04 1.04 0 0 1-1.032 1.032H3.097a1.04 1.04 0 0 1-1.032-1.032V9.806a1.04 1.04 0 0 1 1.032-1.032h21.677a1.04 1.04 0 0 1 1.032 1.032v12.387zm-2.065-10.323v8.258a1.04 1.04 0 0 1-1.032 1.032H5.161a1.04 1.04 0 0 1-1.032-1.032v-8.258a1.04 1.04 0 0 1 1.032-1.032H22.71a1.04 1.04 0 0 1 1.032 1.032zm8.258 0v8.258a1.04 1.04 0 0 1-1.032 1.032 1.04 1.04 0 0 1-1.032-1.032v-8.258a1.04 1.04 0 0 1 1.032-1.032A1.04 1.04 0 0 1 32 11.871z' fill-rule='nonzero'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 821 B |
@ -1,6 +1,6 @@
|
||||
<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 transform="matrix(.150985 0 0 .150985 -3.32603 -2.72209)" fill="none" stroke="#fff" stroke-width="16">
|
||||
<path d="M208 208H48c-8.777 0-16-7.223-16-16V80c0-8.777 7.223-16 16-16h32l16-24h64l16 24h32c8.777 0 16 7.223 16 16v112c0 8.777-7.223 16-16 16z"/>
|
||||
<circle cx="128" cy="132" r="36"/>
|
||||
<g transform='matrix(.150985 0 0 .150985 -3.32603 -2.72209)' fill='none' stroke='#fff' stroke-width='16'>
|
||||
<path d='M208 208H48c-8.777 0-16-7.223-16-16V80c0-8.777 7.223-16 16-16h32l16-24h64l16 24h32c8.777 0 16 7.223 16 16v112c0 8.777-7.223 16-16 16z'/>
|
||||
<circle cx='128' cy='132' r='36'/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 494 B After Width: | Height: | Size: 494 B |
@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
|
||||
<path d="M6.755 1.924l-6 13.649c-.119.27-.119.578 0 .849l6 13.649c.234.533.857.775 1.389.541s.775-.857.541-1.389L2.871 15.997 8.685 2.773c.234-.533-.008-1.155-.541-1.389s-1.155.008-1.389.541z"/>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' stroke='#fff' fill='#fff' height='100%' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
|
||||
<path d='M6.755 1.924l-6 13.649c-.119.27-.119.578 0 .849l6 13.649c.234.533.857.775 1.389.541s.775-.857.541-1.389L2.871 15.997 8.685 2.773c.234-.533-.008-1.155-.541-1.389s-1.155.008-1.389.541z'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 386 B After Width: | Height: | Size: 386 B |
@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
|
||||
<path d="M2.685 1.924l6 13.649c.119.27.119.578 0 .849l-6 13.649c-.234.533-.857.775-1.389.541s-.775-.857-.541-1.389l5.813-13.225L.755 2.773c-.234-.533.008-1.155.541-1.389s1.155.008 1.389.541z"/>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' stroke='#fff' fill='#fff' height='100%' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
|
||||
<path d='M2.685 1.924l6 13.649c.119.27.119.578 0 .849l-6 13.649c-.234.533-.857.775-1.389.541s-.775-.857-.541-1.389l5.813-13.225L.755 2.773c-.234-.533.008-1.155.541-1.389s1.155.008 1.389.541z'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 385 B |
6
src/assets/svg/clock.svg
Normal file
6
src/assets/svg/clock.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<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 transform='matrix(.150026 0 0 .150026 -3.20332 -3.20332)' fill='none' stroke='#fff' stroke-width='16'>
|
||||
<circle cx='128' cy='128' r='96'/>
|
||||
<path d='M128 72v56h56'/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 374 B |
3
src/assets/svg/cloud.svg
Normal file
3
src/assets/svg/cloud.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<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='M9.773 16c0-5.694 4.685-10.379 10.379-10.379S30.53 10.306 30.53 16s-4.685 10.379-10.379 10.379H8.735c-3.982-.005-7.256-3.283-7.256-7.265s3.28-7.265 7.265-7.265c.606 0 1.21.076 1.797.226' fill='none' stroke='#fff' stroke-width='2.076'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 427 B |
@ -1,4 +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="M25.425 1.5c2.784 0 5.075 2.291 5.075 5.075s-2.291 5.075-5.075 5.075H20.35V6.575c0-2.784 2.291-5.075 5.075-5.075zM11.65 11.65H6.575C3.791 11.65 1.5 9.359 1.5 6.575S3.791 1.5 6.575 1.5s5.075 2.291 5.075 5.075v5.075zm8.7 8.7h5.075c2.784 0 5.075 2.291 5.075 5.075S28.209 30.5 25.425 30.5s-5.075-2.291-5.075-5.075V20.35zM6.575 30.5c-2.784 0-5.075-2.291-5.075-5.075s2.291-5.075 5.075-5.075h5.075v5.075c0 2.784-2.291 5.075-5.075 5.075z"/>
|
||||
<path d="M11.65 11.65h8.7v8.7h-8.7z"/>
|
||||
<path d='M25.425 1.5c2.784 0 5.075 2.291 5.075 5.075s-2.291 5.075-5.075 5.075H20.35V6.575c0-2.784 2.291-5.075 5.075-5.075zM11.65 11.65H6.575C3.791 11.65 1.5 9.359 1.5 6.575S3.791 1.5 6.575 1.5s5.075 2.291 5.075 5.075v5.075zm8.7 8.7h5.075c2.784 0 5.075 2.291 5.075 5.075S28.209 30.5 25.425 30.5s-5.075-2.291-5.075-5.075V20.35zM6.575 30.5c-2.784 0-5.075-2.291-5.075-5.075s2.291-5.075 5.075-5.075h5.075v5.075c0 2.784-2.291 5.075-5.075 5.075z'/>
|
||||
<path d='M11.65 11.65h8.7v8.7h-8.7z'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 667 B After Width: | Height: | Size: 667 B |
4
src/assets/svg/download.svg
Normal file
4
src/assets/svg/download.svg
Normal 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='M16 19.955V1.5m14.5 18.455v9.227c0 .723-.595 1.318-1.318 1.318H2.818c-.723 0-1.318-.595-1.318-1.318v-9.227'/>
|
||||
<path d='M22.591 13.364L16 19.955l-6.591-6.591'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
3
src/assets/svg/home.svg
Normal file
3
src/assets/svg/home.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<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='M12.217 30.503V20.414h7.567v10.089h10.089V15.37a1.26 1.26 0 0 0-.369-.892L16.892 1.867a1.26 1.26 0 0 0-1.784 0L2.497 14.478a1.26 1.26 0 0 0-.369.892v15.133h10.089z'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 358 B |
@ -1,4 +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="M16 25.125v5.368M5.265 4.728l21.471 23.618m-4.789-5.267c-1.698 1.326-3.793 2.047-5.947 2.047-5.3 0-9.662-4.362-9.662-9.662"/>
|
||||
<path d="M25.662 15.463a9.62 9.62 0 0 1-.978 4.242m-5.64.187c-.895.616-1.957.943-3.043.939-2.945 0-5.368-2.423-5.368-5.368v-4.831m.442-5.896A5.38 5.38 0 0 1 16 1.507c2.945 0 5.368 2.423 5.368 5.368v8.588c0 .188-.01.375-.03.562"/>
|
||||
<path d='M16 25.125v5.368M5.265 4.728l21.471 23.618m-4.789-5.267c-1.698 1.326-3.793 2.047-5.947 2.047-5.3 0-9.662-4.362-9.662-9.662'/>
|
||||
<path d='M25.662 15.463a9.62 9.62 0 0 1-.978 4.242m-5.64.187c-.895.616-1.957.943-3.043.939-2.945 0-5.368-2.423-5.368-5.368v-4.831m.442-5.896A5.38 5.38 0 0 1 16 1.507c2.945 0 5.368 2.423 5.368 5.368v8.588c0 .188-.01.375-.03.562'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 551 B After Width: | Height: | Size: 551 B |
@ -1,3 +1,3 @@
|
||||
<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="M21.368 6.875A5.37 5.37 0 0 0 16 1.507a5.37 5.37 0 0 0-5.368 5.368v8.588A5.37 5.37 0 0 0 16 20.831a5.37 5.37 0 0 0 5.368-5.368V6.875zM16 25.125v5.368m9.662-15.03c0 5.3-4.362 9.662-9.662 9.662s-9.662-4.362-9.662-9.662"/>
|
||||
<path d='M21.368 6.875A5.37 5.37 0 0 0 16 1.507a5.37 5.37 0 0 0-5.368 5.368v8.588A5.37 5.37 0 0 0 16 20.831a5.37 5.37 0 0 0 5.368-5.368V6.875zM16 25.125v5.368m9.662-15.03c0 5.3-4.362 9.662-9.662 9.662s-9.662-4.362-9.662-9.662'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 411 B |
@ -1,3 +1,3 @@
|
||||
<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="M23.247 12.377h7.247V5.13"/><path d="M23.911 25.663a13.29 13.29 0 0 1-9.119 3.623C7.504 29.286 1.506 23.289 1.506 16S7.504 2.713 14.792 2.713a13.29 13.29 0 0 1 9.395 3.891l6.307 5.772"/>
|
||||
<path d='M23.247 12.377h7.247V5.13'/><path d='M23.911 25.663a13.29 13.29 0 0 1-9.119 3.623C7.504 29.286 1.506 23.289 1.506 16S7.504 2.713 14.792 2.713a13.29 13.29 0 0 1 9.395 3.891l6.307 5.772'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 378 B After Width: | Height: | Size: 378 B |
4
src/assets/svg/speaker-high.svg
Normal file
4
src/assets/svg/speaker-high.svg
Normal 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='M8.964 21.417h-6.5a1.09 1.09 0 0 1-1.083-1.083v-8.667a1.09 1.09 0 0 1 1.083-1.083h6.5L18.714 3v26l-9.75-7.583z'/>
|
||||
<path d='M8.964 10.583v10.833m15.167-8.28a4.35 4.35 0 0 1 0 5.728M28.149 9.5a9.79 9.79 0 0 1 0 13'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 410 B |
@ -1,9 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
|
||||
<g fill="none" stroke="#fff">
|
||||
<path d="M6.021 5.021l20 22" stroke-width="2"/>
|
||||
<path d="M8.735 8.559H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h19.34m4.289 0h2.594a.89.89 0 0 0 .889-.888V9.448a.89.89 0 0 0-.889-.889H12.971" stroke-miterlimit="1.5" stroke-width="2.083"/>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
|
||||
<g fill='none' stroke='#fff'>
|
||||
<path d='M6.021 5.021l20 22' stroke-width='2'/>
|
||||
<path d='M8.735 8.559H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h19.34m4.289 0h2.594a.89.89 0 0 0 .889-.888V9.448a.89.89 0 0 0-.889-.889H12.971' stroke-miterlimit='1.5' stroke-width='2.083'/>
|
||||
</g>
|
||||
<path d="M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z"/>
|
||||
<path d="M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z"/>
|
||||
<circle cx="25.345" cy="18.582" r="2.561" fill="none" stroke="#fff" stroke-width="1.78" transform="matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)"/>
|
||||
<path d='M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z'/>
|
||||
<path d='M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z'/>
|
||||
<circle cx='25.345' cy='18.582' r='2.561' fill='none' stroke='#fff' stroke-width='1.78' transform='matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 915 B After Width: | Height: | Size: 915 B |
@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
|
||||
<path d="M30.021 9.448a.89.89 0 0 0-.889-.889H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h26.223a.89.89 0 0 0 .889-.888V9.448z" fill="none" stroke="#fff" stroke-width="2.083"/>
|
||||
<path d="M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z"/>
|
||||
<path d="M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z"/>
|
||||
<circle cx="25.345" cy="18.582" r="2.561" fill="none" stroke="#fff" stroke-width="1.78" transform="matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)"/>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
|
||||
<path d='M30.021 9.448a.89.89 0 0 0-.889-.889H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h26.223a.89.89 0 0 0 .889-.888V9.448z' fill='none' stroke='#fff' stroke-width='2.083'/>
|
||||
<path d='M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z'/>
|
||||
<path d='M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z'/>
|
||||
<circle cx='25.345' cy='18.582' r='2.561' fill='none' stroke='#fff' stroke-width='1.78' transform='matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 796 B |
4
src/assets/svg/upload.svg
Normal file
4
src/assets/svg/upload.svg
Normal 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='M16 19.905V1.682m14.318 18.223v9.112a1.31 1.31 0 0 1-1.302 1.302H2.983a1.31 1.31 0 0 1-1.302-1.302v-9.112'/>
|
||||
<path d='M9.492 8.19L16 1.682l6.508 6.508'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
26
src/index.ts
26
src/index.ts
@ -1,5 +1,5 @@
|
||||
import "@utils/global";
|
||||
import { BxEvent } from "@utils/bx-event";
|
||||
import { BxEvent, XcloudGuideWhere } from "@utils/bx-event";
|
||||
import { BX_FLAGS } from "@utils/bx-flags";
|
||||
import { BxExposed } from "@utils/bx-exposed";
|
||||
import { t } from "@utils/translation";
|
||||
@ -25,7 +25,7 @@ import { VibrationManager } from "@modules/vibration-manager";
|
||||
import { overridePreloadState } from "@utils/preload-state";
|
||||
import { patchAudioContext, patchCanvasContext, patchMeControl, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
|
||||
import { AppInterface, STATES } from "@utils/global";
|
||||
import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
|
||||
import { injectStreamMenuButtons, setupStreamUiEvents } from "@modules/stream/stream-ui";
|
||||
import { BxLogger } from "@utils/bx-logger";
|
||||
import { GameBar } from "./modules/game-bar/game-bar";
|
||||
import { Screenshot } from "./utils/screenshot";
|
||||
@ -185,7 +185,7 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
|
||||
|
||||
STATES.currentStream.audioGainNode = null;
|
||||
STATES.currentStream.$video = null;
|
||||
StreamStats.onStoppedPlaying();
|
||||
StreamStats.getInstance().onStoppedPlaying();
|
||||
|
||||
MouseCursorHider.stop();
|
||||
TouchController.reset();
|
||||
@ -206,6 +206,25 @@ function observeRootDialog($root: HTMLElement) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (mutation.addedNodes.length === 1) {
|
||||
const $addedElm = mutation.addedNodes[0];
|
||||
if ($addedElm instanceof HTMLElement && $addedElm.className) {
|
||||
if ($addedElm.className.startsWith('NavigationAnimation') || $addedElm.className.startsWith('DialogRoutes') || $addedElm.className.startsWith('Dialog-module__container')) {
|
||||
// Find navigation bar
|
||||
const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true');
|
||||
if ($selectedTab) {
|
||||
let $elm: Element | null = $selectedTab;
|
||||
let index;
|
||||
for (index = 0; ($elm = $elm?.previousElementSibling); index++);
|
||||
|
||||
if (index === 0) {
|
||||
BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_SHOWN, {where: XcloudGuideWhere.HOME});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const shown = ($root.firstElementChild && $root.firstElementChild.childElementCount > 0) || false;
|
||||
if (shown !== currentShown) {
|
||||
currentShown = shown;
|
||||
@ -262,6 +281,7 @@ function main() {
|
||||
(getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
|
||||
BX_FLAGS.PreloadUi && setupStreamUi();
|
||||
|
||||
setupStreamUiEvents();
|
||||
StreamBadges.setupEvents();
|
||||
StreamStats.setupEvents();
|
||||
MkbHandler.setupEvents();
|
||||
|
||||
@ -87,7 +87,7 @@ export class ControllerShortcut {
|
||||
break;
|
||||
|
||||
case ShortcutAction.STREAM_STATS_TOGGLE:
|
||||
StreamStats.toggle();
|
||||
StreamStats.getInstance().toggle();
|
||||
break;
|
||||
|
||||
case ShortcutAction.STREAM_MICROPHONE_TOGGLE:
|
||||
|
||||
@ -46,6 +46,10 @@ export class LoadingScreen {
|
||||
#game-stream div[class*=RocketAnimation-module__container] > svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#game-stream video[class*=RocketAnimationVideo-module__video] {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
$bgStyle.textContent += css;
|
||||
}
|
||||
@ -159,13 +163,13 @@ export class LoadingScreen {
|
||||
`;
|
||||
}
|
||||
|
||||
LoadingScreen.reset();
|
||||
setTimeout(LoadingScreen.reset, 2000);
|
||||
}
|
||||
|
||||
static reset() {
|
||||
LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
|
||||
LoadingScreen.#$bgStyle && (LoadingScreen.#$bgStyle.textContent = '');
|
||||
|
||||
LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
|
||||
LoadingScreen.#waitTimeInterval && clearInterval(LoadingScreen.#waitTimeInterval);
|
||||
LoadingScreen.#waitTimeInterval = null;
|
||||
}
|
||||
|
||||
@ -411,8 +411,13 @@ export class MkbHandler {
|
||||
return true;
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.#enabled = !this.#enabled;
|
||||
toggle = (force?: boolean) => {
|
||||
if (typeof force !== 'undefined') {
|
||||
this.#enabled = force;
|
||||
} else {
|
||||
this.#enabled = !this.#enabled;
|
||||
}
|
||||
|
||||
Toast.show(t('mouse-and-keyboard'), t(this.#enabled ? 'enabled' : 'disabled'), {instant: true});
|
||||
this.#mouseDataProvider?.toggle(this.#enabled);
|
||||
}
|
||||
@ -463,28 +468,46 @@ export class MkbHandler {
|
||||
|
||||
window.addEventListener('keydown', this.#onKeyboardEvent);
|
||||
|
||||
this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
|
||||
createButton({
|
||||
icon: BxIcon.MOUSE_SETTINGS,
|
||||
style: ButtonStyle.PRIMARY,
|
||||
onClick: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
showStreamSettings('mkb');
|
||||
},
|
||||
}),
|
||||
if (!this.#$message) {
|
||||
this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg'},
|
||||
CE('div', {},
|
||||
CE('p', {}, t('mkb-click-to-activate')),
|
||||
CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
|
||||
),
|
||||
|
||||
CE('div', {},
|
||||
createButton({
|
||||
icon: BxIcon.MOUSE_SETTINGS,
|
||||
label: t('edit'),
|
||||
style: ButtonStyle.PRIMARY,
|
||||
onClick: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
showStreamSettings('mkb');
|
||||
},
|
||||
}),
|
||||
|
||||
createButton({
|
||||
label: t('disable'),
|
||||
onClick: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.toggle(false);
|
||||
this.waitForMouseData(false);
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
this.#$message.addEventListener('click', this.start.bind(this));
|
||||
document.documentElement.appendChild(this.#$message);
|
||||
this.#$message.addEventListener('click', this.start.bind(this));
|
||||
document.documentElement.appendChild(this.#$message);
|
||||
}
|
||||
|
||||
window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
|
||||
|
||||
this.#$message.classList.add('bx-gone');
|
||||
this.waitForMouseData(true);
|
||||
}
|
||||
|
||||
|
||||
@ -554,6 +554,16 @@ true` + text;
|
||||
str = str.replace(text, newCode);
|
||||
return str;
|
||||
},
|
||||
|
||||
skipFeedbackDialog(str: string) {
|
||||
const text = '&&this.shouldTransitionToFeedback(';
|
||||
if (!str.includes(text)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
str = str.replace(text, '&& false ' + text);
|
||||
return str;
|
||||
},
|
||||
};
|
||||
|
||||
let PATCH_ORDERS: PatchArray = [
|
||||
@ -605,6 +615,9 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
|
||||
// Patch volume control for combined audio+video stream
|
||||
getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchCombinedAudioVideoMediaStream',
|
||||
|
||||
// Skip feedback dialog
|
||||
getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
|
||||
|
||||
|
||||
STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
|
||||
STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
|
||||
|
||||
@ -11,7 +11,12 @@ if (btnHome) {
|
||||
this.bxHomeStates = {};
|
||||
}
|
||||
|
||||
let intervalMs = 0;
|
||||
let hijack = false;
|
||||
|
||||
if (btnHome.pressed) {
|
||||
hijack = true;
|
||||
intervalMs = 16;
|
||||
this.gamepadIsIdle.set(currentGamepad.index, false);
|
||||
|
||||
if (this.bxHomeStates[currentGamepad.index]) {
|
||||
@ -33,14 +38,8 @@ if (btnHome) {
|
||||
timestamp: currentGamepad.timestamp,
|
||||
};
|
||||
}
|
||||
|
||||
// Listen to next button press
|
||||
const intervalMs = 16;
|
||||
this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
|
||||
|
||||
// Hijack this button
|
||||
return;
|
||||
} else if (this.bxHomeStates[currentGamepad.index]) {
|
||||
hijack = true;
|
||||
const info = structuredClone(this.bxHomeStates[currentGamepad.index]);
|
||||
|
||||
// Home button released
|
||||
@ -77,11 +76,19 @@ if (btnHome) {
|
||||
}];
|
||||
|
||||
const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
|
||||
const intervalMs = isLongPress ? 500 : 100;
|
||||
intervalMs = isLongPress ? 500 : 100;
|
||||
|
||||
this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
|
||||
this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
|
||||
return;
|
||||
} else {
|
||||
intervalMs = 4;
|
||||
}
|
||||
}
|
||||
|
||||
if (hijack && intervalMs) {
|
||||
// Listen to next button press
|
||||
this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
|
||||
|
||||
// Hijack this button
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,11 @@ if (!window.BX_ENABLE_CONTROLLER_VIBRATION) {
|
||||
}
|
||||
|
||||
const intensity = window.BX_VIBRATION_INTENSITY;
|
||||
if (intensity && intensity < 1) {
|
||||
if (intensity === 0) {
|
||||
return void(0);
|
||||
}
|
||||
|
||||
if (intensity < 1) {
|
||||
e.leftMotorPercent *= intensity;
|
||||
e.rightMotorPercent *= intensity;
|
||||
e.leftTriggerMotorPercent *= intensity;
|
||||
|
||||
@ -1,71 +1,91 @@
|
||||
import { t } from "@utils/translation";
|
||||
import { BxEvent } from "@utils/bx-event";
|
||||
import { CE } from "@utils/html";
|
||||
import { BxEvent, XcloudGuideWhere } from "@utils/bx-event";
|
||||
import { CE, createSvgIcon } from "@utils/html";
|
||||
import { STATES } from "@utils/global";
|
||||
import { BxLogger } from "@/utils/bx-logger";
|
||||
import { BxIcon } from "@/utils/bx-icon";
|
||||
|
||||
enum StreamBadge {
|
||||
PLAYTIME = 'playtime',
|
||||
BATTERY = 'battery',
|
||||
IN = 'in',
|
||||
OUT = 'out',
|
||||
DOWNLOAD = 'in',
|
||||
UPLOAD = 'out',
|
||||
|
||||
SERVER = 'server',
|
||||
VIDEO = 'video',
|
||||
AUDIO = 'audio',
|
||||
}
|
||||
|
||||
BREAK = 'break',
|
||||
const StreamBadgeIcon: Partial<{[key in StreamBadge]: any}> = {
|
||||
[StreamBadge.PLAYTIME]: BxIcon.PLAYTIME,
|
||||
[StreamBadge.VIDEO]: BxIcon.DISPLAY,
|
||||
[StreamBadge.BATTERY]: BxIcon.BATTERY,
|
||||
[StreamBadge.DOWNLOAD]: BxIcon.DOWNLOAD,
|
||||
[StreamBadge.UPLOAD]: BxIcon.UPLOAD,
|
||||
[StreamBadge.SERVER]: BxIcon.SERVER,
|
||||
[StreamBadge.AUDIO]: BxIcon.AUDIO,
|
||||
}
|
||||
|
||||
export class StreamBadges {
|
||||
static ipv6 = false;
|
||||
static resolution?: {width: number, height: number} | null = null;
|
||||
static video?: {codec: string, profile?: string | null} | null = null;
|
||||
static audio?: {codec: string, bitrate: number} | null = null;
|
||||
static fps = 0;
|
||||
static region = '';
|
||||
|
||||
static startBatteryLevel = 100;
|
||||
static startTimestamp = 0;
|
||||
|
||||
static #cachedDoms: {[index: string]: HTMLElement} = {};
|
||||
|
||||
static #interval?: number | null;
|
||||
static readonly #REFRESH_INTERVAL = 3000;
|
||||
|
||||
static #renderBadge(name: StreamBadge, value: string, color: string) {
|
||||
if (name === StreamBadge.BREAK) {
|
||||
return CE('div', {'style': 'display: block'});
|
||||
private static instance: StreamBadges;
|
||||
public static getInstance(): StreamBadges {
|
||||
if (!StreamBadges.instance) {
|
||||
StreamBadges.instance = new StreamBadges();
|
||||
}
|
||||
|
||||
return StreamBadges.instance;
|
||||
}
|
||||
|
||||
#ipv6 = false;
|
||||
#resolution?: {width: number, height: number} | null = null;
|
||||
#video?: {codec: string, profile?: string | null} | null = null;
|
||||
#audio?: {codec: string, bitrate: number} | null = null;
|
||||
#region = '';
|
||||
|
||||
startBatteryLevel = 100;
|
||||
startTimestamp = 0;
|
||||
|
||||
#$container: HTMLElement | undefined;
|
||||
#cachedDoms: Partial<{[key in StreamBadge]: HTMLElement}> = {};
|
||||
|
||||
#interval?: number | null;
|
||||
readonly #REFRESH_INTERVAL = 3000;
|
||||
|
||||
setRegion(region: string) {
|
||||
this.#region = region;
|
||||
}
|
||||
|
||||
#renderBadge(name: StreamBadge, value: string, color: string) {
|
||||
let $badge;
|
||||
if (StreamBadges.#cachedDoms[name]) {
|
||||
$badge = StreamBadges.#cachedDoms[name];
|
||||
if (this.#cachedDoms[name]) {
|
||||
$badge = this.#cachedDoms[name]!;
|
||||
$badge.lastElementChild!.textContent = value;
|
||||
return $badge;
|
||||
}
|
||||
|
||||
$badge = CE('div', {'class': 'bx-badge'},
|
||||
CE('span', {'class': 'bx-badge-name'}, t(`badge-${name}`)),
|
||||
CE('span', {'class': 'bx-badge-value', 'style': `background-color: ${color}`}, value));
|
||||
$badge = CE('div', {'class': 'bx-badge', 'title': t(`badge-${name}`)},
|
||||
CE('span', {'class': 'bx-badge-name'}, createSvgIcon(StreamBadgeIcon[name])),
|
||||
CE('span', {'class': 'bx-badge-value', 'style': `background-color: ${color}`}, value),
|
||||
);
|
||||
|
||||
if (name === StreamBadge.BATTERY) {
|
||||
$badge.classList.add('bx-badge-battery');
|
||||
}
|
||||
|
||||
StreamBadges.#cachedDoms[name] = $badge;
|
||||
this.#cachedDoms[name] = $badge;
|
||||
return $badge;
|
||||
}
|
||||
|
||||
static async #updateBadges(forceUpdate: boolean) {
|
||||
if (!forceUpdate && !document.querySelector('.bx-badges')) {
|
||||
StreamBadges.#stop();
|
||||
async #updateBadges(forceUpdate = false) {
|
||||
if (!this.#$container || (!forceUpdate && !this.#$container.isConnected)) {
|
||||
this.#stop();
|
||||
return;
|
||||
}
|
||||
|
||||
// Playtime
|
||||
let now = +new Date;
|
||||
const diffSeconds = Math.ceil((now - StreamBadges.startTimestamp) / 1000);
|
||||
const playtime = StreamBadges.#secondsToHm(diffSeconds);
|
||||
const diffSeconds = Math.ceil((now - this.startTimestamp) / 1000);
|
||||
const playtime = this.#secondsToHm(diffSeconds);
|
||||
|
||||
// Battery
|
||||
let batteryLevel = '100%';
|
||||
@ -78,8 +98,8 @@ export class StreamBadges {
|
||||
batteryLevelInt = Math.round(bm.level * 100);
|
||||
batteryLevel = `${batteryLevelInt}%`;
|
||||
|
||||
if (batteryLevelInt != StreamBadges.startBatteryLevel) {
|
||||
const diffLevel = Math.round(batteryLevelInt - StreamBadges.startBatteryLevel);
|
||||
if (batteryLevelInt != this.startBatteryLevel) {
|
||||
const diffLevel = Math.round(batteryLevelInt - this.startBatteryLevel);
|
||||
const sign = diffLevel > 0 ? '+' : '';
|
||||
batteryLevel += ` (${sign}${diffLevel}%)`;
|
||||
}
|
||||
@ -97,8 +117,8 @@ export class StreamBadges {
|
||||
});
|
||||
|
||||
const badges = {
|
||||
[StreamBadge.IN]: totalIn ? StreamBadges.#humanFileSize(totalIn) : null,
|
||||
[StreamBadge.OUT]: totalOut ? StreamBadges.#humanFileSize(totalOut) : null,
|
||||
[StreamBadge.DOWNLOAD]: totalIn ? this.#humanFileSize(totalIn) : null,
|
||||
[StreamBadge.UPLOAD]: totalOut ? this.#humanFileSize(totalOut) : null,
|
||||
[StreamBadge.PLAYTIME]: playtime,
|
||||
[StreamBadge.BATTERY]: batteryLevel,
|
||||
};
|
||||
@ -110,28 +130,34 @@ export class StreamBadges {
|
||||
continue;
|
||||
}
|
||||
|
||||
const $elm = StreamBadges.#cachedDoms[name];
|
||||
const $elm = this.#cachedDoms[name]!;
|
||||
$elm && ($elm.lastElementChild!.textContent = value);
|
||||
|
||||
if (name === StreamBadge.BATTERY) {
|
||||
// Show charging status
|
||||
$elm.setAttribute('data-charging', isCharging.toString());
|
||||
|
||||
if (StreamBadges.startBatteryLevel === 100 && batteryLevelInt === 100) {
|
||||
$elm.style.display = 'none';
|
||||
if (this.startBatteryLevel === 100 && batteryLevelInt === 100) {
|
||||
// Hide battery badge when the battery is 100%
|
||||
$elm.classList.add('bx-gone');
|
||||
} else {
|
||||
$elm.removeAttribute('style');
|
||||
// Show charging status
|
||||
$elm.dataset.charging = isCharging.toString()
|
||||
$elm.classList.remove('bx-gone');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static #stop() {
|
||||
StreamBadges.#interval && clearInterval(StreamBadges.#interval);
|
||||
StreamBadges.#interval = null;
|
||||
async #start() {
|
||||
await this.#updateBadges(true);
|
||||
this.#stop();
|
||||
this.#interval = window.setInterval(this.#updateBadges.bind(this), this.#REFRESH_INTERVAL);
|
||||
}
|
||||
|
||||
static #secondsToHm(seconds: number) {
|
||||
#stop() {
|
||||
this.#interval && clearInterval(this.#interval);
|
||||
this.#interval = null;
|
||||
}
|
||||
|
||||
#secondsToHm(seconds: number) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor(seconds % 3600 / 60) + 1;
|
||||
|
||||
@ -141,25 +167,32 @@ export class StreamBadges {
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/20732091
|
||||
static #humanFileSize(size: number) {
|
||||
const units = ['B', 'kB', 'MB', 'GB', 'TB'];
|
||||
#humanFileSize(size: number) {
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
|
||||
let i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
|
||||
return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
|
||||
}
|
||||
|
||||
static async render() {
|
||||
// Video
|
||||
let video = '';
|
||||
if (StreamBadges.resolution) {
|
||||
video = `${StreamBadges.resolution.height}p`;
|
||||
async render() {
|
||||
if (this.#$container) {
|
||||
this.#start();
|
||||
return this.#$container;
|
||||
}
|
||||
|
||||
if (StreamBadges.video) {
|
||||
await this.#getServerStats();
|
||||
|
||||
// Video
|
||||
let video = '';
|
||||
if (this.#resolution) {
|
||||
video = `${this.#resolution.height}p`;
|
||||
}
|
||||
|
||||
if (this.#video) {
|
||||
video && (video += '/');
|
||||
video += StreamBadges.video.codec;
|
||||
if (StreamBadges.video.profile) {
|
||||
const profile = StreamBadges.video.profile;
|
||||
video += this.#video.codec;
|
||||
if (this.#video.profile) {
|
||||
const profile = this.#video.profile;
|
||||
|
||||
let quality = profile;
|
||||
if (profile.startsWith('4d')) {
|
||||
@ -176,9 +209,9 @@ export class StreamBadges {
|
||||
|
||||
// Audio
|
||||
let audio;
|
||||
if (StreamBadges.audio) {
|
||||
audio = StreamBadges.audio.codec;
|
||||
const bitrate = StreamBadges.audio.bitrate / 1000;
|
||||
if (this.#audio) {
|
||||
audio = this.#audio.codec;
|
||||
const bitrate = this.#audio.bitrate / 1000;
|
||||
audio += ` (${bitrate} kHz)`;
|
||||
}
|
||||
|
||||
@ -189,53 +222,139 @@ export class StreamBadges {
|
||||
}
|
||||
|
||||
// Server + Region
|
||||
let server = StreamBadges.region;
|
||||
server += '@' + (StreamBadges.ipv6 ? 'IPv6' : 'IPv4');
|
||||
let server = this.#region;
|
||||
server += '@' + (this.#ipv6 ? 'IPv6' : 'IPv4');
|
||||
|
||||
const BADGES = [
|
||||
[StreamBadge.PLAYTIME, '1m', '#ff004d'],
|
||||
[StreamBadge.BATTERY, batteryLevel, '#00b543'],
|
||||
[StreamBadge.IN, StreamBadges.#humanFileSize(0), '#29adff'],
|
||||
[StreamBadge.OUT, StreamBadges.#humanFileSize(0), '#ff77a8'],
|
||||
[StreamBadge.BREAK],
|
||||
[StreamBadge.DOWNLOAD, this.#humanFileSize(0), '#29adff'],
|
||||
[StreamBadge.UPLOAD, this.#humanFileSize(0), '#ff77a8'],
|
||||
[StreamBadge.SERVER, server, '#ff6c24'],
|
||||
video ? [StreamBadge.VIDEO, video, '#742f29'] : null,
|
||||
audio ? [StreamBadge.AUDIO, audio, '#5f574f'] : null,
|
||||
];
|
||||
|
||||
const $wrapper = CE('div', {'class': 'bx-badges'});
|
||||
const $container = CE('div', {'class': 'bx-badges'});
|
||||
BADGES.forEach(item => {
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $badge = StreamBadges.#renderBadge(...(item as [StreamBadge, string, string]));
|
||||
$wrapper.appendChild($badge);
|
||||
const $badge = this.#renderBadge(...(item as [StreamBadge, string, string]));
|
||||
$container.appendChild($badge);
|
||||
});
|
||||
|
||||
await StreamBadges.#updateBadges(true);
|
||||
StreamBadges.#stop();
|
||||
StreamBadges.#interval = window.setInterval(StreamBadges.#updateBadges, StreamBadges.#REFRESH_INTERVAL);
|
||||
this.#$container = $container;
|
||||
await this.#start();
|
||||
|
||||
return $wrapper;
|
||||
return $container;
|
||||
}
|
||||
|
||||
async #getServerStats() {
|
||||
const stats = await STATES.currentStream.peerConnection!.getStats();
|
||||
|
||||
const allVideoCodecs: {[index: string]: RTCBasicStat} = {};
|
||||
let videoCodecId;
|
||||
|
||||
const allAudioCodecs: {[index: string]: RTCBasicStat} = {};
|
||||
let audioCodecId;
|
||||
|
||||
const allCandidates: {[index: string]: string} = {};
|
||||
let candidateId;
|
||||
|
||||
stats.forEach((stat: RTCBasicStat) => {
|
||||
if (stat.type === 'codec') {
|
||||
const mimeType = stat.mimeType.split('/')[0];
|
||||
if (mimeType === 'video') {
|
||||
// Store all video stats
|
||||
allVideoCodecs[stat.id] = stat;
|
||||
} else if (mimeType === 'audio') {
|
||||
// Store all audio stats
|
||||
allAudioCodecs[stat.id] = stat;
|
||||
}
|
||||
} else if (stat.type === 'inbound-rtp' && stat.packetsReceived > 0) {
|
||||
// Get the codecId of the video/audio track currently being used
|
||||
if (stat.kind === 'video') {
|
||||
videoCodecId = stat.codecId;
|
||||
} else if (stat.kind === 'audio') {
|
||||
audioCodecId = stat.codecId;
|
||||
}
|
||||
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
candidateId = stat.remoteCandidateId;
|
||||
} else if (stat.type === 'remote-candidate') {
|
||||
allCandidates[stat.id] = stat.address;
|
||||
}
|
||||
});
|
||||
|
||||
// Get video codec from codecId
|
||||
if (videoCodecId) {
|
||||
const videoStat = allVideoCodecs[videoCodecId];
|
||||
const video: any = {
|
||||
codec: videoStat.mimeType.substring(6),
|
||||
};
|
||||
|
||||
if (video.codec === 'H264') {
|
||||
const match = /profile-level-id=([0-9a-f]{6})/.exec(videoStat.sdpFmtpLine);
|
||||
video.profile = match ? match[1] : null;
|
||||
}
|
||||
|
||||
this.#video = video;
|
||||
}
|
||||
|
||||
// Get audio codec from codecId
|
||||
if (audioCodecId) {
|
||||
const audioStat = allAudioCodecs[audioCodecId];
|
||||
this.#audio = {
|
||||
codec: audioStat.mimeType.substring(6),
|
||||
bitrate: audioStat.clockRate,
|
||||
}
|
||||
}
|
||||
|
||||
// Get server type
|
||||
if (candidateId) {
|
||||
BxLogger.info('candidate', candidateId, allCandidates);
|
||||
this.#ipv6 = allCandidates[candidateId].includes(':');
|
||||
}
|
||||
}
|
||||
|
||||
static setupEvents() {
|
||||
window.addEventListener(BxEvent.STREAM_PLAYING, e => {
|
||||
const $video = (e as any).$video;
|
||||
const streamBadges = StreamBadges.getInstance();
|
||||
|
||||
StreamBadges.resolution = {
|
||||
streamBadges.#resolution = {
|
||||
width: $video.videoWidth,
|
||||
height: $video.videoHeight
|
||||
height: $video.videoHeight,
|
||||
};
|
||||
StreamBadges.startTimestamp = +new Date;
|
||||
streamBadges.startTimestamp = +new Date;
|
||||
|
||||
// Get battery level
|
||||
try {
|
||||
'getBattery' in navigator && (navigator as NavigatorBattery).getBattery().then(bm => {
|
||||
StreamBadges.startBatteryLevel = Math.round(bm.level * 100);
|
||||
streamBadges.startBatteryLevel = Math.round(bm.level * 100);
|
||||
});
|
||||
} catch(e) {}
|
||||
});
|
||||
|
||||
/*
|
||||
Don't do this until xCloud remove the Stream Menu page
|
||||
|
||||
window.addEventListener(BxEvent.XCLOUD_GUIDE_SHOWN, async e => {
|
||||
const where = (e as any).where as XcloudGuideWhere;
|
||||
|
||||
if (where !== XcloudGuideWhere.HOME || !STATES.isPlaying) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $btnQuit = document.querySelector('#gamepass-dialog-root a[class*=QuitGameButton]');
|
||||
if (!$btnQuit) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add badges
|
||||
$btnQuit.insertAdjacentElement('beforebegin', await StreamBadges.getInstance().render());
|
||||
});
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { PrefKey } from "@utils/preferences"
|
||||
import { BxEvent } from "@utils/bx-event"
|
||||
import { getPref } from "@utils/preferences"
|
||||
import { StreamBadges } from "./stream-badges"
|
||||
import { CE } from "@utils/html"
|
||||
import { t } from "@utils/translation"
|
||||
import { STATES } from "@utils/global"
|
||||
import { BxLogger } from "@utils/bx-logger"
|
||||
|
||||
export enum StreamStat {
|
||||
PING = 'ping',
|
||||
@ -17,286 +15,254 @@ export enum StreamStat {
|
||||
};
|
||||
|
||||
export class StreamStats {
|
||||
static #interval?: number | null;
|
||||
static #updateInterval = 1000;
|
||||
private static instance: StreamStats;
|
||||
public static getInstance(): StreamStats {
|
||||
if (!StreamStats.instance) {
|
||||
StreamStats.instance = new StreamStats();
|
||||
}
|
||||
|
||||
static #$container: HTMLElement;
|
||||
static #$fps: HTMLElement;
|
||||
static #$ping: HTMLElement;
|
||||
static #$dt: HTMLElement;
|
||||
static #$pl: HTMLElement;
|
||||
static #$fl: HTMLElement;
|
||||
static #$br: HTMLElement;
|
||||
return StreamStats.instance;
|
||||
}
|
||||
|
||||
static #lastStat?: RTCBasicStat | null;
|
||||
#timeoutId?: number | null;
|
||||
readonly #updateInterval = 1000;
|
||||
|
||||
static #quickGlanceObserver?: MutationObserver | null;
|
||||
#$container: HTMLElement | undefined;
|
||||
#$fps: HTMLElement | undefined;
|
||||
#$ping: HTMLElement | undefined;
|
||||
#$dt: HTMLElement | undefined;
|
||||
#$pl: HTMLElement | undefined;
|
||||
#$fl: HTMLElement | undefined;
|
||||
#$br: HTMLElement | undefined;
|
||||
|
||||
static start(glancing=false) {
|
||||
if (!StreamStats.isHidden() || (glancing && StreamStats.isGlancing())) {
|
||||
#lastVideoStat?: RTCBasicStat | null;
|
||||
|
||||
#quickGlanceObserver?: MutationObserver | null;
|
||||
|
||||
start(glancing=false) {
|
||||
if (!this.isHidden() || (glancing && this.isGlancing())) {
|
||||
return;
|
||||
}
|
||||
|
||||
StreamStats.#$container.classList.remove('bx-gone');
|
||||
StreamStats.#$container.setAttribute('data-display', glancing ? 'glancing' : 'fixed');
|
||||
if (this.#$container) {
|
||||
this.#$container.classList.remove('bx-gone');
|
||||
this.#$container.dataset.display = glancing ? 'glancing' : 'fixed';
|
||||
}
|
||||
|
||||
StreamStats.#interval = window.setInterval(StreamStats.update, StreamStats.#updateInterval);
|
||||
this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval);
|
||||
}
|
||||
|
||||
static stop(glancing=false) {
|
||||
if (glancing && !StreamStats.isGlancing()) {
|
||||
stop(glancing=false) {
|
||||
if (glancing && !this.isGlancing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
StreamStats.#interval && clearInterval(StreamStats.#interval);
|
||||
StreamStats.#interval = null;
|
||||
StreamStats.#lastStat = null;
|
||||
this.#timeoutId && clearTimeout(this.#timeoutId);
|
||||
this.#timeoutId = null;
|
||||
this.#lastVideoStat = null;
|
||||
|
||||
if (StreamStats.#$container) {
|
||||
StreamStats.#$container.removeAttribute('data-display');
|
||||
StreamStats.#$container.classList.add('bx-gone');
|
||||
if (this.#$container) {
|
||||
this.#$container.removeAttribute('data-display');
|
||||
this.#$container.classList.add('bx-gone');
|
||||
}
|
||||
}
|
||||
|
||||
static toggle() {
|
||||
if (StreamStats.isGlancing()) {
|
||||
StreamStats.#$container.setAttribute('data-display', 'fixed');
|
||||
toggle() {
|
||||
if (this.isGlancing()) {
|
||||
this.#$container && (this.#$container.dataset.display = 'fixed');
|
||||
} else {
|
||||
StreamStats.isHidden() ? StreamStats.start() : StreamStats.stop();
|
||||
this.isHidden() ? this.start() : this.stop();
|
||||
}
|
||||
}
|
||||
|
||||
static onStoppedPlaying() {
|
||||
StreamStats.stop();
|
||||
StreamStats.quickGlanceStop();
|
||||
StreamStats.hideSettingsUi();
|
||||
onStoppedPlaying() {
|
||||
this.stop();
|
||||
this.quickGlanceStop();
|
||||
this.hideSettingsUi();
|
||||
}
|
||||
|
||||
static isHidden = () => StreamStats.#$container && StreamStats.#$container.classList.contains('bx-gone');
|
||||
static isGlancing = () => StreamStats.#$container && StreamStats.#$container.getAttribute('data-display') === 'glancing';
|
||||
isHidden = () => this.#$container && this.#$container.classList.contains('bx-gone');
|
||||
isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing';
|
||||
|
||||
static quickGlanceSetup() {
|
||||
if (StreamStats.#quickGlanceObserver) {
|
||||
quickGlanceSetup() {
|
||||
if (this.#quickGlanceObserver) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
|
||||
StreamStats.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
|
||||
this.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
|
||||
for (let record of mutationList) {
|
||||
if (record.attributeName && record.attributeName === 'aria-expanded') {
|
||||
const expanded = (record.target as HTMLElement).ariaExpanded;
|
||||
if (expanded === 'true') {
|
||||
StreamStats.isHidden() && StreamStats.start(true);
|
||||
this.isHidden() && this.start(true);
|
||||
} else {
|
||||
StreamStats.stop(true);
|
||||
this.stop(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
StreamStats.#quickGlanceObserver.observe($uiContainer, {
|
||||
this.#quickGlanceObserver.observe($uiContainer, {
|
||||
attributes: true,
|
||||
attributeFilter: ['aria-expanded'],
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
|
||||
static quickGlanceStop() {
|
||||
StreamStats.#quickGlanceObserver && StreamStats.#quickGlanceObserver.disconnect();
|
||||
StreamStats.#quickGlanceObserver = null;
|
||||
quickGlanceStop() {
|
||||
this.#quickGlanceObserver && this.#quickGlanceObserver.disconnect();
|
||||
this.#quickGlanceObserver = null;
|
||||
}
|
||||
|
||||
static update() {
|
||||
if (StreamStats.isHidden() || !STATES.currentStream.peerConnection) {
|
||||
StreamStats.onStoppedPlaying();
|
||||
async #update() {
|
||||
if (this.isHidden() || !STATES.currentStream.peerConnection) {
|
||||
this.onStoppedPlaying();
|
||||
return;
|
||||
}
|
||||
|
||||
this.#timeoutId = null;
|
||||
const startTime = performance.now();
|
||||
|
||||
const PREF_STATS_CONDITIONAL_FORMATTING = getPref(PrefKey.STATS_CONDITIONAL_FORMATTING);
|
||||
STATES.currentStream.peerConnection.getStats().then(stats => {
|
||||
stats.forEach(stat => {
|
||||
let grade = '';
|
||||
if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
|
||||
// FPS
|
||||
StreamStats.#$fps.textContent = stat.framesPerSecond || 0;
|
||||
|
||||
// Packets Lost
|
||||
const packetsLost = stat.packetsLost;
|
||||
const packetsReceived = stat.packetsReceived;
|
||||
const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
|
||||
StreamStats.#$pl.textContent = packetsLostPercentage === '0.00' ? packetsLost : `${packetsLost} (${packetsLostPercentage}%)`;
|
||||
const stats = await STATES.currentStream.peerConnection.getStats();
|
||||
let grade = '';
|
||||
|
||||
// Frames Dropped
|
||||
const framesDropped = stat.framesDropped;
|
||||
const framesReceived = stat.framesReceived;
|
||||
const framesDroppedPercentage = (framesDropped * 100 / ((framesDropped + framesReceived) || 1)).toFixed(2);
|
||||
StreamStats.#$fl.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
|
||||
stats.forEach(stat => {
|
||||
if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
|
||||
// FPS
|
||||
this.#$fps!.textContent = stat.framesPerSecond || 0;
|
||||
|
||||
if (StreamStats.#lastStat) {
|
||||
const lastStat = StreamStats.#lastStat;
|
||||
// Bitrate
|
||||
const timeDiff = stat.timestamp - lastStat.timestamp;
|
||||
const bitrate = 8 * (stat.bytesReceived - lastStat.bytesReceived) / timeDiff / 1000;
|
||||
StreamStats.#$br.textContent = `${bitrate.toFixed(2)} Mbps`;
|
||||
// Packets Lost
|
||||
const packetsLost = stat.packetsLost;
|
||||
const packetsReceived = stat.packetsReceived;
|
||||
const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
|
||||
this.#$pl!.textContent = packetsLostPercentage === '0.00' ? packetsLost : `${packetsLost} (${packetsLostPercentage}%)`;
|
||||
|
||||
// Decode time
|
||||
const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime;
|
||||
const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded;
|
||||
const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000;
|
||||
StreamStats.#$dt.textContent = `${currentDecodeTime.toFixed(2)}ms`;
|
||||
// Frames dropped
|
||||
const framesDropped = stat.framesDropped;
|
||||
const framesReceived = stat.framesReceived;
|
||||
const framesDroppedPercentage = (framesDropped * 100 / ((framesDropped + framesReceived) || 1)).toFixed(2);
|
||||
this.#$fl!.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
|
||||
|
||||
if (PREF_STATS_CONDITIONAL_FORMATTING) {
|
||||
grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
|
||||
}
|
||||
StreamStats.#$dt.setAttribute('data-grade', grade);
|
||||
}
|
||||
|
||||
StreamStats.#lastStat = stat;
|
||||
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
// Round Trip Time
|
||||
const roundTripTime = typeof stat.currentRoundTripTime !== 'undefined' ? stat.currentRoundTripTime * 1000 : -1;
|
||||
StreamStats.#$ping.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
|
||||
|
||||
if (PREF_STATS_CONDITIONAL_FORMATTING) {
|
||||
grade = (roundTripTime > 100) ? 'bad' : (roundTripTime > 75) ? 'ok' : (roundTripTime > 40) ? 'good' : '';
|
||||
}
|
||||
StreamStats.#$ping.setAttribute('data-grade', grade);
|
||||
if (!this.#lastVideoStat) {
|
||||
this.#lastVideoStat = stat;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const lastStat = this.#lastVideoStat;
|
||||
// Bitrate
|
||||
const timeDiff = stat.timestamp - lastStat.timestamp;
|
||||
const bitrate = 8 * (stat.bytesReceived - lastStat.bytesReceived) / timeDiff / 1000;
|
||||
this.#$br!.textContent = `${bitrate.toFixed(2)} Mbps`;
|
||||
|
||||
// Decode time
|
||||
const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime;
|
||||
const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded;
|
||||
const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000;
|
||||
this.#$dt!.textContent = `${currentDecodeTime.toFixed(2)}ms`;
|
||||
|
||||
if (PREF_STATS_CONDITIONAL_FORMATTING) {
|
||||
grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
|
||||
this.#$dt!.dataset.grade = grade;
|
||||
}
|
||||
|
||||
this.#lastVideoStat = stat;
|
||||
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
// Round Trip Time
|
||||
const roundTripTime = !!stat.currentRoundTripTime ? stat.currentRoundTripTime * 1000 : -1;
|
||||
this.#$ping!.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
|
||||
|
||||
if (PREF_STATS_CONDITIONAL_FORMATTING) {
|
||||
grade = (roundTripTime > 100) ? 'bad' : (roundTripTime > 75) ? 'ok' : (roundTripTime > 40) ? 'good' : '';
|
||||
this.#$ping!.dataset.grade = grade;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const lapsedTime = performance.now() - startTime;
|
||||
this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval - lapsedTime);
|
||||
}
|
||||
|
||||
static refreshStyles() {
|
||||
refreshStyles() {
|
||||
const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS);
|
||||
const PREF_POSITION = getPref(PrefKey.STATS_POSITION);
|
||||
const PREF_TRANSPARENT = getPref(PrefKey.STATS_TRANSPARENT);
|
||||
const PREF_OPACITY = getPref(PrefKey.STATS_OPACITY);
|
||||
const PREF_TEXT_SIZE = getPref(PrefKey.STATS_TEXT_SIZE);
|
||||
|
||||
const $container = StreamStats.#$container;
|
||||
$container.setAttribute('data-stats', '[' + PREF_ITEMS.join('][') + ']');
|
||||
$container.setAttribute('data-position', PREF_POSITION);
|
||||
$container.setAttribute('data-transparent', PREF_TRANSPARENT);
|
||||
const $container = this.#$container!;
|
||||
$container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
|
||||
$container.dataset.position = PREF_POSITION;
|
||||
$container.dataset.transparent = PREF_TRANSPARENT;
|
||||
$container.style.opacity = PREF_OPACITY + '%';
|
||||
$container.style.fontSize = PREF_TEXT_SIZE;
|
||||
}
|
||||
|
||||
static hideSettingsUi() {
|
||||
if (StreamStats.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE)) {
|
||||
StreamStats.stop();
|
||||
hideSettingsUi() {
|
||||
if (this.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE)) {
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
|
||||
static render() {
|
||||
if (StreamStats.#$container) {
|
||||
#render() {
|
||||
if (this.#$container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const STATS = {
|
||||
[StreamStat.PING]: [t('stat-ping'), StreamStats.#$ping = CE('span', {}, '0')],
|
||||
[StreamStat.FPS]: [t('stat-fps'), StreamStats.#$fps = CE('span', {}, '0')],
|
||||
[StreamStat.BITRATE]: [t('stat-bitrate'), StreamStats.#$br = CE('span', {}, '0 Mbps')],
|
||||
[StreamStat.DECODE_TIME]: [t('stat-decode-time'), StreamStats.#$dt = CE('span', {}, '0ms')],
|
||||
[StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), StreamStats.#$pl = CE('span', {}, '0')],
|
||||
[StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), StreamStats.#$fl = CE('span', {}, '0')],
|
||||
const stats = {
|
||||
[StreamStat.PING]: [t('stat-ping'), this.#$ping = CE('span', {}, '0')],
|
||||
[StreamStat.FPS]: [t('stat-fps'), this.#$fps = CE('span', {}, '0')],
|
||||
[StreamStat.BITRATE]: [t('stat-bitrate'), this.#$br = CE('span', {}, '0 Mbps')],
|
||||
[StreamStat.DECODE_TIME]: [t('stat-decode-time'), this.#$dt = CE('span', {}, '0ms')],
|
||||
[StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), this.#$pl = CE('span', {}, '0')],
|
||||
[StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), this.#$fl = CE('span', {}, '0')],
|
||||
};
|
||||
|
||||
const $barFragment = document.createDocumentFragment();
|
||||
let statKey: keyof typeof STATS
|
||||
for (statKey in STATS) {
|
||||
const $div = CE('div', {'class': `bx-stat-${statKey}`, title: STATS[statKey][0]}, CE('label', {}, statKey.toUpperCase()), STATS[statKey][1]);
|
||||
let statKey: keyof typeof stats;
|
||||
for (statKey in stats) {
|
||||
const $div = CE('div', {
|
||||
'class': `bx-stat-${statKey}`,
|
||||
title: stats[statKey][0]
|
||||
},
|
||||
CE('label', {}, statKey.toUpperCase()),
|
||||
stats[statKey][1],
|
||||
);
|
||||
|
||||
$barFragment.appendChild($div);
|
||||
}
|
||||
|
||||
StreamStats.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
|
||||
document.documentElement.appendChild(StreamStats.#$container);
|
||||
this.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
|
||||
this.refreshStyles();
|
||||
|
||||
StreamStats.refreshStyles();
|
||||
}
|
||||
|
||||
static getServerStats() {
|
||||
STATES.currentStream.peerConnection && STATES.currentStream.peerConnection.getStats().then(stats => {
|
||||
const allVideoCodecs: {[index: string]: RTCBasicStat} = {};
|
||||
let videoCodecId;
|
||||
|
||||
const allAudioCodecs: {[index: string]: RTCBasicStat} = {};
|
||||
let audioCodecId;
|
||||
|
||||
const allCandidates: {[index: string]: string} = {};
|
||||
let candidateId;
|
||||
|
||||
stats.forEach((stat: RTCBasicStat) => {
|
||||
if (stat.type === 'codec') {
|
||||
const mimeType = stat.mimeType.split('/');
|
||||
if (mimeType[0] === 'video') {
|
||||
// Store all video stats
|
||||
allVideoCodecs[stat.id] = stat;
|
||||
} else if (mimeType[0] === 'audio') {
|
||||
// Store all audio stats
|
||||
allAudioCodecs[stat.id] = stat;
|
||||
}
|
||||
} else if (stat.type === 'inbound-rtp' && stat.packetsReceived > 0) {
|
||||
// Get the codecId of the video/audio track currently being used
|
||||
if (stat.kind === 'video') {
|
||||
videoCodecId = stat.codecId;
|
||||
} else if (stat.kind === 'audio') {
|
||||
audioCodecId = stat.codecId;
|
||||
}
|
||||
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
candidateId = stat.remoteCandidateId;
|
||||
} else if (stat.type === 'remote-candidate') {
|
||||
allCandidates[stat.id] = stat.address;
|
||||
}
|
||||
});
|
||||
|
||||
// Get video codec from codecId
|
||||
if (videoCodecId) {
|
||||
const videoStat = allVideoCodecs[videoCodecId];
|
||||
const video: typeof StreamBadges.video = {
|
||||
codec: videoStat.mimeType.substring(6),
|
||||
};
|
||||
|
||||
if (video.codec === 'H264') {
|
||||
const match = /profile-level-id=([0-9a-f]{6})/.exec(videoStat.sdpFmtpLine);
|
||||
video.profile = match ? match[1] : null;
|
||||
}
|
||||
|
||||
StreamBadges.video = video;
|
||||
}
|
||||
|
||||
// Get audio codec from codecId
|
||||
if (audioCodecId) {
|
||||
const audioStat = allAudioCodecs[audioCodecId];
|
||||
StreamBadges.audio = {
|
||||
codec: audioStat.mimeType.substring(6),
|
||||
bitrate: audioStat.clockRate,
|
||||
}
|
||||
}
|
||||
|
||||
// Get server type
|
||||
if (candidateId) {
|
||||
BxLogger.info('candidate', candidateId, allCandidates);
|
||||
StreamBadges.ipv6 = allCandidates[candidateId].includes(':');
|
||||
}
|
||||
|
||||
if (getPref(PrefKey.STATS_SHOW_WHEN_PLAYING)) {
|
||||
StreamStats.start();
|
||||
}
|
||||
});
|
||||
document.documentElement.appendChild(this.#$container!);
|
||||
}
|
||||
|
||||
static setupEvents() {
|
||||
window.addEventListener(BxEvent.STREAM_LOADING, e => {
|
||||
StreamStats.getInstance().#render();
|
||||
});
|
||||
|
||||
window.addEventListener(BxEvent.STREAM_PLAYING, e => {
|
||||
const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE);
|
||||
const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);
|
||||
|
||||
StreamStats.getServerStats();
|
||||
const streamStats = StreamStats.getInstance();
|
||||
// Setup Stat's Quick Glance mode
|
||||
if (PREF_STATS_QUICK_GLANCE) {
|
||||
StreamStats.quickGlanceSetup();
|
||||
|
||||
if (PREF_STATS_SHOW_WHEN_PLAYING) {
|
||||
streamStats.start();
|
||||
} else if (PREF_STATS_QUICK_GLANCE) {
|
||||
streamStats.quickGlanceSetup();
|
||||
// Show stats bar
|
||||
!PREF_STATS_SHOW_WHEN_PLAYING && StreamStats.start(true);
|
||||
!PREF_STATS_SHOW_WHEN_PLAYING && streamStats.start(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static refreshStyles() {
|
||||
StreamStats.getInstance().refreshStyles();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { STATES } from "@utils/global.ts";
|
||||
import { createSvgIcon } from "@utils/html.ts";
|
||||
import { ButtonStyle, createButton, createSvgIcon } from "@utils/html.ts";
|
||||
import { BxIcon } from "@utils/bx-icon";
|
||||
import { BxEvent } from "@utils/bx-event.ts";
|
||||
import { PrefKey, getPref } from "@utils/preferences.ts";
|
||||
import { BxEvent, XcloudGuideWhere } from "@utils/bx-event.ts";
|
||||
import { t } from "@utils/translation.ts";
|
||||
import { StreamBadges } from "./stream-badges.ts";
|
||||
import { StreamStats } from "./stream-stats.ts";
|
||||
@ -13,7 +12,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
|
||||
let timeout: number | null;
|
||||
|
||||
const onTransitionStart = (e: TransitionEvent) => {
|
||||
if ( e.propertyName !== 'opacity') {
|
||||
if (e.propertyName !== 'opacity') {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -22,7 +21,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
|
||||
};
|
||||
|
||||
const onTransitionEnd = (e: TransitionEvent) => {
|
||||
if ( e.propertyName !== 'opacity') {
|
||||
if (e.propertyName !== 'opacity') {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -54,6 +53,28 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
|
||||
}
|
||||
|
||||
|
||||
function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any) {
|
||||
// Create button from the Close button
|
||||
const $btn = $$btnOrg.cloneNode(true) as HTMLElement;
|
||||
|
||||
// Refresh SVG
|
||||
const $svg = createSvgIcon(icon);
|
||||
// Copy classes
|
||||
$svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
|
||||
$svg.style.fill = 'none';
|
||||
|
||||
$btn.classList.add(className);
|
||||
// Remove icon
|
||||
$btn.removeChild($btn.firstElementChild!);
|
||||
// Add icon
|
||||
$btn.appendChild($svg);
|
||||
// Add "click" event listener
|
||||
$btn.addEventListener('click', onChange);
|
||||
|
||||
return $btn;
|
||||
}
|
||||
|
||||
|
||||
export function injectStreamMenuButtons() {
|
||||
const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
|
||||
if (!$screen) {
|
||||
@ -89,24 +110,14 @@ export function injectStreamMenuButtons() {
|
||||
|
||||
let $btnStreamSettings: HTMLElement;
|
||||
let $btnStreamStats: HTMLElement;
|
||||
const streamStats = StreamStats.getInstance();
|
||||
|
||||
const PREF_DISABLE_FEEDBACK_DIALOG = getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG);
|
||||
const observer = new MutationObserver(mutationList => {
|
||||
mutationList.forEach(item => {
|
||||
if (item.type !== 'childList') {
|
||||
return;
|
||||
}
|
||||
|
||||
item.removedNodes.forEach($node => {
|
||||
if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!($node as HTMLElement).className || !($node as HTMLElement).className.startsWith) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
item.addedNodes.forEach(async $node => {
|
||||
if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
|
||||
return;
|
||||
@ -125,48 +136,34 @@ export function injectStreamMenuButtons() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (PREF_DISABLE_FEEDBACK_DIALOG && $elm.className.startsWith('PostStreamFeedbackScreen')) {
|
||||
const $btnClose = $elm.querySelector('button');
|
||||
$btnClose && $btnClose.click();
|
||||
return;
|
||||
}
|
||||
|
||||
// Render badges
|
||||
if ($elm.className?.startsWith('StreamMenu-module__container')) {
|
||||
const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
|
||||
const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
|
||||
if (!$btnCloseHud) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide Stream Settings dialog when closing HUD
|
||||
$btnCloseHud && $btnCloseHud.addEventListener('click', e => {
|
||||
$btnCloseHud.addEventListener('click', e => {
|
||||
$settingsDialog.classList.add('bx-gone');
|
||||
});
|
||||
|
||||
// Create Refresh button from the Close button
|
||||
const $btnRefresh = $btnCloseHud.cloneNode(true) as HTMLElement;
|
||||
|
||||
// Refresh SVG
|
||||
const $svgRefresh = createSvgIcon(BxIcon.REFRESH);
|
||||
// Copy classes
|
||||
$svgRefresh.setAttribute('class', $btnRefresh.firstElementChild!.getAttribute('class') || '');
|
||||
$svgRefresh.style.fill = 'none';
|
||||
|
||||
$btnRefresh.classList.add('bx-stream-refresh-button');
|
||||
// Remove icon
|
||||
$btnRefresh.removeChild($btnRefresh.firstElementChild!);
|
||||
// Add Refresh icon
|
||||
$btnRefresh.appendChild($svgRefresh);
|
||||
// Add "click" event listener
|
||||
$btnRefresh.addEventListener('click', e => {
|
||||
const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
|
||||
confirm(t('confirm-reload-stream')) && window.location.reload();
|
||||
});
|
||||
|
||||
const $btnHome = cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
|
||||
confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
|
||||
});
|
||||
|
||||
// Add to website
|
||||
$btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
|
||||
$btnRefresh.insertAdjacentElement('afterend', $btnHome);
|
||||
|
||||
// Render stream badges
|
||||
const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
|
||||
$menu?.appendChild(await StreamBadges.render());
|
||||
$menu?.appendChild(await StreamBadges.getInstance().render());
|
||||
|
||||
hideSettingsFunc();
|
||||
return;
|
||||
@ -226,14 +223,14 @@ export function injectStreamMenuButtons() {
|
||||
e.preventDefault();
|
||||
|
||||
// Toggle Stream Stats
|
||||
StreamStats.toggle();
|
||||
streamStats.toggle();
|
||||
|
||||
const btnStreamStatsOn = (!StreamStats.isHidden() && !StreamStats.isGlancing());
|
||||
const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
|
||||
$btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
|
||||
});
|
||||
}
|
||||
|
||||
const btnStreamStatsOn = (!StreamStats.isHidden() && !StreamStats.isGlancing());
|
||||
const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
|
||||
$btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
|
||||
|
||||
if ($orgButton) {
|
||||
@ -286,3 +283,43 @@ export function showStreamSettings(tabId: string) {
|
||||
$parent.addEventListener('click', onClick);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function setupStreamUiEvents() {
|
||||
window.addEventListener(BxEvent.XCLOUD_GUIDE_SHOWN, async e => {
|
||||
const where = (e as any).where as XcloudGuideWhere;
|
||||
|
||||
if (where !== XcloudGuideWhere.HOME || !STATES.isPlaying) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $btnQuit = document.querySelector('#gamepass-dialog-root a[class*=QuitGameButton]');
|
||||
if (!$btnQuit) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add buttons
|
||||
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({
|
||||
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));
|
||||
},
|
||||
});
|
||||
|
||||
$btnQuit.insertAdjacentElement('afterend', $btnReload);
|
||||
$btnReload.insertAdjacentElement('afterend', $btnHome);
|
||||
|
||||
// Hide xCloud's Home button
|
||||
const $btnXcloudHome = document.querySelector('#gamepass-dialog-root div[class^=HomeButtonWithDivider]') as HTMLElement;
|
||||
$btnXcloudHome && ($btnXcloudHome.style.display = 'none');
|
||||
});
|
||||
}
|
||||
|
||||
@ -31,11 +31,11 @@ const SETTINGS_UI = {
|
||||
PrefKey.BITRATE_VIDEO_MAX,
|
||||
|
||||
PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
|
||||
PrefKey.AUDIO_MIC_ON_PLAYING,
|
||||
PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
|
||||
|
||||
PrefKey.SCREENSHOT_APPLY_FILTERS,
|
||||
|
||||
PrefKey.AUDIO_MIC_ON_PLAYING,
|
||||
PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
|
||||
PrefKey.STREAM_COMBINE_SOURCES,
|
||||
],
|
||||
|
||||
@ -268,7 +268,8 @@ function setupStreamSettingsDialog() {
|
||||
{
|
||||
pref: PrefKey.STATS_QUICK_GLANCE,
|
||||
onChange: (e: InputEvent) => {
|
||||
(e.target! as HTMLInputElement).checked ? StreamStats.quickGlanceSetup() : StreamStats.quickGlanceStop();
|
||||
const streamStats = StreamStats.getInstance();
|
||||
(e.target! as HTMLInputElement).checked ? streamStats.quickGlanceSetup() : streamStats.quickGlanceStop();
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -485,13 +486,13 @@ function resizeVideoPlayer() {
|
||||
}
|
||||
|
||||
// Prevent floating points
|
||||
width = Math.floor(width);
|
||||
height = Math.floor(height);
|
||||
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 = 'scale-down';
|
||||
$video.style.objectFit = 'contain';
|
||||
} else {
|
||||
$video.style.width = '100%';
|
||||
$video.style.height = '100%';
|
||||
@ -520,7 +521,6 @@ export function setupStreamUi() {
|
||||
|
||||
window.addEventListener('resize', updateVideoPlayerCss);
|
||||
setupStreamSettingsDialog();
|
||||
StreamStats.render();
|
||||
|
||||
Screenshot.setup();
|
||||
}
|
||||
|
||||
@ -39,6 +39,8 @@ export enum BxEvent {
|
||||
XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown',
|
||||
XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed',
|
||||
|
||||
XCLOUD_GUIDE_SHOWN = 'bx-xcloud-guide-shown',
|
||||
|
||||
XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed',
|
||||
}
|
||||
|
||||
@ -46,6 +48,10 @@ export enum XcloudEvent {
|
||||
MICROPHONE_STATE_CHANGED = 'microphoneStateChanged',
|
||||
}
|
||||
|
||||
export enum XcloudGuideWhere {
|
||||
HOME,
|
||||
}
|
||||
|
||||
export namespace BxEvent {
|
||||
export function dispatch(target: HTMLElement | Window, eventName: string, data?: any) {
|
||||
if (!eventName) {
|
||||
|
||||
@ -3,6 +3,7 @@ import iconController from "@assets/svg/controller.svg" with { type: "text" };
|
||||
import iconCopy from "@assets/svg/copy.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 iconHome from "@assets/svg/home.svg" with { type: "text" };
|
||||
import iconMouseSettings from "@assets/svg/mouse-settings.svg" with { type: "text" };
|
||||
import iconMouse from "@assets/svg/mouse.svg" with { type: "text" };
|
||||
import iconNew from "@assets/svg/new.svg" with { type: "text" };
|
||||
@ -22,12 +23,22 @@ import iconCamera from "@assets/svg/camera.svg" with { type: "text" };
|
||||
import iconMicrophone from "@assets/svg/microphone.svg" with { type: "text" };
|
||||
import iconMicrophoneMuted from "@assets/svg/microphone-slash.svg" with { type: "text" };
|
||||
|
||||
// Stream Badge
|
||||
import iconBatteryFull from "@assets/svg/battery-full.svg" with { type: "text" };
|
||||
import iconClock from "@assets/svg/clock.svg" with { type: "text" };
|
||||
import iconCloud from "@assets/svg/cloud.svg" with { type: "text" };
|
||||
import iconDownload from "@assets/svg/download.svg" with { type: "text" };
|
||||
import iconSpeakerHigh from "@assets/svg/speaker-high.svg" with { type: "text" };
|
||||
import iconUpload from "@assets/svg/upload.svg" with { type: "text" };
|
||||
|
||||
|
||||
export const BxIcon = {
|
||||
STREAM_SETTINGS: iconStreamSettings,
|
||||
STREAM_STATS: iconStreamStats,
|
||||
COMMAND: iconCommand,
|
||||
CONTROLLER: iconController,
|
||||
DISPLAY: iconDisplay,
|
||||
HOME: iconHome,
|
||||
MOUSE: iconMouse,
|
||||
MOUSE_SETTINGS: iconMouseSettings,
|
||||
NEW: iconNew,
|
||||
@ -48,4 +59,12 @@ export const BxIcon = {
|
||||
|
||||
MICROPHONE: iconMicrophone,
|
||||
MICROPHONE_MUTED: iconMicrophoneMuted,
|
||||
|
||||
// Stream Badge
|
||||
BATTERY: iconBatteryFull,
|
||||
PLAYTIME: iconClock,
|
||||
SERVER: iconCloud,
|
||||
DOWNLOAD: iconDownload,
|
||||
UPLOAD: iconUpload,
|
||||
AUDIO: iconSpeakerHigh,
|
||||
} as const;
|
||||
|
||||
@ -366,14 +366,15 @@ class XcloudInterceptor {
|
||||
const url = (typeof request === 'string') ? request : (request as Request).url;
|
||||
const parsedUrl = new URL(url);
|
||||
|
||||
StreamBadges.region = parsedUrl.host.split('.', 1)[0];
|
||||
let badgeRegion: string = parsedUrl.host.split('.', 1)[0];
|
||||
for (let regionName in STATES.serverRegions) {
|
||||
const region = STATES.serverRegions[regionName];
|
||||
if (parsedUrl.origin == region.baseUri) {
|
||||
StreamBadges.region = regionName;
|
||||
badgeRegion = regionName;
|
||||
break;
|
||||
}
|
||||
}
|
||||
StreamBadges.getInstance().setRegion(badgeRegion);
|
||||
|
||||
const clone = (request as Request).clone();
|
||||
const body = await clone.json();
|
||||
|
||||
@ -703,7 +703,6 @@ export class Preferences {
|
||||
|
||||
if (setting.migrate && settingId in savedPrefs) {
|
||||
setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
|
||||
delete setting.migrate;
|
||||
}
|
||||
|
||||
setting.ready && setting.ready.call(this, setting);
|
||||
@ -717,7 +716,7 @@ export class Preferences {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Ignore deprecated settings
|
||||
// Ignore deprecated/migrated settings
|
||||
if (setting.migrate) {
|
||||
continue;
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { NATIVE_FETCH } from "./bx-flags";
|
||||
export const SUPPORTED_LANGUAGES = {
|
||||
'en-US': 'English (United States)',
|
||||
|
||||
'ca-CA': 'Català',
|
||||
'en-ID': 'Bahasa Indonesia',
|
||||
'de-DE': 'Deutsch',
|
||||
'es-ES': 'español (España)',
|
||||
@ -29,6 +30,8 @@ const Texts = {
|
||||
"apply": "Apply",
|
||||
"audio": "Audio",
|
||||
"auto": "Auto",
|
||||
"back-to-home": "Back to home",
|
||||
"back-to-home-confirm": "Do you want to go back to the home page (without disconnecting)?",
|
||||
"badge-audio": "Audio",
|
||||
"badge-battery": "Battery",
|
||||
"badge-in": "In",
|
||||
@ -142,6 +145,7 @@ const Texts = {
|
||||
"press-esc-to-cancel": "Press Esc to cancel",
|
||||
"press-key-to-toggle-mkb": [
|
||||
(e: any) => `Press ${e.key} to toggle the Mouse and Keyboard feature`,
|
||||
(e: any) => `Premeu ${e.key} per alternar la funció de teclat i ratolí`,
|
||||
(e: any) => `${e.key}: Maus- und Tastaturunterstützung an-/ausschalten`,
|
||||
(e: any) => `Tekan ${e.key} untuk mengaktifkan fitur Mouse dan Keyboard`,
|
||||
(e: any) => `Pulsa ${e.key} para activar la función de ratón y teclado`,
|
||||
@ -163,6 +167,7 @@ const Texts = {
|
||||
"ratio": "Ratio",
|
||||
"reduce-animations": "Reduce UI animations",
|
||||
"region": "Region",
|
||||
"reload-stream": "Reload stream",
|
||||
"remote-play": "Remote Play",
|
||||
"rename": "Rename",
|
||||
"right-click-to-unbind": "Right-click on a key to unbind it",
|
||||
@ -179,6 +184,7 @@ const Texts = {
|
||||
"separate-touch-controller": "Separate Touch controller & Controller #1",
|
||||
"separate-touch-controller-note": "Touch controller is Player 1, Controller #1 is Player 2",
|
||||
"server": "Server",
|
||||
"settings": "Settings",
|
||||
"settings-reload": "Reload page to reflect changes",
|
||||
"settings-reloading": "Reloading...",
|
||||
"shortcut-keys": "Shortcut keys",
|
||||
@ -229,6 +235,7 @@ const Texts = {
|
||||
"touch-control-layout": "Touch control layout",
|
||||
"touch-control-layout-by": [
|
||||
(e: any) => `Touch control layout by ${e.name}`,
|
||||
(e: any) => `Format del control tàctil per ${e.name}`,
|
||||
(e: any) => `Touch-Steuerungslayout von ${e.name}`,
|
||||
(e: any) => `Tata letak Sentuhan layar oleh ${e.name}`,
|
||||
(e: any) => `Disposición del control táctil por ${e.nombre}`,
|
||||
|
||||
Reference in New Issue
Block a user