@scarlett-player/playlist 1.5.1 → 1.6.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,15 +17,298 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  PLAYLIST_ICONS: () => PLAYLIST_ICONS,
+  PlaylistPanel: () => PlaylistPanel,
+  PlaylistSkipButton: () => PlaylistSkipButton,
   createPlaylistPlugin: () => createPlaylistPlugin,
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
+
+// src/controls.ts
+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, index) => {
+      item.classList.toggle("sp-playlist__item--active", index === currentIndex);
+      item.setAttribute("aria-current", index === currentIndex ? "true" : "false");
+    });
+  }
+  renderPanel(tracks, currentIndex) {
+    this.panel.textContent = "";
+    tracks.forEach((track, index) => {
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "sp-playlist__item";
+      item.setAttribute("role", "menuitem");
+      item.setAttribute("aria-current", index === currentIndex ? "true" : "false");
+      if (index === currentIndex) {
+        item.classList.add("sp-playlist__item--active");
+      }
+      const position = document.createElement("span");
+      position.className = "sp-playlist__position";
+      position.textContent = String(index + 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 ${index + 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(index);
+        this.setOpen(false);
+      });
+      this.panel.appendChild(item);
+    });
+  }
+};
+
+// src/styles.ts
+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;
+}
+
+// src/index.ts
 var DEFAULT_CONFIG = {
   autoAdvance: true,
   preloadNext: true,
@@ -213,8 +498,42 @@ function createPlaylistPlugin(config) {
           api?.emit("playlist:ended", void 0);
         }
       });
+      injectStyles();
+      void import("@scarlett-player/ui").then(({ registerControl }) => {
+        const self = plugin;
+        registerControl(
+          "playlist-previous",
+          () => new PlaylistSkipButton(self, "previous")
+        );
+        registerControl("playlist-next", () => new PlaylistSkipButton(self, "next"));
+        registerControl(
+          "playlist",
+          () => new PlaylistPanel(self, {
+            onSelect: (index) => self.play(index)
+          })
+        );
+      }).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;
@@ -409,5 +728,8 @@ function createPlaylistPlugin(config) {
 var index_default = createPlaylistPlugin;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PLAYLIST_ICONS,
+  PlaylistPanel,
+  PlaylistSkipButton,
   createPlaylistPlugin
 });

package/dist/index.d.cts

@@ -156,6 +156,70 @@ interface IPlaylistPlugin extends Plugin<PlaylistPluginConfig> {
     getTrack(id: string): PlaylistTrack | null;
 }
 
+/**
+ * Playlist control-bar controls.
+ *
+ * Three controls, registered under `playlist-previous`, `playlist-next` and
+ * `playlist`. A host places them by listing those ids in its control layout.
+ *
+ * These exist for a concrete viewer problem: an event VOD that opens with a
+ * copyright card, a sponsor reel or a preshow the viewer has already seen.
+ * Without a skip control the only way past it is to guess with the scrubber.
+ */
+
+/** Matches the Control interface in @scarlett-player/ui without importing it. */
+interface PlaylistControl {
+    render(): HTMLElement;
+    update(): void;
+    destroy(): void;
+}
+/** 24px icons on a 0 0 24 24 viewBox, matching @scarlett-player/ui. */
+declare const PLAYLIST_ICONS: Record<string, string>;
+/**
+ * Skip to the next or previous playlist item.
+ *
+ * Disabled rather than hidden at the ends of the queue: a control that vanishes
+ * mid-session moves everything next to it, and the viewer loses their place.
+ */
+declare class PlaylistSkipButton implements PlaylistControl {
+    private plugin;
+    private direction;
+    private el;
+    private readonly clickHandler;
+    constructor(plugin: IPlaylistPlugin, direction: 'next' | 'previous');
+    render(): HTMLElement;
+    update(): void;
+    destroy(): void;
+}
+/** Options for {@link PlaylistPanel}. */
+interface PlaylistPanelOptions {
+    /** Called with the index the viewer picked. */
+    onSelect: (index: number) => void;
+}
+/**
+ * A button that opens the queue as a list, so a viewer can see what else is
+ * there rather than stepping through blind.
+ */
+declare class PlaylistPanel implements PlaylistControl {
+    private plugin;
+    private options;
+    private el;
+    private button;
+    private panel;
+    private open;
+    private renderedIds;
+    private toggleHandler;
+    private documentClickHandler;
+    private keydownHandler;
+    constructor(plugin: IPlaylistPlugin, options: PlaylistPanelOptions);
+    render(): HTMLElement;
+    update(): void;
+    destroy(): void;
+    private setOpen;
+    private markActive;
+    private renderPanel;
+}
+
 /**
  * Playlist Plugin for Scarlett Player
  *
@@ -202,4 +266,4 @@ interface IPlaylistPlugin extends Plugin<PlaylistPluginConfig> {
  */
 declare function createPlaylistPlugin(config?: Partial<PlaylistPluginConfig>): IPlaylistPlugin;
 
