web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-10 23:30:03 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 38 deletions
Show Stats 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
// - 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
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) {
.vjs-custom-control-spacer {
@include flex(auto);
display: block;
//
.video-js:not(.vjs-fullscreen) {
&.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-playback-rate, .vjs-progress-control,
.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 x-small, display nothing but:
// - Play button
// - Progress bar
// - Fullscreen Button
.video-js.vjs-layout-x-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-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; }
&.vjs-layout-tiny {
.vjs-custom-control-spacer {
@include flex(auto);
display: block;
}
&.vjs-no-flex .vjs-custom-control-spacer {
width: auto;
}
.vjs-progress-control {
display: none;
}
}
}