starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-24 17:55:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

add get more recommendations button do dashboard, add movie pages to frontend, and make the loading of data non-blocking by adding skeletons while loading, instead of delaying the rendering of the page

Browse Source
This commit is contained in:
maxDorninger
2025-06-27 11:47:28 +02:00
parent 8c5e47bb2f
commit 0fda4418ed
16 changed files with 156 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/routes/dashboard/+page.svelte
View File

@@ -9,6 +9,7 @@
import type {MetaDataProviderShowSearchResult} from '$lib/types';
import {onMount} from 'svelte';
import {env} from "$env/dynamic/public";
import {Skeleton} from "$lib/components/ui/skeleton/index.js";
const apiUrl = env.PUBLIC_API_URL;
@@ -75,20 +76,12 @@
<h3 class="my-4 text-center text-2xl font-semibold ">
Trending Shows
</h3>
{#if showsLoading}
<LoadingBar/>
{:else}
<RecommendedMediaCarousel isShow={true} media={recommendedShows}/>
{/if}
<RecommendedMediaCarousel isLoading={showsLoading} isShow={true} media={recommendedShows}/>
<h3 class="my-4 text-center text-2xl font-semibold ">
Trending Movies
</h3>
{#if showsLoading}
<LoadingBar/>
{:else}
<RecommendedMediaCarousel isShow={false} media={recommendedMovies}/>
{/if}
<RecommendedMediaCarousel isLoading={moviesLoading} isShow={false} media={recommendedMovies}/>
</div>
</div>

19
web/src/routes/dashboard/movies/+page.svelte
View File

@@ -10,6 +10,7 @@
import {onMount} from "svelte";
import {toast} from "svelte-sonner";
import {env} from '$env/dynamic/public';
import {Skeleton} from "$lib/components/ui/skeleton";
const apiUrl = env.PUBLIC_API_URL;
let movies
@@ -55,11 +56,19 @@
</div>
</header>
{#snippet loadingbar()}
<div class="animate-fade-in col-span-full flex w-full flex-col items-center justify-center py-16">
<div class="w-1/2 max-w-xs">
<LoadingBar/>
</div>
</div>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
{/snippet}
<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">

25
web/src/routes/dashboard/tv/+page.svelte
View File

@@ -4,9 +4,10 @@
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 {getFullyQualifiedShowName} from '$lib/utils';
import {getFullyQualifiedMediaName} from '$lib/utils';
import LoadingBar from '$lib/components/loading-bar.svelte';
import ShowPicture from '$lib/components/show-picture.svelte';
import MediaPicture from '$lib/components/media-picture.svelte';
import {Skeleton} from "$lib/components/ui/skeleton";
let tvShowsPromise = page.data.tvShows;
</script>
@@ -33,11 +34,17 @@
</div>
</header>
{#snippet loadingbar()}
<div class="animate-fade-in col-span-full flex w-full flex-col items-center justify-center py-16">
<div class="w-1/2 max-w-xs">
<LoadingBar/>
</div>
</div>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
<Skeleton class="h-[50vh] w-full "/>
{/snippet}
<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
@@ -56,11 +63,11 @@
<a href={'/dashboard/tv/' + show.id}>
<Card.Root class="col-span-full max-w-[90vw] ">
<Card.Header>
<Card.Title class="h-6 truncate">{getFullyQualifiedShowName(show)}</Card.Title>
<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
<Card.Description class="truncate">{show.overview}</Card.Description>
</Card.Header>
<Card.Content>
<ShowPicture {show}/>
<MediaPicture media={show}/>
</Card.Content>
</Card.Root>
</a>

10
web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
View File

@@ -8,13 +8,13 @@
import * as Table from '$lib/components/ui/table/index.js';
import {getContext} from 'svelte';
import type {RichShowTorrent, Show, User} from '$lib/types.js';
import {getFullyQualifiedShowName} from '$lib/utils';
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 ShowPicture from '$lib/components/show-picture.svelte';
import MediaPicture from '$lib/components/media-picture.svelte';
import {Checkbox} from '$lib/components/ui/checkbox/index.js';
import {toast} from 'svelte-sonner';
import {Label} from '$lib/components/ui/label';
@@ -66,20 +66,20 @@
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>{getFullyQualifiedShowName(show())}</Breadcrumb.Page>
<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">
{getFullyQualifiedShowName(show())}
{getFullyQualifiedMediaName(show())}
</h1>
<div class="flex w-full flex-1 flex-col gap-4 p-4">
<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}
<ShowPicture show={show()}/>
<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"

8
web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
View File

@@ -7,8 +7,8 @@
import {getContext} from 'svelte';
import type {PublicSeasonFile, Season, Show} from '$lib/types';
import CheckmarkX from '$lib/components/checkmark-x.svelte';
import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils';
import ShowPicture from '$lib/components/show-picture.svelte';
import {getFullyQualifiedMediaName, getTorrentQualityString} from '$lib/utils';
import MediaPicture from '$lib/components/media-picture.svelte';
let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
let season: Season = $state(page.data.season);
@@ -50,12 +50,12 @@
</div>
</header>
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
{getFullyQualifiedShowName(show())} Season {season.number}
{getFullyQualifiedMediaName(show())} Season {season.number}
</h1>
<div class="flex flex-1 flex-col gap-4 p-4">
<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">
<ShowPicture show={show()}/>
<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">

2
web/src/routes/dashboard/tv/requests/+page.svelte
View File

@@ -28,7 +28,7 @@
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>TV Torrents</Breadcrumb.Page>
<Breadcrumb.Page>Season Requests</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>

4
web/src/routes/dashboard/tv/torrents/+page.svelte
View File

@@ -4,7 +4,7 @@
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import type {RichShowTorrent} from '$lib/types';
import {getFullyQualifiedShowName} from '$lib/utils';
import {getFullyQualifiedMediaName} from '$lib/utils';
import * as Accordion from '$lib/components/ui/accordion/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import TorrentTable from '$lib/components/torrent-table.svelte';
@@ -51,7 +51,7 @@
<Card.Root>
<Card.Header>
<Card.Title>
{getFullyQualifiedShowName(show)}
{getFullyQualifiedMediaName(show)}
</Card.Title>
</Card.Header>
<Card.Content>