dtourolle/jellytau
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases 39 Wiki Activity

feat(library,home): lay libraries out as a mosaic, with favourites per category

Browse Source 
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:
dtourolle
2026-08-15 23:57:09 +02:00
parent d49d027020
commit 0861523015
18 changed files with 6111 additions and 4303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/library/+page.svelte
+48 -38
View File
@@ -6,8 +6,10 @@
import { isServerReachable } from "$lib/stores/connectivity";
import type { useScrollGuard } from "$lib/composables/useScrollGuard";
import LibraryGrid from "$lib/components/library/LibraryGrid.svelte";
import MediaCard from "$lib/components/library/MediaCard.svelte";
import GenreFilter from "$lib/components/library/GenreFilter.svelte";
import MosaicGrid from "$lib/components/library/MosaicGrid.svelte";
import MosaicTile from "$lib/components/library/MosaicTile.svelte";
import { buildLibraryMosaic } from "$lib/components/library/libraryMosaic";
// Scroll guard from layout - prevents accidental taps during scrolling (Android)
const scrollGuard = getContext<ReturnType<typeof useScrollGuard>>("scrollGuard");
@@ -40,6 +42,12 @@
return $libraries.filter(lib => lib.collectionType !== "playlists");
});
// The overview is a mosaic: rows of one height, tiles of their own widths, so
// a square music cover sits beside a wide backdrop without either being
// cropped to the other's shape. Each category also gets a favourites tile of
// its own, beside the library it belongs to. TRACES: UR-075 | DR-163, DR-164
const mosaicEntries = $derived(buildLibraryMosaic(visibleLibraries));
// Track if we've done an initial load and previous server state
let hasLoadedOnce = false;
let previousServerReachable = false;
@@ -242,44 +250,46 @@
<p>No libraries found</p>
</div>
{:else}
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<!-- Favourites as a destination in its own right, not just the icon in
the header above. It cuts across every library, so it leads the
grid rather than sitting inside one — and a labelled tile at the
same weight as a library is the difference between a feature
people find and one they don't. ux-flows §5C.2.
TRACES: UR-067 | DR-117 -->
<button
onclick={() => goto('/library/favorites')}
class="group/card flex flex-col text-left transition-transform duration-200 hover:scale-105"
>
<div
class="relative aspect-video w-full overflow-hidden rounded-lg shadow-md
flex items-center justify-center
bg-gradient-to-br from-[var(--color-jellyfin)]/30 to-[var(--color-jellyfin)]/5"
>
<svg
class="w-10 h-10 text-[var(--color-jellyfin)]"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
<!-- Favourites are destinations in their own right, not just the icon in
the header above. The cross-library entry leads the mosaic and each
category's own favourites sits beside its library — a labelled tile
at the same weight as a library is the difference between a feature
people find and one they don't. ux-flows §5C.2.
TRACES: UR-067, UR-075 | DR-117, DR-163 -->
<MosaicGrid items={mosaicEntries} gap={8}>
{#snippet tile(entry)}
{#if entry.kind === "favorites"}
<MosaicTile
label={entry.label}
width={entry.width}
height={entry.height}
accent
onclick={() => goto(entry.href)}
>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
</div>
<p class="mt-2 truncate text-sm font-medium text-white group-hover/card:text-[var(--color-jellyfin)] transition-colors">
Favourites
</p>
</button>
{#each visibleLibraries as lib (lib.id)}
<MediaCard
item={lib}
size="medium"
onclick={() => handleLibraryClick(lib)}
/>
{/each}
</div>
{#snippet icon()}
<svg
class="w-10 h-10 text-[var(--color-jellyfin)]"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
{/snippet}
</MosaicTile>
{:else}
<MosaicTile
label={entry.label}
width={entry.width}
height={entry.height}
itemId={entry.library.id}
imageTag={entry.library.imageTag}
onRatio={entry.reportRatio}
onclick={() => handleLibraryClick(entry.library)}
/>
{/if}
{/snippet}
</MosaicGrid>
{/if}
</div>
{/if}