@scarlett-player/ui 0.5.3 → 1.0.1

package/dist/index.cjs

@@ -2498,6 +2498,39 @@ var CaptionsButton = class {
   }
 };
 
+// src/controls/BandwidthIndicator.ts
+var ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/><line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" stroke-width="2"/></svg>`;
+var BandwidthIndicator = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-bandwidth-indicator" });
+    this.el.innerHTML = ICON_SVG;
+    this.el.setAttribute("aria-label", "Bandwidth is limiting video quality");
+    this.el.setAttribute("title", "Bandwidth is limiting video quality");
+    this.el.style.display = "none";
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const bandwidth = this.api.getState("bandwidth");
+    const qualities = this.api.getState("qualities");
+    if (!bandwidth || !qualities || qualities.length === 0) {
+      this.el.style.display = "none";
+      return;
+    }
+    const highestBitrate = Math.max(...qualities.map((q) => q.bitrate));
+    if (highestBitrate > 0 && bandwidth < highestBitrate) {
+      this.el.style.display = "";
+    } else {
+      this.el.style.display = "none";
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
 // src/index.ts
 var DEFAULT_LAYOUT = [
   "play",
@@ -2506,6 +2539,7 @@ var DEFAULT_LAYOUT = [
   "volume",
   "time",
   "live-indicator",
+  "bandwidth-indicator",
   "spacer",
   "settings",
   "captions",
@@ -2546,6 +2580,8 @@ function uiPlugin(config = {}) {
         return new TimeDisplay(api);
       case "live-indicator":
         return new LiveIndicator(api);
+      case "bandwidth-indicator":
+        return new BandwidthIndicator(api);
       case "quality":
         return new QualityMenu(api);
       case "settings":

package/dist/index.d.cts

@@ -7,7 +7,7 @@ import { Plugin } from '@scarlett-player/core';
 /**
  * Available control slot identifiers.
  */
-type ControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer';
+type ControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer' | 'bandwidth-indicator';
 /**
  * Layout configuration for the control bar.
  */

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { Plugin } from '@scarlett-player/core';
 /**
  * Available control slot identifiers.
  */
-type ControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer';
+type ControlSlot = 'play' | 'skip-backward' | 'skip-forward' | 'volume' | 'progress' | 'time' | 'live-indicator' | 'quality' | 'settings' | 'captions' | 'airplay' | 'chromecast' | 'pip' | 'fullscreen' | 'spacer' | 'bandwidth-indicator';
 /**
  * Layout configuration for the control bar.
  */

package/dist/index.js

@@ -2467,6 +2467,39 @@ var CaptionsButton = class {
   }
 };
 
+// src/controls/BandwidthIndicator.ts
+var ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/><line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" stroke-width="2"/></svg>`;
+var BandwidthIndicator = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-bandwidth-indicator" });
+    this.el.innerHTML = ICON_SVG;
+    this.el.setAttribute("aria-label", "Bandwidth is limiting video quality");
+    this.el.setAttribute("title", "Bandwidth is limiting video quality");
+    this.el.style.display = "none";
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const bandwidth = this.api.getState("bandwidth");
+    const qualities = this.api.getState("qualities");
+    if (!bandwidth || !qualities || qualities.length === 0) {
+      this.el.style.display = "none";
+      return;
+    }
+    const highestBitrate = Math.max(...qualities.map((q) => q.bitrate));
+    if (highestBitrate > 0 && bandwidth < highestBitrate) {
+      this.el.style.display = "";
+    } else {
+      this.el.style.display = "none";
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
 // src/index.ts
 var DEFAULT_LAYOUT = [
   "play",
@@ -2475,6 +2508,7 @@ var DEFAULT_LAYOUT = [
   "volume",
   "time",
   "live-indicator",
+  "bandwidth-indicator",
   "spacer",
   "settings",
   "captions",
@@ -2515,6 +2549,8 @@ function uiPlugin(config = {}) {
         return new TimeDisplay(api);
       case "live-indicator":
         return new LiveIndicator(api);
+      case "bandwidth-indicator":
+        return new BandwidthIndicator(api);
       case "quality":
         return new QualityMenu(api);
       case "settings":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/ui",
-  "version": "0.5.3",
+  "version": "1.0.1",
   "description": "UI Controls Plugin for Scarlett Player",
   "type": "module",
   "main": "dist/index.cjs",
@@ -22,14 +22,14 @@
     "dist"
   ],
   "peerDependencies": {
-    "@scarlett-player/core": "^0.5.3"
+    "@scarlett-player/core": "^1.0.1"
   },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
     "jsdom": "^24.0.0",
-    "@scarlett-player/core": "0.5.3"
+    "@scarlett-player/core": "1.0.1"
   },
   "keywords": [
     "video",