@bycrux/editor 0.6.2 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "private": false,
   "type": "module",
   "exports": {

package/src/types.ts

@@ -491,13 +491,17 @@ export interface VideoEditorProps<P extends Project = Project> {
   onBackToSetup?: () => void
   /**
    * Where the host's `slots.assetsPanel` is placed in the review layout:
-   * - `'right'` (default) — a sidebar column to the right of the preview/timeline.
-   *   The historical Montaj-local layout; preferred when horizontal space is ample.
+   * - `'sidebar'` — stacked inside the right-hand version/run-history rail, below
+   *   it, sharing one column. This is the historical Montaj-local OS layout
+   *   (versions on top, assets right below) and what the desktop UI uses.
+   * - `'right'` — its own dedicated sidebar column to the LEFT of the version
+   *   rail (two separate columns). Preferred only when horizontal space is ample
+   *   and the host wants assets visually distinct from versions.
    * - `'bottom'` — a full-width region stacked below the editor. Used by hosts with
    *   constrained width (e.g. the Hub editor) where vertical stacking reads better.
    * The host chooses per deployment; the package defaults to `'right'`.
    */
-  assetsPlacement?: 'right' | 'bottom'
+  assetsPlacement?: 'sidebar' | 'right' | 'bottom'
 
   // ── Host-supplied Montaj-specific UI (render-prop seams) ──────────────────
   // The clip/audio inspector and the subcut-regeneration tool read host-only

package/src/video/VideoEditor.tsx

@@ -561,17 +561,23 @@ function ReviewSurface<P extends Project>({
         </div>
       </div>
 
-      {/* Assets — right sidebar column (assetsPlacement: 'right', the default /
-          Montaj-local layout). The host's panel manages its own scroll. */}
+      {/* Assets — dedicated separate column to the LEFT of the version rail
+          (assetsPlacement: 'right', two distinct columns). The Montaj-local OS
+          layout uses 'sidebar' instead (stacked into the version rail below).
+          The host's panel manages its own scroll. */}
       {assetsPlacement === 'right' && slots?.assetsPanel && (
         <div className="w-72 shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden">
           {slots.assetsPanel}
         </div>
       )}
 
-      {/* Right rail — version history + run history slot */}
-      {(adapter.listVersionHistory || slots?.runHistory) && (
-        <div className="w-48 shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden">
+      {/* Right rail — version history + run history slot, and (in 'sidebar'
+          placement) the assets panel stacked beneath them in the SAME column.
+          This is the historical Montaj-local OS layout: versions on top, assets
+          right below, one column — not a separate assets column. */}
+      {(adapter.listVersionHistory || slots?.runHistory ||
+        (assetsPlacement === 'sidebar' && slots?.assetsPanel)) && (
+        <div className={`${assetsPlacement === 'sidebar' ? 'w-56' : 'w-48'} shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden`}>
           {adapter.listVersionHistory && (
             <VersionPanel versions={versions} restoring={restoring} onRestore={handleRestoreVersion} />
           )}
@@ -579,6 +585,14 @@ function ReviewSurface<P extends Project>({
               RunSnapshot / project.history are host-only types — the package never
               reads them. When absent nothing is rendered. */}
           {slots?.runHistory}
+          {/* Assets stacked below versions/runs (assetsPlacement: 'sidebar'). The
+              host's panel manages its own scroll; flex-1 lets it take the
+              remaining rail height. A top border separates it from the runs. */}
+          {assetsPlacement === 'sidebar' && slots?.assetsPanel && (
+            <div className="flex-1 min-h-0 overflow-hidden border-t border-[var(--editor-border)] flex flex-col">
+              {slots.assetsPanel}
+            </div>
+          )}
         </div>
       )}
       </div>

package/src/video/preview/CaptionPreview.tsx

@@ -63,7 +63,13 @@ export default function CaptionPreview({ track, currentTime, fps, compileOverlay
     : null
 
   return (
-    <div ref={wrapRef} className="absolute inset-0 pointer-events-none overflow-hidden">
+    // zIndex 45 keeps captions above the active <video> (z 1) and overlay items
+    // (z `trackIdx + 12`, ≈12–20) — mirroring the final render, where the caption
+    // track composites on top — while staying below the editing affordances
+    // (selection handles z 50, play button z 100). Without an explicit z-index the
+    // root sits at `auto`, so the opaque active video paints over it and captions
+    // never appear in the preview.
+    <div ref={wrapRef} className="absolute inset-0 pointer-events-none overflow-hidden" style={{ zIndex: 45 }}>
       <OverlayErrorBoundary label={`caption: ${track.style}`} resetKey={track.style}>
         {element && scale !== null && (
           <div style={{

package/src/video/preview/PreviewPlayer.tsx

@@ -136,6 +136,8 @@ export default function PreviewPlayer({
             // and the Web Audio createMediaElementSource graph outputs silence. R2
             // sends Access-Control-Allow-Origin, so anonymous CORS keeps it audible.
             crossOrigin="anonymous"
+            // Fetch enough to render the seeked poster frame on load (before play).
+            preload="auto"
             onLoadedMetadata={(e) => { const v = e.currentTarget; if (v.videoWidth && v.videoHeight) setVideoDims({ w: v.videoWidth, h: v.videoHeight }) }}
             onTimeUpdate={() => { if (activeSlotRef.current === 0) handleTimeUpdate() }}
             onEnded={() => { if (activeSlotRef.current === 0) handleEnded() }}
@@ -150,6 +152,7 @@ export default function PreviewPlayer({
             // See slot 0: anonymous CORS so R2 cross-origin clips aren't tainted
             // (which would mute the Web Audio graph).
             crossOrigin="anonymous"
+            preload="auto"
             onLoadedMetadata={(e) => { const v = e.currentTarget; if (v.videoWidth && v.videoHeight) setVideoDims({ w: v.videoWidth, h: v.videoHeight }) }}
             onTimeUpdate={() => { if (activeSlotRef.current === 1) handleTimeUpdate() }}
             onEnded={() => { if (activeSlotRef.current === 1) handleEnded() }}

package/src/video/preview/useVideoPlayback.ts

@@ -196,6 +196,12 @@ export function useVideoPlayback(
    * deferred play() is not autoplay-blocked.
    */
   function playFromGesture(video: HTMLVideoElement) {
+    // Wire this slot to Web Audio on the first play (not at load) so the paused
+    // poster frame can render. This also creates the shared AudioContext inside
+    // the gesture, so the resume() below is gesture-credited.
+    ensureVideoGain(activeSlotRef.current)
+    const cur = clips[activeIdxRef.current]
+    if (cur) applyClipVolume(cur)
     const w = window as Window & MontajWindow
     const ctx = w.__montajSharedCtx
     if (ctx && ctx.state === 'suspended') {
@@ -208,6 +214,18 @@ export function useVideoPlayback(
     }
   }
 
+  // Start playback on a slot during an automated clip-boundary switch (context
+  // already running — no gesture needed). If the slot isn't buffered yet (a slow
+  // non-faststart HEVC tail-moov fetch can still be in flight), play() may reject
+  // with AbortError; retry on `canplay` so the switch never dead-stops at the cut.
+  function playSoon(video: HTMLVideoElement) {
+    const p = video.play()
+    if (p) p.catch(() => {
+      const onCanPlay = () => { video.removeEventListener('canplay', onCanPlay); video.play().catch(() => {}) }
+      video.addEventListener('canplay', onCanPlay)
+    })
+  }
+
   function ensureVideoGain(slot: 0 | 1): GainNode | null {
     if (videoGainRef.current[slot]) return videoGainRef.current[slot]
     const video = slot === 0 ? video0Ref.current : video1Ref.current
@@ -229,11 +247,21 @@ export function useVideoPlayback(
     return v.__montajGain ?? null
   }
 
-  // Set video clip volume via GainNode (supports amplification > 1.0).
-  // Muted clips get gain 0; unmuted clips get the clip's volume value.
+  // Existing gain for a slot WITHOUT wiring it. Wiring (createMediaElementSource)
+  // is deferred to the first play gesture so the paused poster frame can render —
+  // a <video> wired to a suspended AudioContext produces no frames at all.
+  function getVideoGain(slot: 0 | 1): GainNode | null {
+    const v = (slot === 0 ? video0Ref.current : video1Ref.current) as MontajVideoElement | null
+    return (v && v.__montajGain) ?? null
+  }
+
+  // Set video clip volume via GainNode (supports amplification > 1.0). Muted clips
+  // get gain 0; unmuted clips get the clip's volume value. No-op until the slot is
+  // wired (first play) — there's no audio to control on a paused poster, and
+  // wiring here would gate the poster frame on the suspended context.
   function applyClipVolume(clip: { muted?: boolean; volume?: number }) {
     const slot = activeSlotRef.current
-    const gain = ensureVideoGain(slot)
+    const gain = getVideoGain(slot)
     if (gain) gain.gain.value = clip.muted ? 0 : (clip.volume ?? 1)
   }
 
@@ -553,7 +581,7 @@ export function useVideoPlayback(
       if (preloadSrcRef.current !== src) { nv.src = src; nv.currentTime = effectiveInPoint(nc) }
       const gain = ensureVideoGain(ns)
       if (gain) gain.gain.value = nc.muted ? 0 : (nc.volume ?? 1)
-      nv.play().catch(() => {})
+      playSoon(nv)
     }
     void (activeSlotRef.current === 0 ? video0Ref.current : video1Ref.current)?.pause()
     activeSlotRef.current = ns
@@ -643,21 +671,26 @@ export function useVideoPlayback(
     const clipInPoint = effectiveInPoint(clip)
     const outPoint = effectiveOutPoint(clip) ?? clip.end - clip.start + clipInPoint
 
-    // Preload next clip into inactive slot ~1s before end
-    const timeLeft = outPoint - video.currentTime
-    if (timeLeft < 1.0) {
-      const nextIdx = activeIdxRef.current + 1
-      if (nextIdx < clips.length && clips[nextIdx].src) {
-        const inactiveVideo = slot === 0 ? video1Ref.current : video0Ref.current
-        const nextSrc = fileUrlRef.current(playbackSrcFor(clips[nextIdx]))
-        if (inactiveVideo && preloadSrcRef.current !== nextSrc) {
-          preloadSrcRef.current = nextSrc
-          inactiveVideo.src = nextSrc
-          inactiveVideo.currentTime = effectiveInPoint(clips[nextIdx])
-          const inactiveSlot = (1 - slot) as 0 | 1
-          const nextGain = ensureVideoGain(inactiveSlot)
-          if (nextGain) nextGain.gain.value = clips[nextIdx].muted ? 0 : (clips[nextIdx].volume ?? 1)
-        }
+    // Preload the next clip into the inactive slot as early as possible. The
+    // source files are large 4K 10-bit HEVC with the moov atom at the END of the
+    // file (not web-faststart), so the browser needs a slow tail range-fetch to
+    // index and seek before it can decode. The old "~1s before end" lead was far
+    // too short: at a cross-source cut the next slot wasn't ready and play()
+    // stalled, freezing playback at the boundary. (Same-source cuts hid the bug —
+    // the moov was already cached from the active slot.) Give the load the whole
+    // current clip as runway instead; the preloadSrcRef guard keeps it idempotent
+    // and a scrub clears it.
+    const nextIdx = activeIdxRef.current + 1
+    if (nextIdx < clips.length && clips[nextIdx].src) {
+      const inactiveVideo = slot === 0 ? video1Ref.current : video0Ref.current
+      const nextSrc = fileUrlRef.current(playbackSrcFor(clips[nextIdx]))
+      if (inactiveVideo && preloadSrcRef.current !== nextSrc) {
+        preloadSrcRef.current = nextSrc
+        inactiveVideo.src = nextSrc
+        inactiveVideo.currentTime = effectiveInPoint(clips[nextIdx])
+        const inactiveSlot = (1 - slot) as 0 | 1
+        const nextGain = ensureVideoGain(inactiveSlot)
+        if (nextGain) nextGain.gain.value = clips[nextIdx].muted ? 0 : (clips[nextIdx].volume ?? 1)
       }
     }
 
@@ -707,7 +740,7 @@ export function useVideoPlayback(
             }
             const nextGain = ensureVideoGain(nextSlot)
             if (nextGain) nextGain.gain.value = next.muted ? 0 : (next.volume ?? 1)
-            nextVideo.play().catch(() => {})
+            playSoon(nextVideo)
           }
 
           activeSlotRef.current = nextSlot