movi-player 0.1.3 → 0.1.5-beta.0

package/README.md

@@ -7,14 +7,59 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![Browser Support](https://img.shields.io/badge/browsers-Chrome%2094%2B%20%7C%20Safari%2016.4%2B%20%7C%20Edge%2094%2B-brightgreen.svg)](https://caniuse.com/webcodecs)
 
-👉 **Install:** `npm i movi-player`  
-👉 **Docs:** [mrujjwalg.github.io/movi-player](https://mrujjwalg.github.io/movi-player/)  
+👉 **Install:** `npm i movi-player`
+👉 **Docs:** [mrujjwalg.github.io/movi-player](https://mrujjwalg.github.io/movi-player/)
 👉 **Demo:** [movi-player-examples.vercel.app](https://movi-player-examples.vercel.app/element.html)
 
-![Movi Player Showcase](docs/images/element.gif)
+### Element Module (Full UI)
+
+![Movi Player Element](docs/images/element.gif)
+
+👉 [View Live Demo](https://movi-player-examples.vercel.app/element.html) | [See Code Example](https://github.com/mrujjwalg/movi-player-examples/blob/main/element.html)
+
+### Player Module (Custom UI)
+
+![Custom Player](docs/images/custom.gif)
+
+👉 [View Live Demo](https://movi-player-examples.vercel.app/youtube.html) | [See Code Example](https://github.com/mrujjwalg/movi-player-examples/blob/main/youtube.html)
 
 > 🚀 **No Server-Side Processing Required!** — All video parsing, demuxing, and decoding happens entirely in the browser using FFmpeg WASM & WebCodecs. Multiple audio/subtitle tracks are supported without any conversion or processing!
 
+## ⚠️ Important: CORS & Headers
+
+Because Movi-Player uses **WebAssembly** and **SharedArrayBuffer** for high-performance streaming, your server needs to support:
+
+1.  **Range Requests:** Required for seeking in large files.
+2.  **CORS Headers:** If your video is on a different domain.
+3.  **COI Headers (Optional):** For maximum performance (Zero-copy), set:
+    - `Cross-Origin-Opener-Policy: same-origin`
+    - `Cross-Origin-Embedder-Policy: require-corp`
+
+**Can't modify server headers?** Use a **Service Worker** to inject COI headers client-side:
+
+```javascript
+// sw.js
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    fetch(event.request).then((response) => {
+      const newHeaders = new Headers(response.headers);
+      newHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
+      newHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
+      return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: newHeaders,
+      });
+    })
+  );
+});
+
+// Register in your app
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js');
+}
+```
+
 ---
 
 ## ⚡ TL;DR
@@ -199,6 +244,8 @@ fileInput.addEventListener("change", async (e) => {
 
 ![Demuxer Overview](docs/images/demuxer.webp)
 
+👉 [View Live Demo](https://movi-player-examples.vercel.app/demuxer.html) | [See Code Example](https://github.com/mrujjwalg/movi-player-examples/blob/main/demuxer.html)
+
 ```typescript
 import { Demuxer, HttpSource, FileSource } from "movi-player/demuxer";
 
@@ -245,6 +292,8 @@ Movi-Player's modular design makes it perfect for a wide range of applications:
 
 ### Demuxer Module (50KB)
 
+👉 [View Live Demo](https://movi-player-examples.vercel.app/demuxer.html) | [See Code Example](https://github.com/mrujjwalg/movi-player-examples/blob/main/demuxer.html)
+
 - **Media Asset Management**: Catalog video libraries without playing files
 - **Video Validators**: Check uploaded files against platform requirements
 - **HDR Detection**: Automatically tag HDR content in video pipelines
@@ -254,6 +303,10 @@ Movi-Player's modular design makes it perfect for a wide range of applications:
 
 ### Player Module (180KB)
 
+![Custom Player UI](docs/images/custom.gif)
+
+👉 [View Live Demo](https://movi-player-examples.vercel.app/youtube.html) | [See Code Example](https://github.com/mrujjwalg/movi-player-examples/blob/main/youtube.html)
+
 - **Custom Video Players**: Build branded players with custom UI
 - **Educational Platforms**: Interactive learning videos with quiz overlays
 - **Multi-Language Platforms**: Netflix-style audio/subtitle switching
@@ -557,6 +610,13 @@ The `<movi-player>` element supports standard video attributes plus enhancements
   renderer="canvas"        <!-- canvas | mse -->
   sw="auto"               <!-- auto (default) | true | false -->
   fps="0"                  <!-- Custom frame rate override -->
+  gesturefs                <!-- Gestures only in fullscreen -->
+  nohotkeys                <!-- Disable keyboard shortcuts -->
+  startat="0"              <!-- Start playback at time (seconds) -->
+  fastseek                 <!-- Enable ±10s skip controls -->
+  doubletap="true"         <!-- Enable double-tap to seek -->
+  themecolor="#4CAF50"     <!-- Custom theme color -->
+  buffersize="0"           <!-- Buffer size in seconds (0=auto) -->
 ></movi-player>
 ```
 

package/dist/core/MoviPlayer.d.ts

@@ -30,6 +30,7 @@ export declare class MoviPlayer extends EventEmitter<PlayerEventMap> {
     private previewInitPromise;
     private disableAudio;
     private muted;
+    private wasPlayingBeforeRebuffer;
     private animationFrameId;
     private wakeLock;
     private seekingToKeyframe;
@@ -71,11 +72,10 @@ export declare class MoviPlayer extends EventEmitter<PlayerEventMap> {
     private static readonly DEMUX_TIMEOUT;
     private eofReached;
     /**
-     * Dedicated handler for video seek completion.
-     * Clears the seek flag, synchronizes the clock if the video jumped ahead,
-     * and flushes any buffered audio packets to start playback in sync.
+     * Internal handler for seek completion when first target frame is found.
+     * Clears the seek flag, synchronizes clock, and transitions to final state.
      */
-    private handleVideoSeekCompletion;
+    private notifySeekCompletion;
     /**
      * Main Playback Loop
      */

package/dist/core/MoviPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoviPlayer.d.ts","sourceRoot":"","sources":["../../src/core/MoviPlayer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MoviPlayer.d.ts","sourceRoot":"","sources":["../../src/core/MoviPlayer.ts"],"names":[],"mappings":"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"}

package/dist/core/MoviPlayer.js

@@ -47,6 +47,7 @@ export class MoviPlayer extends EventEmitter {
     // Debug flag to disable audio processing
     disableAudio = false; // Set to true to disable audio for debugging
     muted = false; // Mute state
+    wasPlayingBeforeRebuffer = false; // Track if we were playing before entering rebuffering state
     // Playback Loop
     animationFrameId = null;
     // WakeLock to prevent screen sleep during playback
@@ -136,9 +137,9 @@ export class MoviPlayer extends EventEmitter {
                         frame.close();
                         return;
                     }
-                    // Video reached target! Clear the flag to ensure sync
+                    // Video reached target! Clear the flag to ensure sync and transition to final state
                     if (this.seekTargetTime >= 0) {
-                        this.handleVideoSeekCompletion(frameTime);
+                        this.notifySeekCompletion(frameTime);
                     }
                     this.videoRenderer.queueFrame(frame);
                 }
@@ -569,38 +570,58 @@ export class MoviPlayer extends EventEmitter {
     static DEMUX_TIMEOUT = 10000; // 10 seconds timeout for demux operations
     eofReached = false;
     /**
-     * Dedicated handler for video seek completion.
-     * Clears the seek flag, synchronizes the clock if the video jumped ahead,
-     * and flushes any buffered audio packets to start playback in sync.
+     * Internal handler for seek completion when first target frame is found.
+     * Clears the seek flag, synchronizes clock, and transitions to final state.
      */
-    handleVideoSeekCompletion(videoTime) {
+    notifySeekCompletion(time) {
+        if (!this.waitingForVideoSync)
+            return;
         const seekTarget = this.seekTargetTime;
         this.seekTargetTime = -1;
-        // If we were waiting for video sync, flush buffered audio
-        if (this.waitingForVideoSync) {
-            this.waitingForVideoSync = false;
-            // Sync correction: Match clock to actual video start time
-            // If we are just seeking (waitingForVideoSync was true), allow smaller tolerance (0.01) to ensure the frame is displayed (clock >= frameTime)
-            if (videoTime > seekTarget + 0.01) {
-                Logger.debug(TAG, `Video jumped ahead (${seekTarget.toFixed(3)}s -> ${videoTime.toFixed(3)}s). Syncing clock.`);
-                this.clock.seek(videoTime);
-                this.pendingAudioPackets = this.pendingAudioPackets.filter((p) => p.timestamp >= videoTime - 0.05);
+        this.waitingForVideoSync = false;
+        this.seekingToKeyframe = false; // Also clear keyframe skip flag
+        Logger.debug(TAG, `Seek completion at ${time.toFixed(3)}s (target: ${seekTarget.toFixed(3)}s)`);
+        // Sync correction: Match clock to actual video/audio start time
+        // Allow small tolerance (0.01) to ensure the frame is displayed (clock >= frameTime)
+        if (time > seekTarget + 0.01) {
+            Logger.debug(TAG, `Stream jumped ahead. Syncing clock to ${time.toFixed(3)}s.`);
+            this.clock.seek(time);
+            // Filter pending audio packets that are now too old
+            this.pendingAudioPackets = this.pendingAudioPackets.filter((p) => p.timestamp >= time - 0.05);
+        }
+        // Flush any buffered audio packets
+        if (this.pendingAudioPackets.length > 0) {
+            Logger.debug(TAG, `Flushing ${this.pendingAudioPackets.length} buffered audio packets after seek sync`);
+            for (const pkt of this.pendingAudioPackets) {
+                this.audioDecoder.decode(pkt.data, pkt.timestamp, pkt.keyframe);
             }
-            if (this.pendingAudioPackets.length > 0) {
-                Logger.debug(TAG, `Flushing ${this.pendingAudioPackets.length} buffered audio packets after video sync`);
-                for (const pkt of this.pendingAudioPackets) {
-                    this.audioDecoder.decode(pkt.data, pkt.timestamp, pkt.keyframe);
-                }
-                this.pendingAudioPackets = [];
+            this.pendingAudioPackets = [];
+        }
+        // Transition to final state
+        if (this.wasPlayingBeforeSeek) {
+            Logger.info(TAG, "Resuming playback after seek");
+            this.stateManager.setState("playing");
+            this.clock.start();
+            if (!this.disableAudio && !this.audioRenderer.isAudioPlaying()) {
+                this.audioRenderer.play();
             }
         }
+        else {
+            Logger.info(TAG, "Seek completed in paused state");
+            this.stateManager.setState("ready");
+            // Don't start clock or audio
+        }
+        // Emit seeked event now that we are actually ready
+        // Convert back from media time to UI time
+        this.emit("seeked", Math.max(0, time - this.startTime));
     }
     /**
      * Main Playback Loop
      */
     processLoop = async () => {
-        // Run if playing OR if we are resolving a seek (fetching target frame)
-        if (this.stateManager.getState() !== "playing" && !this.waitingForVideoSync)
+        const currentState = this.stateManager.getState();
+        // Run if playing OR buffering (for rebuffering) OR if we are resolving a seek (fetching target frame)
+        if (currentState !== "playing" && currentState !== "buffering" && !this.waitingForVideoSync)
             return;
         // Capture session ID at start of loop - if a new seek starts, this loop should abort
         const currentSessionId = this.seekSessionId;
@@ -612,6 +633,29 @@ export class MoviPlayer extends EventEmitter {
             Logger.debug(TAG, "ProcessLoop aborted: new seek started");
             return;
         }
+        // Check if audio is rebuffering due to playback rate change
+        if (!this.disableAudio && this.audioRenderer.isRebuffering()) {
+            // Enter buffering state and pause clock until rebuffering completes
+            const currentState = this.stateManager.getState();
+            if (currentState === "playing") {
+                this.wasPlayingBeforeRebuffer = true;
+                this.stateManager.setState("buffering");
+                this.clock.pause();
+                Logger.debug(TAG, "Entered buffering state for playback rate change");
+            }
+            // Continue processing to allow new audio to be decoded and scheduled
+        }
+        else if (this.stateManager.getState() === "buffering" && this.wasPlayingBeforeRebuffer) {
+            // Rebuffering complete, resume playback only if we were playing before
+            // Transition to paused first, then let play() method handle the transition to playing
+            this.stateManager.setState("paused");
+            this.wasPlayingBeforeRebuffer = false;
+            Logger.debug(TAG, "Exited buffering state, resuming playback");
+            // Resume playback by calling play() method (proper state machine transition)
+            this.play().catch((err) => {
+                Logger.error(TAG, "Failed to resume playback after rebuffering:", err);
+            });
+        }
         // Update FileSource preload position based on current time
         if (this.source instanceof FileSource && this.mediaInfo) {
             const currentTime = this.clock.getTime();
@@ -769,6 +813,11 @@ export class MoviPlayer extends EventEmitter {
                         this.seekingToKeyframe = false;
                         Logger.warn(TAG, "EOF reached before finding keyframe after seek");
                     }
+                    // If we were waiting for sync, trigger it now so player doesn't hang in loading state
+                    if (this.waitingForVideoSync) {
+                        Logger.warn(TAG, "EOF reached while waiting for seek sync, forcing completion");
+                        this.notifySeekCompletion(this.seekTargetTime);
+                    }
                     Logger.debug(TAG, "EOF reached");
                     break;
                 }
@@ -829,10 +878,9 @@ export class MoviPlayer extends EventEmitter {
                             if (this.seekTargetTime >= 0 &&
                                 packet.timestamp >= this.seekTargetTime) {
                                 Logger.debug(TAG, `Audio reached seek target: ${packet.timestamp.toFixed(3)}s (target: ${this.seekTargetTime.toFixed(3)}s)`);
-                                // Only clear seek target if there is no video track to trigger it
-                                // If video exists, we wait for a valid frame in onFrame()
+                                // If there is no video track, audio completion triggers state transition
                                 if (!this.trackManager.getActiveVideoTrack()) {
-                                    this.seekTargetTime = -1;
+                                    this.notifySeekCompletion(packet.timestamp);
                                 }
                             }
                             this.audioDecoder.decode(packet.data, packet.timestamp, packet.keyframe);
@@ -931,6 +979,8 @@ export class MoviPlayer extends EventEmitter {
         if (currentState !== "seeking") {
             this.wasPlayingBeforeSeek = currentState === "playing";
         }
+        // Pause clock so UI time doesn't advance during seek while in loading state
+        this.clock.pause();
         const mySessionId = ++this.seekSessionId;
         this.stateManager.setState("seeking");
         this.emit("seeking", seconds);
@@ -991,57 +1041,14 @@ export class MoviPlayer extends EventEmitter {
             this.seekTime = performance.now();
             if (this.seekSessionId !== mySessionId)
                 return; // Superceded
-            // Restore state based on original intent
-            if (this.wasPlayingBeforeSeek) {
-                // After seek, we're in 'seeking' state, which can transition to 'playing'
-                const currentState = this.stateManager.getState();
-                if (currentState === "seeking") {
-                    // seeking -> playing is valid
-                    if (!this.stateManager.setState("playing")) {
-                        Logger.warn(TAG, "Failed to transition to playing after seek, transitioning to ready first");
-                        // Fallback: try through ready
-                        if (this.stateManager.setState("ready")) {
-                            this.stateManager.setState("playing");
-                        }
-                    }
-                }
-                else if (currentState === "ready") {
-                    // ready -> playing is valid
-                    this.stateManager.setState("playing");
-                }
-                else {
-                    Logger.warn(TAG, `Cannot transition to playing from state: ${currentState} after seek`);
-                }
-                // Ensure clock is running (restores isRunning=true)
-                this.clock.start();
-                // Ensure audio engine is ready (reset() might have stopped it or cleared clock)
-                if (!this.disableAudio && !this.audioRenderer.isAudioPlaying()) {
-                    await this.audioRenderer.play();
-                }
-                // IMPORTANT: Restart video presentation loop explicitly
-                if (this.videoRenderer) {
-                    this.videoRenderer.startPresentationLoop();
-                }
-                if (this.animationFrameId !== null) {
-                    cancelAnimationFrame(this.animationFrameId);
-                    this.animationFrameId = null;
-                }
-                this.processLoop();
-            }
-            else {
-                // PAUSED SEEK LOGIC
-                // We still need to fetch and decode the frame at the new position
-                this.stateManager.setState("ready");
-                // Temporarily start processLoop to fetch the target frame
-                // It will stop automatically once waitingForVideoSync becomes false (see processLoop check)
-                this.processLoop();
-                // Ensure the video renderer loop is running to actually draw the frame
-                if (this.videoRenderer) {
-                    this.videoRenderer.startPresentationLoop();
-                }
+            // Start processing loop to find and decode the target frame/packet.
+            // notifySeekCompletion will be called once the first valid frame is received.
+            this.processLoop();
+            // Ensure the video renderer loop is running to actually draw frames as they arrive
+            if (this.videoRenderer) {
+                this.videoRenderer.startPresentationLoop();
             }
-            this.emit("seeked", seconds);
-            Logger.info(TAG, `Seeked to ${seconds}s`);
+            Logger.info(TAG, `Seek initiated to ${seconds}s, waiting for sync...`);
         }
         catch (error) {
             // Reset seeking flag on error
@@ -1902,41 +1909,16 @@ export class MoviPlayer extends EventEmitter {
         if (duration <= 0) {
             return 0;
         }
-        // For HttpSource, convert buffered bytes to time
+        // For HttpSource, convert buffered bytes to time using stable linear estimation.
+        // Transient bitrate-based estimation is unstable during seeks.
         if (this.source instanceof HttpSource && this.fileSize > 0) {
             const bufferedBytes = this.source.getBufferedEnd();
             if (bufferedBytes > 0) {
-                // Use current read position as reference for more accurate conversion
-                const currentReadPos = this.source.getPosition();
-                const currentTime = this.clock.getTime();
-                // Require minimum thresholds to ensure accurate bitrate calculation
-                const MIN_READ_POS = 1024 * 1024; // At least 1MB read
-                const MIN_TIME = 1.0; // At least 1 second of playback
-                // If we have a valid read position and current time, use them as a reference point
-                if (currentReadPos >= MIN_READ_POS &&
-                    currentTime >= MIN_TIME &&
-                    currentReadPos < this.fileSize) {
-                    // Calculate effective bitrate from current position and time
-                    const normalizedTime = Math.max(0.1, currentTime - this.startTime);
-                    const effectiveBitrate = currentReadPos / normalizedTime; // bytes per second
-                    if (effectiveBitrate > 0) {
-                        // Estimate time for buffered end based on effective bitrate
-                        const estimatedTime = bufferedBytes / effectiveBitrate;
-                        // Clamp to valid range
-                        return Math.max(0, Math.min(duration, estimatedTime));
-                    }
-                }
-                // Fallback: Account for metadata overhead (first 1-2% is often metadata)
-                const metadataOverhead = Math.min(this.fileSize * 0.02, 2 * 1024 * 1024);
-                const effectiveFileSize = this.fileSize - metadataOverhead;
-                const effectiveBufferedBytes = Math.max(0, bufferedBytes - metadataOverhead);
-                if (effectiveFileSize > 0 && effectiveBufferedBytes >= 0) {
-                    const ratio = Math.min(1, effectiveBufferedBytes / effectiveFileSize);
-                    return ratio * duration;
-                }
-                // Last resort: simple linear
                 const ratio = Math.min(1, bufferedBytes / this.fileSize);
-                return ratio * duration;
+                const bufferedTime = ratio * duration;
+                // Ensure buffer appears at least as far as current playback position
+                // This prevents buffer bar from appearing behind progress bar
+                return Math.max(bufferedTime, this.getCurrentTime());
             }
         }
         // For FileSource, the entire file is buffered
@@ -1983,46 +1965,13 @@ export class MoviPlayer extends EventEmitter {
             return 0;
         }
         const duration = this.mediaInfo.duration;
-        if (duration <= 0) {
-            return 0;
-        }
-        const bufferStartBytes = this.source.getBufferStart();
-        if (bufferStartBytes < 0) {
-            return 0;
-        }
-        // Use current read position as reference for more accurate conversion
-        // This accounts for metadata at the beginning (moov atom) which takes bytes but no playback time
-        const currentReadPos = this.source.getPosition();
-        const currentTime = this.clock.getTime();
-        // If we have a valid read position and current time, use them as a reference point
-        // Require minimum thresholds to ensure accurate bitrate calculation
-        const MIN_READ_POS = 1024 * 1024; // At least 1MB read
-        const MIN_TIME = 1.0; // At least 1 second of playback
-        if (currentReadPos >= MIN_READ_POS &&
-            currentTime >= MIN_TIME &&
-            currentReadPos < this.fileSize) {
-            // Calculate effective bitrate from current position and time
-            const effectiveBitrate = currentReadPos / currentTime; // bytes per second
-            if (effectiveBitrate > 0) {
-                // Estimate time for buffer start based on effective bitrate
-                // This is more accurate than linear file ratio
-                const estimatedTime = bufferStartBytes / effectiveBitrate;
-                // Clamp to valid range
-                return Math.max(0, Math.min(duration, estimatedTime));
-            }
-        }
-        // Fallback to linear estimation if we don't have a good reference point
-        // Account for typical metadata overhead (first 1-2% of file is often metadata)
-        const metadataOverhead = Math.min(this.fileSize * 0.02, 2 * 1024 * 1024); // Max 2MB or 2%
-        const effectiveFileSize = this.fileSize - metadataOverhead;
-        const effectiveStartBytes = Math.max(0, bufferStartBytes - metadataOverhead);
-        if (effectiveFileSize > 0 && effectiveStartBytes >= 0) {
-            const ratio = Math.min(1, effectiveStartBytes / effectiveFileSize);
+        // For HttpSource, convert buffer start bytes to time using stable linear estimation
+        if (this.source instanceof HttpSource && this.fileSize > 0) {
+            const bufferStartBytes = this.source.getBufferStart();
+            const ratio = Math.min(1, bufferStartBytes / this.fileSize);
             return ratio * duration;
         }
-        // Last resort: simple linear
-        const ratio = Math.min(1, bufferStartBytes / this.fileSize);
-        return ratio * duration;
+        return 0;
     }
     /**
      * Get buffer end time in seconds (for HttpSource)