Change audio player progress-bar and controls in embeds (#6102)

* Change audio player progress-bar and controls in embeds * Align horizontal volume control thumb
avalonmediasystem · Nov 5, 2024 · 45391e4 · 45391e4
1 parent b208d4e
commit 45391e4
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/app/javascript/components/embeds/EmbeddedRamp.jsx b/app/javascript/components/embeds/EmbeddedRamp.jsx
@@ -110,12 +110,14 @@ const Ramp = ({
   };
 
   return (
-  	<IIIFPlayer manifestUrl={manifestUrl}
-      customErrorMessage='This embed encountered an error. Please refresh or contact an administrator.'
-      startCanvasId={startCanvasId}
-      startCanvasTime={startCanvasTime}>
-      <MediaPlayer enableFileDownload={false} enablePlaybackRate={is_video} enableTitleLink={is_video} />
-    </IIIFPlayer>
+    <div className='embedded-ramp'>
+      <IIIFPlayer manifestUrl={manifestUrl}
+        customErrorMessage='This embed encountered an error. Please refresh or contact an administrator.'
+        startCanvasId={startCanvasId}
+        startCanvasTime={startCanvasTime}>
+        <MediaPlayer enableFileDownload={false} enablePlaybackRate={is_video} enableTitleLink={is_video} />
+      </IIIFPlayer>
+    </div>
   );
 };
 

diff --git a/app/javascript/components/embeds/Ramp.scss b/app/javascript/components/embeds/Ramp.scss
@@ -18,18 +18,44 @@
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.ramp--media_player {
+// Scope CSS to only embedded player
+.embedded-ramp .ramp--media_player {
   .video-js .vjs-big-play-button {
     left: 55% !important;
   }
+
   .video-js.vjs-audio-only-mode {
+    // Player height to the height of iframe container in embeds
+    max-height: 40px !important;
+
     // Disable tooltips for volume and progress in embedded
     // audio. Viewport is too small to display them.
     .vjs-volume-panel:hover .vjs-mouse-display,
-    .vjs-custom-progress-bar .tooltiptext {
+    .vjs-custom-progress-bar .vjs-time-tooltip {
       display: none !important;
     }
+
+    // Display progress-bar inline with player controls
+    .vjs-custom-progress-bar {
+      position: relative;
+      top: 0.475em;
+      margin: 0 0.15em;
+    }
+
+    .vjs-volume-horizontal .vjs-volume-level span.vjs-icon-placeholder {
+      margin-top: 0.15em;
+    }
+
+    // Set control-bar to player's width and remove spacers & offset
+    .vjs-control-bar {
+      &::after, &::before {
+        content: none;
+      }
+      width: 100% !important;
+      left: 0;
+    }
   }
+
   @media (max-width: 585px) {
     .video-js .vjs-big-play-button {
       scale: 1.5;