@f8team/reel-core 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @f8team/reel-core
 
+## 1.0.3
+
+### Patch Changes
+
+- Stabilize YouTube playback state by preventing hidden native media timeupdate events from overriding the YouTube clock.
+
 ## 1.0.1
 
 ### Patch Changes
@@ -18,46 +24,46 @@
   publishable as OSS.
 
   ## Public API additions (minor)
-  - **`@f8team/reel-core`** — `Player.retry(): boolean` re-attempts the last
+  - **`@f8team/reel-core`** - `Player.retry(): boolean` re-attempts the last
     source. Returns `false` when there is nothing to retry. Useful for
     "Try again" buttons on error overlays.
-  - **`@f8team/reel-core`** — `SourceLoader.abort?()` (optional) lets the
+  - **`@f8team/reel-core`** - `SourceLoader.abort?()` (optional) lets the
     orchestrator cancel in-flight network work on rapid `setSource` swaps
     without tearing down the underlying media element. Both built-in HLS and
     YouTube loaders implement it.
-  - **`@f8team/reel-react`** — `<Player.Root labels>` prop + `defaultLabels` /
+  - **`@f8team/reel-react`** - `<Player.Root labels>` prop + `defaultLabels` /
     `vietnameseLabels` presets + `useLabels()` hook for ARIA / time-formatter
     i18n.
-  - **`@f8team/reel-plugin-resume-position`** — `keyFn(source) => string | null`
+  - **`@f8team/reel-plugin-resume-position`** - `keyFn(source) => string | null`
     (signed-URL-friendly), `saveIntervalMs` (default 10s, periodic save while
     playing).
-  - **`@f8team/reel-plugin-auth-aware`** — `allowlist` now accepts
+  - **`@f8team/reel-plugin-auth-aware`** - `allowlist` now accepts
     `string | RegExp | (url: string) => boolean` per entry; new
     `AuthAwareAllowlistEntry` exported type.
-  - **`@f8team/reel-themes`** — `f8-brand.css` opt-in layer for F8 orange
+  - **`@f8team/reel-themes`** - `f8-brand.css` opt-in layer for F8 orange
     branding on top of any base theme.
 
   ## Production robustness (patch + minor)
-  - **HLS** — listener-leak fix on per-segment XHRs; manifest-load timeout
+  - **HLS** - listener-leak fix on per-segment XHRs; manifest-load timeout
     (default 30s) so a stalled manifest doesn't pin the player in `loading`;
     non-fatal HTTP 4xx/5xx now surface as load errors; native fallback path
     cleans up listeners on early `detach()`.
-  - **YouTube** — bridges polled `getCurrentTime` / `getDuration` into the
+  - **YouTube** - bridges polled `getCurrentTime` / `getDuration` into the
     core store and event bus (seek bars and time-aware plugins now tick on
     YouTube sources); marks the underlying `<video>` via the
     `data-reel-yt-hidden` attribute instead of mutating inline styles
     (host CSS no longer fights the loader); warns once when the player's
     parent is `position: static`.
-  - **createPlayer** — autoplay / startTime no longer leak listeners across
+  - **createPlayer** - autoplay / startTime no longer leak listeners across
     re-attach cycles, and re-attach to an already-`ready` player now applies
     them synchronously instead of waiting for a transition that already fired.
-  - **plugin-keyboard** — fixes container-scope fallback; skips `contenteditable`
+  - **plugin-keyboard** - fixes container-scope fallback; skips `contenteditable`
     regions, `role="textbox"`, and IME composition (no more accidental Space
     toggles while typing in a rich-text editor).
-  - **plugin-resume-position** — SSR-safe (no-op when `window` is undefined);
+  - **plugin-resume-position** - SSR-safe (no-op when `window` is undefined);
     also saves on `pagehide` / `visibilitychange→hidden` for iOS Safari, plus
     periodic save while playing.
-  - **plugin-auth-aware** — emits a one-time console warning when a string
+  - **plugin-auth-aware** - emits a one-time console warning when a string
     allowlist entry ends with `.`, to surface a class of consumer mistakes
     (`"https://api-gateway."` literal vs `/^https:\/\/api-gateway\./` regex).
 

package/dist/index.cjs

