46 lines
1.4 KiB
Svelte
46 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
|
|
import CreatePlaylistModal from "$lib/components/playlist/CreatePlaylistModal.svelte";
|
|
|
|
/**
|
|
* Playlist browser
|
|
* @req: UR-007 - Navigate media in library
|
|
* @req: UR-008 - Search media across libraries
|
|
* @req: DR-007 - Library browsing screens
|
|
* @req: UR-014 - Make and edit playlists
|
|
*/
|
|
|
|
let showCreateModal = $state(false);
|
|
|
|
const config = {
|
|
itemType: "Playlist" as const,
|
|
title: "Playlists",
|
|
backPath: "/library/music",
|
|
searchPlaceholder: "Search playlists...",
|
|
sortOptions: [], // No sorting for playlists
|
|
defaultSort: "",
|
|
displayComponent: "grid" as const,
|
|
searchFields: ["name"],
|
|
};
|
|
</script>
|
|
|
|
<div class="relative">
|
|
<!-- Floating create button -->
|
|
<button
|
|
onclick={() => showCreateModal = true}
|
|
class="fixed bottom-20 right-4 z-40 w-14 h-14 bg-[var(--color-jellyfin)] hover:bg-[var(--color-jellyfin-dark)] rounded-full shadow-lg flex items-center justify-center transition-colors"
|
|
aria-label="Create playlist"
|
|
>
|
|
<svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<GenericMediaListPage {config} />
|
|
</div>
|
|
|
|
<CreatePlaylistModal
|
|
isOpen={showCreateModal}
|
|
onClose={() => showCreateModal = false}
|
|
/>
|