starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-26 18:55:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Detached pages and fix navigation actions

Browse Source
This commit is contained in:
Aleksi Lassila
2024-03-31 12:43:48 +03:00
parent 5b18c95766
commit b5b96bf3e5
14 changed files with 143 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/pages/BrowseSeriesPage.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Container from '../../Container.svelte';
import { getPosterProps, getTmdbPopularMovies, TmdbApiOpen } from '../apis/tmdb/tmdb-api';
import { getPosterProps, tmdbApi, TmdbApiOpen } from '../apis/tmdb/tmdb-api';
import { formatDateToYearMonthDay } from '../utils';
import { settings } from '../stores/settings.store';
import type { TitleType } from '../types';
@@ -62,8 +62,6 @@
.then((res) => res.data?.results || [])
.then((i) => fetchCardProps(i, 'series'));
const fetchPopularMovies = () => getTmdbPopularMovies();
// const fetchLibraryItems = async () => {
// const items = await getJellyfinItems();
// const props = await fetchCardProps(items, 'series');
@@ -78,7 +76,7 @@
<Container focusOnMount>
<div class="h-screen flex flex-col">
<HeroShowcase items={getTmdbPopularMovies().then(getShowcasePropsFromTmdb)} />
<HeroShowcase items={tmdbApi.getPopularMovies().then(getShowcasePropsFromTmdb)} />
<div class="mt-8">
<Carousel scrollClass="">
<SidebarMargin slot="title" class="mx-4">

38
src/lib/pages/MoviesPage.svelte
View File

@@ -1,5 +1,41 @@
<script lang="ts">
import Container from '../../Container.svelte';
import HeroShowcase from '../components/HeroShowcase/HeroShowcase.svelte';
import { tmdbApi } from '../apis/tmdb/tmdb-api';
import { getShowcasePropsFromTmdb } from '../components/HeroShowcase/HeroShowcase';
import Carousel from '../components/Carousel/Carousel.svelte';
import SidebarMargin from '../components/SidebarMargin.svelte';
import { _ } from 'svelte-i18n';
import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
import TmdbCard from '../components/Card/TmdbCard.svelte';
import Button from '../components/Button.svelte';
import { useNavigate } from 'svelte-navigator';
const popularMovies = tmdbApi.getPopularMovies();
const navigate = useNavigate();
</script>
<Container focusOnMount>MoviesPage</Container>
<Container focusOnMount class="flex flex-col">
<div class="flex flex-col h-screen">
<HeroShowcase items={popularMovies.then(getShowcasePropsFromTmdb)} />
<div class="mt-8">
<Carousel>
<SidebarMargin slot="title" class="mx-4">
<div class="text-xl font-semibold text-zinc-300">
{$_('discover.streamingNow')}
</div>
</SidebarMargin>
{#await popularMovies}
<CarouselPlaceholderItems />
{:then items}
<div class="w-[4.5rem] h-1 shrink-0" />
{#each items as item (item.id)}
<div class="m-2">
<TmdbCard {item} />
</div>
{/each}
{/await}
</Carousel>
</div>
</div>
</Container>