starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-21 16:25:36 +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

33
web/src/lib/components/recommended-media-carousel.svelte
View File

@@ -3,14 +3,39 @@
import * as Carousel from '$lib/components/ui/carousel/index.js';
import type {MetaDataProviderShowSearchResult} from '$lib/types';
import AddMediaCard from '$lib/components/add-media-card.svelte';
import {Skeleton} from "$lib/components/ui/skeleton";
import {Button} from "$lib/components/ui/button";
import {ChevronDown, ChevronRight} from "lucide-svelte";
let {media, isShow}: { media: MetaDataProviderShowSearchResult[], isShow: boolean } = $props();
let {media, isShow, isLoading}: {
media: MetaDataProviderShowSearchResult[],
isShow: boolean,
isLoading: boolean
} = $props();
</script>
<div class="grid w-full gap-4 sm:grid-cols-1
md:grid-cols-2 lg:grid-cols-3">
{#each media.slice(0, 3) as mediaItem}
<AddMediaCard isShow={isShow} result={mediaItem}/>
{/each}
{#if isLoading}
<Skeleton class="w-full h-[70vh]"/>
<Skeleton class="w-full h-[70vh]"/>
<Skeleton class="w-full h-[70vh]"/>
{:else }
{#each media.slice(0, 3) as mediaItem}
<AddMediaCard isShow={isShow} result={mediaItem}/>
{/each}
{/if}
{#if isShow}
<Button class="md:col-start-2" variant="secondary" href="/dashboard/tv/add-show">
More recommendations
<ChevronRight/>
</Button>
{:else }
<Button class="md:col-start-2" variant="secondary" href="/dashboard/movies/add-movie">
More recommendations
<ChevronRight/>
</Button>
{/if}
</div>