@scarlett-player/watermark 1.12.0 → 1.14.0

package/README.md

@@ -1,6 +1,6 @@
 # @scarlett-player/watermark
 
-Anti-piracy watermark plugin for [Scarlett Player](https://scarlettplayer.com). Overlays text (typically the viewer's email or account id) or an image on the player, at a fixed corner or moving to a random position on a timer, with an optional delay before it first appears. The overlay is shown on play and hidden on pause and ended, so it never sits on the poster.
+Anti-piracy watermark plugin for [Scarlett Player](https://scarlettplayer.com). Overlays text (typically the viewer's email or account id) or an image on the player, at a fixed corner or moving to a random position on a timer, with an optional delay before it first appears. The overlay is hidden until the first play and hidden again on ended, so it never sits on the poster. It stays visible while paused — hiding it there would leave screenshots and screen captures unmarked.
 
 ## Installation
 
@@ -81,7 +81,7 @@ watermark?.getConfig();
 | `setOpacity(opacity)` | Set opacity, clamped to 0 to 1 |
 | `setImageHeight(height)` | Set the maximum image height in px |
 | `setPadding(padding)` | Set the edge padding in px for every edge and re-apply the current position |
-| `show()` / `hide()` | Toggle visibility without touching the timers |
+| `show()` / `hide()` | Toggle the mark's inline `visibility` without touching the timers |
 | `getConfig()` | The original config merged with the current position, opacity, image height and padding |
 
 ## Per-track watermarks
@@ -94,17 +94,19 @@ When `@scarlett-player/playlist` is present the plugin listens for `playlist:cha
 
 ## Styling
 
-The overlay is a single `div` appended to the player container with inline positioning, `pointer-events: none`, white text with a subtle shadow, and a 0.5s transition. It carries these classes for your own CSS:
+The overlay is a single `div` appended to the player container with inline positioning, `pointer-events: none`, white text with a subtle shadow, and a 0.5s transition. Visibility is driven by an inline `visibility` (`hidden` until the first play), not by the classes below, so the plugin needs no stylesheet of its own. It carries these classes for your own CSS:
 
 | Class | When |
 |---|---|
 | `sp-watermark` | Always |
-| `sp-watermark--visible` / `sp-watermark--hidden` | Current visibility |
+| `sp-watermark--visible` / `sp-watermark--hidden` | Current visibility, mirroring the inline `visibility` |
 | `sp-watermark--top-left`, `sp-watermark--top-right`, `sp-watermark--bottom-left`, `sp-watermark--bottom-right`, `sp-watermark--center` | Current position, applied after the first `setPosition()` or dynamic move |
 | `sp-watermark--dynamic` | Present when `dynamic` is on, applied after the first position change |
 
 The element also has a `data-position` attribute holding the current position. No CSS custom properties are used.
 
+A `MutationObserver` on the player container re-attaches the overlay if it is removed and restores its `opacity`, `visibility`, `pointer-events`, `position` and `z-index` if its inline style is edited. It restores the values the plugin last applied — the ones your `setOpacity()` / `hide()` calls set, not the original config — and it only watches the overlay's own style, so styling anything else inside the container is unaffected.
+
 ## Events
 
 The plugin emits no events. It listens to `playback:play`, `playback:pause`, `playback:ended` and `playlist:change`.

package/dist/index.cjs

@@ -26,10 +26,18 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/version.ts
-var PKG_VERSION = true ? "1.12.0" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.13.0" : "0.0.0-dev";
 
 // src/index.ts
 var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
+function clampOpacity(value, fallback = 0.5) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(0, Math.min(1, value));
+}
+function clampPx(value, floor, fallback) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(floor, value);
+}
 function getPositionStyles(padding, bottomPadding) {
   return {
     "top-left": `top:${padding}px;left:${padding}px;`,
@@ -45,11 +53,12 @@ function createWatermarkPlugin(config = {}) {
   let dynamicTimer = null;
   let showDelayTimer = null;
   let currentPosition = config.position || "bottom-right";
-  const opacity = config.opacity ?? 0.5;
+  let currentOpacity = clampOpacity(config.opacity ?? 0.5);
+  let currentVisible = false;
   const fontSize = config.fontSize ?? 14;
-  let currentImageHeight = config.imageHeight ?? 40;
-  let currentPadding = config.padding ?? 10;
-  let currentBottomPadding = config.padding ?? 40;
+  let currentImageHeight = clampPx(config.imageHeight ?? 40, 1, 40);
+  let currentPadding = clampPx(config.padding ?? 10, 0, 10);
+  let currentBottomPadding = clampPx(config.padding ?? 40, 0, 40);
   const dynamic = config.dynamic ?? false;
   const dynamicInterval = config.dynamicInterval ?? 1e4;
   const showDelay = config.showDelay ?? 0;
@@ -60,7 +69,7 @@ function createWatermarkPlugin(config = {}) {
   const createElement = () => {
     const el = document.createElement("div");
     el.className = "sp-watermark sp-watermark--hidden";
-    el.style.cssText = `position:absolute;z-index:10;pointer-events:none;opacity:${opacity};font-size:${fontSize}px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);font-family:sans-serif;transition:all 0.5s ease;${positionStyles[currentPosition]}`;
+    el.style.cssText = `position:absolute;z-index:10;pointer-events:none;visibility:${currentVisible ? "visible" : "hidden"};opacity:${currentOpacity};font-size:${fontSize}px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);font-family:sans-serif;transition:all 0.5s ease;${positionStyles[currentPosition]}`;
     el.setAttribute("data-position", currentPosition);
     updateContent(el);
     return el;
@@ -106,8 +115,7 @@ function createWatermarkPlugin(config = {}) {
       }
     });
     element.setAttribute("data-position", position);
-    const isVisible = element.classList.contains("sp-watermark--visible");
-    const visClass = isVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
+    const visClass = currentVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
     element.className = `sp-watermark sp-watermark--${position}${visClass}${dynamic ? " sp-watermark--dynamic" : ""}`;
   };
   const randomizePosition = () => {
@@ -116,12 +124,16 @@ function createWatermarkPlugin(config = {}) {
     setPosition(next);
   };
   const show = () => {
+    currentVisible = true;
     if (!element) return;
+    element.style.visibility = "visible";
     element.classList.remove("sp-watermark--hidden");
     element.classList.add("sp-watermark--visible");
   };
   const hide = () => {
+    currentVisible = false;
     if (!element) return;
+    element.style.visibility = "hidden";
     element.classList.remove("sp-watermark--visible");
     element.classList.add("sp-watermark--hidden");
   };
@@ -175,11 +187,18 @@ function createWatermarkPlugin(config = {}) {
               }
             }
           } else if (mutation.type === "attributes" && mutation.attributeName === "style") {
-            if (element) {
-              element.style.opacity = String(opacity);
-              element.style.pointerEvents = "none";
-              element.style.position = "absolute";
-              element.style.zIndex = "10";
+            if (mutation.target !== element) continue;
+            const restore = [
+              ["opacity", String(currentOpacity)],
+              ["visibility", currentVisible ? "visible" : "hidden"],
+              ["pointer-events", "none"],
+              ["position", "absolute"],
+              ["z-index", "10"]
+            ];
+            for (const [prop, value] of restore) {
+              if (element.style.getPropertyValue(prop) !== value) {
+                element.style.setProperty(prop, value);
+              }
             }
           }
         }
@@ -208,6 +227,10 @@ function createWatermarkPlugin(config = {}) {
         }
       });
       const unsubEnded = api.on("playback:ended", () => {
+        if (showDelayTimer) {
+          clearTimeout(showDelayTimer);
+          showDelayTimer = null;
+        }
         hide();
         stopDynamic();
       });
@@ -243,25 +266,30 @@ function createWatermarkPlugin(config = {}) {
     },
     setPosition,
     setOpacity(value) {
-      if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
+      currentOpacity = clampOpacity(value, currentOpacity);
+      if (element) element.style.opacity = String(currentOpacity);
     },
     setImageHeight(height) {
-      currentImageHeight = Math.max(1, height);
+      currentImageHeight = clampPx(height, 1, currentImageHeight);
       if (element) {
         const img = element.querySelector("img");
         if (img) img.style.maxHeight = `${currentImageHeight}px`;
       }
     },
     setPadding(value) {
-      currentPadding = Math.max(0, value);
-      currentBottomPadding = Math.max(value, config.padding ?? 40);
+      currentPadding = clampPx(value, 0, currentPadding);
+      currentBottomPadding = clampPx(
+        Math.max(value, config.padding ?? 40),
+        0,
+        currentBottomPadding
+      );
       positionStyles = getPositionStyles(currentPadding, currentBottomPadding);
       setPosition(currentPosition);
     },
     show,
     hide,
     getConfig() {
-      return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity, imageHeight: currentImageHeight, padding: currentPadding };
+      return { ...config, position: currentPosition, opacity: currentOpacity, imageHeight: currentImageHeight, padding: currentPadding };
     }
   };
 }

package/dist/index.js

@@ -1,8 +1,16 @@
 // src/version.ts
-var PKG_VERSION = true ? "1.12.0" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.13.0" : "0.0.0-dev";
 
 // src/index.ts
 var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
+function clampOpacity(value, fallback = 0.5) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(0, Math.min(1, value));
+}
+function clampPx(value, floor, fallback) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(floor, value);
+}
 function getPositionStyles(padding, bottomPadding) {
   return {
     "top-left": `top:${padding}px;left:${padding}px;`,
@@ -18,11 +26,12 @@ function createWatermarkPlugin(config = {}) {
   let dynamicTimer = null;
   let showDelayTimer = null;
   let currentPosition = config.position || "bottom-right";
-  const opacity = config.opacity ?? 0.5;
+  let currentOpacity = clampOpacity(config.opacity ?? 0.5);
+  let currentVisible = false;
   const fontSize = config.fontSize ?? 14;
-  let currentImageHeight = config.imageHeight ?? 40;
-  let currentPadding = config.padding ?? 10;
-  let currentBottomPadding = config.padding ?? 40;
+  let currentImageHeight = clampPx(config.imageHeight ?? 40, 1, 40);
+  let currentPadding = clampPx(config.padding ?? 10, 0, 10);
+  let currentBottomPadding = clampPx(config.padding ?? 40, 0, 40);
   const dynamic = config.dynamic ?? false;
   const dynamicInterval = config.dynamicInterval ?? 1e4;
   const showDelay = config.showDelay ?? 0;
@@ -33,7 +42,7 @@ function createWatermarkPlugin(config = {}) {
   const createElement = () => {
     const el = document.createElement("div");
     el.className = "sp-watermark sp-watermark--hidden";
-    el.style.cssText = `position:absolute;z-index:10;pointer-events:none;opacity:${opacity};font-size:${fontSize}px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);font-family:sans-serif;transition:all 0.5s ease;${positionStyles[currentPosition]}`;
+    el.style.cssText = `position:absolute;z-index:10;pointer-events:none;visibility:${currentVisible ? "visible" : "hidden"};opacity:${currentOpacity};font-size:${fontSize}px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);font-family:sans-serif;transition:all 0.5s ease;${positionStyles[currentPosition]}`;
     el.setAttribute("data-position", currentPosition);
     updateContent(el);
     return el;
@@ -79,8 +88,7 @@ function createWatermarkPlugin(config = {}) {
       }
     });
     element.setAttribute("data-position", position);
-    const isVisible = element.classList.contains("sp-watermark--visible");
-    const visClass = isVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
+    const visClass = currentVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
     element.className = `sp-watermark sp-watermark--${position}${visClass}${dynamic ? " sp-watermark--dynamic" : ""}`;
   };
   const randomizePosition = () => {
@@ -89,12 +97,16 @@ function createWatermarkPlugin(config = {}) {
     setPosition(next);
   };
   const show = () => {
+    currentVisible = true;
     if (!element) return;
+    element.style.visibility = "visible";
     element.classList.remove("sp-watermark--hidden");
     element.classList.add("sp-watermark--visible");
   };
   const hide = () => {
+    currentVisible = false;
     if (!element) return;
+    element.style.visibility = "hidden";
     element.classList.remove("sp-watermark--visible");
     element.classList.add("sp-watermark--hidden");
   };
@@ -148,11 +160,18 @@ function createWatermarkPlugin(config = {}) {
               }
             }
           } else if (mutation.type === "attributes" && mutation.attributeName === "style") {
-            if (element) {
-              element.style.opacity = String(opacity);
-              element.style.pointerEvents = "none";
-              element.style.position = "absolute";
-              element.style.zIndex = "10";
+            if (mutation.target !== element) continue;
+            const restore = [
+              ["opacity", String(currentOpacity)],
+              ["visibility", currentVisible ? "visible" : "hidden"],
+              ["pointer-events", "none"],
+              ["position", "absolute"],
+              ["z-index", "10"]
+            ];
+            for (const [prop, value] of restore) {
+              if (element.style.getPropertyValue(prop) !== value) {
+                element.style.setProperty(prop, value);
+              }
             }
           }
         }
@@ -181,6 +200,10 @@ function createWatermarkPlugin(config = {}) {
         }
       });
       const unsubEnded = api.on("playback:ended", () => {
+        if (showDelayTimer) {
+          clearTimeout(showDelayTimer);
+          showDelayTimer = null;
+        }
         hide();
         stopDynamic();
       });
@@ -216,25 +239,30 @@ function createWatermarkPlugin(config = {}) {
     },
     setPosition,
     setOpacity(value) {
-      if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
+      currentOpacity = clampOpacity(value, currentOpacity);
+      if (element) element.style.opacity = String(currentOpacity);
     },
     setImageHeight(height) {
-      currentImageHeight = Math.max(1, height);
+      currentImageHeight = clampPx(height, 1, currentImageHeight);
       if (element) {
         const img = element.querySelector("img");
         if (img) img.style.maxHeight = `${currentImageHeight}px`;
       }
     },
     setPadding(value) {
-      currentPadding = Math.max(0, value);
-      currentBottomPadding = Math.max(value, config.padding ?? 40);
+      currentPadding = clampPx(value, 0, currentPadding);
+      currentBottomPadding = clampPx(
+        Math.max(value, config.padding ?? 40),
+        0,
+        currentBottomPadding
+      );
       positionStyles = getPositionStyles(currentPadding, currentBottomPadding);
       setPosition(currentPosition);
     },
     show,
     hide,
     getConfig() {
-      return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity, imageHeight: currentImageHeight, padding: currentPadding };
+      return { ...config, position: currentPosition, opacity: currentOpacity, imageHeight: currentImageHeight, padding: currentPadding };
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/watermark",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "Watermark Plugin for Scarlett Player - anti-piracy text/image overlay",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,7 +30,7 @@
     "tsup": "^8.5.1",
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
-    "@scarlett-player/core": "1.12.0"
+    "@scarlett-player/core": "1.14.0"
   },
   "keywords": [
     "video",