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

refactor: Remove logic and style that accommodates non-flex fallbacks (#7820)

Browse Source
This commit is contained in:
Roman Pougatchev 2022-06-29 11:09:00 -04:00 committed by Pat O'Neill
parent a0fd14894c
commit e4945cb78c
10 changed files with 4 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/_utilities.scss
View File

@ -66,14 +66,6 @@
}
@mixin flex($value) {
// @include context('.video-js', '.video-js.vjs-no-flex') {
// display: table-cell;
// vertical-align: middle;
// @if ($value == 'auto') {
// width: auto;
// }
// }
-webkit-box-flex: $value;
-moz-box-flex: $value;
-webkit-flex: $value;

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

@ -67,9 +67,5 @@
@include flex(auto);
display: block;
}
&.vjs-no-flex .vjs-custom-control-spacer {
width: auto;
}
}
}

5
src/css/components/_control-bar.scss
View File

@ -49,8 +49,3 @@
visibility: visible;
pointer-events: auto;
}
// no flex support
.vjs-has-started.vjs-no-flex .vjs-control-bar {
display: table;
}

5
src/css/components/_control.scss
View File

@ -39,8 +39,3 @@
.video-js *:not(.vjs-visible-text) > .vjs-control-text {
@include hide-visually;
}
.vjs-no-flex .vjs-control {
display: table-cell;
vertical-align: middle;
}

12
src/css/components/_live.scss
View File

@ -6,12 +6,6 @@
line-height: 3em;
}
.vjs-no-flex .vjs-live-control {
display: table-cell;
width: auto;
text-align: left;
}
// hide the LiveDisplay when not live or when
// the new liveui is in use
.video-js:not(.vjs-live) .vjs-live-control,
@ -34,12 +28,6 @@
min-width: 4em;
}
.vjs-no-flex .vjs-seek-to-live-control {
display: table-cell;
width: auto;
text-align: left;
}
// hide the SeekToLive button when not live and
// when the liveui is not in use
.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,

12
src/css/components/_progress.scss
View File

@ -21,10 +21,6 @@
@include display-flex(center);
}
.vjs-no-flex .vjs-progress-control {
width: auto;
}
// .vjs-progress-holder / SeekBar
//
// Box containing play and load progress bars. It also acts as seek scrubber.
@ -154,10 +150,6 @@
z-index: 1;
}
.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
z-index: 0;
}
.video-js .vjs-progress-control:hover .vjs-mouse-display {
display: block;
}
@ -169,10 +161,6 @@
@include transition($trans);
}
.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
display: none;
}
.vjs-mouse-display .vjs-time-tooltip {
color: #fff;
@include background-color-with-alpha(#000, 0.8);

20
src/css/components/_time.scss
View File

@ -8,18 +8,10 @@
padding-right: 1em;
}
.vjs-live .vjs-time-control {
display: none;
}
// We need the extra specificity that referencing .vjs-no-flex provides.
.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider,
.video-js .vjs-current-time,
.vjs-no-flex .vjs-current-time {
display: none;
}
.video-js .vjs-duration,
.vjs-no-flex .vjs-duration {
.video-js .vjs-duration {
display: none;
}
@ -27,9 +19,3 @@
display: none;
line-height: 3em;
}
.vjs-live .vjs-time-divider {
// Already the default, but we want to ensure when the player is live
// this hides in the same way as the other time controls for other skins
display: none;
}

26
src/css/components/_volume.scss
View File

@ -88,24 +88,6 @@
@include transition($transition-property)
}
.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
width: 5em;
height: 3em;
visibility: visible;
opacity: 1;
position: relative;
@include transition(none);
}
.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
position: absolute;
bottom: 3em;
left: 0.5em;
}
.video-js .vjs-volume-panel {
@include display-flex;
}
@ -243,10 +225,6 @@
height: 100%;
}
.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
z-index: 0;
}
.video-js .vjs-volume-control:hover .vjs-mouse-display {
display: block;
}
@ -258,10 +236,6 @@
@include transition($trans);
}
.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
display: none;
}
.vjs-mouse-display .vjs-volume-tooltip {
color: #fff;
@include background-color-with-alpha(#000, 0.8);

16
src/css/components/menu/_menu-inline.scss
View File

@ -13,8 +13,7 @@
// Hover state
.video-js .vjs-menu-button-inline:hover,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline.vjs-slider-active,
.video-js.vjs-no-flex .vjs-menu-button-inline {
.video-js .vjs-menu-button-inline.vjs-slider-active {
// This width is currently specific to the inline volume bar.
width: 12em;
}
@ -41,19 +40,6 @@
opacity: 1;
}
.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
display: block;
opacity: 1;
position: relative;
width: auto;
}
.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
width: auto;
}
.vjs-menu-button-inline .vjs-menu-content {
width: auto;
height: 100%;

24
src/js/player.js
View File

@ -548,10 +548,6 @@ class Player extends Component {
this.addClass('vjs-audio');
}
if (this.flexNotSupported_()) {
this.addClass('vjs-no-flex');
}
// TODO: Make this smarter. Toggle user state between touching/mousing
// using events, since devices can have both touch and mouse events.
// TODO: Make this check be performed again when the window switches between monitors
@ -4968,26 +4964,6 @@ class Player extends Component {
return baseOptions;
}
/**
* Determine whether or not flexbox is supported
*
* @return {boolean}
* - true if flexbox is supported
* - false if flexbox is not supported
*/
flexNotSupported_() {
const elem = document.createElement('i');
// Note: We don't actually use flexBasis (or flexOrder), but it's one of the more
// common flex features that we can rely on when checking for flex support.
return !('flexBasis' in elem.style ||
'webkitFlexBasis' in elem.style ||
'mozFlexBasis' in elem.style ||
'msFlexBasis' in elem.style ||
// IE10-specific (2012 flex spec), available for completeness
'msFlexOrder' in elem.style);
}
/**
* Set debug mode to enable/disable logs at info level.
*