From 3ea6b002547beb58ac7cd54b9c95c1755ead5ad1 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 25 Jun 2025 22:55:25 +0200
Subject: [PATCH] fix: lock aspect ratio in preview

---
 .../src/components/editor/preview-panel.tsx   | 540 ++++++++++--------
 1 file changed, 290 insertions(+), 250 deletions(-)

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index fafb26b..5ee5748 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -1,250 +1,290 @@
-"use client";
-
-import {
-  useTimelineStore,
-  type TimelineClip,
-  type TimelineTrack,
-} from "@/stores/timeline-store";
-import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import { VideoPlayer } from "@/components/ui/video-player";
-import { Button } from "@/components/ui/button";
-import { Play, Pause, Volume2, VolumeX } from "lucide-react";
-import { useState, useRef } from "react";
-
-// Debug flag - set to false to hide active clips info
-const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";
-
-interface ActiveClip {
-  clip: TimelineClip;
-  track: TimelineTrack;
-  mediaItem: MediaItem | null;
-}
-
-export function PreviewPanel() {
-  const { tracks } = useTimelineStore();
-  const { mediaItems } = useMediaStore();
-  const { isPlaying, toggle, currentTime, muted, toggleMute, volume } =
-    usePlaybackStore();
-  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
-  const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);
-  const previewRef = useRef<HTMLDivElement>(null);
-
-  // Get active clips at current time
-  const getActiveClips = (): ActiveClip[] => {
-    const activeClips: ActiveClip[] = [];
-
-    tracks.forEach((track) => {
-      track.clips.forEach((clip) => {
-        const clipStart = clip.startTime;
-        const clipEnd =
-          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
-        if (currentTime >= clipStart && currentTime < clipEnd) {
-          const mediaItem =
-            clip.mediaId === "test"
-              ? null // Test clips don't have a real media item
-              : mediaItems.find((item) => item.id === clip.mediaId) || null;
-
-          activeClips.push({ clip, track, mediaItem });
-        }
-      });
-    });
-
-    return activeClips;
-  };
-
-  const activeClips = getActiveClips();
-  const aspectRatio = canvasSize.width / canvasSize.height;
-
-  // Render a clip
-  const renderClip = (clipData: ActiveClip, index: number) => {
-    const { clip, mediaItem } = clipData;
-
-    // Test clips
-    if (!mediaItem || clip.mediaId === "test") {
-      return (
-        <div
-          key={clip.id}
-          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
-        >
-          <div className="text-center">
-            <div className="text-2xl mb-2">🎬</div>
-            <p className="text-xs text-white">{clip.name}</p>
-          </div>
-        </div>
-      );
-    }
-
-    // Video clips
-    if (mediaItem.type === "video") {
-      return (
-        <div key={clip.id} className="absolute inset-0">
-          <VideoPlayer
-            src={mediaItem.url}
-            poster={mediaItem.thumbnailUrl}
-            clipStartTime={clip.startTime}
-            trimStart={clip.trimStart}
-            trimEnd={clip.trimEnd}
-            clipDuration={clip.duration}
-          />
-        </div>
-      );
-    }
-
-    // Image clips
-    if (mediaItem.type === "image") {
-      return (
-        <div key={clip.id} className="absolute inset-0">
-          <img
-            src={mediaItem.url}
-            alt={mediaItem.name}
-            className="w-full h-full object-cover"
-            draggable={false}
-          />
-        </div>
-      );
-    }
-
-    // Audio clips (visual representation)
-    if (mediaItem.type === "audio") {
-      return (
-        <div
-          key={clip.id}
-          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
-        >
-          <div className="text-center">
-            <div className="text-2xl mb-2">🎵</div>
-            <p className="text-xs text-white">{mediaItem.name}</p>
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  // Canvas presets
-  const canvasPresets = [
-    { name: "16:9 HD", width: 1920, height: 1080 },
-    { name: "16:9 4K", width: 3840, height: 2160 },
-    { name: "9:16 Mobile", width: 1080, height: 1920 },
-    { name: "1:1 Square", width: 1080, height: 1080 },
-    { name: "4:3 Standard", width: 1440, height: 1080 },
-  ];
-
-  return (
-    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
-      {/* Controls */}
-      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
-        <span className="text-muted-foreground">Canvas:</span>
-        <select
-          value={`${canvasSize.width}x${canvasSize.height}`}
-          onChange={(e) => {
-            const preset = canvasPresets.find(
-              (p) => `${p.width}x${p.height}` === e.target.value
-            );
-            if (preset)
-              setCanvasSize({ width: preset.width, height: preset.height });
-          }}
-          className="bg-background border rounded px-2 py-1 text-xs"
-        >
-          {canvasPresets.map((preset) => (
-            <option
-              key={preset.name}
-              value={`${preset.width}x${preset.height}`}
-            >
-              {preset.name} ({preset.width}×{preset.height})
-            </option>
-          ))}
-        </select>
-
-        {/* Debug Toggle - Only show in development */}
-        {SHOW_DEBUG_INFO && (
-          <Button
-            variant="text"
-            size="sm"
-            onClick={() => setShowDebug(!showDebug)}
-            className="text-xs"
-          >
-            Debug {showDebug ? "ON" : "OFF"}
-          </Button>
-        )}
-
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={toggleMute}
-          className="ml-auto"
-        >
-          {muted || volume === 0 ? (
-            <VolumeX className="h-3 w-3 mr-1" />
-          ) : (
-            <Volume2 className="h-3 w-3 mr-1" />
-          )}
-          {muted || volume === 0 ? "Unmute" : "Mute"}
-        </Button>
-
-        <Button variant="outline" size="sm" onClick={toggle}>
-          {isPlaying ? (
-            <Pause className="h-3 w-3 mr-1" />
-          ) : (
-            <Play className="h-3 w-3 mr-1" />
-          )}
-          {isPlaying ? "Pause" : "Play"}
-        </Button>
-      </div>
-
-      {/* Preview Area */}
-      <div className="flex-1 flex items-center justify-center p-2 sm:p-4 min-h-0 min-w-0">
-        <div
-          ref={previewRef}
-          className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border"
-          style={{
-            aspectRatio: aspectRatio.toString(),
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          {activeClips.length === 0 ? (
-            <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
-              {tracks.length === 0
-                ? "Drop media to start editing"
-                : "No clips at current time"}
-            </div>
-          ) : (
-            activeClips.map((clipData, index) => renderClip(clipData, index))
-          )}
-        </div>
-      </div>
-
-      {/* Debug Info Panel - Conditionally rendered */}
-      {showDebug && (
-        <div className="border-t bg-background p-2 flex-shrink-0">
-          <div className="text-xs font-medium mb-1">
-            Debug: Active Clips ({activeClips.length})
-          </div>
-          <div className="flex gap-2 overflow-x-auto">
-            {activeClips.map((clipData, index) => (
-              <div
-                key={clipData.clip.id}
-                className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
-              >
-                <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
-                  {index + 1}
-                </span>
-                <span>{clipData.clip.name}</span>
-                <span className="text-muted-foreground">
-                  ({clipData.mediaItem?.type || "test"})
-                </span>
-              </div>
-            ))}
-            {activeClips.length === 0 && (
-              <span className="text-muted-foreground">No active clips</span>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import {
+  useTimelineStore,
+  type TimelineClip,
+  type TimelineTrack,
+} from "@/stores/timeline-store";
+import { useMediaStore, type MediaItem } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { VideoPlayer } from "@/components/ui/video-player";
+import { Button } from "@/components/ui/button";
+import { Play, Pause, Volume2, VolumeX } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+
+// Debug flag - set to false to hide active clips info
+const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";
+
+interface ActiveClip {
+  clip: TimelineClip;
+  track: TimelineTrack;
+  mediaItem: MediaItem | null;
+}
+
+export function PreviewPanel() {
+  const { tracks } = useTimelineStore();
+  const { mediaItems } = useMediaStore();
+  const { isPlaying, toggle, currentTime, muted, toggleMute, volume } =
+    usePlaybackStore();
+  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
+  const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [previewDimensions, setPreviewDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  // Calculate optimal preview size that fits in container while maintaining aspect ratio
+  useEffect(() => {
+    const updatePreviewSize = () => {
+      if (!containerRef.current) return;
+
+      const container = containerRef.current.getBoundingClientRect();
+      const targetRatio = canvasSize.width / canvasSize.height;
+      const containerRatio = container.width / container.height;
+
+      let width, height;
+
+      if (containerRatio > targetRatio) {
+        // Container is wider - constrain by height
+        height = container.height;
+        width = height * targetRatio;
+      } else {
+        // Container is taller - constrain by width
+        width = container.width;
+        height = width / targetRatio;
+      }
+
+      setPreviewDimensions({ width, height });
+    };
+
+    updatePreviewSize();
+
+    const resizeObserver = new ResizeObserver(updatePreviewSize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [canvasSize.width, canvasSize.height]);
+
+  // Get active clips at current time
+  const getActiveClips = (): ActiveClip[] => {
+    const activeClips: ActiveClip[] = [];
+
+    tracks.forEach((track) => {
+      track.clips.forEach((clip) => {
+        const clipStart = clip.startTime;
+        const clipEnd =
+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+
+        if (currentTime >= clipStart && currentTime < clipEnd) {
+          const mediaItem =
+            clip.mediaId === "test"
+              ? null // Test clips don't have a real media item
+              : mediaItems.find((item) => item.id === clip.mediaId) || null;
+
+          activeClips.push({ clip, track, mediaItem });
+        }
+      });
+    });
+
+    return activeClips;
+  };
+
+  const activeClips = getActiveClips();
+
+  // Render a clip
+  const renderClip = (clipData: ActiveClip, index: number) => {
+    const { clip, mediaItem } = clipData;
+
+    // Test clips
+    if (!mediaItem || clip.mediaId === "test") {
+      return (
+        <div
+          key={clip.id}
+          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
+        >
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎬</div>
+            <p className="text-xs text-white">{clip.name}</p>
+          </div>
+        </div>
+      );
+    }
+
+    // Video clips
+    if (mediaItem.type === "video") {
+      return (
+        <div key={clip.id} className="absolute inset-0">
+          <VideoPlayer
+            src={mediaItem.url}
+            poster={mediaItem.thumbnailUrl}
+            clipStartTime={clip.startTime}
+            trimStart={clip.trimStart}
+            trimEnd={clip.trimEnd}
+            clipDuration={clip.duration}
+          />
+        </div>
+      );
+    }
+
+    // Image clips
+    if (mediaItem.type === "image") {
+      return (
+        <div key={clip.id} className="absolute inset-0">
+          <img
+            src={mediaItem.url}
+            alt={mediaItem.name}
+            className="w-full h-full object-cover"
+            draggable={false}
+          />
+        </div>
+      );
+    }
+
+    // Audio clips (visual representation)
+    if (mediaItem.type === "audio") {
+      return (
+        <div
+          key={clip.id}
+          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
+        >
+          <div className="text-center">
+            <div className="text-2xl mb-2">🎵</div>
+            <p className="text-xs text-white">{mediaItem.name}</p>
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  // Canvas presets
+  const canvasPresets = [
+    { name: "16:9 HD", width: 1920, height: 1080 },
+    { name: "16:9 4K", width: 3840, height: 2160 },
+    { name: "9:16 Mobile", width: 1080, height: 1920 },
+    { name: "1:1 Square", width: 1080, height: 1080 },
+    { name: "4:3 Standard", width: 1440, height: 1080 },
+  ];
+
+  return (
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
+      {/* Controls */}
+      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
+        <span className="text-muted-foreground">Canvas:</span>
+        <select
+          value={`${canvasSize.width}x${canvasSize.height}`}
+          onChange={(e) => {
+            const preset = canvasPresets.find(
+              (p) => `${p.width}x${p.height}` === e.target.value
+            );
+            if (preset)
+              setCanvasSize({ width: preset.width, height: preset.height });
+          }}
+          className="bg-background border rounded px-2 py-1 text-xs"
+        >
+          {canvasPresets.map((preset) => (
+            <option
+              key={preset.name}
+              value={`${preset.width}x${preset.height}`}
+            >
+              {preset.name} ({preset.width}×{preset.height})
+            </option>
+          ))}
+        </select>
+
+        {/* Debug Toggle - Only show in development */}
+        {SHOW_DEBUG_INFO && (
+          <Button
+            variant="text"
+            size="sm"
+            onClick={() => setShowDebug(!showDebug)}
+            className="text-xs"
+          >
+            Debug {showDebug ? "ON" : "OFF"}
+          </Button>
+        )}
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={toggleMute}
+          className="ml-auto"
+        >
+          {muted || volume === 0 ? (
+            <VolumeX className="h-3 w-3 mr-1" />
+          ) : (
+            <Volume2 className="h-3 w-3 mr-1" />
+          )}
+          {muted || volume === 0 ? "Unmute" : "Mute"}
+        </Button>
+
+        <Button variant="outline" size="sm" onClick={toggle}>
+          {isPlaying ? (
+            <Pause className="h-3 w-3 mr-1" />
+          ) : (
+            <Play className="h-3 w-3 mr-1" />
+          )}
+          {isPlaying ? "Pause" : "Play"}
+        </Button>
+      </div>
+
+      {/* Preview Area */}
+      <div
+        ref={containerRef}
+        className="flex-1 flex items-center justify-center p-2 sm:p-4 min-h-0 min-w-0"
+      >
+        <div
+          ref={previewRef}
+          className="relative overflow-hidden rounded-sm bg-black border"
+          style={{
+            width: previewDimensions.width,
+            height: previewDimensions.height,
+          }}
+        >
+          {activeClips.length === 0 ? (
+            <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+              {tracks.length === 0
+                ? "Drop media to start editing"
+                : "No clips at current time"}
+            </div>
+          ) : (
+            activeClips.map((clipData, index) => renderClip(clipData, index))
+          )}
+        </div>
+      </div>
+
+      {/* Debug Info Panel - Conditionally rendered */}
+      {showDebug && (
+        <div className="border-t bg-background p-2 flex-shrink-0">
+          <div className="text-xs font-medium mb-1">
+            Debug: Active Clips ({activeClips.length})
+          </div>
+          <div className="flex gap-2 overflow-x-auto">
+            {activeClips.map((clipData, index) => (
+              <div
+                key={clipData.clip.id}
+                className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
+              >
+                <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
+                  {index + 1}
+                </span>
+                <span>{clipData.clip.name}</span>
+                <span className="text-muted-foreground">
+                  ({clipData.mediaItem?.type || "test"})
+                </span>
+              </div>
+            ))}
+            {activeClips.length === 0 && (
+              <span className="text-muted-foreground">No active clips</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}