fix: responsive: timeline glitch and keyboard-accessible scrubber (#17556)

* fix: responsive: timeline glitch

* lint

* fix margin-right on mobile

---------

Co-authored-by: Alex <[email protected]>

Author: midzelis

web/src/lib/actions/focus-trap.ts

@@ -1,4 +1,5 @@
 import { shortcuts } from '$lib/actions/shortcut';
+import { getFocusable } from '$lib/utils/focus-util';
 import { tick } from 'svelte';
 
 interface Options {
@@ -8,9 +9,6 @@ interface Options {
   active?: boolean;
 }
 
-const selectors =
-  'button:not([disabled], .hidden), [href]:not(.hidden), input:not([disabled], .hidden), select:not([disabled], .hidden), textarea:not([disabled], .hidden), [tabindex]:not([tabindex="-1"], .hidden)';
-
 export function focusTrap(container: HTMLElement, options?: Options) {
   const triggerElement = document.activeElement;
 
@@ -21,7 +19,7 @@ export function focusTrap(container: HTMLElement, options?: Options) {
   };
 
   const setInitialFocus = () => {
-    const focusableElement = container.querySelector<HTMLElement>(selectors);
+    const focusableElement = getFocusable(container)[0];
     // Use tick() to ensure focus trap works correctly inside <Portal />
     void tick().then(() => focusableElement?.focus());
   };
@@ -30,11 +28,11 @@ export function focusTrap(container: HTMLElement, options?: Options) {
     setInitialFocus();
   }
 
-  const getFocusableElements = (): [HTMLElement | null, HTMLElement | null] => {
-    const focusableElements = container.querySelectorAll<HTMLElement>(selectors);
+  const getFocusableElements = () => {
+    const focusableElements = getFocusable(container);
     return [
-      focusableElements.item(0), //
-      focusableElements.item(focusableElements.length - 1),
+      focusableElements.at(0), //
+      focusableElements.at(-1),
     ];
   };
 

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -25,6 +25,7 @@
   import ImageThumbnail from './image-thumbnail.svelte';
   import VideoThumbnail from './video-thumbnail.svelte';
   import { onMount } from 'svelte';
+  import { getFocusable } from '$lib/utils/focus-util';
 
   interface Props {
     asset: AssetResponseDto;
@@ -222,10 +223,30 @@
       if (evt.key === 'x') {
         onSelect?.(asset);
       }
+      if (document.activeElement === focussableElement && evt.key === 'Escape') {
+        const focusable = getFocusable(document);
+        const index = focusable.indexOf(focussableElement);
+
+        let i = index + 1;
+        while (i !== index) {
+          const next = focusable[i];
+          if (next.dataset.thumbnailFocusContainer !== undefined) {
+            if (i === focusable.length - 1) {
+              i = 0;
+            } else {
+              i++;
+            }
+            continue;
+          }
+          next.focus();
+          break;
+        }
+      }
     }}
     onclick={handleClick}
     bind:this={focussableElement}
     onfocus={handleFocus}
+    data-thumbnail-focus-container
     data-testid="container-with-tabindex"
     tabindex={0}
     role="link"

web/src/lib/components/photos-page/asset-grid.svelte

@@ -78,13 +78,19 @@
   let scrubBucketPercent = $state(0);
   let scrubBucket: { bucketDate: string | undefined } | undefined = $state();
   let scrubOverallPercent: number = $state(0);
+  let scrubberWidth = $state(0);
 
   // 60 is the bottom spacer element at 60px
   let bottomSectionHeight = 60;
   let leadout = $state(false);
 
+  const maxMd = $derived(mobileDevice.maxMd);
   const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
 
+  $effect(() => {
+    assetStore.rowHeight = maxMd ? 100 : 235;
+  });
+
   const scrollTo = (top: number) => {
     element?.scrollTo({ top });
     showSkeleton = false;
@@ -162,7 +168,13 @@
   const updateIsScrolling = () => (assetStore.scrolling = true);
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
   const updateSlidingWindow = () => assetStore.updateSlidingWindow(element?.scrollTop || 0);
-  const compensateScrollCallback = (delta: number) => element?.scrollBy(0, delta);
+  const compensateScrollCallback = ({ delta, top }: { delta?: number; top?: number }) => {
+    if (delta) {
+      element?.scrollBy(0, delta);
+    } else if (top) {
+      element?.scrollTo({ top });
+    }
+  };
   const topSectionResizeObserver: OnResizeCallback = ({ height }) => (assetStore.topSectionHeight = height);
 
   onMount(() => {
@@ -267,10 +279,21 @@
           bucket = assetStore.buckets[i];
           bucketHeight = assetStore.buckets[i].bucketHeight;
         }
+
         let next = top - bucketHeight * maxScrollPercent;
-        if (next < 0) {
+        // instead of checking for < 0, add a little wiggle room for subpixel resolution
+        if (next < -1 && bucket) {
           scrubBucket = bucket;
-          scrubBucketPercent = top / (bucketHeight * maxScrollPercent);
+
+          // allowing next to be at least 1 may cause percent to go negative, so ensure positive percentage
+          scrubBucketPercent = Math.max(0, top / (bucketHeight * maxScrollPercent));
+
+          // compensate for lost precision/rouding errors advance to the next bucket, if present
+          if (scrubBucketPercent > 0.9999 && i + 1 < bucketsLength - 1) {
+            scrubBucket = assetStore.buckets[i + 1];
+            scrubBucketPercent = 0;
+          }
+
           found = true;
           break;
         }
@@ -689,7 +712,6 @@
 
 {#if assetStore.buckets.length > 0}
   <Scrubber
-    invisible={showSkeleton}
     {assetStore}
     height={assetStore.viewportHeight}
     timelineTopOffset={assetStore.topSectionHeight}
@@ -699,6 +721,7 @@
     {scrubBucketPercent}
     {scrubBucket}
     {onScrub}
+    bind:scrubberWidth
     onScrubKeyDown={(evt) => {
       evt.preventDefault();
       let amount = 50;
@@ -720,12 +743,8 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class={[
-    'scrollbar-hidden h-full overflow-y-auto outline-none',
-    { 'm-0': isEmpty },
-    { 'ml-0': !isEmpty },
-    { 'mr-[60px]': !isEmpty && !usingMobileDevice },
-  ]}
+  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ml-0': !isEmpty }]}
+  style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={assetStore.viewportHeight}
   bind:clientWidth={null, (v) => ((assetStore.viewportWidth = v), updateSlidingWindow())}
@@ -763,7 +782,7 @@
           style:transform={`translate3d(0,${absoluteHeight}px,0)`}
           style:width="100%"
         >
-          <Skeleton height={bucket.bucketHeight} title={bucket.bucketDateFormatted} />
+          <Skeleton height={bucket.bucketHeight - bucket.store.headerHeight} title={bucket.bucketDateFormatted} />
         </div>
       {:else if display}
         <div
@@ -788,7 +807,14 @@
         </div>
       {/if}
     {/each}
-    <!-- <div class="h-[60px]" style:position="absolute" style:left="0" style:right="0" style:bottom="0"></div> -->
+    <!-- spacer for leadout -->
+    <div
+      class="h-[60px]"
+      style:position="absolute"
+      style:left="0"
+      style:right="0"
+      style:transform={`translate3d(0,${assetStore.timelineHeight}px,0)`}
+    ></div>
   </section>
 </section>
 

web/src/lib/components/photos-page/skeleton.svelte

@@ -13,7 +13,11 @@
   >
     {title}
   </div>
-  <div class="animate-pulse absolute h-full ml-[10px]" style:width="calc(100% - 10px)" data-skeleton="true"></div>
+  <div
+    class="animate-pulse absolute h-full ml-[10px] mr-[10px]"
+    style:width="calc(100% - 20px)"
+    data-skeleton="true"
+  ></div>
 </div>
 
 <style>