@f8team/reel-core 1.0.4 → 1.1.0

package/dist/index.js

@@ -212,12 +212,58 @@ function createControlsRegistry() {
   }
   return { contribute, snapshot, clear };
 }
-function createPluginHost({ commands, controls, store, bus }) {
+function createSourceTransformRegistry() {
+  const transforms = /* @__PURE__ */ new Set();
+  function register(transform) {
+    transforms.add(transform);
+    return () => transforms.delete(transform);
+  }
+  function apply(source) {
+    let current = source;
+    for (const transform of transforms) {
+      current = transform(current);
+    }
+    return current;
+  }
+  return { register, apply };
+}
+function createMediaAttachmentRegistry() {
+  let current = null;
+  const listeners = /* @__PURE__ */ new Set();
+  function get() {
+    return current;
+  }
+  function set(attachment) {
+    current = attachment;
+    for (const listener of listeners) listener(current);
+  }
+  function subscribe(listener) {
+    listeners.add(listener);
+    if (current) listener(current);
+    return () => listeners.delete(listener);
+  }
+  return { get, set, subscribe };
+}
+function createPluginHost({
+  commands,
+  controls,
+  store,
+  bus,
+  sourceTransforms = createSourceTransformRegistry(),
+  mediaAttachments = createMediaAttachmentRegistry()
+}) {
   return {
     controls: {
-      contribute: (slot, render) => controls.contribute(slot, render)
+      contribute: controls.contribute
     },
     commands,
+    sources: {
+      transform: sourceTransforms.register
+    },
+    media: {
+      get: mediaAttachments.get,
+      subscribe: mediaAttachments.subscribe
+    },
     store,
     emit: (event, payload) => {
       bus.emit(event, payload);
@@ -226,6 +272,21 @@ function createPluginHost({ commands, controls, store, bus }) {
 }
 
 // src/util/url.ts
+function areSourceDescriptorsEquivalent(previous, next) {
+  if (previous === next) return true;
+  if (!previous || !next) return false;
+  const previousThumbnails = previous.thumbnails;
+  const nextThumbnails = next.thumbnails;
+  return previous.src === next.src && (previous.type || "auto") === (next.type || "auto") && previous.withCredentials === next.withCredentials && previous.tracks === next.tracks && (previousThumbnails === nextThumbnails || previousThumbnails?.src === nextThumbnails?.src && previousThumbnails?.withCredentials === nextThumbnails?.withCredentials);
+}
+function isSafeMediaUrl(input) {
+  if (!input?.trim()) return false;
+  try {
+    return /^(https?|blob|data):$/.test(new URL(input, "https://reel.invalid").protocol);
+  } catch {
+    return false;
+  }
+}
 function looksLikeHls(input) {
   if (!input) return false;
   const lower = input.toLowerCase();
@@ -854,6 +915,7 @@ var NativeLoader = class {
   constructor() {
     this.video = null;
     this.cleanups = [];
+    this.rejectPending = null;
   }
   async attach(video, source) {
     this.detach();
@@ -861,12 +923,14 @@ var NativeLoader = class {
     return new Promise((resolve, reject) => {
       const onMeta = () => {
         cleanupListeners();
+        this.rejectPending = null;
         resolve();
       };
       const onError = () => {
         cleanupListeners();
         const err = video.error;
         const message = err ? `MediaError code=${err.code} message=${err.message}` : "Native loader failed";
+        this.rejectPending = null;
         reject(new Error(message));
       };
       const cleanupListeners = () => {
@@ -876,17 +940,28 @@ var NativeLoader = class {
       video.addEventListener("loadedmetadata", onMeta);
       video.addEventListener("error", onError);
       this.cleanups.push(cleanupListeners);
+      this.rejectPending = reject;
       video.src = source.src;
       video.load();
     });
   }
-  detach() {
+  abort() {
+    const reject = this.rejectPending;
+    this.rejectPending = null;
     while (this.cleanups.length) {
       try {
         this.cleanups.pop()?.();
       } catch {
       }
     }
+    if (reject) {
+      const error = new Error("Native source load aborted");
+      error.name = "AbortError";
+      reject(error);
+    }
+  }
+  detach() {
+    this.abort();
     if (this.video) {
       try {
         this.video.removeAttribute("src");
@@ -1020,7 +1095,9 @@ var YouTubeLoader = class {
     }
     const host = document.createElement("div");
     host.setAttribute("data-reel-yt-host", "");
-    host.style.cssText = "position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#000;";
+    host.style.cssText = "position:absolute;inset:0;overflow:hidden;background:#000";
+    const mount = document.createElement("div");
+    host.appendChild(mount);
     parent.appendChild(host);
     this.host = host;
     video.setAttribute(YT_HIDDEN_ATTR, "");
@@ -1033,7 +1110,7 @@ var YouTubeLoader = class {
         run();
       };
       try {
-        this.yt = new YT.Player(host, {
+        this.yt = new YT.Player(mount, {
           videoId: id,
           // 100% so the iframe fills the host div rather than using default px dimensions.
           width: "100%",
@@ -1049,7 +1126,7 @@ var YouTubeLoader = class {
             onReady: () => {
               const iframe = host.querySelector("iframe");
               if (iframe) {
-                iframe.style.cssText = "width:100%;height:100%;border:none;display:block;";
+                iframe.style.cssText = "width:100%;height:100%;border:none;display:block";
               }
               try {
                 this.duration = this.yt?.getDuration() ?? 0;
@@ -1381,21 +1458,6 @@ function createStore(initial, options = {}) {
 }
 
 // src/createPlayer.ts
-var NATIVE_EVENTS = [
-  "loadedmetadata",
-  "durationchange",
-  "timeupdate",
-  "play",
-  "pause",
-  "ended",
-  "error",
-  "volumechange",
-  "ratechange",
-  "seeking",
-  "seeked",
-  "waiting",
-  "playing"
-];
 function makeInitialState(options) {
   return {
     status: "idle",
@@ -1428,13 +1490,42 @@ function createPlayer(options = {}, internal = {}) {
   const bus = createEventBus();
   const commands = createCommandRegistry();
   const controls = createControlsRegistry();
+  const sourceTransforms = createSourceTransformRegistry();
+  const mediaAttachments = createMediaAttachmentRegistry();
   let status = "idle";
   let video = null;
   let activeLoader = null;
   let pendingAttachAbort = null;
+  let pendingSourceLoad = null;
+  let latestSourceLoadPromise = null;
   let disposed = false;
-  let initialOptionsApplied = false;
   let pendingPlay = false;
+  function createPendingSourceLoad() {
+    let resolve;
+    let reject;
+    const promise = new Promise((onResolve, onReject) => {
+      resolve = onResolve;
+      reject = onReject;
+    });
+    void promise.catch(() => void 0);
+    latestSourceLoadPromise = promise;
+    return { promise, resolve, reject };
+  }
+  function resolvePendingSourceLoad() {
+    const load = pendingSourceLoad;
+    if (!load) return;
+    pendingSourceLoad = null;
+    load.resolve();
+  }
+  function rejectPendingSourceLoad(reason) {
+    const load = pendingSourceLoad;
+    if (!load) return;
+    pendingSourceLoad = null;
+    load.reject(reason);
+  }
+  function createAbortError() {
+    return Object.assign(new Error("Aborted"), { name: "AbortError" });
+  }
   const YT_PLAYER_STATE_PLAYING = 1;
   function getYouTubePlayer() {
     return activeLoader?._instance?.() ?? null;
@@ -1457,11 +1548,12 @@ function createPlayer(options = {}, internal = {}) {
     bus.emit("qualitychange", { quality, auto });
   }
   commands.add("hls:setQuality", (level) => {
-    if (level === null) {
-      bus.emit("qualitypreference", { qualityHeight: null });
-    } else if (level !== null && typeof level === "object" && typeof level.height === "number") {
-      bus.emit("qualitypreference", { qualityHeight: level.height });
+    if (level !== null && (typeof level !== "object" || typeof level.height !== "number")) {
+      return;
     }
+    bus.emit("qualitypreference", {
+      qualityHeight: level === null ? null : level.height
+    });
     const loader = activeLoader;
     if (typeof loader?.setQuality === "function") {
       loader.setQuality(level === null ? "auto" : level);
@@ -1522,7 +1614,9 @@ function createPlayer(options = {}, internal = {}) {
     commands,
     controls,
     store: { getState: store.getState, subscribe: store.subscribe },
-    bus
+    bus,
+    sourceTransforms,
+    mediaAttachments
   });
   const plugins = createPluginBus({ player: playerRef, host });
   function dispatch(event) {
@@ -1534,6 +1628,10 @@ function createPlayer(options = {}, internal = {}) {
     for (const effect of result.effects) applyEffect(effect);
     if (prev !== "ready" && status === "ready") {
       bus.emit("ready", { duration: store.getState().duration });
+      resolvePendingSourceLoad();
+    }
+    if (event.type === "loadFailed") {
+      rejectPendingSourceLoad(event.error);
     }
   }
   function applyEffect(effect) {
@@ -1577,15 +1675,29 @@ function createPlayer(options = {}, internal = {}) {
       activeQuality: null
     });
     bus.emit("qualitychange", { quality: null, auto: true });
+    if (!isSafeMediaUrl(source.src) || source.tracks?.some((track) => !isSafeMediaUrl(track.src)) || source.thumbnails && !isSafeMediaUrl(source.thumbnails.src)) {
+      if (video) {
+        pendingSourceLoad = createPendingSourceLoad();
+      }
+      const error = createPlayerError({
+        code: "unsupported",
+        message: "Invalid URL"
+      });
+      dispatch({ type: "loadFailed", error });
+      return;
+    }
     if (!video) return;
+    const sourceLoad = createPendingSourceLoad();
+    pendingSourceLoad = sourceLoad;
     const provider = registry.resolve(source);
     if (!provider) {
+      const error = createPlayerError({
+        code: "unsupported",
+        message: `No source provider for ${source.src}`
+      });
       dispatch({
         type: "loadFailed",
-        error: createPlayerError({
-          code: "unsupported",
-          message: `No source provider for ${source.src}`
-        })
+        error
       });
       return;
     }
@@ -1596,8 +1708,13 @@ function createPlayer(options = {}, internal = {}) {
       aborted = true;
       try {
         loader.abort?.();
-      } catch (err) {
-        console.error("[@f8team/reel-core] loader.abort() threw:", err);
+      } catch (error) {
+        console.error(error);
+      }
+      if (pendingSourceLoad === sourceLoad) {
+        rejectPendingSourceLoad(createAbortError());
+      } else {
+        sourceLoad.reject(createAbortError());
       }
     };
     loader.attach(video, source).then(() => {
@@ -1699,8 +1816,6 @@ function createPlayer(options = {}, internal = {}) {
       target.addEventListener(name, handler);
       nativeListeners.push(() => target.removeEventListener(name, handler));
     }
-    for (const _ of NATIVE_EVENTS) {
-    }
     on2("loadedmetadata", () => {
       store.setState({
         duration: Number.isFinite(target.duration) ? target.duration : 0,
@@ -1771,17 +1886,24 @@ function createPlayer(options = {}, internal = {}) {
     on2("playing", () => {
       bus.emit("buffering", { isBuffering: false });
     });
-    if (typeof document !== "undefined") {
-      const onFullscreenChange = () => {
-        const isFullscreen = !!document.fullscreenElement;
-        store.setState({ fullscreen: isFullscreen });
-        bus.emit("fullscreenchange", { fullscreen: isFullscreen });
-      };
-      document.addEventListener("fullscreenchange", onFullscreenChange);
-      nativeListeners.push(
-        () => document.removeEventListener("fullscreenchange", onFullscreenChange)
-      );
-    }
+    on2("enterpictureinpicture", () => {
+      store.setState({ pip: true });
+      bus.emit("pipchange", { pip: true });
+    });
+    on2("leavepictureinpicture", () => {
+      store.setState({ pip: false });
+      bus.emit("pipchange", { pip: false });
+    });
+    const ownerDocument = target.ownerDocument;
+    const onFullscreenChange = () => {
+      const isFullscreen = !!ownerDocument.fullscreenElement?.contains(target);
+      store.setState({ fullscreen: isFullscreen });
+      bus.emit("fullscreenchange", { fullscreen: isFullscreen });
+    };
+    ownerDocument.addEventListener("fullscreenchange", onFullscreenChange);
+    nativeListeners.push(
+      () => ownerDocument.removeEventListener("fullscreenchange", onFullscreenChange)
+    );
   }
   function unbindNativeEvents() {
     while (nativeListeners.length) {
@@ -1791,24 +1913,18 @@ function createPlayer(options = {}, internal = {}) {
       }
     }
   }
-  function applyInitialOptions() {
-    if (initialOptionsApplied || !video) return;
-    if (typeof options.volume === "number") video.volume = options.volume;
-    if (typeof options.muted === "boolean") video.muted = options.muted;
-    if (typeof options.playbackRate === "number") video.playbackRate = options.playbackRate;
+  function applyAttachOptions() {
+    if (!video) return;
+    const state = store.getState();
+    video.volume = state.volume;
+    video.muted = state.muted;
+    video.playbackRate = state.playbackRate;
     if (options.poster) video.poster = options.poster;
     if (options.preload) video.preload = options.preload;
-    if (options.playsInline ?? true) {
-      video.playsInline = true;
-      video.setAttribute("webkit-playsinline", "");
-    }
-    if ("crossOrigin" in options) {
-      if (options.crossOrigin) video.crossOrigin = options.crossOrigin;
-    } else {
-      video.crossOrigin = "anonymous";
-    }
-    if (options.loop) video.loop = true;
-    initialOptionsApplied = true;
+    video.playsInline = options.playsInline ?? true;
+    video.toggleAttribute("webkit-playsinline", video.playsInline);
+    video.crossOrigin = "crossOrigin" in options ? options.crossOrigin ?? null : "anonymous";
+    video.loop = !!options.loop;
   }
   const attachDisposers = [];
   function flushAttachDisposers() {
@@ -1832,12 +1948,21 @@ function createPlayer(options = {}, internal = {}) {
   }
   async function attach(el) {
     if (disposed) throw new Error("[@f8team/reel-core] cannot attach: player disposed");
-    if (video === el) return;
+    if (video === el) {
+      await latestSourceLoadPromise;
+      return;
+    }
     if (video) detach();
     video = el;
+    mediaAttachments.set({
+      video: el,
+      container: el.closest("[data-reel]") ?? el.parentElement ?? el
+    });
     bindNativeEvents(el);
-    applyInitialOptions();
-    if (options.source) dispatch({ type: "setSource", source: options.source });
+    applyAttachOptions();
+    const currentSource = store.getState().source;
+    if (currentSource) setSource(currentSource);
+    const sourceLoadPromise = latestSourceLoadPromise;
     const wantStartTime = typeof options.startTime === "number" && options.startTime > 0;
     const wantAutoplay = !!options.autoplay && options.autoplay !== "off" && !!options.source;
     if (status === "ready") {
@@ -1859,6 +1984,7 @@ function createPlayer(options = {}, internal = {}) {
         attachDisposers.push(off2);
       }
     }
+    await sourceLoadPromise;
   }
   function detach() {
     pendingAttachAbort?.();
@@ -1872,6 +1998,7 @@ function createPlayer(options = {}, internal = {}) {
       }
       activeLoader = null;
     }
+    mediaAttachments.set(null);
     video = null;
   }
   function dispose() {
@@ -1886,7 +2013,8 @@ function createPlayer(options = {}, internal = {}) {
   }
   function setSource(source) {
     pendingPlay = false;
-    dispatch({ type: "setSource", source });
+    latestSourceLoadPromise = null;
+    dispatch({ type: "setSource", source: source ? sourceTransforms.apply(source) : null });
   }
   function getSource() {
     return store.getState().source;
@@ -1894,7 +2022,7 @@ function createPlayer(options = {}, internal = {}) {
   function retry() {
     const current = store.getState().source;
     if (!current) return false;
-    dispatch({ type: "setSource", source: current });
+    setSource(current);
     return true;
   }
   async function play() {
@@ -2264,6 +2392,27 @@ function createFocusTrap(container) {
   return { activate, deactivate };
 }
 
+// src/a11y/controlsFocus.ts
+var OPEN_MENU_SELECTOR = "[data-reel-menu-open]";
+function activeElementInside(container) {
+  const active = (container.ownerDocument ?? document).activeElement;
+  if (!(active instanceof HTMLElement)) return null;
+  return container.contains(active) ? active : null;
+}
+function blurFocusInside(container) {
+  activeElementInside(container)?.blur();
+}
+function shouldKeepControlsVisible(container) {
+  if (container.querySelector(OPEN_MENU_SELECTOR) !== null) return true;
+  const active = activeElementInside(container);
+  if (!active) return false;
+  try {
+    return active.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+
 // src/util/time.ts
 var TIME_RE = /^(?:(\d+):)?(\d{1,2}):(\d{1,2})(?:\.(\d+))?$/;
 function parseTime(input) {
@@ -2297,6 +2446,6 @@ function toSeconds(input) {
   return parseTime(input);
 }
 
-export { DEFAULT_TOKENS, THEME_PRESETS, TOKEN_TO_CSS_VAR, announce, applyTheme, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
+export { DEFAULT_TOKENS, THEME_PRESETS, TOKEN_TO_CSS_VAR, announce, applyTheme, areSourceDescriptorsEquivalent, blurFocusInside, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, shouldKeepControlsVisible, toSeconds };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map