@codenkay/video-nsgplayer-core 1.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 3.0.0
+
+### Major Changes
+
+- Fix minor issues
+
+## 2.0.1
+
+- Auto-wire `AuthManager.getAccessToken()` as default `streaming.getKeyAccessToken` so AES `enc.key` can load with Bearer when no BFF key proxy is configured.
+- When `keyProxyUrlBuilder` returns 401/403/502/CORS (e.g. Cloudflare-blocked BFF), automatically fall back to browser Bearer `enc.key` fetch.
+- On Bearer `enc.key` fetch network/CORS failure, fall back to signed-query XHR (CDN hosts).
+
+## 2.0.0
+
+### Minor Changes
+
+- Add `@codenkay/video-nsgplayer-ui` control chrome package; emit timeupdate/progress and text/audio track Runtime APIs from core for host UI parity.
+
+## 1.1.0
+
+### Minor Changes
+
+- Emit `timeupdate` and `progress` from the mounted media element for host UI seek bars.
+- Add text/audio track Runtime API: `getTextTracks`, `getSelectedTextTrack`, `setTextTrack`, `getAudioTracks`, `getSelectedAudioTrack`, `setAudioTrack`, plus `texttrackchange` / `audiotrackchange` events.
+- Add `setFullscreenElement` for host chrome fullscreen targeting. Zoom remains UI-only (CSS transform).
+
 ## 1.0.0
 
 ### Major Changes

package/dist/index.cjs

