1 : /**
2 :  * @file playback-rate-menu-button.js
3 :  */
4 : import MenuButton from '../../menu/menu-button.js';
5 : import PlaybackRateMenuItem from './playback-rate-menu-item.js';
6 : import Component from '../../component.js';
7 : import * as Dom from '../../utils/dom.js';
8 : 
9 : /**
10 :  * @typedef { import('../../player').default } Player
11 :  */
12 : 
13 : /**
14 :  * The component for controlling the playback rate.
15 :  *
16 :  * @extends MenuButton
17 :  */
18 : class PlaybackRateMenuButton extends MenuButton {
19 : 
20 :   /**
21 :    * Creates an instance of this class.
22 :    *
23 :    * @param {Player} player
24 :    *        The `Player` that this class should be attached to.
25 :    *
26 :    * @param {Object} [options]
27 :    *        The key/value store of player options.
28 :    */
29 :   constructor(player, options) {
30 :     super(player, options);
31 : 
32 :     this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
33 : 
34 :     this.updateVisibility();
35 :     this.updateLabel();
36 : 
37 :     this.on(player, 'loadstart', (e) => this.updateVisibility(e));
38 :     this.on(player, 'ratechange', (e) => this.updateLabel(e));
39 :     this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
40 :   }
41 : 
42 :   /**
43 :    * Create the `Component`'s DOM element
44 :    *
45 :    * @return {Element}
46 :    *         The element that was created.
47 :    */
48 :   createEl() {
49 :     const el = super.createEl();
50 : 
51 :     this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
52 : 
53 :     this.labelEl_ = Dom.createEl('div', {
54 :       className: 'vjs-playback-rate-value',
55 :       id: this.labelElId_,
56 :       textContent: '1x'
57 :     });
58 : 
59 :     el.appendChild(this.labelEl_);
60 : 
61 :     return el;
62 :   }
63 : 
64 :   dispose() {
65 :     this.labelEl_ = null;
66 : 
67 :     super.dispose();
68 :   }
69 : 
70 :   /**
71 :    * Builds the default DOM `className`.
72 :    *
73 :    * @return {string}
74 :    *         The DOM `className` for this object.
75 :    */
76 :   buildCSSClass() {
77 :     return `vjs-playback-rate ${super.buildCSSClass()}`;
78 :   }
79 : 
80 :   buildWrapperCSSClass() {
81 :     return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
82 :   }
83 : 
84 :   /**
85 :    * Create the list of menu items. Specific to each subclass.
86 :    *
87 :    */
88 :   createItems() {
89 :     const rates = this.playbackRates();
90 :     const items = [];
91 : 
92 :     for (let i = rates.length - 1; i >= 0; i--) {
93 :       items.push(new PlaybackRateMenuItem(this.player(), {rate: rates[i] + 'x'}));
94 :     }
95 : 
96 :     return items;
97 :   }
98 : 
99 :   /**
100 :    * On playbackrateschange, update the menu to account for the new items.
101 :    *
102 :    * @listens Player#playbackrateschange
103 :    */
104 :   handlePlaybackRateschange(event) {
105 :     this.update();
106 :   }
107 : 
108 :   /**
109 :    * Get possible playback rates
110 :    *
111 :    * @return {Array}
112 :    *         All possible playback rates
113 :    */
114 :   playbackRates() {
115 :     const player = this.player();
116 : 
117 :     return (player.playbackRates && player.playbackRates()) || [];
118 :   }
119 : 
120 :   /**
121 :    * Get whether playback rates is supported by the tech
122 :    * and an array of playback rates exists
123 :    *
124 :    * @return {boolean}
125 :    *         Whether changing playback rate is supported
126 :    */
127 :   playbackRateSupported() {
128 :     return this.player().tech_ &&
129 :       this.player().tech_.featuresPlaybackRate &&
130 :       this.playbackRates() &&
131 :       this.playbackRates().length > 0
132 :     ;
133 :   }
134 : 
135 :   /**
136 :    * Hide playback rate controls when they're no playback rate options to select
137 :    *
138 :    * @param {Event} [event]
139 :    *        The event that caused this function to run.
140 :    *
141 :    * @listens Player#loadstart
142 :    */
143 :   updateVisibility(event) {
144 :     if (this.playbackRateSupported()) {
145 :       this.removeClass('vjs-hidden');
146 :     } else {
147 :       this.addClass('vjs-hidden');
148 :     }
149 :   }
150 : 
151 :   /**
152 :    * Update button label when rate changed
153 :    *
154 :    * @param {Event} [event]
155 :    *        The event that caused this function to run.
156 :    *
157 :    * @listens Player#ratechange
158 :    */
159 :   updateLabel(event) {
160 :     if (this.playbackRateSupported()) {
161 :       this.labelEl_.textContent = this.player().playbackRate() + 'x';
162 :     }
163 :   }
164 : 
165 : }
166 : 
167 : /**
168 :  * The text that should display over the `PlaybackRateMenuButton`s controls.
169 :  *
170 :  * Added for localization.
171 :  *
172 :  * @type {string}
173 :  * @protected
174 :  */
175 : PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
176 : 
177 : Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
178 : export default PlaybackRateMenuButton;