Loads of changes, experimental radarr queuing and integration

src/routes/components/ResourceDetails/ResourceDetails.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	import type { MovieResource } from '$lib/types';
 	import { ChevronDown, Clock } from 'radix-icons-svelte';
 	import { onMount } from 'svelte';
 	import classNames from 'classnames';
 	import { fade } from 'svelte/transition';
 	import { TMDB_IMAGES } from '$lib/constants';
+	import Button from '../Ui/Button.svelte';
+	import type { MovieResource } from '$lib/radarr/radarr';
+	import type { TmdbMovie, TmdbMovieFull } from '$lib/tmdb-api';
 
 	export let resource: MovieResource;
 	export let trailer = true;
-	export let remoteResource: any;
+	export let remoteResource: TmdbMovieFull;
+	let tmdbPageUrl = '';
+	$: tmdbPageUrl = 'https://www.themoviedb.org/movie/' + remoteResource.id;
 
 	let video: any = remoteResource.videos.filter(
 		(v) => v.site === 'YouTube' && v.type === 'Trailer'
@@ -58,6 +62,7 @@
 				trailerStartTime = Date.now();
 			}
 		}, 2500);
+		console.log(remoteResource);
 	});
 </script>
 
@@ -75,7 +80,7 @@
 				transition:fade
 				src={'https://www.youtube.com/embed/' +
 					video.key +
-					'?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1'}
+					'?autoplay=1&mute=1&loop=1&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1'}
 				title="YouTube video player"
 				frameborder="0"
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -131,22 +136,19 @@
 			</div>
 			<div class="flex gap-6 mt-10">
 				<div class="flex gap-1">
-					<button
-						class="bg-white border-2 border-white hover:bg-amber-400 hover:border-amber-400 transition-colors text-zinc-900 px-8 py-3.5 uppercase tracking-widest font-extrabold cursor-pointer text-xs"
-						style={opacityStyle}>Stream</button
-					>
+					<Button size="lg" style={opacityStyle}>Stream</Button>
 					<div
 						class="hidden items-center justify-center border-2 border-white w-10 cursor-pointer hover:bg-white hover:text-zinc-900 transition-colors"
 					>
 						<ChevronDown size="20" />
 					</div>
 				</div>
-				<button
+				<Button
+					size="lg"
+					type="secondary"
 					on:mouseover={() => (focusTrailer = trailer)}
 					on:mouseleave={() => (focusTrailer = false)}
-					on:click={openTrailer}
-					class="border-2 border-white cursor-pointer transition-colors px-8 py-3.5 uppercase tracking-widest font-semibold text-xs hover:bg-white hover:text-black opacity-100"
-					>Watch Trailer</button
+					on:click={openTrailer}>Watch Trailer</Button
 				>
 			</div>
 		</div>
@@ -165,9 +167,13 @@
 					</div>
 				</div>
 				<div class="tracking-widest font-extralight text-sm">Currently <b>Streaming</b></div>
-				<div class="tracking-widest font-extralight text-sm">
-					<b>{remoteResource.vote_average}</b> TMDB
-				</div>
+				<a
+					href={'https://www.themoviedb.org/movie/' + remoteResource.id}
+					target="_blank"
+					class="tracking-widest font-extralight text-sm"
+				>
+					<b>{remoteResource.vote_average.toFixed(1)}</b> TMDB
+				</a>
 				<div class="flex mt-4">
 					<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="text-white w-4"
 						><g
