feat(web/server) public album sharing (#1266)

web/src/routes/share/[key]/+error.svelte

@@ -0,0 +1,9 @@
+<svelte:head>
+	<title>Opps! Error - Immich</title>
+</svelte:head>
+
+<section class="w-screen h-screen flex place-items-center place-content-center">
+	<div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">
+		Page not found :/
+	</div>
+</section>

web/src/routes/share/[key]/+page.server.ts

@@ -0,0 +1,18 @@
+export const prerender = false;
+import { error } from '@sveltejs/kit';
+
+import { serverApi } from '@api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const { key } = params;
+
+	try {
+		const { data: sharedLink } = await serverApi.shareApi.getMySharedLink({ params: { key } });
+		return { sharedLink };
+	} catch (e) {
+		throw error(404, {
+			message: 'Invalid shared link'
+		});
+	}
+};

web/src/routes/share/[key]/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import { AlbumResponseDto } from '../../../api';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	let album: AlbumResponseDto | null = null;
+	if (data.sharedLink.album) {
+		album = { ...data.sharedLink.album, assets: data.sharedLink.assets };
+	}
+</script>
+
+<svelte:head>
+	<title>{data.sharedLink.album?.albumName || 'Public Shared'} - Immich</title>
+</svelte:head>
+
+{#if album}
+	<div class="immich-scrollbar">
+		<AlbumViewer {album} sharedLink={data.sharedLink} />
+	</div>
+{/if}

web/src/routes/share/[key]/photos/[assetId]/+page.server.ts

@@ -0,0 +1,21 @@
+export const prerender = false;
+import { error } from '@sveltejs/kit';
+
+import { serverApi } from '@api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	try {
+		const { key, assetId } = params;
+		const { data: asset } = await serverApi.assetApi.getAssetById(assetId, {
+			params: { key }
+		});
+
+		if (!asset) {
+			return error(404, 'Asset not found');
+		}
+		return { asset, key };
+	} catch (e) {
+		console.log('Error', e);
+	}
+};

web/src/routes/share/[key]/photos/[assetId]/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+	export let data: PageData;
+</script>
+
+{#if data.asset && data.key}
+	<AssetViewer
+		asset={data.asset}
+		publicSharedKey={data.key}
+		on:navigate-previous={() => null}
+		on:navigate-next={() => null}
+		showNavigation={false}
+		on:close={() => goto(`/share/${data.key}`)}
+	/>
+{/if}