Fix minor bugs in player introduced in refactor/cleanup work (#662)

* Fix minor bugs in player introduced in refactor/cleanup work * Fix mute button CSS for mobile devices and code cleanup * Retain player aspect ratio as video for inaccessible message display * Attach event handlers on player creation
samvera-labs · Oct 14, 2024 · 5d15ca7 · 5d15ca7
1 parent eff5369
commit 5d15ca7
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 114 deletions.
diff --git a/src/components/MediaPlayer/MediaPlayer.js b/src/components/MediaPlayer/MediaPlayer.js
@@ -38,7 +38,7 @@ const MediaPlayer = ({
 
   const { srcIndex, hasStructure, playlist } = manifestState;
   const { isPlaylist } = playlist;
-  const { playerFocusElement, currentTime } = playerState;
+  const { currentTime } = playerState;
 
   const trackScrubberRef = useRef();
   const timeToolRef = useRef();
@@ -54,7 +54,7 @@ const MediaPlayer = ({
     renderingFiles,
     nextItemClicked,
     switchPlayer
-  } = useSetupPlayer({ enableFileDownload, withCredentials, lastCanvasIndex });
+  } = useSetupPlayer({ enableFileDownload, lastCanvasIndex, withCredentials });
 
   const { error, poster, sources, targets, tracks } = playerConfig;
 
@@ -146,15 +146,14 @@ const MediaPlayer = ({
             'videoJSCurrentTime',
             'timeDivider',
             'durationDisplay',
-            // These icons are in reverse order to support `float: inline-end` in CSS
-            'fullscreenToggle',
-            enableFileDownload ? 'videoJSFileDownload' : '',
-            enablePIP ? 'pictureInPictureToggle' : '',
-            enablePlaybackRate ? 'playbackRateMenuButton' : '',
-            'qualitySelector',
-            (hasStructure || isPlaylist) ? 'videoJSTrackScrubber' : '',
+            IS_MOBILE ? 'muteToggle' : 'volumePanel',
             (tracks.length > 0 && isVideo) ? 'subsCapsButton' : '',
-            IS_MOBILE ? 'muteToggle' : 'volumePanel'
+            (hasStructure || isPlaylist) ? 'videoJSTrackScrubber' : '',
+            'qualitySelector',
+            enablePlaybackRate ? 'playbackRateMenuButton' : '',
+            enablePIP ? 'pictureInPictureToggle' : '',
+            enableFileDownload ? 'videoJSFileDownload' : '',
+            'fullscreenToggle',
             // 'vjsYo',             custom component
           ],
           videoJSProgress: {

diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
@@ -254,14 +254,14 @@ function VideoJSPlayer({
        - track scrubber button
        - appearance of the player: big play button and aspect ratio of the player 
         based on media type
-       - volume panel based on media type
        - file download menu
     */
     if (player.getChild('controlBar') != null && !canvasIsEmpty) {
       const controlBar = player.getChild('controlBar');
-      // Index of the full-screen toggle in the player's control bar
-      const fullscreenIndex = controlBar.children()
-        .findIndex((c) => c.name_ == 'FullscreenToggle');
+      // Index of the volumepanel/mutetoggle in the player's control bar
+      const volumeIndex = IS_MOBILE
+        ? controlBar.children().findIndex((c) => c.name_ == 'MuteToggle')
+        : controlBar.children().findIndex((c) => c.name_ == 'VolumePanel');
       /*
         Track-scrubber button: remove if the Manifest is not a playlist manifest
         or the current Canvas doesn't have structure items. Or add back in if it's
@@ -273,16 +273,14 @@ function VideoJSPlayer({
         // Add track-scrubber button after duration display if it is not available
         controlBar.addChild(
           'videoJSTrackScrubber',
-          { trackScrubberRef, timeToolRef: scrubberTooltipRef }
+          { trackScrubberRef, timeToolRef: scrubberTooltipRef },
+          volumeIndex + 1
         );
       }
 
       if (tracks?.length > 0 && isVideo && !controlBar.getChild('subsCapsButton')) {
-        const captionIndex = IS_MOBILE
-          ? controlBar.children().findIndex((c) => c.name_ == 'MuteToggle')
-          : controlBar.children().findIndex((c) => c.name_ == 'VolumePanel');
         let subsCapBtn = controlBar.addChild(
-          'subsCapsButton', {}, captionIndex + 1
+          'subsCapsButton', {}, volumeIndex + 1
         );
         // Add CSS to mark captions-on
         subsCapBtn.children_[0].addClass('captions-on');
@@ -305,26 +303,6 @@ function VideoJSPlayer({
         player.addChild('bigPlayButton');
       }
 
-      /*
-        Re-add volumePanel/muteToggle icon: ensures the correct order of controls
-        on player reload.
-        On mobile device browsers, the volume panel is replaced by muteToggle
-        for both audio and video.
-      */
-      if (!IS_MOBILE) {
-        controlBar.removeChild('VolumePanel');
-        controlBar.addChild('VolumePanel');
-        /* 
-          Trigger ready event to reset the volume slider in the refreshed 
-          volume panel. This is needed on player reload, since volume slider 
-          is set on either 'ready' or 'volumechange' events.
-        */
-        player.trigger('volumechange');
-      } else {
-        controlBar.removeChild('MuteToggle');
-        controlBar.addChild('MuteToggle');
-      }
-
       if (enableFileDownload) {
         const fileDownloadIndex = controlBar.children()
           .findIndex((c) => c.name_ == 'VideoJSFileDownload') || fullscreenIndex + 1;

diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSNextButton.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSNextButton.js
@@ -45,22 +45,19 @@ class VideoJSNextButton extends Button {
   }
 
   handleClick() {
-    this.handleNextClick(false);
+    this.handleNextClick();
   }
 
   handleKeyDown(e) {
     if (e.which === 32 || e.which === 13) {
       e.stopPropagation();
-      this.handleNextClick(true);
+      this.handleNextClick();
     }
   }
 
-  handleNextClick(isKeyDown) {
+  handleNextClick() {
     if (this.cIndex != this.options.lastCanvasIndex) {
-      this.options.switchPlayer(
-        this.cIndex + 1,
-        true,
-        isKeyDown ? 'nextBtn' : '');
+      this.options.switchPlayer(this.cIndex + 1, true);
     }
   }
 }

diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSPreviousButton.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSPreviousButton.js
@@ -44,22 +44,19 @@ class VideoJSPreviousButton extends Button {
   }
 
   handleClick() {
-    this.handlePreviousClick(false);
+    this.handlePreviousClick();
   }
 
   handleKeyDown(e) {
     if (e.which === 32 || e.which === 13) {
       e.stopPropagation();
-      this.handlePreviousClick(true);
+      this.handlePreviousClick();
     }
   }
 
-  handlePreviousClick(isKeyDown) {
+  handlePreviousClick() {
     if (this.cIndex > -1 && this.cIndex != 0) {
-      this.options.switchPlayer(
-        this.cIndex - 1,
-        true,
-        isKeyDown ? 'previousBtn' : '');
+      this.options.switchPlayer(this.cIndex - 1, true);
     } else if (this.cIndex == 0) {
       this.player.currentTime(0);
     }

diff --git a/src/components/MediaPlayer/VideoJS/videojs-theme.scss b/src/components/MediaPlayer/VideoJS/videojs-theme.scss
@@ -19,7 +19,7 @@
   padding-top: 1em;
   background: none;
   background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
-  display: inline-block;
+  display: flex;
 }
 
 .vjs-theme-ramp .vjs-custom-progress-bar {
@@ -41,7 +41,6 @@
 /* Time controls */
 .vjs-theme-ramp .vjs-control-bar .vjs-time-control {
   line-height: 4em;
-  float: inline-start;
 }
 
 /* Remove padding around time-divider (/) */
@@ -60,15 +59,17 @@
 
 /* Rest of the controls */
 .vjs-theme-ramp .vjs-mute-control,
-.vjs-theme-ramp .vjs-volume-panel,
+.vjs-theme-ramp .vjs-volume-panel {
+  margin-left: auto;
+}
 .vjs-theme-ramp .vjs-picture-in-picture-control,
 .vjs-theme-ramp .vjs-fullscreen-control,
 .vjs-theme-ramp .vjs-track-scrubber,
 .vjs-theme-ramp .vjs-playback-rate.vjs-control,
 .vjs-theme-ramp .vjs-quality-selector,
 .vjs-theme-ramp .vjs-file-download,
 .vjs-theme-ramp .vjs-subs-caps-button {
-  float: inline-end;
+  margin-left: 0;
 }
 
 /* Reduce height of full-screen toggle for easy scrubbing on progress */
@@ -78,10 +79,14 @@
   height: 70%;
 }
 
-/* Mute control on mobile devices */
+/* Mute control */
+.vjs-theme-ramp .vjs-mute-control {
+  display: none; // Hide mute control by default
+}
+
 .vjs-theme-ramp.vjs-touch-enabled .vjs-mute-control {
-  display: block !important;
-  float: inline-end;
+  margin-left: auto;
+  display: block !important; // Show mute control only on mobile devices
 }
 
 /* Popup-menu button controls */
@@ -93,22 +98,17 @@
   margin-bottom: 0.75em;
 }
 
-/* Volume stuff */
-.vjs-theme-ramp .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
-  height: 100%;
-}
-
-.vjs-theme-ramp .vjs-mute-control {
-  display: none;
-}
-
 .vjs-theme-ramp div.vjs-menu-button {
   height: 60%;
   margin-top: 0.5em;
 }
 
+/* Volume stuff */
+.vjs-theme-ramp .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
+  height: 100%;
+}
+
 .vjs-theme-ramp .vjs-volume-panel {
-  margin-left: 0.5em;
   margin-right: 0.5em;
 }
 

diff --git a/src/context/player-context.js b/src/context/player-context.js
@@ -16,7 +16,6 @@ const defaultState = {
   isEnded: false,
   currentTime: null,
   searchMarkers: [],
-  playerFocusElement: ''
 };
 
 function PlayerReducer(state = defaultState, action) {
@@ -56,12 +55,6 @@ function PlayerReducer(state = defaultState, action) {
     case 'setCurrentTime': {
       return { ...state, currentTime: action.currentTime };
     }
-    case 'setPlayerFocusElement': {
-      return {
-        ...state,
-        playerFocusElement: action.element ? action.element : '',
-      };
-    }
     default: {
       throw new Error(`Unhandled action type: ${action.type}`);
     }