Added custom aspect ratio option

KartoffelChipss · KartoffelChipss · commit f571f113d2e8 · 2025-09-07T13:57:32.000+02:00
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,28 +1,46 @@
-import { useEffect, useRef, useState } from "preact/hooks";
-import Header from "./components/Header";
-import OptionsDisplay from "./components/OptionsDisplay";
-import WebFont from "webfontloader";
+import { useEffect, useRef, useState } from 'preact/hooks';
+import Header from './components/Header';
+import OptionsDisplay from './components/OptionsDisplay';
+import WebFont from 'webfontloader';
 
-export type TextAlign = "left" | "center" | "right";
-export type TextBaseLine = "top" | "middle" | "bottom";
+export type TextAlign = 'left' | 'center' | 'right';
+export type TextBaseLine = 'top' | 'middle' | 'bottom';
 
 const hexToRgb = (hex: string): [number, number, number] => {
     const match = hex.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
     if (!match) return [0, 0, 0];
-    return [
-        parseInt(match[1], 16),
-        parseInt(match[2], 16),
-        parseInt(match[3], 16),
-    ];
+    return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
+};
+
+const MAX_CANVAS_WIDTH = 1000;
+const MAX_CANVAS_HEIGHT = 500;
+
+const getCanvasSizeFromCustomAspectRatio = (aw: number, ah: number) => {
+    if (aw <= 0 || ah <= 0) return { width: MAX_CANVAS_WIDTH, height: MAX_CANVAS_HEIGHT };
+    const scale = Math.min(MAX_CANVAS_WIDTH / aw, MAX_CANVAS_HEIGHT / ah);
+    return {
+        width: Math.round(aw * scale),
+        height: Math.round(ah * scale),
+    };
+};
+
+const getDefaultFontSizeFromCustomAspectRatio = (
+    aspectRatioWidth: number,
+    aspectRatioHeight: number
+) => {
+    const aspectRatio = aspectRatioWidth / aspectRatioHeight;
+    if (aspectRatio >= 1.5) return 120; // landscape
+    if (aspectRatio <= 0.7) return 50; // portrait
+    return 80; // square-ish
 };
 
 export default function App() {
     const DEFAULT_TEXT_SIZE = 120;
     const DEFAULT_BG_DIM = 0.4;
     const DEFAULT_TEXT_PADDING = 0.05;
 
-    const camvasSizes: Record<
-        "cover" | "poster",
+    const canvasSizes: Record<
+        'cover' | 'poster',
         { width: number; height: number; defaultFontSize: number }
     > = {
         cover: {
@@ -38,21 +56,47 @@ export default function App() {
     };
 
     const canvasRef = useRef<HTMLCanvasElement>(null);
-    const [title, setTitle] = useState("Movies");
+    const [title, setTitle] = useState('Movies');
     const [image, setImage] = useState<HTMLImageElement | null>(null);
     const [textSize, setTextSize] = useState(DEFAULT_TEXT_SIZE);
     const [bgDim, setBgDim] = useState(DEFAULT_BG_DIM);
-    const [fontName, setFontName] = useState("Montserrat");
-    const [imageType, setImageType] = useState<"cover" | "poster">("cover");
-    const [textColor, setTextColor] = useState("#ffffff");
-    const [dimColor, setDimColor] = useState("#000000");
-    const [textAlign, setTextAlign] = useState<TextAlign>("center");
-    const [textBaseline, setTextBaseline] = useState<TextBaseLine>("middle");
+    const [fontName, setFontName] = useState('Montserrat');
+    const [imageType, setImageType] = useState<'cover' | 'poster' | 'custom'>('cover');
+    const [customAspectRatioWidth, setCustomAspectRatioWidth] = useState(0.75);
+    const [customAspectRatioHeight, setCustomAspectRatioHeight] = useState(1);
+    const [textColor, setTextColor] = useState('#ffffff');
+    const [dimColor, setDimColor] = useState('#000000');
+    const [textAlign, setTextAlign] = useState<TextAlign>('center');
+    const [textBaseline, setTextBaseline] = useState<TextBaseLine>('middle');
     const [textPadding, setTextPadding] = useState(DEFAULT_TEXT_PADDING);
 
-    const getCanvasWidth = () => camvasSizes[imageType].width;
-    const getCanvasHeight = () => camvasSizes[imageType].height;
-    const getDefaultFontSize = () => camvasSizes[imageType].defaultFontSize;
+    const getCanvasWidth = () => {
+        if (imageType === 'custom')
+            return getCanvasSizeFromCustomAspectRatio(
+                customAspectRatioWidth,
+                customAspectRatioHeight
+            ).width;
+        return canvasSizes[imageType].width;
+    };
+
+    const getCanvasHeight = () => {
+        if (imageType === 'custom')
+            return getCanvasSizeFromCustomAspectRatio(
+                customAspectRatioWidth,
+                customAspectRatioHeight
+            ).height;
+        return canvasSizes[imageType].height;
+    };
+
+    const getDefaultFontSize = () => {
+        if (imageType === 'custom') {
+            return getDefaultFontSizeFromCustomAspectRatio(
+                customAspectRatioWidth,
+                customAspectRatioHeight
+            );
+        }
+        return canvasSizes[imageType].defaultFontSize;
+    };
 
     const handleImageUpload = (e: Event) => {
         const input = e.target as HTMLInputElement;
@@ -77,19 +121,18 @@ export default function App() {
         ctx.textAlign = align;
 
         let x: number = getCanvasWidth() / 2;
-        if (align === "left") x = maxWidth * textPadding;
-        else if (align === "right")
-            x = getCanvasWidth() - maxWidth * textPadding;
+        if (align === 'left') x = maxWidth * textPadding;
+        else if (align === 'right') x = getCanvasWidth() - maxWidth * textPadding;
 
-        const words = text.split(" ");
+        const words = text.split(' ');
         const lines: string[] = [];
         let currentLine = words[0];
 
         for (let i = 1; i < words.length; i++) {
             const word = words[i];
-            const width = ctx.measureText(currentLine + " " + word).width;
+            const width = ctx.measureText(currentLine + ' ' + word).width;
             if (width < maxWidth) {
-                currentLine += " " + word;
+                currentLine += ' ' + word;
             } else {
                 lines.push(currentLine);
                 currentLine = word;
@@ -101,15 +144,15 @@ export default function App() {
 
         const padding = getCanvasHeight() * textPadding;
         let y: number;
-        if (baseline === "top") {
+        if (baseline === 'top') {
             y = padding;
-            ctx.textBaseline = "top";
-        } else if (baseline === "middle") {
+            ctx.textBaseline = 'top';
+        } else if (baseline === 'middle') {
             y = getCanvasHeight() / 2 - totalHeight / 2;
-            ctx.textBaseline = "top";
+            ctx.textBaseline = 'top';
         } else {
             y = getCanvasHeight() - totalHeight - padding;
-            ctx.textBaseline = "top";
+            ctx.textBaseline = 'top';
         }
 
         for (const line of lines) {
@@ -119,9 +162,12 @@ export default function App() {
     };
 
     const drawCanvas = (img: HTMLImageElement, titleText: string) => {
+        console.log('Custom Aspect Ratio:', customAspectRatioWidth, ':', customAspectRatioHeight);
+        console.log('Canvas Size:', getCanvasWidth(), 'x', getCanvasHeight());
+
         const canvas = canvasRef.current;
         if (!canvas) return;
-        const ctx = canvas.getContext("2d");
+        const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
         canvas.width = getCanvasWidth();
@@ -181,18 +227,18 @@ export default function App() {
 
     const formatTitleForFileName = (title: string) => {
         return title
-            .replace(/[^a-zA-Z0-9\s]/g, "")
-            .replace(/\s+/g, "-")
+            .replace(/[^a-zA-Z0-9\s]/g, '')
+            .replace(/\s+/g, '-')
             .toLowerCase();
     };
 
     const downloadImage = () => {
         const canvas = canvasRef.current;
         if (!canvas) return;
 
-        const link = document.createElement("a");
+        const link = document.createElement('a');
         link.download = `jellyfin-cover-${formatTitleForFileName(title)}.png`;
-        link.href = canvas.toDataURL("image/png");
+        link.href = canvas.toDataURL('image/png');
         link.click();
     };
 
@@ -212,13 +258,15 @@ export default function App() {
         textAlign,
         textBaseline,
         textPadding,
+        customAspectRatioWidth,
+        customAspectRatioHeight,
     ]);
 
     useEffect(() => {
         if (!fontName) return;
         WebFont.load({
             google: {
-                families: [fontName + ":400,700"],
+                families: [fontName + ':400,700'],
             },
             active: () => {
                 if (image) {
@@ -233,12 +281,19 @@ export default function App() {
         defaultImg.onload = () => {
             setImage(defaultImg);
         };
-        defaultImg.src = "/default-bg.webp";
+        defaultImg.src = '/default-bg.webp';
     }, []);
 
-    const handleImageTypeChange = (type: "cover" | "poster") => {
+    const handleImageTypeChange = (type: 'cover' | 'poster' | 'custom') => {
         setImageType(type);
-        setTextSize(camvasSizes[type].defaultFontSize);
+        setTextSize(
+            type === 'custom'
+                ? getDefaultFontSizeFromCustomAspectRatio(
+                      customAspectRatioWidth,
+                      customAspectRatioHeight
+                  )
+                : canvasSizes[type].defaultFontSize
+        );
     };
 
     return (
@@ -254,6 +309,10 @@ export default function App() {
                     setImage={handleImageUpload}
                     imageType={imageType}
                     setImageType={handleImageTypeChange}
+                    customAspectRatioWidth={customAspectRatioWidth}
+                    setCustomAspectRatioWidth={setCustomAspectRatioWidth}
+                    customAspectRatioHeight={customAspectRatioHeight}
+                    setCustomAspectRatioHeight={setCustomAspectRatioHeight}
                     bgDim={bgDim}
                     setBgDim={setBgDim}
                     defaultBgDim={DEFAULT_BG_DIM}
@@ -275,15 +334,14 @@ export default function App() {
 
                 <div
                     className={
-                        "flex items-center justify-center grow " +
-                        (imageType === "poster" ? "flex-col" : "")
+                        'flex items-center justify-center grow max-h-[500px] ' +
+                        (imageType === 'poster' ? 'flex-col' : '')
                     }
                 >
                     <canvas
-                        className={
-                            "rounded-md border border-input border-solid grow"
-                        }
+                        className={'rounded-md border border-input border-solid'}
                         style={{
+                            maxHeight: '500px',
                             aspectRatio: `${getCanvasWidth()} / ${getCanvasHeight()}`,
                         }}
                         ref={canvasRef}
diff --git a/src/components/ImageTypeSelect.tsx b/src/components/ImageTypeSelect.tsx
@@ -1,30 +1,26 @@
-import { RectangleHorizontal, RectangleVertical } from "lucide-preact";
-import type { FC } from "preact/compat";
+import { RectangleHorizontal, RectangleVertical } from 'lucide-preact';
+import type { FC } from 'preact/compat';
 
 interface ImageTypeSelectProps {
-    value: "cover" | "poster";
-    onChange: (value: "cover" | "poster") => void;
+    value: 'cover' | 'poster' | 'custom';
+    onChange: (value: 'cover' | 'poster' | 'custom') => void;
 }
 
 const SelectOption: FC<{
     value: string;
     selected: boolean;
     onClick: () => void;
 }> = ({ value, selected, onClick }) => {
-    const selectedClasses = "border-2 border-primary";
+    const selectedClasses = 'border-2 border-primary';
 
     return (
         <button
             onClick={onClick}
             className={`card grow flex flex-col items-center justify-center gap-1 ${
-                selected ? selectedClasses : ""
+                selected ? selectedClasses : ''
             }`}
         >
-            {value === "poster" ? (
-                <RectangleVertical />
-            ) : (
-                <RectangleHorizontal />
-            )}
+            {value === 'poster' ? <RectangleVertical /> : <RectangleHorizontal />}
             <span>{value.charAt(0).toUpperCase() + value.slice(1)}</span>
         </button>
     );
@@ -33,13 +29,18 @@ const ImageTypeSelect: FC<ImageTypeSelectProps> = ({ value, onChange }) => (
     <div className="flex items-center gap-2">
         <SelectOption
             value="cover"
-            selected={value === "cover"}
-            onClick={() => onChange("cover")}
+            selected={value === 'cover'}
+            onClick={() => onChange('cover')}
         />
         <SelectOption
             value="poster"
-            selected={value === "poster"}
-            onClick={() => onChange("poster")}
+            selected={value === 'poster'}
+            onClick={() => onChange('poster')}
+        />
+        <SelectOption
+            value="custom"
+            selected={value === 'custom'}
+            onClick={() => onChange('custom')}
         />
     </div>
 );
diff --git a/src/components/OptionsDisplay.tsx b/src/components/OptionsDisplay.tsx
