Video cleanup

guardian · Feb 28, 2017 · 1104f55 · 1104f55
1 parent 950751f
commit 1104f55
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/article/app/views/fragments/mainMedia.scala.html b/article/app/views/fragments/mainMedia.scala.html
@@ -43,15 +43,17 @@
 
                     @mainVideo.videos.caption.map { caption =>
                         @if(mvt.ABNewNavVariantSeven.isParticipating) {
-                            <input type="checkbox" id="show-caption" class="mobile-only u-h">
+                            <div class="js-hide-on-play">
+                                <input type="checkbox" id="show-caption" class="mobile-only u-h">
 
-                            <label class="mobile-only reveal-caption reveal-caption--img" for="show-caption">
-                                @fragments.inlineSvg("information", "icon", List("reveal-caption-icon", "centered-icon"))
-                            </label>
+                                <label class="mobile-only reveal-caption reveal-caption--video" for="show-caption">
+                                    @fragments.inlineSvg("information", "icon", List("reveal-caption-icon", "centered-icon"))
+                                </label>
 
-                            <figcaption data-link-name="Video caption link" class="caption caption--main caption--video" itemprop="description">
-                                @Html(caption)
-                            </figcaption>
+                                <figcaption data-link-name="Video caption link" class="caption caption--main caption--video" itemprop="description">
+                                    @Html(caption)
+                                </figcaption>
+                            </div>
                         } else {
                             <figcaption data-link-name="Video caption link" class="caption caption--main caption--video" itemprop="description">
                                 @fragments.inlineSvg("information", "icon", List("rounded-icon", "centered-icon"))

diff --git a/static/src/javascripts-legacy/projects/common/modules/video/events.js b/static/src/javascripts-legacy/projects/common/modules/video/events.js
@@ -275,12 +275,17 @@ define([
         events.ready();
     }
 
+    function hideCaption() {
+        $('.js-hide-on-play').hide();
+    }
+
     // These events are so that other libraries (e.g. Ophan) can hook into events without
     // needing to know about videojs
     function bindGlobalEvents(player) {
         player.on('playing', function () {
             kruxTracking(player, 'videoPlaying');
             bean.fire(document.body, 'videoPlaying');
+            hideCaption();
         });
         player.on('pause', function () {
             bean.fire(document.body, 'videoPause');

diff --git a/static/src/stylesheets/layout/_ab-new-header-test-variant.scss b/static/src/stylesheets/layout/_ab-new-header-test-variant.scss
@@ -739,6 +739,7 @@ $caption-button-size: 32px;
         .reveal-caption {
             position: absolute;
             right: $gs-gutter / 4;
+            bottom: $gs-baseline/2;
             width: $caption-button-size;
             height: $caption-button-size;
             z-index: 1;
@@ -757,10 +758,6 @@ $caption-button-size: 32px;
             }
         }
 
-        .reveal-caption--img {
-            bottom: $gs-baseline/2;
-        }
-
         .caption--main.caption--img,
         .caption--main.caption--video {
             position: absolute;

diff --git a/static/src/stylesheets/module/content/_media-player.scss b/static/src/stylesheets/module/content/_media-player.scss
@@ -229,6 +229,14 @@ $ima-controls-height: 70px;
         transition-delay: 0s;
     }
 
+    .gu-media-wrapper:hover .vjs-has-started.vjs-mousemoved & {
+        @include mq($until: tablet) {
+            bottom: 0;
+            transition: bottom 0s;
+            transition-delay: 0s;
+        }
+    }
+
     .vjs-using-native-controls & {
         display: none;
     }
@@ -1096,18 +1104,27 @@ $ima-controls-height: 70px;
 // We have to use vjs classes here, and not BEM modifiers as videojs
 // changes the classes names via JS, and last time we messed with that,
 // we had major refactoring issues.
-.gu-media--show-controls-at-start.vjs-paused {
+.gu-media--show-controls-at-start {
     .vjs-control-bar {
         bottom: 0;
+
+        @include mq($until: tablet) {
+            bottom: $gs-baseline*-5;
+        }
     }
-
-    .vjs-big-play-button .vjs-control-text {
-        &:before {
-            background-color: $media-default;
+    &.vjs-has-started.vjs-paused {
+        .vjs-control-bar {
+            bottom: 0;
         }
 
-        &:after {
-            border-left-color: #333333;
+        .vjs-big-play-button .vjs-control-text {
+            &:before {
+                background-color: $media-default;
+            }
+
+            &:after {
+                border-left-color: #333333;
+            }
         }
     }
 }