refactor: Remove logic and style that accommodates non-flex fallbacks (…

…#7820)
videojs · Nov 23, 2022 · e4945cb · e4945cb
1 parent a0fd148
commit e4945cb
Show file tree

Hide file tree

Showing 10 changed files with 4 additions and 128 deletions.
diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
@@ -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;

diff --git a/src/css/components/_adaptive.scss b/src/css/components/_adaptive.scss
@@ -67,9 +67,5 @@
       @include flex(auto);
       display: block;
     }
-
-    &.vjs-no-flex .vjs-custom-control-spacer {
-      width: auto;
-    }
   }
 }
diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss
@@ -49,8 +49,3 @@
   visibility: visible;
   pointer-events: auto;
 }
-
-// no flex support
-.vjs-has-started.vjs-no-flex .vjs-control-bar {
-  display: table;
-}
diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss
@@ -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;
-}
diff --git a/src/css/components/_live.scss b/src/css/components/_live.scss
@@ -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,

diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
@@ -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);

diff --git a/src/css/components/_time.scss b/src/css/components/_time.scss
@@ -8,28 +8,14 @@
   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;
 }
 
 .vjs-time-divider {
   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;
-}
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
@@ -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);

diff --git a/src/css/components/menu/_menu-inline.scss b/src/css/components/menu/_menu-inline.scss
@@ -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%;

diff --git a/src/js/player.js b/src/js/player.js
@@ -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.
    *