-export { type IPlaylistPlugin, type PlaylistPluginConfig, type PlaylistState, type PlaylistTrack, type RepeatMode, createPlaylistPlugin, createPlaylistPlugin as default };
+export { type IPlaylistPlugin, PLAYLIST_ICONS, type PlaylistControl, PlaylistPanel, type PlaylistPanelOptions, type PlaylistPluginConfig, PlaylistSkipButton, type PlaylistState, type PlaylistTrack, type RepeatMode, createPlaylistPlugin, createPlaylistPlugin as default };

package/dist/index.d.ts

@@ -156,6 +156,70 @@ interface IPlaylistPlugin extends Plugin<PlaylistPluginConfig> {
     getTrack(id: string): PlaylistTrack | null;
 }
 
+/**
+ * Playlist control-bar controls.
+ *
+ * Three controls, registered under `playlist-previous`, `playlist-next` and
+ * `playlist`. A host places them by listing those ids in its control layout.
+ *
+ * These exist for a concrete viewer problem: an event VOD that opens with a
+ * copyright card, a sponsor reel or a preshow the viewer has already seen.
+ * Without a skip control the only way past it is to guess with the scrubber.
+ */
+
+/** Matches the Control interface in @scarlett-player/ui without importing it. */
+interface PlaylistControl {
+    render(): HTMLElement;
+    update(): void;
+    destroy(): void;
+}
+/** 24px icons on a 0 0 24 24 viewBox, matching @scarlett-player/ui. */
+declare const PLAYLIST_ICONS: Record<string, string>;
+/**
+ * Skip to the next or previous playlist item.
+ *
+ * Disabled rather than hidden at the ends of the queue: a control that vanishes
+ * mid-session moves everything next to it, and the viewer loses their place.
+ */
+declare class PlaylistSkipButton implements PlaylistControl {
+    private plugin;
+    private direction;
+    private el;
+    private readonly clickHandler;
+    constructor(plugin: IPlaylistPlugin, direction: 'next' | 'previous');
+    render(): HTMLElement;
+    update(): void;
+    destroy(): void;
+}
+/** Options for {@link PlaylistPanel}. */
+interface PlaylistPanelOptions {
+    /** Called with the index the viewer picked. */
+    onSelect: (index: number) => void;
+}
+/**
+ * A button that opens the queue as a list, so a viewer can see what else is
+ * there rather than stepping through blind.
+ */
+declare class PlaylistPanel implements PlaylistControl {
+    private plugin;
+    private options;
+    private el;
+    private button;
+    private panel;
+    private open;
+    private renderedIds;
+    private toggleHandler;
+    private documentClickHandler;
+    private keydownHandler;
+    constructor(plugin: IPlaylistPlugin, options: PlaylistPanelOptions);
+    render(): HTMLElement;
+    update(): void;
+    destroy(): void;
+    private setOpen;
+    private markActive;
+    private renderPanel;
+}
+
 /**
  * Playlist Plugin for Scarlett Player
  *
@@ -202,4 +266,4 @@ interface IPlaylistPlugin extends Plugin<PlaylistPluginConfig> {
  */
 declare function createPlaylistPlugin(config?: Partial<PlaylistPluginConfig>): IPlaylistPlugin;
 
