From 355c195c27ae6e57c245d6ad3760afd4c4863efd Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Mon, 13 Nov 2023 02:29:50 +0100
Subject: [PATCH] feat: compress stuff in s3 bucket

---
 bin/compress_s3.ts                   | 58 ++++++++++++++++++++++++++++
 package.json                         |  3 +-
 src/lib/components/ImageFrame.svelte |  5 ++-
 src/routes/gallery/+page.svelte      |  1 +
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 bin/compress_s3.ts

diff --git a/bin/compress_s3.ts b/bin/compress_s3.ts
new file mode 100644
index 0000000..8960552
--- /dev/null
+++ b/bin/compress_s3.ts
@@ -0,0 +1,58 @@
+import { Client } from "npm:minio";
+import Jimp from 'npm:jimp';
+import { config } from "https://deno.land/x/dotenv/mod.ts";
+config({ export: true });
+
+interface MinioObject {
+  name: string;
+}
+
+// Retrieve MinIO details from environment variables
+const minioEndpoint = Deno.env.get("S3_ENDPOINT_URL") || "your-minio-endpoint";
+const minioAccessKey = Deno.env.get("S3_ACCESS_KEY") || "your-access-key";
+const minioSecretKey = Deno.env.get("S3_SECRET_ACCESS_KEY") || "your-secret-key";
+const minioBucketName = "silvester23";
+
+const minioClient = new Client({
+  endPoint: minioEndpoint,
+  accessKey: minioAccessKey,
+  secretKey: minioSecretKey,
+});
+
+
+const objects: MinioObject[] = [];
+
+const objectStream = minioClient.listObjects(minioBucketName);
+
+for await (const obj of objectStream) {
+  objects.push({
+    name: obj.name,
+  });
+}
+
+// Process and upload images
+for (const obj of objects) {
+  const pngFilePath = obj.name;
+  const jpgFilePath = `${pngFilePath.slice(0, -4)}.jpg`;
+
+  // Check if the PNG file exists and there is no corresponding JPG file
+  if (!objects.some((o) => o.name === jpgFilePath)) {
+    // Download the PNG file from MinIO
+    const pngBuffer = await minioClient.getObject(minioBucketName, pngFilePath);
+    console.log(`Downloaded ${pngFilePath} from MinIO`);
+
+    // Use Jimp to compress and convert the PNG to JPG
+    const image = await Jimp.read(`http://s3-api.app.max-richter.dev/silvester23/${pngFilePath}`);
+    // const image = await sharp(pngBuffer)
+    //   .jpeg({ mozjpeg: true })
+    //   .toBuffer()
+     const jpgBuffer = await image.quality(80).getBufferAsync(Jimp.MIME_JPEG);
+
+    // Upload the JPG buffer back to the same MinIO bucket
+    await minioClient.putObject(minioBucketName, jpgFilePath, jpgBuffer, {
+      'Content-Type': 'image/jpeg',
+    });
+
+    console.log(`Uploaded ${jpgFilePath} to MinIO`);
+  }
+}
diff --git a/package.json b/package.json
index dffad65..8abfb41 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
+    "format": "prettier --plugin-search-dir . --write .",
+    "compress-s3": "bun ./bin/compress_s3.ts"
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.3.1",
diff --git a/src/lib/components/ImageFrame.svelte b/src/lib/components/ImageFrame.svelte
index 553f9a8..cfa285d 100644
--- a/src/lib/components/ImageFrame.svelte
+++ b/src/lib/components/ImageFrame.svelte
@@ -8,7 +8,10 @@
 
 <div class="frame" style="--frame: url(/frames/frame_0{int}.png)">
 	<img src="/hang.png" class="hang" />
-	<img {src} {alt} />
+	<picture>
+		<source srcset={src.replace('.png', '.jpg')} type="image/jpeg" />
+		<img {src} alt={src} />
+	</picture>
 </div>
 
 <style>
diff --git a/src/routes/gallery/+page.svelte b/src/routes/gallery/+page.svelte
index c54fe4a..11ab9a8 100644
--- a/src/routes/gallery/+page.svelte
+++ b/src/routes/gallery/+page.svelte
@@ -55,6 +55,7 @@
 		margin-left: 50px;
 		text-align: center;
 	}
+
 	p {
 		color: white;
 		font-family: Parisienne, cursive;