Original
@@ -224,7 +242,9 @@ export default function ImageSizeCompressor() {
Date: Wed, 13 Nov 2024 21:51:32 +0530
Subject: [PATCH 5/7] update quality slider to handle multiple images
---
.../size-compressor/compressor-tool.tsx | 62 +++++++++++++------
1 file changed, 43 insertions(+), 19 deletions(-)
diff --git a/src/app/(tools)/size-compressor/compressor-tool.tsx b/src/app/(tools)/size-compressor/compressor-tool.tsx
index 2ca2763..e0563cb 100644
--- a/src/app/(tools)/size-compressor/compressor-tool.tsx
+++ b/src/app/(tools)/size-compressor/compressor-tool.tsx
@@ -5,7 +5,7 @@ import { useState, type ChangeEvent, useEffect } from "react";
export default function ImageSizeCompressor() {
const [images, setImages] = useState
([]);
- const [quality, setQuality] = useState(0.8);
+ const [quality, setQuality] = useState([0.8]);
const [compressedPreview, setCompressedPreview] = useState(
null,
);
@@ -22,8 +22,14 @@ export default function ImageSizeCompressor() {
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
}
- async function compressImage(image: File, quality: number): Promise {
+ async function compressImage(
+ image: File,
+ quality: number | undefined,
+ ): Promise {
return new Promise((resolve, reject) => {
+ if (quality === undefined) {
+ return reject(new Error("Quaility can't be undefined"));
+ }
const img = new Image();
const imageUrl = URL.createObjectURL(image);
@@ -76,11 +82,17 @@ export default function ImageSizeCompressor() {
if (!e.target.files) return;
const newFiles = Array.from(e.target.files);
+ const newQualities = new Array(newFiles.length).fill(0.8);
+
setImages((prev) => [...prev, ...newFiles]);
+ setQuality((prev) => [...prev, ...newQualities]);
}
function handleImageDrop(files: FileList) {
+ const newQualities = new Array(files.length).fill(0.8);
+
setImages((prev) => [...prev, ...files]);
+ setQuality((prev) => [...prev, ...newQualities]);
}
useEffect(() => {
@@ -88,12 +100,16 @@ export default function ImageSizeCompressor() {
setOriginalSize(formatFileSize(images[currentIndex].size));
async function generateCompressedPreview() {
- if (images[currentIndex] === undefined) return;
+ if (
+ images[currentIndex] === undefined ||
+ quality[currentIndex] === undefined
+ )
+ return;
setIsCompressing(true);
try {
const compressedFile = await compressImage(
images[currentIndex],
- quality,
+ quality[currentIndex],
);
setCompressedPreview(URL.createObjectURL(compressedFile));
setCompressedSize(formatFileSize(compressedFile.size));
@@ -124,7 +140,7 @@ export default function ImageSizeCompressor() {
try {
setIsCompressing(true);
const compressedFiles = await Promise.all(
- images.map((image) => compressImage(image, quality)),
+ images.map((image, i) => compressImage(image, quality[i])),
);
compressedFiles.forEach((file, index) => {
@@ -142,7 +158,9 @@ export default function ImageSizeCompressor() {
}
function onChangeQuality(e: ChangeEvent) {
- setQuality(parseFloat(e.target.value));
+ const newQuantity = [...quality];
+ newQuantity[currentIndex] = parseFloat(e.target.value);
+ setQuality(newQuantity);
}
function onCancel() {
@@ -201,19 +219,25 @@ export default function ImageSizeCompressor() {
))}
-
-
-
-
+ {quality[currentIndex] !== undefined ? (
+
+
+
+
+ ) : (
+
Strange! There is no file selected
+ )}
{images.length > 1 && (
From 6ccd80c92ffcfe1b5801c47e259b903b341f7585 Mon Sep 17 00:00:00 2001
From: Aditya Kumar <117935160+AS1100K@users.noreply.github.com>
Date: Wed, 13 Nov 2024 22:18:44 +0530
Subject: [PATCH 6/7] Add global quality control toggle
---
.../size-compressor/compressor-tool.tsx | 64 +++++++++++++++----
1 file changed, 51 insertions(+), 13 deletions(-)
diff --git a/src/app/(tools)/size-compressor/compressor-tool.tsx b/src/app/(tools)/size-compressor/compressor-tool.tsx
index e0563cb..67379b2 100644
--- a/src/app/(tools)/size-compressor/compressor-tool.tsx
+++ b/src/app/(tools)/size-compressor/compressor-tool.tsx
@@ -5,6 +5,7 @@ import { useState, type ChangeEvent, useEffect } from "react";
export default function ImageSizeCompressor() {
const [images, setImages] = useState([]);
+ const [globalQuality, setGlobalQuality] = useState(0.8);
const [quality, setQuality] = useState([0.8]);
const [compressedPreview, setCompressedPreview] = useState(
null,
@@ -100,16 +101,12 @@ export default function ImageSizeCompressor() {
setOriginalSize(formatFileSize(images[currentIndex].size));
async function generateCompressedPreview() {
- if (
- images[currentIndex] === undefined ||
- quality[currentIndex] === undefined
- )
- return;
+ if (images[currentIndex] === undefined) return;
setIsCompressing(true);
try {
const compressedFile = await compressImage(
images[currentIndex],
- quality[currentIndex],
+ globalQuality ?? quality[currentIndex],
);
setCompressedPreview(URL.createObjectURL(compressedFile));
setCompressedSize(formatFileSize(compressedFile.size));
@@ -125,7 +122,7 @@ export default function ImageSizeCompressor() {
return () => {
clearTimeout(debounceTimeout);
};
- }, [images, quality, currentIndex]);
+ }, [images, quality, currentIndex, globalQuality]);
function removeImage(index: number) {
setImages((prev) => prev.filter((_, i) => i !== index));
@@ -140,7 +137,9 @@ export default function ImageSizeCompressor() {
try {
setIsCompressing(true);
const compressedFiles = await Promise.all(
- images.map((image, i) => compressImage(image, quality[i])),
+ images.map((image, i) =>
+ compressImage(image, globalQuality ?? quality[i]),
+ ),
);
compressedFiles.forEach((file, index) => {
@@ -158,9 +157,15 @@ export default function ImageSizeCompressor() {
}
function onChangeQuality(e: ChangeEvent) {
- const newQuantity = [...quality];
- newQuantity[currentIndex] = parseFloat(e.target.value);
- setQuality(newQuantity);
+ console.log(`globalQuality -> ${globalQuality}`);
+ console.log(`quality -> ${quality[currentIndex]}`);
+ if (globalQuality === undefined) {
+ const newQuantity = [...quality];
+ newQuantity[currentIndex] = parseFloat(e.target.value);
+ setQuality(newQuantity);
+ } else {
+ setGlobalQuality(parseFloat(e.target.value));
+ }
}
function onCancel() {
@@ -219,7 +224,7 @@ export default function ImageSizeCompressor() {
))}
- {quality[currentIndex] !== undefined ? (
+ {/* {quality[currentIndex] !== undefined ? (
From 17380ea0e9add9bc044dcd77589057c6e362ff96 Mon Sep 17 00:00:00 2001
From: Aditya Kumar <117935160+AS1100K@users.noreply.github.com>
Date: Wed, 13 Nov 2024 22:21:49 +0530
Subject: [PATCH 7/7] remove redundant quality range message
---
src/app/(tools)/size-compressor/compressor-tool.tsx | 6 ------
1 file changed, 6 deletions(-)
diff --git a/src/app/(tools)/size-compressor/compressor-tool.tsx b/src/app/(tools)/size-compressor/compressor-tool.tsx
index 67379b2..3dda19a 100644
--- a/src/app/(tools)/size-compressor/compressor-tool.tsx
+++ b/src/app/(tools)/size-compressor/compressor-tool.tsx
@@ -277,12 +277,6 @@ export default function ImageSizeCompressor() {
- {images.length > 1 && (
-