(WIP)

web/src/lib/components/album-page/album-card-group.svelte

@@ -5,6 +5,7 @@
   import type { AlbumResponseDto } from '@immich/sdk';
   import { albumViewSettings } from '$lib/stores/preferences.store';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
+  import { handleLongTouch } from '$lib/utils/touch';
   import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';
   import { mdiChevronRight } from '@mdi/js';
   import AlbumCard from '$lib/components/album-page/album-card.svelte';
@@ -56,6 +57,7 @@
     <div class="grid album-grid" transition:slide={{ duration: 300 }}>
       {#each albums as album, index (album.id)}
         <a
+          class="album-card-link"
           data-sveltekit-preload-data="hover"
           href="{AppRoute.ALBUMS}/{album.id}"
           animate:flip={{ duration: 400 }}
@@ -76,6 +78,12 @@
 </div>
 
 <style lang="postcss">
+  .album-card-link {
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
+  }
+
   .album-grid {
     @apply gap-y-1 grid-cols-[repeat(auto-fill,minmax(7rem,1fr))];
   }

web/src/lib/utils/touch.ts

@@ -0,0 +1,60 @@
+import type { ActionReturn } from 'svelte/action';
+
+interface LongTouchAttributes {
+  'on:longtouch'?: (event: CustomEvent<TouchEvent>) => void;
+}
+
+export interface LongTouchOptions {
+  duration?: number;
+  maxOffset?: number;
+}
+
+export const handleLongTouch = (node: HTMLElement, options?: LongTouchOptions): ActionReturn<void, LongTouchAttributes> => {
+  let touchStart: TouchEvent | undefined;
+  let touchTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  const onTouchStart = (event: TouchEvent) => {
+    if (event.touches.length > 1) {
+      cancelLongTouch();
+      return;
+    }
+    touchStart = event;
+    touchTimeoutId = setTimeout(() => {
+      node.dispatchEvent(new CustomEvent('longtouch', { detail: event }));
+    }, options?.duration ?? 500);
+  };
+
+  const onTouchMove = (event: TouchEvent) => {
+    if (touchStart && event.touches.length === 1) {
+      const touchA = touchStart.touches[0];
+      const touchB = event.touches[0];
+      const offset = touchA.clientX * touchB.clientX + touchA.clientY * touchB.clientY;
+      const maxOffset = options?.maxOffset ?? 10;
+      if (offset > maxOffset * maxOffset) {
+        cancelLongTouch();
+      }
+    }
+  };
+
+  const cancelLongTouch = () => {
+    touchStart = undefined;
+    if (touchTimeoutId) {
+      clearTimeout(touchTimeoutId);
+      touchTimeoutId = undefined;
+    }
+  };
+
+  node.addEventListener('touchstart', onTouchStart);
+  node.addEventListener('touchmove', onTouchMove);
+  node.addEventListener('touchend', cancelLongTouch);
+  node.addEventListener('touchend', cancelLongTouch);
+
+  return {
+    destroy() {
+      node.removeEventListener('touchstart', onTouchStart);
+      node.removeEventListener('touchmove', onTouchMove);
+      node.removeEventListener('touchend', cancelLongTouch);
+      node.removeEventListener('touchend', cancelLongTouch);
+    },
+  };
+};

web/src/routes/(user)/map/+page.svelte

@@ -16,6 +16,7 @@
   import { onDestroy, onMount } from 'svelte';
   import type { PageData } from './$types';
   import { handlePromiseError } from '$lib/utils';
+  import { currentMediaBreakpoint, MediaBreakpoint } from '$lib/stores/media-breakpoint.store.js';
 
   export let data: PageData;
 
@@ -106,7 +107,7 @@
 </script>
 
 {#if $featureFlags.loaded && $featureFlags.map}
-  <UserPageLayout title={data.meta.title} noMargin>
+  <UserPageLayout title={$currentMediaBreakpoint >= MediaBreakpoint.MD ? data.meta.title : undefined} noMargin>
     <div class="h-full w-full md:p-2">
       <Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
     </div>