@scarlett-player/native 0.1.0

package/dist/index.cjs

@@ -0,0 +1,288 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createNativePlugin: () => createNativePlugin,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var SUPPORTED_EXTENSIONS = ["mp4", "webm", "mov", "mkv", "ogv", "ogg", "m4v"];
+var MIME_TYPES = {
+  mp4: "video/mp4",
+  m4v: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  mkv: "video/x-matroska",
+  ogv: "video/ogg",
+  ogg: "video/ogg"
+};
+function createNativePlugin(config) {
+  const preload = config?.preload ?? "metadata";
+  let api = null;
+  let video = null;
+  let cleanupEvents = null;
+  const getExtension = (src) => {
+    try {
+      const url = new URL(src, window.location.href);
+      const pathname = url.pathname;
+      const ext = pathname.split(".").pop()?.toLowerCase() ?? "";
+      return ext;
+    } catch {
+      const rawExt = src.split(".").pop()?.toLowerCase() ?? "";
+      return rawExt.split("?")[0] ?? "";
+    }
+  };
+  const getMimeType = (ext) => {
+    return MIME_TYPES[ext] || "video/mp4";
+  };
+  const canBrowserPlay = (mimeType) => {
+    const testVideo = document.createElement("video");
+    const canPlay = testVideo.canPlayType(mimeType);
+    return canPlay === "probably" || canPlay === "maybe";
+  };
+  const getOrCreateVideo = () => {
+    if (video) return video;
+    const existing = api?.container.querySelector("video");
+    if (existing) {
+      video = existing;
+      return video;
+    }
+    video = document.createElement("video");
+    video.style.cssText = "width:100%;height:100%;display:block;object-fit:contain;background:#000";
+    video.preload = preload;
+    video.controls = false;
+    video.playsInline = true;
+    api?.container.appendChild(video);
+    return video;
+  };
+  const setupEventListeners = (videoEl) => {
+    const handlers = [];
+    const on = (event, handler) => {
+      videoEl.addEventListener(event, handler);
+      handlers.push([event, handler]);
+    };
+    on("playing", () => {
+      api?.setState("playing", true);
+      api?.setState("paused", false);
+      api?.emit("playback:play", void 0);
+    });
+    on("pause", () => {
+      api?.setState("playing", false);
+      api?.setState("paused", true);
+      api?.emit("playback:pause", void 0);
+    });
+    on("ended", () => {
+      api?.setState("playing", false);
+      api?.setState("ended", true);
+      api?.emit("playback:ended", void 0);
+    });
+    on("timeupdate", () => {
+      api?.setState("currentTime", videoEl.currentTime);
+      api?.emit("playback:timeupdate", { currentTime: videoEl.currentTime });
+    });
+    on("durationchange", () => {
+      api?.setState("duration", videoEl.duration || 0);
+    });
+    on("loadedmetadata", () => {
+      api?.setState("duration", videoEl.duration || 0);
+      api?.emit("media:loadedmetadata", { duration: videoEl.duration || 0 });
+    });
+    on("canplay", () => {
+      api?.setState("buffering", false);
+      api?.emit("media:canplay", void 0);
+    });
+    on("canplaythrough", () => {
+      api?.emit("media:canplaythrough", void 0);
+    });
+    on("waiting", () => {
+      api?.setState("buffering", true);
+      api?.emit("media:waiting", void 0);
+    });
+    on("progress", () => {
+      if (videoEl.buffered.length > 0) {
+        const bufferedEnd = videoEl.buffered.end(videoEl.buffered.length - 1);
+        const duration = videoEl.duration || 0;
+        const buffered = duration > 0 ? bufferedEnd / duration : 0;
+        api?.setState("bufferedAmount", buffered);
+        api?.emit("media:progress", { buffered });
+      }
+    });
+    on("seeking", () => {
+      api?.setState("seeking", true);
+    });
+    on("seeked", () => {
+      api?.setState("seeking", false);
+      api?.emit("playback:seeked", { time: videoEl.currentTime });
+    });
+    on("volumechange", () => {
+      api?.setState("volume", videoEl.volume);
+      api?.setState("muted", videoEl.muted);
+      api?.emit("volume:change", { volume: videoEl.volume, muted: videoEl.muted });
+    });
+    on("ratechange", () => {
+      api?.setState("playbackRate", videoEl.playbackRate);
+      api?.emit("playback:ratechange", { rate: videoEl.playbackRate });
+    });
+    on("error", () => {
+      const error = videoEl.error;
+      let message = "Unknown video error";
+      if (error) {
+        switch (error.code) {
+          case MediaError.MEDIA_ERR_ABORTED:
+            message = "Playback aborted";
+            break;
+          case MediaError.MEDIA_ERR_NETWORK:
+            message = "Network error";
+            break;
+          case MediaError.MEDIA_ERR_DECODE:
+            message = "Decode error - format may not be supported";
+            break;
+          case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+            message = "Format not supported";
+            break;
+        }
+      }
+      api?.logger.error("Video error", { code: error?.code, message });
+      api?.emit("error", {
+        code: "MEDIA_ERROR",
+        message,
+        fatal: true,
+        timestamp: Date.now()
+      });
+    });
+    return () => {
+      handlers.forEach(([event, handler]) => {
+        videoEl.removeEventListener(event, handler);
+      });
+    };
+  };
+  const cleanup = () => {
+    cleanupEvents?.();
+    cleanupEvents = null;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  };
+  const plugin = {
+    id: "native-provider",
+    name: "Native Video Provider",
+    version: "1.0.0",
+    type: "provider",
+    description: "Native HTML5 video playback for MP4, WebM, MOV, MKV",
+    canPlay(src) {
+      const ext = getExtension(src);
+      if (!SUPPORTED_EXTENSIONS.includes(ext)) {
+        return false;
+      }
+      const mimeType = getMimeType(ext);
+      return canBrowserPlay(mimeType);
+    },
+    async init(pluginApi) {
+      api = pluginApi;
+      api.logger.info("Native video plugin initialized");
+      const unsubPlay = api.on("playback:play", async () => {
+        if (!video) return;
+        try {
+          await video.play();
+        } catch (e) {
+          api?.logger.error("Play failed", e);
+        }
+      });
+      const unsubPause = api.on("playback:pause", () => {
+        video?.pause();
+      });
+      const unsubSeek = api.on("playback:seeking", ({ time }) => {
+        if (!video) return;
+        const clampedTime = Math.max(0, Math.min(time, video.duration || 0));
+        video.currentTime = clampedTime;
+      });
+      const unsubVolume = api.on("volume:change", ({ volume, muted }) => {
+        if (video) {
+          video.volume = volume;
+          video.muted = muted;
+        }
+      });
+      const unsubMute = api.on("volume:mute", ({ muted }) => {
+        if (video) video.muted = muted;
+      });
+      const unsubRate = api.on("playback:ratechange", ({ rate }) => {
+        if (video) video.playbackRate = rate;
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubSeek();
+        unsubVolume();
+        unsubMute();
+        unsubRate();
+      });
+    },
+    async destroy() {
+      api?.logger.info("Native video plugin destroying");
+      cleanup();
+      if (video?.parentNode) {
+        video.parentNode.removeChild(video);
+      }
+      video = null;
+      api = null;
+    },
+    async loadSource(src) {
+      if (!api) throw new Error("Plugin not initialized");
+      const ext = getExtension(src);
+      const mimeType = getMimeType(ext);
+      api.logger.info("Loading native video source", { src, mimeType });
+      cleanup();
+      api.setState("playbackState", "loading");
+      api.setState("buffering", true);
+      const videoEl = getOrCreateVideo();
+      cleanupEvents = setupEventListeners(videoEl);
+      return new Promise((resolve, reject) => {
+        const onLoaded = () => {
+          videoEl.removeEventListener("loadedmetadata", onLoaded);
+          videoEl.removeEventListener("error", onError);
+          api?.setState("source", { src, type: mimeType });
+          api?.setState("playbackState", "ready");
+          api?.setState("buffering", false);
+          api?.emit("media:loaded", { src, type: mimeType });
+          resolve();
+        };
+        const onError = () => {
+          videoEl.removeEventListener("loadedmetadata", onLoaded);
+          videoEl.removeEventListener("error", onError);
+          const error = videoEl.error;
+          reject(new Error(error?.message || "Failed to load video source"));
+        };
+        videoEl.addEventListener("loadedmetadata", onLoaded);
+        videoEl.addEventListener("error", onError);
+        videoEl.src = src;
+        videoEl.load();
+      });
+    }
+  };
+  return plugin;
+}
+var index_default = createNativePlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createNativePlugin
+});

