Add responsive and lazy image loading

src/routes/[slug]/[[timestamp]]/+page.server.js

@@ -0,0 +1,12 @@
+import { getMetadata } from '$lib/util/album';
+import { getAlbumUri, getZipName } from '$lib/util/links';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+  const album = await getMetadata(getZipName(params));
+  const base = getAlbumUri(params);
+
+  return {
+    album, base
+  };
+}

src/routes/[slug]/[[timestamp]]/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { str, strf } from '$lib/data/language.js';
+
+  import Header from '$lib/components/Header.svelte';
+  import Gallery from '$lib/components/Gallery.svelte';
+
+  /** @type {import('./$types').PageData} */
+  export let data;
+
+  //const uriBase = `/s/apitest.php?slug=${data.slug}` + (data.timestamp ? `&timestamp=${data.timestamp}` : '');
+</script>
+
+<Header title={$strf(data.album.title)}/>
+<p>
+  <b>Description:</b> {#if data.album.description}{$strf(data.album.description)}{:else}<i>no description</i>{/if}<br />
+  <b>Authors: </b> {#if data.album.authors}{Array.isArray(data.album.authors) ? data.album.authors.join(', ') : data.album.authors}{:else}<i>unknown author</i>{/if}<br />
+  <b>Sorting Date:</b> {data.album.date}<br />
+  <b>License:</b> {data.album.license}<br />
+</p>
+<Gallery items={data.album.items} base={`${data.base}/i/`} />

src/routes/[slug]/[[timestamp]]/download/+server.js

@@ -0,0 +1,34 @@
+import { getMetadata } from '$lib/util/album';
+import { getZipName } from '$lib/util/links';
+import { error } from '@sveltejs/kit';
+import fs from 'node:fs/promises';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params, url }) {
+  try {
+    const zipName = getZipName(params);
+    const album = await getMetadata(zipName);
+    const allowDownload = album.allowDownload === false ? false : true;
+    if (!allowDownload) {
+      throw error(403, 'Forbidden');
+    }
+    if (url.searchParams.get('type') === 'json') {
+      return new Response(JSON.stringify(album), {
+        headers: {
+          'Content-Type': 'application/json',
+          'Content-Disposition': 'inline'
+        }
+      });
+    } else {
+      const content = await fs.readFile(`./zip/${zipName}`);
+      return new Response(content, {
+        headers: {
+          'Content-Type': 'application/zip',
+          'Content-Disposition': `attachment; filename="${zipName}"`
+        }
+      });
+    }
+  } catch (err) {
+    throw error(404, 'Not found');
+  }
+}

src/routes/[slug]/[[timestamp]]/i/[...item]/+page.server.js

@@ -0,0 +1,14 @@
+import { getMetadata } from '$lib/util/album';
+import { getFileName, getFilePath, getZipName } from '$lib/util/links.js';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+  const album = await getMetadata(getZipName(params));
+  const filePath = getFilePath(params.item);
+  const item = album.items.find(item => item.item === filePath);
+
+  return {
+    item,
+    filename: getFileName(params.item)
+  }
+};

src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { strf } from '$lib/data/language';
+
+  /** @type {import('./$types').PageData} */
+  export let data;
+</script>
+
+<div class="container">
+  {#if data.item}
+    <img class="image" src="{data.filename}/t/full" alt={(data.item.title ? $strf(data.item.title) : null) || (data.item.description ? $strf(data.item.description) : null) || data.filename} />
+  {:else}
+    Deine Mudda
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+  }
+  .image {
+    max-width: 100%;
+    max-height: 100vh;
+  }
+</style>

src/routes/[slug]/[[timestamp]]/i/[...item]/download/+server.js

@@ -0,0 +1,34 @@
+import { getMetadataAndFile } from '$lib/util/album';
+import { getZipName, getFileName, getFilePath } from '$lib/util/links';
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+  try {
+    const {album, content} = await getMetadataAndFile(getZipName(params), getFilePath(params.item));
+    const allowDownload = album.allowDownload === false ? false : true;
+    if (!allowDownload) {
+      throw error(403, 'Forbidden');
+    }
+    const filename = getFileName(params.item);
+    const ext = filename.split('.').pop() || 'any';
+    const mimes = new Map([
+      ['jpg', 'image/jpeg'],
+      ['png', 'image/png'],
+      ['webp', 'image/webp'],
+      ['avif', 'image/avif'],
+      ['mp4', 'video/mp4'],
+      ['any', 'application/octet-stream']
+    ]);
+    const mime = mimes.get(ext) || 'application/octet-stream';
+    return new Response(content, {
+      headers: {
+        'Content-Type': mime,
+        'Content-Disposition': `attachment; filename="${filename}"`
+      }
+    });
+  } catch (err) {
+    console.error(err);
+    throw error(404, 'Not found');
+  }
+}

src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/+server.js

@@ -0,0 +1,37 @@
+import { getFile } from '$lib/util/album';
+import { getFileName, getFilePath, getZipName } from '$lib/util/links';
+import { error } from '@sveltejs/kit';
+import sharp from 'sharp';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+  let thumbnail = null;
+  console.log(`Getting thumbnail for ${params}`);
+  let width = 400;
+  try {
+    const content = await getFile(getZipName(params), getFilePath(params.item));
+    if (params.width) {
+      if (params.width === 'full') {
+        thumbnail = await sharp(content).webp({ quality: 90 }).toBuffer();
+      } else if (params.width === 's') {
+        width = 400;
+      } else if (params.width === 'm') {
+        width = 800;
+      } else if (params.width === 'l') {
+        width = 1200;
+      } else if (!Number.isNaN(Number(params.width))) {
+        width = Number(width);
+      }
+    }
+    thumbnail = thumbnail || await sharp(content).resize(width).webp({ quality: 90 }).toBuffer();
+  } catch (err) {
+    console.error(`${err.stack}`.replaceAll('/home/sveltekit', '.'));
+    throw error(500, 'Error getting thumbnail');
+  }
+  return new Response(thumbnail, {
+    headers: {
+      'Content-Type': 'image/webp',
+      'Content-Disposition': `inline; filename="${getFileName(params.item)}-thumb-${params.width === 'full' ? 'full' : width}.webp"`,
+    }
+  });
+}

src/routes/[slug]/[[timestamp]]/random/+server.js

@@ -0,0 +1,24 @@
+import StreamZip from 'node-stream-zip';
+import sharp from 'sharp';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+
+  let entryData = null;
+  try {
+    const zip = new StreamZip.async({ file: `./zip/${params.slug}.zip` });
+    const entries = Object.values(await zip.entries()).filter(entry => entry.name.endsWith('.jpg'));
+    const entry = entries[Math.floor(Math.random() * entries.length)];
+    const content = await zip.entryData(entry.name);
+    await zip.close();
+    entryData = await sharp(content).resize(400).avif({ quality: 70, effort: 0 }).toBuffer()
+  } catch (err) {
+    console.error(err);
+  }
+  return new Response(entryData, {
+    headers: {
+      'Content-Type': 'image/avif',
+      'Content-Disposition': 'inline'
+    }
+  });
+}