feat: Add Watermark Support to Shaka Player UI (#7877)

This pull request introduces watermark support for the Shaka Player UI.

Added functionality to overlay static or dynamic watermarks on videos.
Included options to customize position, size, color, and opacity.
Enhanced content security with dynamic watermarking capabilities.
Resolves #7726 .

Author: chafroudtarek

CONTRIBUTORS

@@ -164,3 +164,4 @@ Koen Romers <[email protected]>
 Zhenghang Chen <[email protected]>
 Ashley Manners <[email protected]>
 Bidisha Das <[email protected]>
+Chafroud Tarek <[email protected]>

build/types/ui

@@ -6,6 +6,7 @@
 +../../ui/ad_statistics_button.js
 +../../ui/audio_language_selection.js
 +../../ui/externs/ui.js
++../../ui/externs/watermark.js
 +../../ui/play_button.js
 +../../ui/big_play_button.js
 +../../ui/airplay_button.js
@@ -50,5 +51,6 @@
 +../../ui/vr_utils.js
 +../../ui/vr_webgl.js
 
++../../ui/watermark.js
 +../../ui/gl_matrix/matrix_4x4.js
 +../../ui/gl_matrix/matrix_quaternion.js

demo/config.js

@@ -767,6 +767,11 @@ shakaDemo.Config = class {
       this.latestInput_.input().checked = true;
     }
 
+    this.addCustomTextInput_('Watermark text', (input) => {
+      shakaDemoMain.setWatermarkText(input.value);
+    });
+    this.latestInput_.input().value = shakaDemoMain.getWatermarkText();
+
     // shaka.log is not set if logging isn't enabled.
     // I.E. if using the release version of shaka.
     if (!shaka['log']) {

demo/main.js

@@ -62,6 +62,9 @@ shakaDemo.Main = class {
     /** @private {boolean} */
     this.customContextMenu_ = false;
 
+    /** @private {string} */
+    this.watermarkText_ = '';
+
     /** @private {boolean} */
     this.nativeControlsEnabled_ = false;
 
@@ -397,6 +400,11 @@ shakaDemo.Main = class {
       uiConfig.overflowMenuButtons.push('visualizer');
     }
     ui.configure(uiConfig);
+    if (this.watermarkText_) {
+      ui.setTextWatermark(this.watermarkText_);
+    } else {
+      ui.removeWatermark();
+    }
   }
 
   /** @private */
@@ -829,6 +837,27 @@ shakaDemo.Main = class {
     return this.customContextMenu_;
   }
 
+  /**
+   * Set the text for watermark.
+   *
+   * @param {string} text
+   */
+  setWatermarkText(text) {
+    this.watermarkText_ = text;
+    // Configure the UI, to add or remove the controls.
+    this.configureUI_();
+    this.remakeHash();
+  }
+
+  /**
+   * Get the current text for watermark.
+   *
+   * @return {string}
+   */
+  getWatermarkText() {
+    return this.watermarkText_;
+  }
+
   /**
    * Enable or disable the native controls.
    * Goes into effect during the next load.
@@ -1020,6 +1049,10 @@ shakaDemo.Main = class {
       this.configureUI_();
     }
 
+    if ('watermarkText' in params) {
+      this.watermarkText_ = params['watermarkText'];
+    }
+
     if ('visualizer' in params) {
       this.setIsVisualizerActive(true);
     } else {
@@ -1601,6 +1634,10 @@ shakaDemo.Main = class {
       params.push('customContextMenu');
     }
 
+    if (this.watermarkText_) {
+      params.push('watermarkText=' + this.watermarkText_);
+    }
+
     if (this.getIsVisualizerActive()) {
       params.push('visualizer');
     }
@@ -2038,3 +2075,4 @@ document.addEventListener('shaka-ui-load-failed', (event) => {
     shakaDemoMain.initFailed(reasonCode);
   });
 });
+

test/test/util/fake_demo_main.js

@@ -106,6 +106,19 @@ shaka.test.FakeDemoMain = class {
     this.getAssetUnsupportedReason =
         jasmine.createSpy('getAssetUnsupportedReason');
     this.getAssetUnsupportedReason.and.returnValue(null);
+
+    /** @private {string} */
+    this.watermarkText_ = '';
+
+    /** @type {!jasmine.Spy} */
+    this.getWatermarkText = jasmine.createSpy('getWatermarkText');
+    this.getWatermarkText.and.callFake(() => this.watermarkText_);
+
+    /** @type {!jasmine.Spy} */
+    this.setWatermarkText = jasmine.createSpy('setWatermarkText');
+    this.setWatermarkText.and.callFake((text) => {
+      this.watermarkText_ = text;
+    });
   }
 
   /** Creates and assigns the mock demo main (and all of the real tab). */

ui/externs/watermark.js

@@ -0,0 +1,64 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+/**
+ * @externs
+ * @suppress {duplicate} To prevent compiler errors with the namespace
+ *   being declared both here and by goog.provide in the library.
+ */
+
+
+/**
+ * @typedef {{
+ *   type: string,
+ *   text: string,
+ *   position: string,
+ *   color: string,
+ *   size: number,
+ *   alpha: number,
+ *   interval: number,
+ *   skip: number,
+ *   displayDuration: number,
+ *   transitionDuration: number
+ * }}
+ *
+ * @property {string} type
+ *   The type of watermark ('static' or 'dynamic').
+ *   Defaults to 'static'.
+ * @property {string} text
+ *   The text content of the watermark. Required.
+ * @property {string} position
+ *   Position of the watermark.
+ *   Defaults to 'top-left'.
+ * @property {string} color
+ *   The color of the watermark text.
+ *   Defaults to 'white'.
+ * @property {number} size
+ *   Font size of the watermark text in pixels.
+ *   Defaults to 24.
+ * @property {number} alpha
+ *   Opacity of the watermark (0.0 to 1.0).
+ *   Defaults to 0.7.
+ * @property {number} interval
+ *   Interval between position updates for dynamic watermarks (in seconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 2.
+ * @property {number} skip
+ *   Skip duration for dynamic watermarks (in seconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 0.5.
+ * @property {number} displayDuration
+ *   Duration to display watermark at each position (in seconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 2.
+ * @property {number} transitionDuration
+ *   Duration of fade transitions between positions (in seconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 0.5.
+ * @exportDoc
+ */
+shaka.ui.Watermark.Options;

ui/ui.js

@@ -14,6 +14,7 @@ goog.require('shaka.Player');
 goog.require('shaka.log');
 goog.require('shaka.polyfill');
 goog.require('shaka.ui.Controls');
+goog.require('shaka.ui.Watermark');
 goog.require('shaka.util.ConfigUtils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.FakeEvent');
@@ -66,6 +67,11 @@ shaka.ui.Overlay = class {
 
     videoContainer['ui'] = this;
     video['ui'] = this;
+    /** @private {shaka.ui.Watermark} */
+    this.watermark_ = new shaka.ui.Watermark(
+        this.videoContainer_,
+        this.controls_,
+    );
   }
 
 
@@ -83,6 +89,7 @@ shaka.ui.Overlay = class {
       await this.player_.destroy();
     }
     this.player_ = null;
+    this.watermark_ = null;
   }
 
 
@@ -168,6 +175,27 @@ shaka.ui.Overlay = class {
   }
 
 
+  /**
+   * @param {string} text
+   * @param {?shaka.ui.Watermark.Options=} options
+   * @export
+   */
+  setTextWatermark(text, options) {
+    if (this.watermark_) {
+      this.watermark_.setTextWatermark(text, options);
+    }
+  }
+
+  /**
+   * @export
+   */
+  removeWatermark() {
+    if (this.watermark_) {
+      this.watermark_.removeWatermark();
+    }
+  }
+
+
   /**
    * @return {!shaka.extern.UIConfiguration}
    * @private