vidply 1.0.29 → 1.0.31

package/dist/legacy/vidply.js

@@ -1741,6 +1741,11 @@
           this.media.addEventListener("loadedmetadata", () => {
             this.player.state.duration = this.media.duration;
             this.player.emit("loadedmetadata");
+            if (this.media.tagName === "VIDEO") {
+              this.player.autoGeneratePoster().catch((error) => {
+                this.player.log("Failed to auto-generate poster:", error, "warn");
+              });
+            }
           });
           this.media.addEventListener("play", () => {
             this.player.state.playing = true;
@@ -5574,6 +5579,88 @@
     setTimeout(execute, timeout);
   }
 
+  // src/utils/VideoFrameCapture.js
+  async function captureVideoFrame(video, time, options = {}) {
+    if (!video || video.tagName !== "VIDEO") {
+      return null;
+    }
+    const {
+      restoreState = true,
+      quality = 0.9,
+      maxWidth,
+      maxHeight
+    } = options;
+    const wasPlaying = !video.paused;
+    const originalTime = video.currentTime;
+    const originalMuted = video.muted;
+    if (restoreState) {
+      video.muted = true;
+    }
+    return new Promise((resolve) => {
+      const captureFrame = () => {
+        try {
+          let width = video.videoWidth || 640;
+          let height = video.videoHeight || 360;
+          if (maxWidth && width > maxWidth) {
+            const ratio = maxWidth / width;
+            width = maxWidth;
+            height = Math.round(height * ratio);
+          }
+          if (maxHeight && height > maxHeight) {
+            const ratio = maxHeight / height;
+            height = maxHeight;
+            width = Math.round(width * ratio);
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(video, 0, 0, width, height);
+          const dataURL = canvas.toDataURL("image/jpeg", quality);
+          if (restoreState) {
+            video.currentTime = originalTime;
+            video.muted = originalMuted;
+            if (wasPlaying && !video.paused) {
+              video.play().catch(() => {
+              });
+            }
+          }
+          resolve(dataURL);
+        } catch (error) {
+          if (restoreState) {
+            video.currentTime = originalTime;
+            video.muted = originalMuted;
+            if (wasPlaying && !video.paused) {
+              video.play().catch(() => {
+              });
+            }
+          }
+          resolve(null);
+        }
+      };
+      const onSeeked = () => {
+        video.removeEventListener("seeked", onSeeked);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(captureFrame);
+        });
+      };
+      const timeDiff = Math.abs(video.currentTime - time);
+      if (timeDiff < 0.1 && video.readyState >= 2) {
+        captureFrame();
+      } 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);
+      }
+    });
+  }
+
   // src/controls/ControlBar.js
   var ControlBar = class {
     constructor(player) {
@@ -6211,13 +6298,184 @@
       this.controls.progressTooltip = DOMUtils.createElement("div", {
         className: "".concat(this.player.options.classPrefix, "-progress-tooltip")
       });
+      this.controls.progressPreview = DOMUtils.createElement("div", {
+        className: "".concat(this.player.options.classPrefix, "-progress-preview"),
+        attributes: {
+          "aria-hidden": "true"
+        }
+      });
+      this.controls.progressTooltip.appendChild(this.controls.progressPreview);
+      this.controls.progressTooltipTime = DOMUtils.createElement("div", {
+        className: "".concat(this.player.options.classPrefix, "-progress-tooltip-time")
+      });
+      this.controls.progressTooltip.appendChild(this.controls.progressTooltipTime);
       progressContainer.appendChild(this.controls.buffered);
       progressContainer.appendChild(this.controls.played);
       this.controls.played.appendChild(this.controls.progressHandle);
       progressContainer.appendChild(this.controls.progressTooltip);
       this.controls.progress = progressContainer;
+      this.initPreviewThumbnail();
       this.setupProgressBarEvents();
     }
+    /**
+     * Initialize preview thumbnail functionality for HTML5 video
+     */
+    initPreviewThumbnail() {
+      this.previewThumbnailCache = /* @__PURE__ */ new Map();
+      this.previewVideo = null;
+      this.currentPreviewTime = null;
+      this.previewThumbnailTimeout = null;
+      this.previewSupported = false;
+      const isVideo = this.player.element && this.player.element.tagName === "VIDEO";
+      if (!isVideo) {
+        return;
+      }
+      const renderer = this.player.renderer;
+      const hasVideoMedia = renderer && renderer.media && renderer.media.tagName === "VIDEO";
+      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 = "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) {
+          videoSrc = mainVideo.src;
+        } else {
+          const source = mainVideo.querySelector("source");
+          if (source) {
+            videoSrc = source.src;
+          }
+        }
+        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;
+      }
+    }
+    /**
+     * Generate preview thumbnail for a specific time
+     * @param {number} time - Time in seconds
+     * @returns {Promise<string>} Data URL of the thumbnail
+     */
+    async generatePreviewThumbnail(time) {
+      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);
+      }
+      const dataURL = await captureVideoFrame(this.previewVideo, time, {
+        restoreState: false,
+        quality: 0.8,
+        maxWidth: 160,
+        maxHeight: 90
+      });
+      if (dataURL) {
+        if (this.previewThumbnailCache.size >= 20) {
+          const firstKey = this.previewThumbnailCache.keys().next().value;
+          this.previewThumbnailCache.delete(firstKey);
+        }
+        this.previewThumbnailCache.set(cacheKey, dataURL);
+      }
+      return dataURL;
+    }
+    /**
+     * Update preview thumbnail display
+     * @param {number} time - Time in seconds
+     */
+    async updatePreviewThumbnail(time) {
+      if (!this.previewSupported || !this.controls.progressPreview) {
+        return;
+      }
+      if (this.previewThumbnailTimeout) {
+        clearTimeout(this.previewThumbnailTimeout);
+      }
+      this.previewThumbnailTimeout = setTimeout(async () => {
+        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";
+          }
+        }
+      }, 100);
+    }
     setupProgressBarEvents() {
       const progress = this.controls.progress;
       const updateProgress = (clientX) => {
@@ -6244,13 +6502,21 @@
       progress.addEventListener("mousemove", (e) => {
         if (!this.isDraggingProgress) {
           const { time } = updateProgress(e.clientX);
-          this.controls.progressTooltip.textContent = TimeUtils.formatTime(time);
-          this.controls.progressTooltip.style.left = "".concat(e.clientX - progress.getBoundingClientRect().left, "px");
+          const rect = progress.getBoundingClientRect();
+          const left = e.clientX - rect.left;
+          this.controls.progressTooltipTime.textContent = TimeUtils.formatTime(time);
+          this.controls.progressTooltip.style.left = "".concat(left, "px");
           this.controls.progressTooltip.style.display = "block";
+          if (this.previewSupported) {
+            this.updatePreviewThumbnail(time);
+          }
         }
       });
       progress.addEventListener("mouseleave", () => {
         this.controls.progressTooltip.style.display = "none";
+        if (this.previewThumbnailTimeout) {
+          clearTimeout(this.previewThumbnailTimeout);
+        }
       });
       progress.addEventListener("keydown", (e) => {
         if (e.key === "ArrowLeft") {
@@ -7530,6 +7796,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());
@@ -7997,6 +8267,52 @@
     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
+     */
+    cleanupPreviewThumbnail() {
+      if (this.previewThumbnailTimeout) {
+        clearTimeout(this.previewThumbnailTimeout);
+        this.previewThumbnailTimeout = null;
+      }
+      if (this.previewVideo && this.previewVideo.parentNode) {
+        this.previewVideo.parentNode.removeChild(this.previewVideo);
+        this.previewVideo = null;
+      }
+      this.previewThumbnailCache.clear();
+    }
     destroy() {
       if (this.hideTimeout) {
         clearTimeout(this.hideTimeout);
@@ -8004,6 +8320,7 @@
       if (this.overflowResizeObserver) {
         this.overflowResizeObserver.disconnect();
       }
+      this.cleanupPreviewThumbnail();
       if (this.element && this.element.parentNode) {
         this.element.parentNode.removeChild(this.element);
       }
@@ -10635,6 +10952,64 @@
         return posterPath;
       }
     }
+    /**
+     * Generate a poster image from video frame at specified time
+     * @param {number} time - Time in seconds (default: 10)
+     * @returns {Promise<string|null>} Data URL of the poster image or null if failed
+     */
+    async generatePosterFromVideo(time = 10) {
+      if (this.element.tagName !== "VIDEO") {
+        return null;
+      }
+      const renderer = this.renderer;
+      if (!renderer || !renderer.media || renderer.media.tagName !== "VIDEO") {
+        return null;
+      }
+      const video = renderer.media;
+      if (!video.duration || video.duration < time) {
+        time = Math.min(time, Math.max(1, video.duration * 0.1));
+      }
+      let videoToUse = video;
+      if (this.controlBar && this.controlBar.previewVideo && this.controlBar.previewSupported) {
+        videoToUse = this.controlBar.previewVideo;
+      }
+      const restoreState = videoToUse === video;
+      return await captureVideoFrame(videoToUse, time, {
+        restoreState,
+        quality: 0.9
+      });
+    }
+    /**
+     * Auto-generate poster from video if none is provided
+     */
+    async autoGeneratePoster() {
+      const hasPoster = this.element.getAttribute("poster") || this.element.poster || this.options.poster;
+      if (hasPoster) {
+        return;
+      }
+      if (this.element.tagName !== "VIDEO") {
+        return;
+      }
+      if (!this.state.duration || this.state.duration === 0) {
+        await new Promise((resolve) => {
+          const onLoadedMetadata = () => {
+            this.element.removeEventListener("loadedmetadata", onLoadedMetadata);
+            resolve();
+          };
+          if (this.element.readyState >= 1) {
+            resolve();
+          } else {
+            this.element.addEventListener("loadedmetadata", onLoadedMetadata);
+          }
+        });
+      }
+      const posterDataURL = await this.generatePosterFromVideo(10);
+      if (posterDataURL) {
+        this.element.poster = posterDataURL;
+        this.log("Auto-generated poster from video frame at 10 seconds", "info");
+        this.showPosterOverlay();
+      }
+    }
     showPosterOverlay() {
       if (!this.videoWrapper || this.element.tagName !== "VIDEO") {
         return;
@@ -10643,7 +11018,7 @@
       if (!poster) {
         return;
       }
-      const resolvedPoster = this.resolvePosterPath(poster);
+      const resolvedPoster = poster.startsWith("data:") ? poster : this.resolvePosterPath(poster);
       this.videoWrapper.style.setProperty("--vidply-poster-image", 'url("'.concat(resolvedPoster, '")'));
       this.videoWrapper.classList.add("vidply-forced-poster");
       if (this._isAudioContent && this.container) {