Update audio only mode controls

edwinbradford · Nov 11, 2024 · b900c23 · b900c23
1 parent c0c9754
commit b900c23
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 51 deletions.
diff --git a/src/css/components/_button.scss b/src/css/components/_button.scss
@@ -32,8 +32,6 @@
 
 // Control bar child buttons
 .vjs-control.vjs-button {
-  // Don't scale buttons down on tiny screens
   width: $control-button-width; 
-  min-width: $control-button-width;
   height: $control-button-height;
 }
diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss
@@ -9,6 +9,12 @@
   pointer-events: none; // Don't block nested buttons
 }
 
+.video-js.vjs-audio-only-mode .vjs-control-bar {
+  position: relative;
+  inset: 0;
+  padding: $controls-margin;
+}
+
 /* Flex wrap control bar children at the custom neueWrap component 
  */
 .video-js .vjs-neue-wrap {

diff --git a/src/css/components/_error.scss b/src/css/components/_error.scss
@@ -2,22 +2,3 @@
   width: 100%;
   // see _modal-dialog.scss;
 }
-
-// .vjs-error .vjs-error-display:before {
-//   color: #fff;
-//   content: 'X';
-//   font-family: $text-font-family;
-//   font-size: 4em;
-//   left: 0;
-
-//   // In order to center the play icon vertically we need to set the line height
-//   // to the same as the button height
-//   line-height: 1;
-//   margin-top: -0.5em;
-//   position: absolute;
-//   text-shadow: 0.05em 0.05em 0.1em #000;
-//   text-align: center;
-//   top: 50%;
-//   vertical-align: middle;
-//   width: 100%;
-// }
diff --git a/src/css/components/_modal-dialog.scss b/src/css/components/_modal-dialog.scss
@@ -1,19 +1,14 @@
 .vjs-modal-dialog-content {
-  z-index: 1;
   font-size: $modal-text-size;
   line-height: $modal-text-line-height;
 }
 
 .video-js .vjs-modal-dialog {
-  @include display-flex(flex-start, flex-start);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: $modal-padding;
-  overflow: auto;
+  @extend %fill-parent;
+  // @include display-flex(flex-start, flex-start);
   background-color: $primary-background-color;
+  // This allows scrolling of content if need be.
+  overflow: auto;
 }
 
 // Reset box-sizing inside the modal dialog
@@ -23,5 +18,7 @@
 // }
 
 .vjs-modal-dialog .vjs-modal-dialog-content {
-  // see .vjs-modal-dialog-content;
+  @extend %fill-parent;
+  padding: $modal-padding;
+  z-index: 1;
 }
diff --git a/src/css/components/_play-pause.scss b/src/css/components/_play-pause.scss
@@ -9,31 +9,14 @@
   backdrop-filter: blur(16px);
 }
 
-// Collapse control bar to child height for Github ci tests
-.video-js.vjs-audio-only-mode .vjs-play-control {
-  position: relative;
-  margin: 0;
-  width: $control-button-height; // This button is square (?)
-  min-width: unset;
-  height: $control-button-height;
-  border-radius: 0;
-  backdrop-filter: unset;
-}  
-
-// Hide play control when paused
-.video-js.vjs-paused .vjs-play-control {
-  display: none;
-}
-
 // Show play control when playback starts
-.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
-.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
+.video-js .vjs-play-control .vjs-icon-placeholder {
   display: block;
   position: relative; // Required for positioning of pseudo content
   width: 100%;
   height: 100%;
   background-size: contain;
-  @extend .icon-pause;
+  @extend .icon-big-play;
   &:before {
     display: block;
     position: absolute;
@@ -43,7 +26,7 @@
     height: inherit;
     content: "";
     opacity: 0;
-    @extend .icon-pause-highlight;
+    @extend .icon-big-play-highlight;
     @include transition(opacity $icon-unhighlight-time);
   }
   &:hover {
@@ -52,4 +35,13 @@
       @include transition(opacity $icon-highlight-time);
     }
   }
+}
+
+// Show play control when playback starts
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
+  @extend .icon-pause;
+  &:before {
+    @extend .icon-pause-highlight;
+  }
 }