Mobile icons (#527)

* Use fluid:true on videojs setup for responsive design * Adjust width of player icons for Android
samvera-labs · Jun 17, 2024 · d9ae3af · d9ae3af
1 parent 6ba3a20
commit d9ae3af
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
@@ -834,7 +834,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'
+          className={`video-js vjs-big-play-centered vjs-disabled ${IS_ANDROID ? 'is-mobile' : ''}`}
           onTouchStart={saveTouchStartCoords}
           onTouchEnd={mobilePlayToggle}
           style={{ display: `${canvasIsEmptyRef.current ? 'none' : ''}` }}

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -57,6 +57,14 @@
   width: 2.5rem !important;
 }
 
+.is-mobile .vjs-control-bar {
+  font-size: 90%;
+}
+
+.is-mobile .vjs-control {
+  width: 2rem !important;
+}
+
 /* Make the horizontal volume panel always visible for audio */
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
   transition: none !important;
@@ -139,6 +147,10 @@ video/poster area the controls are displayed correctly. */
 }
 
 /* captions button selection */
+.is-mobile .captions-on {
+  border-bottom: 0.3rem ridge $primaryGreen !important;
+}
+
 .captions-on {
   border-bottom: 0.45rem ridge $primaryGreen !important;
 }