@scarlett-player/watermark 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hackney Enterprises Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,206 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createWatermarkPlugin: () => createWatermarkPlugin,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
+var POSITION_STYLES = {
+  "top-left": "top:10px;left:10px;",
+  "top-right": "top:10px;right:10px;",
+  "bottom-left": "bottom:40px;left:10px;",
+  "bottom-right": "bottom:40px;right:10px;",
+  "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
+};
+function createWatermarkPlugin(config = {}) {
+  let api = null;
+  let element = null;
+  let dynamicTimer = null;
+  let showDelayTimer = null;
+  let currentPosition = config.position || "bottom-right";
+  const opacity = config.opacity ?? 0.5;
+  const fontSize = config.fontSize ?? 14;
+  const dynamic = config.dynamic ?? false;
+  const dynamicInterval = config.dynamicInterval ?? 1e4;
+  const showDelay = config.showDelay ?? 0;
+  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;${POSITION_STYLES[currentPosition]}`;
+    el.setAttribute("data-position", currentPosition);
+    updateContent(el);
+    return el;
+  };
+  const updateContent = (el, imageUrl, text) => {
+    const img = imageUrl || config.imageUrl;
+    const txt = text || config.text;
+    el.innerHTML = "";
+    if (img) {
+      const imgEl = document.createElement("img");
+      imgEl.src = img;
+      imgEl.style.cssText = `max-height:${fontSize * 2}px;opacity:inherit;display:block;`;
+      imgEl.alt = "";
+      el.appendChild(imgEl);
+    } else if (txt) {
+      el.textContent = txt;
+    }
+  };
+  const setPosition = (position) => {
+    if (!element) return;
+    currentPosition = position;
+    element.style.top = "";
+    element.style.right = "";
+    element.style.bottom = "";
+    element.style.left = "";
+    element.style.transform = "";
+    const styles = POSITION_STYLES[position];
+    styles.split(";").filter(Boolean).forEach((rule) => {
+      const colonIdx = rule.indexOf(":");
+      if (colonIdx === -1) return;
+      const prop = rule.slice(0, colonIdx).trim();
+      const val = rule.slice(colonIdx + 1).trim();
+      if (prop && val) {
+        element.style.setProperty(prop, val);
+      }
+    });
+    element.setAttribute("data-position", position);
+    const isVisible = element.classList.contains("sp-watermark--visible");
+    const visClass = isVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
+    element.className = `sp-watermark sp-watermark--${position}${visClass}${dynamic ? " sp-watermark--dynamic" : ""}`;
+  };
+  const randomizePosition = () => {
+    const available = POSITIONS.filter((p) => p !== currentPosition);
+    const next = available[Math.floor(Math.random() * available.length)];
+    setPosition(next);
+  };
+  const show = () => {
+    if (!element) return;
+    element.classList.remove("sp-watermark--hidden");
+    element.classList.add("sp-watermark--visible");
+  };
+  const hide = () => {
+    if (!element) return;
+    element.classList.remove("sp-watermark--visible");
+    element.classList.add("sp-watermark--hidden");
+  };
+  const startDynamic = () => {
+    if (!dynamic || dynamicTimer) return;
+    dynamicTimer = setInterval(randomizePosition, dynamicInterval);
+  };
+  const stopDynamic = () => {
+    if (dynamicTimer) {
+      clearInterval(dynamicTimer);
+      dynamicTimer = null;
+    }
+  };
+  const cleanup = () => {
+    stopDynamic();
+    if (showDelayTimer) {
+      clearTimeout(showDelayTimer);
+      showDelayTimer = null;
+    }
+    if (element?.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    element = null;
+  };
+  return {
+    id: "watermark",
+    name: "Watermark",
+    version: "1.0.0",
+    type: "feature",
+    description: "Anti-piracy watermark overlay with text/image support and dynamic repositioning",
+    init(pluginApi) {
+      api = pluginApi;
+      api.logger.debug("Watermark plugin initialized");
+      element = createElement();
+      api.container.appendChild(element);
+      const unsubPlay = api.on("playback:play", () => {
+        if (showDelay > 0) {
+          showDelayTimer = setTimeout(() => {
+            show();
+            startDynamic();
+          }, showDelay);
+        } else {
+          show();
+          startDynamic();
+        }
+      });
+      const unsubPause = api.on("playback:pause", () => {
+        hide();
+        stopDynamic();
+        if (showDelayTimer) {
+          clearTimeout(showDelayTimer);
+          showDelayTimer = null;
+        }
+      });
+      const unsubEnded = api.on("playback:ended", () => {
+        hide();
+        stopDynamic();
+      });
+      const unsubChange = api.on("playlist:change", ({ track }) => {
+        if (!element || !track) return;
+        const metadata = track.metadata;
+        if (metadata) {
+          const watermarkUrl = metadata.watermarkUrl;
+          const watermarkText = metadata.watermarkText;
+          if (watermarkUrl || watermarkText) {
+            updateContent(element, watermarkUrl, watermarkText);
+          }
+        }
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubEnded();
+        unsubChange();
+        cleanup();
+      });
+    },
+    destroy() {
+      api?.logger.debug("Watermark plugin destroyed");
+      cleanup();
+      api = null;
+    },
+    setText(text) {
+      if (element) updateContent(element, void 0, text);
+    },
+    setImage(imageUrl) {
+      if (element) updateContent(element, imageUrl);
+    },
+    setPosition,
+    setOpacity(value) {
+      if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
+    },
+    show,
+    hide,
+    getConfig() {
+      return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity };
+    }
+  };
+}
+var index_default = createWatermarkPlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createWatermarkPlugin
+});

package/dist/index.d.cts

@@ -0,0 +1,83 @@
+import { Plugin } from '@scarlett-player/core';
+
+/**
+ * Watermark Plugin Types
+ */
+
+type WatermarkPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+interface WatermarkConfig {
+    /** Text content to display (ignored if imageUrl is set) */
+    text?: string;
+    /** Image URL to display instead of text */
+    imageUrl?: string;
+    /** Position on the player — default: 'bottom-right' */
+    position?: WatermarkPosition;
+    /** Opacity 0-1 — default: 0.5 */
+    opacity?: number;
+    /** Font size in px — default: 14 */
+    fontSize?: number;
+    /** Whether to periodically move the watermark to a random position — default: false */
+    dynamic?: boolean;
+    /** Interval in ms for dynamic repositioning — default: 10000 */
+    dynamicInterval?: number;
+    /** Delay in ms before showing watermark after play — default: 0 */
+    showDelay?: number;
+    /** Index signature for PluginConfig compatibility */
+    [key: string]: unknown;
+}
+interface IWatermarkPlugin extends Plugin {
+    /** Update the watermark to display the given text */
+    setText(text: string): void;
+    /** Update the watermark to display the given image */
+    setImage(imageUrl: string): void;
+    /** Move the watermark to a new position */
+    setPosition(position: WatermarkPosition): void;
+    /** Set watermark opacity (0-1) */
+    setOpacity(opacity: number): void;
+    /** Show the watermark */
+    show(): void;
+    /** Hide the watermark */
+    hide(): void;
+    /** Get the current watermark configuration */
+    getConfig(): WatermarkConfig;
+}
+
+/**
+ * Watermark Plugin for Scarlett Player
+ *
+ * Provides anti-piracy watermark overlay with:
+ * - Text or image rendering
+ * - Configurable position and opacity
+ * - Dynamic repositioning mode (moves periodically)
+ * - Show delay
+ * - Per-track watermark updates via playlist:change metadata
+ */
+
+/**
+ * Create a Watermark Plugin instance.
+ *
+ * @param config - Plugin configuration
+ * @returns Watermark Plugin instance
+ *
+ * @example
+ * ```ts
+ * import { createWatermarkPlugin } from '@scarlett-player/watermark';
+ *
+ * const player = new ScarlettPlayer({
+ *   container: '#player',
+ *   plugins: [
+ *     createWatermarkPlugin({
+ *       text: 'user@example.com',
+ *       position: 'bottom-right',
+ *       opacity: 0.4,
+ *       dynamic: true,
+ *       dynamicInterval: 15000,
+ *       showDelay: 20000,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function createWatermarkPlugin(config?: WatermarkConfig): IWatermarkPlugin;
+
+export { type IWatermarkPlugin, type WatermarkConfig, type WatermarkPosition, createWatermarkPlugin, createWatermarkPlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import { Plugin } from '@scarlett-player/core';
+
+/**
+ * Watermark Plugin Types
+ */
+
+type WatermarkPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+interface WatermarkConfig {
+    /** Text content to display (ignored if imageUrl is set) */
+    text?: string;
+    /** Image URL to display instead of text */
+    imageUrl?: string;
+    /** Position on the player — default: 'bottom-right' */
+    position?: WatermarkPosition;
+    /** Opacity 0-1 — default: 0.5 */
+    opacity?: number;
+    /** Font size in px — default: 14 */
+    fontSize?: number;
+    /** Whether to periodically move the watermark to a random position — default: false */
+    dynamic?: boolean;
+    /** Interval in ms for dynamic repositioning — default: 10000 */
+    dynamicInterval?: number;
+    /** Delay in ms before showing watermark after play — default: 0 */
+    showDelay?: number;
+    /** Index signature for PluginConfig compatibility */
+    [key: string]: unknown;
+}
+interface IWatermarkPlugin extends Plugin {
+    /** Update the watermark to display the given text */
+    setText(text: string): void;
+    /** Update the watermark to display the given image */
+    setImage(imageUrl: string): void;
+    /** Move the watermark to a new position */
+    setPosition(position: WatermarkPosition): void;
+    /** Set watermark opacity (0-1) */
+    setOpacity(opacity: number): void;
+    /** Show the watermark */
+    show(): void;
+    /** Hide the watermark */
+    hide(): void;
+    /** Get the current watermark configuration */
+    getConfig(): WatermarkConfig;
+}
+
+/**
+ * Watermark Plugin for Scarlett Player
+ *
+ * Provides anti-piracy watermark overlay with:
+ * - Text or image rendering
+ * - Configurable position and opacity
+ * - Dynamic repositioning mode (moves periodically)
+ * - Show delay
+ * - Per-track watermark updates via playlist:change metadata
+ */
+
+/**
+ * Create a Watermark Plugin instance.
+ *
+ * @param config - Plugin configuration
+ * @returns Watermark Plugin instance
+ *
+ * @example
+ * ```ts
+ * import { createWatermarkPlugin } from '@scarlett-player/watermark';
+ *
+ * const player = new ScarlettPlayer({
+ *   container: '#player',
+ *   plugins: [
+ *     createWatermarkPlugin({
+ *       text: 'user@example.com',
+ *       position: 'bottom-right',
+ *       opacity: 0.4,
+ *       dynamic: true,
+ *       dynamicInterval: 15000,
+ *       showDelay: 20000,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function createWatermarkPlugin(config?: WatermarkConfig): IWatermarkPlugin;
+
+export { type IWatermarkPlugin, type WatermarkConfig, type WatermarkPosition, createWatermarkPlugin, createWatermarkPlugin as default };

package/dist/index.js

@@ -0,0 +1,181 @@
+// src/index.ts
+var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
+var POSITION_STYLES = {
+  "top-left": "top:10px;left:10px;",
+  "top-right": "top:10px;right:10px;",
+  "bottom-left": "bottom:40px;left:10px;",
+  "bottom-right": "bottom:40px;right:10px;",
+  "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
+};
+function createWatermarkPlugin(config = {}) {
+  let api = null;
+  let element = null;
+  let dynamicTimer = null;
+  let showDelayTimer = null;
+  let currentPosition = config.position || "bottom-right";
+  const opacity = config.opacity ?? 0.5;
+  const fontSize = config.fontSize ?? 14;
+  const dynamic = config.dynamic ?? false;
+  const dynamicInterval = config.dynamicInterval ?? 1e4;
+  const showDelay = config.showDelay ?? 0;
+  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;${POSITION_STYLES[currentPosition]}`;
+    el.setAttribute("data-position", currentPosition);
+    updateContent(el);
+    return el;
+  };
+  const updateContent = (el, imageUrl, text) => {
+    const img = imageUrl || config.imageUrl;
+    const txt = text || config.text;
+    el.innerHTML = "";
+    if (img) {
+      const imgEl = document.createElement("img");
+      imgEl.src = img;
+      imgEl.style.cssText = `max-height:${fontSize * 2}px;opacity:inherit;display:block;`;
+      imgEl.alt = "";
+      el.appendChild(imgEl);
+    } else if (txt) {
+      el.textContent = txt;
+    }
+  };
+  const setPosition = (position) => {
+    if (!element) return;
+    currentPosition = position;
+    element.style.top = "";
+    element.style.right = "";
+    element.style.bottom = "";
+    element.style.left = "";
+    element.style.transform = "";
+    const styles = POSITION_STYLES[position];
+    styles.split(";").filter(Boolean).forEach((rule) => {
+      const colonIdx = rule.indexOf(":");
+      if (colonIdx === -1) return;
+      const prop = rule.slice(0, colonIdx).trim();
+      const val = rule.slice(colonIdx + 1).trim();
+      if (prop && val) {
+        element.style.setProperty(prop, val);
+      }
+    });
+    element.setAttribute("data-position", position);
+    const isVisible = element.classList.contains("sp-watermark--visible");
+    const visClass = isVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
+    element.className = `sp-watermark sp-watermark--${position}${visClass}${dynamic ? " sp-watermark--dynamic" : ""}`;
+  };
+  const randomizePosition = () => {
+    const available = POSITIONS.filter((p) => p !== currentPosition);
+    const next = available[Math.floor(Math.random() * available.length)];
+    setPosition(next);
+  };
+  const show = () => {
+    if (!element) return;
+    element.classList.remove("sp-watermark--hidden");
+    element.classList.add("sp-watermark--visible");
+  };
+  const hide = () => {
+    if (!element) return;
+    element.classList.remove("sp-watermark--visible");
+    element.classList.add("sp-watermark--hidden");
+  };
+  const startDynamic = () => {
+    if (!dynamic || dynamicTimer) return;
+    dynamicTimer = setInterval(randomizePosition, dynamicInterval);
+  };
+  const stopDynamic = () => {
+    if (dynamicTimer) {
+      clearInterval(dynamicTimer);
+      dynamicTimer = null;
+    }
+  };
+  const cleanup = () => {
+    stopDynamic();
+    if (showDelayTimer) {
+      clearTimeout(showDelayTimer);
+      showDelayTimer = null;
+    }
+    if (element?.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    element = null;
+  };
+  return {
+    id: "watermark",
+    name: "Watermark",
+    version: "1.0.0",
+    type: "feature",
+    description: "Anti-piracy watermark overlay with text/image support and dynamic repositioning",
+    init(pluginApi) {
+      api = pluginApi;
+      api.logger.debug("Watermark plugin initialized");
+      element = createElement();
+      api.container.appendChild(element);
+      const unsubPlay = api.on("playback:play", () => {
+        if (showDelay > 0) {
+          showDelayTimer = setTimeout(() => {
+            show();
+            startDynamic();
+          }, showDelay);
+        } else {
+          show();
+          startDynamic();
+        }
+      });
+      const unsubPause = api.on("playback:pause", () => {
+        hide();
+        stopDynamic();
+        if (showDelayTimer) {
+          clearTimeout(showDelayTimer);
+          showDelayTimer = null;
+        }
+      });
+      const unsubEnded = api.on("playback:ended", () => {
+        hide();
+        stopDynamic();
+      });
+      const unsubChange = api.on("playlist:change", ({ track }) => {
+        if (!element || !track) return;
+        const metadata = track.metadata;
+        if (metadata) {
+          const watermarkUrl = metadata.watermarkUrl;
+          const watermarkText = metadata.watermarkText;
+          if (watermarkUrl || watermarkText) {
+            updateContent(element, watermarkUrl, watermarkText);
+          }
+        }
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubEnded();
+        unsubChange();
+        cleanup();
+      });
+    },
+    destroy() {
+      api?.logger.debug("Watermark plugin destroyed");
+      cleanup();
+      api = null;
+    },
+    setText(text) {
+      if (element) updateContent(element, void 0, text);
+    },
+    setImage(imageUrl) {
+      if (element) updateContent(element, imageUrl);
+    },
+    setPosition,
+    setOpacity(value) {
+      if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
+    },
+    show,
+    hide,
+    getConfig() {
+      return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity };
+    }
+  };
+}
+var index_default = createWatermarkPlugin;
+export {
+  createWatermarkPlugin,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@scarlett-player/watermark",
+  "version": "1.0.0",
+  "description": "Watermark Plugin for Scarlett Player - anti-piracy text/image overlay",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@scarlett-player/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^1.6.0",
+    "jsdom": "^24.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.3.0",
+    "vitest": "^1.6.0",
+    "@scarlett-player/core": "1.0.0"
+  },
+  "keywords": [
+    "video",
+    "player",
+    "watermark",
+    "anti-piracy",
+    "overlay",
+    "scarlett"
+  ],
+  "author": "The Stream Platform",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Hackney-Enterprises-Inc/scarlett-player.git",
+    "directory": "packages/plugins/watermark"
+  },
+  "bugs": {
+    "url": "https://github.com/Hackney-Enterprises-Inc/scarlett-player/issues"
+  },
+  "homepage": "https://scarlettplayer.com",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --coverage"
+  }
+}