adjust scrubber ui if no cc

2 files changed, 5 insertions, 2 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 63b4dc2..3c688bd 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -400,13 +400,16 @@
   pointer-events: none;
 }
 .video-scrubber .end-controls {
-  width: 9rem;
+  width: 7rem;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   color: black;
 }
+.video-scrubber .end-controls.has-cc {
+  width: 9rem;
+}
 .video-scrubber .playerTime {
   display: flex;
   align-items: center;
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
index 4fef8d6..e43c7ec 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
@@ -140,7 +140,7 @@ class VideoScrubber extends Component {
             {timestampText}
           </div>
         </div>
-        <div className='end-controls'>
+        <div className={mediaItem.settings.subtitles ? 'end-controls has-cc' : 'end-controls'}>
           <div className='playerTime'>
             {timestampText}
           </div>