1. 1 : /**
  2. 2 : * @file mouse-time-display.js
  3. 3 : */
  4. 4 : import Component from '../../component.js';
  5. 5 : import * as Fn from '../../utils/fn.js';
  6. 6 :
  7. 7 : import './time-tooltip';
  8. 8 :
  9. 9 : /**
  10. 10 : * The {@link MouseTimeDisplay} component tracks mouse movement over the
  11. 11 : * {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
  12. 12 : * indicating the time which is represented by a given point in the
  13. 13 : * {@link ProgressControl}.
  14. 14 : *
  15. 15 : * @extends Component
  16. 16 : */
  17. 17 : class MouseTimeDisplay extends Component {
  18. 18 :
  19. 19 : /**
  20. 20 : * Creates an instance of this class.
  21. 21 : *
  22. 22 : * @param {Player} player
  23. 23 : * The {@link Player} that this class should be attached to.
  24. 24 : *
  25. 25 : * @param {Object} [options]
  26. 26 : * The key/value store of player options.
  27. 27 : */
  28. 28 : constructor(player, options) {
  29. 29 : super(player, options);
  30. 30 : this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
  31. 31 : }
  32. 32 :
  33. 33 : /**
  34. 34 : * Create the DOM element for this class.
  35. 35 : *
  36. 36 : * @return {Element}
  37. 37 : * The element that was created.
  38. 38 : */
  39. 39 : createEl() {
  40. 40 : return super.createEl('div', {
  41. 41 : className: 'vjs-mouse-display'
  42. 42 : });
  43. 43 : }
  44. 44 :
  45. 45 : /**
  46. 46 : * Enqueues updates to its own DOM as well as the DOM of its
  47. 47 : * {@link TimeTooltip} child.
  48. 48 : *
  49. 49 : * @param {Object} seekBarRect
  50. 50 : * The `ClientRect` for the {@link SeekBar} element.
  51. 51 : *
  52. 52 : * @param {number} seekBarPoint
  53. 53 : * A number from 0 to 1, representing a horizontal reference point
  54. 54 : * from the left edge of the {@link SeekBar}
  55. 55 : */
  56. 56 : update(seekBarRect, seekBarPoint) {
  57. 57 : const time = seekBarPoint * this.player_.duration();
  58. 58 :
  59. 59 : this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
  60. 60 : this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
  61. 61 : });
  62. 62 : }
  63. 63 : }
  64. 64 :
  65. 65 : /**
  66. 66 : * Default options for `MouseTimeDisplay`
  67. 67 : *
  68. 68 : * @type {Object}
  69. 69 : * @private
  70. 70 : */
  71. 71 : MouseTimeDisplay.prototype.options_ = {
  72. 72 : children: [
  73. 73 : 'timeTooltip'
  74. 74 : ]
  75. 75 : };
  76. 76 :
  77. 77 : Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
  78. 78 : export default MouseTimeDisplay;