@f8team/reel-core 1.0.4 → 1.0.5

package/dist/index.d.cts

@@ -132,12 +132,12 @@ interface ThumbnailsDescriptor {
 /**
  * The kind of source. `auto` lets the registry pick.
  *
- * - `hls` — HLS m3u8 manifest, dispatched to `hls.js` (or native on Safari).
- * - `mp4` — Progressive MP4/WebM, dispatched to the native engine.
- * - `youtube` — YouTube IFrame API.
- * - `dash` — MPEG-DASH (reserved for a future dash provider).
- * - `native` — Force the native engine even if the URL looks like HLS (G4 Safari escape).
- * - `auto` — Detect from the URL via `looksLikeHls` / `detectSourceType`.
+ * - `hls` - HLS m3u8 manifest, dispatched to `hls.js` (or native on Safari).
+ * - `mp4` - Progressive MP4/WebM, dispatched to the native engine.
+ * - `youtube` - YouTube IFrame API.
+ * - `dash` - MPEG-DASH (reserved for a future dash provider).
+ * - `native` - Force the native engine even if the URL looks like HLS (G4 Safari escape).
+ * - `auto` - Detect from the URL via `looksLikeHls` / `detectSourceType`.
  */
 type SourceType = "auto" | "hls" | "mp4" | "youtube" | "dash" | "native";
 /**
@@ -154,8 +154,8 @@ interface SourceDescriptor {
     /**
      * Cookie / credentials policy for HLS XHRs.
      *
-     * - `boolean` — sent for every request.
-     * - `(url) => boolean` — predicate (e.g. allowlist `https://api-gateway*`, see G7, G13).
+     * - `boolean` - sent for every request.
+     * - `(url) => boolean` - predicate scoped to a trusted API origin/path (see G7, G13).
      */
     withCredentials?: boolean | ((url: string) => boolean);
     /** Subtitle tracks to attach (G1, G15). */
@@ -222,9 +222,9 @@ interface SourceProvider {
     /**
      * Decide whether this provider can handle the given source.
      *
-     * - `true` — definite match.
-     * - `"maybe"` — handle if no `true` match exists (used by the native fallback).
-     * - `false` — skip.
+     * - `true` - definite match.
+     * - `"maybe"` - handle if no `true` match exists (used by the native fallback).
+     * - `false` - skip.
      */
     canHandle(source: SourceDescriptor): boolean | "maybe";
     /** Construct a fresh loader. Called once per source attach. */
@@ -469,6 +469,13 @@ interface Player {
     dispose(): void;
 }
 
+/** Synchronous source normalization hook applied before provider resolution. */
+type SourceTransform = (source: SourceDescriptor) => SourceDescriptor;
+/** Media element and container owned by one player attachment. */
+interface PluginMediaAttachment {
+    video: HTMLVideoElement;
+    container: Element;
+}
 /**
  * Command registry shared between the player and plugins. Commands are the
  * extension point for keyboard handlers, plugin contributions, and UI buttons.
@@ -505,6 +512,22 @@ interface PluginHost {
     };
     /** Shared command registry. Plugins MUST namespace their commands. */
     commands: CommandRegistry;
+    /**
+     * Register a synchronous source transform. Core applies transforms before
+     * the source is stored or passed to a provider, including the initial
+     * source supplied in `PlayerOptions`.
+     *
+     * Optional for compatibility with custom test hosts built against earlier
+     * versions of the contract.
+     */
+    sources?: {
+        transform(transform: SourceTransform): () => void;
+    };
+    /** Player-scoped media ownership and attach/detach lifecycle. */
+    media?: {
+        get(): PluginMediaAttachment | null;
+        subscribe(listener: (attachment: PluginMediaAttachment | null) => void): () => void;
+    };
     /** Read-only state. */
     store: ReadableStore<PlayerState>;
     /** Emit a custom plugin event. Use the `${plugin}:${verb}` namespace. */
@@ -810,9 +833,13 @@ declare function toSeconds(input: number | string): number;
 
 /**
  * URL helpers used by the source registry to dispatch a source descriptor to
- * the right provider. Pure string predicates — no DOM, no I/O.
+ * the right provider. Pure string predicates - no DOM, no I/O.
  */
 
+/** Compare the descriptor fields that affect provider loading or media UI. */
+declare function areSourceDescriptorsEquivalent(previous: SourceDescriptor | null, next: SourceDescriptor | null): boolean;
+/** Whether a media/resource URL is safe to hand to browser media APIs. */
+declare function isSafeMediaUrl(input: string | undefined | null): boolean;
 /**
  * Heuristic for HLS m3u8 URLs.
  *
@@ -843,4 +870,4 @@ declare function looksLikeProgressive(input: string | undefined | null): boolean
  */
 declare function detectSourceType(source: SourceDescriptor): SourceType;
 
-export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
+export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type PluginMediaAttachment, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceTransform, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, areSourceDescriptorsEquivalent, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };

package/dist/index.d.ts

@@ -132,12 +132,12 @@ interface ThumbnailsDescriptor {
 /**
  * The kind of source. `auto` lets the registry pick.
  *
- * - `hls` — HLS m3u8 manifest, dispatched to `hls.js` (or native on Safari).
- * - `mp4` — Progressive MP4/WebM, dispatched to the native engine.
- * - `youtube` — YouTube IFrame API.
- * - `dash` — MPEG-DASH (reserved for a future dash provider).
- * - `native` — Force the native engine even if the URL looks like HLS (G4 Safari escape).
- * - `auto` — Detect from the URL via `looksLikeHls` / `detectSourceType`.
+ * - `hls` - HLS m3u8 manifest, dispatched to `hls.js` (or native on Safari).
+ * - `mp4` - Progressive MP4/WebM, dispatched to the native engine.
+ * - `youtube` - YouTube IFrame API.
+ * - `dash` - MPEG-DASH (reserved for a future dash provider).
+ * - `native` - Force the native engine even if the URL looks like HLS (G4 Safari escape).
+ * - `auto` - Detect from the URL via `looksLikeHls` / `detectSourceType`.
  */
 type SourceType = "auto" | "hls" | "mp4" | "youtube" | "dash" | "native";
 /**
@@ -154,8 +154,8 @@ interface SourceDescriptor {
     /**
      * Cookie / credentials policy for HLS XHRs.
      *
-     * - `boolean` — sent for every request.
-     * - `(url) => boolean` — predicate (e.g. allowlist `https://api-gateway*`, see G7, G13).
+     * - `boolean` - sent for every request.
+     * - `(url) => boolean` - predicate scoped to a trusted API origin/path (see G7, G13).
      */
     withCredentials?: boolean | ((url: string) => boolean);
     /** Subtitle tracks to attach (G1, G15). */
@@ -222,9 +222,9 @@ interface SourceProvider {
     /**
      * Decide whether this provider can handle the given source.
      *
-     * - `true` — definite match.
-     * - `"maybe"` — handle if no `true` match exists (used by the native fallback).
-     * - `false` — skip.
+     * - `true` - definite match.
+     * - `"maybe"` - handle if no `true` match exists (used by the native fallback).
+     * - `false` - skip.
      */
     canHandle(source: SourceDescriptor): boolean | "maybe";
     /** Construct a fresh loader. Called once per source attach. */
@@ -469,6 +469,13 @@ interface Player {
     dispose(): void;
 }
 
+/** Synchronous source normalization hook applied before provider resolution. */
+type SourceTransform = (source: SourceDescriptor) => SourceDescriptor;
+/** Media element and container owned by one player attachment. */
+interface PluginMediaAttachment {
+    video: HTMLVideoElement;
+    container: Element;
+}
 /**
  * Command registry shared between the player and plugins. Commands are the
  * extension point for keyboard handlers, plugin contributions, and UI buttons.
@@ -505,6 +512,22 @@ interface PluginHost {
     };
     /** Shared command registry. Plugins MUST namespace their commands. */
     commands: CommandRegistry;
+    /**
+     * Register a synchronous source transform. Core applies transforms before
+     * the source is stored or passed to a provider, including the initial
+     * source supplied in `PlayerOptions`.
+     *
+     * Optional for compatibility with custom test hosts built against earlier
+     * versions of the contract.
+     */
+    sources?: {
+        transform(transform: SourceTransform): () => void;
+    };
+    /** Player-scoped media ownership and attach/detach lifecycle. */
+    media?: {
+        get(): PluginMediaAttachment | null;
+        subscribe(listener: (attachment: PluginMediaAttachment | null) => void): () => void;
+    };
     /** Read-only state. */
     store: ReadableStore<PlayerState>;
     /** Emit a custom plugin event. Use the `${plugin}:${verb}` namespace. */
@@ -810,9 +833,13 @@ declare function toSeconds(input: number | string): number;
 
 /**
  * URL helpers used by the source registry to dispatch a source descriptor to
- * the right provider. Pure string predicates — no DOM, no I/O.
+ * the right provider. Pure string predicates - no DOM, no I/O.
  */
 
+/** Compare the descriptor fields that affect provider loading or media UI. */
+declare function areSourceDescriptorsEquivalent(previous: SourceDescriptor | null, next: SourceDescriptor | null): boolean;
+/** Whether a media/resource URL is safe to hand to browser media APIs. */
+declare function isSafeMediaUrl(input: string | undefined | null): boolean;
 /**
  * Heuristic for HLS m3u8 URLs.
  *
@@ -843,4 +870,4 @@ declare function looksLikeProgressive(input: string | undefined | null): boolean
  */
 declare function detectSourceType(source: SourceDescriptor): SourceType;
 
-export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };
+export { type AutoplayMode, type BufferedRange, type CommandRegistry, DEFAULT_TOKENS, type Disposer, type KeyboardScope, type MutableStore, type Player, type PlayerError, type PlayerErrorCode, type PlayerEvents, type PlayerHooks, type PlayerOptions, type PlayerState, type PlayerStatus, type PluginHost, type PluginInstance, type PluginMediaAttachment, type QualityLevel, type ReadableStore, type SourceDescriptor, type SourceLoader, type SourceProvider, type SourceTransform, type SourceType, type SubtitleTrack, THEME_PRESETS, TOKEN_TO_CSS_VAR, type ThemeName, type ThemeTokens, type ThumbnailsDescriptor, type UnauthorizedEvent, announce, applyTheme, areSourceDescriptorsEquivalent, createFocusTrap, createPlayer, definePlugin, detectSourceType, formatTime, isSafeMediaUrl, looksLikeHls, looksLikeProgressive, looksLikeYouTube, parseTime, resolveTokens, toSeconds };

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() {
@@ -2297,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