nwpie/reiverr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: Optimize stack router performance

Browse Source
This commit is contained in:
Aleksi Lassila
2024-05-30 17:28:28 +03:00
parent 12edf92754
commit 9b08885afa
10 changed files with 63 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/App.svelte
View File

@@ -30,48 +30,47 @@
</script>
<I18n />
<Container class="w-full h-full overflow-auto text-white scrollbar-hide">
{#if $appState.user === undefined}
<div class="h-full w-full flex flex-col items-center justify-center">
<div class="flex items-center justify-center hover:text-inherit selectable rounded-sm mb-2">
<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />
<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
</div>
<div>Loading...</div>
<!--<Container class="w-full h-full overflow-auto text-white scrollbar-hide">-->
{#if $appState.user === undefined}
<div class="h-full w-full flex flex-col items-center justify-center">
<div class="flex items-center justify-center hover:text-inherit selectable rounded-sm mb-2">
<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />
<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
</div>
{:else if $appState.user === null}
<LoginPage />
{:else if $appState.user.onboardingDone === false}
<OnboardingPage />
{:else}
<!-- <Router primary={false}>-->
<Container class="flex flex-col relative" direction="horizontal" trapFocus>
<Sidebar />
<!-- <Route path="series/*">-->
<!-- <SeriesHomePage />-->
<!-- </Route>-->
<!-- <Route path="movies/*">-->
<!-- <MoviesHomePage />-->
<!-- </Route>-->
<!-- <Route path="library/*">-->
<!-- <LibraryPage />-->
<!-- </Route>-->
<!-- <Route path="manage">-->
<!-- <ManagePage />-->
<!-- </Route>-->
<!-- <Route path="search">-->
<!-- <SearchPage />-->
<!-- </Route>-->
<!-- <Route path="*">-->
<!-- <PageNotFound />-->
<!-- </Route>-->
<StackRouter stack={defaultStackRouter} />
</Container>
<!-- </Router>-->
<div>Loading...</div>
</div>
{:else if $appState.user === null}
<LoginPage />
{:else if $appState.user.onboardingDone === false}
<OnboardingPage />
{:else}
<!-- <Router primary={false}>-->
<!-- <Container class="flex flex-col relative" direction="horizontal" trapFocus>-->
<!-- <Route path="series/*">-->
<!-- <SeriesHomePage />-->
<!-- </Route>-->
<!-- <Route path="movies/*">-->
<!-- <MoviesHomePage />-->
<!-- </Route>-->
<!-- <Route path="library/*">-->
<!-- <LibraryPage />-->
<!-- </Route>-->
<!-- <Route path="manage">-->
<!-- <ManagePage />-->
<!-- </Route>-->
<!-- <Route path="search">-->
<!-- <SearchPage />-->
<!-- </Route>-->
<!-- <Route path="*">-->
<!-- <PageNotFound />-->
<!-- </Route>-->
<StackRouter stack={defaultStackRouter} />
<!-- </Container>-->
<!-- </Router>-->
<ModalStack />
{/if}
</Container>
<ModalStack />
{/if}
<!--</Container>-->
<NavigationDebugger />

20
src/lib/components/DetachedPage/DetachedPage.svelte
View File

@@ -10,7 +10,7 @@
// Top element, that when focused and back is pressed, will exit the modal
const topSelectable = useRegistrar();
function handleGoBack({ detail }: CustomEvent<KeyEvent> | CustomEvent<NavigateEvent>) {
function handleGoBack() {
// if ('willLeaveContainer' in detail) {
// if (detail.direction !== 'left' || !detail.willLeaveContainer) return;
// detail.preventNavigation();
@@ -24,18 +24,11 @@
}
}
function handleGoToTop({ detail }: CustomEvent<KeyEvent> | CustomEvent<NavigateEvent>) {
if ('willLeaveContainer' in detail) {
// Navigate event
// if (detail.direction === 'left' && detail.willLeaveContainer) {
// detail.preventNavigation();
// get(topSelectable)?.focus();
// }
} else {
// Back event
const selectable = get(topSelectable);
function handleGoToTop() {
const selectable = get(topSelectable);
if (topSelectable) {
selectable?.focusChild(0) || selectable?.focus();
}
} else handleGoBack();
}
</script>
@@ -44,11 +37,12 @@
hidden: !topmost
})}
trapFocus
focusOnMount
direction="horizontal"
on:mount
>
<Sidebar />
<Container on:back={handleGoToTop} focusOnMount>
<Container on:back={handleGoToTop} focusOnMount class={classNames($$restProps.class)}>
<slot {handleGoBack} registrar={topSelectable.registrar} />
</Container>
</Container>

1
src/lib/components/Modal/ModalStack.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { modalStack, modalStackTop } from './modal.store';
import { onDestroy } from 'svelte';
import classNames from 'classnames';
// function handleShortcuts(event: KeyboardEvent) {
// const top = $modalStackTop;

