(wip)

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -17,6 +17,7 @@
   import { createEventDispatcher } from 'svelte';
   import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
+  import { currentMediaBreakpoint, MediaBreakpoint } from '$lib/stores/media-breakpoint.store';
 
   export let assets: AssetResponseDto[];
   export let bucketDate: string;
@@ -44,6 +45,15 @@
 
   $: assetsGroupByDate = splitBucketIntoDateGroups(assets, $locale);
 
+  $: layoutOptions = $currentMediaBreakpoint >= MediaBreakpoint.XS
+    ? {
+      targetRowHeight: 235,
+    }
+    : {
+      targetRowHeight: 135,
+      forceAspectRatio: 1,
+    };
+
   $: geometry = (() => {
     const geometry = [];
     for (let group of assetsGroupByDate) {
@@ -54,7 +64,7 @@
           containerWidth: Math.floor(viewport.width),
           containerPadding: 0,
           targetRowHeightTolerance: 0.15,
-          targetRowHeight: 235,
+          ...layoutOptions,
         },
       );
       geometry.push({

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

@@ -23,6 +23,7 @@
   import { handlePromiseError } from '$lib/utils';
   import { selectAllAssets } from '$lib/utils/asset-utils';
   import { isUserUsingMouse } from '$lib/stores/input-device.store';
+  import { onResize } from '$lib/utils/resize';
 
   export let isSelectionMode = false;
   export let singleSelect = false;
@@ -39,13 +40,18 @@
 
   const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
     assetInteractionStore;
-  const viewport: Viewport = { width: 0, height: 0 };
   let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets } = assetViewingStore;
+
+  const viewport: Viewport = {
+    width: 0,
+    height: 0,
+  };
+  let timelineHeight = 0;
+
   let element: HTMLElement;
   let showShortcuts = false;
   let showSkeleton = true;
 
-  $: timelineHeight = element ? getTimelineHeight() : 0;
   $: timelineY = element ? getCurrentScrollY() : 0;
 
   $: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
@@ -57,7 +63,6 @@
     showSkeleton = false;
     assetStore.connect();
     await assetStore.init(viewport);
-    updateViewportSize();
   });
 
   onDestroy(() => {
@@ -76,17 +81,13 @@
     return element.scrollTop + viewport.height * progress;
   };
 
-  const getTimelineHeight = () => {
-    return element?.scrollHeight ?? 0;
-  };
-
-  const getViewportHeight = () => {
-    return element?.getBoundingClientRect().height ?? 0;
+  const updateGridViewport = (rect: DOMRect) => {
+    viewport.width = rect.width;
+    viewport.height = rect.height;
   };
 
-  const updateViewportSize = () => {
-    timelineHeight = getTimelineHeight();
-    viewport.height = getViewportHeight();
+  const updateTimelineHeight = (rect: DOMRect) => {
+    timelineHeight = Math.max(rect.height, element?.scrollHeight ?? 0);
   };
 
   const trashOrDelete = async (force: boolean = false) => {
@@ -228,7 +229,6 @@
 
     animationTick = true;
     window.requestAnimationFrame(() => {
-      updateViewportSize();
       timelineY = getCurrentScrollY();
       animationTick = false;
     });
@@ -402,7 +402,6 @@
 </script>
 
 <svelte:window
-  on:resize={updateViewportSize}
   on:keydown={onKeyDown}
   on:keyup={onKeyUp}
   on:selectstart={onSelectStart}
@@ -434,8 +433,8 @@
   id="asset-grid"
   class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'mx-4 lg:ml-0'}
   {!isEmpty && $isUserUsingMouse ? 'md:mr-[60px]' : ''}"
-  bind:clientWidth={viewport.width}
   bind:this={element}
+  use:onResize={updateGridViewport}
   on:scroll={handleTimelineScroll}
 >
   <!-- skeleton -->
@@ -457,7 +456,11 @@
     {#if isEmpty}
       <slot name="empty" />
     {/if}
-    <section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>
+    <section
+      id="virtual-timeline"
+      use:onResize={updateTimelineHeight}
+      style:height={$assetStore.timelineHeight + 'px'}
+    >
       {#each $assetStore.buckets as bucket (bucket.bucketDate)}
         <IntersectionObserver
           on:intersected={intersectedHandler}

web/src/lib/utils/autogrow.ts

@@ -1,18 +1,18 @@
+import { onResize } from '$lib/utils/resize';
+
 export const autoGrowHeight = (textarea: HTMLTextAreaElement, height = 'auto') => {
   const resize = () => {
     textarea.style.height = height;
     textarea.style.height = `${textarea.scrollHeight + 5}px`;
   };
 
-  resize();
-
+  const onResizeAction = onResize(textarea, resize);
   textarea.addEventListener('input', resize);
-  window.addEventListener('resize', resize);
 
   return {
     destroy: () => {
+      onResizeAction.destroy?.();
       textarea.removeEventListener('input', resize);
-      window.removeEventListener('resize', resize);
     },
   };
 };

web/src/lib/utils/media-breakpoint.ts

@@ -32,30 +32,30 @@ const handleBreakpoint = (
   };
 };
 
-export const xxs = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const xxs = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.XXS, callbacks);
 };
 
-export const xs = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const xs = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.XS, callbacks);
 };
 
-export const sm = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const sm = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.SM, callbacks);
 };
 
-export const md = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const md = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.MD, callbacks);
 };
 
-export const lg = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const lg = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.LG, callbacks);
 };
 
-export const xl = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const xl = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.XL, callbacks);
 };
 
-export const xxl = <T extends HTMLElement>(_: T, callbacks: MediaBreakpointCallbacks) => {
+export const xxl = <T extends Element>(_: T, callbacks: MediaBreakpointCallbacks) => {
   return handleBreakpoint(MediaBreakpoint.XXL, callbacks);
 };

web/src/lib/utils/resize.ts

@@ -0,0 +1,19 @@
+import type { ActionReturn } from 'svelte/action';
+
+export type OnResize = (rect: DOMRectReadOnly) => unknown;
+
+export const onResize = <T extends Element>(target: T, eventHandler: OnResize): ActionReturn => {
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      eventHandler(entry.target.getBoundingClientRect());
+    }
+  });
+
+  observer.observe(target);
+
+  return {
+    destroy() {
+      observer.disconnect();
+    },
+  };
+};