From 61c172c9cce27f7f062d3fb6fb82f4b040efb35f Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Mon, 23 Jun 2025 14:40:34 +0300
Subject: feat: proper video playback including images and videos on the
 timeline

---
 apps/web/src/components/editor/preview-panel.tsx | 29 ++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

(limited to 'apps/web/src/components/editor/preview-panel.tsx')

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 74bf5f98..132d6c06 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -36,7 +36,7 @@ export function PreviewPanel() {
   const aspectRatio = activeMediaItem?.aspectRatio || 16 / 9;
 
   const renderContent = () => {
-    if (!activeMediaItem || !activeClip) {
+    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"}
@@ -44,8 +44,26 @@ export function PreviewPanel() {
       );
     }
 
-    // Calculate the relative time within the clip (accounting for trim)
-    const relativeTime = Math.max(0, currentTime - activeClip.startTime + activeClip.trimStart);
+    // Handle test clips without media items
+    if (!activeMediaItem && activeClip.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 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>
+        </div>
+      );
+    }
+
+    if (!activeMediaItem) {
+      return (
+        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">
+          Media not found
+        </div>
+      );
+    }
 
     if (activeMediaItem.type === "video") {
       return (
@@ -53,7 +71,10 @@ export function PreviewPanel() {
           src={activeMediaItem.url}
           poster={activeMediaItem.thumbnailUrl}
           className="w-full h-full"
-          startTime={relativeTime}
+          clipStartTime={activeClip.startTime}
+          trimStart={activeClip.trimStart}
+          trimEnd={activeClip.trimEnd}
+          clipDuration={activeClip.duration}
           key={`${activeClip.id}-${activeClip.trimStart}-${activeClip.trimEnd}`}
         />
       );
-- 
cgit v1.3.1