@hearthlog/module-gallery 0.0.0-stage → 1.0.1

package/src/components/gallery/GalleryTimeline.svelte

@@ -0,0 +1,294 @@
+<script lang="ts" module>
+    import type { GalleryFilter, GallerySummary } from '../../data/gallery.js';
+
+    /** A summary with the filter it was read under; the timeline lists exactly these blocks. */
+    export interface GalleryTimelineSource {
+        filter: GalleryFilter;
+        summary: GallerySummary;
+    }
+
+    /** Where a timeline opens: the top of the list (newest), its bottom (oldest), or a `yyyy-MM` month. */
+    export type GalleryOpening = 'end' | 'start' | string;
+</script>
+
+<script lang="ts">
+    import { untrack } from 'svelte';
+    import { EndlessList, type EndlessBlock, type EndlessPosition, type EndlessTarget } from '@hearthlog/sdk/endless';
+    import { listAxis, nearestKey } from '@hearthlog/sdk/axis';
+    import { queryDatabase } from '@hearthlog/sdk/data';
+    import type { GalleryBlockSummary } from '../../data/gallery.js';
+    import type { GalleryPhoto } from '@hearthlog/sdk/data';
+    import {
+        compareGalleryBlockKeys, estimateGalleryBlock, galleryBlockKey, galleryBlockMonth, galleryBlockPart, galleryGeometry, type GalleryDensity,
+    } from '../../gallery/timeline.js';
+    import { GalleryBlocks } from './gallery-blocks.svelte.js';
+    import { formatMonthParts, formatPhotoCount } from '../../gallery/format.js';
+    import GalleryMonthBlock from './GalleryMonthBlock.svelte';
+    import GallerySpine from './view/GallerySpine.svelte';
+
+    let {
+        source,
+        tenantId,
+        logId,
+        revision,
+        density,
+        opening = 'start',
+        chips = true,
+        showLatest = true,
+        beginning = '',
+        selecting = false,
+        selectedIds,
+        onOpen,
+        onSelect,
+        onSelectMonth,
+        onOpenAlbum,
+        onMonthChange,
+    }: {
+        source: GalleryTimelineSource;
+        tenantId: string;
+        logId: string;
+        /** Changes after a save or a sync; the blocks on screen then read again. */
+        revision: number;
+        density: GalleryDensity;
+        /** Read when the timeline opens and when its filter changes. */
+        opening?: GalleryOpening;
+        /** Month headers name the albums they hold. */
+        chips?: boolean;
+        /** A Latest button returns to the newest photo. */
+        showLatest?: boolean;
+        beginning?: string;
+        selecting?: boolean;
+        selectedIds: Set<string>;
+        onOpen: (id: string) => void;
+        onSelect: (id: string) => void;
+        onSelectMonth: (month: string, select: boolean) => void;
+        onOpenAlbum?: (id: string) => void;
+        /** The month at the top of the list, as the list scrolls. */
+        onMonthChange?: (month: string) => void;
+    } = $props();
+
+    const blocks = $derived(source.summary.blocks);
+    const keys = $derived(blocks.map((block) => block.key));
+    const axis = $derived(listAxis(keys, { descending: true, compare: compareGalleryBlockKeys }));
+    const shapes = $derived(new Map(blocks.map((block) => [block.key, block])));
+    const topKey = $derived(keys[0] ?? '');
+    const lastKey = $derived(keys[keys.length - 1] ?? '');
+
+    let root = $state<HTMLDivElement>();
+    let width = $state(0);
+    // Rows follow the width a frame later, so relaying them never feeds back into the same resize.
+    $effect(() => {
+        if (!root) return;
+        let frame = 0;
+        const observer = new ResizeObserver(([entry]) => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => width = Math.round(entry.contentRect.width));
+        });
+        observer.observe(root);
+        return () => {
+            observer.disconnect();
+            cancelAnimationFrame(frame);
+        };
+    });
+    const inset = $derived(width >= 640 ? { start: 24, end: 88 } : { start: 10, end: 24 });
+    const geometry = $derived(galleryGeometry(Math.max(0, width - inset.start - inset.end), density));
+    const estimate = $derived((key: string) => estimateGalleryBlock(shapes.get(key), geometry));
+
+    let list = $state<ReturnType<typeof EndlessList>>();
+    let position = $state<EndlessPosition | null>(null);
+
+    /**
+     * The list keeps its keys while it is open, so it opens again when they
+     * change: at the filter's opening place for a new filter, or where it was
+     * when a month appears or leaves in the middle. Keys are newest first, so
+     * a month added or removed at the top keeps it open. Blocks are read again
+     * only for a new filter.
+     */
+    const tracked = { keys: [] as string[], filter: '', filterEpoch: 0, listEpoch: 0, opening: { key: '' } as EndlessTarget };
+    const epochs = $derived.by(() => {
+        const filter = JSON.stringify(source.filter);
+        const previous = tracked.keys;
+        const common = Math.min(previous.length, keys.length);
+        let kept = true;
+        for (let index = 1; index <= common; index++) {
+            if (previous[previous.length - index] !== keys[keys.length - index]) { kept = false; break; }
+        }
+        if (filter !== tracked.filter || !kept || previous.length === 0) {
+            const was = untrack(() => position);
+            if (filter !== tracked.filter || !was) {
+                tracked.filterEpoch += filter !== tracked.filter ? 1 : 0;
+                const wanted = untrack(() => opening);
+                tracked.opening = wanted === 'start' ? { key: keys[0] ?? '' }
+                    : wanted === 'end' ? { key: keys[keys.length - 1] ?? '' }
+                    : { key: nearestKey(axis, galleryBlockKey(wanted)) };
+            } else {
+                tracked.opening = was.at === previous[previous.length - 1] ? { key: keys[keys.length - 1] ?? '' } : { key: nearestKey(axis, was.key) };
+            }
+            tracked.listEpoch += 1;
+        }
+        tracked.keys = keys;
+        tracked.filter = filter;
+        return { filter: tracked.filterEpoch, list: tracked.listEpoch };
+    });
+    const store = $derived.by(() => {
+        void epochs.filter;
+        return untrack(() => new GalleryBlocks(source.filter, chips));
+    });
+
+    const home = $derived(showLatest && !selecting && topKey ? { key: topKey, at: topKey, label: 'Latest' } : undefined);
+
+    /** The block at the top edge names the month; the last block on screen closes the spine's band. */
+    function pick(onScreen: EndlessBlock[]): EndlessPosition {
+        return { key: onScreen[0].key, at: onScreen[onScreen.length - 1].key };
+    }
+
+    function follow(next: EndlessPosition): void {
+        position = next;
+        onMonthChange?.(galleryBlockMonth(next.key));
+    }
+
+    /** A big month's later blocks have no header of their own; this one stands in while they pass. */
+    const continued = $derived(position && galleryBlockPart(position.key) > 0 ? shapes.get(position.key) : undefined);
+
+    function monthSelected(block: GalleryBlockSummary): boolean {
+        if (!selecting || selectedIds.size === 0) return false;
+        for (let part = 0; part < block.parts; part++) {
+            const data = store.get(galleryBlockKey(block.month, part));
+            if (!data || !data.photos.every((photo) => selectedIds.has(photo.id))) return false;
+        }
+        return true;
+    }
+
+    // Phones show the spine while the list moves.
+    let scrolling = $state(false);
+    let scrollTimer: ReturnType<typeof setTimeout> | undefined;
+    function moved(): void {
+        scrolling = true;
+        clearTimeout(scrollTimer);
+        scrollTimer = setTimeout(() => scrolling = false, 1400);
+    }
+    $effect(() => () => clearTimeout(scrollTimer));
+
+    export function scrollToMonth(month: string): void {
+        if (keys.length) list?.scrollTo({ key: nearestKey(axis, galleryBlockKey(month)) });
+    }
+
+    export function scrollToLatest(): void {
+        if (topKey) list?.scrollTo({ key: topKey, at: topKey });
+    }
+
+    /** Brings a photo's tile into view, loading its block when it is far away, and focuses it. */
+    export async function revealPhoto(photo: GalleryPhoto): Promise<void> {
+        const selector = `[data-photo-id="${CSS.escape(photo.id)}"]`;
+        const scroller = root?.querySelector<HTMLElement>('[data-gallery-scroll]');
+        const tile = root?.querySelector<HTMLElement>(selector);
+        if (tile && scroller) {
+            const box = scroller.getBoundingClientRect();
+            const rect = tile.getBoundingClientRect();
+            if (rect.top >= box.top + geometry.header && rect.bottom <= box.bottom) {
+                tile.focus({ preventScroll: true });
+                return;
+            }
+        }
+        const key = await queryDatabase((repositories) => repositories.gallery.photoBlock(photo, source.filter));
+        list?.scrollTo({ key, at: key, find: (block) => block.querySelector<HTMLElement>(selector), ratio: 0.35 });
+        let frames = 90;
+        const focus = () => {
+            const shown = root?.querySelector<HTMLElement>(selector);
+            if (shown) shown.focus({ preventScroll: true });
+            else if (--frames > 0) requestAnimationFrame(focus);
+        };
+        requestAnimationFrame(focus);
+    }
+</script>
+
+<div
+    bind:this={root}
+    class="gallery-timeline"
+    style:--gallery-inset-start={`${inset.start}px`}
+    style:--gallery-inset-end={`${inset.end}px`}
+    onscrollcapture={moved}
+>
+    {#if keys.length && width > 0}
+        {#key epochs.list}
+            <EndlessList
+                bind:this={list}
+                {axis}
+                {store}
+                opening={tracked.opening}
+                {estimate}
+                {revision}
+                {home}
+                {pick}
+                onVisibleChange={follow}
+                class="gallery-scroller"
+                data-gallery-scroll
+                aria-label="Photos by month"
+            >
+                {#snippet item(key, data)}
+                    {@const block = shapes.get(key)}
+                    {#if block}
+                        <GalleryMonthBlock
+                            {block}
+                            {data}
+                            {geometry}
+                            {tenantId}
+                            {logId}
+                            beginning={key === keys[0] ? beginning : ''}
+                            last={key === lastKey}
+                            {selecting}
+                            {selectedIds}
+                            monthSelected={block.part === 0 && monthSelected(block)}
+                            {onOpen}
+                            {onSelect}
+                            {onSelectMonth}
+                            onOpenAlbum={chips ? onOpenAlbum : undefined}
+                        />
+                    {/if}
+                {/snippet}
+            </EndlessList>
+        {/key}
+        {#if continued}
+            {@const month = formatMonthParts(continued.month)}
+            <div class="gallery-continued" aria-hidden="true">
+                <span class="gallery-continued-title stor-serif-title">{month.name} <span>{month.year}</span></span>
+                <span class="gallery-continued-count">{formatPhotoCount(continued.month_photos)}</span>
+            </div>
+        {/if}
+        <GallerySpine
+            months={source.summary.months}
+            first={position ? galleryBlockMonth(position.key) : ''}
+            last={position ? galleryBlockMonth(position.at) : ''}
+            active={scrolling}
+            onJump={scrollToMonth}
+            onLatest={scrollToLatest}
+        />
+    {/if}
+</div>
+
+<style>
+    .gallery-timeline { position: relative; height: 100%; min-height: 0; }
+    .gallery-timeline :global(.gallery-scroller) { scrollbar-width: none; }
+    .gallery-timeline :global(.gallery-scroller::-webkit-scrollbar) { display: none; }
+    .gallery-continued {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 2;
+        display: flex;
+        min-height: 52px;
+        align-items: center;
+        gap: 10px;
+        padding-inline: var(--gallery-inset-start) var(--gallery-inset-end);
+        background: var(--stor-surface);
+        pointer-events: none;
+    }
+    .gallery-continued-title { font-size: 20px; line-height: 1.1; color: var(--stor-ink); }
+    .gallery-continued-title span { font-weight: 400; color: var(--stor-muted-text); }
+    .gallery-continued-count { margin-left: auto; color: var(--stor-muted-text); font-size: 12px; font-variant-numeric: tabular-nums; }
+    @media (min-width: 640px) {
+        .gallery-continued { min-height: 60px; }
+        .gallery-continued-title { font-size: 23px; }
+    }
+</style>

package/src/components/gallery/PhotoThumb.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { GalleryPhoto } from '@hearthlog/sdk/data';
+    import { galleryRendition } from '../../gallery/file-store.js';
+
+    let { photo, tenantId, logId }: { photo: GalleryPhoto; tenantId: string; logId: string } = $props();
+
+    let url = $state('');
+
+    $effect(() => {
+        if (!tenantId || !logId) return;
+        let cancelled = false;
+        let objectUrl = '';
+        void galleryRendition({ tenantId, logId, photoId: photo.id, fileVersionId: photo.file_version_id }, 'thumbnail').then((blob) => {
+            if (cancelled) return;
+            objectUrl = URL.createObjectURL(blob);
+            url = objectUrl;
+        }).catch(() => undefined);
+        return () => {
+            cancelled = true;
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+            url = '';
+        };
+    });
+</script>
+
+{#if url}<img src={url} alt="" draggable="false" class="h-full w-full object-cover" />{/if}

package/src/components/gallery/PhotoTile.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { GalleryPhoto } from '@hearthlog/sdk/data';
+    import { formatTileDay } from '../../gallery/format.js';
+    import GalleryTile from './view/GalleryTile.svelte';
+    import {
+        galleryRendition,
+        galleryUploadState,
+        type GalleryFileScope,
+    } from '../../gallery/file-store.js';
+    import IconImage from '~icons/mdi/image-outline';
+    import IconCloudUpload from '~icons/mdi/cloud-upload-outline';
+    import IconHeart from '~icons/mdi/heart';
+
+    let {
+        photo,
+        tenantId,
+        logId,
+        width,
+        height,
+        onOpen,
+        onSelect,
+        selected = false,
+        selectable = false,
+    }: {
+        photo: GalleryPhoto;
+        tenantId: string;
+        logId: string;
+        /** The tile's size in its row. */
+        width: number;
+        height: number;
+        onOpen: () => void;
+        /** The check in the corner selects the photo, and starts selecting. */
+        onSelect: () => void;
+        selected?: boolean;
+        selectable?: boolean;
+    } = $props();
+
+    let target = $state<HTMLElement>();
+    let visible = $state(false);
+    let url = $state('');
+    let status = $state<'pending' | 'needs_attention' | 'remote' | 'unavailable'>('remote');
+    let transferRevision = $state(0);
+    let offline = $state(false);
+    const scope = $derived<GalleryFileScope>({ tenantId, logId, photoId: photo.id, fileVersionId: photo.file_version_id });
+    const statusId = $derived(`gallery-status-${photo.id}`);
+
+    onMount(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) { visible = true; observer.disconnect(); }
+        }, { rootMargin: '400px' });
+        if (target) observer.observe(target);
+        const transferred = (event: Event) => {
+            if ((event as CustomEvent<string>).detail === photo.id) transferRevision += 1;
+        };
+        // Another device may finish uploading after this tile first asked.
+        const retry = () => {
+            if (status === 'unavailable') transferRevision += 1;
+        };
+        window.addEventListener('stor:gallery-transfer', transferred);
+        window.addEventListener('online', retry);
+        window.addEventListener('focus', retry);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('stor:gallery-transfer', transferred);
+            window.removeEventListener('online', retry);
+            window.removeEventListener('focus', retry);
+        };
+    });
+
+    $effect(() => {
+        if (!visible || !scope.tenantId || !scope.logId) return;
+        void transferRevision;
+        let cancelled = false;
+        let objectUrl = '';
+        void Promise.all([galleryUploadState(scope), galleryRendition(scope, 'thumbnail')]).then(([upload, blob]) => {
+            if (cancelled) return;
+            objectUrl = URL.createObjectURL(blob);
+            url = objectUrl;
+            status = upload?.state ?? 'remote';
+        }).catch(() => {
+            if (!cancelled) {
+                status = 'unavailable';
+                offline = !navigator.onLine;
+            }
+        });
+        return () => {
+            cancelled = true;
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+            url = '';
+        };
+    });
+</script>
+
+<GalleryTile
+    bind:element={target}
+    data-photo-id={photo.id}
+    src={url}
+    alt={photo.caption || photo.filename}
+    label={`${selectable ? 'Select' : 'Open'} ${photo.filename}`}
+    size={{ width, height }}
+    day={formatTileDay(photo.timeline_day)}
+    checkable
+    {selectable}
+    {selected}
+    aria-describedby={status === 'pending' || status === 'needs_attention' || status === 'unavailable' ? statusId : undefined}
+    onOpen={() => onOpen()}
+    {onSelect}
+>
+    {#snippet overlay()}
+        {#if !url && status === 'unavailable'}<span class="gallery-missing"><IconImage /></span>{/if}
+        {#if photo.favorite}<span class="gallery-favorite" aria-hidden="true"><IconHeart /></span>{/if}
+        {#if status === 'pending'}
+            <span id={statusId} title="Saved on this device" class="gallery-badge">
+                <IconCloudUpload /><span class="sr-only">Saved on this device</span><span aria-hidden="true" class="gallery-badge-text">Saved on this device</span>
+            </span>
+        {:else if status === 'needs_attention' || status === 'unavailable'}
+            <span id={statusId} class="gallery-badge">
+                {status === 'needs_attention' ? 'Needs attention' : offline ? 'Available when online' : 'Not uploaded yet'}
+            </span>
+        {/if}
+    {/snippet}
+</GalleryTile>
+
+<style>
+    .gallery-missing { position: absolute; inset: 0; display: grid; place-items: center; color: var(--stor-muted-text); }
+    .gallery-missing :global(svg) { width: 24px; height: 24px; }
+    .gallery-favorite {
+        position: absolute;
+        right: 7px;
+        bottom: 6px;
+        z-index: 1;
+        color: #fff;
+        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
+    }
+    .gallery-favorite :global(svg) { display: block; width: 16px; height: 16px; }
+    .gallery-badge {
+        position: absolute;
+        bottom: 6px;
+        left: 6px;
+        z-index: 1;
+        display: inline-flex;
+        max-width: calc(100% - 12px);
+        height: 24px;
+        align-items: center;
+        gap: 4px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: var(--stor-surface-raised);
+        padding: 0 7px;
+        box-shadow: var(--stor-shadow-sm);
+        color: var(--stor-ink);
+        font-size: 11px;
+        font-weight: 600;
+        white-space: nowrap;
+    }
+    .gallery-badge :global(svg) { width: 16px; height: 16px; flex: none; }
+    .gallery-badge-text { display: none; }
+    @media (hover: hover) {
+        :global(.gallery-tile:hover) .gallery-badge-text { display: inline; }
+    }
+    :global(.gallery-tile:focus-visible) .gallery-badge-text { display: inline; }
+</style>