mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-22 08:45:44 +02:00
92 lines
3.3 KiB
Svelte
92 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import * as Card from '$lib/components/ui/card/index.js';
|
|
import { Separator } from '$lib/components/ui/separator/index.js';
|
|
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
|
|
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
|
|
import { getFullyQualifiedMediaName } from '$lib/utils';
|
|
import MediaPicture from '$lib/components/media-picture.svelte';
|
|
import { resolve } from '$app/paths';
|
|
import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
|
|
import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
|
|
import type { components } from '$lib/api/api';
|
|
import { getContext } from 'svelte';
|
|
import type { PageProps } from './$types';
|
|
import LoadingBar from '$lib/components/loading-bar.svelte';
|
|
|
|
let { data }: PageProps = $props();
|
|
let importableShows: () => components['schemas']['MediaImportSuggestion'][] =
|
|
getContext('importableShows');
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>TV Shows - MediaManager</title>
|
|
<meta content="Browse and manage your TV show collection in MediaManager" name="description" />
|
|
</svelte:head>
|
|
|
|
<header class="flex h-16 shrink-0 items-center gap-2">
|
|
<div class="flex items-center gap-2 px-4">
|
|
<Sidebar.Trigger class="-ml-1" />
|
|
<Separator class="mr-2 h-4" orientation="vertical" />
|
|
<Breadcrumb.Root>
|
|
<Breadcrumb.List>
|
|
<Breadcrumb.Item class="hidden md:block">
|
|
<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
|
|
</Breadcrumb.Item>
|
|
<Breadcrumb.Separator class="hidden md:block" />
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
|
|
</Breadcrumb.Item>
|
|
<Breadcrumb.Separator class="hidden md:block" />
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Page>Shows</Breadcrumb.Page>
|
|
</Breadcrumb.Item>
|
|
</Breadcrumb.List>
|
|
</Breadcrumb.Root>
|
|
</div>
|
|
</header>
|
|
<main class="flex w-full flex-col gap-4 p-4 pt-0">
|
|
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
|
|
TV Shows
|
|
</h1>
|
|
{#if importableShows().length > 0}
|
|
<div
|
|
class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
|
|
>
|
|
{#each importableShows() as importable (importable.directory)}
|
|
<DetectedMediaCard isTv={true} directory={importable.directory}>
|
|
<ImportCandidatesDialog
|
|
isTv={true}
|
|
name={importable.directory}
|
|
candidates={importable.candidates}
|
|
>
|
|
Import TV show
|
|
</ImportCandidatesDialog>
|
|
</DetectedMediaCard>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{#await data.tvShows}
|
|
<LoadingBar />
|
|
{:then tvShows}
|
|
<div
|
|
class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
|
|
>
|
|
{#each tvShows as show (show.id)}
|
|
<a href={resolve('/dashboard/tv/[showId]', { showId: show.id! })}>
|
|
<Card.Root class="col-span-full max-w-[90vw] ">
|
|
<Card.Header>
|
|
<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
|
|
<Card.Description class="truncate">{show.overview}</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<MediaPicture media={show} />
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</a>
|
|
{:else}
|
|
<div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
|
|
{/each}
|
|
</div>
|
|
{/await}
|
|
</main>
|