Source: ui/watermark.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  7. goog.provide('shaka.ui.Watermark');
  9. goog.requireType('shaka.ui.Controls');
  11. goog.require('shaka.ui.Element');
  12. goog.require('shaka.log');
  14. /**
  15.  * A UI component that adds watermark functionality to the Shaka Player.
  16.  * Allows adding text watermarks with various customization options.
  17.  * @extends {shaka.ui.Element}
  18.  * @final
  19.  * @export
  20.  */
  21. shaka.ui.Watermark = class extends shaka.ui.Element {
  22.   /**
  23.    * Creates a new Watermark instance.
  24.    * @param {!HTMLElement} parent The parent element for the watermark canvas
  25.    * @param {!shaka.ui.Controls} controls The controls instance
  26.    */
  27.   constructor(parent, controls) {
  28.     super(parent, controls);
  30.     /** @private {!HTMLCanvasElement} */
  31.     this.canvas_ = /** @type {!HTMLCanvasElement} */ (
  32.       document.createElement('canvas')
  33.     );
  34.     this.canvas_.style.position = 'absolute';
  35.     this.canvas_.style.top = '0';
  36.     this.canvas_.style.left = '0';
  37.     this.canvas_.style.pointerEvents = 'none';
  39.     this.parent.appendChild(this.canvas_);
  40.     this.resizeCanvas_();
  42.     /** @private {number|null} */
  43.     this.animationId_ = null;
  45.     /** @private {ResizeObserver|null} */
  46.     this.resizeObserver_ = null;
  48.     // Use ResizeObserver if available, fallback to window resize event
  49.     if (window.ResizeObserver) {
  50.       this.resizeObserver_ = new ResizeObserver(() => this.resizeCanvas_());
  51.       this.resizeObserver_.observe(this.parent);
  52.     } else {
  53.       // Fallback for older browsers
  54.       window.addEventListener('resize', () => this.resizeCanvas_());
  55.     }
  56.   }
  58.   /**
  59.    * Gets the 2D rendering context safely
  60.    * @return {?CanvasRenderingContext2D}
  61.    * @private
  62.    */
  63.   getContext2D_() {
  64.     const ctx = this.canvas_.getContext('2d');
  65.     if (!ctx) {
  66.       shaka.log.error('2D context is not available');
  67.       return null;
  68.     }
  69.     return /** @type {!CanvasRenderingContext2D} */ (ctx);
  70.   }
  72.   /**
  73.    * Resize canvas to match video container
  74.    * @private
  75.    */
  76.   resizeCanvas_() {
  77.     this.canvas_.width = this.parent.offsetWidth;
  78.     this.canvas_.height = this.parent.offsetHeight;
  79.   }
  81.   /**
  82.    * Sets a text watermark on the video with customizable options.
  83.    * The watermark can be either static (fixed position) or dynamic (moving).
  84.    * @param {string} text The text to display as watermark
  85.    * @param {?shaka.ui.Watermark.Options=} options  configuration options
  86.    * @export
  87.    */
  88.   setTextWatermark(text, options) {
  89.     /** @type {!shaka.ui.Watermark.Options} */
  90.     const defaultOptions = {
  91.       type: 'static',
  92.       text: text,
  93.       position: 'top-right',
  94.       color: 'rgba(255, 255, 255, 0.7)',
  95.       size: 20,
  96.       alpha: 0.7,
  97.       interval: 2 * 1000,
  98.       skip: 0.5 * 1000,
  99.       displayDuration: 2 * 1000,
  100.       transitionDuration: 0.5,
  101.     };
  103.     /** @type {!shaka.ui.Watermark.Options} */
  104.     const config = /** @type {!shaka.ui.Watermark.Options} */ (
  105.       Object.assign({}, defaultOptions, options || defaultOptions)
  106.     );
  108.     if (config.type === 'static') {
  109.       this.drawStaticWatermark_(config);
  110.     } else if (config.type === 'dynamic') {
  111.       this.startDynamicWatermark_(config);
  112.     }
  113.   }
  115.   /**
  116.    * Draws a static watermark on the canvas.
  117.    * @param {!shaka.ui.Watermark.Options} config  configuration options
  118.    * @private
  119.    */
  120.   drawStaticWatermark_(config) {
  121.     const ctx = this.getContext2D_();
  122.     if (!ctx) {
  123.       return;
  124.     }
  126.     ctx.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
  128.     ctx.globalAlpha = config.alpha;
  129.     ctx.fillStyle = config.color;
  130.     ctx.font = `${config.size}px Arial`;
  132.     const metrics = ctx.measureText(config.text);
  133.     const padding = 20;
  134.     let x;
  135.     let y;
  137.     switch (config.position) {
  138.       case 'top-left':
  139.         x = padding;
  140.         y = config.size + padding;
  141.         break;
  142.       case 'top-right':
  143.         x = this.canvas_.width - metrics.width - padding;
  144.         y = config.size + padding;
  145.         break;
  146.       case 'bottom-left':
  147.         x = padding;
  148.         y = this.canvas_.height - padding;
  149.         break;
  150.       case 'bottom-right':
  151.         x = this.canvas_.width - metrics.width - padding;
  152.         y = this.canvas_.height - padding;
  153.         break;
  154.       default:
  155.         x = (this.canvas_.width - metrics.width) / 2;
  156.         y = (this.canvas_.height + config.size) / 2;
  157.     }
  159.     ctx.fillText(config.text, x, y);
  160.   }
  162.   /**
  163.    * Starts a dynamic watermark animation on the canvas.
  164.    * @param {!shaka.ui.Watermark.Options} config  configuration options
  165.    * @private
  166.    */
  167.   startDynamicWatermark_(config) {
  168.     const ctx = /** @type {!CanvasRenderingContext2D} */ (
  169.       this.canvas_.getContext('2d')
  170.     );
  171.     let currentPosition = {left: 0, top: 0};
  172.     let currentAlpha = 0;
  173.     let phase = 'fadeIn'; // States: fadeIn, display, fadeOut, transition
  175.     let displayFrames = Math.round(config.displayDuration * 60); // 60fps
  176.     const transitionFrames = Math.round(config.transitionDuration * 60);
  177.     const fadeSpeed = 1 / (transitionFrames / 2); // Smoother fade speed
  179.     /** @private {number} */
  180.     let positionIndex = 0;
  182.     const getNextPosition = () => {
  183.       ctx.font = `${config.size}px Arial`;
  184.       const textMetrics = ctx.measureText(config.text);
  185.       const textWidth = textMetrics.width;
  186.       const textHeight = config.size;
  187.       const padding = 20;
  189.       // Define fixed positions
  190.       const positions = [
  191.         // Top-left
  192.         {
  193.           left: padding,
  194.           top: textHeight + padding,
  195.         },
  196.         // Top-right
  197.         {
  198.           left: this.canvas_.width - textWidth - padding,
  199.           top: textHeight + padding,
  200.         },
  201.         // Bottom-left
  202.         {
  203.           left: padding,
  204.           top: this.canvas_.height - padding,
  205.         },
  206.         // Bottom-right
  207.         {
  208.           left: this.canvas_.width - textWidth - padding,
  209.           top: this.canvas_.height - padding,
  210.         },
  211.         // Center
  212.         {
  213.           left: (this.canvas_.width - textWidth) / 2,
  214.           top: (this.canvas_.height + textHeight) / 2,
  215.         },
  216.       ];
  218.       // Cycle through positions
  219.       const position = positions[positionIndex];
  220.       positionIndex = (positionIndex + 1) % positions.length;
  221.       return position;
  222.     };
  224.     currentPosition = getNextPosition();
  226.     const updateWatermark = () => {
  227.       if (!this.animationId_) {
  228.         return;
  229.       }
  231.       const width = this.canvas_.width;
  232.       const height = this.canvas_.height;
  233.       ctx.clearRect(0, 0, width, height);
  235.       // State machine for watermark phases
  236.       switch (phase) {
  237.         case 'fadeIn':
  238.           currentAlpha = Math.min(config.alpha, currentAlpha + fadeSpeed);
  239.           if (currentAlpha >= config.alpha) {
  240.             phase = 'display';
  241.           }
  242.           break;
  243.         case 'display':
  244.           if (--displayFrames <= 0) {
  245.             phase = 'fadeOut';
  246.           }
  247.           break;
  248.         case 'fadeOut':
  249.           currentAlpha = Math.max(0, currentAlpha - fadeSpeed);
  250.           if (currentAlpha <= 0) {
  251.             phase = 'transition';
  252.             currentPosition = getNextPosition();
  253.             displayFrames = Math.round(config.displayDuration * 60);
  254.             phase = 'fadeIn';
  255.           }
  256.           break;
  257.       }
  259.       // Draw watermark if visible
  260.       if (currentAlpha > 0) {
  261.         ctx.globalAlpha = currentAlpha;
  262.         ctx.fillStyle = config.color;
  263.         ctx.font = `${config.size}px Arial`;
  264.         ctx.fillText(config.text, currentPosition.left, currentPosition.top);
  265.       }
  267.       // Request next frame if animation is still active
  268.       if (this.animationId_) {
  269.         this.animationId_ = requestAnimationFrame(updateWatermark);
  270.       }
  271.     };
  273.     // Start the animation loop
  274.     this.animationId_ = requestAnimationFrame(updateWatermark);
  275.   }
  277.   /**
  278.    * Removes the current watermark from the video and stops any animations.
  279.    * @export
  280.    */
  281.   removeWatermark() {
  282.     if (this.animationId_) {
  283.       cancelAnimationFrame(this.animationId_);
  284.       this.animationId_ = null;
  285.     }
  286.     const ctx = this.getContext2D_();
  287.     if (!ctx) {
  288.       return;
  289.     }
  290.     ctx.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
  291.   }
  293.   /**
  294.    * Releases the watermark instance and cleans up the canvas element.
  295.    * @override
  296.    */
  297.   release() {
  298.     if (this.canvas_ && this.canvas_.parentNode) {
  299.       this.canvas_.parentNode.removeChild(this.canvas_);
  300.     }
  302.     // Clean up resize observer if it exists
  303.     if (this.resizeObserver_) {
  304.       this.resizeObserver_.disconnect();
  305.       this.resizeObserver_ = null;
  306.     } else {
  307.       // Remove window resize listener if we were using that
  308.       window.removeEventListener('resize', () => this.resizeCanvas_());
  309.     }
  311.     super.release();
  312.   }
  313. };