shaka-player 4.12.8 → 4.13.0

package/ui/watermark.js

@@ -0,0 +1,313 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.ui.Watermark');
+
+goog.requireType('shaka.ui.Controls');
+
+goog.require('shaka.ui.Element');
+goog.require('shaka.log');
+
+/**
+ * A UI component that adds watermark functionality to the Shaka Player.
+ * Allows adding text watermarks with various customization options.
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.Watermark = class extends shaka.ui.Element {
+  /**
+   * Creates a new Watermark instance.
+   * @param {!HTMLElement} parent The parent element for the watermark canvas
+   * @param {!shaka.ui.Controls} controls The controls instance
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLCanvasElement} */
+    this.canvas_ = /** @type {!HTMLCanvasElement} */ (
+      document.createElement('canvas')
+    );
+    this.canvas_.style.position = 'absolute';
+    this.canvas_.style.top = '0';
+    this.canvas_.style.left = '0';
+    this.canvas_.style.pointerEvents = 'none';
+
+    this.parent.appendChild(this.canvas_);
+    this.resizeCanvas_();
+
+    /** @private {number|null} */
+    this.animationId_ = null;
+
+    /** @private {ResizeObserver|null} */
+    this.resizeObserver_ = null;
+
+    // Use ResizeObserver if available, fallback to window resize event
+    if (window.ResizeObserver) {
+      this.resizeObserver_ = new ResizeObserver(() => this.resizeCanvas_());
+      this.resizeObserver_.observe(this.parent);
+    } else {
+      // Fallback for older browsers
+      window.addEventListener('resize', () => this.resizeCanvas_());
+    }
+  }
+
+  /**
+   * Gets the 2D rendering context safely
+   * @return {?CanvasRenderingContext2D}
+   * @private
+   */
+  getContext2D_() {
+    const ctx = this.canvas_.getContext('2d');
+    if (!ctx) {
+      shaka.log.error('2D context is not available');
+      return null;
+    }
+    return /** @type {!CanvasRenderingContext2D} */ (ctx);
+  }
+
+  /**
+   * Resize canvas to match video container
+   * @private
+   */
+  resizeCanvas_() {
+    this.canvas_.width = this.parent.offsetWidth;
+    this.canvas_.height = this.parent.offsetHeight;
+  }
+
+  /**
+   * Sets a text watermark on the video with customizable options.
+   * The watermark can be either static (fixed position) or dynamic (moving).
+   * @param {string} text The text to display as watermark
+   * @param {?shaka.ui.Watermark.Options=} options  configuration options
+   * @export
+   */
+  setTextWatermark(text, options) {
+    /** @type {!shaka.ui.Watermark.Options} */
+    const defaultOptions = {
+      type: 'static',
+      text: text,
+      position: 'top-right',
+      color: 'rgba(255, 255, 255, 0.7)',
+      size: 20,
+      alpha: 0.7,
+      interval: 2 * 1000,
+      skip: 0.5 * 1000,
+      displayDuration: 2 * 1000,
+      transitionDuration: 0.5,
+    };
+
+    /** @type {!shaka.ui.Watermark.Options} */
+    const config = /** @type {!shaka.ui.Watermark.Options} */ (
+      Object.assign({}, defaultOptions, options || defaultOptions)
+    );
+
+    if (config.type === 'static') {
+      this.drawStaticWatermark_(config);
+    } else if (config.type === 'dynamic') {
+      this.startDynamicWatermark_(config);
+    }
+  }
+
+  /**
+   * Draws a static watermark on the canvas.
+   * @param {!shaka.ui.Watermark.Options} config  configuration options
+   * @private
+   */
+  drawStaticWatermark_(config) {
+    const ctx = this.getContext2D_();
+    if (!ctx) {
+      return;
+    }
+
+    ctx.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
+
+    ctx.globalAlpha = config.alpha;
+    ctx.fillStyle = config.color;
+    ctx.font = `${config.size}px Arial`;
+
+    const metrics = ctx.measureText(config.text);
+    const padding = 20;
+    let x;
+    let y;
+
+    switch (config.position) {
+      case 'top-left':
+        x = padding;
+        y = config.size + padding;
+        break;
+      case 'top-right':
+        x = this.canvas_.width - metrics.width - padding;
+        y = config.size + padding;
+        break;
+      case 'bottom-left':
+        x = padding;
+        y = this.canvas_.height - padding;
+        break;
+      case 'bottom-right':
+        x = this.canvas_.width - metrics.width - padding;
+        y = this.canvas_.height - padding;
+        break;
+      default:
+        x = (this.canvas_.width - metrics.width) / 2;
+        y = (this.canvas_.height + config.size) / 2;
+    }
+
+    ctx.fillText(config.text, x, y);
+  }
+
+  /**
+   * Starts a dynamic watermark animation on the canvas.
+   * @param {!shaka.ui.Watermark.Options} config  configuration options
+   * @private
+   */
+  startDynamicWatermark_(config) {
+    const ctx = /** @type {!CanvasRenderingContext2D} */ (
+      this.canvas_.getContext('2d')
+    );
+    let currentPosition = {left: 0, top: 0};
+    let currentAlpha = 0;
+    let phase = 'fadeIn'; // States: fadeIn, display, fadeOut, transition
+
+    let displayFrames = Math.round(config.displayDuration * 60); // 60fps
+    const transitionFrames = Math.round(config.transitionDuration * 60);
+    const fadeSpeed = 1 / (transitionFrames / 2); // Smoother fade speed
+
+    /** @private {number} */
+    let positionIndex = 0;
+
+    const getNextPosition = () => {
+      ctx.font = `${config.size}px Arial`;
+      const textMetrics = ctx.measureText(config.text);
+      const textWidth = textMetrics.width;
+      const textHeight = config.size;
+      const padding = 20;
+
+      // Define fixed positions
+      const positions = [
+        // Top-left
+        {
+          left: padding,
+          top: textHeight + padding,
+        },
+        // Top-right
+        {
+          left: this.canvas_.width - textWidth - padding,
+          top: textHeight + padding,
+        },
+        // Bottom-left
+        {
+          left: padding,
+          top: this.canvas_.height - padding,
+        },
+        // Bottom-right
+        {
+          left: this.canvas_.width - textWidth - padding,
+          top: this.canvas_.height - padding,
+        },
+        // Center
+        {
+          left: (this.canvas_.width - textWidth) / 2,
+          top: (this.canvas_.height + textHeight) / 2,
+        },
+      ];
+
+      // Cycle through positions
+      const position = positions[positionIndex];
+      positionIndex = (positionIndex + 1) % positions.length;
+      return position;
+    };
+
+    currentPosition = getNextPosition();
+
+    const updateWatermark = () => {
+      if (!this.animationId_) {
+        return;
+      }
+
+      const width = this.canvas_.width;
+      const height = this.canvas_.height;
+      ctx.clearRect(0, 0, width, height);
+
+      // State machine for watermark phases
+      switch (phase) {
+        case 'fadeIn':
+          currentAlpha = Math.min(config.alpha, currentAlpha + fadeSpeed);
+          if (currentAlpha >= config.alpha) {
+            phase = 'display';
+          }
+          break;
+        case 'display':
+          if (--displayFrames <= 0) {
+            phase = 'fadeOut';
+          }
+          break;
+        case 'fadeOut':
+          currentAlpha = Math.max(0, currentAlpha - fadeSpeed);
+          if (currentAlpha <= 0) {
+            phase = 'transition';
+            currentPosition = getNextPosition();
+            displayFrames = Math.round(config.displayDuration * 60);
+            phase = 'fadeIn';
+          }
+          break;
+      }
+
+      // Draw watermark if visible
+      if (currentAlpha > 0) {
+        ctx.globalAlpha = currentAlpha;
+        ctx.fillStyle = config.color;
+        ctx.font = `${config.size}px Arial`;
+        ctx.fillText(config.text, currentPosition.left, currentPosition.top);
+      }
+
+      // Request next frame if animation is still active
+      if (this.animationId_) {
+        this.animationId_ = requestAnimationFrame(updateWatermark);
+      }
+    };
+
+    // Start the animation loop
+    this.animationId_ = requestAnimationFrame(updateWatermark);
+  }
+
+  /**
+   * Removes the current watermark from the video and stops any animations.
+   * @export
+   */
+  removeWatermark() {
+    if (this.animationId_) {
+      cancelAnimationFrame(this.animationId_);
+      this.animationId_ = null;
+    }
+    const ctx = this.getContext2D_();
+    if (!ctx) {
+      return;
+    }
+    ctx.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
+  }
+
+  /**
+   * Releases the watermark instance and cleans up the canvas element.
+   * @override
+   */
+  release() {
+    if (this.canvas_ && this.canvas_.parentNode) {
+      this.canvas_.parentNode.removeChild(this.canvas_);
+    }
+
+    // Clean up resize observer if it exists
+    if (this.resizeObserver_) {
+      this.resizeObserver_.disconnect();
+      this.resizeObserver_ = null;
+    } else {
+      // Remove window resize listener if we were using that
+      window.removeEventListener('resize', () => this.resizeCanvas_());
+    }
+
+    super.release();
+  }
+};

