@scarlett-player/ui 1.1.1 → 1.4.0

package/README.md

@@ -30,9 +30,14 @@ const player = new ScarlettPlayer({
 
 - Play/pause, seek, volume controls
 - Fullscreen toggle
+- Picture-in-Picture toggle (disabled until media metadata is loaded; hidden
+  when the browser has no PiP support; Safari webkit presentation mode
+  supported)
 - Quality selector
 - Progress bar with buffering indicator
 - Time display (current / duration)
+- Error overlay with viewer-friendly copy per error code, a Try Again action,
+  and a reconnecting state while the player self-heals
 - Keyboard shortcuts
 - Customizable theming
 - Auto-hide controls

package/dist/index.cjs

@@ -23,9 +23,13 @@ __export(index_exports, {
   default: () => index_default,
   formatLiveTime: () => formatLiveTime,
   formatTime: () => formatTime,
+  getControlFactory: () => getControlFactory,
   icons: () => icons,
+  registerControl: () => registerControl,
+  resetControlRegistry: () => resetControlRegistry,
   styles: () => styles,
-  uiPlugin: () => uiPlugin
+  uiPlugin: () => uiPlugin,
+  unregisterControl: () => unregisterControl
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1802,25 +1806,38 @@ var CastButton = class {
 var PipButton = class {
   constructor(api) {
     this.clickHandler = () => {
-      this.toggle();
+      void this.toggle().catch(() => {
+      });
     };
     this.api = api;
-    const video = document.createElement("video");
-    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in video;
+    const probe = document.createElement("video");
+    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in probe;
     this.el = createButton("sp-pip", "Picture-in-Picture", icons.pip);
     this.el.addEventListener("click", this.clickHandler);
     if (!this.supported) {
       this.el.style.display = "none";
+    } else {
+      this.el.disabled = true;
+      this.el.setAttribute("aria-disabled", "true");
     }
   }
   render() {
     return this.el;
   }
+  /** Whether the media element is ready to enter PiP (metadata loaded). */
+  isMediaReady() {
+    const video = getVideo(this.api.container);
+    return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
+  }
   update() {
     if (!this.supported) return;
-    const pip = this.api.getState("pip");
-    this.el.setAttribute("aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
-    this.el.classList.toggle("sp-pip--active", !!pip);
+    const pip = !!this.api.getState("pip");
+    const enabled = pip || this.isMediaReady();
+    this.el.disabled = !enabled;
+    setAttr(this.el, "aria-disabled", String(!enabled));
+    setHTML(this.el, pip ? icons.exitPip : icons.pip);
+    setAttr(this.el, "aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
+    this.el.classList.toggle("sp-pip--active", pip);
   }
   async toggle() {
     const video = getVideo(this.api.container);
@@ -1828,8 +1845,14 @@ var PipButton = class {
       this.api.logger.warn("PiP: video element not found");
       return;
     }
+    const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+    if (!isInPip && video.readyState < HTMLMediaElement.HAVE_METADATA) {
+      this.api.logger.debug("PiP: ignored, media not ready", {
+        readyState: video.readyState
+      });
+      return;
+    }
     try {
-      const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
       if (isInPip) {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
@@ -1846,7 +1869,8 @@ var PipButton = class {
         this.api.logger.debug("PiP: entered");
       }
     } catch (e) {
-      this.api.logger.warn("PiP: failed", { error: e.message });
+      const message = e instanceof Error ? e.message : String(e);
+      this.api.logger.warn("PiP: failed", { error: message });
     }
   }
   destroy() {
@@ -1929,6 +1953,12 @@ function getUserMessage(error) {
         return "Unable to load video. Please try again.";
       case "PLAYBACK_FAILED":
         return "Playback stopped unexpectedly. Please try again.";
+      case "MEDIA_APPEND_ERROR":
+        return "Video playback was interrupted. Please try again.";
+      case "MEDIA_BUFFER_FULL":
+        return "Your device is low on video memory. Close other apps or tabs and try again.";
+      case "PLAYLIST_INVALID":
+        return "The stream is temporarily unavailable. Please try again.";
     }
   }
   const msg = error.message?.toLowerCase() || "";
@@ -2589,6 +2619,32 @@ var BandwidthIndicator = class {
   }
 };
 
+// src/control-registry.ts
+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 unregisterControl(id) {
+  return registry.delete(id);
+}
+function getControlFactory(id) {
+  return registry.get(id) ?? null;
+}
+function onControlRegistered(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function resetControlRegistry() {
+  registry.clear();
+  listeners.clear();
+}
+
 // src/index.ts
 var DEFAULT_LAYOUT = [
   "play",
@@ -2618,6 +2674,7 @@ function uiPlugin(config = {}) {
   let controls = [];
   let hideTimeout = null;
   let stateUnsubscribe = null;
+  let controlRegistryUnsubscribe = null;
   let errorUnsubscribe = null;
   let reconnectingUnsubscribe = null;
   let recoveredUnsubscribe = null;
@@ -2659,9 +2716,42 @@ function uiPlugin(config = {}) {
         return new FullscreenButton(api);
       case "spacer":
         return new Spacer();
-      default:
+      default: {
+        const factory = getControlFactory(slot);
+        if (factory) {
+          try {
+            return factory(api);
+          } catch (error) {
+            api.logger.error(`Control factory for "${slot}" threw`, { error });
+            return null;
+          }
+        }
+        api.logger.warn(`Unknown control slot: ${slot}`);
         return null;
+      }
+    }
+  };
+  const populateControlBar = () => {
+    if (!controlBar) {
+      return;
+    }
+    for (const slot of layout) {
+      const control = createControl(slot);
+      if (control) {
+        controls.push(control);
+        controlBar.appendChild(control.render());
+      }
+    }
+  };
+  const rebuildControlBar = () => {
+    if (!controlBar) {
+      return;
     }
+    controls.forEach((c) => c.destroy());
+    controls = [];
+    controlBar.replaceChildren();
+    populateControlBar();
+    updateControls();
   };
   const updateControls = () => {
     controls.forEach((c) => c.update());
@@ -2730,7 +2820,12 @@ function uiPlugin(config = {}) {
       case " ":
       case "k":
         e.preventDefault();
-        video.paused ? video.play() : video.pause();
+        if (video.paused) {
+          video.play().catch(() => {
+          });
+        } else {
+          video.pause();
+        }
         break;
       case "m":
         e.preventDefault();
@@ -2739,9 +2834,11 @@ function uiPlugin(config = {}) {
       case "f":
         e.preventDefault();
         if (document.fullscreenElement) {
-          document.exitFullscreen();
+          document.exitFullscreen().catch(() => {
+          });
         } else {
-          api.container.requestFullscreen?.();
+          api.container.requestFullscreen?.().catch(() => {
+          });
         }
         break;
       case "ArrowLeft":
@@ -2828,14 +2925,15 @@ function uiPlugin(config = {}) {
       controlBar.className = isPlaying ? "sp-controls sp-controls--hidden" : "sp-controls sp-controls--visible";
       controlBar.setAttribute("role", "toolbar");
       controlBar.setAttribute("aria-label", "Video controls");
-      for (const slot of layout) {
-        const control = createControl(slot);
-        if (control) {
-          controls.push(control);
-          controlBar.appendChild(control.render());
-        }
-      }
+      populateControlBar();
       container.appendChild(controlBar);
+      controlRegistryUnsubscribe = onControlRegistered((id) => {
+        if (!layout.includes(id)) {
+          return;
+        }
+        api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
+        rebuildControlBar();
+      });
       container.addEventListener("mousemove", handleInteraction);
       container.addEventListener("mouseenter", handleInteraction);
       container.addEventListener("mouseleave", handleMouseLeave);
@@ -2881,6 +2979,8 @@ function uiPlugin(config = {}) {
       }
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("fullscreenchange", scheduleUpdate);
+      controlRegistryUnsubscribe?.();
+      controlRegistryUnsubscribe = null;
       controls.forEach((c) => c.destroy());
       controls = [];
       progressBar?.destroy();
@@ -2937,7 +3037,11 @@ var index_default = uiPlugin;
 0 && (module.exports = {
   formatLiveTime,
   formatTime,
+  getControlFactory,
   icons,
+  registerControl,
+  resetControlRegistry,
   styles,
-  uiPlugin
+  uiPlugin,
+  unregisterControl
 });

package/dist/index.d.cts

@@ -1,13 +1,26 @@
-import { Plugin } from '@scarlett-player/core';
+import { Plugin, IPluginAPI } from '@scarlett-player/core';
 
 /**
  * UI Controls Plugin Types
  */
 
 /**
- * Available control slot identifiers.
+ * Control slots this package implements itself.
  */
-type ControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer' | 'bandwidth-indicator';
+type BuiltinControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer' | 'bandwidth-indicator';
+/**
+ * A control slot: a built-in, or any id a plugin registered through
+ * {@link registerControl}.
+ *
+ * `string & {}` keeps editor autocomplete listing the built-ins while still
+ * accepting custom ids — a plain `| string` would collapse the union and lose
+ * the suggestions.
+ */
+type ControlSlot = BuiltinControlSlot | (string & {});
+/**
+ * Builds a control instance. Receives the same plugin API the built-ins get.
+ */
+type ControlFactory = (api: IPluginAPI) => Control;
 /**
  * Layout configuration for the control bar.
  */
@@ -65,6 +78,65 @@ interface IUIPlugin extends Plugin {
     getControlBar(): HTMLElement | null;
 }
 
+/**
+ * Custom control registry.
+ *
+ * The built-in controls are created by a switch in the UI plugin. Anything a
+ * plugin package contributes is registered here instead, so a control-bar
+ * button no longer requires editing this package.
+ *
+ * The registry is module-level and therefore shared by every player instance on
+ * the page. That matches how plugin packages register — once, at import time or
+ * in `init()` — and the factory receives the per-instance `IPluginAPI`, so the
+ * controls themselves stay properly scoped to their player.
+ */
+
+/**
+ * Register a control factory under a slot id.
+ *
+ * The id only takes effect for players whose layout lists it — registering
+ * alone never adds a button anywhere. Hosts opt controls in through
+ * `uiPlugin({ controls: [...] })`.
+ *
+ * Registering an id that already exists replaces the factory and re-notifies,
+ * which keeps hot-reload workable.
+ *
+ * @param id - Slot id, conventionally the plugin's own name
+ * @param factory - Builds the control for a given player
+ *
+ * @example
+ * ```ts
+ * registerControl('share', (api) => new ShareButton(api));
+ * ```
+ */
+declare function registerControl(id: string, factory: ControlFactory): void;
+/**
+ * Remove a registered control factory.
+ *
+ * Players already showing the control keep their existing instance until they
+ * rebuild; this only stops future ones being created.
+ *
+ * @param id - Slot id to remove
+ * @returns Whether a factory was registered under that id
+ */
+declare function unregisterControl(id: string): boolean;
+/**
+ * Look up a registered factory.
+ *
+ * @param id - Slot id
+ * @returns The factory, or null when nothing is registered for that id
+ */
+declare function getControlFactory(id: string): ControlFactory | null;
+/**
+ * Clear all registrations and listeners.
+ *
+ * Test-support only — the registry is module-level, so without this a
+ * registration in one test leaks into the next.
+ *
+ * @internal
+ */
+declare function resetControlRegistry(): void;
+
 /**
  * SVG Icons for UI Controls
  *
@@ -148,4 +220,4 @@ declare function formatLiveTime(behindLive: number): string;
  */
 declare function uiPlugin(config?: UIPluginConfig): IUIPlugin;
 
-export { type Control, type ControlSlot, type IUIPlugin, type LayoutConfig, type ThemeConfig, type UIPluginConfig, uiPlugin as default, formatLiveTime, formatTime, icons, styles, uiPlugin };
+export { type BuiltinControlSlot, type Control, type ControlFactory, type ControlSlot, type IUIPlugin, type LayoutConfig, type ThemeConfig, type UIPluginConfig, uiPlugin as default, formatLiveTime, formatTime, getControlFactory, icons, registerControl, resetControlRegistry, styles, uiPlugin, unregisterControl };

package/dist/index.d.ts

@@ -1,13 +1,26 @@
-import { Plugin } from '@scarlett-player/core';
+import { Plugin, IPluginAPI } from '@scarlett-player/core';
 
 /**
  * UI Controls Plugin Types
  */
 
 /**
- * Available control slot identifiers.
+ * Control slots this package implements itself.
  */
-type ControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer' | 'bandwidth-indicator';
+type BuiltinControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer' | 'bandwidth-indicator';
+/**
+ * A control slot: a built-in, or any id a plugin registered through
+ * {@link registerControl}.
+ *
+ * `string & {}` keeps editor autocomplete listing the built-ins while still
+ * accepting custom ids — a plain `| string` would collapse the union and lose
+ * the suggestions.
+ */
+type ControlSlot = BuiltinControlSlot | (string & {});
+/**
+ * Builds a control instance. Receives the same plugin API the built-ins get.
+ */
+type ControlFactory = (api: IPluginAPI) => Control;
 /**
  * Layout configuration for the control bar.
  */
@@ -65,6 +78,65 @@ interface IUIPlugin extends Plugin {
     getControlBar(): HTMLElement | null;
 }
 
+/**
+ * Custom control registry.
+ *
+ * The built-in controls are created by a switch in the UI plugin. Anything a
+ * plugin package contributes is registered here instead, so a control-bar
+ * button no longer requires editing this package.
+ *
+ * The registry is module-level and therefore shared by every player instance on
+ * the page. That matches how plugin packages register — once, at import time or
+ * in `init()` — and the factory receives the per-instance `IPluginAPI`, so the
+ * controls themselves stay properly scoped to their player.
+ */
+
+/**
+ * Register a control factory under a slot id.
+ *
+ * The id only takes effect for players whose layout lists it — registering
+ * alone never adds a button anywhere. Hosts opt controls in through
+ * `uiPlugin({ controls: [...] })`.
+ *
+ * Registering an id that already exists replaces the factory and re-notifies,
+ * which keeps hot-reload workable.
+ *
+ * @param id - Slot id, conventionally the plugin's own name
+ * @param factory - Builds the control for a given player
+ *
+ * @example
+ * ```ts
+ * registerControl('share', (api) => new ShareButton(api));
+ * ```
+ */
+declare function registerControl(id: string, factory: ControlFactory): void;
+/**
+ * Remove a registered control factory.
+ *
+ * Players already showing the control keep their existing instance until they
+ * rebuild; this only stops future ones being created.
+ *
+ * @param id - Slot id to remove
+ * @returns Whether a factory was registered under that id
+ */
+declare function unregisterControl(id: string): boolean;
+/**
+ * Look up a registered factory.
+ *
+ * @param id - Slot id
+ * @returns The factory, or null when nothing is registered for that id
+ */
+declare function getControlFactory(id: string): ControlFactory | null;
+/**
+ * Clear all registrations and listeners.
+ *
+ * Test-support only — the registry is module-level, so without this a
+ * registration in one test leaks into the next.
+ *
+ * @internal
+ */
+declare function resetControlRegistry(): void;
+
 /**
  * SVG Icons for UI Controls
  *
@@ -148,4 +220,4 @@ declare function formatLiveTime(behindLive: number): string;
  */
 declare function uiPlugin(config?: UIPluginConfig): IUIPlugin;
 
-export { type Control, type ControlSlot, type IUIPlugin, type LayoutConfig, type ThemeConfig, type UIPluginConfig, uiPlugin as default, formatLiveTime, formatTime, icons, styles, uiPlugin };
+export { type BuiltinControlSlot, type Control, type ControlFactory, type ControlSlot, type IUIPlugin, type LayoutConfig, type ThemeConfig, type UIPluginConfig, uiPlugin as default, formatLiveTime, formatTime, getControlFactory, icons, registerControl, resetControlRegistry, styles, uiPlugin, unregisterControl };

package/dist/index.js

@@ -1771,25 +1771,38 @@ var CastButton = class {
 var PipButton = class {
   constructor(api) {
     this.clickHandler = () => {
-      this.toggle();
+      void this.toggle().catch(() => {
+      });
     };
     this.api = api;
-    const video = document.createElement("video");
-    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in video;
+    const probe = document.createElement("video");
+    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in probe;
     this.el = createButton("sp-pip", "Picture-in-Picture", icons.pip);
     this.el.addEventListener("click", this.clickHandler);
     if (!this.supported) {
       this.el.style.display = "none";
+    } else {
+      this.el.disabled = true;
+      this.el.setAttribute("aria-disabled", "true");
     }
   }
   render() {
     return this.el;
   }
+  /** Whether the media element is ready to enter PiP (metadata loaded). */
+  isMediaReady() {
+    const video = getVideo(this.api.container);
+    return !!video && video.readyState >= HTMLMediaElement.HAVE_METADATA;
+  }
   update() {
     if (!this.supported) return;
-    const pip = this.api.getState("pip");
-    this.el.setAttribute("aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
-    this.el.classList.toggle("sp-pip--active", !!pip);
+    const pip = !!this.api.getState("pip");
+    const enabled = pip || this.isMediaReady();
+    this.el.disabled = !enabled;
+    setAttr(this.el, "aria-disabled", String(!enabled));
+    setHTML(this.el, pip ? icons.exitPip : icons.pip);
+    setAttr(this.el, "aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
+    this.el.classList.toggle("sp-pip--active", pip);
   }
   async toggle() {
     const video = getVideo(this.api.container);
@@ -1797,8 +1810,14 @@ var PipButton = class {
       this.api.logger.warn("PiP: video element not found");
       return;
     }
+    const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+    if (!isInPip && video.readyState < HTMLMediaElement.HAVE_METADATA) {
+      this.api.logger.debug("PiP: ignored, media not ready", {
+        readyState: video.readyState
+      });
+      return;
+    }
     try {
-      const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
       if (isInPip) {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
@@ -1815,7 +1834,8 @@ var PipButton = class {
         this.api.logger.debug("PiP: entered");
       }
     } catch (e) {
-      this.api.logger.warn("PiP: failed", { error: e.message });
+      const message = e instanceof Error ? e.message : String(e);
+      this.api.logger.warn("PiP: failed", { error: message });
     }
   }
   destroy() {
@@ -1898,6 +1918,12 @@ function getUserMessage(error) {
         return "Unable to load video. Please try again.";
       case "PLAYBACK_FAILED":
         return "Playback stopped unexpectedly. Please try again.";
+      case "MEDIA_APPEND_ERROR":
+        return "Video playback was interrupted. Please try again.";
+      case "MEDIA_BUFFER_FULL":
+        return "Your device is low on video memory. Close other apps or tabs and try again.";
+      case "PLAYLIST_INVALID":
+        return "The stream is temporarily unavailable. Please try again.";
     }
   }
   const msg = error.message?.toLowerCase() || "";
@@ -2558,6 +2584,32 @@ var BandwidthIndicator = class {
   }
 };
 
+// src/control-registry.ts
+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 unregisterControl(id) {
+  return registry.delete(id);
+}
+function getControlFactory(id) {
+  return registry.get(id) ?? null;
+}
+function onControlRegistered(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function resetControlRegistry() {
+  registry.clear();
+  listeners.clear();
+}
+
 // src/index.ts
 var DEFAULT_LAYOUT = [
   "play",
@@ -2587,6 +2639,7 @@ function uiPlugin(config = {}) {
   let controls = [];
   let hideTimeout = null;
   let stateUnsubscribe = null;
+  let controlRegistryUnsubscribe = null;
   let errorUnsubscribe = null;
   let reconnectingUnsubscribe = null;
   let recoveredUnsubscribe = null;
@@ -2628,9 +2681,42 @@ function uiPlugin(config = {}) {
         return new FullscreenButton(api);
       case "spacer":
         return new Spacer();
-      default:
+      default: {
+        const factory = getControlFactory(slot);
+        if (factory) {
+          try {
+            return factory(api);
+          } catch (error) {
+            api.logger.error(`Control factory for "${slot}" threw`, { error });
+            return null;
+          }
+        }
+        api.logger.warn(`Unknown control slot: ${slot}`);
         return null;
+      }
+    }
+  };
+  const populateControlBar = () => {
+    if (!controlBar) {
+      return;
+    }
+    for (const slot of layout) {
+      const control = createControl(slot);
+      if (control) {
+        controls.push(control);
+        controlBar.appendChild(control.render());
+      }
+    }
+  };
+  const rebuildControlBar = () => {
+    if (!controlBar) {
+      return;
     }
+    controls.forEach((c) => c.destroy());
+    controls = [];
+    controlBar.replaceChildren();
+    populateControlBar();
+    updateControls();
   };
   const updateControls = () => {
     controls.forEach((c) => c.update());
@@ -2699,7 +2785,12 @@ function uiPlugin(config = {}) {
       case " ":
       case "k":
         e.preventDefault();
-        video.paused ? video.play() : video.pause();
+        if (video.paused) {
+          video.play().catch(() => {
+          });
+        } else {
+          video.pause();
+        }
         break;
       case "m":
         e.preventDefault();
@@ -2708,9 +2799,11 @@ function uiPlugin(config = {}) {
       case "f":
         e.preventDefault();
         if (document.fullscreenElement) {
-          document.exitFullscreen();
+          document.exitFullscreen().catch(() => {
+          });
         } else {
-          api.container.requestFullscreen?.();
+          api.container.requestFullscreen?.().catch(() => {
+          });
         }
         break;
       case "ArrowLeft":
@@ -2797,14 +2890,15 @@ function uiPlugin(config = {}) {
       controlBar.className = isPlaying ? "sp-controls sp-controls--hidden" : "sp-controls sp-controls--visible";
       controlBar.setAttribute("role", "toolbar");
       controlBar.setAttribute("aria-label", "Video controls");
-      for (const slot of layout) {
-        const control = createControl(slot);
-        if (control) {
-          controls.push(control);
-          controlBar.appendChild(control.render());
-        }
-      }
+      populateControlBar();
       container.appendChild(controlBar);
+      controlRegistryUnsubscribe = onControlRegistered((id) => {
+        if (!layout.includes(id)) {
+          return;
+        }
+        api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
+        rebuildControlBar();
+      });
       container.addEventListener("mousemove", handleInteraction);
       container.addEventListener("mouseenter", handleInteraction);
       container.addEventListener("mouseleave", handleMouseLeave);
@@ -2850,6 +2944,8 @@ function uiPlugin(config = {}) {
       }
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("fullscreenchange", scheduleUpdate);
+      controlRegistryUnsubscribe?.();
+      controlRegistryUnsubscribe = null;
       controls.forEach((c) => c.destroy());
       controls = [];
       progressBar?.destroy();
@@ -2906,7 +3002,11 @@ export {
   index_default as default,
   formatLiveTime,
   formatTime,
+  getControlFactory,
   icons,
+  registerControl,
+  resetControlRegistry,
   styles,
-  uiPlugin
+  uiPlugin,
+  unregisterControl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/ui",
-  "version": "1.1.1",
+  "version": "1.4.0",
   "description": "UI Controls Plugin for Scarlett Player",
   "type": "module",
   "main": "dist/index.cjs",
@@ -29,7 +29,7 @@
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
     "jsdom": "^24.0.0",
-    "@scarlett-player/core": "1.1.1"
+    "@scarlett-player/core": "1.4.0"
   },
   "keywords": [
     "video",