From 13c83bf29712891769cb3299cb60c1d563f18f04 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sun, 30 Jun 2024 14:47:45 +0200
Subject: [PATCH] feat: further improve dpad navigation feat: make home lists
 scrollable on mobile

---
 common/modules/click.js           | 31 ++++++++++++++++---------------
 common/views/Home/Section.svelte  | 27 ++++++++++++++++-----------
 common/views/Player/Player.svelte |  2 +-
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/common/modules/click.js b/common/modules/click.js
index cecdfe6..08e3a4e 100644
--- a/common/modules/click.js
+++ b/common/modules/click.js
@@ -143,7 +143,7 @@ function getKeyboardFocusableElements (element = document.body) {
  */
 function getElementPosition (element) {
   const { x, y, width, height, top, left, bottom, right } = element.getBoundingClientRect()
-  const inViewport = isInViewport({ top, left, bottom, right })
+  const inViewport = isInViewport({ top, left, bottom, right, width, height })
   return { element, x: x + width * 0.5, y: y + height * 0.5, inViewport }
 }
 
@@ -165,8 +165,8 @@ function getFocusableElementPositions () {
  * @param {Object} rect - The coordinates of the element.
  * @returns {boolean} - True if the element is within the viewport, false otherwise.
  */
-function isInViewport ({ top, left, bottom, right }) {
-  return top >= 0 && left >= 0 && bottom <= window.innerHeight && right <= window.innerWidth
+function isInViewport ({ top, left, bottom, right, width, height }) {
+  return top + height >= 0 && left + width >= 0 && bottom - height <= window.innerHeight && right - width <= window.innerWidth
 }
 
 // function isVisible ({ top, left, bottom, right }, element) {
@@ -191,6 +191,7 @@ function getElementsInDesiredDirection (keyboardFocusable, currentElement, direc
 
     // filters out elements which are in the viewport, but are overlayed by other elements like a modal
     if (position.inViewport && !position.element.checkVisibility()) return false
+    if (!position.inViewport && direction === 'right') return false // HACK: prevent right navigation from going to offscreen elements, but allow vertical elements!
     return true
   })
 }
@@ -221,21 +222,21 @@ function navigateDPad (direction = 'up') {
     if (isInput) element.readOnly = true
     element.focus()
     if (isInput) setTimeout(() => { element.readOnly = false })
-    element.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
-    return
+    element.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' })
+    // return
   }
 
-  // no elements in desired direction, go to opposite end [wrap around]
-  const elementsInOppositeDirection = getElementsInDesiredDirection(keyboardFocusable, currentElement, InverseDirections[direction])
-  if (elementsInOppositeDirection.length) {
-    const furthestElement = elementsInOppositeDirection.reduce((reducer, position) => {
-      const distance = getDistance(currentElement, position)
-      if (distance > reducer.distance) return { distance, element: position.element }
-      return reducer
-    }, { distance: -Infinity, element: null })
+  // no elements in desired direction, go to opposite end [wrap around] // this wasnt a good idea in the long run
+  // const elementsInOppositeDirection = getElementsInDesiredDirection(keyboardFocusable, currentElement, InverseDirections[direction])
+  // if (elementsInOppositeDirection.length) {
+  //   const furthestElement = elementsInOppositeDirection.reduce((reducer, position) => {
+  //     const distance = getDistance(currentElement, position)
+  //     if (distance > reducer.distance) return { distance, element: position.element }
+  //     return reducer
+  //   }, { distance: -Infinity, element: null })
 
-    furthestElement.element.focus()
-  }
+  //   furthestElement.element.focus()
+  // }
 }
 
 // hacky, but make sure keybinds system loads first so it can prevent this from running
diff --git a/common/views/Home/Section.svelte b/common/views/Home/Section.svelte
index 358bafa..50006c6 100644
--- a/common/views/Home/Section.svelte
+++ b/common/views/Home/Section.svelte
@@ -34,18 +34,19 @@
 </script>
 
 <span class='d-flex px-20 align-items-end pointer text-decoration-none text-muted'
-  use:click={_click}
   use:deferredLoad>
-  <div class='font-size-24 font-weight-semi-bold'>{opts.title}</div>
-  <div class='pr-10 ml-auto font-size-12'>View More</div>
+  <div class='font-size-24 font-weight-semi-bold' use:click={_click}>{opts.title}</div>
+  <div class='pr-10 ml-auto font-size-12' use:click={_click}>View More</div>
 </span>
-<div class='pb-10 w-full position-relative d-flex flex-row justify-content-start gallery'>
-  {#each $preview || fakecards as card}
-    <Card {card} />
-  {/each}
-  {#if $preview?.length}
-    <ErrorCard promise={$preview[0].data} />
-  {/if}
+<div class='position-relative'>
+  <div class='pb-10 w-full d-flex flex-row justify-content-start gallery'>
+    {#each $preview || fakecards as card}
+      <Card {card} />
+    {/each}
+    {#if $preview?.length}
+      <ErrorCard promise={$preview[0].data} />
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -62,6 +63,10 @@
     pointer-events: none;
   }
   .gallery {
-    overflow-x: clip
+    overflow-x: scroll;
+    flex-shrink: 0;
+  }
+  .gallery::-webkit-scrollbar {
+    display: none;
   }
 </style>
diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte
index c69162c..bc0ea70 100644
--- a/common/views/Player/Player.svelte
+++ b/common/views/Player/Player.svelte
@@ -1001,7 +1001,7 @@
       e.stopPropagation()
       e.stopImmediatePropagation()
       e.preventDefault()
-      document.querySelector('div[data-name=\'toggleFullscreen\']')?.focus()
+      document.querySelector('[data-name=\'toggleFullscreen\']')?.focus()
     }
   }
 </script>