@f8team/reel-core 1.0.3 → 1.0.5

package/dist/index.js

@@ -5,6 +5,7 @@ var RETRYABLE_BY_DEFAULT = {
   decode: false,
   unauthorized: false,
   unsupported: false,
+  "hls-fragment-loop": true,
   internal: false
 };
 function createPlayerError(input) {
@@ -211,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);
@@ -225,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();
@@ -264,6 +326,54 @@ function resolveWithCredentials(policy, url) {
 }
 
 // src/sources/hls.ts
+var REPEATED_FRAGMENT_LOAD_LIMIT = 4;
+var MEDIA_RECOVERY_LIMIT = 1;
+function makeLoadPolicy(options) {
+  return {
+    default: {
+      maxTimeToFirstByteMs: options.maxTimeToFirstByteMs,
+      maxLoadTimeMs: options.maxLoadTimeMs,
+      timeoutRetry: options.timeoutRetry,
+      errorRetry: options.errorRetry
+    }
+  };
+}
+function makeLinearRetry(maxNumRetry, retryDelayMs, maxRetryDelayMs) {
+  return {
+    maxNumRetry,
+    retryDelayMs,
+    maxRetryDelayMs,
+    backoff: "linear"
+  };
+}
+function makeHlsLoadPolicies() {
+  return {
+    manifestLoadPolicy: makeLoadPolicy({
+      maxTimeToFirstByteMs: 1e4,
+      maxLoadTimeMs: 2e4,
+      timeoutRetry: makeLinearRetry(1, 0, 0),
+      errorRetry: makeLinearRetry(1, 1e3, 8e3)
+    }),
+    playlistLoadPolicy: makeLoadPolicy({
+      maxTimeToFirstByteMs: 1e4,
+      maxLoadTimeMs: 2e4,
+      timeoutRetry: makeLinearRetry(1, 0, 0),
+      errorRetry: makeLinearRetry(2, 1e3, 8e3)
+    }),
+    keyLoadPolicy: makeLoadPolicy({
+      maxTimeToFirstByteMs: 8e3,
+      maxLoadTimeMs: 2e4,
+      timeoutRetry: makeLinearRetry(1, 1e3, 8e3),
+      errorRetry: makeLinearRetry(2, 1e3, 8e3)
+    }),
+    fragLoadPolicy: makeLoadPolicy({
+      maxTimeToFirstByteMs: 1e4,
+      maxLoadTimeMs: 3e4,
+      timeoutRetry: makeLinearRetry(1, 0, 0),
+      errorRetry: makeLinearRetry(2, 1e3, 4e3)
+    })
+  };
+}
 var defaultLoad = () => {
   return import('hls.js').then((m) => m.default);
 };
