@scarlett-player/native 1.0.2 → 1.2.0

package/README.md

@@ -25,12 +25,20 @@ await player.load('https://example.com/video.mp4');
 
 ## Supported Formats
 
+Video:
+
 - **MP4** - H.264/AAC (most common)
 - **WebM** - VP8/VP9/Opus
 - **MOV** - QuickTime (H.264/AAC)
 - **MKV** - Matroska (browser support varies)
 - **OGV/OGG** - Theora/Vorbis
 
+Audio:
+
+- **MP3**, **WAV**, **OGG**, **FLAC**, **AAC**, **M4A**, **Opus** (pairs with
+  `@scarlett-player/audio-ui` and `@scarlett-player/media-session` for a full
+  audio player)
+
 ## Configuration
 
 ```typescript

package/dist/index.cjs

@@ -48,9 +48,11 @@ var MIME_TYPES = {
 };
 function createNativePlugin(config) {
   const preload = config?.preload ?? "metadata";
+  const load_timeout_ms = config?.loadTimeoutMs ?? 3e4;
   let api = null;
   let video = null;
   let cleanupEvents = null;
+  let derived_title = null;
   const getExtension = (src) => {
     try {
       const url = new URL(src, window.location.href);
@@ -202,6 +204,30 @@ function createNativePlugin(config) {
         timestamp: Date.now()
       });
     });
+    on("enterpictureinpicture", () => {
+      api?.setState("pip", true);
+      api?.logger.debug("PiP: entered (standard)");
+    });
+    on("leavepictureinpicture", () => {
+      api?.setState("pip", false);
+      api?.logger.debug("PiP: exited (standard)");
+      if (!videoEl.paused || api?.getState("playing")) {
+        videoEl.play().catch(() => {
+        });
+      }
+    });
+    const webkitVideo = videoEl;
+    if ("webkitPresentationMode" in videoEl) {
+      on("webkitpresentationmodechanged", () => {
+        const mode = webkitVideo.webkitPresentationMode;
+        api?.setState("pip", mode === "picture-in-picture");
+        api?.logger.debug(`PiP: mode changed to ${mode} (webkit)`);
+        if (mode === "inline" && videoEl.paused) {
+          videoEl.play().catch(() => {
+          });
+        }
+      });
+    }
     return () => {
       handlers.forEach(([event, handler]) => {
         videoEl.removeEventListener(event, handler);
@@ -279,6 +305,7 @@ function createNativePlugin(config) {
       }
       video = null;
       api = null;
+      derived_title = null;
     },
     async loadSource(src) {
       if (!api) throw new Error("Plugin not initialized");
@@ -291,13 +318,18 @@ function createNativePlugin(config) {
       api.setState("buffering", true);
       api.setState("mediaType", isAudio ? "audio" : "video");
       if (isAudio) {
-        try {
-          const url = new URL(src, window.location.href);
-          const filename = url.pathname.split("/").pop() || "Audio";
-          const title = decodeURIComponent(filename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " "));
-          api.setState("title", title);
-        } catch {
-          api.setState("title", "Audio");
+        const current_title = api.getState("title");
+        if (!current_title || current_title === derived_title) {
+          try {
+            const url = new URL(src, window.location.href);
+            const filename = url.pathname.split("/").pop() || "Audio";
+            const title = decodeURIComponent(filename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " "));
+            derived_title = title;
+            api.setState("title", title);
+          } catch {
+            derived_title = "Audio";
+            api.setState("title", "Audio");
+          }
         }
       }
       api.setState("qualities", []);
@@ -315,9 +347,17 @@ function createNativePlugin(config) {
       }
       cleanupEvents = setupEventListeners(videoEl);
       return new Promise((resolve, reject) => {
-        const onLoaded = () => {
+        let watchdog = null;
+        const settle = () => {
           videoEl.removeEventListener("loadedmetadata", onLoaded);
           videoEl.removeEventListener("error", onError);
+          if (watchdog !== null) {
+            clearTimeout(watchdog);
+            watchdog = null;
+          }
+        };
+        const onLoaded = () => {
+          settle();
           const muted = api?.getState("muted");
           const volume = api?.getState("volume");
           if (muted !== void 0) videoEl.muted = muted;
@@ -329,11 +369,16 @@ function createNativePlugin(config) {
           resolve();
         };
         const onError = () => {
-          videoEl.removeEventListener("loadedmetadata", onLoaded);
-          videoEl.removeEventListener("error", onError);
+          settle();
           const error = videoEl.error;
           reject(new Error(error?.message || "Failed to load video source"));
         };
+        if (load_timeout_ms > 0) {
+          watchdog = setTimeout(() => {
+            settle();
+            reject(new Error("Video took too long to load (network timeout)"));
+          }, load_timeout_ms);
+        }
         videoEl.addEventListener("loadedmetadata", onLoaded);
         videoEl.addEventListener("error", onError);
         videoEl.src = src;

package/dist/index.d.cts

@@ -24,6 +24,12 @@ import { PluginType, IPluginAPI } from '@scarlett-player/core';
 interface NativePluginConfig {
     /** Preload behavior: 'none' | 'metadata' | 'auto' */
     preload?: 'none' | 'metadata' | 'auto';
+    /**
+     * Watchdog for source loading in milliseconds (default: 30000, 0 disables).
+     * Guarantees a load attempt terminates with an error instead of leaving
+     * the viewer on a spinner when the network stalls without erroring.
+     */
+    loadTimeoutMs?: number;
 }
 interface INativePlugin {
     id: string;

package/dist/index.d.ts

@@ -24,6 +24,12 @@ import { PluginType, IPluginAPI } from '@scarlett-player/core';
 interface NativePluginConfig {
     /** Preload behavior: 'none' | 'metadata' | 'auto' */
     preload?: 'none' | 'metadata' | 'auto';
+    /**
+     * Watchdog for source loading in milliseconds (default: 30000, 0 disables).
+     * Guarantees a load attempt terminates with an error instead of leaving
+     * the viewer on a spinner when the network stalls without erroring.
+     */
+    loadTimeoutMs?: number;
 }
 interface INativePlugin {
     id: string;

package/dist/index.js

@@ -23,9 +23,11 @@ var MIME_TYPES = {
 };
 function createNativePlugin(config) {
   const preload = config?.preload ?? "metadata";
+  const load_timeout_ms = config?.loadTimeoutMs ?? 3e4;
   let api = null;
   let video = null;
   let cleanupEvents = null;
+  let derived_title = null;
   const getExtension = (src) => {
     try {
       const url = new URL(src, window.location.href);
@@ -177,6 +179,30 @@ function createNativePlugin(config) {
         timestamp: Date.now()
       });
     });
+    on("enterpictureinpicture", () => {
+      api?.setState("pip", true);
+      api?.logger.debug("PiP: entered (standard)");
+    });
+    on("leavepictureinpicture", () => {
+      api?.setState("pip", false);
+      api?.logger.debug("PiP: exited (standard)");
+      if (!videoEl.paused || api?.getState("playing")) {
+        videoEl.play().catch(() => {
+        });
+      }
+    });
+    const webkitVideo = videoEl;
+    if ("webkitPresentationMode" in videoEl) {
+      on("webkitpresentationmodechanged", () => {
+        const mode = webkitVideo.webkitPresentationMode;
+        api?.setState("pip", mode === "picture-in-picture");
+        api?.logger.debug(`PiP: mode changed to ${mode} (webkit)`);
+        if (mode === "inline" && videoEl.paused) {
+          videoEl.play().catch(() => {
+          });
+        }
+      });
+    }
     return () => {
       handlers.forEach(([event, handler]) => {
         videoEl.removeEventListener(event, handler);
@@ -254,6 +280,7 @@ function createNativePlugin(config) {
       }
       video = null;
       api = null;
+      derived_title = null;
     },
     async loadSource(src) {
       if (!api) throw new Error("Plugin not initialized");
@@ -266,13 +293,18 @@ function createNativePlugin(config) {
       api.setState("buffering", true);
       api.setState("mediaType", isAudio ? "audio" : "video");
       if (isAudio) {
-        try {
-          const url = new URL(src, window.location.href);
-          const filename = url.pathname.split("/").pop() || "Audio";
-          const title = decodeURIComponent(filename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " "));
-          api.setState("title", title);
-        } catch {
-          api.setState("title", "Audio");
+        const current_title = api.getState("title");
+        if (!current_title || current_title === derived_title) {
+          try {
+            const url = new URL(src, window.location.href);
+            const filename = url.pathname.split("/").pop() || "Audio";
+            const title = decodeURIComponent(filename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " "));
+            derived_title = title;
+            api.setState("title", title);
+          } catch {
+            derived_title = "Audio";
+            api.setState("title", "Audio");
+          }
         }
       }
       api.setState("qualities", []);
@@ -290,9 +322,17 @@ function createNativePlugin(config) {
       }
       cleanupEvents = setupEventListeners(videoEl);
       return new Promise((resolve, reject) => {
-        const onLoaded = () => {
+        let watchdog = null;
+        const settle = () => {
           videoEl.removeEventListener("loadedmetadata", onLoaded);
           videoEl.removeEventListener("error", onError);
+          if (watchdog !== null) {
+            clearTimeout(watchdog);
+            watchdog = null;
+          }
+        };
+        const onLoaded = () => {
+          settle();
           const muted = api?.getState("muted");
           const volume = api?.getState("volume");
           if (muted !== void 0) videoEl.muted = muted;
@@ -304,11 +344,16 @@ function createNativePlugin(config) {
           resolve();
         };
         const onError = () => {
-          videoEl.removeEventListener("loadedmetadata", onLoaded);
-          videoEl.removeEventListener("error", onError);
+          settle();
           const error = videoEl.error;
           reject(new Error(error?.message || "Failed to load video source"));
         };
+        if (load_timeout_ms > 0) {
+          watchdog = setTimeout(() => {
+            settle();
+            reject(new Error("Video took too long to load (network timeout)"));
+          }, load_timeout_ms);
+        }
         videoEl.addEventListener("loadedmetadata", onLoaded);
         videoEl.addEventListener("error", onError);
         videoEl.src = src;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/native",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "Native Video Provider Plugin for Scarlett Player (MP4, WebM, MOV, MKV)",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,13 +17,13 @@
     "dist"
   ],
   "peerDependencies": {
-    "@scarlett-player/core": "^1.0.2"
+    "@scarlett-player/core": "^1.0.3"
   },
   "devDependencies": {
     "typescript": "^5.3.0",
     "tsup": "^8.0.0",
     "vitest": "^1.6.0",
-    "@scarlett-player/core": "1.0.2"
+    "@scarlett-player/core": "1.2.0"
   },
   "keywords": [
     "video",