Add "Back to home" button in the Stream menu

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;

src/assets/svg/home.svg

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

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;
+                    const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
-
-                    // 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();
                     });
+
+                    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]');

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,