Source: ui/range_element.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.RangeElement');
  10. goog.require('shaka.ui.Element');
  11. goog.require('shaka.util.Dom');
  12. goog.require('shaka.util.Timer');
  13. goog.requireType('shaka.ui.Controls');
  16. /**
  17.  * A range element, built to work across browsers.
  18.  *
  19.  * In particular, getting styles to work right on IE requires a specific
  20.  * structure.
  21.  *
  22.  * This also handles the case where the range element is being manipulated and
  23.  * updated at the same time.  This can happen when seeking during playback or
  24.  * when casting.
  25.  *
  26.  * @implements {shaka.extern.IUIRangeElement}
  27.  * @export
  28.  */
  29. shaka.ui.RangeElement = class extends shaka.ui.Element {
  30.   /**
  31.    * @param {!HTMLElement} parent
  32.    * @param {!shaka.ui.Controls} controls
  33.    * @param {!Array<string>} containerClassNames
  34.    * @param {!Array<string>} barClassNames
  35.    */
  36.   constructor(parent, controls, containerClassNames, barClassNames) {
  37.     super(parent, controls);
  39.     /**
  40.      * This container is to support IE 11.  See detailed notes in
  41.      * less/range_elements.less for a complete explanation.
  42.      * @protected {!HTMLElement}
  43.      */
  44.     this.container = shaka.util.Dom.createHTMLElement('div');
  45.     this.container.classList.add('shaka-range-container');
  46.     this.container.classList.add(...containerClassNames);
  48.     /** @private {boolean} */
  49.     this.isChanging_ = false;
  51.     /** @protected {!HTMLInputElement} */
  52.     this.bar =
  53.       /** @type {!HTMLInputElement} */ (document.createElement('input'));
  55.     /** @private {shaka.util.Timer} */
  56.     this.endFakeChangeTimer_ = new shaka.util.Timer(() => {
  57.       this.onChangeEnd();
  58.       this.isChanging_ = false;
  59.     });
  61.     this.bar.classList.add('shaka-range-element');
  62.     this.bar.classList.add(...barClassNames);
  63.     this.bar.type = 'range';
  64.     this.bar.step = 'any';
  65.     this.bar.min = '0';
  66.     this.bar.max = '1';
  67.     this.bar.value = '0';
  69.     this.container.appendChild(this.bar);
  70.     this.parent.appendChild(this.container);
  72.     this.eventManager.listen(this.bar, 'mousedown', (e) => {
  73.       if (this.controls.isOpaque()) {
  74.         this.isChanging_ = true;
  75.         this.onChangeStart();
  76.       }
  77.       e.stopPropagation();
  78.     });
  80.     this.eventManager.listen(this.bar, 'touchstart', (e) => {
  81.       if (this.controls.isOpaque()) {
  82.         this.isChanging_ = true;
  83.         this.setBarValueForTouch_(e);
  84.         this.onChangeStart();
  85.       }
  86.       e.stopPropagation();
  87.     });
  89.     this.eventManager.listen(this.bar, 'input', () => {
  90.       this.onChange();
  91.     });
  93.     this.eventManager.listen(this.bar, 'touchmove', (e) => {
  94.       if (this.isChanging_) {
  95.         this.setBarValueForTouch_(e);
  96.         this.onChange();
  97.       }
  98.       e.stopPropagation();
  99.     });
  101.     this.eventManager.listen(this.bar, 'touchend', (e) => {
  102.       if (this.isChanging_) {
  103.         this.isChanging_ = false;
  104.         this.setBarValueForTouch_(e);
  105.         this.onChangeEnd();
  106.       }
  107.       e.stopPropagation();
  108.     });
  110.     this.eventManager.listen(this.bar, 'touchcancel', (e) => {
  111.       if (this.isChanging_) {
  112.         this.isChanging_ = false;
  113.         this.setBarValueForTouch_(e);
  114.         this.onChangeEnd();
  115.       }
  116.       e.stopPropagation();
  117.     });
  119.     this.eventManager.listen(this.bar, 'mouseup', (e) => {
  120.       if (this.isChanging_) {
  121.         this.isChanging_ = false;
  122.         this.onChangeEnd();
  123.       }
  124.       e.stopPropagation();
  125.     });
  127.     this.eventManager.listen(this.bar, 'blur', () => {
  128.       if (this.isChanging_) {
  129.         this.isChanging_ = false;
  130.         this.onChangeEnd();
  131.       }
  132.     });
  134.     this.eventManager.listen(this.bar, 'contextmenu', (e) => {
  135.       e.preventDefault();
  136.       e.stopPropagation();
  137.     });
  138.   }
  140.   /** @override */
  141.   release() {
  142.     if (this.endFakeChangeTimer_) {
  143.       this.endFakeChangeTimer_.stop();
  144.       this.endFakeChangeTimer_ = null;
  145.     }
  147.     super.release();
  148.   }
  150.   /**
  151.    * @override
  152.    * @export
  153.    */
  154.   setRange(min, max) {
  155.     this.bar.min = min;
  156.     this.bar.max = max;
  157.   }
  159.   /**
  160.    * Called when user interaction begins.
  161.    * To be overridden by subclasses.
  162.    * @override
  163.    * @export
  164.    */
  165.   onChangeStart() {}
  167.   /**
  168.    * Called when a new value is set by user interaction.
  169.    * To be overridden by subclasses.
  170.    * @override
  171.    * @export
  172.    */
  173.   onChange() {}
  175.   /**
  176.    * Called when user interaction ends.
  177.    * To be overridden by subclasses.
  178.    * @override
  179.    * @export
  180.    */
  181.   onChangeEnd() {}
  183.   /**
  184.    * Called to implement keyboard-based changes, where this is no clear "end".
  185.    * This will simulate events like onChangeStart(), onChange(), and
  186.    * onChangeEnd() as appropriate.
  187.    *
  188.    * @override
  189.    * @export
  190.    */
  191.   changeTo(value) {
  192.     if (!this.isChanging_) {
  193.       this.isChanging_ = true;
  194.       this.onChangeStart();
  195.     }
  197.     const min = parseFloat(this.bar.min);
  198.     const max = parseFloat(this.bar.max);
  200.     if (value > max) {
  201.       this.bar.value = max;
  202.     } else if (value < min) {
  203.       this.bar.value = min;
  204.     } else {
  205.       this.bar.value = value;
  206.     }
  207.     this.onChange();
  209.     this.endFakeChangeTimer_.tickAfter(/* seconds= */ 0.5);
  210.   }
  212.   /**
  213.    * @override
  214.    * @export
  215.    */
  216.   getValue() {
  217.     return parseFloat(this.bar.value);
  218.   }
  220.   /**
  221.    * @override
  222.    * @export
  223.    */
  224.   setValue(value) {
  225.     // The user interaction overrides any external values being pushed in.
  226.     if (this.isChanging_) {
  227.       return;
  228.     }
  230.     this.bar.value = value;
  231.   }
  233.   /**
  234.    * Synchronize the touch position with the range value.
  235.    * Comes in handy on iOS, where users have to grab the handle in order
  236.    * to start seeking.
  237.    * @param {Event} event
  238.    * @private
  239.    */
  240.   setBarValueForTouch_(event) {
  241.     event.preventDefault();
  243.     const changedTouch = /** @type {TouchEvent} */ (event).changedTouches[0];
  244.     const rect = this.bar.getBoundingClientRect();
  245.     const min = parseFloat(this.bar.min);
  246.     const max = parseFloat(this.bar.max);
  248.     // Calculate the range value based on the touch position.
  250.     // Pixels from the left of the range element
  251.     const touchPosition = changedTouch.clientX - rect.left;
  253.     // Pixels per unit value of the range element.
  254.     const scale = (max - min) / rect.width;
  256.     // Touch position in units, which may be outside the allowed range.
  257.     let value = min + scale * touchPosition;
  259.     // Keep value within bounds.
  260.     if (value < min) {
  261.       value = min;
  262.     } else if (value > max) {
  263.       value = max;
  264.     }
  266.     this.bar.value = value;
  267.   }
  268. };