1. 1 : /**
  2. 2 :  * @file playback-rate-menu-item.js
  3. 3 :  */
  4. 4 : import MenuItem from '../../menu/menu-item.js';
  5. 5 : import Component from '../../component.js';
  6. 6 : 
  7. 7 : /**
  8. 8 :  * The specific menu item type for selecting a playback rate.
  9. 9 :  *
  10. 10 :  * @extends MenuItem
  11. 11 :  */
  12. 12 : class PlaybackRateMenuItem extends MenuItem {
  13. 13 : 
  14. 14 :   /**
  15. 15 :    * Creates an instance of this class.
  16. 16 :    *
  17. 17 :    * @param {Player} player
  18. 18 :    *        The `Player` that this class should be attached to.
  19. 19 :    *
  20. 20 :    * @param {Object} [options]
  21. 21 :    *        The key/value store of player options.
  22. 22 :    */
  23. 23 :   constructor(player, options) {
  24. 24 :     const label = options.rate;
  25. 25 :     const rate = parseFloat(label, 10);
  26. 26 : 
  27. 27 :     // Modify options for parent MenuItem class's init.
  28. 28 :     options.label = label;
  29. 29 :     options.selected = rate === player.playbackRate();
  30. 30 :     options.selectable = true;
  31. 31 :     options.multiSelectable = false;
  32. 32 : 
  33. 33 :     super(player, options);
  34. 34 : 
  35. 35 :     this.label = label;
  36. 36 :     this.rate = rate;
  37. 37 : 
  38. 38 :     this.on(player, 'ratechange', (e) => this.update(e));
  39. 39 :   }
  40. 40 : 
  41. 41 :   /**
  42. 42 :    * This gets called when an `PlaybackRateMenuItem` is "clicked". See
  43. 43 :    * {@link ClickableComponent} for more detailed information on what a click can be.
  44. 44 :    *
  45. 45 :    * @param {EventTarget~Event} [event]
  46. 46 :    *        The `keydown`, `tap`, or `click` event that caused this function to be
  47. 47 :    *        called.
  48. 48 :    *
  49. 49 :    * @listens tap
  50. 50 :    * @listens click
  51. 51 :    */
  52. 52 :   handleClick(event) {
  53. 53 :     super.handleClick();
  54. 54 :     this.player().playbackRate(this.rate);
  55. 55 :   }
  56. 56 : 
  57. 57 :   /**
  58. 58 :    * Update the PlaybackRateMenuItem when the playbackrate changes.
  59. 59 :    *
  60. 60 :    * @param {EventTarget~Event} [event]
  61. 61 :    *        The `ratechange` event that caused this function to run.
  62. 62 :    *
  63. 63 :    * @listens Player#ratechange
  64. 64 :    */
  65. 65 :   update(event) {
  66. 66 :     this.selected(this.player().playbackRate() === this.rate);
  67. 67 :   }
  68. 68 : 
  69. 69 : }
  70. 70 : 
  71. 71 : /**
  72. 72 :  * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization.
  73. 73 :  *
  74. 74 :  * @type {string}
  75. 75 :  * @private
  76. 76 :  */
  77. 77 : PlaybackRateMenuItem.prototype.contentElType = 'button';
  78. 78 : 
  79. 79 : Component.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
  80. 80 : export default PlaybackRateMenuItem;