3
src/lib/components/StackRouter/StackRouter.ts
View File

@@ -251,8 +251,7 @@ export const defaultStackRouter = useStackRouter({
searchRoute,
manageRoute
],
notFound: notFoundRoute,
maxDepth: 3
notFound: notFoundRoute
});
// export const defaultStackRouter = useStackRouter({
// '/': {

5
src/lib/pages/LibraryPage.svelte
View File

@@ -7,6 +7,7 @@
import CardGrid from '../components/CardGrid.svelte';
import JellyfinCard from '../components/Card/JellyfinCard.svelte';
import { scrollIntoView } from '../selectable';
import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
const libraryItemsP = jellyfinApi.getLibraryItems();
@@ -22,7 +23,7 @@
}));
</script>
<Container focusOnMount class="px-32 py-16">
<DetachedPage class="px-32 py-16">
<div class="mb-6">
<div class="header2">Library</div>
</div>
@@ -40,4 +41,4 @@
{/each}
{/await}
</CardGrid>
</Container>
</DetachedPage>

5
src/lib/pages/ManagePage.svelte
View File

@@ -19,6 +19,7 @@
import { ArrowRight, Trash } from 'radix-icons-svelte';
import TmdbIntegrationConnectDialog from '../components/Integrations/TmdbIntegrationConnectDialog.svelte';
import { createModal } from '../components/Modal/modal.store';
import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
enum Tabs {
Interface,
@@ -127,7 +128,7 @@
}}
/>
<Container class="px-32 py-16" focusOnMount>
<DetachedPage class="px-32 py-16">
<Container
direction="horizontal"
class="flex space-x-8 header2 pb-3 border-b-2 border-secondary-700 w-full mb-8"
@@ -313,4 +314,4 @@
</div>
</Tab>
</Container>
</Container>
</DetachedPage>

1
src/lib/pages/MoviePage.svelte
View File

@@ -82,7 +82,6 @@
direction="horizontal"
class="flex mt-8"
focusOnMount
on:navigate={handleGoBack}
on:back={handleGoBack}
{registrar}
>

5
src/lib/pages/MoviesHomePage.svelte
View File

@@ -10,6 +10,7 @@
import { formatDateToYearMonthDay } from '../utils';
import TmdbCard from '../components/Card/TmdbCard.svelte';
import { navigate } from '../components/StackRouter/StackRouter';
import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
const continueWatching = jellyfinApi.getContinueWatching('movie');
const recentlyAdded = jellyfinApi.getRecentlyAdded('movie');
@@ -59,7 +60,7 @@
}
</script>
<Container focusOnMount class="flex flex-col">
<DetachedPage class="flex flex-col relative">
<div class="h-[calc(100vh-12rem)] flex px-32">
<HeroShowcase
items={recommendedMovies.then(({ top10 }) => getShowcasePropsFromTmdbMovie(top10))}
@@ -202,4 +203,4 @@
<!-- TRENDING PEOPLE -->
<!-- Watchlist -->
</div>
</Container>
</DetachedPage>

5
src/lib/pages/SearchPage.svelte
View File

@@ -9,6 +9,7 @@
import { scrollIntoView } from '../selectable';
import AnimateScale from '../components/AnimateScale.svelte';
import type { Readable } from 'svelte/store';
import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
let searchQuery = '';
let typingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
@@ -36,7 +37,7 @@
});
</script>
<Container class="px-32 py-16 h-screen flex flex-col" focusOnMount>
<DetachedPage class="px-32 py-16 h-screen flex flex-col">
<Container
direction="horizontal"
class={classNames('header2 pb-3 border-b-2 w-full mb-4', {
@@ -80,4 +81,4 @@
{/await}
{/if}
</div>
</Container>
</DetachedPage>

5
src/lib/pages/SeriesHomePage.svelte
View File

@@ -12,6 +12,7 @@
import TmdbCard from '../components/Card/TmdbCard.svelte';
import { navigate } from '../components/StackRouter/StackRouter';
import { TMDB_SERIES_GENRES } from '../apis/tmdb/tmdb-api.js';
import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
const continueWatching = jellyfinApi.getContinueWatchingSeries();
const recentlyAdded = jellyfinApi.getRecentlyAdded('series');
@@ -53,7 +54,7 @@
}
</script>
<Container focusOnMount class="flex flex-col">
<DetachedPage class="flex flex-col relative">
<div class="h-[calc(100vh-12rem)] flex px-32">
<HeroShowcase
items={recommendations.then(({ top10 }) => getShowcasePropsFromTmdbSeries(top10))}
@@ -196,4 +197,4 @@
<!-- TRENDING PEOPLE -->
<!-- Watchlist -->
</div>
</Container>
</DetachedPage>