@scarlett-player/embed 1.5.0 → 1.6.0

package/dist/embed.video.js

@@ -180,8 +180,8 @@ class StateManager {
    * Register a state key at runtime, for state a plugin owns.
    *
    * Core cannot know every plugin's keys, and {@link get} deliberately throws
-   * for unregistered ones — that throw is a useful typo-catcher and is worth
-   * keeping — so a plugin declares its keys before first use.
+   * for unregistered ones - that throw is a useful typo-catcher and is worth
+   * keeping - so a plugin declares its keys before first use.
    *
    * Idempotent by design: re-defining an existing key leaves the current value
    * untouched. Plugins commonly re-run setup after a source change, and that
@@ -1259,7 +1259,7 @@ class PluginAPI {
   /**
    * Register a state key this plugin owns, before first use.
    *
-   * Idempotent — re-defining an existing key keeps its current value.
+   * Idempotent - re-defining an existing key keeps its current value.
    * See {@link IPluginAPI.defineState}.
    *
    * @param key - State property key
@@ -3635,6 +3635,25 @@ var styles = `
   border-radius: inherit;
 }
 
+/* Chapter markers */
+.sp-progress__markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.sp-progress__marker {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  margin-left: -1px;
+  background: rgba(0, 0, 0, 0.65);
+}
+
 .sp-progress__handle {
   position: absolute;
   top: 50%;
@@ -3694,6 +3713,16 @@ var styles = `
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
+.sp-progress__tooltip-chapter {
+  display: block;
+  max-width: 220px;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.75);
+  font-weight: 400;
+  font-variant-numeric: normal;
+  text-overflow: ellipsis;
+}
+
 @media (hover: hover) {
   .sp-progress-wrapper:hover .sp-progress__tooltip {
     opacity: 1;
@@ -4531,6 +4560,8 @@ var ProgressBar = class {
     this.lastSeekTime = 0;
     this.seekThrottleMs = 100;
     this.wasPlayingBeforeDrag = false;
+    this.renderedChapters = null;
+    this.renderedDuration = 0;
     this.onMouseDown = (e) => {
       e.preventDefault();
       const video = getVideo(this.api.container);
@@ -4665,12 +4696,14 @@ var ProgressBar = class {
     const track = createElement("div", { className: "sp-progress__track" });
     this.buffered = createElement("div", { className: "sp-progress__buffered" });
     this.filled = createElement("div", { className: "sp-progress__filled" });
+    this.markers = createElement("div", { className: "sp-progress__markers" });
     this.handle = createElement("div", { className: "sp-progress__handle" });
     this.tooltip = createElement("div", { className: "sp-progress__tooltip" });
     this.tooltip.textContent = "0:00";
     this.thumbnailPreview = new ThumbnailPreview();
     track.appendChild(this.buffered);
     track.appendChild(this.filled);
+    track.appendChild(this.markers);
     track.appendChild(this.handle);
     this.el.appendChild(track);
     this.el.appendChild(this.thumbnailPreview.getElement());
@@ -4720,6 +4753,7 @@ var ProgressBar = class {
       this.thumbnailPreview.setConfig(thumbnails);
     }
     this.el.classList.toggle("sp-progress--live", !!live);
+    this.updateMarkers(duration, live, seekableRange);
     if (live && seekableRange) {
       const rangeLength = seekableRange.end - seekableRange.start;
       if (rangeLength > 0) {
@@ -4752,6 +4786,70 @@ var ProgressBar = class {
       this.el.setAttribute("aria-valuetext", formatTime(currentTime));
     }
   }
+  /**
+   * Label of the chapter containing a point on the timeline.
+   *
+   * Mirrors the chapters plugin's own lookup: a start time belongs to its
+   * chapter, an end time belongs to the next one, and a point in a gap between
+   * sparse chapters belongs to neither.
+   *
+   * @param time - Position in seconds
+   * @returns The chapter label, or null when the point is outside every chapter
+   */
+  chapterLabelAt(time) {
+    const chapters = this.api.getState("chapters") ?? [];
+    for (let i = chapters.length - 1; i >= 0; i--) {
+      const chapter = chapters[i];
+      if (time < chapter.time) continue;
+      const next = chapters[i + 1];
+      const end = chapter.endTime ?? (next ? next.time : Infinity);
+      return time < end ? chapter.label : null;
+    }
+    return null;
+  }
+  /**
+   * Paint chapter dividers along the track.
+   *
+   * Reads the `chapters` state that core owns, so this works whether the list
+   * came from the chapters plugin or the host set it directly, and renders
+   * nothing at all when there are none.
+   *
+   * Rebuilds only when the list or the duration actually changed. `update()`
+   * runs on every time update, and rebuilding a dozen nodes 4 times a second
+   * would churn the DOM for no reason.
+   *
+   * @param duration - Media duration in seconds
+   * @param live - Whether the media is live
+   * @param seekableRange - DVR window, when the media is live
+   */
+  updateMarkers(duration, live, seekableRange) {
+    const chapters = this.api.getState("chapters") ?? [];
+    const range = live ? seekableRange ? seekableRange.end - seekableRange.start : 0 : duration;
+    if (chapters.length === 0 || range <= 0) {
+      if (this.renderedChapters !== null) {
+        this.markers.textContent = "";
+        this.renderedChapters = null;
+        this.renderedDuration = 0;
+      }
+      return;
+    }
+    if (chapters === this.renderedChapters && range === this.renderedDuration) {
+      return;
+    }
+    const origin = live && seekableRange ? seekableRange.start : 0;
+    this.markers.textContent = "";
+    for (const chapter of chapters) {
+      if (chapter.time <= origin) continue;
+      const percent = (chapter.time - origin) / range * 100;
+      if (percent <= 0 || percent >= 100) continue;
+      const marker = createElement("div", { className: "sp-progress__marker" });
+      marker.style.left = `${percent}%`;
+      marker.title = chapter.label;
+      this.markers.appendChild(marker);
+    }
+    this.renderedChapters = chapters;
+    this.renderedDuration = range;
+  }
   getTimeFromPosition(clientX) {
     const rect = this.el.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
@@ -4776,6 +4874,12 @@ var ProgressBar = class {
     } else {
       this.tooltip.textContent = formatTime(time);
     }
+    const chapterLabel = this.chapterLabelAt(time);
+    if (chapterLabel) {
+      const label = createElement("span", { className: "sp-progress__tooltip-chapter" });
+      label.textContent = chapterLabel;
+      this.tooltip.appendChild(label);
+    }
     this.tooltip.style.left = `${percent * 100}%`;
     if (this.thumbnailPreview.isConfigured()) {
       this.thumbnailPreview.show(time, percent);
@@ -6187,7 +6291,15 @@ function uiPlugin(config = {}) {
     }
     hideTimeout = setTimeout(hideControls, hideDelay);
   };
+  let last_pointer_type = null;
+  const handlePointerActivity = (event) => {
+    last_pointer_type = event.pointerType;
+  };
   const handleInteraction = () => {
+    if (last_pointer_type === "touch") {
+      const gestures = api?.getPlugin("gestures");
+      if (gestures?.ownsTapInteraction()) return;
+    }
     showControls();
   };
   const handleMouseLeave = () => {
@@ -6321,6 +6433,8 @@ function uiPlugin(config = {}) {
         api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
         rebuildControlBar();
       });
+      container.addEventListener("pointerdown", handlePointerActivity, { passive: true });
+      container.addEventListener("pointermove", handlePointerActivity, { passive: true });
       container.addEventListener("mousemove", handleInteraction);
       container.addEventListener("mouseenter", handleInteraction);
       container.addEventListener("mouseleave", handleMouseLeave);
@@ -6358,6 +6472,8 @@ function uiPlugin(config = {}) {
       recoveredUnsubscribe?.();
       recoveredUnsubscribe = null;
       if (api?.container) {
+        api.container.removeEventListener("pointerdown", handlePointerActivity);
+        api.container.removeEventListener("pointermove", handlePointerActivity);
         api.container.removeEventListener("mousemove", handleInteraction);
         api.container.removeEventListener("mouseenter", handleInteraction);
         api.container.removeEventListener("mouseleave", handleMouseLeave);