From f51d324ff5a8f3073f3bd19446edd3eb599699de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Thu, 21 May 2026 17:18:55 -0400
Subject: [PATCH] fix(studio): show block preview directly in the player area

Render the catalog hover preview as a full-bleed video inside the
preview overlay slot instead of a dimmed card overlay on top.
---
 .../src/components/StudioPreviewArea.tsx      | 48 ++++++++-----------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/studio/src/components/StudioPreviewArea.tsx b/packages/studio/src/components/StudioPreviewArea.tsx
index ff4511de1..1c14402bc 100644
--- a/packages/studio/src/components/StudioPreviewArea.tsx
+++ b/packages/studio/src/components/StudioPreviewArea.tsx
@@ -132,7 +132,26 @@ export function StudioPreviewArea({
         }}
         onIframeRef={handlePreviewIframeRef}
         previewOverlay={
-          captionEditMode ? (
+          blockPreview ? (
+            <div className="absolute inset-0 z-30 bg-black pointer-events-none">
+              {blockPreview.videoUrl ? (
+                <video
+                  src={blockPreview.videoUrl}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                  className="w-full h-full object-contain"
+                />
+              ) : blockPreview.posterUrl ? (
+                <img
+                  src={blockPreview.posterUrl}
+                  alt={blockPreview.title}
+                  className="w-full h-full object-contain"
+                />
+              ) : null}
+            </div>
+          ) : captionEditMode ? (
             <CaptionOverlay iframeRef={previewIframeRef} />
           ) : STUDIO_INSPECTOR_PANELS_ENABLED ? (
             <DomEditOverlay
@@ -177,33 +196,6 @@ export function StudioPreviewArea({
         timelineVisible={timelineVisible}
         onToggleTimeline={toggleTimelineVisibility}
       />
-      {blockPreview && (
-        <div className="absolute inset-0 z-40 flex items-center justify-center bg-black/70 pointer-events-none">
-          <div className="relative w-[80%] max-w-[900px] rounded-lg overflow-hidden shadow-2xl border border-neutral-700/40">
-            <div className="aspect-video bg-neutral-950">
-              {blockPreview.videoUrl ? (
-                <video
-                  src={blockPreview.videoUrl}
-                  autoPlay
-                  muted
-                  loop
-                  playsInline
-                  className="w-full h-full object-contain"
-                />
-              ) : blockPreview.posterUrl ? (
-                <img
-                  src={blockPreview.posterUrl}
-                  alt={blockPreview.title}
-                  className="w-full h-full object-contain"
-                />
-              ) : null}
-            </div>
-            <div className="bg-neutral-900/95 px-3 py-2">
-              <div className="text-[12px] font-medium text-neutral-200">{blockPreview.title}</div>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }