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

Reverted all changes back to version d33dceb08c

Browse Source
This commit is contained in:
[dyad]
2026-01-18 17:26:28 +01:00
parent de6afb1d7e
commit 212d13d5db
19 changed files with 93 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/settings/image-settings.tsx
View File

@@ -9,7 +9,14 @@ import { Checkbox } from "@/components/ui/checkbox";
import { ArrowRightLeft, HelpCircle } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { ObjectPositionControl } from "@/components/object-position-control";
import { useTranslations } from "next-intl";
const aspectRatios = [
{ name: "Custom", value: "custom" },
{ name: "1:1 (Square)", value: "1/1" },
{ name: "4:3 (Standard)", value: "4/3" },
{ name: "3:2 (Photography)", value: "3/2" },
{ name: "16:9 (Widescreen)", value: "16/9" },
];
interface ImageSettingsProps {
settings: ConversionSettings;
@@ -24,24 +31,14 @@ export function ImageSettings({
onAspectRatioChange,
onSwapDimensions,
}: ImageSettingsProps) {
const t = useTranslations("ImageSettings");
const aspectRatios = [
{ name: t('custom'), value: "custom" },
{ name: t('square'), value: "1/1" },
{ name: t('standard'), value: "4/3" },
{ name: t('photography'), value: "3/2" },
{ name: t('widescreen'), value: "16/9" },
];
return (
<div className="space-y-4">
<div>
<div className="flex items-center gap-1.5">
<Label htmlFor="aspect-ratio">{t('aspectRatio')}</Label>
<Label htmlFor="aspect-ratio">Aspect Ratio</Label>
<Tooltip>
<TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
<TooltipContent><p>{t('aspectRatioTooltip')}</p></TooltipContent>
<TooltipContent><p>Choose a preset aspect ratio or select 'Custom' to enter dimensions manually.</p></TooltipContent>
</Tooltip>
</div>
<Select value={settings.aspectRatio} onValueChange={onAspectRatioChange}>
@@ -56,10 +53,10 @@ export function ImageSettings({
<div className="flex items-end gap-2">
<div className="space-y-2 flex-1">
<div className="flex items-center gap-1.5">
<Label htmlFor="width">{t('width')}</Label>
<Label htmlFor="width">Width (px)</Label>
<Tooltip>
<TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
<TooltipContent><p>{t('widthTooltip')}</p></TooltipContent>
<TooltipContent><p>Set the output width in pixels. Leave blank to use the original width.</p></TooltipContent>
</Tooltip>
</div>
<Input id="width" type="number" placeholder="Auto" value={settings.width} onChange={(e) => { onSettingsChange({ width: e.target.value, aspectRatio: 'custom' }) }} />
@@ -70,14 +67,14 @@ export function ImageSettings({
<ArrowRightLeft className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent><p>{t('swapTooltip')}</p></TooltipContent>
<TooltipContent><p>Swap the entered width and height values.</p></TooltipContent>
</Tooltip>
<div className="space-y-2 flex-1">
<div className="flex items-center gap-1.5">
<Label htmlFor="height">{t('height')}</Label>
<Label htmlFor="height">Height (px)</Label>
<Tooltip>
<TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
<TooltipContent><p>{t('heightTooltip')}</p></TooltipContent>
<TooltipContent><p>Set the output height in pixels. Leave blank to use the original height.</p></TooltipContent>
</Tooltip>
</div>
<Input id="height" type="number" placeholder="Auto" value={settings.height} onChange={(e) => { onSettingsChange({ height: e.target.value, aspectRatio: 'custom' }) }} />
@@ -86,37 +83,37 @@ export function ImageSettings({
<div className="flex items-center space-x-2 pt-2">
<Checkbox id="keep-orientation" checked={settings.keepOrientation} onCheckedChange={(checked) => onSettingsChange({ keepOrientation: Boolean(checked) })} />
<Label htmlFor="keep-orientation" className="cursor-pointer flex items-center gap-1.5">
{t('keepOrientation')}
Keep original orientation
<Tooltip>
<TooltipTrigger onClick={(e) => e.preventDefault()}><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
<TooltipContent><p>{t('keepOrientationTooltip')}</p></TooltipContent>
<TooltipContent><p>Automatically swaps width and height to match the original image's orientation.</p></TooltipContent>
</Tooltip>
</Label>
</div>
<div className="mt-4 space-y-2">
<div className="flex items-center gap-1.5">
<Label htmlFor="scale-mode">{t('scaling')}</Label>
<Label htmlFor="scale-mode">Scaling</Label>
<Tooltip>
<TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
<TooltipContent><p>{t('scalingTooltip')}</p></TooltipContent>
<TooltipContent><p>Determines how the image fits into the new dimensions.</p></TooltipContent>
</Tooltip>
</div>
<Select value={settings.scaleMode} onValueChange={(value) => onSettingsChange({ scaleMode: value as any })}>
<SelectTrigger id="scale-mode"><SelectValue placeholder="Select scaling mode" /></SelectTrigger>
<SelectContent>
<SelectItem value="fill">{t('fill')}</SelectItem>
<SelectItem value="cover">{t('cover')}</SelectItem>
<SelectItem value="contain">{t('contain')}</SelectItem>
<SelectItem value="fill">Fill (stretch to fit)</SelectItem>
<SelectItem value="cover">Cover (crop to fit)</SelectItem>
<SelectItem value="contain">Contain (letterbox)</SelectItem>
</SelectContent>
</Select>
</div>
{settings.scaleMode !== 'fill' && (
<div className="mt-4 space-y-2">
<div className="flex items-center gap-1.5">
<Label>{t('position')}</Label>
<Label>Position</Label>
<Tooltip>
<TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
<TooltipContent><p>{t('positionTooltip')}</p></TooltipContent>
<TooltipContent><p>Sets the anchor point for 'Cover' or 'Contain' scaling.</p></TooltipContent>
</Tooltip>
</div>
<ObjectPositionControl value={settings.objectPosition} onChange={(pos) => onSettingsChange({ objectPosition: pos as ObjectPosition })} />