First working POC
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
<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);
|
||||
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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 = config.itemDisplayMode === "poster" ? "aspect-[2/3]" : "aspect-square";
|
||||
const gridColsClass =
|
||||
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 = config.searchPlaceholder || `Search ${config.title.toLowerCase()}...`;
|
||||
const noItemsMessage = 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}
|
||||
<img
|
||||
src={auth.getRepository().getImageUrl(item.id, "Primary", {
|
||||
maxWidth: 300,
|
||||
tag: item.primaryImageTag,
|
||||
})}
|
||||
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>
|
||||
Reference in New Issue
Block a user