@shortkitsdk/web 0.3.1 → 0.3.2

package/dist/shortkit.cjs

@@ -33544,16 +33544,35 @@ class PlayerPool {
     player._skCurrentUrl = streamingUrl;
   }
   /**
-   * Promote a preload player to active: raise buffer limits and uncap ABR.
-   * Safe to call even if the HLS instance was already created with active config.
+   * Promote a preload player to active: raise buffer limits, uncap ABR, and
+   * force an immediate quality upgrade.
+   *
+   * Preload streams start at level 0 (lowest rendition) to conserve bandwidth.
+   * When attachStream() is called again with isActive=true for the same URL it
+   * early-returns, so the HLS instance keeps its startLevel:0 config. The
+   * already-buffered low-quality segments play through before any higher-quality
+   * segments arrive — causing a visible low-res start even on fast connections.
+   *
+   * Fix: lock HLS to the highest level, then seek-in-place to flush the
+   * low-quality buffer so the player immediately re-fetches at high quality.
+   * Re-enable ABR after a few seconds so slow connections self-correct.
    */
   promoteToActive(itemId) {
     const hls = this.hlsInstances.get(itemId);
-    if (hls) {
-      hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
-      hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
-      hls.autoLevelCapping = -1;
-      hls.nextAutoLevel = -1;
+    if (!hls) return;
+    hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+    hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+    hls.autoLevelCapping = -1;
+    const top = hls.levels ? hls.levels.length - 1 : -1;
+    if (top > 0 && hls.currentLevel < top) {
+      hls.currentLevel = top;
+      const player = this.assignments.get(itemId);
+      if (player) {
+        player.currentTime = player.currentTime;
+      }
+      setTimeout(() => {
+        if (!hls.destroyed) hls.currentLevel = -1;
+      }, 4e3);
     }
   }
   /** Pause, destroy HLS, and remove player from DOM and pool tracking. */
@@ -34586,6 +34605,7 @@ class EmbeddedFeedManager {
     this._setupScrollEnd();
     this._setupVisibilityHandler();
     this._setupCellHeightObserver();
+    this._setupDebugPanel();
     if (startIndex > 0 && startIndex < items.length) {
       const targetEl = this.itemEls.get(items[startIndex].id);
       if (targetEl) targetEl.scrollIntoView({ behavior: "instant", block: "start" });
@@ -34608,6 +34628,11 @@ class EmbeddedFeedManager {
       this._resizeObserver = null;
     }
     if (this._visHandler) document.removeEventListener("visibilitychange", this._visHandler);
+    if (this._debugKeyHandler) document.removeEventListener("keydown", this._debugKeyHandler);
+    if (this._debugPanel) {
+      this._debugPanel.remove();
+      this._debugPanel = null;
+    }
     this.container.innerHTML = "";
     this.itemEls.clear();
     this.items = [];
@@ -34941,12 +34966,55 @@ class EmbeddedFeedManager {
     this._stopTimeLoop(id);
     this._detachOverlay(id);
   }
+  // --- Debug panel (toggle with 'D' key) ---
+  _setupDebugPanel() {
+    const panel = document.createElement("div");
+    panel.id = "sk-debug-panel";
+    panel.style.cssText = "position:fixed;top:12px;right:12px;z-index:99999;background:rgba(0,0,0,.85);color:#0f0;font:12px/1.5 monospace;padding:10px 14px;border-radius:8px;pointer-events:none;display:none;min-width:220px;";
+    document.body.appendChild(panel);
+    this._debugPanel = panel;
+    this._debugVisible = false;
+    this._debugKeyHandler = (e) => {
+      if (e.key === "d" || e.key === "D") {
+        this._debugVisible = !this._debugVisible;
+        panel.style.display = this._debugVisible ? "block" : "none";
+      }
+    };
+    document.addEventListener("keydown", this._debugKeyHandler);
+  }
+  _updateDebugPanel() {
+    if (!this._debugVisible || !this._debugPanel) return;
+    const hls = this.pool.hlsInstances.get(this.activeItemId);
+    if (!hls || !hls.levels || !hls.levels.length) {
+      this._debugPanel.innerHTML = "HLS: no levels loaded";
+      return;
+    }
+    const level = hls.levels[hls.currentLevel] || {};
+    const bw = hls.bandwidthEstimate ? (hls.bandwidthEstimate / 1e6).toFixed(2) : "?";
+    const lines = [
+      `<b style="color:#fff">HLS Debug</b>`,
+      `Level: ${hls.currentLevel} / ${hls.levels.length - 1}`,
+      `Resolution: ${level.width || "?"}x${level.height || "?"}`,
+      `Bitrate: ${level.bitrate ? (level.bitrate / 1e3).toFixed(0) + " kbps" : "?"}`,
+      `BW estimate: ${bw} Mbps`,
+      `Auto cap: ${hls.autoLevelCapping}`,
+      `Next level: ${hls.nextLevel}`,
+      `<span style="color:#888">Levels:</span>`
+    ];
+    for (let i = 0; i < hls.levels.length; i++) {
+      const l = hls.levels[i];
+      const marker = i === hls.currentLevel ? ' <b style="color:#0ff">◀</b>' : "";
+      lines.push(`  ${i}: ${l.width}x${l.height} @ ${(l.bitrate / 1e3).toFixed(0)}k${marker}`);
+    }
+    this._debugPanel.innerHTML = lines.join("<br>");
+  }
   // --- Time loop (state emission only, no DOM updates) ---
   _startTimeLoop(id, el, player) {
     this._stopTimeLoop(id);
     const tick = () => {
       if (this._destroyed) return;
       if (!player || player.paused) {
+        this._updateDebugPanel();
         this.rafIds.set(id, requestAnimationFrame(tick));
         return;
       }
@@ -34972,6 +35040,7 @@ class EmbeddedFeedManager {
         player.play().catch(() => {
         });
       }
+      this._updateDebugPanel();
       this.rafIds.set(id, requestAnimationFrame(tick));
     };
     this.rafIds.set(id, requestAnimationFrame(tick));
@@ -36037,11 +36106,20 @@ class WidgetPlayerPool {
   }
   promoteToActive(itemId) {
     const hls = this.hlsInstances.get(itemId);
-    if (hls) {
-      hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
-      hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
-      hls.autoLevelCapping = -1;
-      hls.nextAutoLevel = -1;
+    if (!hls) return;
+    hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+    hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+    hls.autoLevelCapping = -1;
+    const top = hls.levels ? hls.levels.length - 1 : -1;
+    if (top > 0 && hls.currentLevel < top) {
+      hls.currentLevel = top;
+      const player = this.assignments.get(itemId);
+      if (player) {
+        player.currentTime = player.currentTime;
+      }
+      setTimeout(() => {
+        if (!hls.destroyed) hls.currentLevel = -1;
+      }, 4e3);
     }
   }
   _destroyHls(itemId) {

package/dist/shortkit.js

@@ -33546,16 +33546,35 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       player._skCurrentUrl = streamingUrl;
     }
     /**
-     * Promote a preload player to active: raise buffer limits and uncap ABR.
-     * Safe to call even if the HLS instance was already created with active config.
+     * Promote a preload player to active: raise buffer limits, uncap ABR, and
+     * force an immediate quality upgrade.
+     *
+     * Preload streams start at level 0 (lowest rendition) to conserve bandwidth.
+     * When attachStream() is called again with isActive=true for the same URL it
+     * early-returns, so the HLS instance keeps its startLevel:0 config. The
+     * already-buffered low-quality segments play through before any higher-quality
+     * segments arrive — causing a visible low-res start even on fast connections.
+     *
+     * Fix: lock HLS to the highest level, then seek-in-place to flush the
+     * low-quality buffer so the player immediately re-fetches at high quality.
+     * Re-enable ABR after a few seconds so slow connections self-correct.
      */
     promoteToActive(itemId) {
       const hls = this.hlsInstances.get(itemId);
-      if (hls) {
-        hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
-        hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
-        hls.autoLevelCapping = -1;
-        hls.nextAutoLevel = -1;
+      if (!hls) return;
+      hls.config.maxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+      hls.config.maxMaxBufferLength = PlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+      hls.autoLevelCapping = -1;
+      const top = hls.levels ? hls.levels.length - 1 : -1;
+      if (top > 0 && hls.currentLevel < top) {
+        hls.currentLevel = top;
+        const player = this.assignments.get(itemId);
+        if (player) {
+          player.currentTime = player.currentTime;
+        }
+        setTimeout(() => {
+          if (!hls.destroyed) hls.currentLevel = -1;
+        }, 4e3);
       }
     }
     /** Pause, destroy HLS, and remove player from DOM and pool tracking. */
@@ -34588,6 +34607,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this._setupScrollEnd();
       this._setupVisibilityHandler();
       this._setupCellHeightObserver();
+      this._setupDebugPanel();
       if (startIndex > 0 && startIndex < items.length) {
         const targetEl = this.itemEls.get(items[startIndex].id);
         if (targetEl) targetEl.scrollIntoView({ behavior: "instant", block: "start" });
@@ -34610,6 +34630,11 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
         this._resizeObserver = null;
       }
       if (this._visHandler) document.removeEventListener("visibilitychange", this._visHandler);
+      if (this._debugKeyHandler) document.removeEventListener("keydown", this._debugKeyHandler);
+      if (this._debugPanel) {
+        this._debugPanel.remove();
+        this._debugPanel = null;
+      }
       this.container.innerHTML = "";
       this.itemEls.clear();
       this.items = [];
@@ -34943,12 +34968,55 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this._stopTimeLoop(id);
       this._detachOverlay(id);
     }
+    // --- Debug panel (toggle with 'D' key) ---
+    _setupDebugPanel() {
+      const panel = document.createElement("div");
+      panel.id = "sk-debug-panel";
+      panel.style.cssText = "position:fixed;top:12px;right:12px;z-index:99999;background:rgba(0,0,0,.85);color:#0f0;font:12px/1.5 monospace;padding:10px 14px;border-radius:8px;pointer-events:none;display:none;min-width:220px;";
+      document.body.appendChild(panel);
+      this._debugPanel = panel;
+      this._debugVisible = false;
+      this._debugKeyHandler = (e) => {
+        if (e.key === "d" || e.key === "D") {
+          this._debugVisible = !this._debugVisible;
+          panel.style.display = this._debugVisible ? "block" : "none";
+        }
+      };
+      document.addEventListener("keydown", this._debugKeyHandler);
+    }
+    _updateDebugPanel() {
+      if (!this._debugVisible || !this._debugPanel) return;
+      const hls = this.pool.hlsInstances.get(this.activeItemId);
+      if (!hls || !hls.levels || !hls.levels.length) {
+        this._debugPanel.innerHTML = "HLS: no levels loaded";
+        return;
+      }
+      const level = hls.levels[hls.currentLevel] || {};
+      const bw = hls.bandwidthEstimate ? (hls.bandwidthEstimate / 1e6).toFixed(2) : "?";
+      const lines = [
+        `<b style="color:#fff">HLS Debug</b>`,
+        `Level: ${hls.currentLevel} / ${hls.levels.length - 1}`,
+        `Resolution: ${level.width || "?"}x${level.height || "?"}`,
+        `Bitrate: ${level.bitrate ? (level.bitrate / 1e3).toFixed(0) + " kbps" : "?"}`,
+        `BW estimate: ${bw} Mbps`,
+        `Auto cap: ${hls.autoLevelCapping}`,
+        `Next level: ${hls.nextLevel}`,
+        `<span style="color:#888">Levels:</span>`
+      ];
+      for (let i = 0; i < hls.levels.length; i++) {
+        const l = hls.levels[i];
+        const marker = i === hls.currentLevel ? ' <b style="color:#0ff">◀</b>' : "";
+        lines.push(`  ${i}: ${l.width}x${l.height} @ ${(l.bitrate / 1e3).toFixed(0)}k${marker}`);
+      }
+      this._debugPanel.innerHTML = lines.join("<br>");
+    }
     // --- Time loop (state emission only, no DOM updates) ---
     _startTimeLoop(id, el, player) {
       this._stopTimeLoop(id);
       const tick = () => {
         if (this._destroyed) return;
         if (!player || player.paused) {
+          this._updateDebugPanel();
           this.rafIds.set(id, requestAnimationFrame(tick));
           return;
         }
@@ -34974,6 +35042,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
           player.play().catch(() => {
           });
         }
+        this._updateDebugPanel();
         this.rafIds.set(id, requestAnimationFrame(tick));
       };
       this.rafIds.set(id, requestAnimationFrame(tick));
@@ -36039,11 +36108,20 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     }
     promoteToActive(itemId) {
       const hls = this.hlsInstances.get(itemId);
-      if (hls) {
-        hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
-        hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
-        hls.autoLevelCapping = -1;
-        hls.nextAutoLevel = -1;
+      if (!hls) return;
+      hls.config.maxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxBufferLength;
+      hls.config.maxMaxBufferLength = WidgetPlayerPool.ACTIVE_HLS_CONFIG.maxMaxBufferLength;
+      hls.autoLevelCapping = -1;
+      const top = hls.levels ? hls.levels.length - 1 : -1;
+      if (top > 0 && hls.currentLevel < top) {
+        hls.currentLevel = top;
+        const player = this.assignments.get(itemId);
+        if (player) {
+          player.currentTime = player.currentTime;
+        }
+        setTimeout(() => {
+          if (!hls.destroyed) hls.currentLevel = -1;
+        }, 4e3);
       }
     }
     _destroyHls(itemId) {