feat: add env DEFAULT_IMG_QUALITY for image API

.env

@@ -1 +1,2 @@
 DATABASE_URL="file:./dev.db"
+DEFAULT_IMG_QUALITY=70

app/api/image/[path]/route.ts

@@ -4,7 +4,7 @@ import sharp from "sharp";
 import path from "path";
 import fs from "fs/promises";
 
-const defaultQuality = 80; // TODO ENV
+const fallbackQuality = 80;
 const bashPath = "/app/volume";
 
 export async function GET(
@@ -30,7 +30,7 @@ export async function GET(
   let height = Number(url.searchParams.get("height")) || undefined;
   const quality = parseParam(
     url.searchParams.get("quality"),
-    defaultQuality,
+    Number(process.env.DEFAULT_IMG_QUALITY) || fallbackQuality,
     1,
     100
   );

app/explorer/[tag]/itemGrid/index.tsx

@@ -7,9 +7,6 @@ import { getTag } from "@/app/lib/tags";
 import { Backdrop, Button, ImageList, ImageListItem } from "@mui/material";
 import Showcase from "./showcase";
 
-const size = 250;
-const thumbnailQuantity = 60;
-
 interface Props {
   tagId: number;
 }
@@ -65,10 +62,17 @@ export default function ItemGrid(props: Props) {
     } catch (err) {}
   };
 
-  const getImageUrl = (path: string, quality: number, width?: number) => {
-    let url = `/api/image/${encodeURIComponent(path)}?quality=${quality}`;
-    if (width !== undefined) {
-      url += `&width=${width}`;
+  const getImageUrl = (path: string, quality?: number, width?: number) => {
+    let url = `/api/image/${encodeURIComponent(path)}`;
+
+    if (quality !== undefined || width !== undefined) {
+      url += "?";
+      if (quality !== undefined) {
+        url += `&quality=${quality}`;
+      }
+      if (width !== undefined) {
+        url += `&width=${width}`;
+      }
     }
     return url;
   };
@@ -80,15 +84,15 @@ export default function ItemGrid(props: Props) {
           <ImageListItem key={index}>
             <Button variant="text" onClick={() => handleOpen(path)}>
               <img
-                src={getImageUrl(path, thumbnailQuantity)}
+                src={getImageUrl(path)}
                 srcSet={
-                  getImageUrl(path, thumbnailQuantity, 100) +
+                  getImageUrl(path, undefined, 100) +
                   " 100w, " +
-                  getImageUrl(path, thumbnailQuantity, 300) +
+                  getImageUrl(path, undefined, 300) +
                   " 300w, " +
-                  getImageUrl(path, thumbnailQuantity, 500) +
+                  getImageUrl(path, undefined, 500) +
                   " 500w, " +
-                  getImageUrl(path, thumbnailQuantity, 1200) +
+                  getImageUrl(path, undefined, 1200) +
                   " 1200w"
                 }
                 sizes="18vw"

docker-compose.yml

@@ -8,4 +8,6 @@ services:
       - "5888:3000"  # Map port 3000 inside the container to port 5888 on the host
     volumes:
       - HIE_VOLUME_DIR:/app/volume  # Mount the host directory HIE_VOLUME_DIR to /app/volume inside the container
+    environment:
+      - DEFAULT_IMG_QUALITY: "70" # Set the default image quality, in the range of 1 to 100
     # restart: always  # Uncomment this line to always restart the container unless explicitly stopped