Merge branch 'main' into implement-workflows

1 files changed, 156 insertions, 87 deletions

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 132d6c06..624a549e 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -3,109 +3,112 @@
 import { useTimelineStore } from "@/stores/timeline-store";

 import { useMediaStore } from "@/stores/media-store";

 import { usePlaybackStore } from "@/stores/playback-store";

-import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";

 import { VideoPlayer } from "@/components/ui/video-player";

 import { Button } from "@/components/ui/button";

 import { Play, Pause } 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';

 

 export function PreviewPanel() {

   const { tracks } = useTimelineStore();

   const { mediaItems } = useMediaStore();

   const { isPlaying, toggle, currentTime } = 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 = () => {

+    const activeClips: Array<{

+      clip: any;

+      track: any;

+      mediaItem: any;

+    }> = [];

 

-  // Find the active clip at the current playback time

-  const getActiveClip = () => {

-    for (const track of tracks) {

-      for (const clip of track.clips) {

+    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) {

-          return clip;

+          const mediaItem = clip.mediaId === "test"

+            ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }

+            : mediaItems.find((item) => item.id === clip.mediaId);

+

+          if (mediaItem || clip.mediaId === "test") {

+            activeClips.push({ clip, track, mediaItem });

+          }

         }

-      }

-    }

-    return null;

-  };

+      });

+    });

 

-  const activeClip = getActiveClip();

-  const activeMediaItem = activeClip

-    ? mediaItems.find((item) => item.id === activeClip.mediaId)

-    : null;

+    return activeClips;

+  };

 

-  const aspectRatio = activeMediaItem?.aspectRatio || 16 / 9;

+  const activeClips = getActiveClips();

+  const aspectRatio = canvasSize.width / canvasSize.height;

 

-  const renderContent = () => {

-    if (!activeClip) {

-      return (

-        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">

-          {tracks.length === 0 ? "Drop media to start editing" : "No clip at current time"}

-        </div>

-      );

-    }

+  // Render a clip

+  const renderClip = (clipData: any, index: number) => {

+    const { clip, mediaItem } = clipData;

 

-    // Handle test clips without media items

-    if (!activeMediaItem && activeClip.mediaId === "test") {

+    // Test clips

+    if (!mediaItem || clip.mediaId === "test") {

       return (

-        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-purple-500/20">

+        <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-6xl mb-4">🎬</div>

-            <p className="text-muted-foreground">{activeClip.name}</p>

-            <p className="text-xs text-muted-foreground/70 mt-2">Test clip for playback</p>

+            <div className="text-2xl mb-2">🎬</div>

+            <p className="text-xs text-white">{clip.name}</p>

           </div>

         </div>

       );

     }

 

-    if (!activeMediaItem) {

+    // Video clips

+    if (mediaItem.type === "video") {

       return (

-        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">

-          Media not found

+        <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>

       );

     }

 

-    if (activeMediaItem.type === "video") {

+    // Image clips

+    if (mediaItem.type === "image") {

       return (

-        <VideoPlayer

-          src={activeMediaItem.url}

-          poster={activeMediaItem.thumbnailUrl}

-          className="w-full h-full"

-          clipStartTime={activeClip.startTime}

-          trimStart={activeClip.trimStart}

-          trimEnd={activeClip.trimEnd}

-          clipDuration={activeClip.duration}

-          key={`${activeClip.id}-${activeClip.trimStart}-${activeClip.trimEnd}`}

-        />

-      );

-    }

-

-    if (activeMediaItem.type === "image") {

-      return (

-        <ImageTimelineTreatment

-          src={activeMediaItem.url}

-          alt={activeMediaItem.name}

-          targetAspectRatio={aspectRatio}

-          className="w-full h-full"

-          backgroundType="blur"

-        />

+        <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>

       );

     }

 

-    if (activeMediaItem.type === "audio") {

+    // Audio clips (visual representation)

+    if (mediaItem.type === "audio") {

       return (

-        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-green-500/20 to-emerald-500/20">

+        <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-6xl mb-4">🎵</div>

-            <p className="text-muted-foreground">{activeMediaItem.name}</p>

-            <Button

-              variant="outline"

-              className="mt-4"

-              onClick={toggle}

-            >

-              {isPlaying ? <Pause className="h-4 w-4 mr-2" /> : <Play className="h-4 w-4 mr-2" />}

-              {isPlaying ? "Pause" : "Play"}

-            </Button>

+            <div className="text-2xl mb-2">🎵</div>

+            <p className="text-xs text-white">{mediaItem.name}</p>

           </div>

         </div>

       );

@@ -114,29 +117,95 @@ export function PreviewPanel() {
     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 flex flex-col items-center justify-center p-4 overflow-hidden">

-      <div

-        className="bg-black rounded-lg shadow-lg relative overflow-hidden flex-shrink-0"

-        style={{

-          aspectRatio: aspectRatio.toString(),

-          width: aspectRatio > 1 ? "100%" : "auto",

-          height: aspectRatio <= 1 ? "100%" : "auto",

-          maxWidth: "100%",

-          maxHeight: "100%",

-        }}

-      >

-        {renderContent()}

+    <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={toggle} className="ml-auto">

+          {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}

+          {isPlaying ? "Pause" : "Play"}

+        </Button>

       </div>

 

-      {activeMediaItem && (

-        <div className="mt-4 text-center">

-          <p className="text-sm text-muted-foreground">

-            {activeMediaItem.name}

-          </p>

-          <p className="text-xs text-muted-foreground/70">

-            {aspectRatio.toFixed(2)} • {aspectRatio > 1 ? "Landscape" : aspectRatio < 1 ? "Portrait" : "Square"}

-          </p>

+      {/* Preview Area */}

+      <div className="flex-1 flex items-center justify-center p-2 sm:p-4 bg-gray-900 min-h-0 min-w-0">

+        <div

+          ref={previewRef}

+          className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border border-gray-600"

+          style={{

+            aspectRatio: aspectRatio.toString(),

+            width: "100%",

+            height: "100%",

+          }}

+        >

+          {activeClips.length === 0 ? (

+            <div className="absolute inset-0 flex items-center justify-center text-white/50">

+              {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>