Duncan Tourolle
17a35573a0
Library screens:
- Add dedicated music, TV, and movie landing pages (hero banner +
horizontal carousels) backed by new music/tv/movies stores.
- Route tvshows libraries to /library/tv; surface rediscover ("haven't
listened to in a while") albums via a new repository method across
online/offline/hybrid repos plus the repository_get_rediscover_albums
command.
- Add an A-Z jump bar for long alphabetically-sorted lists, with grid
index anchors in LibraryGrid/LibraryListView/TrackList.
- Filter the "Podcasts" folder out of music library queries.
Downloads:
- Add a backend queue pump: enqueue_download / enqueue_video_downloads
persist the resolved stream URL + target dir on each row (migration
017), and the pump starts up to max_concurrent and drains the rest
automatically as slots free, instead of the frontend silently dropping
items past the concurrency limit. Album/series/season buttons now
enqueue rather than calling start_download directly.
Other fixes:
- Hybrid search now returns instant cache results and pushes the merged
cache+server union via a request-id-tagged search-event, so superseded
queries can't clobber fresher results.
- URL-encode SearchTerm / genres / item types in online repo requests.
- Android: pause on audio-becoming-noisy (headphone/BT disconnect).
84 lines
2.9 KiB
Svelte
84 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import type { MediaItem, Library } from "$lib/api/types";
|
|
import MediaCard from "./MediaCard.svelte";
|
|
import LibraryListView from "./LibraryListView.svelte";
|
|
import { library, viewMode } from "$lib/stores/library";
|
|
|
|
interface Props {
|
|
items: (MediaItem | Library)[];
|
|
title?: string;
|
|
loading?: boolean;
|
|
showViewToggle?: boolean;
|
|
forceGrid?: boolean;
|
|
musicContent?: boolean;
|
|
onItemClick?: (item: MediaItem | Library) => void;
|
|
}
|
|
|
|
let { items, title, loading = false, showViewToggle = true, forceGrid = false, musicContent = false, onItemClick }: Props = $props();
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
{#if title}
|
|
<h2 class="text-xl font-semibold text-white">{title}</h2>
|
|
{:else}
|
|
<div></div>
|
|
{/if}
|
|
|
|
{#if showViewToggle && items.length > 0}
|
|
<div class="flex gap-1">
|
|
<button
|
|
onclick={() => library.setViewMode("grid")}
|
|
class="p-2 rounded transition-colors {$viewMode === 'grid' ? 'bg-[var(--color-jellyfin)] text-white' : 'text-gray-400 hover:bg-white/10 hover:text-white'}"
|
|
aria-label="Grid view"
|
|
title="Grid view"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onclick={() => library.setViewMode("list")}
|
|
class="p-2 rounded transition-colors {$viewMode === 'list' ? 'bg-[var(--color-jellyfin)] text-white' : 'text-gray-400 hover:bg-white/10 hover:text-white'}"
|
|
aria-label="List view"
|
|
title="List view"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if loading}
|
|
<div class="flex gap-4 overflow-hidden">
|
|
{#each Array(6) as _}
|
|
<div class="w-36 flex-shrink-0 animate-pulse">
|
|
<div class="{musicContent ? 'aspect-square' : 'aspect-[2/3]'} bg-[var(--color-surface)] rounded-lg"></div>
|
|
<div class="mt-2 h-4 bg-[var(--color-surface)] rounded w-3/4"></div>
|
|
<div class="mt-1 h-3 bg-[var(--color-surface)] rounded w-1/2"></div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else if items.length === 0}
|
|
<div class="text-center py-12 text-gray-400">
|
|
<p>No items found</p>
|
|
</div>
|
|
{:else if !forceGrid && $viewMode === "list"}
|
|
<LibraryListView {items} showProgress={true} onItemClick={onItemClick} />
|
|
{:else}
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
|
{#each items as item, index (item.id)}
|
|
<div data-grid-index={index}>
|
|
<MediaCard
|
|
{item}
|
|
showProgress={true}
|
|
onclick={() => onItemClick?.(item)}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|