package/dist/index.d.cts

@@ -0,0 +1,49 @@
+import { PluginType, IPluginAPI } from '@scarlett-player/core';
+
+/**
+ * Native Video Provider Plugin for Scarlett Player
+ *
+ * Provides playback for native browser-supported formats:
+ * - MP4 (H.264/AAC)
+ * - WebM (VP8/VP9/Opus)
+ * - MOV (H.264/AAC)
+ * - MKV (varies by browser)
+ * - OGG/OGV (Theora/Vorbis)
+ */
+
+interface NativePluginConfig {
+    /** Preload behavior: 'none' | 'metadata' | 'auto' */
+    preload?: 'none' | 'metadata' | 'auto';
+}
+interface INativePlugin {
+    id: string;
+    name: string;
+    version: string;
+    type: PluginType;
+    description: string;
+    canPlay(src: string): boolean;
+    init(api: IPluginAPI): Promise<void>;
+    destroy(): Promise<void>;
+    loadSource(src: string): Promise<void>;
+}
+/**
+ * Create a Native Video Provider Plugin instance.
+ *
+ * @param config - Plugin configuration
+ * @returns Native Plugin instance
+ *
+ * @example
+ * ```ts
+ * import { createNativePlugin } from '@scarlett-player/native';
+ *
+ * const player = new ScarlettPlayer({
+ *   container: document.getElementById('player'),
+ *   plugins: [createNativePlugin()],
+ * });
+ *
+ * await player.load('video.mp4');
+ * ```
+ */
+declare function createNativePlugin(config?: NativePluginConfig): INativePlugin;
+
+export { type INativePlugin, type NativePluginConfig, createNativePlugin, createNativePlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import { PluginType, IPluginAPI } from '@scarlett-player/core';
+
+/**
+ * Native Video Provider Plugin for Scarlett Player
+ *
+ * Provides playback for native browser-supported formats:
+ * - MP4 (H.264/AAC)
+ * - WebM (VP8/VP9/Opus)
+ * - MOV (H.264/AAC)
+ * - MKV (varies by browser)
+ * - OGG/OGV (Theora/Vorbis)
+ */
+
+interface NativePluginConfig {
+    /** Preload behavior: 'none' | 'metadata' | 'auto' */
+    preload?: 'none' | 'metadata' | 'auto';
+}
+interface INativePlugin {
+    id: string;
+    name: string;
+    version: string;
+    type: PluginType;
+    description: string;
+    canPlay(src: string): boolean;
+    init(api: IPluginAPI): Promise<void>;
+    destroy(): Promise<void>;
+    loadSource(src: string): Promise<void>;
+}
+/**
+ * Create a Native Video Provider Plugin instance.
+ *
+ * @param config - Plugin configuration
+ * @returns Native Plugin instance
+ *
+ * @example
+ * ```ts
+ * import { createNativePlugin } from '@scarlett-player/native';
+ *
+ * const player = new ScarlettPlayer({
+ *   container: document.getElementById('player'),
+ *   plugins: [createNativePlugin()],
+ * });
+ *
+ * await player.load('video.mp4');
+ * ```
+ */
+declare function createNativePlugin(config?: NativePluginConfig): INativePlugin;
+
+export { type INativePlugin, type NativePluginConfig, createNativePlugin, createNativePlugin as default };

package/dist/index.js

@@ -0,0 +1,263 @@
+// src/index.ts
+var SUPPORTED_EXTENSIONS = ["mp4", "webm", "mov", "mkv", "ogv", "ogg", "m4v"];
+var MIME_TYPES = {
+  mp4: "video/mp4",
+  m4v: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  mkv: "video/x-matroska",
+  ogv: "video/ogg",
+  ogg: "video/ogg"
+};
+function createNativePlugin(config) {
+  const preload = config?.preload ?? "metadata";
+  let api = null;
+  let video = null;
+  let cleanupEvents = null;
+  const getExtension = (src) => {
+    try {
+      const url = new URL(src, window.location.href);
+      const pathname = url.pathname;
+      const ext = pathname.split(".").pop()?.toLowerCase() ?? "";
+      return ext;
+    } catch {
+      const rawExt = src.split(".").pop()?.toLowerCase() ?? "";
+      return rawExt.split("?")[0] ?? "";
+    }
+  };
+  const getMimeType = (ext) => {
+    return MIME_TYPES[ext] || "video/mp4";
+  };
+  const canBrowserPlay = (mimeType) => {
+    const testVideo = document.createElement("video");
+    const canPlay = testVideo.canPlayType(mimeType);
+    return canPlay === "probably" || canPlay === "maybe";
+  };
+  const getOrCreateVideo = () => {
+    if (video) return video;
+    const existing = api?.container.querySelector("video");
+    if (existing) {
+      video = existing;
+      return video;
+    }
+    video = document.createElement("video");
+    video.style.cssText = "width:100%;height:100%;display:block;object-fit:contain;background:#000";
+    video.preload = preload;
+    video.controls = false;
+    video.playsInline = true;
+    api?.container.appendChild(video);
+    return video;
+  };
+  const setupEventListeners = (videoEl) => {
+    const handlers = [];
+    const on = (event, handler) => {
+      videoEl.addEventListener(event, handler);
+      handlers.push([event, handler]);
+    };
+    on("playing", () => {
+      api?.setState("playing", true);
+      api?.setState("paused", false);
+      api?.emit("playback:play", void 0);
+    });
+    on("pause", () => {
+      api?.setState("playing", false);
+      api?.setState("paused", true);
+      api?.emit("playback:pause", void 0);
+    });
+    on("ended", () => {
+      api?.setState("playing", false);
+      api?.setState("ended", true);
+      api?.emit("playback:ended", void 0);
+    });
+    on("timeupdate", () => {
+      api?.setState("currentTime", videoEl.currentTime);
+      api?.emit("playback:timeupdate", { currentTime: videoEl.currentTime });
+    });
+    on("durationchange", () => {
+      api?.setState("duration", videoEl.duration || 0);
+    });
+    on("loadedmetadata", () => {
+      api?.setState("duration", videoEl.duration || 0);
+      api?.emit("media:loadedmetadata", { duration: videoEl.duration || 0 });
+    });
+    on("canplay", () => {
+      api?.setState("buffering", false);
+      api?.emit("media:canplay", void 0);
+    });
+    on("canplaythrough", () => {
+      api?.emit("media:canplaythrough", void 0);
+    });
+    on("waiting", () => {
+      api?.setState("buffering", true);
+      api?.emit("media:waiting", void 0);
+    });
+    on("progress", () => {
+      if (videoEl.buffered.length > 0) {
+        const bufferedEnd = videoEl.buffered.end(videoEl.buffered.length - 1);
+        const duration = videoEl.duration || 0;
+        const buffered = duration > 0 ? bufferedEnd / duration : 0;
+        api?.setState("bufferedAmount", buffered);
+        api?.emit("media:progress", { buffered });
+      }
+    });
+    on("seeking", () => {
+      api?.setState("seeking", true);
+    });
+    on("seeked", () => {
+      api?.setState("seeking", false);
+      api?.emit("playback:seeked", { time: videoEl.currentTime });
+    });
+    on("volumechange", () => {
+      api?.setState("volume", videoEl.volume);
+      api?.setState("muted", videoEl.muted);
+      api?.emit("volume:change", { volume: videoEl.volume, muted: videoEl.muted });
+    });
+    on("ratechange", () => {
+      api?.setState("playbackRate", videoEl.playbackRate);
+      api?.emit("playback:ratechange", { rate: videoEl.playbackRate });
+    });
+    on("error", () => {
+      const error = videoEl.error;
+      let message = "Unknown video error";
+      if (error) {
+        switch (error.code) {
+          case MediaError.MEDIA_ERR_ABORTED:
+            message = "Playback aborted";
+            break;
+          case MediaError.MEDIA_ERR_NETWORK:
+            message = "Network error";
+            break;
+          case MediaError.MEDIA_ERR_DECODE:
+            message = "Decode error - format may not be supported";
+            break;
+          case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+            message = "Format not supported";
+            break;
+        }
+      }
+      api?.logger.error("Video error", { code: error?.code, message });
+      api?.emit("error", {
+        code: "MEDIA_ERROR",
+        message,
+        fatal: true,
+        timestamp: Date.now()
+      });
+    });
+    return () => {
+      handlers.forEach(([event, handler]) => {
+        videoEl.removeEventListener(event, handler);
+      });
+    };
+  };
+  const cleanup = () => {
+    cleanupEvents?.();
+    cleanupEvents = null;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  };
+  const plugin = {
+    id: "native-provider",
+    name: "Native Video Provider",
+    version: "1.0.0",
+    type: "provider",
+    description: "Native HTML5 video playback for MP4, WebM, MOV, MKV",
+    canPlay(src) {
+      const ext = getExtension(src);
+      if (!SUPPORTED_EXTENSIONS.includes(ext)) {
+        return false;
+      }
+      const mimeType = getMimeType(ext);
+      return canBrowserPlay(mimeType);
+    },
+    async init(pluginApi) {
+      api = pluginApi;
+      api.logger.info("Native video plugin initialized");
+      const unsubPlay = api.on("playback:play", async () => {
+        if (!video) return;
+        try {
+          await video.play();
+        } catch (e) {
+          api?.logger.error("Play failed", e);
+        }
+      });
+      const unsubPause = api.on("playback:pause", () => {
+        video?.pause();
+      });
+      const unsubSeek = api.on("playback:seeking", ({ time }) => {
+        if (!video) return;
+        const clampedTime = Math.max(0, Math.min(time, video.duration || 0));
+        video.currentTime = clampedTime;
+      });
+      const unsubVolume = api.on("volume:change", ({ volume, muted }) => {
+        if (video) {
+          video.volume = volume;
+          video.muted = muted;
+        }
+      });
+      const unsubMute = api.on("volume:mute", ({ muted }) => {
+        if (video) video.muted = muted;
+      });
+      const unsubRate = api.on("playback:ratechange", ({ rate }) => {
+        if (video) video.playbackRate = rate;
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubSeek();
+        unsubVolume();
+        unsubMute();
+        unsubRate();
+      });
+    },
+    async destroy() {
+      api?.logger.info("Native video plugin destroying");
+      cleanup();
+      if (video?.parentNode) {
+        video.parentNode.removeChild(video);
+      }
+      video = null;
+      api = null;
+    },
+    async loadSource(src) {
+      if (!api) throw new Error("Plugin not initialized");
+      const ext = getExtension(src);
+      const mimeType = getMimeType(ext);
+      api.logger.info("Loading native video source", { src, mimeType });
+      cleanup();
+      api.setState("playbackState", "loading");
+      api.setState("buffering", true);
+      const videoEl = getOrCreateVideo();
+      cleanupEvents = setupEventListeners(videoEl);
+      return new Promise((resolve, reject) => {
+        const onLoaded = () => {
+          videoEl.removeEventListener("loadedmetadata", onLoaded);
+          videoEl.removeEventListener("error", onError);
+          api?.setState("source", { src, type: mimeType });
+          api?.setState("playbackState", "ready");
+          api?.setState("buffering", false);
+          api?.emit("media:loaded", { src, type: mimeType });
+          resolve();
+        };
+        const onError = () => {
+          videoEl.removeEventListener("loadedmetadata", onLoaded);
+          videoEl.removeEventListener("error", onError);
+          const error = videoEl.error;
+          reject(new Error(error?.message || "Failed to load video source"));
+        };
+        videoEl.addEventListener("loadedmetadata", onLoaded);
+        videoEl.addEventListener("error", onError);
+        videoEl.src = src;
+        videoEl.load();
+      });
+    }
+  };
+  return plugin;
+}
+var index_default = createNativePlugin;
+export {
+  createNativePlugin,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@scarlett-player/native",
+  "version": "0.1.0",
+  "description": "Native Video Provider Plugin for Scarlett Player (MP4, WebM, MOV, MKV)",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@scarlett-player/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@scarlett-player/core": "file:../../core",
+    "typescript": "^5.3.0",
+    "tsup": "^8.0.0",
+    "vitest": "^1.6.0"
+  },
+  "keywords": [
+    "video",
+    "player",
+    "mp4",
+    "webm",
+    "native",
+    "scarlett"
+  ],
+  "author": "The Stream Platform",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Hackney-Enterprises-Inc/scarlett-player.git",
+    "directory": "packages/plugins/native"
+  },
+  "bugs": {
+    "url": "https://github.com/Hackney-Enterprises-Inc/scarlett-player/issues"
+  },
+  "homepage": "https://github.com/Hackney-Enterprises-Inc/scarlett-player#readme"
+}