web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-07-15 01:34:23 +02:00
Code Releases Activity

fix: always show the mute button by default in responsive mode (#5914)

Browse Source
This commit is contained in:
Pat O'Neill
2019-04-11 12:37:52 -04:00
committed by GitHub
parent b2eae7bdbf
commit c85bc00df2
1 changed files with 65 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/css/components/_adaptive.scss
View File

@ -1,44 +1,71 @@
// When the player is absurdly tiny, display nothing but: // When the player is "medium" and higher, display everything by default.
//
// When the player is "small", display only:
// - Play button // - Play button
// - Volume Mute button
// - Progress bar
// - Subs-Caps button
// - Fullscreen button
//
// When the player is "small", display only:
// - Play button
// - Volume Mute button
// - Progress bar
// - Fullscreen button
//
// When the player is "tiny", display only:
// - Play button
// - Volume Mute button
// - Fullscreen Button // - Fullscreen Button
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) { //
.vjs-custom-control-spacer { .video-js:not(.vjs-fullscreen) {
@include flex(auto);
display: block; &.vjs-layout-small,
&.vjs-layout-x-small,
&.vjs-layout-tiny {
.vjs-current-time,
.vjs-time-divider,
.vjs-duration,
.vjs-remaining-time,
.vjs-playback-rate,
.vjs-chapters-button,
.vjs-descriptions-button,
.vjs-captions-button,
.vjs-subtitles-button,
.vjs-audio-button,
.vjs-volume-control {
display: none;
}
// Reset the size of the volume panel to the default so we don't see a big
// empty space to the right of the mute button.
.vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-volume-panel.vjs-volume-panel-horizontal:active,
.vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
width: auto;
width: initial;
}
} }
&.vjs-no-flex .vjs-custom-control-spacer { width: auto; } &.vjs-layout-x-small,
&.vjs-layout-tiny {
.vjs-subs-caps-button {
display: none;
}
}
.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, &.vjs-layout-tiny {
.vjs-playback-rate, .vjs-progress-control, .vjs-custom-control-spacer {
.vjs-mute-control, .vjs-volume-control, .vjs-volume-panel, @include flex(auto);
.vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button, display: block;
.vjs-subtitles-button, .vjs-subs-caps-button, .vjs-audio-button { display: none; } }
}
&.vjs-no-flex .vjs-custom-control-spacer {
// When the player is x-small, display nothing but: width: auto;
// - Play button }
// - Progress bar
// - Fullscreen Button .vjs-progress-control {
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) { display: none;
.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, }
.vjs-playback-rate, }
.vjs-mute-control, .vjs-volume-control, .vjs-volume-panel,
.vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
.vjs-subtitles-button, .vjs-subs-caps-button, .vjs-audio-button { display: none; }
}
// When the player is small, display nothing but:
// - Play button
// - Progress bar
// - Volume menu button
// - Subs-Caps Button
// - Fullscreen button
.video-js.vjs-layout-small:not(.vjs-fullscreen) {
.vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
.vjs-playback-rate,
.vjs-mute-control, .vjs-volume-control, .vjs-volume-panel,
.vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
.vjs-subtitles-button, .vjs-audio-button { display: none; }
} }