@scarlett-player/ui 1.1.1 → 1.2.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

@@ -1802,25 +1802,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 +1841,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 +1865,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 +1949,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() || "";
@@ -2730,7 +2756,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 +2770,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":

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() || "";
@@ -2699,7 +2725,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 +2739,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":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/ui",
-  "version": "1.1.1",
+  "version": "1.2.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.2.0"
   },
   "keywords": [
     "video",