Merge pull request #715 from samvera-labs/align-controls

Use control-bar width to add padding to progress-bar on sides
samvera-labs · Nov 5, 2024 · 0cb1d18 · 0cb1d18
2 parents aaf5153 + 8813ba5
commit 0cb1d18
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
@@ -123,6 +123,8 @@ function VideoJSPlayer({
     player.on('ready', function () {
       console.log('Player ready');
 
+      setControlBar(player);
+
       // Add this class in mobile/tablet devices to always show the control bar,
       // since the inactivityTimeout is flaky in some browsers
       if (IS_MOBILE || IS_IPAD) {
@@ -157,6 +159,9 @@ function VideoJSPlayer({
     player.on('timeupdate', () => {
       handleTimeUpdate();
     });
+    player.on('resize', () => {
+      setControlBar(player);
+    });
     player.on('ended', () => {
       /**
        * Checking against isReadyRef.current stops from delayed events being executed
@@ -222,6 +227,17 @@ function VideoJSPlayer({
     playerLoadedMetadata(player);
   };
 
+  /**
+   * Set control bar width to offset 12px from left/right edges of player.
+   * This is set on player.ready and player.resize events.
+   * @param {Object} player 
+   */
+  const setControlBar = (player) => {
+    const playerWidth = player.currentWidth();
+    const controlBarWidth = playerWidth - 24;
+    player.controlBar.width(`${controlBarWidth}px`);
+  };
+
   /**
    * Update player properties and data when player is reloaded with
    * source change, i.e. Canvas change
@@ -352,6 +368,9 @@ function VideoJSPlayer({
     player.one('loadedmetadata', () => {
       console.log('Player loadedmetadata');
 
+      // Update control-bar width on player reload
+      setControlBar(player);
+
       player.duration(canvasDuration);
 
       /**

diff --git a/src/components/MediaPlayer/VideoJS/videojs-theme.scss b/src/components/MediaPlayer/VideoJS/videojs-theme.scss
@@ -32,15 +32,39 @@
   height: 5em;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
   display: flex;
-  padding: 2em 1em 0 1em;
+  padding-top: 2em;
+  left: 1em;
+
+  // Set faded effect background before and after control bar
+  &::before {
+    content: '';
+    width: 1em;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
+      linear-gradient(to left, transparent, rgba(0, 0, 0, 0));
+    position: absolute;
+    left: 0.215em;
+    top: 0em;
+    transform: translateX(-120%);
+  }
+  &::after {
+    content: '';
+    width: 1em;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
+      linear-gradient(to left, transparent, rgba(0, 0, 0, 0));
+    position: absolute;
+    right: -2.215em;
+    top: 0em;
+    transform: translateX(-121%);
+  }
 }
 
 .vjs-theme-ramp .vjs-custom-progress-bar {
   position: absolute;
-  width: 98.75% !important;
+  width: 100% !important;
   top: 1.25em;
   margin: 0;
-  left: 1em;
 }
 
 .vjs-theme-ramp .vjs-progress-control .vjs-progress-holder {

diff --git a/src/services/ramp-hooks.js b/src/services/ramp-hooks.js
@@ -486,6 +486,11 @@ export const useVideoJSPlayer = ({
           break;
       }
     });
+
+    // Listen for resize events and trigger player.resize event
+    window.addEventListener('resize', () => {
+      player.trigger('resize');
+    });
   };
 
   /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -486,6 +486,11 @@ export const useVideoJSPlayer = ({ @@
               break;
           }
         });
+        // Listen for resize events and trigger player.resize event
+        window.addEventListener('resize', () => {
+          player.trigger('resize');
+        });
       };
       /**
@@ Expand Down @@