@scarlett-player/embed 1.5.0 → 1.6.0

package/dist/embed.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
@@ -920,9 +920,9 @@ class Logger {
    * ```
    */
   removeHandler(handler) {
-    const index = this.handlers.indexOf(handler);
-    if (index !== -1) {
-      this.handlers.splice(index, 1);
+    const index2 = this.handlers.indexOf(handler);
+    if (index2 !== -1) {
+      this.handlers.splice(index2, 1);
     }
   }
   /**
@@ -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
@@ -1983,7 +1983,7 @@ class ScarlettPlayer {
    * Set quality level (-1 for auto).
    * @param index - Quality level index
    */
-  setQuality(index) {
+  setQuality(index2) {
     this.checkDestroyed();
     if (!this._currentProvider) {
       this.logger.warn("No provider available for quality change");
@@ -1991,17 +1991,17 @@ class ScarlettPlayer {
     }
     const provider = this._currentProvider;
     if (typeof provider.setLevel === "function") {
-      if (index !== -1) {
+      if (index2 !== -1) {
         const levels = this.getQualities();
-        if (levels.length > 0 && (index < 0 || index >= levels.length)) {
-          this.logger.warn(`Invalid quality index: ${index} (available: ${levels.length})`);
+        if (levels.length > 0 && (index2 < 0 || index2 >= levels.length)) {
+          this.logger.warn(`Invalid quality index: ${index2} (available: ${levels.length})`);
           return;
         }
       }
-      provider.setLevel(index);
+      provider.setLevel(index2);
       this.eventBus.emit("quality:change", {
-        quality: index === -1 ? "auto" : `level-${index}`,
-        auto: index === -1
+        quality: index2 === -1 ? "auto" : `level-${index2}`,
+        auto: index2 === -1
       });
     }
   }
@@ -2323,8 +2323,8 @@ function formatBitrate(bitrate) {
   return `${bitrate} bps`;
 }
 function mapLevels(levels, _currentLevel) {
-  return levels.map((level, index) => ({
-    index,
+  return levels.map((level, index2) => ({
+    index: index2,
     width: level.width || 0,
     height: level.height || 0,
     bitrate: level.bitrate || 0,
@@ -2379,13 +2379,13 @@ function setupHlsEventHandlers(hls, api, callbacks) {
   };
   addHandler("hlsManifestParsed", (_event, data) => {
     api.logger.debug("HLS manifest parsed", { levels: data.levels.length });
-    const levels = data.levels.map((level, index) => ({
-      id: `level-${index}`,
+    const levels = data.levels.map((level, index2) => ({
+      id: `level-${index2}`,
       label: formatLevel(level),
       width: level.width,
       height: level.height,
       bitrate: level.bitrate,
-      active: index === hls.currentLevel
+      active: index2 === hls.currentLevel
     }));
     api.setState("qualities", levels);
     api.emit("quality:levels", {
@@ -3298,12 +3298,12 @@ function createHLSPluginWith(loader, variant, config) {
       if (isNative || !hls) return -1;
       return hls.currentLevel;
     },
-    setLevel(index) {
+    setLevel(index2) {
       if (isNative || !hls) {
         api?.logger.warn("Quality selection not available in native HLS mode");
         return;
       }
-      hls.currentLevel = index;
+      hls.currentLevel = index2;
     },
     getLevels() {
       if (isNative || !hls) return [];
@@ -3488,7 +3488,7 @@ function createHLSPlugin(config) {
     config
   );
 }
-var styles = `
+var styles$1 = `
 /* ============================================
    Container & Base
    ============================================ */
@@ -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;
@@ -4504,9 +4533,9 @@ var ThumbnailPreview = class {
       return;
     }
     const { src, width, height, columns, interval } = this.config;
-    const index = Math.floor(time / interval);
-    const col = index % columns;
-    const row = Math.floor(index / columns);
+    const index2 = Math.floor(time / interval);
+    const col = index2 % columns;
+    const row = Math.floor(index2 / columns);
     this.img.style.backgroundImage = `url(${src})`;
     this.img.style.backgroundPosition = `-${col * width}px -${row * height}px`;
     this.img.style.backgroundSize = `${columns * width}px auto`;
@@ -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$1(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$1(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);
@@ -6024,6 +6128,12 @@ var BandwidthIndicator = class {
 };
 var registry = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
+function registerControl(id, factory) {
+  registry.set(id, factory);
+  for (const listener of listeners) {
+    listener(id);
+  }
+}
 function getControlFactory(id) {
   return registry.get(id) ?? null;
 }
@@ -6187,7 +6297,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 = () => {
@@ -6266,7 +6384,7 @@ function uiPlugin(config = {}) {
     async init(pluginApi) {
       api = pluginApi;
       styleEl = document.createElement("style");
-      styleEl.textContent = styles;
+      styleEl.textContent = styles$1;
       document.head.appendChild(styleEl);
       if (config.theme) {
         this.setTheme(config.theme);
@@ -6321,6 +6439,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 +6478,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);
@@ -6419,6 +6541,16 @@ function uiPlugin(config = {}) {
     }
   };
 }
+const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  formatLiveTime,
+  formatTime: formatTime$1,
+  getControlFactory,
+  icons,
+  registerControl,
+  styles: styles$1,
+  uiPlugin
+}, Symbol.toStringTag, { value: "Module" }));
 var DEFAULT_THEME = {
   primary: "#6366f1",
   background: "#18181b",
@@ -6993,7 +7125,7 @@ function createAudioUIPlugin(config) {
       if (layout === "mini") {
         const wrapper = titleEl.parentElement;
         if (wrapper && titleEl.scrollWidth > wrapper.clientWidth) {
-          titleEl.textContent = `${title}     •     ${title}     •     `;
+          titleEl.textContent = `${title}     -     ${title}     -     `;
           titleEl.classList.add("scrolling");
         } else {
           titleEl.classList.remove("scrolling");
@@ -7732,6 +7864,272 @@ function createAnalyticsPlugin(config) {
     }
   };
 }
+var PLAYLIST_ICONS = {
+  previous: '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M6 6h2v12H6V6zm3.5 6L18 6v12l-8.5-6z"/></svg>',
+  next: '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M16 6h2v12h-2V6zM6 6l8.5 6L6 18V6z"/></svg>',
+  list: '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M3 6h11v2H3V6zm0 5h11v2H3v-2zm0 5h7v2H3v-2zm13-1.5V8l6 3.5-6 3.5z"/></svg>'
+};
+var PlaylistSkipButton = class {
+  constructor(plugin, direction) {
+    this.plugin = plugin;
+    this.direction = direction;
+    this.clickHandler = () => {
+      if (this.direction === "next") {
+        this.plugin.next();
+      } else {
+        this.plugin.previous();
+      }
+    };
+    const label = direction === "next" ? "Next item" : "Previous item";
+    this.el = document.createElement("button");
+    this.el.type = "button";
+    this.el.className = `sp-control sp-playlist-skip sp-playlist-skip--${direction}`;
+    this.el.setAttribute("aria-label", label);
+    this.el.setAttribute("title", label);
+    this.el.innerHTML = PLAYLIST_ICONS[direction];
+    this.el.addEventListener("click", this.clickHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const state = this.plugin.getState();
+    if (state.tracks.length <= 1) {
+      this.el.style.display = "none";
+      return;
+    }
+    this.el.style.display = "";
+    const enabled = this.direction === "next" ? state.hasNext : state.hasPrevious;
+    this.el.disabled = !enabled;
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+var PlaylistPanel = class {
+  constructor(plugin, options) {
+    this.plugin = plugin;
+    this.options = options;
+    this.open = false;
+    this.renderedIds = "";
+    this.toggleHandler = (event) => {
+      event.stopPropagation();
+      this.setOpen(!this.open);
+    };
+    this.documentClickHandler = () => {
+      if (this.open) this.setOpen(false);
+    };
+    this.keydownHandler = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.setOpen(false);
+        this.button.focus();
+      }
+    };
+    this.el = document.createElement("div");
+    this.el.className = "sp-playlist";
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.className = "sp-control sp-playlist__button";
+    this.button.setAttribute("aria-label", "Playlist");
+    this.button.setAttribute("title", "Playlist");
+    this.button.setAttribute("aria-haspopup", "true");
+    this.button.setAttribute("aria-expanded", "false");
+    this.button.innerHTML = PLAYLIST_ICONS.list;
+    this.panel = document.createElement("div");
+    this.panel.className = "sp-playlist__panel";
+    this.panel.setAttribute("role", "menu");
+    this.panel.hidden = true;
+    this.el.appendChild(this.button);
+    this.el.appendChild(this.panel);
+    this.button.addEventListener("click", this.toggleHandler);
+    document.addEventListener("click", this.documentClickHandler);
+    document.addEventListener("keydown", this.keydownHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const state = this.plugin.getState();
+    if (state.tracks.length <= 1) {
+      this.el.style.display = "none";
+      return;
+    }
+    this.el.style.display = "";
+    const signature = state.tracks.map((track) => track.id).join("|");
+    if (signature !== this.renderedIds) {
+      this.renderedIds = signature;
+      this.renderPanel(state.tracks, state.currentIndex);
+      return;
+    }
+    this.markActive(state.currentIndex);
+  }
+  destroy() {
+    this.button.removeEventListener("click", this.toggleHandler);
+    document.removeEventListener("click", this.documentClickHandler);
+    document.removeEventListener("keydown", this.keydownHandler);
+    this.el.remove();
+  }
+  setOpen(open) {
+    this.open = open;
+    this.panel.hidden = !open;
+    this.button.setAttribute("aria-expanded", String(open));
+    this.el.classList.toggle("sp-playlist--open", open);
+  }
+  markActive(currentIndex) {
+    const items = this.panel.querySelectorAll(".sp-playlist__item");
+    items.forEach((item, index2) => {
+      item.classList.toggle("sp-playlist__item--active", index2 === currentIndex);
+      item.setAttribute("aria-current", index2 === currentIndex ? "true" : "false");
+    });
+  }
+  renderPanel(tracks, currentIndex) {
+    this.panel.textContent = "";
+    tracks.forEach((track, index2) => {
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "sp-playlist__item";
+      item.setAttribute("role", "menuitem");
+      item.setAttribute("aria-current", index2 === currentIndex ? "true" : "false");
+      if (index2 === currentIndex) {
+        item.classList.add("sp-playlist__item--active");
+      }
+      const position = document.createElement("span");
+      position.className = "sp-playlist__position";
+      position.textContent = String(index2 + 1);
+      const text = document.createElement("span");
+      text.className = "sp-playlist__text";
+      const title = document.createElement("span");
+      title.className = "sp-playlist__title";
+      title.textContent = track.title ?? `Item ${index2 + 1}`;
+      text.appendChild(title);
+      if (track.artist) {
+        const artist = document.createElement("span");
+        artist.className = "sp-playlist__artist";
+        artist.textContent = track.artist;
+        text.appendChild(artist);
+      }
+      item.appendChild(position);
+      item.appendChild(text);
+      item.addEventListener("click", (event) => {
+        event.stopPropagation();
+        this.options.onSelect(index2);
+        this.setOpen(false);
+      });
+      this.panel.appendChild(item);
+    });
+  }
+};
+var STYLE_ID = "sp-playlist-styles";
+var styles = `
+.sp-playlist-skip[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.sp-playlist {
+  position: relative;
+  display: inline-flex;
+}
+
+.sp-playlist__button svg,
+.sp-playlist-skip svg {
+  width: 20px;
+  height: 20px;
+}
+
+.sp-playlist__panel {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  min-width: 240px;
+  max-width: 320px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+  border-radius: 8px;
+  background: rgba(20, 20, 20, 0.96);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+.sp-playlist__panel[hidden] {
+  display: none;
+}
+
+.sp-playlist__item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #fff;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sp-playlist__item:hover,
+.sp-playlist__item:focus-visible {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.sp-playlist__item--active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.sp-playlist__item--active .sp-playlist__title {
+  font-weight: 600;
+}
+
+.sp-playlist__position {
+  flex: 0 0 auto;
+  min-width: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.sp-playlist__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sp-playlist__title {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sp-playlist__artist {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+@media (max-width: 480px) {
+  .sp-playlist__panel {
+    min-width: 200px;
+    max-width: 76vw;
+  }
+}
+`;
+function injectStyles() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID)) {
+    return null;
+  }
+  const el = document.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = styles;
+  document.head.appendChild(el);
+  return el;
+}
 var DEFAULT_CONFIG$1 = {
   autoAdvance: true,
   preloadNext: true,
@@ -7871,14 +8269,14 @@ function createPlaylistPlugin(config) {
     api?.emit("playlist:change", { track, index: currentIndex });
     persistPlaylist();
   };
-  const setCurrentTrack = (index) => {
-    if (index < 0 || index >= tracks.length) {
-      api?.logger.warn("Invalid track index", { index });
+  const setCurrentTrack = (index2) => {
+    if (index2 < 0 || index2 >= tracks.length) {
+      api?.logger.warn("Invalid track index", { index: index2 });
       return;
     }
-    const track = tracks[index];
-    currentIndex = index;
-    api?.logger.info("Track changed", { index, title: track.title, src: track.src });
+    const track = tracks[index2];
+    currentIndex = index2;
+    api?.logger.info("Track changed", { index: index2, title: track.title, src: track.src });
     api?.setState("title", track.title || "");
     if (track.artwork) {
       api?.setState("poster", track.artwork);
@@ -7921,8 +8319,42 @@ function createPlaylistPlugin(config) {
           api?.emit("playlist:ended", void 0);
         }
       });
+      injectStyles();
+      void Promise.resolve().then(() => index).then(({ registerControl: registerControl2 }) => {
+        const self = plugin;
+        registerControl2(
+          "playlist-previous",
+          () => new PlaylistSkipButton(self, "previous")
+        );
+        registerControl2("playlist-next", () => new PlaylistSkipButton(self, "next"));
+        registerControl2(
+          "playlist",
+          () => new PlaylistPanel(self, {
+            onSelect: (index2) => self.play(index2)
+          })
+        );
+      }).catch(() => {
+        api?.logger.debug("@scarlett-player/ui not present, playlist controls not registered");
+      });
+      const onKeyDown = (event) => {
+        if (!api || !api.container.contains(document.activeElement)) return;
+        const activeEl = document.activeElement;
+        if (activeEl instanceof HTMLInputElement || activeEl instanceof HTMLTextAreaElement || activeEl instanceof HTMLSelectElement || activeEl?.isContentEditable) {
+          return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) return;
+        if (event.key === "n" || event.key === "N") {
+          event.preventDefault();
+          plugin.next();
+        } else if (event.key === "p" || event.key === "P") {
+          event.preventDefault();
+          plugin.previous();
+        }
+      };
+      document.addEventListener("keydown", onKeyDown);
       api.onDestroy(() => {
         unsubEnded();
+        document.removeEventListener("keydown", onKeyDown);
         if (advanceTimeout) {
           clearTimeout(advanceTimeout);
           advanceTimeout = null;
@@ -7939,10 +8371,10 @@ function createPlaylistPlugin(config) {
       const newTracks = Array.isArray(trackOrTracks) ? trackOrTracks : [trackOrTracks];
       newTracks.forEach((track) => {
         const normalizedTrack = { ...track, id: track.id || generateId() };
-        const index = tracks.length;
+        const index2 = tracks.length;
         tracks.push(normalizedTrack);
-        api?.emit("playlist:add", { track: normalizedTrack, index });
-        api?.logger.debug("Track added", { title: normalizedTrack.title, index });
+        api?.emit("playlist:add", { track: normalizedTrack, index: index2 });
+        api?.logger.debug("Track added", { title: normalizedTrack.title, index: index2 });
       });
       if (shuffle) {
         const startIndex = tracks.length - newTracks.length;
@@ -7953,9 +8385,9 @@ function createPlaylistPlugin(config) {
       }
       persistPlaylist();
     },
-    insert(index, track) {
+    insert(index2, track) {
       const normalizedTrack = { ...track, id: track.id || generateId() };
-      const clampedIndex = Math.max(0, Math.min(index, tracks.length));
+      const clampedIndex = Math.max(0, Math.min(index2, tracks.length));
       tracks.splice(clampedIndex, 0, normalizedTrack);
       if (currentIndex >= clampedIndex) {
         currentIndex++;
@@ -7969,33 +8401,33 @@ function createPlaylistPlugin(config) {
       persistPlaylist();
     },
     remove(idOrIndex) {
-      let index;
+      let index2;
       if (typeof idOrIndex === "string") {
-        index = tracks.findIndex((t) => t.id === idOrIndex);
-        if (index === -1) {
+        index2 = tracks.findIndex((t) => t.id === idOrIndex);
+        if (index2 === -1) {
           api?.logger.warn("Track not found", { id: idOrIndex });
           return;
         }
       } else {
-        index = idOrIndex;
+        index2 = idOrIndex;
       }
-      if (index < 0 || index >= tracks.length) {
-        api?.logger.warn("Invalid track index", { index });
+      if (index2 < 0 || index2 >= tracks.length) {
+        api?.logger.warn("Invalid track index", { index: index2 });
         return;
       }
-      const [removedTrack] = tracks.splice(index, 1);
-      if (index < currentIndex) {
+      const [removedTrack] = tracks.splice(index2, 1);
+      if (index2 < currentIndex) {
         currentIndex--;
-      } else if (index === currentIndex) {
+      } else if (index2 === currentIndex) {
         if (currentIndex >= tracks.length) {
           currentIndex = tracks.length - 1;
         }
         emitChange();
       }
       if (shuffle) {
-        shuffleOrder = shuffleOrder.filter((i) => i !== index).map((i) => i > index ? i - 1 : i);
+        shuffleOrder = shuffleOrder.filter((i) => i !== index2).map((i) => i > index2 ? i - 1 : i);
       }
-      api?.emit("playlist:remove", { track: removedTrack, index });
+      api?.emit("playlist:remove", { track: removedTrack, index: index2 });
       persistPlaylist();
     },
     clear() {
@@ -8006,23 +8438,23 @@ function createPlaylistPlugin(config) {
       emitChange();
     },
     play(idOrIndex) {
-      let index;
+      let index2;
       if (idOrIndex === void 0) {
-        index = currentIndex >= 0 ? currentIndex : shuffle ? getActualIndex(0) : 0;
+        index2 = currentIndex >= 0 ? currentIndex : shuffle ? getActualIndex(0) : 0;
       } else if (typeof idOrIndex === "string") {
-        index = tracks.findIndex((t) => t.id === idOrIndex);
-        if (index === -1) {
+        index2 = tracks.findIndex((t) => t.id === idOrIndex);
+        if (index2 === -1) {
           api?.logger.warn("Track not found", { id: idOrIndex });
           return;
         }
       } else {
-        index = idOrIndex;
+        index2 = idOrIndex;
       }
       if (tracks.length === 0) {
         api?.logger.warn("Playlist is empty");
         return;
       }
-      setCurrentTrack(index);
+      setCurrentTrack(index2);
     },
     next() {
       const nextIdx = getNextIndex();
@@ -8965,8 +9397,8 @@ async function createEmbedPlayer(container, config, pluginCreators2, availableTy
     const plugins = [pluginCreators2.hls()];
     if (pluginCreators2.playlist && config.playlist?.length) {
       plugins.push(pluginCreators2.playlist({
-        items: config.playlist.map((item, index) => ({
-          id: `item-${index}`,
+        items: config.playlist.map((item, index2) => ({
+          id: `item-${index2}`,
           src: item.src,
           title: item.title,
           artist: item.artist,