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,87 @@
|
||||
// What the library overview mosaic is made of, and in what order.
|
||||
//
|
||||
// Pure: takes the libraries, returns the tiles to draw. No DOM, no stores — so
|
||||
// the ordering and the de-duplication rules below are unit-testable rather than
|
||||
// buried in markup.
|
||||
//
|
||||
// Note what is NOT decided here: which favourites category a library belongs to.
|
||||
// That is Jellyfin vocabulary and arrives on the library itself as
|
||||
// `favoritesScope` (Rust: `SearchScope::for_collection_type`). This file only
|
||||
// decides what to *call* it and where to put it.
|
||||
//
|
||||
// TRACES: UR-075, UR-067 | DR-163, DR-164 | UT-162
|
||||
|
||||
import type { Library } from "$lib/api/types";
|
||||
import {
|
||||
FAVORITE_SCOPE_LABELS,
|
||||
asFavoritesScope,
|
||||
favoritesRouteUrl,
|
||||
type FavoritesScope,
|
||||
} from "$lib/utils/favoritesView";
|
||||
|
||||
/** Artwork shapes, as the source images generally arrive. A measured image
|
||||
* overrides these (see MosaicGrid); they are the shape assumed until then. */
|
||||
const SQUARE = 1;
|
||||
const WIDE = 16 / 9;
|
||||
|
||||
export type LibraryMosaicEntry = {
|
||||
/** Stable identity for the layout and for `{#each}` keying. */
|
||||
key: string;
|
||||
/** Assumed width / height until the artwork reports its own. */
|
||||
ratio: number;
|
||||
label: string;
|
||||
} & (
|
||||
| { kind: "library"; library: Library }
|
||||
| { kind: "favorites"; scope: FavoritesScope; href: string }
|
||||
);
|
||||
|
||||
/**
|
||||
* A music library's artwork is a square cover; everything else is a wide
|
||||
* backdrop. Presentation, not taxonomy: this is the shape of a picture, and it
|
||||
* is a starting guess that the decoded image is allowed to overrule.
|
||||
*/
|
||||
export function assumedLibraryRatio(lib: Library): number {
|
||||
return lib.collectionType === "music" ? SQUARE : WIDE;
|
||||
}
|
||||
|
||||
/**
|
||||
* The mosaic's tiles, in order: the cross-library favourites entry first, then
|
||||
* each library followed by its own favourites tile.
|
||||
*
|
||||
* A category's favourites tile appears **once**, after the first library of that
|
||||
* category — two movie libraries ("Films", "Kids") share one favourites list, so
|
||||
* a tile each would be two tiles going to the same place.
|
||||
*/
|
||||
export function buildLibraryMosaic(libraries: Library[]): LibraryMosaicEntry[] {
|
||||
const entries: LibraryMosaicEntry[] = [
|
||||
{
|
||||
key: "favorites:all",
|
||||
kind: "favorites",
|
||||
scope: "all",
|
||||
href: favoritesRouteUrl("all"),
|
||||
ratio: WIDE,
|
||||
label: "Favourites",
|
||||
},
|
||||
];
|
||||
|
||||
const seenScopes = new Set<FavoritesScope>(["all"]);
|
||||
|
||||
for (const lib of libraries) {
|
||||
const ratio = assumedLibraryRatio(lib);
|
||||
entries.push({ key: `library:${lib.id}`, kind: "library", library: lib, ratio, label: lib.name });
|
||||
|
||||
const scope = asFavoritesScope(lib.favoritesScope);
|
||||
if (!scope || seenScopes.has(scope)) continue;
|
||||
seenScopes.add(scope);
|
||||
entries.push({
|
||||
key: `favorites:${scope}`,
|
||||
kind: "favorites",
|
||||
scope,
|
||||
href: favoritesRouteUrl(scope),
|
||||
ratio,
|
||||
label: `Favourite ${FAVORITE_SCOPE_LABELS[scope]}`,
|
||||
});
|
||||
}
|
||||
|
||||
return entries;
|
||||
}
|
||||
Reference in New Issue
Block a user