From d5d81f33749ba2a5abb06e61b5e5f65c087ab185 Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Sat, 1 Jun 2024 17:04:33 +0700 Subject: [PATCH] Add "Back to home" button in the Stream menu --- src/assets/css/stream.styl | 12 +++++++++ src/assets/svg/home.svg | 3 +++ src/modules/stream/stream-ui.ts | 48 +++++++++++++++++++++------------ src/utils/bx-icon.ts | 2 ++ 4 files changed, 48 insertions(+), 17 deletions(-) create mode 100644 src/assets/svg/home.svg diff --git a/src/assets/css/stream.styl b/src/assets/css/stream.styl index b13e362..c2c8722 100644 --- a/src/assets/css/stream.styl +++ b/src/assets/css/stream.styl @@ -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; diff --git a/src/assets/svg/home.svg b/src/assets/svg/home.svg new file mode 100644 index 0000000..327975f --- /dev/null +++ b/src/assets/svg/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/modules/stream/stream-ui.ts b/src/modules/stream/stream-ui.ts index 27ea505..93f7df4 100644 --- a/src/modules/stream/stream-ui.ts +++ b/src/modules/stream/stream-ui.ts @@ -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]'); diff --git a/src/utils/bx-icon.ts b/src/utils/bx-icon.ts index 2d19394..dfd27b2 100644 --- a/src/utils/bx-icon.ts +++ b/src/utils/bx-icon.ts @@ -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,