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

Add "Back to home" button in the Stream menu

Browse Source
This commit is contained in:
redphx 2024-06-01 17:04:33 +07:00
parent 2db78d01a0
commit d5d81f3374
4 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/css/stream.styl
View File

@ -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;

3
src/assets/svg/home.svg Normal file
View 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='4 4 28 28'>
<path d='M13 27v-8h6v8h8V15a1 1 0 0 0-.293-.707l-10-10a1 1 0 0 0-1.415 0l-10 10A1 1 0 0 0 5 15v12h8z'/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

48
src/modules/stream/stream-ui.ts
View File

@ -53,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) {
@ -116,36 +138,28 @@ export function injectStreamMenuButtons() {
// 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]');

2
src/utils/bx-icon.ts
View File

@ -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" };
@ -37,6 +38,7 @@ export const BxIcon = {
COMMAND: iconCommand,
CONTROLLER: iconController,
DISPLAY: iconDisplay,
HOME: iconHome,
MOUSE: iconMouse,
MOUSE_SETTINGS: iconMouseSettings,
NEW: iconNew,