@bycrux/editor 0.6.0 → 0.6.2

package/package.json

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

package/src/video/preview/OverlayItemsLayer.tsx

@@ -62,6 +62,9 @@ function OverlayVideo({ src, currentTime, itemStart, inPoint, isPlaying, muted,
   return (
     <video
       ref={ref}
+      // Anonymous CORS so cross-origin R2 clips aren't tainted (would mute the
+      // Web Audio graph). crossOrigin must be set before src. R2 sends ACAO.
+      crossOrigin="anonymous"
       src={src}
       muted={muted}
       preload="auto"

package/src/video/preview/PreviewPlayer.tsx

@@ -132,6 +132,10 @@ export default function PreviewPlayer({
           {/* Slot 0 */}
           <video
             ref={video0Ref}
+            // Clips load cross-origin from R2; without this the media is CORS-tainted
+            // and the Web Audio createMediaElementSource graph outputs silence. R2
+            // sends Access-Control-Allow-Origin, so anonymous CORS keeps it audible.
+            crossOrigin="anonymous"
             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() }}
@@ -143,6 +147,9 @@ export default function PreviewPlayer({
           {/* Slot 1 */}
           <video
             ref={video1Ref}
+            // See slot 0: anonymous CORS so R2 cross-origin clips aren't tainted
+            // (which would mute the Web Audio graph).
+            crossOrigin="anonymous"
             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,29 @@ 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) {
+    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
@@ -447,7 +470,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 +838,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 {