pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Added a 'Reset Settings' button - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 12:59:07 +01:00
parent 53db85e5dc
commit 1c61f8959e
1 changed files with 86 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/image-converter.tsx
View File

@@ -17,7 +17,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Upload, Download, X, Trash2, Check, ArrowRightLeft, HelpCircle } from "lucide-react";
import { Upload, Download, X, Trash2, Check, ArrowRightLeft, HelpCircle, RotateCcw } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { Switch } from "@/components/ui/switch";
@@ -45,27 +45,45 @@ const aspectRatios = [
{ name: "16:9 (Widescreen)", value: "16/9" },
];
const initialSettings = {
width: "",
height: "",
aspectRatio: "custom",
keepOrientation: true,
format: "webp" as "png" | "jpeg" | "webp",
quality: 90,
prefix: "",
suffix: "",
useCounter: false,
counterStart: 1,
counterDigits: 3,
useDefaultBaseName: false,
defaultBaseName: "",
scaleMode: 'cover' as 'fill' | 'cover' | 'contain',
objectPosition: 'center center',
};
export function ImageConverter() {
const [images, setImages] = useState<File[]>([]);
const [previewUrls, setPreviewUrls] = useState<string[]>([]);
const [filenames, setFilenames] = useState<string[]>([]);
const [width, setWidth] = useState<number | string>("");
const [height, setHeight] = useState<number | string>("");
const [aspectRatio, setAspectRatio] = useState<string>("custom");
const [keepOrientation, setKeepOrientation] = useState<boolean>(true);
const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp");
const [quality, setQuality] = useState<number>(90);
const [width, setWidth] = useState<number | string>(initialSettings.width);
const [height, setHeight] = useState<number | string>(initialSettings.height);
const [aspectRatio, setAspectRatio] = useState<string>(initialSettings.aspectRatio);
const [keepOrientation, setKeepOrientation] = useState<boolean>(initialSettings.keepOrientation);
const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format);
const [quality, setQuality] = useState<number>(initialSettings.quality);
const [prefix, setPrefix] = useState<string>("");
const [suffix, setSuffix] = useState<string>("");
const [useCounter, setUseCounter] = useState<boolean>(false);
const [counterStart, setCounterStart] = useState<number>(1);
const [counterDigits, setCounterDigits] = useState<number>(3);
const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(false);
const [defaultBaseName, setDefaultBaseName] = useState<string>("");
const [prefix, setPrefix] = useState<string>(initialSettings.prefix);
const [suffix, setSuffix] = useState<string>(initialSettings.suffix);
const [useCounter, setUseCounter] = useState<boolean>(initialSettings.useCounter);
const [counterStart, setCounterStart] = useState<number>(initialSettings.counterStart);
const [counterDigits, setCounterDigits] = useState<number>(initialSettings.counterDigits);
const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(initialSettings.useDefaultBaseName);
const [defaultBaseName, setDefaultBaseName] = useState<string>(initialSettings.defaultBaseName);
const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>('cover');
const [objectPosition, setObjectPosition] = useState<string>('center center');
const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>(initialSettings.scaleMode);
const [objectPosition, setObjectPosition] = useState<string>(initialSettings.objectPosition);
const [isConverting, setIsConverting] = useState(false);
const [convertingIndex, setConvertingIndex] = useState<number | null>(null);
@@ -307,6 +325,25 @@ export function ImageConverter() {
toast.info("Settings updated and will be used for all downloads.");
};
const handleResetSettings = () => {
setWidth(initialSettings.width);
setHeight(initialSettings.height);
setAspectRatio(initialSettings.aspectRatio);
setKeepOrientation(initialSettings.keepOrientation);
setFormat(initialSettings.format);
setQuality(initialSettings.quality);
setPrefix(initialSettings.prefix);
setSuffix(initialSettings.suffix);
setUseCounter(initialSettings.useCounter);
setCounterStart(initialSettings.counterStart);
setCounterDigits(initialSettings.counterDigits);
setUseDefaultBaseName(initialSettings.useDefaultBaseName);
setDefaultBaseName(initialSettings.defaultBaseName);
setScaleMode(initialSettings.scaleMode);
setObjectPosition(initialSettings.objectPosition);
toast.success("All settings have been reset to their defaults.");
};
const handleAspectRatioChange = (value: string) => {
setAspectRatio(value);
@@ -698,6 +735,23 @@ export function ImageConverter() {
</AccordionContent>
</AccordionItem>
</Accordion>
<div className="flex items-center gap-2">
<Tooltip>
<TooltipTrigger asChild>
<Button
onClick={handleResetSettings}
disabled={!hasImages}
className="w-full"
variant="outline"
>
<RotateCcw className="mr-2 h-4 w-4" />
Reset
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Reset all settings to their default values.</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
@@ -706,7 +760,7 @@ export function ImageConverter() {
className="w-full"
>
<Check className="mr-2 h-4 w-4" />
Apply Settings
Apply
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -714,6 +768,7 @@ export function ImageConverter() {
</TooltipContent>
</Tooltip>
</div>
</div>
<div className="lg:col-span-2 flex flex-col gap-4">
<Card>