feat(library,home): lay libraries out as a mosaic, with favourites per category
The library overview and the home shortcut strip showed artwork of three different shapes — square music covers, 16:9 library backdrops, 2:3 posters — in grids that pick one box and crop everything to it. The home strip said so in a comment: it forced `aspect="video"` on music libraries so the row would line up, which lined it up by cutting the covers down. Both surfaces are now justified mosaics: rows share one height and each tile is as wide as its own artwork. `layoutMosaic` is a pure module — it packs tiles until the height needed to fill the container drops to the target, justifies the row by absorbing the rounding remainder into its widest tile, and deliberately leaves the last row unstretched so one leftover tile does not inflate into a banner. The component supplies only what the DOM knows: the measured container width, and the artwork's *decoded* aspect ratio (via a new `onNaturalSize` on CachedImage), committed in one debounced batch so the grid does not reshuffle once per image as artwork lands. Favourites gain a tile per category beside the library it belongs to, alongside the existing cross-library entry. Which collection type maps to which category is Jellyfin vocabulary, so it is derived in Rust — `SearchScope::for_collection_type`, stamped onto every `Library` by a new constructor and carried over as an optional `favoritesScope`. Deriving it in Svelte would have rebuilt the exact leak `SearchScope::item_types` was extracted to close. A category shows one tile however many libraries share it, and a library kind favourites do not carve up (Live TV, channels, books) gets none. Also corrects the requirements-count test, which the UR-074 commit left one behind. Spec: docs/specs/library-mosaic.md TRACES: UR-075, UR-067 | DR-163, DR-164 | UT-158..UT-162
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<!--
|
||||
Justified mosaic of tiles: rows of a shared height, each tile as wide as its
|
||||
own aspect ratio says it should be.
|
||||
|
||||
The geometry is `mosaic.ts` (pure, unit-tested); this component supplies the
|
||||
two things only the DOM knows — how wide the container is, and what shape the
|
||||
artwork turned out to be — and renders whatever the caller's `tile` snippet
|
||||
draws.
|
||||
|
||||
Measured ratios are committed in one batch rather than per image: artwork
|
||||
arrives over a few hundred milliseconds, and re-packing on each arrival would
|
||||
shuffle the grid under the viewer's cursor several times over.
|
||||
|
||||
TRACES: UR-075 | DR-163
|
||||
-->
|
||||
<script lang="ts" generics="T extends { key: string; ratio: number }">
|
||||
import type { Snippet } from "svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
import {
|
||||
layoutMosaic,
|
||||
layoutMosaicStrip,
|
||||
mosaicTargetHeight,
|
||||
type MosaicTile,
|
||||
} from "./mosaic";
|
||||
|
||||
interface Props {
|
||||
items: T[];
|
||||
/** Row height. Defaults to one suited to the container's width. */
|
||||
targetHeight?: number;
|
||||
gap?: number;
|
||||
/**
|
||||
* "rows" wraps into justified rows and fills the container.
|
||||
* "strip" keeps one row at a fixed height and scrolls sideways — the same
|
||||
* no-distortion rule applied to a shelf.
|
||||
*/
|
||||
layout?: "rows" | "strip";
|
||||
tile: Snippet<[MosaicTile<T> & { reportRatio: (ratio: number) => void }]>;
|
||||
}
|
||||
|
||||
let { items, targetHeight, gap = 8, layout = "rows", tile }: Props = $props();
|
||||
|
||||
let containerWidth = $state(0);
|
||||
let measured = $state<Record<string, number>>({});
|
||||
|
||||
let pending: Record<string, number> = {};
|
||||
let commitTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const COMMIT_DELAY_MS = 120;
|
||||
/** Below this, a measured ratio isn't worth a re-pack. */
|
||||
const RATIO_EPSILON = 0.02;
|
||||
|
||||
function reportRatio(key: string, ratio: number) {
|
||||
if (!Number.isFinite(ratio) || ratio <= 0) return;
|
||||
const known = measured[key] ?? items.find((i) => i.key === key)?.ratio;
|
||||
if (known !== undefined && Math.abs(known - ratio) / known < RATIO_EPSILON) return;
|
||||
|
||||
pending[key] = ratio;
|
||||
if (commitTimer !== null) return;
|
||||
commitTimer = setTimeout(() => {
|
||||
commitTimer = null;
|
||||
measured = { ...measured, ...pending };
|
||||
pending = {};
|
||||
}, COMMIT_DELAY_MS);
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
if (commitTimer !== null) clearTimeout(commitTimer);
|
||||
});
|
||||
|
||||
const height = $derived(targetHeight ?? mosaicTargetHeight(containerWidth));
|
||||
const sized = $derived(items.map((item) => ({ ...item, ratio: measured[item.key] ?? item.ratio })));
|
||||
const rows = $derived(
|
||||
layout === "strip"
|
||||
? [{ height, tiles: layoutMosaicStrip(sized, height) }]
|
||||
: layoutMosaic(sized, { containerWidth, targetHeight: height, gap }),
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if layout === "strip"}
|
||||
<!-- A strip is measured by the viewport it scrolls in, not by its content. -->
|
||||
<div bind:clientWidth={containerWidth} class="overflow-x-auto pb-2">
|
||||
<div class="flex w-max items-start" style="gap: {gap}px;">
|
||||
{#each rows[0].tiles as placed (placed.key)}
|
||||
{@render tile({ ...placed, reportRatio: (r: number) => reportRatio(placed.key, r) })}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div bind:clientWidth={containerWidth} class="flex flex-col" style="gap: {gap}px;">
|
||||
{#each rows as row, i (i)}
|
||||
<div class="flex" style="gap: {gap}px;">
|
||||
{#each row.tiles as placed (placed.key)}
|
||||
{@render tile({ ...placed, reportRatio: (r: number) => reportRatio(placed.key, r) })}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user