feat: Add Watermark Support to Shaka Player UI

CONTRIBUTORS

@@ -164,3 +164,4 @@ Koen Romers <koenromers@gmail.com>
 Zhenghang Chen <czhtju@gmail.com>
 Ashley Manners <ashley.manners@xperi.com>
 Bidisha Das <officialbidisha1@gmail.com>
+Chafroud Tarek <chafroudtarek3@gmail.com>

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

ui/controls.less

@@ -14,6 +14,7 @@
 @import "less/ad_controls.less";
 @import "less/tooltip.less";
 @import "less/thumbnails.less";
+@import "less/watermark.less";
 @import (css, inline) "https://fonts.googleapis.com/css?family=Roboto";
 // NOTE: Working around google/material-design-icons#958
 @import (css, inline) "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

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 milliseconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 2000.
+ * @property {number} skip
+ *   Skip duration for dynamic watermarks (in milliseconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 500.
+ * @property {number} displayDuration
+ *   Duration to display watermark at each position (in seconds).
+ *   Only used when type is 'dynamic'.
+ *   Defaults to 3.
+ * @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/less/watermark.less

@@ -0,0 +1,46 @@
+/** @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* Styles for watermark components in the UI. */
+
+/* Container that holds all watermark elements */
+.shaka-watermark-container {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+
+  /* Ensure watermarks don't interfere with video interactions */
+  .unselectable();
+}
+
+/* Text-based watermark styling */
+.shaka-text-watermark {
+  position: absolute;
+  color: white;
+  font-size: 24px;
+
+  /* Add subtle text shadow for better visibility */
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 50%);
+  opacity: 0.5;
+
+  /* Ensure text is crisp */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Image-based watermark styling */
+.shaka-image-watermark {
+  position: absolute;
+  max-width: 150px;
+  max-height: 150px;
+  opacity: 0.5;
+
+  /* Ensure smooth scaling */
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}

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,13 @@ 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 +91,7 @@ shaka.ui.Overlay = class {
       await this.player_.destroy();
     }
     this.player_ = null;
+    this.watermark_ = null;
   }
 
 
@@ -168,6 +177,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
@@ -593,4 +623,3 @@ if (document.readyState == 'complete') {
 } else {
   window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
 }
-