-export { type IPlaylistPlugin, type PlaylistPluginConfig, type PlaylistState, type PlaylistTrack, type RepeatMode, createPlaylistPlugin, createPlaylistPlugin as default };
+export { type IPlaylistPlugin, PLAYLIST_ICONS, type PlaylistControl, PlaylistPanel, type PlaylistPanelOptions, type PlaylistPluginConfig, PlaylistSkipButton, type PlaylistState, type PlaylistTrack, type RepeatMode, createPlaylistPlugin, createPlaylistPlugin as default };

package/dist/index.js

@@ -1,3 +1,273 @@
+// src/controls.ts
+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, index) => {
+      item.classList.toggle("sp-playlist__item--active", index === currentIndex);
+      item.setAttribute("aria-current", index === currentIndex ? "true" : "false");
+    });
+  }
+  renderPanel(tracks, currentIndex) {
+    this.panel.textContent = "";
+    tracks.forEach((track, index) => {
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "sp-playlist__item";
+      item.setAttribute("role", "menuitem");
+      item.setAttribute("aria-current", index === currentIndex ? "true" : "false");
+      if (index === currentIndex) {
+        item.classList.add("sp-playlist__item--active");
+      }
+      const position = document.createElement("span");
+      position.className = "sp-playlist__position";
+      position.textContent = String(index + 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 ${index + 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(index);
+        this.setOpen(false);
+      });
+      this.panel.appendChild(item);
+    });
+  }
+};
+
+// src/styles.ts
+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;
+}
+
 // src/index.ts
 var DEFAULT_CONFIG = {
   autoAdvance: true,
@@ -188,8 +458,42 @@ function createPlaylistPlugin(config) {
           api?.emit("playlist:ended", void 0);
         }
       });
+      injectStyles();
+      void import("@scarlett-player/ui").then(({ registerControl }) => {
+        const self = plugin;
+        registerControl(
+          "playlist-previous",
+          () => new PlaylistSkipButton(self, "previous")
+        );
+        registerControl("playlist-next", () => new PlaylistSkipButton(self, "next"));
+        registerControl(
+          "playlist",
+          () => new PlaylistPanel(self, {
+            onSelect: (index) => self.play(index)
+          })
+        );
+      }).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;
@@ -383,6 +687,9 @@ function createPlaylistPlugin(config) {
 }
 var index_default = createPlaylistPlugin;
 export {
+  PLAYLIST_ICONS,
+  PlaylistPanel,
+  PlaylistSkipButton,
   createPlaylistPlugin,
   index_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/playlist",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Playlist Plugin for Scarlett Player - Queue management, shuffle, repeat, and gapless playback",
   "type": "module",
   "main": "dist/index.cjs",
@@ -22,14 +22,16 @@
     "dist"
   ],
   "peerDependencies": {
-    "@scarlett-player/core": "^1.0.3"
+    "@scarlett-player/core": "^1.0.3",
+    "@scarlett-player/ui": "^1.5.0"
   },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
     "jsdom": "^24.0.0",
-    "@scarlett-player/core": "1.5.1"
+    "@scarlett-player/core": "1.6.0",
+    "@scarlett-player/ui": "1.6.0"
   },
   "keywords": [
     "video",
@@ -53,6 +55,11 @@
     "url": "https://github.com/Hackney-Enterprises-Inc/scarlett-player/issues"
   },
   "homepage": "https://scarlettplayer.com",
+  "peerDependenciesMeta": {
+    "@scarlett-player/ui": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",
     "dev": "tsup src/index.ts --format esm,cjs --dts --watch",