diff --git a/Writerside/topics/configuration-frontend.md b/Writerside/topics/configuration-frontend.md index 27edabc..1ff7187 100644 --- a/Writerside/topics/configuration-frontend.md +++ b/Writerside/topics/configuration-frontend.md @@ -2,20 +2,11 @@ ## Environment Variables -### `PUBLIC_WEB_SSR` - -Enables/disables Server-Side Rendering. (this is experimental). Default is `false`. Example: `true`. - ### `PUBLIC_API_URL` You (the browser) must reach the backend from this url. Default is `http://localhost:8000/api/v1`. Example: `https://mediamanager.example.com/api/v1`. -### `PUBLIC_SSR_API_URL` - -The frontend container must reach the backend from this url. Default is `http://localhost:8000/api/v1`. Example: -`http://backend:8000/api/v1`. - ## Build Arguments (web/Dockerfile) **TODO: expand on this section** @@ -23,12 +14,12 @@ The frontend container must reach the backend from this url. Default is `http:// To configure a url base path for the frontend, you need to build the frontend docker container, this is because unfortunately SvelteKit needs to know the base path at build time. -### `VERSION` - -Sets the `PUBLIC_VERSION` environment variable at runtime in the frontend container. Passed during build. Example (in -build command): `docker build --build-arg VERSION=1.2.3 -f web/Dockerfile .` - ### `BASE_URL` Sets the base url path, it must begin with a slash and not end with one. Example (in build command): `docker build --build-arg BASE_URL=/media -f web/Dockerfile .` + +### `VERSION` + +Sets the `PUBLIC_VERSION` environment variable at runtime in the frontend container. Passed during build. Example (in +build command): `docker build --build-arg VERSION=1.2.3 -f web/Dockerfile .` \ No newline at end of file diff --git a/docker-compose.yaml b/docker-compose.yaml index facb639..0145697 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -52,7 +52,6 @@ services: - ./cache:/app/cache environment: - PUBLIC_API_URL=http://localhost:8000/api/v1 - - PUBLIC_SSR_API_URL=http://backend:8000/api/v1 db: image: postgres:latest restart: unless-stopped diff --git a/web/src/lib/components/add-show-card.svelte b/web/src/lib/components/add-show-card.svelte index 90ab01d..ad4efdb 100644 --- a/web/src/lib/components/add-show-card.svelte +++ b/web/src/lib/components/add-show-card.svelte @@ -6,10 +6,8 @@ import {goto} from '$app/navigation'; import {base} from '$app/paths'; import type {MetaDataProviderShowSearchResult} from '$lib/types.js'; - import {toOptimizedURL} from 'sveltekit-image-optimize/components'; - import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let loading = $state(false); let errorMessage = $state(null); let {result}: { result: MetaDataProviderShowSearchResult } = $props(); @@ -51,7 +49,7 @@ {#if result.poster_path != null} {result.name}'s Poster Image {:else} diff --git a/web/src/lib/components/download-season-dialog.svelte b/web/src/lib/components/download-season-dialog.svelte index 83a8152..1662344 100644 --- a/web/src/lib/components/download-season-dialog.svelte +++ b/web/src/lib/components/download-season-dialog.svelte @@ -12,9 +12,8 @@ import * as Tabs from '$lib/components/ui/tabs/index.js'; import * as Select from '$lib/components/ui/select/index.js'; import * as Table from '$lib/components/ui/table/index.js'; - import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let {show} = $props(); let dialogueState = $state(false); let selectedSeasonNumber: number = $state(1); diff --git a/web/src/lib/components/login-form.svelte b/web/src/lib/components/login-form.svelte index 527ca40..b938b81 100644 --- a/web/src/lib/components/login-form.svelte +++ b/web/src/lib/components/login-form.svelte @@ -10,7 +10,7 @@ import LoadingBar from '$lib/components/loading-bar.svelte'; import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let {oauthProvider} = $props(); let oauthProviderName = $derived(oauthProvider.oauth_name); diff --git a/web/src/lib/components/request-season-dialog.svelte b/web/src/lib/components/request-season-dialog.svelte index 2d2db1b..abafcae 100644 --- a/web/src/lib/components/request-season-dialog.svelte +++ b/web/src/lib/components/request-season-dialog.svelte @@ -10,7 +10,7 @@ import {toast} from 'svelte-sonner'; import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let {show}: { show: PublicShow } = $props(); let dialogOpen = $state(false); diff --git a/web/src/lib/components/season-requests-table.svelte b/web/src/lib/components/season-requests-table.svelte index 58d02f2..c2eda17 100644 --- a/web/src/lib/components/season-requests-table.svelte +++ b/web/src/lib/components/season-requests-table.svelte @@ -9,9 +9,8 @@ import {toast} from 'svelte-sonner'; import {goto} from '$app/navigation'; import {base} from '$app/paths'; - import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let { requests, filter = () => { diff --git a/web/src/lib/components/show-picture.svelte b/web/src/lib/components/show-picture.svelte new file mode 100644 index 0000000..7e2a05f --- /dev/null +++ b/web/src/lib/components/show-picture.svelte @@ -0,0 +1,24 @@ + + + + + + {getFullyQualifiedShowName(show)}'s Poster Image + \ No newline at end of file diff --git a/web/src/lib/components/user-data-table.svelte b/web/src/lib/components/user-data-table.svelte index 7305236..2345b25 100644 --- a/web/src/lib/components/user-data-table.svelte +++ b/web/src/lib/components/user-data-table.svelte @@ -11,7 +11,7 @@ import {Input} from '$lib/components/ui/input/index.js'; import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let {users}: { users: User[] } = $props(); let sortedUsers = $derived(users.sort((a, b) => a.email.localeCompare(b.email))); let selectedUser: User | null = $state(null); diff --git a/web/src/lib/components/user-settings.svelte b/web/src/lib/components/user-settings.svelte index 0091df5..e2bd6dc 100644 --- a/web/src/lib/components/user-settings.svelte +++ b/web/src/lib/components/user-settings.svelte @@ -7,7 +7,7 @@ import {Input} from '$lib/components/ui/input/index.js'; import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let newPassword: string = $state(''); let newEmail: string = $state(''); let dialogOpen = $state(false); diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts index 71d218f..3df5efd 100644 --- a/web/src/lib/utils.ts +++ b/web/src/lib/utils.ts @@ -6,7 +6,7 @@ import {base} from '$app/paths'; import {toast} from 'svelte-sonner'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const qualityMap: { [key: number]: string } = { 1: '4K/UHD', diff --git a/web/src/routes/+layout.server.ts b/web/src/routes/+layout.server.ts deleted file mode 100644 index 65e7a1f..0000000 --- a/web/src/routes/+layout.server.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {env} from '$env/dynamic/public'; - -let ssrMode = false -if (env.PUBLIC_WEB_SSR == undefined) { - ssrMode = false; -} else { - ssrMode = env.PUBLIC_WEB_SSR.toLowerCase() == 'true'; -} -console.log('SSR Mode:', ssrMode); -export const ssr = ssrMode; \ No newline at end of file diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts new file mode 100644 index 0000000..5829b7e --- /dev/null +++ b/web/src/routes/+layout.ts @@ -0,0 +1 @@ +export const ssr = false; \ No newline at end of file diff --git a/web/src/routes/dashboard/+layout.ts b/web/src/routes/dashboard/+layout.ts index f4f7dd3..0643c65 100644 --- a/web/src/routes/dashboard/+layout.ts +++ b/web/src/routes/dashboard/+layout.ts @@ -5,7 +5,7 @@ import {base} from '$app/paths'; import {browser} from "$app/environment"; import {goto} from '$app/navigation'; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: LayoutLoad = async ({fetch}) => { const response = await fetch(apiUrl + '/users/me', { diff --git a/web/src/routes/dashboard/+page.ts b/web/src/routes/dashboard/+page.ts index dd48024..5bdc044 100644 --- a/web/src/routes/dashboard/+page.ts +++ b/web/src/routes/dashboard/+page.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {PageLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: PageLoad = async ({fetch}) => { const response = await fetch(apiUrl + '/tv/recommended', { diff --git a/web/src/routes/dashboard/settings/+page.ts b/web/src/routes/dashboard/settings/+page.ts index f293d7c..e123170 100644 --- a/web/src/routes/dashboard/settings/+page.ts +++ b/web/src/routes/dashboard/settings/+page.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {PageLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: PageLoad = async ({fetch}) => { try { const users = await fetch(apiUrl + '/users/all', { diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte index 622f475..9a01e88 100644 --- a/web/src/routes/dashboard/tv/+page.svelte +++ b/web/src/routes/dashboard/tv/+page.svelte @@ -5,12 +5,12 @@ 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 {toOptimizedURL} from 'sveltekit-image-optimize/components'; import {getFullyQualifiedShowName} from '$lib/utils'; import logo from '$lib/images/svelte-logo.svg'; import LoadingBar from '$lib/components/loading-bar.svelte'; + import ShowPicture from "$lib/components/show-picture.svelte"; - const apiUrl = env.PUBLIC_SSR_API_URL + const apiUrl = env.PUBLIC_API_URL let tvShowsPromise = page.data.tvShows; @@ -63,14 +63,7 @@ {show.overview} - {getFullyQualifiedShowName(show)}'s Poster Image { - e.target.src = logo; - }} - /> + diff --git a/web/src/routes/dashboard/tv/+page.ts b/web/src/routes/dashboard/tv/+page.ts index 8902714..304a034 100644 --- a/web/src/routes/dashboard/tv/+page.ts +++ b/web/src/routes/dashboard/tv/+page.ts @@ -1,8 +1,7 @@ import {env} from '$env/dynamic/public'; import type {PageLoad} from './$types'; -import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: PageLoad = async ({fetch}) => { const response = fetch(apiUrl + '/tv/shows', { diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts b/web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts index ab51e6b..32acd39 100644 --- a/web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts +++ b/web/src/routes/dashboard/tv/[showId=uuid]/+layout.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {LayoutLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: LayoutLoad = async ({params, fetch}) => { const showId = params.showId; diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte index 23fcd3a..75dbcc4 100644 --- a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte +++ b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte @@ -1,126 +1,122 @@
-
+
- - - + + + - -
+ + {getFullyQualifiedShowName(show())} + + + +

