export aspect ratio

2025-11-29 11:38:09 -07:00
parent d2ee511466
commit 0c89e3e01a
5 changed files with 124 additions and 89 deletions
@@ -116,13 +116,22 @@ export function CropControl({ videoElement, cropRegion, onCropChange, aspectRati
  const cropPixelY = cropRegion.y * 100;
  const cropPixelWidth = cropRegion.width * 100;
  const cropPixelHeight = cropRegion.height * 100;
+  const videoAspectRatio = videoElement ? videoElement.videoWidth / videoElement.videoHeight : 16/9;
+  const isVideoPortrait = videoAspectRatio < 1;
+  const maxContainerWidth = isVideoPortrait ? '40vw' : '75vw';
+  const maxContainerHeight = '75vh';

  return (
    <div className="w-full p-8">
      <div
        ref={containerRef}
        className="relative w-full bg-black rounded-lg overflow-visible cursor-default select-none shadow-2xl"
-        style={{ aspectRatio: formatAspectRatioForCSS(aspectRatio) }}
+        style={{ 
+          aspectRatio: videoAspectRatio,
+          maxWidth: maxContainerWidth,
+          maxHeight: maxContainerHeight,
+          margin: '0 auto',
+        }}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerLeave={handlePointerUp}
@@ -65,7 +65,6 @@ interface SettingsPanelProps {
  cropRegion?: CropRegion;
  onCropChange?: (region: CropRegion) => void;
  aspectRatio: AspectRatio;
-  onAspectRatioChange: (aspectRatio: AspectRatio) => void;
  videoElement?: HTMLVideoElement | null;
  onExport?: () => void;
 }
@@ -81,7 +80,7 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
  { depth: 6, label: "5×" },
 ];

-export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, shadowIntensity = 0, onShadowChange, showBlur, onBlurChange, motionBlurEnabled = true, onMotionBlurChange, borderRadius = 0, onBorderRadiusChange, padding = 50, onPaddingChange, cropRegion, onCropChange, aspectRatio, onAspectRatioChange, videoElement, onExport }: SettingsPanelProps) {
+export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, shadowIntensity = 0, onShadowChange, showBlur, onBlurChange, motionBlurEnabled = true, onMotionBlurChange, borderRadius = 0, onBorderRadiusChange, padding = 50, onPaddingChange, cropRegion, onCropChange, aspectRatio, videoElement, onExport }: SettingsPanelProps) {
  const [wallpaperPaths, setWallpaperPaths] = useState<string[]>([]);
  const [customImages, setCustomImages] = useState<string[]>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -233,37 +232,11 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
        </div>
      </div>

-      <div className="mb-6">
-        <span className="text-sm font-medium text-slate-200 mb-3 block">Aspect Ratio</span>
-        <div className="grid grid-cols-4 gap-2">
-          {(['16:9', '9:16', '1:1', '4:3'] as AspectRatio[]).map((ratio) => {
-            const isActive = aspectRatio === ratio;
-            return (
-              <Button
-                key={ratio}
-                type="button"
-                onClick={() => onAspectRatioChange(ratio)}
-                className={cn(
-                  "h-auto w-full rounded-xl border px-2 py-3 text-center shadow-sm transition-all flex items-center justify-center",
-                  "duration-200 ease-out",
-                  isActive
-                    ? "border-[#34B27B] bg-[#34B27B] text-white shadow-[#34B27B]/20 scale-105 ring-2 ring-[#34B27B]/20"
-                    : "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200"
-                )}
-              >
-                <span className="text-sm font-semibold tracking-tight">{ratio}</span>
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-
      <div className="mb-6">
        <div className="grid grid-cols-2 gap-3">
          {/* Drop Shadow Slider */}
          <div className="p-3 rounded-xl bg-white/5 border border-white/5 space-y-2">
-            <div className="flex items-center justify-between">\n
+            <div className="flex items-center justify-between">
              <div className="text-xs font-medium text-slate-200">Shadow</div>
              <span className="text-[10px] text-slate-400 font-mono">{Math.round(shadowIntensity * 100)}%</span>
            </div>
@@ -329,7 +302,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
            className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 animate-in fade-in duration-200"
            onClick={() => setShowCropDropdown(false)}
          />
-          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-5xl animate-in zoom-in-95 duration-200">
+          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-5xl max-h-[90vh] overflow-auto animate-in zoom-in-95 duration-200">
            <div className="flex items-center justify-between mb-6">
              <div>
                <span className="text-xl font-bold text-slate-200">Crop Video</span>
@@ -265,24 +265,53 @@ export default function VideoEditor() {
        return;
      }
      
+      const aspectRatioValue = getAspectRatioValue(aspectRatio);
      const sourceWidth = video.videoWidth || 1920;
      const sourceHeight = video.videoHeight || 1080;
-      const targetAspectRatio = 16 / 9;
-      const sourceAspectRatio = sourceWidth / sourceHeight;
      
-      let exportWidth: number;
-      let exportHeight: number;
-      
-      if (sourceAspectRatio > targetAspectRatio) {
-        exportHeight = sourceHeight;
-        exportWidth = Math.round(exportHeight * targetAspectRatio);
+      let exportWidth: number = sourceWidth;
+      let exportHeight: number = sourceHeight;
+
+      if (aspectRatioValue === 1) {
+        // Square (1:1): use smaller dimension to avoid codec limits
+        const baseDimension = Math.floor(Math.min(sourceWidth, sourceHeight) / 2) * 2;
+        exportWidth = baseDimension;
+        exportHeight = baseDimension;
+      } else if (aspectRatioValue > 1) {
+        // Landscape: find largest even dimensions that exactly match aspect ratio
+        const baseWidth = Math.floor(sourceWidth / 2) * 2;
+        // Iterate down from baseWidth to find exact match
+        let found = false;
+        for (let w = baseWidth; w >= 100 && !found; w -= 2) {
+          const h = Math.round(w / aspectRatioValue);
+          if (h % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
+            exportWidth = w;
+            exportHeight = h;
+            found = true;
+          }
+        }
+        if (!found) {
+          exportWidth = baseWidth;
+          exportHeight = Math.floor((baseWidth / aspectRatioValue) / 2) * 2;
+        }
      } else {
-        exportWidth = sourceWidth;
-        exportHeight = Math.round(exportWidth / targetAspectRatio);
+        // Portrait: find largest even dimensions that exactly match aspect ratio
+        const baseHeight = Math.floor(sourceHeight / 2) * 2;
+        // Iterate down from baseHeight to find exact match
+        let found = false;
+        for (let h = baseHeight; h >= 100 && !found; h -= 2) {
+          const w = Math.round(h * aspectRatioValue);
+          if (w % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
+            exportWidth = w;
+            exportHeight = h;
+            found = true;
+          }
+        }
+        if (!found) {
+          exportHeight = baseHeight;
+          exportWidth = Math.floor((baseHeight * aspectRatioValue) / 2) * 2;
+        }
      }
-      
-      exportWidth = Math.round(exportWidth / 2) * 2;
-      exportHeight = Math.round(exportHeight / 2) * 2;

      // Calculate visually lossless bitrate matching screen recording optimization
      const totalPixels = exportWidth * exportHeight;
@@ -350,7 +379,7 @@ export default function VideoEditor() {
      setIsExporting(false);
      exporterRef.current = null;
    }
-  }, [videoPath, wallpaper, zoomRegions, trimRegions, shadowIntensity, showBlur, motionBlurEnabled, borderRadius, padding, cropRegion, isPlaying]);
+  }, [videoPath, wallpaper, zoomRegions, trimRegions, shadowIntensity, showBlur, motionBlurEnabled, borderRadius, padding, cropRegion, isPlaying, aspectRatio]);

  const handleCancelExport = useCallback(() => {
    if (exporterRef.current) {
@@ -446,22 +475,24 @@ export default function VideoEditor() {
            <Panel defaultSize={30} minSize={20}>
              <div className="h-full bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
                <TimelineEditor
-                  videoDuration={duration}
-                  currentTime={currentTime}
-                  onSeek={handleSeek}
-                  zoomRegions={zoomRegions}
-                  onZoomAdded={handleZoomAdded}
-                  onZoomSpanChange={handleZoomSpanChange}
-                  onZoomDelete={handleZoomDelete}
-                  selectedZoomId={selectedZoomId}
-                  onSelectZoom={handleSelectZoom}
-                  trimRegions={trimRegions}
-                  onTrimAdded={handleTrimAdded}
-                  onTrimSpanChange={handleTrimSpanChange}
-                  onTrimDelete={handleTrimDelete}
-                  selectedTrimId={selectedTrimId}
-                  onSelectTrim={handleSelectTrim}
-                />
+              videoDuration={duration}
+              currentTime={currentTime}
+              onSeek={handleSeek}
+              zoomRegions={zoomRegions}
+              onZoomAdded={handleZoomAdded}
+              onZoomSpanChange={handleZoomSpanChange}
+              onZoomDelete={handleZoomDelete}
+              selectedZoomId={selectedZoomId}
+              onSelectZoom={handleSelectZoom}
+              trimRegions={trimRegions}
+              onTrimAdded={handleTrimAdded}
+              onTrimSpanChange={handleTrimSpanChange}
+              onTrimDelete={handleTrimDelete}
+              selectedTrimId={selectedTrimId}
+              onSelectTrim={handleSelectTrim}
+              aspectRatio={aspectRatio}
+              onAspectRatioChange={setAspectRatio}
+            />
              </div>
            </Panel>
          </PanelGroup>
@@ -488,7 +519,6 @@ export default function VideoEditor() {
          cropRegion={cropRegion}
          onCropChange={setCropRegion}
          aspectRatio={aspectRatio}
-          onAspectRatioChange={setAspectRatio}
          videoElement={videoPlaybackRef.current?.video || null}
          onExport={handleExport}
        />
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTimelineContext } from "dnd-timeline";
 import { Button } from "@/components/ui/button";
-import { Plus, Scissors, ZoomIn } from "lucide-react";
+import { Plus, Scissors, ZoomIn, ChevronDown, Check } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import TimelineWrapper from "./TimelineWrapper";
@@ -11,6 +11,13 @@ import KeyframeMarkers from "./KeyframeMarkers";
 import type { Range, Span } from "dnd-timeline";
 import type { ZoomRegion, TrimRegion } from "../types";
 import { v4 as uuidv4 } from 'uuid';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { type AspectRatio, getAspectRatioLabel } from "@/utils/aspectRatioUtils";

 const ZOOM_ROW_ID = "row-zoom";
 const TRIM_ROW_ID = "row-trim";
@@ -34,6 +41,8 @@ interface TimelineEditorProps {
  onTrimDelete?: (id: string) => void;
  selectedTrimId?: string | null;
  onSelectTrim?: (id: string | null) => void;
+  aspectRatio: AspectRatio;
+  onAspectRatioChange: (aspectRatio: AspectRatio) => void;
 }

 interface TimelineScaleConfig {
@@ -410,6 +419,8 @@ export default function TimelineEditor({
  onTrimDelete,
  selectedTrimId,
  onSelectTrim,
+  aspectRatio,
+  onAspectRatioChange,
 }: TimelineEditorProps) {
  const totalMs = useMemo(() => Math.max(0, Math.round(videoDuration * 1000)), [videoDuration]);
  const currentTimeMs = useMemo(() => Math.round(currentTime * 1000), [currentTime]);
@@ -683,6 +694,32 @@ export default function TimelineEditor({
            <Scissors className="w-4 h-4" />
          </Button>
        </div>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs text-slate-400 hover:text-slate-200 hover:bg-white/10 transition-all gap-1"
+              >
+                <span className="font-medium">{getAspectRatioLabel(aspectRatio)}</span>
+                <ChevronDown className="w-3 h-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="bg-[#1a1a1a] border-white/10">
+              {(['16:9', '9:16', '1:1', '4:3', '4:5'] as AspectRatio[]).map((ratio) => (
+                <DropdownMenuItem
+                  key={ratio}
+                  onClick={() => onAspectRatioChange(ratio)}
+                  className="text-slate-300 hover:text-white hover:bg-white/10 cursor-pointer flex items-center justify-between gap-3"
+                >
+                  <span>{getAspectRatioLabel(ratio)}</span>
+                  {aspectRatio === ratio && <Check className="w-3 h-3 text-[#34B27B]" />}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
        <div className="flex-1" />
        <div className="flex items-center gap-4 text-[10px] text-slate-500 font-medium">
          <span className="flex items-center gap-1.5">
@@ -1,29 +1,15 @@
-export type AspectRatio = '16:9' | '9:16' | '1:1' | '4:3';
+export type AspectRatio = '16:9' | '9:16' | '1:1' | '4:3' | '4:5';

-/**
- * Converts aspect ratio string to numeric value
- * @param aspectRatio - Aspect ratio as string (e.g., '16:9')
- * @returns Numeric aspect ratio value (e.g., 1.777... for 16:9)
- */
 export function getAspectRatioValue(aspectRatio: AspectRatio): number {
  switch (aspectRatio) {
-    case '16:9':
-      return 16 / 9;
-    case '9:16':
-      return 9 / 16;
-    case '1:1':
-      return 1;
-    case '4:3':
-      return 4 / 3;
+    case '16:9': return 16 / 9;
+    case '9:16': return 9 / 16;
+    case '1:1':  return 1;
+    case '4:3':  return 4 / 3;
+    case '4:5':  return 4 / 5;
  }
 }

-/**
- * Calculates dimensions for a given aspect ratio based on a base width
- * @param aspectRatio - Aspect ratio as string
- * @param baseWidth - Base width to calculate from
- * @returns Object with width and height
- */
 export function getAspectRatioDimensions(
  aspectRatio: AspectRatio,
  baseWidth: number
@@ -35,11 +21,11 @@ export function getAspectRatioDimensions(
  };
 }

-/**
- * Formats aspect ratio for CSS
- * @param aspectRatio - Aspect ratio as string
- * @returns CSS-compatible aspect ratio string
- */
+export function getAspectRatioLabel(aspectRatio: AspectRatio): string {
+  return aspectRatio;
+}
+
+
 export function formatAspectRatioForCSS(aspectRatio: AspectRatio): string {
  return aspectRatio.replace(':', '/');
-}
+}