@@ -212,7 +212,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.8";
+var PACKAGE_VERSION = "2.0.1";
 var DEFAULT_PLAYER_BEHAVIOR = {
   autoplay: true,
   startMuted: true,
@@ -981,9 +981,48 @@ function createAuthParamsLoader(HlsClass, store, options = {}) {
         const usingKeyProxy = Boolean(
           isKey && options.keyProxyUrlBuilder && options.videoId
         );
+        const signedKeyUrl = isKey ? rewriteHlsRequestUrl(originalUrl, store, {
+          ...options,
+          keyProxyUrlBuilder: void 0
+        }) : context.url;
         context.url = rewriteHlsRequestUrl(originalUrl, store, options);
         if (usingKeyProxy) {
-          this.inner.load(context, config, callbacks);
+          const accessToken = options.getKeyAccessToken?.() ?? null;
+          if (!accessToken) {
+            this.inner.load(context, config, callbacks);
+            return;
+          }
+          const proxyCallbacks = {
+            ...callbacks,
+            onError: (error, errContext, networkDetails, stats) => {
+              const code = error?.code;
+              const retryable = code === 0 || code === 502 || code === 403 || code === 401 || /Cloudflare|HTML|DOCTYPE|blocked/i.test(error?.text ?? "");
+              if (!retryable) {
+                callbacks.onError(error, errContext, networkDetails, stats);
+                return;
+              }
+              this.keyAbort?.abort();
+              this.keyAbort = new AbortController();
+              const bearerContext = { ...context, url: signedKeyUrl };
+              void loadEncryptionKeyWithFetch(
+                bearerContext,
+                callbacks,
+                accessToken,
+                this.keyAbort.signal
+              ).catch((fetchError) => {
+                callbacks.onError(
+                  {
+                    code: 0,
+                    text: fetchError instanceof Error ? fetchError.message : error.text || "enc.key proxy and Bearer fetch failed"
+                  },
+                  bearerContext,
+                  null,
+                  stats
+                );
+              });
+            }
+          };
+          this.inner.load(context, config, proxyCallbacks);
           return;
         }
         if (isKey && typeof options.getKeyAccessToken === "function") {
@@ -1001,6 +1040,10 @@ function createAuthParamsLoader(HlsClass, store, options = {}) {
             ).catch((error) => {
               const stats = createLoaderStats();
               const aborted = error instanceof DOMException && error.name === "AbortError";
+              if (!aborted && (error instanceof TypeError || error instanceof Error && /Failed to fetch|NetworkError|CORS/i.test(error.message))) {
+                this.inner.load(context, config, callbacks);
+                return;
+              }
               callbacks.onError(
                 {
                   code: 0,
@@ -1037,6 +1080,11 @@ var HlsEngine = class {
     this.mediaRecoveryCount = 0;
     this.qualities = [];
     this.qualitySelection = "auto";
+    this.textTracks = [];
+    this.textTrackSelection = "off";
+    this.audioTracks = [];
+    this.audioTrackSelection = 0;
+    this.nativeTextTrackCleanup = null;
   }
   async start() {
     const { videoEl, playbackUrl, startMuted, volume } = this.options;
@@ -1056,6 +1104,7 @@ var HlsEngine = class {
       this.options.callbacks.onSupportMode?.("native");
       videoEl.src = this.options.authParams.applyToUrl(playbackUrl);
       this.bindMediaEvents();
+      this.bindNativeTextTracks();
       this.options.callbacks.onStateChange?.("ready");
       await this.applyStartPositionAndAutoplay();
       return;
@@ -1099,9 +1148,19 @@ var HlsEngine = class {
         label: level.height != null && level.height > 0 ? `${level.height}p` : `Level ${index}`
       }));
       callbacks.onQualitiesChange?.(this.qualities);
+      this.syncHlsSubtitleTracks();
+      this.syncHlsAudioTracks();
       callbacks.onStateChange?.("ready");
       void this.applyStartPositionAndAutoplay();
     });
+    this.hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => {
+      if (this.destroyed) return;
+      this.syncHlsSubtitleTracks();
+    });
+    this.hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, () => {
+      if (this.destroyed) return;
+      this.syncHlsAudioTracks();
+    });
     this.hls.on(Hls.Events.ERROR, (_event, data) => {
       this.handleHlsError(Hls, data);
     });
@@ -1227,12 +1286,120 @@ var HlsEngine = class {
   getQualities() {
     return this.qualities;
   }
+  getTextTracks() {
+    return this.textTracks;
+  }
+  getTextTrackSelection() {
+    return this.textTrackSelection;
+  }
+  setTextTrack(selection) {
+    if (this.destroyed) return;
+    this.textTrackSelection = selection;
+    this.options.callbacks.onTextTrackSelectionChange?.(selection);
+    if (this.supportMode === "hls.js" && this.hls) {
+      this.hls.subtitleDisplay = selection !== "off";
+      this.hls.subtitleTrack = selection === "off" ? -1 : selection;
+      return;
+    }
+    if (this.supportMode === "native" && this.options.videoEl) {
+      const tracks = this.options.videoEl.textTracks;
+      for (let i = 0; i < tracks.length; i += 1) {
+        const track = tracks[i];
+        track.mode = selection !== "off" && i === selection ? "showing" : "disabled";
+      }
+    }
+  }
+  getAudioTracks() {
+    return this.audioTracks;
+  }
+  getAudioTrackSelection() {
+    return this.audioTrackSelection;
+  }
+  setAudioTrack(index) {
+    if (this.destroyed) return;
+    if (!Number.isInteger(index) || index < 0 || this.audioTracks.length > 0 && index >= this.audioTracks.length) {
+      return;
+    }
+    this.audioTrackSelection = index;
+    this.options.callbacks.onAudioTrackSelectionChange?.(index);
+    if (this.supportMode === "hls.js" && this.hls) {
+      this.hls.audioTrack = index;
+      return;
+    }
+    if (this.supportMode === "native" && this.options.videoEl) {
+      const audioTracks = this.options.videoEl.audioTracks;
+      if (audioTracks && audioTracks.length > 0) {
+        for (let i = 0; i < audioTracks.length; i += 1) {
+          audioTracks[i].enabled = i === index;
+        }
+      }
+    }
+  }
   getSupportMode() {
     return this.supportMode;
   }
+  syncHlsSubtitleTracks() {
+    if (!this.hls) return;
+    const tracks = (this.hls.subtitleTracks ?? []).map(
+      (track, index) => ({
+        index,
+        id: String(track.id ?? index),
+        label: track.name || track.lang || `Subtitles ${index + 1}`,
+        language: track.lang
+      })
+    );
+    this.textTracks = tracks;
+    this.options.callbacks.onTextTracksChange?.(tracks);
+  }
+  syncHlsAudioTracks() {
+    if (!this.hls) return;
+    const tracks = (this.hls.audioTracks ?? []).map(
+      (track, index) => ({
+        index,
+        id: String(track.id ?? index),
+        label: track.name || track.lang || `Audio ${index + 1}`,
+        language: track.lang
+      })
+    );
+    this.audioTracks = tracks;
+    this.options.callbacks.onAudioTracksChange?.(tracks);
+    if (tracks.length > 0) {
+      this.audioTrackSelection = 0;
+      this.options.callbacks.onAudioTrackSelectionChange?.(0);
+    }
+  }
+  bindNativeTextTracks() {
+    const { videoEl } = this.options;
+    const syncFromElement = () => {
+      if (this.destroyed || this.textTracks.length > 0) return;
+      const list = videoEl.textTracks;
+      const tracks = [];
+      for (let i = 0; i < list.length; i += 1) {
+        const track = list[i];
+        if (track.kind !== "subtitles" && track.kind !== "captions") continue;
+        tracks.push({
+          index: tracks.length,
+          id: track.id || `native-${tracks.length}`,
+          label: track.label || track.language || `Track ${tracks.length + 1}`,
+          language: track.language || void 0
+        });
+      }
+      if (tracks.length === 0) return;
+      this.textTracks = tracks;
+      this.options.callbacks.onTextTracksChange?.(tracks);
+    };
+    const textTracks = videoEl.textTracks;
+    textTracks.addEventListener?.("addtrack", syncFromElement);
+    syncFromElement();
+    this.nativeTextTrackCleanup = () => {
+      textTracks.removeEventListener?.("addtrack", syncFromElement);
+    };
+  }
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    this.nativeTextTrackCleanup?.();
+    this.nativeTextTrackCleanup = null;
     this.hls?.destroy();
     this.hls = null;
     const { videoEl } = this.options;
@@ -1289,11 +1456,40 @@ function createVideoPlayer(options) {
   let refreshManager = null;
   let fullscreenEl = null;
   let isLiveStream = false;
+  let mediaCleanup = null;
   const setState = (next) => {
     if (destroyed && next !== "destroyed") return;
     state = next;
     events.emit("statechange", { state: next });
   };
+  const bindMediaProgressEvents = (el) => {
+    mediaCleanup?.();
+    const onTimeUpdate = () => {
+      if (destroyed) return;
+      events.emit("timeupdate", {
+        currentTime: el.currentTime,
+        duration: Number.isFinite(el.duration) ? el.duration : 0
+      });
+    };
+    const onProgress = () => {
+      if (destroyed) return;
+      let bufferedEnd = 0;
+      try {
+        if (el.buffered.length > 0) {
+          bufferedEnd = el.buffered.end(el.buffered.length - 1);
+        }
+      } catch {
+        bufferedEnd = 0;
+      }
+      events.emit("progress", { bufferedEnd });
+    };
+    el.addEventListener("timeupdate", onTimeUpdate);
+    el.addEventListener("progress", onProgress);
+    mediaCleanup = () => {
+      el.removeEventListener("timeupdate", onTimeUpdate);
+      el.removeEventListener("progress", onProgress);
+    };
+  };
   const authManager = new AuthManager(
     options.auth,
     options.auth?.refreshBeforeExpiryMs ?? 6e4,
@@ -1344,6 +1540,7 @@ function createVideoPlayer(options) {
         isLiveStream = Boolean(source.live);
       }
       const el = ensureVideoElement();
+      bindMediaProgressEvents(el);
       engine?.destroy();
       engine = new HlsEngine({
         videoEl: el,
@@ -1355,12 +1552,11 @@ function createVideoPlayer(options) {
         volume: config.player.volume,
         videoId: options.videoId,
         keyProxyUrlBuilder: config.streaming.keyProxyUrlBuilder,
-        // Optional: browser Bearer for Video API–origin enc.key (CORS-dependent).
-        // CDN keys use signed query via the auth loader (no Bearer) — same as
-        // segments. Apps can pass getKeyAccessToken or rely on keyProxyUrlBuilder.
-        // When unset, defaults to AuthManager token only if explicitly requested
-        // via streaming.getKeyAccessToken; otherwise query-signed XHR.
-        getKeyAccessToken: config.streaming.getKeyAccessToken,
+        // Enterprise AES key auth:
+        // 1) keyProxyUrlBuilder (same-origin BFF) when configured
+        // 2) else getKeyAccessToken / AuthManager Bearer via browser fetch
+        // 3) else signed query + XHR (CDN hosts)
+        getKeyAccessToken: config.streaming.getKeyAccessToken ?? (() => authManager.getAccessToken()),
         hlsConfig: config.streaming.hls,
         logger,
         callbacks: {
@@ -1402,6 +1598,30 @@ function createVideoPlayer(options) {
               label: typeof selection === "number" ? level?.label : "auto"
             });
           },
+          onTextTracksChange: (tracks) => {
+            events.emit("texttrackchange", {
+              tracks,
+              selection: engine?.getTextTrackSelection() ?? "off"
+            });
+          },
+          onTextTrackSelectionChange: (selection) => {
+            events.emit("texttrackchange", {
+              tracks: engine?.getTextTracks() ?? [],
+              selection
+            });
+          },
+          onAudioTracksChange: (tracks) => {
+            events.emit("audiotrackchange", {
+              tracks,
+              selection: engine?.getAudioTrackSelection() ?? 0
+            });
+          },
+          onAudioTrackSelectionChange: (selection) => {
+            events.emit("audiotrackchange", {
+              tracks: engine?.getAudioTracks() ?? [],
+              selection
+            });
+          },
           onEnded: () => events.emit("ended")
         }
       });
@@ -1560,6 +1780,24 @@ function createVideoPlayer(options) {
     getAvailableQualities() {
       return engine?.getQualities() ?? [];
     },
+    getTextTracks() {
+      return engine?.getTextTracks() ?? [];
+    },
+    getSelectedTextTrack() {
+      return engine?.getTextTrackSelection() ?? "off";
+    },
+    setTextTrack(selection) {
+      engine?.setTextTrack(selection);
+    },
+    getAudioTracks() {
+      return engine?.getAudioTracks() ?? [];
+    },
+    getSelectedAudioTrack() {
+      return engine?.getAudioTrackSelection() ?? 0;
+    },
+    setAudioTrack(index) {
+      engine?.setAudioTrack(index);
+    },
     async enterFullscreen() {
       const target = fullscreenEl ?? videoEl?.parentElement ?? videoEl;
       if (target && "requestFullscreen" in target) {
@@ -1576,6 +1814,9 @@ function createVideoPlayer(options) {
     isFullscreen() {
       return Boolean(document.fullscreenElement);
     },
+    setFullscreenElement(el) {
+      fullscreenEl = el;
+    },
     async reload() {
       refreshManager?.stop();
       engine?.destroy();
@@ -1584,6 +1825,8 @@ function createVideoPlayer(options) {
     destroy() {
       if (destroyed) return;
       destroyed = true;
+      mediaCleanup?.();
+      mediaCleanup = null;
       refreshManager?.stop();
       refreshManager = null;
       engine?.destroy();
@@ -1631,7 +1874,7 @@ function createVideoPlayer(options) {
           engine: "hls",
           hls: { ...config.streaming.hls, ...partial?.streaming?.hls },
           keyProxyUrlBuilder: partial?.streaming?.keyProxyUrlBuilder ?? config.streaming.keyProxyUrlBuilder,
-          getKeyAccessToken: partial?.streaming?.getKeyAccessToken ?? config.streaming.getKeyAccessToken
+          getKeyAccessToken: partial?.streaming?.getKeyAccessToken ?? config.streaming.getKeyAccessToken ?? (() => authManager.getAccessToken())
         },
         logging: { ...config.logging, ...partial?.logging },
         debug: { ...config.debug, ...partial?.debug },