From f184def9addbfd48996479909aa946990aebf21a Mon Sep 17 00:00:00 2001
From: maxid <97409287+maxdorninger@users.noreply.github.com>
Date: Sun, 21 Dec 2025 19:24:35 +0100
Subject: [PATCH] display movie files

---
 .../movies/[movieId=uuid]/+page.svelte        | 44 ++++++++++++++++++-
 .../dashboard/movies/[movieId=uuid]/+page.ts  | 12 ++++-
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
index 0d0d35e..ff30b8b 100644
--- a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
@@ -2,10 +2,11 @@
 	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 * as Table from '$lib/components/ui/table/index.js';
 	import { ImageOff } from 'lucide-svelte';
 	import { getContext } from 'svelte';
 	import type { components } from '$lib/api/api';
-	import { getFullyQualifiedMediaName } from '$lib/utils';
+	import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils';
 	import { page } from '$app/state';
 	import TorrentTable from '$lib/components/torrent-table.svelte';
 	import MediaPicture from '$lib/components/media-picture.svelte';
@@ -15,8 +16,10 @@
 	import { resolve } from '$app/paths';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import DeleteMediaDialog from '$lib/components/delete-media-dialog.svelte';
+	import CheckmarkX from '$lib/components/checkmark-x.svelte';
 
 	let movie: components['schemas']['PublicMovie'] = $derived(page.data.movie);
+	let movieFiles: components['schemas']['PublicMovieFile'][] = $derived(page.data.movieFiles);
 	let user: () => components['schemas']['UserRead'] = getContext('user');
 </script>
 
@@ -110,6 +113,45 @@
 			</Card.Root>
 		</div>
 	</div>
+	<div class="flex-1 rounded-xl">
+		<Card.Root class="h-full w-full">
+			<Card.Header>
+				<Card.Title>Movie files</Card.Title>
+				<Card.Description>
+					A list of all downloaded/downloading versions of this movie.
+				</Card.Description>
+			</Card.Header>
+			<Card.Content>
+				<Table.Root>
+					<Table.Caption>
+						A list of all downloaded/downloading versions of this movie.
+					</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 movieFiles as file (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>
+						{/each}
+					</Table.Body>
+				</Table.Root>
+			</Card.Content>
+		</Card.Root>
+	</div>
 	<div class="flex-1 rounded-xl">
 		<Card.Root class="h-full w-full">
 			<Card.Header>
diff --git a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.ts b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.ts
index ef8ae77..c1016d0 100644
--- a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.ts
+++ b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.ts
@@ -2,7 +2,15 @@ import type { PageLoad } from './$types';
 import client from '$lib/api';
 
 export const load: PageLoad = async ({ params, fetch }) => {
-	const { data } = await client.GET('/api/v1/movies/{movie_id}', {
+	const movie = client.GET('/api/v1/movies/{movie_id}', {
+		fetch: fetch,
+		params: {
+			path: {
+				movie_id: params.movieId
+			}
+		}
+	});
+	const files = client.GET('/api/v1/movies/{movie_id}/files', {
 		fetch: fetch,
 		params: {
 			path: {
@@ -11,5 +19,5 @@ export const load: PageLoad = async ({ params, fetch }) => {
 		}
 	});
 
-	return { movie: data };
+	return { movie: await movie.then((x) => x.data), movieFiles: await files.then((x) => x.data) };
 };