@codenkay/video-nsgplayer-core 0.1.2 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.1.5
+
+- Add `streaming.getKeyAccessToken` for browser-direct AES `enc.key` loads with `Authorization: Bearer` (needed when Cloudflare blocks server/BFF fetches to Appextech).
+- Clearer key-load guidance when neither key proxy nor browser Bearer is configured.
+
+## 0.1.4
+
+- Fix stall after segments return 200: wait for `MANIFEST_PARSED` before autoplay/seek.
+- Only trigger signed-URL auth recovery on HTTP 401/403 (not every network blip).
+- Require/surface `streaming.keyProxyUrlBuilder` when AES `enc.key` load fails (Appextech VOD needs same-origin BFF + API Bearer).
+- Clear sticky `renewing` state after successful credential refresh.
+
+## 0.1.3
+
+- Fix CDN **403 on child HLS playlists/segments** (`stream_N.m3u8`, `.ts`, keys): hls.js now uses an auth-params loader that re-applies signed `token`/`expires` query params on every request, not only the master playlist.
+- Preserve optional `streaming.keyProxyUrlBuilder` through config merge.
+
 ## 0.1.2
 
 - Fix `InternalError: too much recursion` / stack overflow in `assertNoSecretsInConfig` when `createVideoPlayer` options include an `HTMLVideoElement` mount or credential callbacks.

package/dist/index.cjs

