mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-26 18:55:44 +02:00
make tv and movie page use cards
This commit is contained in:
maxDorninger
@@ -12,12 +12,8 @@
|
||||
import DownloadMovieDialog from '$lib/components/download-movie-dialog.svelte';
|
||||
import RequestMovieDialog from '$lib/components/request-movie-dialog.svelte';
|
||||
import LibraryCombobox from '$lib/components/library-combobox.svelte';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { base } from '$app/paths';
|
||||
import { Switch } from '$lib/components/ui/switch/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import RequestSeasonDialog from "$lib/components/request-season-dialog.svelte";
|
||||
import DownloadSeasonDialog from "$lib/components/download-season-dialog.svelte";
|
||||
|
||||
let movie: PublicMovie = page.data.movie;
|
||||
let user: () => User = getContext('user');
|
||||
@@ -74,29 +70,36 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
{movie.overview}
|
||||
</p>
|
||||
<div class="h-full w-full flex-auto rounded-xl md:w-1/4">
|
||||
<Card.Root class="h-full w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Overview</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
{movie.overview}
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-full flex-auto flex-col items-center justify-start gap-2 rounded-xl bg-muted/50 p-4 md:w-1/3 md:max-w-[40em]"
|
||||
class="flex h-full w-full flex-auto flex-col items-center justify-start gap-4 rounded-xl md:w-1/3 md:max-w-[40em]"
|
||||
>
|
||||
{#if user().is_superuser}
|
||||
<Card.Root class="w-full">
|
||||
<Card.Root class="w-full flex-1">
|
||||
<Card.Header>
|
||||
<Card.Title>Administrator Controls</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col gap-4 items-center">
|
||||
<Card.Content class="flex flex-col items-center gap-4">
|
||||
<LibraryCombobox media={movie} mediaType="movie" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
<Card.Root class="w-full">
|
||||
<Card.Root class="w-full flex-1">
|
||||
<Card.Header>
|
||||
<Card.Title>Download Options</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col gap-4 items-center">
|
||||
<Card.Content class="flex flex-col items-center gap-4">
|
||||
{#if user().is_superuser}
|
||||
<DownloadMovieDialog {movie} />
|
||||
{/if}
|
||||
@@ -105,9 +108,15 @@
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<TorrentTable isShow={false} torrents={movie.torrents} />
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl">
|
||||
<Card.Root class="h-full w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Torrent Information</Card.Title>
|
||||
<Card.Description>A list of all torrents associated with this movie.</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col gap-4">
|
||||
<TorrentTable isShow={false} torrents={movie.torrents} />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,194 +1,215 @@
|
||||
<script lang="ts">
|
||||
import {env} from '$env/dynamic/public';
|
||||
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 {goto} from '$app/navigation';
|
||||
import {ImageOff} from 'lucide-svelte';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
import {getContext, onMount} from 'svelte';
|
||||
import type {PublicShow, RichShowTorrent, User} from '$lib/types.js';
|
||||
import {getFullyQualifiedMediaName} from '$lib/utils';
|
||||
import DownloadSeasonDialog from '$lib/components/download-season-dialog.svelte';
|
||||
import CheckmarkX from '$lib/components/checkmark-x.svelte';
|
||||
import {page} from '$app/state';
|
||||
import TorrentTable from '$lib/components/torrent-table.svelte';
|
||||
import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
|
||||
import MediaPicture from '$lib/components/media-picture.svelte';
|
||||
import {Checkbox} from '$lib/components/ui/checkbox/index.js';
|
||||
import {Switch} from '$lib/components/ui/switch/index.js';
|
||||
import {toast} from 'svelte-sonner';
|
||||
import {Label} from '$lib/components/ui/label';
|
||||
import LibraryCombobox from '$lib/components/library-combobox.svelte';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import { env } from '$env/dynamic/public';
|
||||
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 { goto } from '$app/navigation';
|
||||
import { ImageOff } from 'lucide-svelte';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
import { getContext } from 'svelte';
|
||||
import type { PublicShow, RichShowTorrent, User } from '$lib/types.js';
|
||||
import { getFullyQualifiedMediaName } from '$lib/utils';
|
||||
import DownloadSeasonDialog from '$lib/components/download-season-dialog.svelte';
|
||||
import CheckmarkX from '$lib/components/checkmark-x.svelte';
|
||||
import { page } from '$app/state';
|
||||
import TorrentTable from '$lib/components/torrent-table.svelte';
|
||||
import RequestSeasonDialog from '$lib/components/request-season-dialog.svelte';
|
||||
import MediaPicture from '$lib/components/media-picture.svelte';
|
||||
import { Switch } from '$lib/components/ui/switch/index.js';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import LibraryCombobox from '$lib/components/library-combobox.svelte';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
|
||||
const apiUrl = env.PUBLIC_API_URL;
|
||||
let show: () => PublicShow = getContext('show');
|
||||
let user: () => User = getContext('user');
|
||||
let torrents: RichShowTorrent = page.data.torrentsData;
|
||||
import {base} from '$app/paths';
|
||||
const apiUrl = env.PUBLIC_API_URL;
|
||||
let show: () => PublicShow = getContext('show');
|
||||
let user: () => User = getContext('user');
|
||||
let torrents: RichShowTorrent = page.data.torrentsData;
|
||||
import { base } from '$app/paths';
|
||||
|
||||
let continuousDownloadEnabled = $state(show().continuous_download);
|
||||
let continuousDownloadEnabled = $state(show().continuous_download);
|
||||
|
||||
async function toggle_continuous_download() {
|
||||
const urlString = `${apiUrl}/tv/shows/${show().id}/continuousDownload?continuous_download=${!continuousDownloadEnabled}`;
|
||||
console.log(
|
||||
'Toggling continuous download for show',
|
||||
show().name,
|
||||
'to',
|
||||
!continuousDownloadEnabled
|
||||
);
|
||||
const response = await fetch(urlString, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
toast.error('Failed to toggle continuous download: ' + errorText);
|
||||
} else {
|
||||
continuousDownloadEnabled = !continuousDownloadEnabled;
|
||||
toast.success('Continuous download toggled successfully.');
|
||||
}
|
||||
}
|
||||
async function toggle_continuous_download() {
|
||||
const urlString = `${apiUrl}/tv/shows/${show().id}/continuousDownload?continuous_download=${!continuousDownloadEnabled}`;
|
||||
console.log(
|
||||
'Toggling continuous download for show',
|
||||
show().name,
|
||||
'to',
|
||||
!continuousDownloadEnabled
|
||||
);
|
||||
const response = await fetch(urlString, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
toast.error('Failed to toggle continuous download: ' + errorText);
|
||||
} else {
|
||||
continuousDownloadEnabled = !continuousDownloadEnabled;
|
||||
toast.success('Continuous download toggled successfully.');
|
||||
}
|
||||
}
|
||||
|
||||
/* $effect(()=>{
|
||||
/* $effect(()=>{
|
||||
continuousDownloadEnabled;
|
||||
toggle_continuous_download();
|
||||
});*/
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{getFullyQualifiedMediaName(show())} - MediaManager</title>
|
||||
<meta
|
||||
content="View details and manage downloads for {getFullyQualifiedMediaName(
|
||||
<title>{getFullyQualifiedMediaName(show())} - MediaManager</title>
|
||||
<meta
|
||||
content="View details and manage downloads for {getFullyQualifiedMediaName(
|
||||
show()
|
||||
)} in MediaManager"
|
||||
name="description"
|
||||
/>
|
||||
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="{base}/dashboard">MediaManager</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator class="hidden md:block"/>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator class="hidden md:block"/>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator class="hidden md:block"/>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Page>{getFullyQualifiedMediaName(show())}</Breadcrumb.Page>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb.List>
|
||||
</Breadcrumb.Root>
|
||||
</div>
|
||||
<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="{base}/dashboard">MediaManager</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator class="hidden md:block" />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator class="hidden md:block" />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator class="hidden md:block" />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Page>{getFullyQualifiedMediaName(show())}</Breadcrumb.Page>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb.List>
|
||||
</Breadcrumb.Root>
|
||||
</div>
|
||||
</header>
|
||||
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
|
||||
{getFullyQualifiedMediaName(show())}
|
||||
{getFullyQualifiedMediaName(show())}
|
||||
</h1>
|
||||
<div class="mx-auto flex w-full flex-1 flex-col gap-4 p-4 md:max-w-[80em]">
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
|
||||
<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
|
||||
{#if show().id}
|
||||
<MediaPicture media={show()}/>
|
||||
{:else}
|
||||
<div
|
||||
class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
|
||||
>
|
||||
<ImageOff size={48}/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
{show().overview}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-full flex-auto flex-col items-center justify-start gap-2 rounded-xl bg-muted/50 p-4 md:w-1/3 md:max-w-[40em]"
|
||||
>
|
||||
{#if user().is_superuser}
|
||||
<Card.Root class="w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Administrator Controls</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col gap-4 items-center">
|
||||
{#if !show().ended}
|
||||
<div class="flex items-center gap-3">
|
||||
<Switch
|
||||
bind:checked={() => continuousDownloadEnabled, toggle_continuous_download}
|
||||
id="continuous-download-checkbox"
|
||||
/>
|
||||
<Label for="continuous-download-checkbox">
|
||||
Enable automatic download of future seasons
|
||||
</Label>
|
||||
</div>
|
||||
{/if}
|
||||
<LibraryCombobox media={show()} mediaType="tv"/>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
<Card.Root class="w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Download Options</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col gap-4 items-center">
|
||||
{#if user().is_superuser}
|
||||
<DownloadSeasonDialog show={show()}/>
|
||||
{/if}
|
||||
<RequestSeasonDialog show={show()}/>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<Table.Root>
|
||||
<Table.Caption>A list of all seasons.</Table.Caption>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Number</Table.Head>
|
||||
<Table.Head>Exists on file</Table.Head>
|
||||
<Table.Head>Title</Table.Head>
|
||||
<Table.Head>Overview</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if show().seasons.length > 0}
|
||||
{#each show().seasons as season (season.id)}
|
||||
<Table.Row
|
||||
link={true}
|
||||
onclick={() => goto(base + '/dashboard/tv/' + show().id + '/' + season.id)}
|
||||
>
|
||||
<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
|
||||
<Table.Cell class="min-w-[10px] font-medium">
|
||||
<CheckmarkX state={season.downloaded}/>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
|
||||
<Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={3} class="text-center">No season data available.</Table.Cell>
|
||||
</Table.Row>
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<TorrentTable torrents={torrents.torrents}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
|
||||
<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
|
||||
{#if show().id}
|
||||
<MediaPicture media={show()} />
|
||||
{:else}
|
||||
<div
|
||||
class="aspect-9/16 flex h-auto w-full items-center justify-center rounded-lg bg-gray-200 text-gray-500"
|
||||
>
|
||||
<ImageOff size={48} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="h-full w-full flex-auto rounded-xl md:w-1/4">
|
||||
<Card.Root class="h-full w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Overview</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
{show().overview}
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
<div
|
||||
class="flex h-full w-full flex-auto flex-col items-center justify-start gap-4 rounded-xl md:w-1/3 md:max-w-[40em]"
|
||||
>
|
||||
{#if user().is_superuser}
|
||||
<Card.Root class="w-full flex-1">
|
||||
<Card.Header>
|
||||
<Card.Title>Administrator Controls</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col items-center gap-4">
|
||||
{#if !show().ended}
|
||||
<div class="flex items-center gap-3">
|
||||
<Switch
|
||||
bind:checked={() => continuousDownloadEnabled, toggle_continuous_download}
|
||||
id="continuous-download-checkbox"
|
||||
/>
|
||||
<Label for="continuous-download-checkbox">
|
||||
Enable automatic download of future seasons
|
||||
</Label>
|
||||
</div>
|
||||
{/if}
|
||||
<LibraryCombobox media={show()} mediaType="tv" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
<Card.Root class="w-full flex-1">
|
||||
<Card.Header>
|
||||
<Card.Title>Download Options</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-col items-center gap-4">
|
||||
{#if user().is_superuser}
|
||||
<DownloadSeasonDialog show={show()} />
|
||||
{/if}
|
||||
<RequestSeasonDialog show={show()} />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl">
|
||||
<Card.Root class="w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Season Details</Card.Title>
|
||||
<Card.Description>
|
||||
A list of all seasons for {getFullyQualifiedMediaName(show())}.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content class="w-full overflow-x-auto">
|
||||
<Table.Root>
|
||||
<Table.Caption>A list of all seasons.</Table.Caption>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Number</Table.Head>
|
||||
<Table.Head>Exists on file</Table.Head>
|
||||
<Table.Head>Title</Table.Head>
|
||||
<Table.Head>Overview</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if show().seasons.length > 0}
|
||||
{#each show().seasons as season (season.id)}
|
||||
<Table.Row
|
||||
link={true}
|
||||
onclick={() => goto(base + '/dashboard/tv/' + show().id + '/' + season.id)}
|
||||
>
|
||||
<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
|
||||
<Table.Cell class="min-w-[10px] font-medium">
|
||||
<CheckmarkX state={season.downloaded} />
|
||||
</Table.Cell>
|
||||
<Table.Cell class="min-w-[50px]">{season.name}</Table.Cell>
|
||||
<Table.Cell class="max-w-[300px] truncate">{season.overview}</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={3} class="text-center">No season data available.</Table.Cell>
|
||||
</Table.Row>
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Torrent Information</Card.Title>
|
||||
<Card.Description>A list of all torrents associated with this show.</Card.Description>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Content class="w-full overflow-x-auto">
|
||||
<TorrentTable torrents={torrents.torrents} />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils';
|
||||
import MediaPicture from '$lib/components/media-picture.svelte';
|
||||
import { base } from '$app/paths';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
|
||||
let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
|
||||
let season: Season = $state(page.data.season);
|
||||
@@ -63,65 +64,95 @@
|
||||
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
|
||||
{getFullyQualifiedMediaName(show())} Season {season.number}
|
||||
</h1>
|
||||
<div class="flex flex-1 flex-col gap-4 p-4">
|
||||
<div class="mx-auto flex w-full flex-1 flex-col gap-4 p-4 md:max-w-[80em]">
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-stretch">
|
||||
<div class="w-full overflow-hidden rounded-xl bg-muted/50 md:w-1/3 md:max-w-sm">
|
||||
<MediaPicture media={show()} />
|
||||
</div>
|
||||
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/4">
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
{show().overview}
|
||||
</p>
|
||||
<div class="h-full w-full flex-auto rounded-xl md:w-1/4">
|
||||
<Card.Root class="h-full w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Overview</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||||
{show().overview}
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
<div class="w-full flex-auto rounded-xl bg-muted/50 p-4 md:w-1/3">
|
||||
<Table.Root>
|
||||
<Table.Caption>A list of all downloaded/downloading versions of this season.</Table.Caption>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Quality</Table.Head>
|
||||
<Table.Head>File Path Suffix</Table.Head>
|
||||
<Table.Head>Imported</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each seasonFiles as file}
|
||||
<Table.Row>
|
||||
<Table.Cell class="w-[50px]">
|
||||
{getTorrentQualityString(file.quality)}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="w-[100px]">
|
||||
{file.file_path_suffix}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="w-[10px] font-medium">
|
||||
<CheckmarkX state={file.downloaded} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<span class="font-semibold">You haven't downloaded this season yet.</span>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
<div
|
||||
class="flex h-full w-full flex-auto flex-col items-center justify-start gap-4 rounded-xl md:w-1/3 md:max-w-[40em]"
|
||||
>
|
||||
<Card.Root class="h-full w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Season Details</Card.Title>
|
||||
<Card.Description>
|
||||
A list of all downloaded/downloading versions of this season.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Table.Root>
|
||||
<Table.Caption
|
||||
>A list of all downloaded/downloading versions of this season.</Table.Caption
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Quality</Table.Head>
|
||||
<Table.Head>File Path Suffix</Table.Head>
|
||||
<Table.Head>Imported</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each seasonFiles as file}
|
||||
<Table.Row>
|
||||
<Table.Cell class="w-[50px]">
|
||||
{getTorrentQualityString(file.quality)}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="w-[100px]">
|
||||
{file.file_path_suffix}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="w-[10px] font-medium">
|
||||
<CheckmarkX state={file.downloaded} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<span class="font-semibold">You haven't downloaded this season yet.</span>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 rounded-xl bg-muted/50 p-4">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<Table.Root>
|
||||
<Table.Caption>A list of all episodes.</Table.Caption>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[100px]">Number</Table.Head>
|
||||
<Table.Head class="min-w-[50px]">Title</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each season.episodes as episode (episode.id)}
|
||||
<div class="flex-1 rounded-xl">
|
||||
<Card.Root class="w-full">
|
||||
<Card.Header>
|
||||
<Card.Title>Episodes</Card.Title>
|
||||
<Card.Description
|
||||
>A list of all episodes for {getFullyQualifiedMediaName(show())} Season {season.number}
|
||||
.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content class="w-full overflow-x-auto">
|
||||
<Table.Root>
|
||||
<Table.Caption>A list of all episodes.</Table.Caption>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Cell class="w-[100px] font-medium">{episode.number}</Table.Cell>
|
||||
<Table.Cell class="min-w-[50px]">{episode.title}</Table.Cell>
|
||||
<Table.Head class="w-[100px]">Number</Table.Head>
|
||||
<Table.Head class="min-w-[50px]">Title</Table.Head>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each season.episodes as episode (episode.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="w-[100px] font-medium">{episode.number}</Table.Cell>
|
||||
<Table.Cell class="min-w-[50px]">{episode.title}</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user