ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): show block preview directly in the player area

Browse Source 
Render the catalog hover preview as a full-bleed video inside the
preview overlay slot instead of a dimmed card overlay on top.
This commit is contained in:
Miguel Ángel
2026-05-21 18:27:29 -04:00
parent 9f9b9f4c06
commit f51d324ff5
1 changed files with 20 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/StudioPreviewArea.tsx
+20 -28
View File
@@ -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>
);
}