thumbnailer system

clipfront2/src/App.svelte

@@ -112,7 +112,17 @@
     <Masonry bind:refreshLayout={refreshLayout} colWidth="minmax(Min(20em, 100%), 1fr)" items={displayedResults}>
         {#each displayedResults as result}
             {#key result.file}
-                <div class="result"><a href={util.getURL(result.file)}><img src={util.getURL(result.file)} on:load={updateCounter} on:error={updateCounter} alt={result.caption || result.file}></a></div>
+                <div class="result">
+                    <a href={util.getURL(result.file)}>
+                        <picture>
+                            {#if util.hasThumbnails(result.file)}
+                                <source srcset={util.thumbnailPath(result.file, "avif-lq") + ", " + util.thumbnailPath(result.file, "avif-hq") + " 2x"} type="image/avif" />
+                                <source srcset={util.thumbnailPath(result.file, "jpeg-800") + " 800w, " + util.thumbnailPath(result.file, "jpeg-fullscale")} type="image/jpeg" />
+                            {/if}
+                            <img src={util.getURL(result.file)} on:load={updateCounter} on:error={updateCounter} alt={result.caption || result.file}>
+                        </picture>
+                    </a>
+                </div>
             {/key}
         {/each}
     </Masonry>

clipfront2/src/util.js

@@ -1,4 +1,5 @@
 import * as config from "../../frontend_config.json"
+import * as formats from "../../formats.json"
 
 export const getURL = x => config.image_path + x
 
@@ -8,4 +9,17 @@ export const doQuery = args => fetch(config.backend_url, {
         "Content-Type": "application/json"
     },
     body: JSON.stringify(args)
-}).then(x => x.json())
+}).then(x => x.json())
+
+const filesafeCharset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-"
+export const thumbnailPath = (originalPath, format) => {
+    const extension = formats.formats[format][0]
+    // Python and JS have minor differences in string handling wrt. astral characters which could result in incorrect quantities of dashes. Fortunately, Array.from handles this correctly.
+    return config.thumb_path + `${Array.from(originalPath).map(x => filesafeCharset.includes(x) ? x : "_").join("")}.${format}${extension}`
+}
+
+const thumbedExtensions = formats.extensions
+export const hasThumbnails = t => {
+    const parts = t.split(".")
+    return thumbedExtensions.includes("." + parts[parts.length - 1])
+}