MozFest homepage video contrls fixes & align banner text (#4315)

* autoplay via JS & code improvement * fix misaligned banner text on small screens Co-authored-by: Pomax <pomax@nihongoresources.com>
MozillaFoundation · Mar 10, 2020 · ae3e769 · ae3e769
1 parent a9c3fee
commit ae3e769
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/large.html b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
@@ -3,7 +3,7 @@
 <div class="background-wrapper">
   <div class="overlay"></div>
   {% if banner_video_type == "hardcoded" %}
-    <video class="banner-video" playsinline autoplay muted loop preload poster="" >
+    <video class="banner-video" playsinline muted loop preload poster="" >
       <source
         src="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video.mp4"
         type="video/mp4">

diff --git a/network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html b/network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html
@@ -4,6 +4,7 @@
 {% block page_title %}{{page.title}}{% endblock%}
 
 {% block mozfest_body_id %}home{% endblock %}
+{% block bodyclass %}mozfest {% if banner_video_type %}banner-type-{{banner_video_type}}{% endif %}{% endblock %}
 
 {% block hero_guts %}
   {% include "partials/primary_heroguts.html" with root=root page=page homepage=True banner_video_type=banner_video_type %}

diff --git a/source/js/mozfest-event-handlers.js b/source/js/mozfest-event-handlers.js
@@ -14,39 +14,35 @@ const bindHomeBannerHandlers = () => {
   let playButton = homepageBanner.querySelector(".btn-video-control.btn-play");
 
   if (video && pauseButton && playButton) {
-    let showVideoControls = () => {
-      const classToToggle = `d-none`;
-      let autoplayStarted =
-        video.played.length == 0 && video.readyState >= video.HAVE_FUTURE_DATA;
-
-      if (video.readyState < video.HAVE_FUTURE_DATA) {
-        // don't show any video controls as the video isn't ready to play
-        playButton.classList.add(classToToggle);
-        pauseButton.classList.add(classToToggle);
-      } else if (!video.paused || autoplayStarted) {
-        playButton.classList.add(classToToggle);
-        pauseButton.classList.remove(classToToggle);
-      } else {
-        pauseButton.classList.add(classToToggle);
-        playButton.classList.remove(classToToggle);
-      }
+    const HIDE = `d-none`;
+
+    const showPauseButton = () => {
+      playButton.classList.add(HIDE);
+      pauseButton.classList.remove(HIDE);
+    };
+
+    const showPlayButton = () => {
+      pauseButton.classList.add(HIDE);
+      playButton.classList.remove(HIDE);
     };
 
     pauseButton.addEventListener(`click`, () => {
       video.pause();
-      showVideoControls();
     });
 
     playButton.addEventListener(`click`, () => {
       video.play();
-      showVideoControls();
     });
 
-    showVideoControls();
+    video.addEventListener(`pause`, () => {
+      showPlayButton();
+    });
 
-    video.addEventListener(`canplay`, () => {
-      showVideoControls();
+    video.addEventListener(`playing`, () => {
+      showPauseButton();
     });
+
+    video.play();
   }
 };
 

diff --git a/source/sass/mozfest.scss b/source/sass/mozfest.scss
@@ -78,9 +78,13 @@ body.mozfest {
         }
       }
 
-      .homepage-banner-content {
+      .homepage-banner-content.container {
         z-index: $banner-background-z-index + 3;
 
+        @media screen and (max-width: $bp-sm) {
+          width: 100%;
+        }
+
         @media screen and (min-width: $bp-md) {
           padding-bottom: $cutoff-offset;
         }