First working POC
This commit is contained in:
@@ -0,0 +1,195 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import type { Library, MediaItem } from "$lib/api/types";
|
||||
import { library, libraries, libraryItems, isLibraryLoading, currentLibrary, selectedGenres } from "$lib/stores/library";
|
||||
import { isServerReachable } from "$lib/stores/connectivity";
|
||||
import LibraryGrid from "$lib/components/library/LibraryGrid.svelte";
|
||||
import MediaCard from "$lib/components/library/MediaCard.svelte";
|
||||
import GenreFilter from "$lib/components/library/GenreFilter.svelte";
|
||||
|
||||
let searchResults = $derived($library.searchResults);
|
||||
let searchQuery = $derived($library.searchQuery);
|
||||
|
||||
const isMusicLibrary = $derived($currentLibrary?.collectionType === "music");
|
||||
|
||||
// Track if we've done an initial load and previous server state
|
||||
let hasLoadedOnce = false;
|
||||
let previousServerReachable = false;
|
||||
|
||||
onMount(async () => {
|
||||
if ($libraries.length === 0) {
|
||||
await library.loadLibraries();
|
||||
}
|
||||
hasLoadedOnce = true;
|
||||
});
|
||||
|
||||
// Reload when server becomes reachable (handles cache-first timing issue)
|
||||
$effect(() => {
|
||||
const serverReachable = $isServerReachable;
|
||||
|
||||
if (serverReachable && !previousServerReachable && hasLoadedOnce) {
|
||||
// Reload libraries when server becomes available
|
||||
library.loadLibraries();
|
||||
// Also reload current library items if viewing a library
|
||||
if ($currentLibrary) {
|
||||
library.loadItems($currentLibrary.id, {
|
||||
genres: $selectedGenres.length > 0 ? $selectedGenres : undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
previousServerReachable = serverReachable;
|
||||
});
|
||||
|
||||
async function handleLibraryClick(lib: Library) {
|
||||
// Route to dedicated music library page
|
||||
if (lib.collectionType === "music") {
|
||||
library.setCurrentLibrary(lib);
|
||||
goto("/library/music");
|
||||
return;
|
||||
}
|
||||
|
||||
// For other library types, load items normally
|
||||
library.setCurrentLibrary(lib);
|
||||
library.clearGenres();
|
||||
await library.loadItems(lib.id);
|
||||
}
|
||||
|
||||
async function handleGenreFilterChange() {
|
||||
if ($currentLibrary) {
|
||||
await library.loadItems($currentLibrary.id, {
|
||||
genres: $selectedGenres.length > 0 ? $selectedGenres : undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleItemClick(item: MediaItem | Library) {
|
||||
if ("type" in item) {
|
||||
// It's a MediaItem
|
||||
const mediaItem = item as MediaItem;
|
||||
switch (mediaItem.type) {
|
||||
case "Series":
|
||||
case "Movie":
|
||||
case "MusicAlbum":
|
||||
case "MusicArtist":
|
||||
case "Folder":
|
||||
case "CollectionFolder":
|
||||
case "Playlist":
|
||||
case "Channel":
|
||||
case "ChannelFolderItem":
|
||||
// Navigate to detail view
|
||||
goto(`/library/${mediaItem.id}`);
|
||||
break;
|
||||
case "Episode":
|
||||
// Episodes play directly
|
||||
goto(`/player/${mediaItem.id}`);
|
||||
break;
|
||||
default:
|
||||
// For other items, try detail page first
|
||||
goto(`/library/${mediaItem.id}`);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
// It's a Library
|
||||
handleLibraryClick(item as Library);
|
||||
}
|
||||
}
|
||||
|
||||
function goBackToLibraries() {
|
||||
library.setCurrentLibrary(null);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-8">
|
||||
{#if searchQuery}
|
||||
<!-- Search results -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-2xl font-bold text-white">
|
||||
Search results for "{searchQuery}"
|
||||
</h1>
|
||||
<button
|
||||
onclick={() => library.clearSearch()}
|
||||
class="text-sm text-gray-400 hover:text-white"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<LibraryGrid
|
||||
items={searchResults}
|
||||
loading={$isLibraryLoading}
|
||||
onItemClick={handleItemClick}
|
||||
/>
|
||||
</div>
|
||||
{:else if $currentLibrary}
|
||||
<!-- Library content -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
onclick={goBackToLibraries}
|
||||
class="text-gray-400 hover:text-white transition-colors"
|
||||
aria-label="Back to libraries"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="text-2xl font-bold text-white">{$currentLibrary.name}</h1>
|
||||
</div>
|
||||
|
||||
{#if isMusicLibrary}
|
||||
<GenreFilter onFilterChange={handleGenreFilterChange} />
|
||||
{/if}
|
||||
|
||||
<LibraryGrid
|
||||
items={$libraryItems}
|
||||
loading={$isLibraryLoading}
|
||||
onItemClick={handleItemClick}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Libraries overview -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-white">Your Libraries</h1>
|
||||
<button
|
||||
onclick={() => goto('/settings')}
|
||||
class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
|
||||
title="Settings"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if $isLibraryLoading}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{#each Array(6) as _}
|
||||
<div class="animate-pulse">
|
||||
<div class="aspect-video 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 $libraries.length === 0}
|
||||
<div class="text-center py-12 text-gray-400">
|
||||
<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">
|
||||
{#each $libraries as lib (lib.id)}
|
||||
<MediaCard
|
||||
item={lib}
|
||||
size="medium"
|
||||
onclick={() => handleLibraryClick(lib)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user