Files
reiverr/src/App.svelte
2024-04-09 21:20:23 +03:00

72 lines
2.4 KiB
Svelte

<script lang="ts">
import I18n from './lib/components/Lang/I18n.svelte';
import { Route, Router } from 'svelte-navigator';
import { handleKeyboardNavigation } from './lib/selectable';
import Container from './Container.svelte';
import BrowseSeriesPage from './lib/pages/BrowseSeriesPage.svelte';
import MoviesPage from './lib/pages/MoviesPage.svelte';
import LibraryPage from './lib/pages/LibraryPage.svelte';
import ManagePage from './lib/pages/ManagePage.svelte';
import SearchPage from './lib/pages/SearchPage.svelte';
import SeriesPage from './lib/components/SeriesPage/SeriesPage.svelte';
import Sidebar from './lib/components/Sidebar/Sidebar.svelte';
import LoginPage from './lib/pages/LoginPage.svelte';
import { appState } from './lib/stores/app-state.store';
import MoviePage from './lib/pages/MoviePage.svelte';
import ModalStack from './lib/components/Modal/ModalStack.svelte';
import PageNotFound from './lib/pages/PageNotFound.svelte';
appState.subscribe((s) => console.log('appState', s));
</script>
<I18n />
<Container class="w-full h-full overflow-auto bg-stone-950 text-white">
{#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>
</div>
{:else if $appState.user === null}
<LoginPage />
{:else}
<Router>
<Container class="flex flex-col" direction="horizontal" trapFocus>
<Sidebar />
<Route path="/">
<BrowseSeriesPage />
</Route>
<Route path="movies/*">
<MoviesPage />
</Route>
<Route path="library/*">
<LibraryPage />
</Route>
<Route path="manage">
<ManagePage />
</Route>
<Route path="search">
<SearchPage />
</Route>
<Route path="movie/:id" component={MoviePage} />
<Route path="*">
<PageNotFound />
</Route>
</Container>
</Router>
<Router>
<Route path="movies/movie/:id" component={MoviePage} />
<Route path="library/movie/:id" component={MoviePage} />
<Route path="series/:id" component={SeriesPage} />
<Route path="library/series/:id" component={SeriesPage} />
</Router>
<ModalStack />
{/if}
</Container>
<svelte:window on:keydown={handleKeyboardNavigation} />