@bycrux/editor 0.6.1 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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-64' : '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/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

@@ -185,6 +185,35 @@ export function useVideoPlayback(
     }
   }
 
+  /**
+   * Start playback on a wired <video> from a user gesture. Video frame
+   * production is gated on the shared AudioContext clock running, and the
+   * context is created suspended inside a useEffect — so the FIRST play after a
+   * hard refresh fires while resume() is still pending and renders no frames
+   * until the next seek. resume() is gesture-credited at the synchronous call
+   * site here, so wait for it to actually resolve to 'running' before calling
+   * play(); the page already has sticky activation from the click, so the
+   * 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') {
+      ctx.resume().then(
+        () => { void video.play().catch(() => {}) },
+        () => { void video.play().catch(() => {}) },
+      )
+    } else {
+      void video.play().catch(() => {})
+    }
+  }
+
   function ensureVideoGain(slot: 0 | 1): GainNode | null {
     if (videoGainRef.current[slot]) return videoGainRef.current[slot]
     const video = slot === 0 ? video0Ref.current : video1Ref.current
@@ -206,11 +235,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)
   }
 
@@ -447,7 +486,7 @@ export function useVideoPlayback(
         }
         const video = getActiveVideo()
         if (!video) return
-        if (video.paused) { video.play().catch(() => {}) } else { video.pause() }
+        if (video.paused) { playFromGesture(video) } else { video.pause() }
       }
     }
     document.addEventListener('keydown', onKeyDown)
@@ -815,7 +854,7 @@ export function useVideoPlayback(
     }
     const video = getActiveVideo()
     if (!video) return
-    if (video.paused) { video.play().catch(() => {}) } else { video.pause() }
+    if (video.paused) { playFromGesture(video) } else { video.pause() }
   }
 
   return {