diff --git a/src/app.html b/src/app.html index 97d2ed4..d922afd 100644 --- a/src/app.html +++ b/src/app.html @@ -15,7 +15,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/routes/components/Card/Card.svelte b/src/routes/components/Card/Card.svelte index 1a67386..f894fbb 100644 --- a/src/routes/components/Card/Card.svelte +++ b/src/routes/components/Card/Card.svelte @@ -15,7 +15,7 @@ export let available = true; export let progress = 0; export let progressType: 'watched' | 'downloading' = 'watched'; - export let large = false; + export let type: 'dynamic' | 'normal' | 'large' = 'normal'; export let randomProgress = false; if (randomProgress) { progress = Math.random() > 0.3 ? Math.random() * 100 : 0; @@ -23,9 +23,10 @@
diff --git a/src/routes/components/Card/CardPlaceholder.svelte b/src/routes/components/Card/CardPlaceholder.svelte index 1b6d9b0..4c28101 100644 --- a/src/routes/components/Card/CardPlaceholder.svelte +++ b/src/routes/components/Card/CardPlaceholder.svelte @@ -2,13 +2,17 @@ import classNames from 'classnames'; export let index = 0; - export let large = false; + export let type: 'dynamic' | 'normal' | 'large' = 'normal';
diff --git a/src/routes/components/Carousel/CarouselPlaceholderItems.svelte b/src/routes/components/Carousel/CarouselPlaceholderItems.svelte index 02700e6..d84a4f5 100644 --- a/src/routes/components/Carousel/CarouselPlaceholderItems.svelte +++ b/src/routes/components/Carousel/CarouselPlaceholderItems.svelte @@ -1,8 +1,8 @@ - {#each Array(10) as _, i (i)} - + {/each} diff --git a/src/routes/components/SourceStats/RadarrStats.svelte b/src/routes/components/SourceStats/RadarrStats.svelte new file mode 100644 index 0000000..8801e17 --- /dev/null +++ b/src/routes/components/SourceStats/RadarrStats.svelte @@ -0,0 +1,27 @@ + + +
+
+
+
+

Mac-Mini

+ Radarr +
+
+
+

Movies

+
30
+
+
+

Space Taken

+
{formatSize(120_000_000_000)}
+
+
+

Space Left

+
{formatSize(50_000_000_000)}
+
+
+
+
diff --git a/src/routes/components/SourceStats/SonarrStats.svelte b/src/routes/components/SourceStats/SonarrStats.svelte new file mode 100644 index 0000000..b852a00 --- /dev/null +++ b/src/routes/components/SourceStats/SonarrStats.svelte @@ -0,0 +1,27 @@ + + +
+
+
+
+

Mac-Mini

+ Sonarr +
+
+
+

Movies

+
30
+
+
+

Space Taken

+
{formatSize(120_000_000_000)}
+
+
+

Space Left

+
{formatSize(50_000_000_000)}
+
+
+
+
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte index 823666e..83e233b 100644 --- a/src/routes/discover/+page.svelte +++ b/src/routes/discover/+page.svelte @@ -21,10 +21,10 @@
For You
{#await data.streamed.popularMovies} - + {:then movies} {#each movies ? [...movies].reverse() : [] as movie (movie.tmdbId)} - + {/each} {/await} diff --git a/src/routes/discover/NetworkCard.svelte b/src/routes/discover/NetworkCard.svelte index e9cbbc4..f04f817 100644 --- a/src/routes/discover/NetworkCard.svelte +++ b/src/routes/discover/NetworkCard.svelte @@ -1,10 +1,10 @@ - diff --git a/src/routes/library/+page.svelte b/src/routes/library/+page.svelte index 9b29a00..d80ea03 100644 --- a/src/routes/library/+page.svelte +++ b/src/routes/library/+page.svelte @@ -3,104 +3,73 @@ import Card from '../components/Card/Card.svelte'; import CardPlaceholder from '../components/Card/CardPlaceholder.svelte'; import { formatSize } from '$lib/utils.js'; + import RadarrStats from '../components/SourceStats/RadarrStats.svelte'; + import SonarrStats from '../components/SourceStats/SonarrStats.svelte'; export let data: PageData; const watched = []; - const posterGridStyle = 'flex flex-wrap justify-center gap-x-4 gap-y-8'; - const headerStyle = 'uppercase tracking-widest font-bold text-center mt-2'; + const posterGridStyle = + 'grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6'; + const headerStyle = 'uppercase tracking-widest font-bold mt-2'; -
-
-
-
-
-
-

Mac-Mini

- Radarr -
-
-
-

Movies

-
30
-
-
-

Space Taken

-
{formatSize(120_000_000_000)}
-
-
-

Space Left

-
{formatSize(50_000_000_000)}
-
-
-
-
-
-
-
-
-

Mac-Mini

- Sonarr -
-
-
-

Movies

-
30
-
-
-

Space Taken

-
{formatSize(120_000_000_000)}
-
-
-

Space Left

-
{formatSize(50_000_000_000)}
-
-
-
+
+
+
+ +
-
- - +
+
+ + - {#await Promise.all( [data.streamed.available, data.streamed.unavailable, data.streamed.downloading] )} -
- {#each [...Array(20).keys()] as index (index)} - - {/each} -
- {:then [available, unavailable, downloading]} - {#if downloading.length > 0} -

Downloading

+ {#await Promise.all( [data.streamed.available, data.streamed.unavailable, data.streamed.downloading] )}
- {#each downloading as movie (movie)} - + {#each [...Array(20).keys()] as index (index)} + {/each}
- {/if} + {:then [available, unavailable, downloading]} + {#if downloading.length > 0} +

Downloading

+
+ {#each downloading as movie (movie)} + + {/each} +
+ {/if} - {#if available.length > 0} -

Available

-
- {#each available as movie (movie.tmdbId)} - - {/each} -
- {/if} + {#if available.length > 0} +

Available

+
+ {#each available as movie (movie.tmdbId)} + + {/each} +
+ {/if} - {#if unavailable.length > 0} -

Unavailable

-
- {#each unavailable as movie (movie.tmdbId)} - - {/each} -
- {/if} + {#if unavailable.length > 0} +

Unavailable

+
+ {#each unavailable as movie (movie.tmdbId)} + + {/each} +
+ {/if} - {#if watched.length > 0} -

Watched

- {/if} - {/await} + {#if watched.length > 0} +

Watched

+ {/if} + {/await} +