feat: PhotoPrism M0 bring-up — compose stack, web client, sidecar, migrate
Replace the legacy mule-image backend with PhotoPrism plus a thin SvelteKit client and a Node sidecar for endpoints PhotoPrism doesn't expose (file rename), and add a two-phase migrator (metadata via PUT, heaps → albums) for the existing Postgres library. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
163
web/src/lib/components/preview/PreviewOverlay.svelte
Normal file
163
web/src/lib/components/preview/PreviewOverlay.svelte
Normal file
@@ -0,0 +1,163 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import { createQuery } from '@tanstack/svelte-query';
|
||||
import { getPhoto } from '$lib/services/photoprism';
|
||||
import {
|
||||
closePreview,
|
||||
preview,
|
||||
previewNext,
|
||||
previewPrev
|
||||
} from '$lib/stores/preview.svelte';
|
||||
import { thumbUrl } from '$lib/stores/session.svelte';
|
||||
import { setFocused } from '$lib/stores/selection.svelte';
|
||||
import RightSidebar from '$lib/components/sidebar/RightSidebar.svelte';
|
||||
import { primaryFile, type PpPhoto } from '$lib/types/photoprism';
|
||||
|
||||
const photoQuery = createQuery<PpPhoto>(() => ({
|
||||
queryKey: ['photo', preview.uid ?? ''],
|
||||
queryFn: () => getPhoto(preview.uid as string),
|
||||
enabled: Boolean(preview.uid)
|
||||
}));
|
||||
|
||||
// Track the last visible uid so we can return focus to the matching
|
||||
// timeline tile when the overlay closes — lets the user keep moving
|
||||
// with arrow keys without re-clicking.
|
||||
let lastShown: string | null = null;
|
||||
$effect(() => {
|
||||
if (preview.uid !== null) {
|
||||
lastShown = preview.uid;
|
||||
setFocused(preview.uid);
|
||||
} else if (lastShown) {
|
||||
const target = lastShown;
|
||||
lastShown = null;
|
||||
// Wait for the overlay to unmount before grabbing focus, otherwise
|
||||
// the browser swallows it as the modal element is removed.
|
||||
void tick().then(() => {
|
||||
const tile = document.querySelector<HTMLElement>(`[data-uid="${target}"]`);
|
||||
tile?.focus({ preventScroll: false });
|
||||
tile?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard handling lives at the document level so it works regardless
|
||||
// of focus location. Form fields inside the sidebar still keep their
|
||||
// own arrow-key behaviour because we ignore events whose target is an
|
||||
// input/textarea.
|
||||
$effect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (preview.uid === null) return;
|
||||
const tag = (e.target as HTMLElement | null)?.tagName?.toLowerCase();
|
||||
const inField = tag === 'input' || tag === 'textarea' || tag === 'select';
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
closePreview();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
if (inField) return;
|
||||
e.preventDefault();
|
||||
previewPrev();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
if (inField) return;
|
||||
e.preventDefault();
|
||||
previewNext();
|
||||
break;
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
});
|
||||
|
||||
// Prevent body scroll while the overlay is up.
|
||||
$effect(() => {
|
||||
if (typeof document === 'undefined') return;
|
||||
const prev = document.body.style.overflow;
|
||||
if (preview.uid !== null) document.body.style.overflow = 'hidden';
|
||||
return () => {
|
||||
document.body.style.overflow = prev;
|
||||
};
|
||||
});
|
||||
|
||||
function onBackdrop(e: MouseEvent) {
|
||||
// Clicking the dimmed area (but not the image or sidebar) closes.
|
||||
if (e.target === e.currentTarget) closePreview();
|
||||
}
|
||||
|
||||
const currentIndex = $derived(
|
||||
preview.uid ? preview.order.indexOf(preview.uid) : -1
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if preview.uid !== null}
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex bg-black/80 backdrop-blur-sm"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Photo preview"
|
||||
onclick={onBackdrop}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Escape') closePreview();
|
||||
}}
|
||||
tabindex="-1"
|
||||
>
|
||||
<!-- Left: image area -->
|
||||
<div
|
||||
class="relative flex flex-1 items-center justify-center p-6"
|
||||
onclick={onBackdrop}
|
||||
role="presentation"
|
||||
>
|
||||
<button
|
||||
class="absolute left-4 top-4 z-10 rounded-md bg-background/80 px-2.5 py-1.5 text-xs hover:bg-background"
|
||||
onclick={closePreview}
|
||||
aria-label="Close preview"
|
||||
>
|
||||
✕ Close
|
||||
</button>
|
||||
|
||||
{#if currentIndex > 0}
|
||||
<button
|
||||
class="absolute left-2 z-10 rounded-full bg-background/80 px-3 py-2 text-lg hover:bg-background"
|
||||
onclick={previewPrev}
|
||||
aria-label="Previous photo"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
{/if}
|
||||
{#if currentIndex >= 0 && currentIndex < preview.order.length - 1}
|
||||
<button
|
||||
class="absolute right-2 z-10 rounded-full bg-background/80 px-3 py-2 text-lg hover:bg-background"
|
||||
onclick={previewNext}
|
||||
aria-label="Next photo"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if photoQuery.isPending}
|
||||
<p class="text-sm text-white/80">Loading…</p>
|
||||
{:else if photoQuery.isError}
|
||||
<p class="text-sm text-red-300">Failed to load photo.</p>
|
||||
{:else if photoQuery.data}
|
||||
{@const pf = primaryFile(photoQuery.data)}
|
||||
<img
|
||||
src={thumbUrl(pf.Hash, 'fit_1920')}
|
||||
alt={photoQuery.data.OriginalName ?? pf.Name ?? 'Photo'}
|
||||
class="max-h-full max-w-full rounded-md object-contain shadow-2xl"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right: metadata sidebar -->
|
||||
<aside
|
||||
class="w-[360px] shrink-0 overflow-y-auto border-l border-border bg-background p-4"
|
||||
>
|
||||
{#if photoQuery.data}
|
||||
<RightSidebar photo={photoQuery.data} />
|
||||
{:else}
|
||||
<p class="text-sm text-muted-foreground">Loading metadata…</p>
|
||||
{/if}
|
||||
</aside>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user