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

fix(studio): move player controls into preview area so they stay visible when timeline is hidden

Browse Source
This commit is contained in:
Miguel Ángel
2026-03-31 01:57:59 +00:00
committed by Miguel Ángel
parent 909c2db136
commit eca7a2caec
1 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/nle/NLELayout.tsx
+28 -27
View File
@@ -317,17 +317,34 @@ export const NLELayout = memo(function NLELayout({
onKeyDown={handleKeyDown}
tabIndex={-1}
>
{/* Preview — takes remaining space above timeline */}
<div className="flex-1 min-h-0 relative">
<NLEPreview
projectId={projectId}
iframeRef={iframeRef}
onIframeLoad={onIframeLoad}
portrait={portrait}
directUrl={directUrl}
refreshKey={refreshKey}
/>
{previewOverlay}
{/* Preview + player controls — takes remaining space above timeline */}
<div className="flex-1 min-h-0 flex flex-col">
<div className="flex-1 min-h-0 relative">
<NLEPreview
projectId={projectId}
iframeRef={iframeRef}
onIframeLoad={onIframeLoad}
portrait={portrait}
directUrl={directUrl}
refreshKey={refreshKey}
/>
{previewOverlay}
</div>
{/* Player controls always visible, regardless of timeline state */}
<div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
{compositionStack.length > 1 && (
<CompositionBreadcrumb
stack={compositionStack}
onNavigate={handleNavigateComposition}
/>
)}
<PlayerControls
onTogglePlay={togglePlay}
onSeek={seek}
timelineVisible={timelineVisible ?? true}
onToggleTimeline={onToggleTimeline}
/>
</div>
</div>
{(timelineVisible ?? true) && (
@@ -343,22 +360,6 @@ export const NLELayout = memo(function NLELayout({
{/* Timeline section — fixed height, resizable */}
<div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
{/* Breadcrumb + Player controls */}
<div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
{compositionStack.length > 1 && (
<CompositionBreadcrumb
stack={compositionStack}
onNavigate={handleNavigateComposition}
/>
)}
<PlayerControls
onTogglePlay={togglePlay}
onSeek={seek}
timelineVisible={timelineVisible ?? true}
onToggleTimeline={onToggleTimeline}
/>
</div>
{/* Timeline tracks */}
<div
className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"