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

@@ -50,5 +50,6 @@
 +../../ui/vr_utils.js
 +../../ui/vr_webgl.js
 
++../../ui/watermark.js
 +../../ui/gl_matrix/matrix_4x4.js
 +../../ui/gl_matrix/matrix_quaternion.js

externs/shaka/watermark.js

@@ -0,0 +1,50 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+/**
+ * @externs
+ */
+
+
+/** @namespace */
+var shaka = {};
+
+/** @namespace */
+shaka.extern = {};
+
+
+/**
+ * @typedef {{
+ *   type: string,
+ *   text: string,
+ *   position: string,
+ *   color: string,
+ *   size: number,
+ *   alpha: number,
+ *   interval: number,
+ *   skip: number
+ * }}
+ *
+ * @property {string} type
+ *   The type of watermark ('static' or 'dynamic').
+ * @property {string} text
+ *   The text content of the watermark.
+ * @property {string} position
+ *   Position of the watermark.
+ * @property {string} color
+ *   The color of the watermark text.
+ * @property {number} size
+ *   Font size of the watermark text in pixels.
+ * @property {number} alpha
+ *   Opacity of the watermark (0.0 to 1.0).
+ * @property {number} interval
+ *   Interval between position updates for dynamic watermarks (in milliseconds).
+ * @property {number} skip
+ *   Skip duration for dynamic watermarks (in milliseconds).
+ * @exportDoc
+ */
+shaka.extern.WatermarkOptions;

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/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,12 +14,14 @@ 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');
 goog.require('shaka.util.IDestroyable');
 goog.require('shaka.util.Platform');
 
+
 /**
  * @implements {shaka.util.IDestroyable}
  * @export
@@ -66,6 +68,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 +92,7 @@ shaka.ui.Overlay = class {
       await this.player_.destroy();
     }
     this.player_ = null;
+    this.watermark_ = null;
   }
 
 
@@ -168,6 +178,27 @@ shaka.ui.Overlay = class {
   }
 
 
+  /**
+   * @param {string} text
+   * @param {shaka.extern.WatermarkOptions=} 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 +624,3 @@ if (document.readyState == 'complete') {
 } else {
   window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
 }
-