Merge pull request #11566 from iskipu/fix-9501

Fix - Video player height
learningequality · Dec 5, 2023 · c3a04a5 · c3a04a5
2 parents 6cb4f53 + b77b4c6
commit c3a04a5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue b/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
@@ -692,13 +692,11 @@
 
     .wrapper.transcript-visible.transcript-wrap .media-player-transcript {
       top: 0;
-      height: auto;
-      margin-top: #{$video-player-height-by-width};
+      height: calc(100vh - #{$video-player-height-vw});
     }
 
     .wrapper.transcript-visible.transcript-wrap .video-js.vjs-fill {
-      height: auto;
-      padding-top: #{$video-player-height-by-width};
+      height: #{$video-player-height-vw};
     }
   }
 

diff --git a/kolibri/plugins/media_player/assets/src/views/videojs-style/variables.scss b/kolibri/plugins/media_player/assets/src/views/videojs-style/variables.scss
@@ -12,7 +12,7 @@ $video-player-font-size: 12px;
 $video-player-aspect: 9 / 16;
 
 // max height, minus appbar and padding
-$video-player-max-vh: 100vh - #{132px};
+$video-player-max-vh: calc(100vh - 132px);
 
 // height based off width
 $video-player-height-by-width: 100% * $video-player-aspect;
@@ -21,4 +21,4 @@ $video-player-height-by-width: 100% * $video-player-aspect;
 $video-player-height-vw: $video-player-aspect * 100vw;
 
 // (100% of allowable height) - (video height)
-$transcript-wrap-height: $video-player-max-vh - #{$video-player-height-vw};
+$transcript-wrap-height: calc(#{$video-player-max-vh} - #{$video-player-height-vw});