@@ -113,16 +113,16 @@ function createPluginBus({ player, host }) {
     if (findIndex(plugin.name) >= 0) {
       throw new Error(`[@f8team/reel-core] plugin "${plugin.name}" is already registered`);
     }
-    let teardown = null;
+    let setupResult;
     try {
-      const result = plugin.setup(player, host);
-      teardown = typeof result === "function" ? result : null;
+      setupResult = plugin.setup(player, host);
     } catch (err) {
       throw new Error(
         `[@f8team/reel-core] plugin "${plugin.name}" setup threw: ${err.message}`,
         { cause: err }
       );
     }
+    const teardown = typeof setupResult === "function" ? setupResult : null;
     entries.push({ plugin, teardown });
   }
   function unregister(name) {
@@ -1210,6 +1210,10 @@ function createPlayer(options = {}, internal = {}) {
   let disposed = false;
   let initialOptionsApplied = false;
   let pendingPlay = false;
+  const YT_PLAYER_STATE_PLAYING = 1;
+  function getYouTubePlayer() {
+    return activeLoader?._instance?.() ?? null;
+  }
   const registry = createSourceRegistry();
   function emitUnauthorized(payload) {
     bus.emit("unauthorized", payload);
@@ -1263,6 +1267,20 @@ function createPlayer(options = {}, internal = {}) {
       onDuration: (duration) => {
         store.setState({ duration });
         bus.emit("durationchange", { duration });
+      },
+      onStateChange: (ytState) => {
+        if (ytState === "playing") {
+          bus.emit("play");
+          if (status !== "playing" && status !== "loading") dispatch({ type: "play" });
+        } else if (ytState === "paused") {
+          bus.emit("pause");
+          if (status === "playing") dispatch({ type: "pause" });
+        } else if (ytState === "ended") {
+          bus.emit("ended");
+          if (status !== "ended") dispatch({ type: "ended" });
+        } else if (ytState === "buffering") {
+          bus.emit("buffering", { isBuffering: true });
+        }
       }
     })
   );
@@ -1388,6 +1406,14 @@ function createPlayer(options = {}, internal = {}) {
   }
   function runMediaPlay() {
     if (!video) return;
+    const yt = getYouTubePlayer();
+    if (yt) {
+      try {
+        yt.playVideo();
+      } catch {
+      }
+      return;
+    }
     const result = video.play();
     if (result && typeof result.then === "function") {
       result.catch((err) => {
@@ -1400,6 +1426,14 @@ function createPlayer(options = {}, internal = {}) {
   }
   function runMediaPause() {
     if (!video) return;
+    const yt = getYouTubePlayer();
+    if (yt) {
+      try {
+        yt.pauseVideo();
+      } catch {
+      }
+      return;
+    }
     try {
       video.pause();
     } catch {
@@ -1407,6 +1441,20 @@ function createPlayer(options = {}, internal = {}) {
   }
   function runMediaSeek(seconds) {
     if (!video) return;
+    const yt = getYouTubePlayer();
+    if (yt) {
+      try {
+        yt.seekTo(seconds, true);
+        store.setState({ currentTime: seconds });
+        bus.emit("timeupdate", {
+          currentTime: seconds,
+          playedSeconds: seconds,
+          duration: store.getState().duration
+        });
+      } catch {
+      }
+      return;
+    }
     try {
       video.currentTime = seconds;
     } catch {
@@ -1436,6 +1484,7 @@ function createPlayer(options = {}, internal = {}) {
       bus.emit("durationchange", { duration });
     });
     on2("timeupdate", () => {
+      if (getYouTubePlayer()) return;
       const currentTime = target.currentTime;
       store.setState({ currentTime, buffered: bufferedToRanges(target.buffered) });
       bus.emit("timeupdate", {
@@ -1652,6 +1701,14 @@ function createPlayer(options = {}, internal = {}) {
   }
   function paused() {
     if (!video) return true;
+    const yt = getYouTubePlayer();
+    if (yt) {
+      try {
+        return yt.getPlayerState() !== YT_PLAYER_STATE_PLAYING;
+      } catch {
+        return true;
+      }
+    }
     return video.paused;
   }
   function seekTo(seconds) {
@@ -1659,6 +1716,20 @@ function createPlayer(options = {}, internal = {}) {
     if (!video) return;
     const duration = Number.isFinite(video.duration) ? video.duration : Number.POSITIVE_INFINITY;
     const clamped = Math.max(0, Math.min(seconds, duration));
+    const yt = getYouTubePlayer();
+    if (yt) {
+      try {
+        yt.seekTo(clamped, true);
+        store.setState({ currentTime: clamped });
+        bus.emit("timeupdate", {
+          currentTime: clamped,
+          playedSeconds: clamped,
+          duration: store.getState().duration
+        });
+      } catch {
+      }
+      return;
+    }
     video.currentTime = clamped;
   }
   function syncVolumeMutedStoreFromVideo() {