From 8a6cfc066967617a4090d71f99b5e86c61f4e69f Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Mon, 1 Apr 2024 18:44:05 +0300
Subject: [PATCH] feat: List and delete local files

---
 src/lib/apis/radarr/radarr-api.ts             | 10 +++++
 src/lib/components-old/SeriesPage.svelte      |  2 +-
 .../FullScreenModal.svelte                    |  2 +-
 .../FullScreenModalContainer.svelte           |  6 +++
 .../LocalFiles/FileActionsList.svelte         | 10 +++++
 .../ManageMedia/LocalFiles/FilesList.svelte   | 28 +++++++++++++
 .../LocalFiles/ManageFilesModal.svelte        | 41 +++++++++++++++++++
 .../RequestMedia}/RadarrRequestModal.svelte   | 15 +++----
 .../RequestMedia}/ReleaseList.svelte          | 14 +++----
 src/lib/components/Modal/Modal.svelte         | 18 ++++++++
 .../VideoPlayer/VideoPlayerModal.svelte       |  2 +-
 src/lib/pages/MoviePage.svelte                |  5 ++-
 src/lib/stores/data.store.ts                  |  2 +-
 13 files changed, 134 insertions(+), 21 deletions(-)
 rename src/lib/components/{Modal => ManageMedia}/FullScreenModal.svelte (85%)
 create mode 100644 src/lib/components/ManageMedia/FullScreenModalContainer.svelte
 create mode 100644 src/lib/components/ManageMedia/LocalFiles/FileActionsList.svelte
 create mode 100644 src/lib/components/ManageMedia/LocalFiles/FilesList.svelte
 create mode 100644 src/lib/components/ManageMedia/LocalFiles/ManageFilesModal.svelte
 rename src/lib/components/{RequestModal => ManageMedia/RequestMedia}/RadarrRequestModal.svelte (51%)
 rename src/lib/components/{RequestModal => ManageMedia/RequestMedia}/ReleaseList.svelte (89%)
 create mode 100644 src/lib/components/Modal/Modal.svelte

diff --git a/src/lib/apis/radarr/radarr-api.ts b/src/lib/apis/radarr/radarr-api.ts
index e9ae10c..8bd6eea 100644
--- a/src/lib/apis/radarr/radarr-api.ts
+++ b/src/lib/apis/radarr/radarr-api.ts
@@ -132,6 +132,16 @@ export class RadarrApi implements Api<paths> {
 			})
 			.then((res) => res.response.ok) || Promise.resolve(false);
 
