From daf3f72736199bc9beae60a815f0a48a8328ec9e Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Thu, 18 Jul 2024 17:30:34 +0700
Subject: [PATCH] Loop around settings

---
 src/modules/stream/stream-settings.ts | 10 ++++++++++
 src/utils/html.ts                     |  7 +++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/modules/stream/stream-settings.ts b/src/modules/stream/stream-settings.ts
index 56a830e..ec69e37 100644
--- a/src/modules/stream/stream-settings.ts
+++ b/src/modules/stream/stream-settings.ts
@@ -476,6 +476,11 @@ export class StreamSettings {
                 $sibling && $sibling.focus();
                 return;
             }
+
+            // If it's the first/last item -> loop around
+            const pseudo = direction === NavigationDirection.UP ? 'last-of-type' : 'first-of-type';
+            const $target = this.$tabs!.querySelector(`svg:not(.bx-gone):${pseudo}`);
+            $target && ($target as HTMLElement).focus();
         } else if (direction === NavigationDirection.RIGHT) {
             this.#focusFirstVisibleSetting();
         }
@@ -513,6 +518,11 @@ export class StreamSettings {
                     return;
                 }
             }
+
+            // If it's the first/last item -> loop around
+            const pseudo = direction === NavigationDirection.UP ? 'last-of-type' : 'first-of-type';
+            const $target = this.$settings!.querySelector(`div[data-tab-group]:not(.bx-gone) div[data-focus-container]:${pseudo} [tabindex="0"]:last-of-type`);
+            $target && ($target as HTMLElement).focus();
         } else if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
             // Find all child elements with tabindex
             const children = Array.from($parent.querySelectorAll('[tabindex="0"]'));
diff --git a/src/utils/html.ts b/src/utils/html.ts
index 3d0fab7..2062929 100644
--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@@ -41,12 +41,11 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
 
     for (let i = 2, size = arguments.length; i < size; i++) {
         const arg = arguments[i];
-        const argType = typeof arg;
 
-        if (argType === 'string' || argType === 'number') {
-            $elm.appendChild(document.createTextNode(arg));
-        } else if (arg) {
+        if (arg instanceof Node) {
             $elm.appendChild(arg);
+        } else if (arg !== null && typeof arg !== 'undefined') {
+            $elm.appendChild(document.createTextNode(arg));
         }
     }