mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user