@@ -288,13 +398,17 @@ var HlsLoader = class {
     this.rejectAttach = null;
     this.manifestTimeout = null;
     this.aborted = false;
+    this.lastLoadingFragmentKey = null;
+    this.repeatedFragmentLoadCount = 0;
+    this.repeatedFragmentErrorFired = false;
+    this.mediaRecoveryCount = 0;
     /** `false` idle; `'auto'` → first `LEVEL_SWITCHED` clears; otherwise await this level index. */
     this.qualityAwait = false;
     this.qualitySwitchTimer = null;
     /** Tracks consecutive menu selections so redundant "Auto → Auto" skips the spinner. */
     this.lastChosenQualityWasAuto = false;
     /**
-     * `null` — user chose ABR auto (menu shows "Auto"). Real hls.js still exposes
+     * `null` - user chose ABR auto (menu shows "Auto"). Real hls.js still exposes
      * `currentLevel >= 0` for the playing rendition; we must not mirror that into UI state.
      */
     this.manualLevelIndex = null;
@@ -350,6 +464,7 @@ var HlsLoader = class {
   attachWithHlsJs(Hls, video, source) {
     const hls = new Hls({
       enableWorker: true,
+      ...makeHlsLoadPolicies(),
       xhrSetup: (xhr, url) => this.installXhrWatcher(xhr, url, source)
     });
     this.hls = hls;
@@ -370,27 +485,44 @@ var HlsLoader = class {
         this.onLevelEventuallyStabilized(...args);
         this.refreshActiveQuality();
       };
+      const onFragmentLoading = (...args) => {
+        this.onFragmentLoading(...args);
+      };
+      const onFragmentBuffered = (...args) => {
+        this.resetFragmentLoopGuardFromEvent(...args);
+      };
       const onError = (..._args) => {
-        const data = _args[1] ?? {};
+        const data = this.getHlsEventData(_args);
         const status = data.response?.code;
+        if (this.tryRecoverMediaError(Hls, data)) {
+          return;
+        }
         const isHttpError = typeof status === "number" && status >= 400;
-        if (data.fatal || isHttpError) {
-          const message = data.fatal ? `HLS fatal error: ${data.type ?? "unknown"}` : `HLS load error: HTTP ${status}`;
+        const isTerminalHlsError = this.isTerminalHlsError(data);
+        if (data.fatal || isHttpError || isTerminalHlsError) {
+          const message = this.formatHlsErrorMessage(data, status);
+          this.stopHlsLoading();
           this.options.onError?.({
+            code: this.getHlsErrorCode(data, status),
             message,
             cause: data,
             status,
-            url: data.response?.url ?? data.url
+            url: this.getErrorUrl(data),
+            retryable: this.isRetryableHlsError(data, status)
           });
           settle(() => reject(new Error(message)));
         }
       };
       hls.on(Hls.Events.MANIFEST_PARSED, onParsed);
       hls.on(Hls.Events.LEVEL_SWITCHED, onSwitched);
+      hls.on(Hls.Events.FRAG_LOADING, onFragmentLoading);
+      hls.on(Hls.Events.FRAG_BUFFERED, onFragmentBuffered);
       hls.on(Hls.Events.ERROR, onError);
       this.detachListeners.push(
         () => hls.off(Hls.Events.MANIFEST_PARSED, onParsed),
         () => hls.off(Hls.Events.LEVEL_SWITCHED, onSwitched),
+        () => hls.off(Hls.Events.FRAG_LOADING, onFragmentLoading),
+        () => hls.off(Hls.Events.FRAG_BUFFERED, onFragmentBuffered),
         () => hls.off(Hls.Events.ERROR, onError),
         () => settle(() => reject(makeAbortError()))
       );
@@ -398,6 +530,7 @@ var HlsLoader = class {
       if (timeoutMs > 0) {
         this.manifestTimeout = setTimeout(() => {
           const message = `HLS manifest timeout after ${timeoutMs}ms`;
+          this.stopHlsLoading();
           this.options.onError?.({ message, cause: { type: "timeout" }, url: source.src });
           settle(() => reject(new Error(message)));
         }, timeoutMs);
@@ -412,7 +545,7 @@ var HlsLoader = class {
   }
   /**
    * Wire the readystatechange watcher and remove it as soon as the XHR
-   * completes — without this cleanup hls.js (which spawns one XHR per segment)
+   * completes - without this cleanup hls.js (which spawns one XHR per segment)
    * leaks a closure per request (A1).
    */
   installXhrWatcher(xhr, url, source) {
@@ -438,10 +571,149 @@ var HlsLoader = class {
     };
     xhr.addEventListener("readystatechange", watcher);
   }
-  abort() {
-    if (this.aborted) return;
-    this.aborted = true;
-    this.clearManifestTimeout();
+  getHlsEventData(args) {
+    const data = args[1] ?? args[0];
+    return data !== null && typeof data === "object" ? data : {};
+  }
+  getFragmentUrl(data) {
+    return data.frag?.url ?? data.frag?.relurl ?? data.response?.url ?? data.url;
+  }
+  getErrorUrl(data) {
+    return this.getFragmentUrl(data) ?? this.currentSource?.src;
+  }
+  getFragmentKey(data) {
+    const url = this.getFragmentUrl(data);
+    const frag = data.frag;
+    if (!frag) return url ?? null;
+    const type = frag.type ?? "main";
+    const level = frag.level ?? "unknown-level";
+    const sn = frag.sn ?? "unknown-sn";
+    const cc = frag.cc ?? "unknown-cc";
+    const start = frag.start ?? frag.startPTS ?? "unknown-start";
+    return `${url ?? "unknown-url"}:${type}:${level}:${sn}:${cc}:${start}`;
+  }
+  isTerminalHlsError(data) {
+    switch (data.details) {
+      case "manifestParsingError":
+      case "manifestIncompatibleCodecsError":
+      case "levelEmptyError":
+      case "levelParsingError":
+      case "fragParsingError":
+      case "fragDecryptError":
+      case "keyLoadError":
+      case "keyLoadTimeOut":
+      case "bufferFullError":
+        return true;
+      default:
+        return false;
+    }
+  }
+  formatHlsErrorMessage(data, status) {
+    if (data.fatal) {
+      const type2 = data.type ?? "unknown";
+      const details2 = data.details ? ` (${data.details})` : "";
+      return `HLS fatal error: ${type2}${details2}`;
+    }
+    if (typeof status === "number" && status >= 400) {
+      return `HLS load error: HTTP ${status}${data.details ? ` (${data.details})` : ""}`;
+    }
+    const type = data.type ?? "unknown";
+    const details = data.details ? ` (${data.details})` : "";
+    return `HLS error: ${type}${details}`;
+  }
+  getHlsErrorCode(data, status) {
+    if (status === 401 || status === 403) return "unauthorized";
+    switch (data.details) {
+      case "manifestParsingError":
+      case "manifestIncompatibleCodecsError":
+      case "levelParsingError":
+      case "fragParsingError":
+      case "fragDecryptError":
+        return "decode";
+      default:
+        return "network";
+    }
+  }
+  isRetryableHlsError(data, status) {
+    if (status === 401 || status === 403) return false;
+    if (typeof status === "number" && status >= 400 && status < 500) return false;
+    switch (data.details) {
+      case "manifestParsingError":
+      case "manifestIncompatibleCodecsError":
+      case "levelParsingError":
+      case "fragParsingError":
+      case "fragDecryptError":
+        return false;
+      default:
+        return true;
+    }
+  }
+  isRecoverableMediaError(Hls, data) {
+    if (data.type !== Hls.ErrorTypes.MEDIA_ERROR && data.type !== "mediaError") {
+      return false;
+    }
+    if (!data.fatal) return false;
+    if (this.mediaRecoveryCount >= MEDIA_RECOVERY_LIMIT) return false;
+    if (typeof this.hls?.recoverMediaError !== "function") return false;
+    switch (data.details) {
+      case void 0:
+      case "bufferAppendError":
+      case "bufferAppendingError":
+      case "bufferStalledError":
+      case "bufferSeekOverHole":
+      case "bufferNudgeOnStall":
+      case "bufferFullError":
+        return true;
+      default:
+        return false;
+    }
+  }
+  tryRecoverMediaError(Hls, data) {
+    if (!this.isRecoverableMediaError(Hls, data)) return false;
+    this.mediaRecoveryCount += 1;
+    this.resetFragmentLoopGuard();
+    this.completeQualityAwaitIfBusy();
+    try {
+      this.hls?.recoverMediaError?.();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  onFragmentLoading(...args) {
+    if (this.repeatedFragmentErrorFired) return;
+    const data = this.getHlsEventData(args);
+    const key = this.getFragmentKey(data);
+    if (!key) return;
+    if (key === this.lastLoadingFragmentKey) {
+      this.repeatedFragmentLoadCount += 1;
+    } else {
+      this.lastLoadingFragmentKey = key;
+      this.repeatedFragmentLoadCount = 1;
+    }
+    if (this.repeatedFragmentLoadCount < REPEATED_FRAGMENT_LOAD_LIMIT) return;
+    this.repeatedFragmentErrorFired = true;
+    this.stopHlsLoading();
+    const url = this.getFragmentUrl(data);
+    this.options.onError?.({
+      code: "hls-fragment-loop",
+      message: `HLS fragment repeatedly loading: ${url ?? key}`,
+      cause: data,
+      url
+    });
+  }
+  resetFragmentLoopGuardFromEvent(...args) {
+    const data = this.getHlsEventData(args);
+    if (this.getFragmentKey(data)) {
+      this.resetFragmentLoopGuard();
+    }
+  }
+  resetFragmentLoopGuard() {
+    this.lastLoadingFragmentKey = null;
+    this.repeatedFragmentLoadCount = 0;
+    this.repeatedFragmentErrorFired = false;
+  }
+  abortLiveXhrs() {
     for (const xhr of [...this.liveXhrs]) {
       try {
         xhr.abort();
@@ -449,6 +721,20 @@ var HlsLoader = class {
       }
     }
     this.liveXhrs.clear();
+  }
+  stopHlsLoading() {
+    this.completeQualityAwaitIfBusy();
+    try {
+      this.hls?.stopLoad?.();
+    } catch {
+    }
+    this.abortLiveXhrs();
+  }
+  abort() {
+    if (this.aborted) return;
+    this.aborted = true;
+    this.clearManifestTimeout();
+    this.abortLiveXhrs();
     const reject = this.rejectAttach;
     this.rejectAttach = null;
     reject?.(makeAbortError());
@@ -484,6 +770,8 @@ var HlsLoader = class {
     this.aborted = false;
     this.lastChosenQualityWasAuto = false;
     this.manualLevelIndex = null;
+    this.mediaRecoveryCount = 0;
+    this.resetFragmentLoopGuard();
   }
   clearQualitySwitchTimerOnly() {
     if (this.qualitySwitchTimer !== null) {
@@ -605,7 +893,7 @@ var HlsLoader = class {
     const locked = this.qualities[this.manualLevelIndex] ?? null;
     this.options.onActiveQuality?.(locked, false);
   }
-  /** @internal — for tests. */
+  /** @internal - for tests. */
   _getInternalState() {
     return { source: this.currentSource, qualities: this.qualities };
   }
@@ -627,6 +915,7 @@ var NativeLoader = class {
   constructor() {
     this.video = null;
     this.cleanups = [];
+    this.rejectPending = null;
   }
   async attach(video, source) {
     this.detach();
@@ -634,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 = () => {
@@ -649,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");
@@ -793,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, "");
@@ -806,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%",
@@ -822,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;
@@ -1154,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",
@@ -1201,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;
@@ -1230,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);
@@ -1246,7 +1565,14 @@ function createPlayer(options = {}, internal = {}) {
       onUnauthorized: (e) => emitUnauthorized(e),
       onQualities: (q) => setQualities(q),
       onActiveQuality: (q, auto) => setActiveQuality(q, auto),
-      onError: (err) => applyError(createPlayerError({ ...err, code: "network" })),
+      onError: (err) => {
+        const playerError = createPlayerError({ ...err, code: err.code ?? "network" });
+        if (status === "loading") {
+          dispatch({ type: "loadFailed", error: playerError });
+          return;
+        }
+        dispatch({ type: "runtimeError", error: playerError });
+      },
       onQualitySwitch: (active) => bus.emit("qualityswitch", { active })
     })
   );
@@ -1288,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) {
@@ -1300,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) {
@@ -1343,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;
     }
@@ -1362,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(() => {
@@ -1465,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,
@@ -1537,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) {
@@ -1557,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() {
@@ -1598,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") {
@@ -1625,6 +1984,7 @@ function createPlayer(options = {}, internal = {}) {
         attachDisposers.push(off2);
       }
     }
+    await sourceLoadPromise;
   }
   function detach() {
     pendingAttachAbort?.();
@@ -1638,6 +1998,7 @@ function createPlayer(options = {}, internal = {}) {
       }
       activeLoader = null;
     }
+    mediaAttachments.set(null);
     video = null;
   }
   function dispose() {
@@ -1652,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;
@@ -1660,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() {
@@ -2063,6 +2425,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, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map