From e33995d3568f9f3cbce9ac33653138643fffdea0 Mon Sep 17 00:00:00 2001 From: Min Idzelis Date: Thu, 10 Apr 2025 01:30:00 +0000 Subject: [PATCH] Fix disappearing bucket, longpress, dynamic viewport sizes --- .../components/album-page/album-viewer.svelte | 2 +- .../assets/thumbnail/thumbnail.svelte | 52 ++++- .../components/layouts/AuthPageLayout.svelte | 2 +- .../lib/components/layouts/ErrorLayout.svelte | 2 +- .../layouts/user-page-layout.svelte | 2 +- .../components/photos-page/asset-grid.svelte | 14 +- .../components/photos-page/skeleton.svelte | 5 + .../context-menu/context-menu.svelte | 2 +- .../right-click-context-menu.svelte | 2 +- .../full-screen-modal.svelte | 2 +- .../navigation-bar/navigation-bar.svelte | 2 +- .../navigation-loading-bar.svelte | 2 +- .../scrubber/scrubber.svelte | 191 ++++++++++++------ web/src/lib/stores/assets-store.svelte.ts | 82 ++++---- web/src/lib/utils/cancellable-task.ts | 3 + .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../routes/(user)/share/[key]/+error.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- web/src/routes/+page.svelte | 2 +- web/src/routes/auth/onboarding/+page.svelte | 4 +- 22 files changed, 256 insertions(+), 125 deletions(-) diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 53040c8417..b9d953340c 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -99,7 +99,7 @@
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte index 4e203470e3..15d68da93b 100644 --- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte +++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte @@ -24,6 +24,7 @@ import { fade } from 'svelte/transition'; import ImageThumbnail from './image-thumbnail.svelte'; import VideoThumbnail from './video-thumbnail.svelte'; + import { onMount } from 'svelte'; interface Props { asset: AssetResponseDto; @@ -124,24 +125,59 @@ mouseOver = false; }; + let timer: ReturnType; + const clearLongPressTimer = () => clearTimeout(timer); + + let startX: number = 0; + let startY: number = 0; function longPress(element: HTMLElement, { onLongPress }: { onLongPress: () => void }) { - let timer: ReturnType; - const start = (event: TouchEvent) => { + let didPress = false; + const start = (evt: TouchEvent) => { + startX = evt.changedTouches[0].clientX; + startY = evt.changedTouches[0].clientY; + didPress = false; timer = setTimeout(() => { onLongPress(); - event.preventDefault(); + didPress = true; }, 350); }; - const end = () => clearTimeout(timer); - element.addEventListener('touchstart', start); - element.addEventListener('touchend', end); + const click = (e: MouseEvent) => { + if (!didPress) { + return; + } + e.stopPropagation(); + e.preventDefault(); + }; + element.addEventListener('click', click); + element.addEventListener('touchstart', start, true); + element.addEventListener('touchend', clearLongPressTimer, true); return { destroy: () => { - element.removeEventListener('touchstart', start); - element.removeEventListener('touchend', end); + element.removeEventListener('click', click); + element.removeEventListener('touchstart', start, true); + element.removeEventListener('touchend', clearLongPressTimer, true); }, }; } + function moveHandler(e: PointerEvent) { + var diffX = Math.abs(startX - e.clientX); + var diffY = Math.abs(startY - e.clientY); + if (diffX >= 10 || diffY >= 10) { + clearLongPressTimer(); + } + } + onMount(() => { + document.addEventListener('scroll', clearLongPressTimer, true); + document.addEventListener('wheel', clearLongPressTimer, true); + document.addEventListener('contextmenu', clearLongPressTimer, true); + document.addEventListener('pointermove', moveHandler, true); + return () => { + document.removeEventListener('scroll', clearLongPressTimer, true); + document.removeEventListener('wheel', clearLongPressTimer, true); + document.removeEventListener('contextmenu', clearLongPressTimer, true); + document.removeEventListener('pointermove', moveHandler, true); + }; + });
-
+
-
+
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte index eb4f286d96..556c468e95 100644 --- a/web/src/lib/components/layouts/user-page-layout.svelte +++ b/web/src/lib/components/layouts/user-page-layout.svelte @@ -51,7 +51,7 @@
{#if sidebar}{@render sidebar()}{:else if admin} diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index 18abf6ec57..6befc9e623 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -277,7 +277,7 @@ bucketHeight = assetStore.buckets[i].bucketHeight; } let next = top - bucketHeight * maxScrollPercent; - if (next < 0) { + if (next < 0 && bucket) { scrubBucket = bucket; scrubBucketPercent = top / (bucketHeight * maxScrollPercent); found = true; @@ -698,7 +698,6 @@ {#if assetStore.buckets.length > 0} - +
{:else if display}
{/if} {/each} - +
diff --git a/web/src/lib/components/photos-page/skeleton.svelte b/web/src/lib/components/photos-page/skeleton.svelte index 9d1ba69aec..42b7ba933d 100644 --- a/web/src/lib/components/photos-page/skeleton.svelte +++ b/web/src/lib/components/photos-page/skeleton.svelte @@ -22,6 +22,11 @@ background-repeat: repeat; background-size: 235px, 235px; } + @media (max-width: 850px) { + [data-skeleton] { + background-size: 100px, 100px; + } + } :global(.dark) [data-skeleton] { background-image: url('/dark_skeleton.png'); } diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte index b4bf9043be..976f86d3e5 100644 --- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte +++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte @@ -66,7 +66,7 @@ aria-labelledby={ariaLabelledBy} bind:this={menuElement} class="{isVisible - ? 'max-h-screen max-h-svh' + ? 'max-h-dvh max-h-svh' : 'max-h-0'} flex flex-col transition-all duration-[250ms] ease-in-out outline-none overflow-auto" role="menu" tabindex="-1" diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte index f7745893db..9b9e68b6c5 100644 --- a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte +++ b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte @@ -91,7 +91,7 @@ }, ]} > -