@codenkay/video-nsgplayer-core 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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

@@ -1037,6 +1037,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 +1061,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 +1105,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 +1243,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 +1413,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 +1497,7 @@ function createVideoPlayer(options) {
         isLiveStream = Boolean(source.live);
       }
       const el = ensureVideoElement();
+      bindMediaProgressEvents(el);
       engine?.destroy();
       engine = new HlsEngine({
         videoEl: el,
@@ -1402,6 +1556,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 +1738,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 +1772,9 @@ function createVideoPlayer(options) {
     isFullscreen() {
       return Boolean(document.fullscreenElement);
     },
+    setFullscreenElement(el) {
+      fullscreenEl = el;
+    },
     async reload() {
       refreshManager?.stop();
       engine?.destroy();
@@ -1584,6 +1783,8 @@ function createVideoPlayer(options) {
     destroy() {
       if (destroyed) return;
       destroyed = true;
+      mediaCleanup?.();
+      mediaCleanup = null;
       refreshManager?.stop();
       refreshManager = null;
       engine?.destroy();