vidply 1.0.30 → 1.0.32

package/dist/legacy/vidply.js

@@ -5194,13 +5194,19 @@
         }
         getQualities() {
           if (this.hls && this.hls.levels) {
-            return this.hls.levels.map((level, index) => ({
-              index,
-              height: level.height,
-              width: level.width,
-              bitrate: level.bitrate,
-              name: "".concat(level.height, "p")
-            }));
+            return this.hls.levels.map((level, index) => {
+              const height = Number(level.height) || 0;
+              const bitrate = Number(level.bitrate) || 0;
+              const kb = bitrate > 0 ? Math.round(bitrate / 1e3) : 0;
+              const name = height > 0 ? "".concat(height, "p") : kb > 0 ? "".concat(kb, " kb") : "Auto";
+              return {
+                index,
+                height: level.height,
+                width: level.width,
+                bitrate: level.bitrate,
+                name
+              };
+            });
           }
           return [];
         }
@@ -5647,9 +5653,16 @@
       const timeDiff = Math.abs(video.currentTime - time);
       if (timeDiff < 0.1 && video.readyState >= 2) {
         captureFrame();
-      } else {
+      } else if (video.readyState >= 1) {
         video.addEventListener("seeked", onSeeked);
         video.currentTime = time;
+      } else {
+        const onLoadedMetadata = () => {
+          video.removeEventListener("loadedmetadata", onLoadedMetadata);
+          video.addEventListener("seeked", onSeeked);
+          video.currentTime = time;
+        };
+        video.addEventListener("loadedmetadata", onLoadedMetadata);
       }
     });
   }
@@ -6084,6 +6097,7 @@
       });
     }
     createControls() {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       const progressTimeWrapper = DOMUtils.createElement("div", {
         className: "".concat(this.player.options.classPrefix, "-progress-time-wrapper")
       });
@@ -6149,7 +6163,11 @@
         btn.dataset.overflowPriorityMobile = "3";
         this.rightButtons.appendChild(btn);
       }
