From ae3e769e6100b99b508efd18661419ee657f53be Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Tue, 10 Mar 2020 15:42:07 -0700
Subject: [PATCH] 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>
---
 .../templates/fragments/hero/large.html       |  2 +-
 .../templates/mozfest/mozfest_homepage.html   |  1 +
 source/js/mozfest-event-handlers.js           | 38 +++++++++----------
 source/sass/mozfest.scss                      |  6 ++-
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/large.html b/network-api/networkapi/mozfest/templates/fragments/hero/large.html
index e5cab4d898d..284134ee518 100644
--- 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
index 4d928c8df9c..ea18985225e 100644
--- 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
index dc8c18fcca7..caf7dc76f39 100644
--- 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
index 0f6fd4e6f65..f7fc1cd4de5 100644
--- 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;
         }