@@ -46,6 +46,7 @@ __export(index_exports, {
   RefreshManager: () => RefreshManager,
   SECRET_SCAN_MAX_DEPTH: () => SECRET_SCAN_MAX_DEPTH,
   assertNoSecretsInConfig: () => assertNoSecretsInConfig,
+  createAuthParamsLoader: () => createAuthParamsLoader,
   createPlayerError: () => createPlayerError,
   createVideoPlayer: () => createVideoPlayer,
   getLiveEdgeTime: () => getLiveEdgeTime,
@@ -55,6 +56,7 @@ __export(index_exports, {
   redactObject: () => redactObject,
   redactSensitive: () => redactSensitive,
   redactValue: () => redactValue,
+  rewriteHlsRequestUrl: () => rewriteHlsRequestUrl,
   seekToLiveEdge: () => seekToLiveEdge,
   themeToCssVars: () => themeToCssVars
 });
@@ -208,7 +210,7 @@ var AuthManager = class {
 
 // src/config/defaults.ts
 var PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
-var PACKAGE_VERSION = "0.1.2";
+var PACKAGE_VERSION = "0.1.5";
 var DEFAULT_PLAYER_BEHAVIOR = {
   autoplay: true,
   startMuted: true,
@@ -301,7 +303,8 @@ var SKIP_DEEP_SCAN_KEYS = /* @__PURE__ */ new Set([
   "gettoken",
   "getsource",
   "refreshsource",
-  "keyproxyurlbuilder"
+  "keyproxyurlbuilder",
+  "getkeyaccesstoken"
 ]);
 var SECRET_SCAN_MAX_DEPTH = 32;
 function isPlainObject(value) {
@@ -384,7 +387,9 @@ function mergePlayerConfig(partial) {
       hls: {
         ...DEFAULT_PLAYER_CONFIG.streaming.hls,
         ...partial?.streaming?.hls
-      }
+      },
+      keyProxyUrlBuilder: partial?.streaming?.keyProxyUrlBuilder,
+      getKeyAccessToken: partial?.streaming?.getKeyAccessToken
     },
     logging: { ...DEFAULT_PLAYER_CONFIG.logging, ...partial?.logging },
     debug: { ...DEFAULT_PLAYER_CONFIG.debug, ...partial?.debug },
@@ -560,11 +565,25 @@ var AuthParamsStore = class {
     });
     return out;
   }
+  /** True when at least one auth query param is stored. */
+  hasParams() {
+    return [...this.params.keys()].length > 0;
+  }
+  toString() {
+    return this.params.toString();
+  }
   update(next) {
     this.params = next instanceof URLSearchParams ? new URLSearchParams(next) : new URLSearchParams(next);
   }
+  /**
+   * Merges current auth params onto a target URL, preserving unrelated query keys.
+   * Critical for child HLS playlists/segments that omit signed query params.
+   */
   applyToUrl(rawUrl, baseOrigin) {
-    const target = new URL(rawUrl, baseOrigin ?? (typeof location !== "undefined" ? location.origin : "http://localhost"));
+    const target = new URL(
+      rawUrl,
+      baseOrigin ?? (typeof location !== "undefined" ? location.origin : "http://localhost")
+    );
     this.params.forEach((value, key) => {
       target.searchParams.set(key, value);
     });
@@ -799,7 +818,63 @@ function seekToLiveEdge(media, options) {
   return { moved: true, edge };
 }
 
+// src/streaming/authParamsLoader.ts
+var ENC_KEY_PATH_RE = /enc\.key$/i;
+function isEncryptionKeyUrl(rawUrl, baseOrigin = typeof location !== "undefined" ? location.origin : "http://localhost") {
+  try {
+    return ENC_KEY_PATH_RE.test(new URL(rawUrl, baseOrigin).pathname);
+  } catch {
+    return /enc\.key/i.test(rawUrl);
+  }
+}
+function rewriteHlsRequestUrl(rawUrl, store, options = {}, baseOrigin = typeof location !== "undefined" ? location.origin : "http://localhost") {
+  if (!rawUrl) return rawUrl;
+  const parsed = new URL(rawUrl, baseOrigin);
+  const isKey = ENC_KEY_PATH_RE.test(parsed.pathname);
+  if (isKey && options.keyProxyUrlBuilder && options.videoId) {
+    const snapshot = store.toRecord();
+    return options.keyProxyUrlBuilder({
+      videoId: options.videoId,
+      keyUrl: parsed.toString(),
+      token: snapshot.token,
+      expires: snapshot.expires,
+      username: snapshot.username,
+      mobile: snapshot.mobile
+    });
+  }
+  if (!store.hasParams()) return parsed.toString();
+  return store.applyToUrl(rawUrl, baseOrigin);
+}
+function createAuthParamsLoader(HlsClass, store, options = {}) {
+  const BaseLoader = HlsClass.DefaultConfig.loader;
+  return class AuthParamsLoader extends BaseLoader {
+    load(context, config, callbacks) {
+      if (context.url) {
+        try {
+          const originalUrl = context.url;
+          const isKey = isEncryptionKeyUrl(originalUrl);
+          context.url = rewriteHlsRequestUrl(originalUrl, store, options);
+          if (isKey && !options.keyProxyUrlBuilder && options.getKeyAccessToken) {
+            const accessToken = options.getKeyAccessToken();
+            if (accessToken) {
+              context.headers = {
+                ...context.headers ?? {},
+                Authorization: `Bearer ${accessToken}`
+              };
+            }
+          }
+        } catch {
+        }
+      }
+      super.load(context, config, callbacks);
+    }
+  };
+}
+
 // src/streaming/HlsEngine.ts
+function isAuthHttpStatus(code) {
+  return code === 401 || code === 403;
+}
 var HlsEngine = class {
   constructor(options) {
     this.options = options;
@@ -812,58 +887,58 @@ var HlsEngine = class {
     this.qualitySelection = "auto";
   }
   async start() {
-    const { videoEl, playbackUrl, autoplay, startMuted, volume, startPosition } = this.options;
+    const { videoEl, playbackUrl, startMuted, volume } = this.options;
     videoEl.muted = startMuted;
-    if (typeof volume === "number") videoEl.volume = Math.min(1, Math.max(0, volume));
+    if (typeof volume === "number") {
+      videoEl.volume = Math.min(1, Math.max(0, volume));
+    }
     const Hls = (await import("hls.js")).default;
     if (Hls.isSupported()) {
       this.supportMode = "hls.js";
       this.options.callbacks.onSupportMode?.("hls.js");
       await this.startWithHlsJs(Hls, playbackUrl);
-    } else if (videoEl.canPlayType("application/vnd.apple.mpegurl")) {
+      return;
+    }
+    if (videoEl.canPlayType("application/vnd.apple.mpegurl")) {
       this.supportMode = "native";
       this.options.callbacks.onSupportMode?.("native");
       videoEl.src = this.options.authParams.applyToUrl(playbackUrl);
       this.bindMediaEvents();
       this.options.callbacks.onStateChange?.("ready");
-    } else {
-      this.supportMode = "unsupported";
-      this.options.callbacks.onSupportMode?.("unsupported");
-      this.options.callbacks.onFatalError?.("HLS is not supported in this browser");
+      await this.applyStartPositionAndAutoplay();
       return;
     }
-    if (typeof startPosition === "number" && startPosition > 0) {
-      videoEl.currentTime = startPosition;
-    }
-    if (autoplay) {
-      try {
-        await videoEl.play();
-      } catch {
-        if (!videoEl.muted) {
-          videoEl.muted = true;
-          try {
-            await videoEl.play();
-          } catch {
-            this.options.logger.warn("Autoplay blocked");
-          }
-        }
-      }
-    }
+    this.supportMode = "unsupported";
+    this.options.callbacks.onSupportMode?.("unsupported");
+    this.options.callbacks.onFatalError?.(
+      "HLS is not supported in this browser"
+    );
   }
   async startWithHlsJs(Hls, playbackUrl) {
-    const { videoEl, authParams, hlsConfig, callbacks } = this.options;
+    const {
+      videoEl,
+      authParams,
+      hlsConfig,
+      callbacks,
+      videoId,
+      keyProxyUrlBuilder,
+      getKeyAccessToken
+    } = this.options;
+    const loader = createAuthParamsLoader(Hls, authParams, {
+      videoId,
+      keyProxyUrlBuilder,
+      getKeyAccessToken
+    });
     this.hls = new Hls({
       enableWorker: hlsConfig.enableWorker,
       lowLatencyMode: hlsConfig.lowLatencyMode,
       backBufferLength: hlsConfig.backBufferLength,
-      xhrSetup: (xhr, url) => {
-        void xhr;
-        void url;
-      }
+      loader
     });
     this.hls.attachMedia(videoEl);
     this.hls.loadSource(authParams.applyToUrl(playbackUrl));
     this.hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+      if (this.destroyed) return;
       this.qualities = (data.levels ?? []).map((level, index) => ({
         index,
         height: level.height ?? 0,
@@ -873,42 +948,95 @@ var HlsEngine = class {
       }));
       callbacks.onQualitiesChange?.(this.qualities);
       callbacks.onStateChange?.("ready");
+      void this.applyStartPositionAndAutoplay();
     });
     this.hls.on(Hls.Events.ERROR, (_event, data) => {
-      if (!data.fatal) {
-        if (data.type === Hls.ErrorTypes.NETWORK_ERROR && (data.details === Hls.ErrorDetails.FRAG_LOAD_ERROR || data.details === Hls.ErrorDetails.LEVEL_LOAD_ERROR || data.details === Hls.ErrorDetails.KEY_LOAD_ERROR)) {
-          callbacks.onAuthRecoveryNeeded?.(
-            data.details === Hls.ErrorDetails.KEY_LOAD_ERROR ? "key_error" : data.details === Hls.ErrorDetails.LEVEL_LOAD_ERROR ? "level_error" : "frag_error"
-          );
+      this.handleHlsError(Hls, data);
+    });
+    this.bindMediaEvents();
+  }
+  handleHlsError(Hls, data) {
+    if (this.destroyed) return;
+    const { callbacks, hlsConfig, keyProxyUrlBuilder, getKeyAccessToken } = this.options;
+    const status = data.response?.code;
+    if (data.details === Hls.ErrorDetails.KEY_LOAD_ERROR && !keyProxyUrlBuilder && !getKeyAccessToken) {
+      callbacks.onFatalError?.(
+        "Encryption key load failed. Configure streaming.getKeyAccessToken (browser Bearer) or streaming.keyProxyUrlBuilder (Cloudflare-allowlisted BFF) for Appextech AES-encrypted HLS."
+      );
+      return;
+    }
+    const authFailure = isAuthHttpStatus(status) || data.details === Hls.ErrorDetails.KEY_LOAD_ERROR && (status === void 0 || status === 0 || isAuthHttpStatus(status));
+    if (!data.fatal) {
+      if (authFailure && data.type === Hls.ErrorTypes.NETWORK_ERROR && (data.details === Hls.ErrorDetails.FRAG_LOAD_ERROR || data.details === Hls.ErrorDetails.LEVEL_LOAD_ERROR || data.details === Hls.ErrorDetails.KEY_LOAD_ERROR)) {
+        callbacks.onAuthRecoveryNeeded?.(
+          data.details === Hls.ErrorDetails.KEY_LOAD_ERROR ? "key_error" : data.details === Hls.ErrorDetails.LEVEL_LOAD_ERROR ? "level_error" : "frag_error"
+        );
+      }
+      return;
+    }
+    if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+      this.networkRecoveryCount += 1;
+      if (this.networkRecoveryCount <= hlsConfig.fatalRecoveryLimit) {
+        if (authFailure) {
+          callbacks.onAuthRecoveryNeeded?.("fatal_network");
         }
+        this.hls?.startLoad();
         return;
       }
-      if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
-        this.networkRecoveryCount += 1;
-        if (this.networkRecoveryCount <= hlsConfig.fatalRecoveryLimit) {
-          callbacks.onAuthRecoveryNeeded?.("fatal_network");
-          this.hls?.startLoad();
-          return;
+    }
+    if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+      this.mediaRecoveryCount += 1;
+      if (this.mediaRecoveryCount <= hlsConfig.fatalRecoveryLimit) {
+        this.hls?.recoverMediaError();
+        return;
+      }
+    }
+    callbacks.onFatalError?.(data.details || "Fatal HLS error");
+  }
+  async applyStartPositionAndAutoplay() {
+    if (this.destroyed) return;
+    const { videoEl, autoplay, startPosition } = this.options;
+    if (typeof startPosition === "number" && startPosition > 0) {
+      const seek = () => {
+        if (this.destroyed) return;
+        try {
+          videoEl.currentTime = startPosition;
+        } catch {
         }
+      };
+      if (videoEl.seekable.length > 0) {
+        seek();
+      } else {
+        videoEl.addEventListener("loadedmetadata", seek, { once: true });
       }
-      if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
-        this.mediaRecoveryCount += 1;
-        if (this.mediaRecoveryCount <= hlsConfig.fatalRecoveryLimit) {
-          this.hls?.recoverMediaError();
-          return;
+    }
+    if (!autoplay) return;
+    try {
+      await videoEl.play();
+    } catch {
+      if (!videoEl.muted) {
+        videoEl.muted = true;
+        try {
+          await videoEl.play();
+        } catch {
+          this.options.logger.warn("Autoplay blocked");
         }
       }
-      callbacks.onFatalError?.(data.details || "Fatal HLS error");
-    });
-    this.bindMediaEvents();
+    }
   }
   bindMediaEvents() {
     const { videoEl, callbacks } = this.options;
-    videoEl.addEventListener("playing", () => callbacks.onStateChange?.("playing"));
+    videoEl.addEventListener(
+      "playing",
+      () => callbacks.onStateChange?.("playing")
+    );
     videoEl.addEventListener("pause", () => {
       if (!videoEl.ended) callbacks.onStateChange?.("paused");
     });
-    videoEl.addEventListener("waiting", () => callbacks.onStateChange?.("buffering"));
+    videoEl.addEventListener(
+      "waiting",
+      () => callbacks.onStateChange?.("buffering")
+    );
     videoEl.addEventListener("ended", () => {
       callbacks.onStateChange?.("ended");
       callbacks.onEnded?.();
@@ -926,6 +1054,7 @@ var HlsEngine = class {
     }
   }
   resumeAfterAuthRenew() {
+    this.networkRecoveryCount = 0;
     this.hls?.startLoad();
     this.updateAuthParams();
   }
@@ -1067,6 +1196,9 @@ function createVideoPlayer(options) {
         startMuted: config.player.startMuted,
         startPosition: config.player.startPosition,
         volume: config.player.volume,
+        videoId: options.videoId,
+        keyProxyUrlBuilder: config.streaming.keyProxyUrlBuilder,
+        getKeyAccessToken: config.streaming.getKeyAccessToken,
         hlsConfig: config.streaming.hls,
         logger,
         callbacks: {
@@ -1127,6 +1259,14 @@ function createVideoPlayer(options) {
           onRenewing: () => setState("renewing"),
           onRenewed: (nextExpiresAt) => {
             engine?.resumeAfterAuthRenew();
+            if (!destroyed) {
+              const el2 = videoEl;
+              if (el2 && !el2.paused && !el2.ended) {
+                setState("playing");
+              } else {
+                setState("ready");
+              }
+            }
             events.emit("tokenrefresh", { expiresAt: nextExpiresAt });
             events.emit("sourcechange", { expiresAt: nextExpiresAt });
           },
@@ -1327,7 +1467,9 @@ function createVideoPlayer(options) {
         watermark: { ...config.watermark, ...partial?.watermark },
         streaming: {
           engine: "hls",
-          hls: { ...config.streaming.hls, ...partial?.streaming?.hls }
+          hls: { ...config.streaming.hls, ...partial?.streaming?.hls },
+          keyProxyUrlBuilder: partial?.streaming?.keyProxyUrlBuilder ?? config.streaming.keyProxyUrlBuilder,
+          getKeyAccessToken: partial?.streaming?.getKeyAccessToken ?? config.streaming.getKeyAccessToken
         },
         logging: { ...config.logging, ...partial?.logging },
         debug: { ...config.debug, ...partial?.debug },
@@ -1366,6 +1508,7 @@ function createVideoPlayer(options) {
   RefreshManager,
   SECRET_SCAN_MAX_DEPTH,
   assertNoSecretsInConfig,
+  createAuthParamsLoader,
   createPlayerError,
   createVideoPlayer,
   getLiveEdgeTime,
@@ -1375,6 +1518,7 @@ function createVideoPlayer(options) {
   redactObject,
   redactSensitive,
   redactValue,
+  rewriteHlsRequestUrl,
   seekToLiveEdge,
   themeToCssVars
 });