dtourolle
c175378f38
Add a search scope (all/music/shows/movies) resolved from the entry route and adjustable via filter chips, threaded through the library store's search() into includeItemTypes. Results group by type in a user-configurable order, editable from settings. TRACES: UR-049 | DR-063, DR-064, DR-065; UR-050 | DR-066, DR-067
93 lines
3.0 KiB
Svelte
93 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { library } from "$lib/stores/library";
|
|
import { goto } from "$app/navigation";
|
|
import { page } from "$app/stores";
|
|
import Search from "$lib/components/Search.svelte";
|
|
import SearchResults from "$lib/components/search/SearchResults.svelte";
|
|
import SearchScopeChips from "$lib/components/search/SearchScopeChips.svelte";
|
|
import { resolveSearchScope, type SearchScope } from "$lib/utils/searchScope";
|
|
import type { MediaItem } from "$lib/api/types";
|
|
|
|
let searchQuery = $state("");
|
|
|
|
// Route resolves the *initial* scope only. Deriving it reactively would snap
|
|
// a user who widened to All back to the route's scope on any navigation.
|
|
// TRACES: UR-049 | DR-064
|
|
let scope = $state<SearchScope>(resolveSearchScope($page.url.pathname));
|
|
|
|
async function handleSearch(query: string) {
|
|
if (query.trim()) {
|
|
await library.search(query, scope);
|
|
} else {
|
|
library.clearSearch();
|
|
}
|
|
}
|
|
|
|
// Changing the chip re-runs the current query; changing the query keeps scope.
|
|
async function handleScopeChange(next: SearchScope) {
|
|
scope = next;
|
|
if (searchQuery.trim()) {
|
|
await library.search(searchQuery, next);
|
|
}
|
|
}
|
|
|
|
function handleItemClick(item: MediaItem) {
|
|
switch (item.type) {
|
|
case "Audio":
|
|
// Navigate to album page if available, otherwise detail page
|
|
if (item.albumId) {
|
|
goto(`/library/${item.albumId}`);
|
|
} else {
|
|
goto(`/library/${item.id}`);
|
|
}
|
|
break;
|
|
case "MusicAlbum":
|
|
case "MusicArtist":
|
|
case "Series":
|
|
case "Movie":
|
|
// Navigate to detail page to show metadata and cast
|
|
goto(`/library/${item.id}`);
|
|
break;
|
|
case "Episode":
|
|
// Episodes play directly
|
|
goto(`/player/${item.id}`);
|
|
break;
|
|
default:
|
|
goto(`/library/${item.id}`);
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="max-w-6xl mx-auto">
|
|
<h1 class="text-2xl font-bold mb-6">Search</h1>
|
|
|
|
<!-- Search Input -->
|
|
<div class="mb-6 space-y-3">
|
|
<Search
|
|
bind:value={searchQuery}
|
|
placeholder="Search your library..."
|
|
onSearch={handleSearch}
|
|
/>
|
|
<SearchScopeChips {scope} onChange={handleScopeChange} />
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
{#if searchQuery.trim()}
|
|
<SearchResults
|
|
results={$library.searchResults}
|
|
loading={$library.loadingCount > 0}
|
|
{scope}
|
|
onItemClick={handleItemClick}
|
|
/>
|
|
{:else}
|
|
<div class="text-center text-gray-400 mt-12">
|
|
<svg class="w-16 h-16 mx-auto mb-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</svg>
|
|
<p>Search your entire library</p>
|
|
<p class="text-sm text-gray-500 mt-2">Find music, movies, shows, and more</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|