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

feat(studio): add pasteboard background to preview viewport (#819)

Browse Source 
* feat(studio): add pasteboard background to preview viewport

Adds bg-neutral-800 to the preview viewport so the area outside the
canvas is visually distinct from the composition content — consistent
with professional video editors (Premiere, DaVinci, Figma).

* feat(studio): pasteboard background and canvas outline around preview

- NLEPreview: viewport gets bg-neutral-700 (#404040) as the pasteboard
  color surrounding the canvas — distinct from the app chrome (#0a0a0a)
- Player wrapper: drop bg-black so the pasteboard shows around the canvas
  (loading overlays still cover the area with bg-black during load)
- Player: set host background to transparent via inline style (overrides
  :host { background: #000 } in shadow DOM), and inject a style rule into
  the open shadow root so .hfp-container has overflow:visible and the
  canvas iframe gets a thin white ring + soft drop-shadow — making the
  canvas boundary legible against the pasteboard
This commit is contained in:
Miguel Ángel
2026-05-14 03:13:45 +02:00
committed by GitHub
parent 7585f79dc1
commit 34f5fc05f3
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/nle/NLEPreview.tsx
+1 -1
View File
@@ -264,7 +264,7 @@ export const NLEPreview = memo(function NLEPreview({
<div className="flex flex-col h-full min-h-0">
<div
ref={viewportRef}
className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40"
className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40 bg-neutral-700"
tabIndex={0}
aria-label="Composition preview"
onPointerDown={handlePointerDown}