package/.eslintignore

@@ -1,4 +0,0 @@
-# Similar to .gitignore, this lists files ignored by eslint.
-
-# This is default ignored, but we want to still lint it.
-!.eslintrc.js

package/.eslintrc.js

@@ -1,310 +0,0 @@
-// vim: foldmethod=marker:foldmarker={{{,}}}
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// ESlint config
-
-// This is a matcher (usable in no-restricted-syntax) that matches either a
-// test or a before/after block.
-const testNameRegex =
-    '/^([fx]?it|(drm|quarantined)It|(before|after)(Each|All))$/';
-const testCall = `CallExpression[callee.name=${testNameRegex}]`;
-
-const commonNoRestrictedSyntax = [
-  {
-    'selector':
-        'MemberExpression[object.name="goog"][property.name="inherits"]',
-    'message': 'Don\'t use goog.inherits.',
-  },
-  {
-    'selector': ':not(MethodDefinition) > FunctionExpression',
-    'message': 'Use arrow functions instead of "function" functions.',
-  },
-  {
-    'selector': 'CallExpression[callee.property.name="forEach"] >' +
-                ':function[params.length=1]',
-    'message': 'Use for-of instead of forEach',
-  },
-  {
-    // NOTE: prefer-spread rule covers .apply() already.
-    'selector': 'CallExpression[callee.property.name=/^(bind|call)$/]',
-    'message': 'Don\'t use Function bind/call.',
-  },
-  {
-    'selector': 'MemberExpression[property.name="prototype"]',
-    'message': 'Use ES6 classes not .prototype.',
-  },
-  {
-    'selector': 'BinaryExpression[operator=/^([<>!=]=?)$/] > ' +
-                'CallExpression[callee.property.name=indexOf]',
-    'message': 'Use Array.includes instead of indexOf.',
-  },
-];
-
-module.exports = {
-  'env': {
-    'browser': true,
-    'es6': true,
-  },
-  'parserOptions': {
-    'ecmaVersion': 2017,
-  },
-  'extends': ['eslint:recommended', 'google', 'plugin:shaka-rules/config'],
-  'rules': {
-    // Things the compiler already takes care of, with more precision: {{{
-    'no-console': 'off',
-    'no-eq-null': 'off',
-    'no-eval': 'off',
-    'no-undef': 'off',
-    'valid-jsdoc': 'off',
-    // }}}
-
-    // Things we should probably fix, but in stages in multiple commits: {{{
-
-    // These could catch real bugs
-    'default-case': 'off',
-    // TODO: Enable no-loop-func in next eslint release.  We can't use it
-    // now since it doesn't allow capturing "const" variables, which is safe
-    'no-loop-func': 'off',
-    'no-unused-expressions': 'off',  // Conflicts with some Closure declarations
-    'prefer-promise-reject-errors': 'off',
-
-    // These could improve readability
-    'complexity': 'off',
-    'no-negated-condition': 'off',
-    'no-shadow': 'off',
-    // }}}
-
-    // "Possible error" rules: {{{
-    'no-async-promise-executor': 'error',
-    'no-await-in-loop': 'error',
-    'no-empty': ['error', {'allowEmptyCatch': true}],
-    'no-misleading-character-class': 'error',
-    'no-template-curly-in-string': 'error',
-    'no-fallthrough': ['error', {'allowEmptyCase': true}],
-    // TODO: Try to re-enable this if possible.  Right now, it produces way too
-    // many false-positives with eslint 7.  It worked well enough in eslint 5.
-    // 'require-atomic-updates': 'error',
-    // }}}
-
-    // "Best practices" rules: {{{
-    'accessor-pairs': 'error',
-    'array-callback-return': 'error',
-    // causes issues when implementing an interface
-    'class-methods-use-this': 'off',
-    'consistent-return': 'error',
-    'dot-location': ['error', 'property'],
-    'dot-notation': 'off',  // We use bracket notation in tests on purpose
-    'eqeqeq': 'off',        // Compiler handles type checking in advance
-    'guard-for-in': 'off',
-    'no-alert': 'error',
-    'no-caller': 'error',
-    'no-div-regex': 'error',
-    'no-extend-native': 'error',  // May conflict with future polyfills
-    'no-extra-label': 'error',
-    'no-floating-decimal': 'error',
-    'no-implicit-coercion': ['error', {'allow': ['!!']}],
-    'no-implied-eval': 'error',
-    'no-invalid-this': 'error',
-    'no-iterator': 'error',
-    'no-labels': 'error',
-    'no-lone-blocks': 'error',
-    'no-multi-spaces': ['error', {'ignoreEOLComments': true}],
-    'no-multi-str': 'error',
-    'no-new': 'error',
-    'no-new-func': 'error',
-    'no-new-wrappers': 'error',
-    'no-octal-escape': 'error',
-    'no-proto': 'error',
-    'no-return-assign': 'error',
-    'no-return-await': 'error',
-    'no-script-url': 'error',
-    'no-self-compare': 'error',
-    'no-sequences': 'error',
-    'no-throw-literal': 'error',
-    'no-unmodified-loop-condition': 'error',
-    'no-unused-vars': 'off',  // Interface impls may not require all args
-    'no-useless-call': 'error',
-    'no-useless-catch': 'error',
-    'no-useless-concat': 'error',
-    'no-useless-return': 'error',
-    'no-void': 'error',
-    'no-warning-comments': 'off',  // TODO and FIXME are fine
-    'radix': ['error', 'always'],
-    'require-await': 'error',
-    'wrap-iife': ['error', 'inside'],
-    'yoda': ['error', 'never'],
-    // }}}
-
-    // "Variables" rules: {{{
-    'no-label-var': 'error',
-    'no-shadow-restricted-names': 'error',
-    'no-undef-init': 'off',  // Sometimes necessary with hacky compiler casts
-    'no-undefined': 'off',   // We use undefined in many places, legitimately
-    // Does not know when things are executed, false positives
-    'no-use-before-define': 'off',
-    // }}}
-
-    // "Stylistic Issues" rules: {{{
-    'array-bracket-newline': ['error', 'consistent'],
-    'block-spacing': ['error', 'always'],
-    'brace-style': ['error', '1tbs', {'allowSingleLine': true}],
-    'id-denylist': ['error', 'async'],
-    'lines-between-class-members': 'error',
-    'max-statements-per-line': ['error', {'max': 1}],
-    'new-parens': 'error',
-    'no-mixed-operators': [
-      'error', {
-        'groups': [['&', '|', '^', '~', '<<', '>>', '>>>', '&&', '||']],
-        'allowSamePrecedence': false,
-      },
-    ],
-    'no-restricted-syntax': [
-      'error',
-      ...commonNoRestrictedSyntax,
-    ],
-    'no-whitespace-before-property': 'error',
-    'nonblock-statement-body-position': ['error', 'below'],
-    'operator-assignment': 'error',
-    'spaced-comment': ['error', 'always', {
-      // Characters which may be glued to the start of a comment block, but
-      // which do not violate the rule.  The "*" is for jsdoc's "/**" syntax,
-      // and the "!" is for the "/*!" of license headers which are passed
-      // verbatim through the compiler.
-      'markers': ['*', '!'],
-    }],
-    'require-jsdoc': ['error', {
-      'require': {
-        'FunctionDeclaration': true,
-        'MethodDefinition': true,
-        'ClassDeclaration': true,
-      },
-    }],
-    // }}}
-
-    // "ECMAScript 6" rules: {{{
-    'arrow-spacing': 'error',
-    'no-useless-constructor': 'error',
-    'prefer-arrow-callback': 'error',
-    'prefer-const': ['error', {'ignoreReadBeforeAssign': true}],
-    // }}}
-  },
-  'overrides': [
-    {
-      'rules': {
-        'no-restricted-syntax': [
-          'error',
-          {
-            'selector': 'CallExpression[callee.name="beforeAll"] ' +
-                        ':matches(' +
-                        'CallExpression[callee.property.name="createSpy"],' +
-                        'CallExpression[callee.name="spyOn"])',
-            'message': 'Create spies in beforeEach, not beforeAll.',
-          },
-          {
-            'selector': testCall + ' > :function[params.length>0]',
-            'message': 'Use async instead of "done" in tests.',
-          },
-          {
-            'selector': testCall + ' > CallExpression',
-            'message': 'Use filterDescribe instead of checkAndRun calls',
-          },
-          {
-            'selector': 'CatchClause',
-            'message': 'Use expect.toThrow or expectAsync.toBeRejected',
-          },
-          {
-            'selector': 'CallExpression[callee.name=expect] >' +
-                        'CallExpression[callee.property.name=count]' +
-                        '[callee.object.property.name=calls]',
-            'message': 'Use expect.toHaveBeenCalledTimes',
-          },
-          {
-            'selector':
-                'CallExpression[callee.property.name=toHaveBeenCalledTimes] >' +
-                'Literal[value=0]',
-            'message': 'Use expect.not.toHaveBeenCalled',
-          },
-          ...commonNoRestrictedSyntax,
-        ],
-      },
-      'files': [
-        'test/**/*.js',
-      ],
-    },
-    {
-      'rules': {
-        'no-restricted-syntax': 'off',
-      },
-      'files': [
-        'demo/load.js',
-        'externs/**/*.js',
-        'test/test/externs/*.js',
-        'ui/externs/*.js',
-      ],
-    },
-    {
-      'rules': {
-        'no-var': 'off',
-      },
-      'files': [
-        // Closure requires using var in externs.
-        'ui/externs/*.js',
-        'externs/**/*.js',
-        'test/test/externs/*.js',
-        // Use var in load.js so it works in old browsers.  We'll use
-        // compiled mode for the main library and the demo.
-        'demo/load.js',
-      ],
-    },
-    {
-      'rules': {
-        'prefer-rest-params': 'off',
-      },
-      'files': [
-        // Test code should still use "arguments", since the alternate
-        // "rest parameter" syntax won't work in uncompiled code on IE.
-        'test/**/*.js',
-        // These two files use "arguments" to patch over functions.  It
-        // is difficult to reason about whether or not these instances
-        // would always work with rest parameters, so just allow them to
-        // use "arguments".
-        'demo/log_section.js',
-        'lib/debug/asserts.js',
-      ],
-    },
-    {
-      'rules': {
-        // Disable rules on useless constructors so we can use ES6 classes in
-        // externs.
-        'no-useless-constructor': 'off',
-      },
-      'files': ['externs/**/*.js'],
-    },
-    {
-      'rules': {
-        // JSDoc is not strictly required in externs, tests, and in load.js.
-        'require-jsdoc': 'off',
-      },
-      'files': [
-        'demo/load.js',
-        'externs/**/*.js',
-        'test/**/*.js',
-      ],
-    },
-    {
-      'rules': {
-        // Externs naturally redeclare things eslint knows about.
-        'no-redeclare': 'off',
-      },
-      'files': [
-        'ui/externs/*.js',
-        'externs/**/*.js',
-        'test/test/externs/*.js',
-      ],
-    },
-  ],
-};