+	getMovieFilesByMovieId = (movieId: number): Promise<MovieFileResource[]> =>
+		this.getClient()
+			?.GET('/api/v3/moviefile', {
+				params: {
+					query: {
+						movieId
+					}
+				}
+			})
+			.then((r) => r.data || []) || Promise.resolve([]);
 	deleteRadarrMovieFile = (id: number) =>
 		this.getClient()
 			?.DELETE('/api/v3/moviefile/{id}', {
diff --git a/src/lib/components-old/SeriesPage.svelte b/src/lib/components-old/SeriesPage.svelte
index 030e151..af9c5cf 100644
--- a/src/lib/components-old/SeriesPage.svelte
+++ b/src/lib/components-old/SeriesPage.svelte
@@ -16,7 +16,7 @@
 	import UiCarousel from '../../lib/components/Carousel/UICarousel.svelte';
 	import EpisodeCard from '../../lib/components/EpisodeCard/EpisodeCard.svelte';
 	import PersonCard from '../../lib/components/PersonCard/PersonCard.svelte';
-	import SeriesRequestModal from '../../lib/components/RequestModal/SeriesRequestModal.svelte';
+	import SeriesRequestModal from '../components/ManageMedia/SeriesRequestModal.svelte';
 	import OpenInButton from '../../lib/components/TitlePageLayout/OpenInButton.svelte';
 	import TitlePageLayout from '../../lib/components/TitlePageLayout/TitlePageLayout.svelte';
 	import { playerState } from '../../lib/components/VideoPlayer/VideoPlayer';
diff --git a/src/lib/components/Modal/FullScreenModal.svelte b/src/lib/components/ManageMedia/FullScreenModal.svelte
similarity index 85%
rename from src/lib/components/Modal/FullScreenModal.svelte
rename to src/lib/components/ManageMedia/FullScreenModal.svelte
index c25b3d9..4436c08 100644
--- a/src/lib/components/Modal/FullScreenModal.svelte
+++ b/src/lib/components/ManageMedia/FullScreenModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Container from '../../../Container.svelte';
-	import { modalStack } from './modal.store';
+	import { modalStack } from '../Modal/modal.store';
 
 	export let modalId: symbol;
 </script>
diff --git a/src/lib/components/ManageMedia/FullScreenModalContainer.svelte b/src/lib/components/ManageMedia/FullScreenModalContainer.svelte
new file mode 100644
index 0000000..0cdb34f
--- /dev/null
+++ b/src/lib/components/ManageMedia/FullScreenModalContainer.svelte
@@ -0,0 +1,6 @@
+<div class="max-h-full mx-auto flex flex-col py-32 max-w-2xl">
+	<h1 class="tracking-wide text-2xl font-semibold mb-4">
+		<slot name="header">Header is missing</slot>
+	</h1>
+	<slot>Content is missing</slot>
+</div>
diff --git a/src/lib/components/ManageMedia/LocalFiles/FileActionsList.svelte b/src/lib/components/ManageMedia/LocalFiles/FileActionsList.svelte
new file mode 100644
index 0000000..b394899
--- /dev/null
+++ b/src/lib/components/ManageMedia/LocalFiles/FileActionsList.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { MovieFileResource } from '../../../apis/radarr/radarr-api';
+	import Button from '../../Button.svelte';
+	export let file: MovieFileResource;
+	export let handleDeleteFile: (fileId: number) => Promise<boolean>;
+</script>
+
+<div class="-my-1">
+	<Button focusOnMount on:click={() => file.id && handleDeleteFile(file.id)}>Delete File</Button>
+</div>
diff --git a/src/lib/components/ManageMedia/LocalFiles/FilesList.svelte b/src/lib/components/ManageMedia/LocalFiles/FilesList.svelte
new file mode 100644
index 0000000..a9bec84
--- /dev/null
+++ b/src/lib/components/ManageMedia/LocalFiles/FilesList.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { useRequest } from '../../../stores/data.store';
+	import type { MovieFileResource } from '../../../apis/radarr/radarr-api';
+	import ButtonGhost from '../../Ghosts/ButtonGhost.svelte';
+	import Button from '../../Button.svelte';
+
+	export let id: number;
+	export let getFiles: (movieId: number) => Promise<MovieFileResource[]>;
+	export let handleSelectFile: (file: MovieFileResource) => void;
+
+	const { data: files, isLoading } = useRequest(getFiles, id);
+</script>
+
+<div class="-my-1">
+	{#if $isLoading}
+		{#each new Array(5) as _, index}
+			<div class="flex-1 my-1">
+				<ButtonGhost />
+			</div>
+		{/each}
+	{:else if $files}
+		{#each $files as file, index}
+			<Button focusOnMount={index === 0} on:click={() => handleSelectFile(file)}>
+				{file.relativePath}
+			</Button>
+		{/each}
+	{/if}
+</div>
diff --git a/src/lib/components/ManageMedia/LocalFiles/ManageFilesModal.svelte b/src/lib/components/ManageMedia/LocalFiles/ManageFilesModal.svelte
new file mode 100644
index 0000000..f32b6a0
--- /dev/null
+++ b/src/lib/components/ManageMedia/LocalFiles/ManageFilesModal.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import FullScreenModal from '../FullScreenModal.svelte';
+	import FullScreenModalContainer from '../FullScreenModalContainer.svelte';
+	import Container from '../../../../Container.svelte';
+	import FilesList from './FilesList.svelte';
+	import { type MovieFileResource, radarrApi } from '../../../apis/radarr/radarr-api';
+	import FileActionsList from './FileActionsList.svelte';
+	import { formatSize } from '../../../utils';
+
+	export let id: number;
+	export let modalId: symbol;
+
+	let selectedFile: MovieFileResource | undefined = undefined;
+
+	function handleSelectFile(file: MovieFileResource) {
+		selectedFile = file;
+	}
+</script>
+
+<FullScreenModal {modalId}>
+	{#if !selectedFile}
+		<FullScreenModalContainer>
+			<h1 slot="header">Local Files</h1>
+			<Container>
+				<FilesList getFiles={radarrApi.getMovieFilesByMovieId} {handleSelectFile} {id} />
+			</Container>
+		</FullScreenModalContainer>
+	{:else}
+		<FullScreenModalContainer>
+			<div slot="header" class="flex">
+				<h1 class="line-clamp-1 flex-1 mr-4">
+					{selectedFile.relativePath}
+				</h1>
+				<h1 class="text-zinc-300">{formatSize(selectedFile.size || 0)}</h1>
+			</div>
+			<Container>
+				<FileActionsList file={selectedFile} handleDeleteFile={radarrApi.deleteRadarrMovieFile} />
+			</Container>
+		</FullScreenModalContainer>
+	{/if}
+</FullScreenModal>
diff --git a/src/lib/components/RequestModal/RadarrRequestModal.svelte b/src/lib/components/ManageMedia/RequestMedia/RadarrRequestModal.svelte
similarity index 51%
rename from src/lib/components/RequestModal/RadarrRequestModal.svelte
rename to src/lib/components/ManageMedia/RequestMedia/RadarrRequestModal.svelte
index 93770e8..b549aec 100644
--- a/src/lib/components/RequestModal/RadarrRequestModal.svelte
+++ b/src/lib/components/ManageMedia/RequestMedia/RadarrRequestModal.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-	import FullScreenModal from '../Modal/FullScreenModal.svelte';
-	import { radarrApi } from '../../apis/radarr/radarr-api';
+	import FullScreenModal from '../FullScreenModal.svelte';
+	import { radarrApi } from '../../../apis/radarr/radarr-api';
 	import ReleaseList from './ReleaseList.svelte';
-	import Container from '../../../Container.svelte';
-	import { scrollWithOffset } from '../../selectable';
+	import Container from '../../../../Container.svelte';
+	import { scrollWithOffset } from '../../../selectable';
+	import FullScreenModalContainer from '../FullScreenModalContainer.svelte';
 
 	export let id: number;
 	export let modalId: symbol;
 </script>
 
 <FullScreenModal {modalId}>
-	<div class="max-h-full mx-auto flex flex-col py-32 max-w-2xl">
-		<h1 class="tracking-wide text-2xl font-semibold mb-4">Download</h1>
+	<FullScreenModalContainer>
+		<h1 slot="header">Download</h1>
 		<Container
 			childrenRevealStrategy={scrollWithOffset('all', 10)}
 			class="flex-1 overflow-y-scroll"
@@ -22,5 +23,5 @@
 				getReleases={radarrApi.fetchRadarrReleases}
 			/>
 		</Container>
-	</div>
+	</FullScreenModalContainer>
 </FullScreenModal>
diff --git a/src/lib/components/RequestModal/ReleaseList.svelte b/src/lib/components/ManageMedia/RequestMedia/ReleaseList.svelte
similarity index 89%
rename from src/lib/components/RequestModal/ReleaseList.svelte
rename to src/lib/components/ManageMedia/RequestMedia/ReleaseList.svelte
index 091457e..94ec0a1 100644
--- a/src/lib/components/RequestModal/ReleaseList.svelte
+++ b/src/lib/components/ManageMedia/RequestMedia/ReleaseList.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import { type RadarrRelease } from '../../apis/radarr/radarr-api';
-	import type { SonarrRelease } from '../../apis/sonarr/sonarrApi';
+	import { type RadarrRelease } from '../../../apis/radarr/radarr-api';
+	import type { SonarrRelease } from '../../../apis/sonarr/sonarrApi';
 	import classNames from 'classnames';
-	import { useRequest } from '../../stores/data.store';
-	import Button from '../Button.svelte';
+	import { useRequest } from '../../../stores/data.store';
+	import Button from '../../Button.svelte';
 	import { DotFilled, Download, Plus } from 'radix-icons-svelte';
-	import { formatMinutesToTime, formatSize } from '../../utils';
+	import { formatMinutesToTime, formatSize } from '../../../utils';
 	import { derived } from 'svelte/store';
-	import ButtonGhost from '../Ghosts/ButtonGhost.svelte';
-	import Container from '../../../Container.svelte';
-	import { scrollWithOffset } from '../../selectable';
+	import ButtonGhost from '../../Ghosts/ButtonGhost.svelte';
 
 	export let id: number;
 	export let getReleases: (id: number) => Promise<(RadarrRelease | SonarrRelease)[]>;
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
new file mode 100644
index 0000000..cf6a7fc
--- /dev/null
+++ b/src/lib/components/Modal/Modal.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Container from '../../../Container.svelte';
+	import { modalStack } from './modal.store';
+
+	export let modalId: symbol;
+
+	function handleShortcuts(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			modalStack.close(modalId);
+		}
+	}
+</script>
+
+<Container focusOnMount trapFocus class="fixed inset-0">
+	<slot />
+</Container>
+
+<svelte:window on:keypress={handleShortcuts} />
diff --git a/src/lib/components/VideoPlayer/VideoPlayerModal.svelte b/src/lib/components/VideoPlayer/VideoPlayerModal.svelte
index d885655..5af041e 100644
--- a/src/lib/components/VideoPlayer/VideoPlayerModal.svelte
+++ b/src/lib/components/VideoPlayer/VideoPlayerModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import FullScreenModal from '../Modal/FullScreenModal.svelte';
+	import FullScreenModal from '../ManageMedia/FullScreenModal.svelte';
 	import VideoPlayer from './VideoPlayer.svelte';
 	export let modalId: symbol;
 	export let id: string;
diff --git a/src/lib/pages/MoviePage.svelte b/src/lib/pages/MoviePage.svelte
index 4c050d3..cd25781 100644
--- a/src/lib/pages/MoviePage.svelte
+++ b/src/lib/pages/MoviePage.svelte
@@ -12,8 +12,9 @@
 	import { useActionRequests, useRequest } from '../stores/data.store';
 	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 	import { modalStack } from '../components/Modal/modal.store';
-	import RequestModal from '../components/RequestModal/RadarrRequestModal.svelte';
+	import RequestModal from '../components/ManageMedia/RequestMedia/RadarrRequestModal.svelte';
 	import { playerState } from '../components/VideoPlayer/VideoPlayer';
+	import ManageFilesModal from '../components/ManageMedia/LocalFiles/ManageFilesModal.svelte';
 
 	export let id: string;
 
@@ -98,7 +99,7 @@
 							{#if jellyfinItem}
 								<Button
 									class="mr-2"
-									on:click={() => modalStack.create(RequestModal, { id: radarrItem.id })}
+									on:click={() => modalStack.create(ManageFilesModal, { id: radarrItem.id })}
 								>
 									Manage Files
 									<File size={19} slot="icon" />
diff --git a/src/lib/stores/data.store.ts b/src/lib/stores/data.store.ts
index e46ecd9..bf702c6 100644
--- a/src/lib/stores/data.store.ts
+++ b/src/lib/stores/data.store.ts
@@ -279,7 +279,7 @@ export const useRequest = <P extends (...args: A) => Promise<any>, A extends any
 		return p;
 	}
 
-	refresh(...initialArgs).finally(() => isLoading.set(false));
+	if (initialArgs) refresh(...initialArgs).finally(() => isLoading.set(false));
 
 	return {
 		promise: {