-      if (this.player.options.speedButton) {
+      const src = this.player.currentSource || ((_b = (_a = this.player.element) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "src")) || ((_c = this.player.element) == null ? void 0 : _c.currentSrc) || ((_d = this.player.element) == null ? void 0 : _d.src) || ((_h = (_g = (_f = (_e = this.player.element) == null ? void 0 : _e.querySelector) == null ? void 0 : _f.call(_e, "source")) == null ? void 0 : _g.getAttribute) == null ? void 0 : _h.call(_g, "src")) || ((_k = (_j = (_i = this.player.element) == null ? void 0 : _i.querySelector) == null ? void 0 : _j.call(_i, "source")) == null ? void 0 : _k.src) || "";
+      const isHlsSource = typeof src === "string" && src.includes(".m3u8");
+      const isVideoElement = ((_m = (_l = this.player.element) == null ? void 0 : _l.tagName) == null ? void 0 : _m.toLowerCase()) === "video";
+      const hideSpeedForThisPlayer = !!this.player.options.hideSpeedForHls && isHlsSource || !!this.player.options.hideSpeedForHlsVideo && isHlsSource && isVideoElement;
+      if (this.player.options.speedButton && !hideSpeedForThisPlayer) {
         const btn = this.createSpeedButton();
         btn.dataset.overflowPriority = "1";
         btn.dataset.overflowPriorityMobile = "3";
@@ -6325,33 +6343,48 @@
       }
       const renderer = this.player.renderer;
       const hasVideoMedia = renderer && renderer.media && renderer.media.tagName === "VIDEO";
-      const isHTML5Renderer = renderer && (renderer.constructor.name === "HTML5Renderer" || renderer.constructor.name === "HLSRenderer" && hasVideoMedia);
+      const isHTML5Renderer = hasVideoMedia && renderer.media === this.player.element && !renderer.hls && typeof renderer.seek === "function";
       this.previewSupported = isHTML5Renderer && hasVideoMedia;
       if (this.previewSupported) {
         this.previewVideo = document.createElement("video");
         this.previewVideo.muted = true;
-        this.previewVideo.preload = "metadata";
+        this.previewVideo.preload = "auto";
+        this.previewVideo.playsInline = true;
         this.previewVideo.style.position = "absolute";
         this.previewVideo.style.visibility = "hidden";
         this.previewVideo.style.width = "1px";
         this.previewVideo.style.height = "1px";
         this.previewVideo.style.top = "-9999px";
         const mainVideo = renderer.media || this.player.element;
+        let videoSrc = null;
         if (mainVideo.src) {
-          this.previewVideo.src = mainVideo.src;
+          videoSrc = mainVideo.src;
         } else {
           const source = mainVideo.querySelector("source");
           if (source) {
-            this.previewVideo.src = source.src;
+            videoSrc = source.src;
           }
         }
-        this.previewVideo.addEventListener("error", () => {
-          this.player.log("Preview video failed to load", "warn");
+        if (!videoSrc) {
+          this.player.log("No video source found for preview", "warn");
+          this.previewSupported = false;
+          return;
+        }
+        if (mainVideo.crossOrigin) {
+          this.previewVideo.crossOrigin = mainVideo.crossOrigin;
+        }
+        this.previewVideo.addEventListener("error", (e) => {
+          this.player.log("Preview video failed to load:", e, "warn");
           this.previewSupported = false;
         });
+        this.previewVideo.addEventListener("loadedmetadata", () => {
+          this.previewVideoReady = true;
+        }, { once: true });
         if (this.player.container) {
           this.player.container.appendChild(this.previewVideo);
         }
+        this.previewVideo.src = videoSrc;
+        this.previewVideoReady = false;
       }
     }
     /**
@@ -6363,6 +6396,45 @@
       if (!this.previewSupported || !this.previewVideo) {
         return null;
       }
+      if (!this.previewVideoReady) {
+        if (this.previewVideo.readyState < 2) {
+          await new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+              reject(new Error("Preview video data load timeout"));
+            }, 1e4);
+            const cleanup = () => {
+              clearTimeout(timeout);
+              this.previewVideo.removeEventListener("loadeddata", checkReady);
+              this.previewVideo.removeEventListener("canplay", checkReady);
+              this.previewVideo.removeEventListener("error", onError);
+            };
+            const checkReady = () => {
+              if (this.previewVideo.readyState >= 2) {
+                cleanup();
+                this.previewVideoReady = true;
+                resolve();
+              }
+            };
+            const onError = () => {
+              cleanup();
+              reject(new Error("Preview video failed to load"));
+            };
+            if (this.previewVideo.readyState >= 1) {
+              this.previewVideo.addEventListener("loadeddata", checkReady);
+            }
+            this.previewVideo.addEventListener("canplay", checkReady);
+            this.previewVideo.addEventListener("error", onError);
+            if (this.previewVideo.readyState >= 2) {
+              checkReady();
+            }
+          }).catch(() => {
+            this.previewSupported = false;
+            return null;
+          });
+        } else {
+          this.previewVideoReady = true;
+        }
+      }
       const cacheKey = Math.floor(time);
       if (this.previewThumbnailCache.has(cacheKey)) {
         return this.previewThumbnailCache.get(cacheKey);
@@ -6374,7 +6446,7 @@
         maxHeight: 90
       });
       if (dataURL) {
-        if (this.previewThumbnailCache.size > 20) {
+        if (this.previewThumbnailCache.size >= 20) {
           const firstKey = this.previewThumbnailCache.keys().next().value;
           this.previewThumbnailCache.delete(firstKey);
         }
@@ -6387,19 +6459,32 @@
      * @param {number} time - Time in seconds
      */
     async updatePreviewThumbnail(time) {
-      if (!this.previewSupported) {
+      if (!this.previewSupported || !this.controls.progressPreview) {
         return;
       }
       if (this.previewThumbnailTimeout) {
         clearTimeout(this.previewThumbnailTimeout);
       }
       this.previewThumbnailTimeout = setTimeout(async () => {
-        const thumbnail = await this.generatePreviewThumbnail(time);
-        if (thumbnail && this.controls.progressPreview) {
-          this.controls.progressPreview.style.backgroundImage = "url(".concat(thumbnail, ")");
-          this.controls.progressPreview.style.display = "block";
+        try {
+          const thumbnail = await this.generatePreviewThumbnail(time);
+          if (thumbnail && this.controls.progressPreview) {
+            this.controls.progressPreview.style.backgroundImage = 'url("'.concat(thumbnail, '")');
+            this.controls.progressPreview.style.display = "block";
+            this.controls.progressPreview.style.backgroundRepeat = "no-repeat";
+            this.controls.progressPreview.style.backgroundPosition = "center";
+          } else {
+            if (this.controls.progressPreview) {
+              this.controls.progressPreview.style.display = "none";
+            }
+          }
+          this.currentPreviewTime = time;
+        } catch (error) {
+          this.player.log("Preview thumbnail update failed:", error, "warn");
+          if (this.controls.progressPreview) {
+            this.controls.progressPreview.style.display = "none";
+          }
         }
-        this.currentPreviewTime = time;
       }, 100);
     }
     setupProgressBarEvents() {
@@ -6433,7 +6518,9 @@
           this.controls.progressTooltipTime.textContent = TimeUtils.formatTime(time);
           this.controls.progressTooltip.style.left = "".concat(left, "px");
           this.controls.progressTooltip.style.display = "block";
-          this.updatePreviewThumbnail(time);
+          if (this.previewSupported) {
+            this.updatePreviewThumbnail(time);
+          }
         }
       });
       progress.addEventListener("mouseleave", () => {
@@ -7720,6 +7807,10 @@
         this.updateDuration();
         this.ensureQualityButton();
         this.updateQualityIndicator();
+        this.updatePreviewVideoSource();
+      });
+      this.player.on("sourcechange", () => {
+        this.updatePreviewVideoSource();
       });
       this.player.on("volumechange", () => this.updateVolumeDisplay());
       this.player.on("progress", () => this.updateBuffered());
@@ -8187,6 +8278,38 @@
     hide() {
       this.element.style.display = "none";
     }
+    /**
+     * Update preview video source when player source changes (for playlists)
+     * Also re-initializes if preview wasn't set up initially
+     */
+    updatePreviewVideoSource() {
+      var _a;
+      const renderer = this.player.renderer;
+      if (!renderer || !renderer.media || renderer.media.tagName !== "VIDEO") {
+        return;
+      }
+      if (!this.previewSupported && !this.previewVideo) {
+        this.initPreviewThumbnail();
+      }
+      if (!this.previewSupported || !this.previewVideo) {
+        return;
+      }
+      const mainVideo = renderer.media;
+      const newSrc = mainVideo.src || ((_a = mainVideo.querySelector("source")) == null ? void 0 : _a.src);
+      if (newSrc && this.previewVideo.src !== newSrc) {
+        this.previewThumbnailCache.clear();
+        this.previewVideoReady = false;
+        this.previewVideo.src = newSrc;
+        if (mainVideo.crossOrigin) {
+          this.previewVideo.crossOrigin = mainVideo.crossOrigin;
+        }
+        this.previewVideo.addEventListener("loadedmetadata", () => {
+          this.previewVideoReady = true;
+        }, { once: true });
+      } else if (newSrc && !this.previewVideoReady && this.previewVideo.readyState >= 1) {
+        this.previewVideoReady = true;
+      }
+    }
     /**
      * Cleanup preview thumbnail resources
      */
@@ -10281,6 +10404,11 @@
         qualityButton: true,
         captionStyleButton: true,
         speedButton: true,
+        // When enabled, the playback speed UI is suppressed for ALL HLS streams (audio + video).
+        hideSpeedForHls: false,
+        // When enabled, the playback speed UI is suppressed for HLS *video* streams only.
+        // This is useful for live streams where speed controls don't make sense.
+        hideSpeedForHlsVideo: false,
         captionsButton: true,
         transcriptButton: true,
         fullscreenButton: true,