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

Game bar (#392)

Browse Source 
* Fix games with custom touch control sometimes not showing touch icon

* Create game-bar with screenshot button

* Disable Game bar when opening the Guide

* Remove SCREENSHOT_BUTTON_POSITION pref

* Make the touch control action functional

* Show game bar when the game starts

* Fix 720p/High not working (#387)

* Update icons

* Update game bar's animations

* Reset states of Game bar actions before playing

* Don't show Touch control action on non-touch-supported devices

* Clean up

* Update translations

* Update actions' texts

* Clean up
This commit is contained in:
redphx
2024-05-10 18:35:40 +07:00
committed by GitHub
parent b66ca192b2
commit b2e932cc4c
23 changed files with 533 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/assets/css/game-bar.styl Normal file
View File

@@ -0,0 +1,91 @@
#bx-game-bar {
z-index: var(--bx-game-bar-z-index);
position: fixed;
left: 0;
bottom: 0;
width: 40px;
height: 90px;
overflow: visible;
cursor: pointer;
> svg {
display: none;
pointer-events: none;
position: absolute;
height: 28px;
margin-top: 16px;
}
@media (hover: hover) {
&:hover {
> svg {
display: block;
}
}
}
.bx-game-bar-container {
opacity: 0;
position absolute;
display: flex;
overflow: hidden;
background: #1a1b1ee8;
border-radius: 0 10px 10px 0;
box-shadow: 0px 0px 6px #1c1c1c;
transition: opacity 0.1s ease-in;
&.bx-show {
opacity: 1;
+ svg {
display: none !important;
}
}
&.bx-hide {
opacity: 0;
}
button {
width: 60px;
height: 60px;
svg {
width: 28px;
height: 28px;
transition: transform 0.08s ease 0s;
}
&:hover {
border-radius: 0;
}
&:active {
svg {
transform: scale(0.75);
}
}
}
/* Touch controller buttons */
div[data-enabled] {
button {
display: none;
}
}
/* Show disable button */
div[data-enabled='true'] {
button:last-of-type {
display: block;
}
}
/* Show enable button */
div[data-enabled='false'] {
button:first-of-type {
display: block;
}
}
}
}

3
src/assets/css/root.styl
View File

@@ -27,8 +27,7 @@
--bx-stats-bar-z-index: 9001;
--bx-stream-settings-z-index: 9000;
--bx-mkb-pointer-lock-msg-z-index: 8999;
--bx-screenshot-z-index: 8888;
--bx-touch-controller-bar-z-index: 5555;
--bx-game-bar-z-index: 8888;
--bx-wait-time-box-z-index: 100;
}

46
src/assets/css/stream-actions.styl
View File

@@ -1,46 +0,0 @@
.bx-screenshot-button {
display: none;
opacity: 0;
position: fixed;
bottom: 0;
box-sizing: border-box;
width: 60px;
height: 90px;
padding: 16px 16px 46px 16px;
background-size: cover;
background-repeat: no-repeat;
background-origin: content-box;
filter: drop-shadow(0 0 2px #000000B0);
transition: opacity 0.1s ease-in-out 0s, padding 0.1s ease-in 0s;
z-index: var(--bx-screenshot-z-index);
/* Credit: https://phosphoricons.com */
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMjguMzA4IDUuMDM4aC00LjI2NWwtMi4wOTctMy4xNDVhMS4yMyAxLjIzIDAgMCAwLTEuMDIzLS41NDhoLTkuODQ2YTEuMjMgMS4yMyAwIDAgMC0xLjAyMy41NDhMNy45NTYgNS4wMzhIMy42OTJBMy43MSAzLjcxIDAgMCAwIDAgOC43MzF2MTcuMjMxYTMuNzEgMy43MSAwIDAgMCAzLjY5MiAzLjY5MmgyNC42MTVBMy43MSAzLjcxIDAgMCAwIDMyIDI1Ljk2MlY4LjczMWEzLjcxIDMuNzEgMCAwIDAtMy42OTItMy42OTJ6bS02Ljc2OSAxMS42OTJjMCAzLjAzOS0yLjUgNS41MzgtNS41MzggNS41MzhzLTUuNTM4LTIuNS01LjUzOC01LjUzOCAyLjUtNS41MzggNS41MzgtNS41MzggNS41MzggMi41IDUuNTM4IDUuNTM4eiIvPjwvc3ZnPgo=');
&[data-showing=true] {
opacity: 0.9;
}
&[data-capturing=true] {
padding: 8px 8px 38px 8px;
}
}
.bx-screenshot-canvas {
display: none;
}
#bx-touch-controller-bar {
display: none;
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 6vh;
z-index: var(--bx-touch-controller-bar-z-index);
&[data-showing=true] {
display: block;
}
}

2
src/assets/css/styles.styl
View File

@@ -10,7 +10,7 @@
@import 'stream.styl';
@import 'number-stepper.styl';
@import 'stream-actions.styl';
@import 'game-bar.styl';
@import 'stream-stats.styl';
@import 'stream-settings.styl';
@import 'mkb.styl';

6
src/assets/svg/camera.svg Normal file
View 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(.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>
Side by Side

After

Width:  |  Height:  |  Size: 494 B

5
src/assets/svg/caret-right.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 13 23" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<g transform="matrix(.399603 0 0 .709528 0 0)">
<path d="M1.601 2.727l23.255 13.097L1.601 28.922c-.977.55-.977 1.443 0 1.993s2.563.55 3.539 0l25.025-14.094c.977-.55.977-1.443 0-1.993L5.14.734c-.977-.55-2.563-.55-3.539 0s-.977 1.443 0 1.993z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 452 B

9
src/assets/svg/touch-control-disable.svg Normal file
View File

@@ -0,0 +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"/>
</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)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 915 B

6
src/assets/svg/touch-control-enable.svg Normal file
View File

@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 796 B