From 9bf8a2ef66f66ef56ba2da295905a8ac534b776b Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Sat, 4 May 2024 16:20:12 +0700 Subject: [PATCH] Add a standalone Refresh stream button (#315) --- src/assets/css/stream.styl | 8 +++ src/assets/svg/refresh.svg | 3 ++ src/modules/stream/stream-ui.ts | 87 ++++++++------------------------- src/utils/bx-icon.ts | 2 + 4 files changed, 34 insertions(+), 66 deletions(-) create mode 100644 src/assets/svg/refresh.svg diff --git a/src/assets/css/stream.styl b/src/assets/css/stream.styl index 8d717ef..d593a01 100644 --- a/src/assets/css/stream.styl +++ b/src/assets/css/stream.styl @@ -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; +} diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg new file mode 100644 index 0000000..86fe524 --- /dev/null +++ b/src/assets/svg/refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/modules/stream/stream-ui.ts b/src/modules/stream/stream-ui.ts index f57e4be..3fca5b7 100644 --- a/src/modules/stream/stream-ui.ts +++ b/src/modules/stream/stream-ui.ts @@ -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]'); diff --git a/src/utils/bx-icon.ts b/src/utils/bx-icon.ts index 6f70082..862dfab 100644 --- a/src/utils/bx-icon.ts +++ b/src/utils/bx-icon.ts @@ -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,