feat(diashow): live slideshow with two-queue policy + pluggable transitions
A fullscreen auto-advancing slideshow any user can start. Design:
docs/CONCEPT_DIASHOW.md.
- lib/diashow/queue.ts: SlideQueue state machine — liveQueue drains first
(FIFO, seeded by SSE upload-processed), then shuffleQueue (refilled
from allKnown minus a 5-id ring buffer of recently shown). Pure logic,
unit-testable.
- lib/diashow/wakelock.ts: Screen Wake Lock wrapper that re-acquires on
visibility change (the OS drops the lock when the tab hides).
- lib/diashow/transitions/{index,crossfade,kenburns}.ts: registry +
the v1 transitions. Adding a new animation is one file + one entry —
the extensibility target from docs/FEATURES §2.9.
- routes/diashow/+page.svelte: fullscreen page, hides bottom nav,
6 s default dwell (3/6/10 configurable), keyboard shortcuts
(Escape exits, Space toggles pause), tap-to-reveal overlay with
pause / dwell / transition / exit. Respects $dataMode to choose
preview vs. original URL.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
38
frontend/src/lib/diashow/transitions/crossfade.svelte
Normal file
38
frontend/src/lib/diashow/transitions/crossfade.svelte
Normal file
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
// Simplest transition: render whatever the parent gave us, full-bleed, with a CSS
|
||||
// opacity fade. Tied to the parent's `{#key}` block — when the src changes, the
|
||||
// parent re-mounts this component and the `in:` transition runs.
|
||||
|
||||
interface Props {
|
||||
src: string;
|
||||
isVideo: boolean;
|
||||
durationMs: number;
|
||||
}
|
||||
|
||||
let { src, isVideo, durationMs }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center bg-black"
|
||||
style="animation: crossfade-in {durationMs}ms ease-out forwards;"
|
||||
>
|
||||
{#if isVideo}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video
|
||||
{src}
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
class="h-full w-full object-contain"
|
||||
></video>
|
||||
{:else}
|
||||
<img {src} alt="" class="h-full w-full object-contain" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes crossfade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user