@@ -183,8 +189,17 @@
 			<h3 class="text-xs tracking-wide uppercase">Starring</h3>
 			<div class="flex flex-col gap-1">
 				{#each remoteResource.credits.slice(0, 5) as a}
-					<div class="tracking-widest font-extralight text-sm">{a.name}</div>
+					<a
+						href={'https://www.themoviedb.org/person/' + a.id}
+						target="_blank"
+						class="tracking-widest font-extralight text-sm">{a.name}</a
+					>
 				{/each}
+				<a
+					href={'https://www.themoviedb.org/movie/' + remoteResource.id + '/cast'}
+					target="_blank"
+					class="tracking-widest font-extralight text-sm">View all...</a
+				>
 			</div>
 		</div>
 		<slot name="page-controls" />

src/routes/components/ResourceDetails/ResourceLocalDetails.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { formatSize } from '$lib/utils';
+	import Button from '../Ui/Button.svelte';
+	import { DotFilled, Plus } from 'radix-icons-svelte';
+	import RequestModal from '../RequestModal/RequestModal.svelte';
+	import { addRadarrMovie, getQueuedById, getRadarrMovie } from '$lib/radarr/radarr';
+	import IconButton from '../IconButton.svelte';
+	import { formatMinutes } from '$lib/utils.js';
+	import classNames from 'classnames';
+
+	let isRequestModalVisible = false;
+	export let tmdbId: string;
+
+	const { data: localResource, load, didLoad } = getRadarrMovie();
+	const { data: queueResponse, load: loadQueued } = getQueuedById();
+	const { data: addMovieResponse, loading: addMovieLoading, load: addToRadarr } = addRadarrMovie();
+
+	function refreshRadarrMovie() {
+		if (tmdbId) load(tmdbId);
+	}
+
+	onMount(() => {
+		refreshRadarrMovie();
+	});
+
+	addMovieResponse.subscribe(() => {
+		if ($addMovieResponse) refreshRadarrMovie();
+	});
+
+	const headerStyle = 'uppercase tracking-widest font-bold';
+
+	function openRequestModal() {
+		if ($localResource) isRequestModalVisible = true;
+	}
+
+	localResource.subscribe((resource) => {
+		if (resource?.id) loadQueued(resource.id);
+	});
+</script>
+
+<div class="flex flex-col gap-8 p-8">
+	{#if !$didLoad}
+		Loading...
+	{:else if !$localResource?.movieFile}
+		<div>
+			<h1 class="text-lg mb-1 font-medium tracking-wide">No sources found</h1>
+			<p class="text-zinc-300">
+				No local or remote sources found for this title. You can configure your sources on the <a
+					href="/sources"
+					class="text-amber-200 hover:text-amber-100">sources</a
+				> page.
+			</p>
+		</div>
+	{/if}
+	{#if $localResource}
+		<div class="">
+			<div class="flex items-center gap-2 mb-4">
+				<div class={headerStyle}>Local Library</div>
+				<IconButton on:click={openRequestModal}>
+					<Plus size="20" />
+				</IconButton>
+			</div>
+			{#each $queueResponse || [] as downloadingFile}
+				<div
+					class={classNames('border-l-2 p-1 px-4 flex justify-between items-center py-1', {
+						'border-purple-400': downloadingFile.status === 'downloading',
+						'border-amber-400': downloadingFile.status !== 'downloading'
+					})}
+				>
+					<div class="flex gap-1 items-center">
+						<b class="">{downloadingFile.quality.quality.resolution}p</b>
+						<DotFilled class="text-zinc-300" />
+						<h2 class="text-zinc-200 text-sm">{formatSize(downloadingFile.size)} on disk</h2>
+						<DotFilled class="text-zinc-300" />
+						<h2 class="uppercase text-zinc-200 text-sm">
+							{downloadingFile.quality.quality.source}
+						</h2>
+						<DotFilled class="text-zinc-300" />
+						<h2 class="text-zinc-200 text-sm">
+							Completed in {downloadingFile.timeleft}
+						</h2>
+					</div>
+					<Button size="sm" disabled={true}
+						>{downloadingFile.status === 'downloding' ? 'Downloading...' : 'Importing...'}</Button
+					>
+				</div>
+			{/each}
+			{#each $localResource?.movieFile ? [$localResource.movieFile] : [] as movieFile (movieFile.id)}
+				<div class="border-l-2 border-zinc-200 p-1 px-4 flex justify-between items-center my-1">
+					<div class="flex gap-1 items-center">
+						<b class="">{movieFile.quality.quality.resolution}p</b>
+						<DotFilled class="text-zinc-300" />
+						<h2 class="text-zinc-200 text-sm">{formatSize(movieFile.size)} on disk</h2>
+						<DotFilled class="text-zinc-300" />
+						<h2 class="uppercase text-zinc-200 text-sm">
+							{movieFile.quality.quality.source}
+						</h2>
+						<DotFilled class="text-zinc-300" />
+						<h2 class="uppercase text-zinc-200 text-sm">
+							{movieFile.mediaInfo.videoCodec}
+						</h2>
+					</div>
+					<Button size="sm">Stream</Button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+<div class="flex gap-4 items-center bg-black p-8 py-4 empty:hidden">
+	{#if !$localResource && $didLoad && tmdbId}
+		<Button on:click={() => addToRadarr(tmdbId)} disabled={$addMovieLoading}>Add to Radarr</Button>
+	{/if}
+	{#if $localResource?.movieFile}
+		<Button type="secondary">Manage Local Files</Button>
+	{/if}
+</div>
+{#if $localResource?.id}
+	<RequestModal
+		bind:visible={isRequestModalVisible}
+		radarrId={$localResource.id}
+		on:download={() => refreshRadarrMovie()}
+	/>
+{/if}