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

Add a standalone Refresh stream button (#315)

Browse Source
This commit is contained in:
redphx 2024-05-04 16:20:12 +07:00
parent b1df189c7d
commit 9bf8a2ef66
4 changed files with 34 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,3 +7,11 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
background-color: #2d2d2d !important;
color: #000 !important;
}
.bx-stream-refresh-button {
top: calc(env(safe-area-inset-top, 0px) + 10px + 50px) !important;
}
body[data-media-type=tv] .bx-stream-refresh-button {
top: calc(var(--gds-focus-borderSize) + 80px) !important;
}

3
src/assets/svg/refresh.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='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"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

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

@ -8,65 +8,6 @@ import { StreamBadges } from "./stream-badges.ts";
import { StreamStats } from "./stream-stats.ts";
class MouseHoldEvent {
#isHolding = false;
#timeout?: number | null;
#$elm;
#callback;
#duration;
#onMouseDown(e: MouseEvent | TouchEvent) {
const _this = this;
this.#isHolding = false;
this.#timeout && clearTimeout(this.#timeout);
this.#timeout = window.setTimeout(() => {
_this.#isHolding = true;
_this.#callback();
}, this.#duration);
};
#onMouseUp(e: MouseEvent | TouchEvent) {
this.#timeout && clearTimeout(this.#timeout);
this.#timeout = null;
if (this.#isHolding) {
e.preventDefault();
e.stopPropagation();
}
this.#isHolding = false;
};
#addEventListeners = () => {
this.#$elm.addEventListener('mousedown', this.#onMouseDown.bind(this));
this.#$elm.addEventListener('click', this.#onMouseUp.bind(this));
this.#$elm.addEventListener('touchstart', this.#onMouseDown.bind(this));
this.#$elm.addEventListener('touchend', this.#onMouseUp.bind(this));
}
/*
#clearEventLiseners = () => {
this.#$elm.removeEventListener('mousedown', this.#onMouseDown);
this.#$elm.removeEventListener('click', this.#onMouseUp);
this.#$elm.removeEventListener('touchstart', this.#onMouseDown);
this.#$elm.removeEventListener('touchend', this.#onMouseUp);
}
*/
constructor($elm: HTMLElement, callback: any, duration=1000) {
this.#$elm = $elm;
this.#callback = callback;
this.#duration = duration;
this.#addEventListeners();
// $elm.clearMouseHoldEventListeners = this.#clearEventLiseners;
}
}
function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
const $container = $orgButton.cloneNode(true) as HTMLElement;
let timeout: number | null;
@ -192,25 +133,39 @@ export function injectStreamMenuButtons() {
}
// Render badges
if ($elm.className.startsWith('StreamMenu')) {
if ($elm.className.startsWith('StreamMenu-module__container')) {
BxEvent.dispatch(window, BxEvent.STREAM_MENU_SHOWN);
// Hide Quick bar when closing HUD
const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
if (!$btnCloseHud) {
return;
}
// Hide Quick bar when closing HUD
$btnCloseHud && $btnCloseHud.addEventListener('click', e => {
$quickBar.classList.add('bx-gone');
});
// Get "Quit game" button
const $btnQuit = $elm.querySelector('div[class^=StreamMenu] > div > button:last-child') as HTMLElement;
// Hold "Quit game" button to refresh the stream
new MouseHoldEvent($btnQuit, () => {
// 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 => {
confirm(t('confirm-reload-stream')) && window.location.reload();
}, 1000);
});
// Add to website
$btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
// Render stream badges
const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');

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

@ -6,6 +6,7 @@ import iconMouseSettings from "@assets/svg/mouse-settings.svg" with { type: "tex
import iconMouse from "@assets/svg/mouse.svg" with { type: "text" };
import iconNew from "@assets/svg/new.svg" with { type: "text" };
import iconQuestion from "@assets/svg/question.svg" with { type: "text" };
import iconRefresh from "@assets/svg/refresh.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 iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" };
@ -23,6 +24,7 @@ export const BxIcon = {
TRASH: iconTrash,
CURSOR_TEXT: iconCursorText,
QUESTION: iconQuestion,
REFRESH: iconRefresh,
REMOTE_PLAY: iconRemotePlay,