duration-display.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _component = require('../../component.js');
  4. var _component2 = _interopRequireDefault(_component);
  5. var _dom = require('../../utils/dom.js');
  6. var Dom = _interopRequireWildcard(_dom);
  7. var _formatTime = require('../../utils/format-time.js');
  8. var _formatTime2 = _interopRequireDefault(_formatTime);
  9. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
  10. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  11. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  12. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  13. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
  14. * @file duration-display.js
  15. */
  16. /**
  17. * Displays the duration
  18. *
  19. * @extends Component
  20. */
  21. var DurationDisplay = function (_Component) {
  22. _inherits(DurationDisplay, _Component);
  23. /**
  24. * Creates an instance of this class.
  25. *
  26. * @param {Player} player
  27. * The `Player` that this class should be attached to.
  28. *
  29. * @param {Object} [options]
  30. * The key/value store of player options.
  31. */
  32. function DurationDisplay(player, options) {
  33. _classCallCheck(this, DurationDisplay);
  34. var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
  35. _this.on(player, 'durationchange', _this.updateContent);
  36. // Also listen for timeupdate and loadedmetadata because removing those
  37. // listeners could have broken dependent applications/libraries. These
  38. // can likely be removed for 6.0.
  39. _this.on(player, 'timeupdate', _this.updateContent);
  40. _this.on(player, 'loadedmetadata', _this.updateContent);
  41. return _this;
  42. }
  43. /**
  44. * Create the `Component`'s DOM element
  45. *
  46. * @return {Element}
  47. * The element that was created.
  48. */
  49. DurationDisplay.prototype.createEl = function createEl() {
  50. var el = _Component.prototype.createEl.call(this, 'div', {
  51. className: 'vjs-duration vjs-time-control vjs-control'
  52. });
  53. this.contentEl_ = Dom.createEl('div', {
  54. className: 'vjs-duration-display',
  55. // label the duration time for screen reader users
  56. innerHTML: '<span class="vjs-control-text">' + this.localize('Duration Time') + '</span> 0:00'
  57. }, {
  58. // tell screen readers not to automatically read the time as it changes
  59. 'aria-live': 'off'
  60. });
  61. el.appendChild(this.contentEl_);
  62. return el;
  63. };
  64. /**
  65. * Update duration time display.
  66. *
  67. * @param {EventTarget~Event} [event]
  68. * The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
  69. * this function to be called.
  70. *
  71. * @listens Player#durationchange
  72. * @listens Player#timeupdate
  73. * @listens Player#loadedmetadata
  74. */
  75. DurationDisplay.prototype.updateContent = function updateContent(event) {
  76. var duration = this.player_.duration();
  77. if (duration && this.duration_ !== duration) {
  78. this.duration_ = duration;
  79. var localizedText = this.localize('Duration Time');
  80. var formattedTime = (0, _formatTime2['default'])(duration);
  81. // label the duration time for screen reader users
  82. this.contentEl_.innerHTML = '<span class="vjs-control-text">' + localizedText + '</span> ' + formattedTime;
  83. }
  84. };
  85. return DurationDisplay;
  86. }(_component2['default']);
  87. _component2['default'].registerComponent('DurationDisplay', DurationDisplay);
  88. exports['default'] = DurationDisplay;