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', () => {
  74.       if (this.controls.isOpaque()) {
  75.         this.isChanging_ = true;
  76.         this.onChangeStart();
  77.       }
  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.     });
  88.     this.eventManager.listen(this.bar, 'input', () => {
  89.       this.onChange();
  90.     });
  92.     this.eventManager.listen(this.bar, 'touchmove', (e) => {
  93.       if (this.isChanging_) {
  94.         this.setBarValueForTouch_(e);
  95.         this.onChange();
  96.       }
  97.     });
  99.     this.eventManager.listen(this.bar, 'touchend', (e) => {
  100.       if (this.isChanging_) {
  101.         this.isChanging_ = false;
  102.         this.setBarValueForTouch_(e);
  103.         this.onChangeEnd();
  104.       }
  105.     });
  107.     this.eventManager.listen(this.bar, 'touchcancel', (e) => {
  108.       if (this.isChanging_) {
  109.         this.isChanging_ = false;
  110.         this.setBarValueForTouch_(e);
  111.         this.onChangeEnd();
  112.       }
  113.     });
  115.     this.eventManager.listen(this.bar, 'mouseup', () => {
  116.       if (this.isChanging_) {
  117.         this.isChanging_ = false;
  118.         this.onChangeEnd();
  119.       }
  120.     });
  122.     this.eventManager.listen(this.bar, 'blur', () => {
  123.       if (this.isChanging_) {
  124.         this.isChanging_ = false;
  125.         this.onChangeEnd();
  126.       }
  127.     });
  129.     this.eventManager.listen(this.bar, 'contextmenu', (e) => {
  130.       e.preventDefault();
  131.       e.stopPropagation();
  132.     });
  133.   }
  135.   /** @override */
  136.   release() {
  137.     if (this.endFakeChangeTimer_) {
  138.       this.endFakeChangeTimer_.stop();
  139.       this.endFakeChangeTimer_ = null;
  140.     }
  142.     super.release();
  143.   }
  145.   /**
  146.    * @override
  147.    * @export
  148.    */
  149.   setRange(min, max) {
  150.     this.bar.min = min;
  151.     this.bar.max = max;
  152.   }
  154.   /**
  155.    * Called when user interaction begins.
  156.    * To be overridden by subclasses.
  157.    * @override
  158.    * @export
  159.    */
  160.   onChangeStart() {}
  162.   /**
  163.    * Called when a new value is set by user interaction.
  164.    * To be overridden by subclasses.
  165.    * @override
  166.    * @export
  167.    */
  168.   onChange() {}
  170.   /**
  171.    * Called when user interaction ends.
  172.    * To be overridden by subclasses.
  173.    * @override
  174.    * @export
  175.    */
  176.   onChangeEnd() {}
  178.   /**
  179.    * Called to implement keyboard-based changes, where this is no clear "end".
  180.    * This will simulate events like onChangeStart(), onChange(), and
  181.    * onChangeEnd() as appropriate.
  182.    *
  183.    * @override
  184.    * @export
  185.    */
  186.   changeTo(value) {
  187.     if (!this.isChanging_) {
  188.       this.isChanging_ = true;
  189.       this.onChangeStart();
  190.     }
  192.     const min = parseFloat(this.bar.min);
  193.     const max = parseFloat(this.bar.max);
  195.     if (value > max) {
  196.       this.bar.value = max;
  197.     } else if (value < min) {
  198.       this.bar.value = min;
  199.     } else {
  200.       this.bar.value = value;
  201.     }
  202.     this.onChange();
  204.     this.endFakeChangeTimer_.tickAfter(/* seconds= */ 0.5);
  205.   }
  207.   /**
  208.    * @override
  209.    * @export
  210.    */
  211.   getValue() {
  212.     return parseFloat(this.bar.value);
  213.   }
  215.   /**
  216.    * @override
  217.    * @export
  218.    */
  219.   setValue(value) {
  220.     // The user interaction overrides any external values being pushed in.
  221.     if (this.isChanging_) {
  222.       return;
  223.     }
  225.     this.bar.value = value;
  226.   }
  228.   /**
  229.    * Synchronize the touch position with the range value.
  230.    * Comes in handy on iOS, where users have to grab the handle in order
  231.    * to start seeking.
  232.    * @param {Event} event
  233.    * @private
  234.    */
  235.   setBarValueForTouch_(event) {
  236.     event.preventDefault();
  238.     const changedTouch = /** @type {TouchEvent} */ (event).changedTouches[0];
  239.     const rect = this.bar.getBoundingClientRect();
  240.     const min = parseFloat(this.bar.min);
  241.     const max = parseFloat(this.bar.max);
  243.     // Calculate the range value based on the touch position.
  245.     // Pixels from the left of the range element
  246.     const touchPosition = changedTouch.clientX - rect.left;
  248.     // Pixels per unit value of the range element.
  249.     const scale = (max - min) / rect.width;
  251.     // Touch position in units, which may be outside the allowed range.
  252.     let value = min + scale * touchPosition;
  254.     // Keep value within bounds.
  255.     if (value < min) {
  256.       value = min;
  257.     } else if (value > max) {
  258.       value = max;
  259.     }
  261.     this.bar.value = value;
  262.   }
  263. };