prepare frontend for release

2026-04-17 15:13:24 +02:00 · 2025-05-29 20:16:44 +02:00
parent c7b925f363
commit 727051611c
8 changed files with 98 additions and 7 deletions
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -0,0 +1,26 @@
+FROM node:24-alpine AS build
+USER node:node
+WORKDIR /app
+
+COPY --chown=node:node . .
+
+RUN npm ci
+RUN npm run build
+
+FROM node:24-alpine AS frontend
+ARG VERSION
+USER node:node
+LABEL version=${VERSION}
+LABEL description="Docker image for the web frontend of MediaManager"
+
+ENV PUBLIC_VERSION=${VERSION}
+WORKDIR /app
+
+COPY --chown=node:node package*.json ./
+COPY --chown=node:node --from=build /app/build/ ./build/
+
+RUN npm install
+
+EXPOSE 3000
+
+CMD ["node","build/index.js"]
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -25,6 +25,7 @@
 				"@lucide/svelte": "^0.503.0",
 				"@neoconfetti/svelte": "^2.0.0",
 				"@sveltejs/adapter-static": "^3.0.8",
+				"@sveltejs/enhanced-img": "^0.6.0",
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"@tailwindcss/container-queries": "^0.1.1",
@@ -3040,6 +3041,25 @@
 				"@sveltejs/kit": "^2.0.0"
 			}
 		},
+		"node_modules/@sveltejs/enhanced-img": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/enhanced-img/-/enhanced-img-0.6.0.tgz",
+			"integrity": "sha512-B9rHh6zHnFex6fWxD8rkmUsMvkAG+cZiv+5/NfXyLcDvDFqUQbcADACeioVFuUxNXDXAe3y+Ui3JVmekk8R/zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"magic-string": "^0.30.5",
+				"sharp": "^0.34.1",
+				"svelte-parse-markup": "^0.1.5",
+				"vite-imagetools": "^7.1.0",
+				"zimmerframe": "^1.1.2"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^5.0.0",
+				"svelte": "^5.0.0",
+				"vite": ">= 5.0.0"
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "2.20.8",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.8.tgz",
@@ -4489,6 +4509,16 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/imagetools-core": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-7.1.0.tgz",
+			"integrity": "sha512-8Aa4NecBBGmTkaAUjcuRYgTPKHCsBEWYmCnvKCL6/bxedehtVVFyZPdXe8DD0Nevd6UWBq85ifUaJ8498lgqNQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -5981,6 +6011,19 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/svelte-parse-markup": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/svelte-parse-markup/-/svelte-parse-markup-0.1.5.tgz",
+			"integrity": "sha512-T6mqZrySltPCDwfKXWQ6zehipVLk4GWfH1zCMGgRtLlOIFPuw58ZxVYxVvotMJgJaurKi1i14viB2GIRKXeJTQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://bjornlu.com/sponsor"
+			},
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
+			}
+		},
 		"node_modules/svelte-sonner": {
 			"version": "0.3.28",
 			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
@@ -6482,6 +6525,21 @@
 				}
 			}
 		},
+		"node_modules/vite-imagetools": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-7.1.0.tgz",
+			"integrity": "sha512-Mqh1uUY2DEMuBOogFz5Rd7cAs70VP6wsdQh2IShrJ+qGk5f7yQa4pN8w0YMLlGIKYW1JfM8oXrznUwVkhG+qxg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.5",
+				"imagetools-core": "^7.1.0",
+				"sharp": "^0.34.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/vitefu": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -20,6 +20,7 @@
 		"@lucide/svelte": "^0.503.0",
 		"@neoconfetti/svelte": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.8",
+      "@sveltejs/enhanced-img": "^0.6.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/container-queries": "^0.1.1",
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -0,0 +1,3 @@
+import {env} from '$env/dynamic/public';
+
+export const ssr = (env.PUBLIC_WEB_SSR.toLowerCase() == 'true');
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import {base} from '$app/paths';
 	import {onMount} from 'svelte';

+
 	onMount(() => {
 		goto(base + '/dashboard');
 	});
--- a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonNumber=integer]/+page.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonNumber=integer]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import {page} from '$app/state';
-	import {env} from '$env/dynamic/public';
 	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';
@@ -9,6 +8,8 @@
 	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";

 	const SeasonNumber = page.params.SeasonNumber;
 	let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
@@ -61,7 +62,7 @@
 			<img
 					class="aspect-9/16 h-auto w-full rounded-lg object-cover"
 					alt="{show().name}'s Poster Image"
-					src="{env.PUBLIC_API_URL}/static/image/{show().id}.jpg"
+					src={toOptimizedURL(`${env.PUBLIC_API_URL}/static/image/${show().id}.jpg`)}
 			/>
 		</div>
 		<div class="h-full w-1/4 flex-auto rounded-xl bg-muted/50 p-4">
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import LoginForm from '$lib/components/login-form.svelte';
 	import logo from '$lib/images/logo.svg';
-	import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg';
-	import {toOptimizedURL} from 'sveltekit-image-optimize/components';
+	import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
 	import {page} from '$app/state';

 	let oauthProvider = page.data.oauthProvider;
@@ -25,10 +24,10 @@
 		</div>
 	</div>
 	<div class="relative hidden lg:block">
-		<img
+		<enhanced:img
+				src={background}
 				alt="background"
 				class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
-				src={toOptimizedURL(background)}
 		/>
 	</div>
 </div>
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,6 +1,8 @@
 import {sveltekit} from '@sveltejs/kit/vite';
 import {defineConfig} from 'vite';
+import {enhancedImages} from '@sveltejs/enhanced-img';
+

 export default defineConfig({
-    plugins: [sveltekit()]
+    plugins: [enhancedImages(), sveltekit()]
 });