280 lines
9.3 KiB
Svelte
280 lines
9.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { goto } from "$app/navigation";
|
|
import { currentLibrary } from "$lib/stores/library";
|
|
import { auth } from "$lib/stores/auth";
|
|
import SearchBar from "$lib/components/common/SearchBar.svelte";
|
|
import BackButton from "$lib/components/common/BackButton.svelte";
|
|
import ResultsCounter from "$lib/components/common/ResultsCounter.svelte";
|
|
import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
|
|
import type { Genre, MediaItem } from "$lib/api/types";
|
|
|
|
/**
|
|
* Generic genre browser supporting Movies, Music Albums, and TV Series
|
|
* Consolidates duplicate genre-browsing logic across media types
|
|
*
|
|
* @req: UR-007 - Navigate media in library
|
|
* @req: UR-030 - Quick genre browsing and filtering
|
|
* @req: DR-007 - Library browsing screens (genre filtering)
|
|
*/
|
|
|
|
export interface GenreConfig {
|
|
itemTypes: string[]; // ["Movie"] or ["MusicAlbum"] or ["Series"]
|
|
title: string; // "Movie Genres" or "Genres" or "TV Genres"
|
|
backPath: string; // "/library" or "/library/music"
|
|
genreIcon: string; // SVG path for genre icon
|
|
itemDisplayMode: "poster" | "square"; // Aspect ratio: 2/3 or 1/1
|
|
searchPlaceholder?: string; // Optional custom placeholder
|
|
noItemsMessage?: string; // Optional custom empty state
|
|
}
|
|
|
|
interface Props {
|
|
config: GenreConfig;
|
|
}
|
|
|
|
let { config }: Props = $props();
|
|
|
|
let genres = $state<Genre[]>([]);
|
|
let filteredGenres = $state<Genre[]>([]);
|
|
let loading = $state(true);
|
|
let searchQuery = $state("");
|
|
let selectedGenre = $state<Genre | null>(null);
|
|
let genreItems = $state<MediaItem[]>([]);
|
|
let loadingItems = $state(false);
|
|
let genreItemImageUrls = $state<Map<string, string>>(new Map());
|
|
|
|
const { markLoaded } = useServerReachabilityReload(async () => {
|
|
await loadGenres();
|
|
if (selectedGenre) {
|
|
await loadGenreItems(selectedGenre);
|
|
}
|
|
});
|
|
|
|
onMount(async () => {
|
|
await loadGenres();
|
|
markLoaded();
|
|
});
|
|
|
|
async function loadGenres() {
|
|
if (!$currentLibrary) {
|
|
goto(config.backPath);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
loading = true;
|
|
const repo = auth.getRepository();
|
|
const result = await repo.getGenres($currentLibrary.id);
|
|
genres = result.sort((a, b) => a.name.localeCompare(b.name));
|
|
applyFilter();
|
|
} catch (e) {
|
|
console.error("Failed to load genres:", e);
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
async function loadGenreItems(genre: Genre) {
|
|
if (!$currentLibrary) return;
|
|
|
|
try {
|
|
loadingItems = true;
|
|
selectedGenre = genre;
|
|
genreItemImageUrls = new Map(); // Clear image URLs when loading new genre
|
|
const repo = auth.getRepository();
|
|
const result = await repo.getItems($currentLibrary.id, {
|
|
includeItemTypes: config.itemTypes,
|
|
genres: [genre.name],
|
|
sortBy: "SortName",
|
|
sortOrder: "Ascending",
|
|
recursive: true,
|
|
limit: 10000,
|
|
});
|
|
genreItems = result.items;
|
|
} catch (e) {
|
|
console.error("Failed to load genre items:", e);
|
|
} finally {
|
|
loadingItems = false;
|
|
}
|
|
}
|
|
|
|
// Load image URL for a single item
|
|
async function loadGenreItemImage(item: MediaItem): Promise<void> {
|
|
if (!item.primaryImageTag || genreItemImageUrls.has(item.id)) return;
|
|
|
|
try {
|
|
const repo = auth.getRepository();
|
|
const url = await repo.getImageUrl(item.id, "Primary", {
|
|
maxWidth: 300,
|
|
tag: item.primaryImageTag,
|
|
});
|
|
genreItemImageUrls.set(item.id, url);
|
|
} catch {
|
|
genreItemImageUrls.set(item.id, "");
|
|
}
|
|
}
|
|
|
|
// Load image URLs for all genre items
|
|
$effect(() => {
|
|
genreItems.forEach((item) => {
|
|
if (item.primaryImageTag && !genreItemImageUrls.has(item.id)) {
|
|
loadGenreItemImage(item);
|
|
}
|
|
});
|
|
});
|
|
|
|
function applyFilter() {
|
|
let result = [...genres];
|
|
|
|
if (searchQuery.trim()) {
|
|
const query = searchQuery.toLowerCase();
|
|
result = result.filter((genre) => genre.name.toLowerCase().includes(query));
|
|
}
|
|
|
|
filteredGenres = result;
|
|
}
|
|
|
|
function handleSearch(query: string) {
|
|
searchQuery = query;
|
|
applyFilter();
|
|
}
|
|
|
|
function handleGenreClick(genre: Genre) {
|
|
loadGenreItems(genre);
|
|
}
|
|
|
|
function handleItemClick(item: MediaItem) {
|
|
goto(`/library/${item.id}`);
|
|
}
|
|
|
|
function goBack() {
|
|
if (selectedGenre) {
|
|
selectedGenre = null;
|
|
genreItems = [];
|
|
} else {
|
|
goto(config.backPath);
|
|
}
|
|
}
|
|
|
|
const aspectRatioClass = $derived(config.itemDisplayMode === "poster" ? "aspect-[2/3]" : "aspect-square");
|
|
const gridColsClass = $derived(
|
|
config.itemDisplayMode === "poster"
|
|
? "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
|
|
: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
|
);
|
|
const searchPlaceholder = $derived(config.searchPlaceholder || `Search ${config.title.toLowerCase()}...`);
|
|
const noItemsMessage = $derived(config.noItemsMessage || `No ${config.itemTypes[0]?.toLowerCase() || "items"} found in this genre`);
|
|
</script>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-4">
|
|
<BackButton onClick={goBack} label="Back" />
|
|
<h1 class="text-3xl font-bold text-white">
|
|
{#if selectedGenre}
|
|
{selectedGenre.name}
|
|
{:else}
|
|
{config.title}
|
|
{/if}
|
|
</h1>
|
|
</div>
|
|
|
|
{#if !selectedGenre}
|
|
<!-- Genre Browser -->
|
|
<SearchBar value={searchQuery} placeholder={searchPlaceholder} onInput={handleSearch} />
|
|
|
|
{#if !loading && filteredGenres.length > 0}
|
|
<ResultsCounter count={filteredGenres.length} itemType="genre" searchQuery={searchQuery} />
|
|
{/if}
|
|
|
|
<!-- Genres Grid -->
|
|
{#if loading}
|
|
<div class="grid {gridColsClass} gap-4">
|
|
{#each Array(12) as _}
|
|
<div class="animate-pulse">
|
|
<div class="aspect-square bg-[var(--color-surface)] rounded-lg"></div>
|
|
<div class="mt-2 h-4 bg-[var(--color-surface)] rounded w-3/4"></div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else if filteredGenres.length === 0}
|
|
<div class="text-center py-12 text-gray-400">
|
|
<p>No genres found</p>
|
|
</div>
|
|
{:else}
|
|
<div class="grid {gridColsClass} gap-4">
|
|
{#each filteredGenres as genre (genre.id)}
|
|
<button onclick={() => handleGenreClick(genre)} class="group text-left">
|
|
<div
|
|
class="aspect-square bg-gradient-to-br from-[var(--color-jellyfin)]/20 to-[var(--color-jellyfin)]/5 rounded-lg flex items-center justify-center group-hover:from-[var(--color-jellyfin)]/30 group-hover:to-[var(--color-jellyfin)]/10 transition-all"
|
|
>
|
|
<svg
|
|
class="w-12 h-12 text-[var(--color-jellyfin)] opacity-70 group-hover:opacity-100 transition-opacity"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
{@html config.genreIcon}
|
|
</svg>
|
|
</div>
|
|
<p class="mt-2 text-sm font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
|
|
{genre.name}
|
|
</p>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<!-- Genre Items View -->
|
|
{#if loadingItems}
|
|
<div class="grid {gridColsClass} gap-4">
|
|
{#each Array(10) as _}
|
|
<div class="animate-pulse">
|
|
<div class="{aspectRatioClass} bg-[var(--color-surface)] rounded-lg"></div>
|
|
<div class="mt-2 h-4 bg-[var(--color-surface)] rounded w-3/4"></div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else if genreItems.length === 0}
|
|
<div class="text-center py-12 text-gray-400">
|
|
<p>{noItemsMessage}</p>
|
|
</div>
|
|
{:else}
|
|
<div>
|
|
<ResultsCounter count={genreItems.length} itemType={config.itemTypes[0]?.toLowerCase() || "item"} />
|
|
<div class="grid {gridColsClass} gap-4 mt-4">
|
|
{#each genreItems as item (item.id)}
|
|
<button onclick={() => handleItemClick(item)} class="group text-left">
|
|
<div class="{aspectRatioClass} bg-[var(--color-surface)] rounded-lg overflow-hidden mb-2">
|
|
{#if item.primaryImageTag && genreItemImageUrls.get(item.id)}
|
|
<img
|
|
src={genreItemImageUrls.get(item.id)}
|
|
alt={item.name}
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform"
|
|
/>
|
|
{:else}
|
|
<div class="w-full h-full flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" />
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<p class="font-medium text-white truncate group-hover:text-[var(--color-jellyfin)] transition-colors">
|
|
{item.name}
|
|
</p>
|
|
{#if item.productionYear}
|
|
<p class="text-sm text-gray-400">
|
|
{item.productionYear}
|
|
{#if item.communityRating}
|
|
<span class="text-yellow-500 ml-1">★ {item.communityRating.toFixed(1)}</span>
|
|
{/if}
|
|
</p>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|