playback-rate-menu-button.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _menuButton = require('../../menu/menu-button.js');
  4. var _menuButton2 = _interopRequireDefault(_menuButton);
  5. var _menu = require('../../menu/menu.js');
  6. var _menu2 = _interopRequireDefault(_menu);
  7. var _playbackRateMenuItem = require('./playback-rate-menu-item.js');
  8. var _playbackRateMenuItem2 = _interopRequireDefault(_playbackRateMenuItem);
  9. var _component = require('../../component.js');
  10. var _component2 = _interopRequireDefault(_component);
  11. var _dom = require('../../utils/dom.js');
  12. var Dom = _interopRequireWildcard(_dom);
  13. 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; } }
  14. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  15. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  16. 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; }
  17. 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; } /**
  18. * @file playback-rate-menu-button.js
  19. */
  20. /**
  21. * The component for controlling the playback rate.
  22. *
  23. * @extends MenuButton
  24. */
  25. var PlaybackRateMenuButton = function (_MenuButton) {
  26. _inherits(PlaybackRateMenuButton, _MenuButton);
  27. /**
  28. * Creates an instance of this class.
  29. *
  30. * @param {Player} player
  31. * The `Player` that this class should be attached to.
  32. *
  33. * @param {Object} [options]
  34. * The key/value store of player options.
  35. */
  36. function PlaybackRateMenuButton(player, options) {
  37. _classCallCheck(this, PlaybackRateMenuButton);
  38. var _this = _possibleConstructorReturn(this, _MenuButton.call(this, player, options));
  39. _this.updateVisibility();
  40. _this.updateLabel();
  41. _this.on(player, 'loadstart', _this.updateVisibility);
  42. _this.on(player, 'ratechange', _this.updateLabel);
  43. return _this;
  44. }
  45. /**
  46. * Create the `Component`'s DOM element
  47. *
  48. * @return {Element}
  49. * The element that was created.
  50. */
  51. PlaybackRateMenuButton.prototype.createEl = function createEl() {
  52. var el = _MenuButton.prototype.createEl.call(this);
  53. this.labelEl_ = Dom.createEl('div', {
  54. className: 'vjs-playback-rate-value',
  55. innerHTML: 1.0
  56. });
  57. el.appendChild(this.labelEl_);
  58. return el;
  59. };
  60. /**
  61. * Builds the default DOM `className`.
  62. *
  63. * @return {string}
  64. * The DOM `className` for this object.
  65. */
  66. PlaybackRateMenuButton.prototype.buildCSSClass = function buildCSSClass() {
  67. return 'vjs-playback-rate ' + _MenuButton.prototype.buildCSSClass.call(this);
  68. };
  69. /**
  70. * Create the playback rate menu
  71. *
  72. * @return {Menu}
  73. * Menu object populated with {@link PlaybackRateMenuItem}s
  74. */
  75. PlaybackRateMenuButton.prototype.createMenu = function createMenu() {
  76. var menu = new _menu2['default'](this.player());
  77. var rates = this.playbackRates();
  78. if (rates) {
  79. for (var i = rates.length - 1; i >= 0; i--) {
  80. menu.addChild(new _playbackRateMenuItem2['default'](this.player(), { rate: rates[i] + 'x' }));
  81. }
  82. }
  83. return menu;
  84. };
  85. /**
  86. * Updates ARIA accessibility attributes
  87. */
  88. PlaybackRateMenuButton.prototype.updateARIAAttributes = function updateARIAAttributes() {
  89. // Current playback rate
  90. this.el().setAttribute('aria-valuenow', this.player().playbackRate());
  91. };
  92. /**
  93. * This gets called when an `PlaybackRateMenuButton` is "clicked". See
  94. * {@link ClickableComponent} for more detailed information on what a click can be.
  95. *
  96. * @param {EventTarget~Event} [event]
  97. * The `keydown`, `tap`, or `click` event that caused this function to be
  98. * called.
  99. *
  100. * @listens tap
  101. * @listens click
  102. */
  103. PlaybackRateMenuButton.prototype.handleClick = function handleClick(event) {
  104. // select next rate option
  105. var currentRate = this.player().playbackRate();
  106. var rates = this.playbackRates();
  107. // this will select first one if the last one currently selected
  108. var newRate = rates[0];
  109. for (var i = 0; i < rates.length; i++) {
  110. if (rates[i] > currentRate) {
  111. newRate = rates[i];
  112. break;
  113. }
  114. }
  115. this.player().playbackRate(newRate);
  116. };
  117. /**
  118. * Get possible playback rates
  119. *
  120. * @return {Array}
  121. * All possible playback rates
  122. */
  123. PlaybackRateMenuButton.prototype.playbackRates = function playbackRates() {
  124. return this.options_.playbackRates || this.options_.playerOptions && this.options_.playerOptions.playbackRates;
  125. };
  126. /**
  127. * Get whether playback rates is supported by the tech
  128. * and an array of playback rates exists
  129. *
  130. * @return {boolean}
  131. * Whether changing playback rate is supported
  132. */
  133. PlaybackRateMenuButton.prototype.playbackRateSupported = function playbackRateSupported() {
  134. return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0;
  135. };
  136. /**
  137. * Hide playback rate controls when they're no playback rate options to select
  138. *
  139. * @param {EventTarget~Event} [event]
  140. * The event that caused this function to run.
  141. *
  142. * @listens Player#loadstart
  143. */
  144. PlaybackRateMenuButton.prototype.updateVisibility = function updateVisibility(event) {
  145. if (this.playbackRateSupported()) {
  146. this.removeClass('vjs-hidden');
  147. } else {
  148. this.addClass('vjs-hidden');
  149. }
  150. };
  151. /**
  152. * Update button label when rate changed
  153. *
  154. * @param {EventTarget~Event} [event]
  155. * The event that caused this function to run.
  156. *
  157. * @listens Player#ratechange
  158. */
  159. PlaybackRateMenuButton.prototype.updateLabel = function updateLabel(event) {
  160. if (this.playbackRateSupported()) {
  161. this.labelEl_.innerHTML = this.player().playbackRate() + 'x';
  162. }
  163. };
  164. return PlaybackRateMenuButton;
  165. }(_menuButton2['default']);
  166. /**
  167. * The text that should display over the `FullscreenToggle`s controls. Added for localization.
  168. *
  169. * @type {string}
  170. * @private
  171. */
  172. PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
  173. _component2['default'].registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
  174. exports['default'] = PlaybackRateMenuButton;