- {getFullyQualifiedShowName(show())} + {getFullyQualifiedShowName(show())}

-
-
- {#if show().id} - {show().name}'s Poster Image - {:else} -
+
+ {#if show().id} + + {:else} +
+ > -
- {/if} -
-
-

- {show().overview} -

-
-
+ {/if} +
+
+

+ {show().overview} +

+
+
- {#if user().is_superuser} + > + {#if user().is_superuser} - {/if} + {/if} -
-
-
-
- - A list of all seasons. - - - Number - Exists on file - Title - Overview - - - - {#if show().seasons.length > 0} - {#each show().seasons as season (season.id)} - +
+
+
+ + A list of all seasons. + + + Number + Exists on file + Title + Overview + + + + {#if show().seasons.length > 0} + {#each show().seasons as season (season.id)} + goto('/dashboard/tv/' + show().id + '/' + season.id)} - > - {season.number} - + onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)} + > + {season.number} + - - {season.name} - {season.overview} - - {/each} - {:else} - - No season data available. - - {/if} - - -
-
-
-
+ + {season.name} + {season.overview} + + {/each} + {:else} + + No season data available. + + {/if} + + +
+
+
+
-
-
+
+
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte index c42b767..c56d9e8 100644 --- a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte +++ b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte @@ -8,11 +8,11 @@ import type {PublicSeasonFile, Season, Show} from '$lib/types'; import CheckmarkX from '$lib/components/checkmark-x.svelte'; import {getFullyQualifiedShowName, getTorrentQualityString} from '$lib/utils'; - import {toOptimizedURL} from "sveltekit-image-optimize/components"; import {env} from "$env/dynamic/public"; import {browser} from "$app/environment"; + import ShowPicture from "$lib/components/show-picture.svelte"; - const apiUrl = env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL const SeasonNumber = page.params.SeasonNumber; let seasonFiles: PublicSeasonFile[] = $state(page.data.files); let show: Show = getContext('show'); @@ -61,11 +61,7 @@
- {show().name}'s Poster Image +

diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.ts b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.ts index 4491885..7b9faa9 100644 --- a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.ts +++ b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {PageLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: PageLoad = async ({fetch, params}) => { const url = `${apiUrl}/tv/seasons/${params.SeasonId}/files`; diff --git a/web/src/routes/dashboard/tv/add-show/+page.svelte b/web/src/routes/dashboard/tv/add-show/+page.svelte index e8d6006..081cfad 100644 --- a/web/src/routes/dashboard/tv/add-show/+page.svelte +++ b/web/src/routes/dashboard/tv/add-show/+page.svelte @@ -14,7 +14,7 @@ import {toast} from 'svelte-sonner'; import {browser} from "$app/environment"; - const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; + const apiUrl = env.PUBLIC_API_URL let searchTerm: string = $state(''); let metadataProvider: string = $state('tmdb'); let results: MetaDataProviderShowSearchResult[] | null = $state(null); diff --git a/web/src/routes/dashboard/tv/requests/+layout.ts b/web/src/routes/dashboard/tv/requests/+layout.ts index fd6390f..6e597a3 100644 --- a/web/src/routes/dashboard/tv/requests/+layout.ts +++ b/web/src/routes/dashboard/tv/requests/+layout.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {LayoutLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: LayoutLoad = async ({fetch}) => { try { const requests = await fetch(`${apiUrl}/tv/seasons/requests`, { diff --git a/web/src/routes/dashboard/tv/torrents/+page.ts b/web/src/routes/dashboard/tv/torrents/+page.ts index dbf6557..3c29153 100644 --- a/web/src/routes/dashboard/tv/torrents/+page.ts +++ b/web/src/routes/dashboard/tv/torrents/+page.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {PageLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: PageLoad = async ({fetch}) => { const response = await fetch(apiUrl + '/tv/shows/torrents', { diff --git a/web/src/routes/login/+page.ts b/web/src/routes/login/+page.ts index 50d1f0c..8312d19 100644 --- a/web/src/routes/login/+page.ts +++ b/web/src/routes/login/+page.ts @@ -2,7 +2,7 @@ import {env} from '$env/dynamic/public'; import type {PageLoad} from './$types'; import {browser} from "$app/environment"; -const apiUrl = browser ? env.PUBLIC_API_URL : env.PUBLIC_SSR_API_URL; +const apiUrl = env.PUBLIC_API_URL; export const load: PageLoad = async ({fetch}) => { const response = await fetch(apiUrl + '/auth/metadata', {