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.     // TODO(#2027): step=any causes keyboard nav problems on IE 11.
  65.     this.bar.step = 'any';
  66.     this.bar.min = '0';
  67.     this.bar.max = '1';
  68.     this.bar.value = '0';
  70.     this.container.appendChild(this.bar);
  71.     this.parent.appendChild(this.container);
  73.     this.eventManager.listen(this.bar, 'mousedown', (e) => {
  74.       if (this.controls.isOpaque()) {
  75.         this.isChanging_ = true;
  76.         this.onChangeStart();
  77.       }
  78.       e.stopPropagation();
  79.     });
  81.     this.eventManager.listen(this.bar, 'touchstart', (e) => {
  82.       if (this.controls.isOpaque()) {
  83.         this.isChanging_ = true;
  84.         this.setBarValueForTouch_(e);
  85.         this.onChangeStart();
  86.       }
  87.       e.stopPropagation();
  88.     });
  90.     this.eventManager.listen(this.bar, 'input', () => {
  91.       this.onChange();
  92.     });
  94.     this.eventManager.listen(this.bar, 'touchmove', (e) => {
  95.       if (this.isChanging_) {
  96.         this.setBarValueForTouch_(e);
  97.         this.onChange();
  98.       }
  99.       e.stopPropagation();
  100.     });
  102.     this.eventManager.listen(this.bar, 'touchend', (e) => {
  103.       if (this.isChanging_) {
  104.         this.isChanging_ = false;
  105.         this.setBarValueForTouch_(e);
  106.         this.onChangeEnd();
  107.       }
  108.       e.stopPropagation();
  109.     });
  111.     this.eventManager.listen(this.bar, 'touchcancel', (e) => {
  112.       if (this.isChanging_) {
  113.         this.isChanging_ = false;
  114.         this.setBarValueForTouch_(e);
  115.         this.onChangeEnd();
  116.       }
  117.       e.stopPropagation();
  118.     });
  120.     this.eventManager.listen(this.bar, 'mouseup', (e) => {
  121.       if (this.isChanging_) {
  122.         this.isChanging_ = false;
  123.         this.onChangeEnd();
  124.       }
  125.       e.stopPropagation();
  126.     });
  128.     this.eventManager.listen(this.bar, 'blur', () => {
  129.       if (this.isChanging_) {
  130.         this.isChanging_ = false;
  131.         this.onChangeEnd();
  132.       }
  133.     });
  135.     this.eventManager.listen(this.bar, 'contextmenu', (e) => {
  136.       e.preventDefault();
  137.       e.stopPropagation();
  138.     });
  139.   }
  141.   /** @override */
  142.   release() {
  143.     if (this.endFakeChangeTimer_) {
  144.       this.endFakeChangeTimer_.stop();
  145.       this.endFakeChangeTimer_ = null;
  146.     }
  148.     super.release();
  149.   }
  151.   /**
  152.    * @override
  153.    * @export
  154.    */
  155.   setRange(min, max) {
  156.     this.bar.min = min;
  157.     this.bar.max = max;
  158.   }
  160.   /**
  161.    * Called when user interaction begins.
  162.    * To be overridden by subclasses.
  163.    * @override
  164.    * @export
  165.    */
  166.   onChangeStart() {}
  168.   /**
  169.    * Called when a new value is set by user interaction.
  170.    * To be overridden by subclasses.
  171.    * @override
  172.    * @export
  173.    */
  174.   onChange() {}
  176.   /**
  177.    * Called when user interaction ends.
  178.    * To be overridden by subclasses.
  179.    * @override
  180.    * @export
  181.    */
  182.   onChangeEnd() {}
  184.   /**
  185.    * Called to implement keyboard-based changes, where this is no clear "end".
  186.    * This will simulate events like onChangeStart(), onChange(), and
  187.    * onChangeEnd() as appropriate.
  188.    *
  189.    * @override
  190.    * @export
  191.    */
  192.   changeTo(value) {
  193.     if (!this.isChanging_) {
  194.       this.isChanging_ = true;
  195.       this.onChangeStart();
  196.     }
  198.     const min = parseFloat(this.bar.min);
  199.     const max = parseFloat(this.bar.max);
  201.     if (value > max) {
  202.       this.bar.value = max;
  203.     } else if (value < min) {
  204.       this.bar.value = min;
  205.     } else {
  206.       this.bar.value = value;
  207.     }
  208.     this.onChange();
  210.     this.endFakeChangeTimer_.tickAfter(/* seconds= */ 0.5);
  211.   }
  213.   /**
  214.    * @override
  215.    * @export
  216.    */
  217.   getValue() {
  218.     return parseFloat(this.bar.value);
  219.   }
  221.   /**
  222.    * @override
  223.    * @export
  224.    */
  225.   setValue(value) {
  226.     // The user interaction overrides any external values being pushed in.
  227.     if (this.isChanging_) {
  228.       return;
  229.     }
  231.     this.bar.value = value;
  232.   }
  234.   /**
  235.    * Synchronize the touch position with the range value.
  236.    * Comes in handy on iOS, where users have to grab the handle in order
  237.    * to start seeking.
  238.    * @param {Event} event
  239.    * @private
  240.    */
  241.   setBarValueForTouch_(event) {
  242.     event.preventDefault();
  244.     const changedTouch = /** @type {TouchEvent} */ (event).changedTouches[0];
  245.     const rect = this.bar.getBoundingClientRect();
  246.     const min = parseFloat(this.bar.min);
  247.     const max = parseFloat(this.bar.max);
  249.     // Calculate the range value based on the touch position.
  251.     // Pixels from the left of the range element
  252.     const touchPosition = changedTouch.clientX - rect.left;
  254.     // Pixels per unit value of the range element.
  255.     const scale = (max - min) / rect.width;
  257.     // Touch position in units, which may be outside the allowed range.
  258.     let value = min + scale * touchPosition;
  260.     // Keep value within bounds.
  261.     if (value < min) {
  262.       value = min;
  263.     } else if (value > max) {
  264.       value = max;
  265.     }
  267.     this.bar.value = value;
  268.   }
  269. };