web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-21 11:02:08 +02:00
Code Releases Activity

fix(accessibility): By default, show track selection buttons at all responsive breakpoints (#7603)

Browse Source
This commit is contained in:
Pat O'Neill 2022-02-23 12:17:27 -05:00 committed by GitHub
parent b5f775ecda
commit c44057d217
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,18 +4,23 @@
// - Play button
// - Volume Mute button
// - Progress bar
// - Subs-Caps button
// - Track buttons
// - Native PiP button
// - Fullscreen button
//
// When the player is "small", display only:
// When the player is "x-small", display only:
// - Play button
// - Volume Mute button
// - Progress bar
// - Spacer
// - Track buttons
// - Native PiP button
// - Fullscreen button
//
// When the player is "tiny", display only:
// - Play button
// - Volume Mute button
// - Track buttons
// - Native PiP button
// - Fullscreen Button
//
.video-js {
@ -28,11 +33,6 @@
.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;
}
@ -50,20 +50,18 @@
}
}
// Hide the subs-caps button for non-Live UI "x-small" and for "tiny" players.
&.vjs-layout-x-small:not(.vjs-liveui),
&.vjs-layout-x-small:not(.vjs-live),
// At x-small and tiny, the progress control is too narrow to be useful.
&.vjs-layout-x-small,
&.vjs-layout-tiny {
.vjs-subs-caps-button {
.vjs-progress-control {
display: none;
}
}
// With the new Live UI, we can have the same treatment as "tiny". At
// "x-small", the Live UI makes the progress control very small and almost
// useless.
&.vjs-layout-x-small.vjs-liveui,
&.vjs-layout-tiny {
// At x-small, the buttons alone leave a large gap on the right. Fill it with
// the spacer element.
&.vjs-layout-x-small {
.vjs-custom-control-spacer {
@include flex(auto);
@ -73,9 +71,5 @@
&.vjs-no-flex .vjs-custom-control-spacer {
width: auto;
}
.vjs-progress-control {
display: none;
}
}
}