Zoom icons 596 (#619)

* [WIP] Fix icon resize with browser zoom * Cleanup, set min-width for player, fix setup on player reload * Fix CSS and JS code for mobile devices, change volume panel, CSS cleanup * From code review: remove unused classnames in perivous/next buttons * Change min-height for audio player * Change min-width to fit new volume panel * From code review: change min-height of audio player
samvera-labs · Sep 4, 2024 · bc10eca · bc10eca
1 parent 453a42c
commit bc10eca
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 86 deletions.
diff --git a/demo/app.scss b/demo/app.scss
@@ -1,5 +1,5 @@
 html {
-  font-size: 16px;
+  font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -25,14 +25,14 @@ html {
   }
 
   .ramp-demo__manifest-input-label {
-    padding: 12px 12px 12px 0;
+    padding: 0.75em 0.75em 0.75em 0;
     display: inline-block;
   }
 
   .ramp-demo__manifest-submit {
     background-color: #2a5459;
     color: white;
-    padding: 12px 20px;
+    padding: 0.75em 1.25em;
     border: none;
     border-radius: 0 4px 4px 0;
     cursor: pointer;

diff --git a/src/components/AutoAdvanceToggle/AutoAdvanceToggle.scss b/src/components/AutoAdvanceToggle/AutoAdvanceToggle.scss
@@ -23,7 +23,7 @@
     position: relative;
     width: 60px;
     height: 34px;
-    margin-left: 1rem;
+    margin-left: 1em;
 
     input {
       opacity: 0;

diff --git a/src/components/MediaPlayer/MediaPlayer.js b/src/components/MediaPlayer/MediaPlayer.js
@@ -299,14 +299,15 @@ 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 || playlist.isPlaylist) ? 'videoJSTrackScrubber' : '',
             (playerConfig.tracks.length > 0 && isVideo) ? 'subsCapsButton' : '',
-            IS_MOBILE ? 'muteToggle' : 'volumePanel',
-            'qualitySelector',
-            enablePlaybackRate ? 'playbackRateMenuButton' : '',
-            enablePIP ? 'pictureInPictureToggle' : '',
-            enableFileDownload ? 'videoJSFileDownload' : '',
-            'fullscreenToggle'
+            IS_MOBILE ? 'muteToggle' : 'volumePanel'
             // 'vjsYo',             custom component
           ],
           videoJSProgress: {
@@ -351,11 +352,6 @@ const MediaPlayer = ({
         videoJSTitleLink: enableTitleLink
       } : { sources: [] }; // Empty configurations for empty canvases
 
-      // Make the volume slider horizontal for audio in non-mobile browsers
-      if (!IS_MOBILE && !canvasIsEmpty) {
-        videoJsOptions.controlBar.volumePanel = { inline: isVideo ? false : true };
-      }
-
       // Add file download to toolbar when it is enabled via props
       if (enableFileDownload && !canvasIsEmpty) {
         videoJsOptions.controlBar.videoJSFileDownload = {

diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
@@ -21,6 +21,7 @@ import { IS_ANDROID, IS_IOS, IS_IPAD, IS_MOBILE, IS_SAFARI } from '@Services/bro
 import { useLocalStorage } from '@Services/local-storage';
 import { SectionButtonIcon } from '@Services/svg-icons';
 import './VideoJSPlayer.scss';
+import './videojs-theme.scss';
 
 /** VideoJS custom components */
 import VideoJSProgress from './components/js/VideoJSProgress';
@@ -376,6 +377,9 @@ function VideoJSPlayer({
       const durationIndex = controlBar.children()
         .findIndex((c) => c.name_ == 'DurationDisplay') ||
         (hasMultipleCanvases ? 6 : 4);
+
+      const fullscreenIndex = controlBar.children()
+        .findIndex((c) => c.name_ == 'FullscreenToggle');
       /*
         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
@@ -387,14 +391,16 @@ function VideoJSPlayer({
         // Add track-scrubber button after duration display if it is not available
         controlBar.addChild(
           'videoJSTrackScrubber',
-          { trackScrubberRef, timeToolRef: scrubberTooltipRef },
-          durationIndex + 1
+          { trackScrubberRef, timeToolRef: scrubberTooltipRef }
         );
       }
 
       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', {}, durationIndex + 1
+          'subsCapsButton', {}, captionIndex + 1
         );
         // Add CSS to mark captions-on
         subsCapBtn.children_[0].addClass('captions-on');
@@ -418,30 +424,28 @@ function VideoJSPlayer({
       }
 
       /*
-        Volume panel display on desktop browsers:
-        For audio: volume panel is inline with a sticky volume slider
-        For video: volume panel is not inline.
+        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) {
-        const volumeIndex = controlBar.children()
-          .findIndex((c) => c.name_ == 'VolumePanel');
-        controlBar.removeChild('volumePanel');
-        if (!isVideo) {
-          controlBar.addChild('volumePanel', { inline: true }, volumeIndex);
-        } else {
-          controlBar.addChild('volumePanel', { inline: false }, volumeIndex);
-        }
+        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;
         controlBar.removeChild('videoJSFileDownload');
 
         if (renderingFiles?.length > 0) {
@@ -450,13 +454,9 @@ function VideoJSPlayer({
             controlText: 'Alternate resource download',
             files: renderingFiles
           };
-          // For video add icon before last icon, for audio add it to the end
-          isVideo
-            ? controlBar.addChild('videoJSFileDownload', { ...fileOptions },
-              controlBar.children().length - 1
-            )
-            : controlBar.addChild('videoJSFileDownload', { ...fileOptions }
-            );
+          controlBar.addChild('videoJSFileDownload', { ...fileOptions },
+            fileDownloadIndex
+          );
         }
       }
     }
@@ -1072,7 +1072,7 @@ function VideoJSPlayer({
           data-testid={`videojs-${isVideo ? 'video' : 'audio'}-element`}
           data-canvasindex={cIndexRef.current}
           ref={videoJSRef}
-          className={`video-js vjs-big-play-centered vjs-disabled ${IS_ANDROID ? 'is-mobile' : ''}`}
+          className={`video-js vjs-big-play-centered vjs-theme-ramp vjs-disabled ${IS_ANDROID ? 'is-mobile' : ''}`}
           onTouchStart={saveTouchStartCoords}
           onTouchEnd={mobilePlayToggle}
           style={{ display: `${canvasIsEmptyRef.current ? 'none' : ''}` }}

diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSFileDownload.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSFileDownload.js
@@ -9,7 +9,7 @@ class VideoJSFileDownload extends MenuButton {
   constructor(player, options) {
     super(player, options);
     // Add SVG icon through CSS class
-    this.addClass("vjs-file-download-icon");
+    this.addClass("vjs-file-download");
     this.setAttribute('data-testid', 'videojs-file-download');
     // Use Video.js' stock SVG instead of setting it using CSS
     this.setIcon('file-download');

diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSNextButton.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSNextButton.js
@@ -18,6 +18,7 @@ class VideoJSNextButton extends vjsComponent {
   constructor(player, options) {
     super(player, options);
     this.setAttribute('data-testid', 'videojs-next-button');
+    this.addClass('vjs-play-control vjs-control');
 
     this.mount = this.mount.bind(this);
     this.options = options;
@@ -92,7 +93,8 @@ function NextButton({
   };
 
   return (
-    <div className="vjs-button vjs-control">
+    <React.Fragment>
+      <span className="vjs-control-text" aria-live="polite">Next</span>
       <button className="vjs-button vjs-next-button"
         role="button"
         ref={nextRef}
@@ -102,7 +104,7 @@ function NextButton({
         onKeyDown={handleNextKeyDown}>
         <SectionButtonIcon />
       </button>
-    </div >
+    </React.Fragment >
   );
 }
 

diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSPreviousButton.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSPreviousButton.js
@@ -17,6 +17,7 @@ class VideoJSPreviousButton extends vjsComponent {
   constructor(player, options) {
     super(player, options);
     this.setAttribute('data-testid', 'videojs-previous-button');
+    this.addClass('vjs-play-control vjs-control');
 
     this.mount = this.mount.bind(this);
     this.options = options;
@@ -94,7 +95,7 @@ function PreviousButton({
   };
 
   return (
-    <div className="vjs-button vjs-control">
+    <React.Fragment>
       <button className="vjs-button vjs-previous-button"
         role="button"
         ref={previousRef}
@@ -104,7 +105,7 @@ function PreviousButton({
         onKeyDown={handlePreviousKeyDown}>
         <SectionButtonIcon flip={true} />
       </button>
-    </div>
+    </React.Fragment>
   );
 }
 

diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSTrackScrubber.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSTrackScrubber.js
@@ -21,6 +21,7 @@ class VideoJSTrackScrubber extends vjsComponent {
   constructor(player, options) {
     super(player, options);
     this.setAttribute('data-testid', 'videojs-track-scrubber-button');
+    this.addClass('vjs-track-scrubber');
 
     this.mount = this.mount.bind(this);
     this.options = options;

diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSFileDownload.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSFileDownload.scss
@@ -1,6 +1,6 @@
 @import '../../../../../styles/vars';
 
-.vjs-file-download-icon {
+.vjs-file-download {
   background-size: 1.25rem;
   background-position: 0.75rem;
 

diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss
@@ -2,13 +2,11 @@
 
 .video-js .vjs-custom-progress-bar {
   cursor: pointer;
-  flex: auto;
   display: flex;
   align-items: center;
   min-width: 4em;
   touch-action: none;
   height: 1em;
-  margin-top: 1.1em;
 }
 
 .vjs-progress-holder {

diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSSectionButtons.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSSectionButtons.scss
@@ -1,4 +1,5 @@
 .vjs-previous-button,
 .vjs-next-button {
   cursor: pointer;
+  padding: 1.125em 0;
 }
diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSTrackScrubber.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSTrackScrubber.scss
@@ -2,6 +2,7 @@
 
 .vjs-track-scrubber-button {
   cursor: pointer;
+  padding: 1.125em 0;
 }
 
 .vjs-track-scrubber-container {