fix: lock aspect ratio in preview

1 files 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 fafb26bd..5ee57487 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>
+  );
+}