@scarlett-player/watermark 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +30 -11
  2. package/dist/index.d.cts +9 -1
  3. package/dist/index.d.ts +9 -1
  4. package/dist/index.js +30 -11
  5. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -25,13 +25,15 @@ __export(index_exports, {
25
25
  });
26
26
  module.exports = __toCommonJS(index_exports);
27
27
  var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
28
- var POSITION_STYLES = {
29
- "top-left": "top:10px;left:10px;",
30
- "top-right": "top:10px;right:10px;",
31
- "bottom-left": "bottom:40px;left:10px;",
32
- "bottom-right": "bottom:40px;right:10px;",
33
- "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
34
- };
28
+ function getPositionStyles(padding, bottomPadding) {
29
+ return {
30
+ "top-left": `top:${padding}px;left:${padding}px;`,
31
+ "top-right": `top:${padding}px;right:${padding}px;`,
32
+ "bottom-left": `bottom:${bottomPadding}px;left:${padding}px;`,
33
+ "bottom-right": `bottom:${bottomPadding}px;right:${padding}px;`,
34
+ "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
35
+ };
36
+ }
35
37
  function createWatermarkPlugin(config = {}) {
36
38
  let api = null;
37
39
  let element = null;
@@ -40,13 +42,17 @@ function createWatermarkPlugin(config = {}) {
40
42
  let currentPosition = config.position || "bottom-right";
41
43
  const opacity = config.opacity ?? 0.5;
42
44
  const fontSize = config.fontSize ?? 14;
45
+ let currentImageHeight = config.imageHeight ?? 40;
46
+ let currentPadding = config.padding ?? 10;
47
+ let currentBottomPadding = config.padding ?? 40;
43
48
  const dynamic = config.dynamic ?? false;
44
49
  const dynamicInterval = config.dynamicInterval ?? 1e4;
45
50
  const showDelay = config.showDelay ?? 0;
51
+ let positionStyles = getPositionStyles(currentPadding, currentBottomPadding);
46
52
  const createElement = () => {
47
53
  const el = document.createElement("div");
48
54
  el.className = "sp-watermark sp-watermark--hidden";
49
- 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]}`;
55
+ 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]}`;
50
56
  el.setAttribute("data-position", currentPosition);
51
57
  updateContent(el);
52
58
  return el;
@@ -58,7 +64,7 @@ function createWatermarkPlugin(config = {}) {
58
64
  if (img) {
59
65
  const imgEl = document.createElement("img");
60
66
  imgEl.src = img;
61
- imgEl.style.cssText = `max-height:${fontSize * 2}px;opacity:inherit;display:block;`;
67
+ imgEl.style.cssText = `max-height:${currentImageHeight}px;opacity:inherit;display:block;`;
62
68
  imgEl.alt = "";
63
69
  el.appendChild(imgEl);
64
70
  } else if (txt) {
@@ -73,7 +79,7 @@ function createWatermarkPlugin(config = {}) {
73
79
  element.style.bottom = "";
74
80
  element.style.left = "";
75
81
  element.style.transform = "";
76
- const styles = POSITION_STYLES[position];
82
+ const styles = positionStyles[position];
77
83
  styles.split(";").filter(Boolean).forEach((rule) => {
78
84
  const colonIdx = rule.indexOf(":");
79
85
  if (colonIdx === -1) return;
@@ -192,10 +198,23 @@ function createWatermarkPlugin(config = {}) {
192
198
  setOpacity(value) {
193
199
  if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
194
200
  },
201
+ setImageHeight(height) {
202
+ currentImageHeight = Math.max(1, height);
203
+ if (element) {
204
+ const img = element.querySelector("img");
205
+ if (img) img.style.maxHeight = `${currentImageHeight}px`;
206
+ }
207
+ },
208
+ setPadding(value) {
209
+ currentPadding = Math.max(0, value);
210
+ currentBottomPadding = currentPadding;
211
+ positionStyles = getPositionStyles(currentPadding, currentBottomPadding);
212
+ setPosition(currentPosition);
213
+ },
195
214
  show,
196
215
  hide,
197
216
  getConfig() {
198
- return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity };
217
+ return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity, imageHeight: currentImageHeight, padding: currentPadding };
199
218
  }
200
219
  };
201
220
  }
package/dist/index.d.cts CHANGED
@@ -14,8 +14,12 @@ interface WatermarkConfig {
14
14
  position?: WatermarkPosition;
15
15
  /** Opacity 0-1 — default: 0.5 */
16
16
  opacity?: number;
17
- /** Font size in px — default: 14 */
17
+ /** Font size in px for text watermarks — default: 14 */
18
18
  fontSize?: number;
19
+ /** Image height in px — default: 40. Only applies when imageUrl is set. */
20
+ imageHeight?: number;
21
+ /** Padding from edges in px. Default: 10px for top/side, 40px for bottom to clear controls. When set, applies to all positions. */
22
+ padding?: number;
19
23
  /** Whether to periodically move the watermark to a random position — default: false */
20
24
  dynamic?: boolean;
21
25
  /** Interval in ms for dynamic repositioning — default: 10000 */
@@ -34,6 +38,10 @@ interface IWatermarkPlugin extends Plugin {
34
38
  setPosition(position: WatermarkPosition): void;
35
39
  /** Set watermark opacity (0-1) */
36
40
  setOpacity(opacity: number): void;
41
+ /** Set image height in px */
42
+ setImageHeight(height: number): void;
43
+ /** Set padding from edges in px */
44
+ setPadding(padding: number): void;
37
45
  /** Show the watermark */
38
46
  show(): void;
39
47
  /** Hide the watermark */
package/dist/index.d.ts CHANGED
@@ -14,8 +14,12 @@ interface WatermarkConfig {
14
14
  position?: WatermarkPosition;
15
15
  /** Opacity 0-1 — default: 0.5 */
16
16
  opacity?: number;
17
- /** Font size in px — default: 14 */
17
+ /** Font size in px for text watermarks — default: 14 */
18
18
  fontSize?: number;
19
+ /** Image height in px — default: 40. Only applies when imageUrl is set. */
20
+ imageHeight?: number;
21
+ /** Padding from edges in px. Default: 10px for top/side, 40px for bottom to clear controls. When set, applies to all positions. */
22
+ padding?: number;
19
23
  /** Whether to periodically move the watermark to a random position — default: false */
20
24
  dynamic?: boolean;
21
25
  /** Interval in ms for dynamic repositioning — default: 10000 */
@@ -34,6 +38,10 @@ interface IWatermarkPlugin extends Plugin {
34
38
  setPosition(position: WatermarkPosition): void;
35
39
  /** Set watermark opacity (0-1) */
36
40
  setOpacity(opacity: number): void;
41
+ /** Set image height in px */
42
+ setImageHeight(height: number): void;
43
+ /** Set padding from edges in px */
44
+ setPadding(padding: number): void;
37
45
  /** Show the watermark */
38
46
  show(): void;
39
47
  /** Hide the watermark */
package/dist/index.js CHANGED
@@ -1,12 +1,14 @@
1
1
  // src/index.ts
2
2
  var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
3
- var POSITION_STYLES = {
4
- "top-left": "top:10px;left:10px;",
5
- "top-right": "top:10px;right:10px;",
6
- "bottom-left": "bottom:40px;left:10px;",
7
- "bottom-right": "bottom:40px;right:10px;",
8
- "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
9
- };
3
+ function getPositionStyles(padding, bottomPadding) {
4
+ return {
5
+ "top-left": `top:${padding}px;left:${padding}px;`,
6
+ "top-right": `top:${padding}px;right:${padding}px;`,
7
+ "bottom-left": `bottom:${bottomPadding}px;left:${padding}px;`,
8
+ "bottom-right": `bottom:${bottomPadding}px;right:${padding}px;`,
9
+ "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
10
+ };
11
+ }
10
12
  function createWatermarkPlugin(config = {}) {
11
13
  let api = null;
12
14
  let element = null;
@@ -15,13 +17,17 @@ function createWatermarkPlugin(config = {}) {
15
17
  let currentPosition = config.position || "bottom-right";
16
18
  const opacity = config.opacity ?? 0.5;
17
19
  const fontSize = config.fontSize ?? 14;
20
+ let currentImageHeight = config.imageHeight ?? 40;
21
+ let currentPadding = config.padding ?? 10;
22
+ let currentBottomPadding = config.padding ?? 40;
18
23
  const dynamic = config.dynamic ?? false;
19
24
  const dynamicInterval = config.dynamicInterval ?? 1e4;
20
25
  const showDelay = config.showDelay ?? 0;
26
+ let positionStyles = getPositionStyles(currentPadding, currentBottomPadding);
21
27
  const createElement = () => {
22
28
  const el = document.createElement("div");
23
29
  el.className = "sp-watermark sp-watermark--hidden";
24
- 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]}`;
30
+ 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]}`;
25
31
  el.setAttribute("data-position", currentPosition);
26
32
  updateContent(el);
27
33
  return el;
@@ -33,7 +39,7 @@ function createWatermarkPlugin(config = {}) {
33
39
  if (img) {
34
40
  const imgEl = document.createElement("img");
35
41
  imgEl.src = img;
36
- imgEl.style.cssText = `max-height:${fontSize * 2}px;opacity:inherit;display:block;`;
42
+ imgEl.style.cssText = `max-height:${currentImageHeight}px;opacity:inherit;display:block;`;
37
43
  imgEl.alt = "";
38
44
  el.appendChild(imgEl);
39
45
  } else if (txt) {
@@ -48,7 +54,7 @@ function createWatermarkPlugin(config = {}) {
48
54
  element.style.bottom = "";
49
55
  element.style.left = "";
50
56
  element.style.transform = "";
51
- const styles = POSITION_STYLES[position];
57
+ const styles = positionStyles[position];
52
58
  styles.split(";").filter(Boolean).forEach((rule) => {
53
59
  const colonIdx = rule.indexOf(":");
54
60
  if (colonIdx === -1) return;
@@ -167,10 +173,23 @@ function createWatermarkPlugin(config = {}) {
167
173
  setOpacity(value) {
168
174
  if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
169
175
  },
176
+ setImageHeight(height) {
177
+ currentImageHeight = Math.max(1, height);
178
+ if (element) {
179
+ const img = element.querySelector("img");
180
+ if (img) img.style.maxHeight = `${currentImageHeight}px`;
181
+ }
182
+ },
183
+ setPadding(value) {
184
+ currentPadding = Math.max(0, value);
185
+ currentBottomPadding = currentPadding;
186
+ positionStyles = getPositionStyles(currentPadding, currentBottomPadding);
187
+ setPosition(currentPosition);
188
+ },
170
189
  show,
171
190
  hide,
172
191
  getConfig() {
173
- return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity };
192
+ return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity, imageHeight: currentImageHeight, padding: currentPadding };
174
193
  }
175
194
  };
176
195
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scarlett-player/watermark",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
4
4
  "description": "Watermark Plugin for Scarlett Player - anti-piracy text/image overlay",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -22,7 +22,7 @@
22
22
  "dist"
23
23
  ],
24
24
  "peerDependencies": {
25
- "@scarlett-player/core": "^1.0.0"
25
+ "@scarlett-player/core": "^1.0.3"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@vitest/coverage-v8": "^1.6.0",
@@ -30,7 +30,7 @@
30
30
  "tsup": "^8.5.1",
31
31
  "typescript": "^5.3.0",
32
32
  "vitest": "^1.6.0",
33
- "@scarlett-player/core": "1.0.0"
33
+ "@scarlett-player/core": "1.1.1"
34
34
  },
35
35
  "keywords": [
36
36
  "video",