From c97d7e7a5712c515a0819318d98c0f2fcf7688d3 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Tue, 17 Sep 2024 18:00:17 +0800
Subject: [PATCH] feat: add env `DEFAULT_IMG_QUALITY` for image API

---
 .env                                  |  1 +
 app/api/image/[path]/route.ts         |  4 ++--
 app/explorer/[tag]/itemGrid/index.tsx | 28 +++++++++++++++------------
 docker-compose.yml                    |  2 ++
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/.env b/.env
index d91f958..c0f0fb7 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
 DATABASE_URL="file:./dev.db"
+DEFAULT_IMG_QUALITY=70
diff --git a/app/api/image/[path]/route.ts b/app/api/image/[path]/route.ts
index 87f4e89..e73be7b 100644
--- a/app/api/image/[path]/route.ts
+++ b/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
   );
diff --git a/app/explorer/[tag]/itemGrid/index.tsx b/app/explorer/[tag]/itemGrid/index.tsx
index bb79648..e3d2390 100644
--- a/app/explorer/[tag]/itemGrid/index.tsx
+++ b/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"
diff --git a/docker-compose.yml b/docker-compose.yml
index 1ab05ee..67e49e5 100644
--- a/docker-compose.yml
+++ b/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