From 591eae972c1ab85c2abff3f6c680ebbd01372ea9 Mon Sep 17 00:00:00 2001
From: dwithana <dwithana@iu.edu>
Date: Tue, 5 Nov 2024 15:34:09 -0500
Subject: [PATCH 1/2] Change audio player progress-bar and controls in embeds

---
 .../components/embeds/EmbeddedRamp.jsx        | 14 +++++-----
 app/javascript/components/embeds/Ramp.scss    | 26 +++++++++++++++++--
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/javascript/components/embeds/EmbeddedRamp.jsx b/app/javascript/components/embeds/EmbeddedRamp.jsx
index 867bc07a96..102bad16a9 100644
--- 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
index 4a54fa8771..b035cfd8ec 100644
--- a/app/javascript/components/embeds/Ramp.scss
+++ b/app/javascript/components/embeds/Ramp.scss
@@ -18,18 +18,40 @@
   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;
+    }
+
+    // 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;

From 60ed4dc55ffc70a2f507f1ae19b276d2b7a1830f Mon Sep 17 00:00:00 2001
From: dwithana <dwithana@iu.edu>
Date: Tue, 5 Nov 2024 15:51:01 -0500
Subject: [PATCH 2/2] Align horizontal volume control thumb

---
 app/javascript/components/embeds/Ramp.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/javascript/components/embeds/Ramp.scss b/app/javascript/components/embeds/Ramp.scss
index b035cfd8ec..4f3c100eb8 100644
--- a/app/javascript/components/embeds/Ramp.scss
+++ b/app/javascript/components/embeds/Ramp.scss
@@ -42,6 +42,10 @@
       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 {