Skip to content

Commit 6b9569a

Browse files
authored
feat(UI): Add alwaysShowVolumeBar config (#8807)
1 parent 97ad3ea commit 6b9569a

File tree

4 files changed

+16
-4
lines changed

4 files changed

+16
-4
lines changed

ui/externs/ui.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,8 @@ shaka.extern.UIQualityMarks;
137137
* showAudioCodec: boolean,
138138
* showVideoCodec: boolean,
139139
* castSenderUrl: string,
140-
* enableKeyboardPlaybackControlsInWindow: boolean
140+
* enableKeyboardPlaybackControlsInWindow: boolean,
141+
* alwaysShowVolumeBar: boolean
141142
* }}
142143
*
143144
* @property {!Array<string>} controlPanelElements
@@ -374,6 +375,11 @@ shaka.extern.UIQualityMarks;
374375
* <code>enableKeyboardPlaybackControls</code> is true.
375376
* <br>
376377
* Defaults to <code>false</code>.
378+
* @property {boolean} alwaysShowVolumeBar
379+
* Always show the volume bar, even when the volume and mute bars are next to
380+
* each other.
381+
* <br>
382+
* Defaults to <code>false</code>.
377383
* @exportDoc
378384
*/
379385
shaka.extern.UIConfiguration;

ui/less/range_elements.less

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -164,19 +164,20 @@
164164
}
165165
}
166166

167-
.shaka-mute-button:hover + .shaka-volume-bar-container {
167+
.shaka-mute-button:hover + .shaka-volume-bar-container-allow-hiding {
168168
width: 50px;
169169
opacity: 1;
170170
}
171171
}
172172

173-
.shaka-mute-button + .shaka-volume-bar-container:not(:focus-within) {
173+
/* stylelint-disable-next-line max-line-length */
174+
.shaka-mute-button + .shaka-volume-bar-container-allow-hiding:not(:focus-within) {
174175
width: 0;
175176
opacity: 0;
176177
}
177178

178179
@media (min-width: 475px) {
179-
.shaka-mute-button:hover + .shaka-volume-bar-container {
180+
.shaka-mute-button:hover + .shaka-volume-bar-container-allow-hiding {
180181
width: 100px;
181182
opacity: 1;
182183
}

ui/ui.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ shaka.ui.Overlay = class {
379379
showVideoCodec: true,
380380
castSenderUrl: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js',
381381
enableKeyboardPlaybackControlsInWindow: false,
382+
alwaysShowVolumeBar: false,
382383
};
383384

384385
// On mobile, by default, hide the volume slide and the small play/pause

ui/volume_bar.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
3333
/** @private {!shaka.extern.UIConfiguration} */
3434
this.config_ = this.controls.getConfig();
3535

36+
if (!this.config_.alwaysShowVolumeBar) {
37+
this.container.classList.add('shaka-volume-bar-container-allow-hiding');
38+
}
39+
3640
// We use a range of 100 to avoid problems with Firefox.
3741
// See https://github.com/shaka-project/shaka-player/issues/3987
3842
this.setRange(0, 100);

0 commit comments

Comments
 (0)