feat(studio): show main composition behind component sub-composition previews

When previewing a component (compositions/components/*), render the
main composition player as a backdrop behind the transparent component
overlay. This lets users see captions, vignettes, and other overlays
in context instead of against a black void.
This commit is contained in:
Miguel Ángel
2026-05-21 19:01:20 -04:00
parent 5c79cd0a8e
commit 2614071618
@@ -391,6 +391,16 @@ export const NLEPreview = memo(function NLEPreview({
}}
data-testid="preview-zoom-stage"
>
{directUrl?.includes("/components/") && (
<Player
key={`backdrop-${projectId}`}
projectId={projectId}
onLoad={() => {}}
portrait={portrait}
suppressLoadingOverlay
style={{ position: "absolute", inset: 0, zIndex: 0 }}
/>
)}
<Player
key={activeKey}
ref={iframeRef}
@@ -403,6 +413,11 @@ export const NLEPreview = memo(function NLEPreview({
onCompositionLoadingChange={onCompositionLoadingChange}
portrait={portrait}
suppressLoadingOverlay={suppressLoadingOverlay}
style={
directUrl?.includes("/components/")
? { position: "absolute", inset: 0, zIndex: 1 }
: undefined
}
/>
</div>
</div>