website - updates to home hero video carousel (#5932)

website/source/assets/javascripts/application.js

@@ -8,6 +8,7 @@
 //= require consul-connect/vendor/object-fit-images.min.js
 //= require consul-connect/vendor/siema.min.js
 //= require consul-connect/carousel
+//= require consul-connect/home-hero
 
 //= require analytics
 //= require gsap-custom

website/source/assets/javascripts/consul-connect/home-hero.js

@@ -1,109 +1,113 @@
-var qs = document.querySelector.bind(document)
-var qsa = document.querySelectorAll.bind(document)
+document.addEventListener("turbolinks:load", function() {
+  var qs = document.querySelector.bind(document);
+  var qsa = document.querySelectorAll.bind(document);
+  var $hero = qs("#home-hero");
 
-var $$wrappers = qsa('#home-hero .videos > div') // all the wrappers for the videos
-var $$videos = qsa('#home-hero video') // all the videos
-var $$videoControls = qsa('#home-hero .controls > div') // carousel controllers
-var currentIndex = 1 // currently playing video
-var playbackRate = 2 // video playback speed
+  if ($hero) {
+    var $$wrappers = qsa("#home-hero .videos > div"); // all the wrappers for the videos
+    var $$videos = qsa("#home-hero video"); // all the videos
+    var $$videoBars = qsa("#home-hero .progress-bar span"); // progress bars
+    var $$videoControls = qsa("#home-hero .controls > div"); // carousel controllers
+    var currentIndex = 1; // currently playing video
+    var playbackRate = 2; // video playback speed
 
-// initiate a video change
-function initiateVideoChange(index) {
-  var wrapper = $$wrappers[currentIndex]
-  var nextWrapper = $$wrappers[index]
+    // initiate a video change
+    function initiateVideoChange(index) {
+      var wrapper = $$wrappers[currentIndex];
+      var nextWrapper = $$wrappers[index];
 
       // pause the current video
-  $$videos[currentIndex].pause()
+      $$videos[currentIndex].pause();
 
       // deactivate the current video
-  wrapper.classList.remove('active')
-  wrapper.classList.add('deactivate')
+      wrapper.classList.remove("active");
+      wrapper.classList.add("deactivate");
 
       // after the current video animates out...
       setTimeout(function() {
-    // remove transition effect so progress-bar doesn't slowly decline
-    var loadingBar = $$videoControls[currentIndex].querySelector(
-      '.progress-bar span'
-    )
-    loadingBar.style.transitionDuration = '0s'
-
         // reset the current video
         if (!isNaN($$videos[currentIndex].duration)) {
-      $$videos[currentIndex].currentTime = 0
+          $$videos[currentIndex].currentTime = 0;
         }
-    $$videoControls[currentIndex].classList.remove('playing')
+        $$videoControls[currentIndex].classList.remove("playing");
 
         // stop deactivation
-    wrapper.classList.remove('deactivate')
+        wrapper.classList.remove("deactivate");
 
         // check if the video is loaded
         // if not, listen for it to load
-    if ($$videos[index].classList.contains('loaded')) {
-      playVideo(index, nextWrapper)
+        if ($$videos[index].classList.contains("loaded")) {
+          playVideo(index, nextWrapper);
         } else {
           $$videos[index].addEventListener(
-        'canplaythrough',
+            "canplaythrough",
             playVideo(index, nextWrapper)
-      )
+          );
+        }
+      }, 1000);
     }
-  }, 1000)
-}
 
-// activate and play a video
-function playVideo(index, wrapper) {
+    // activate and play a video
+    function playVideo(index, wrapper) {
       // toggle
-  $$videos[index].classList.add('loaded')
+      $$videos[index].classList.add("loaded");
 
       // activate the next video and start playing it
-  wrapper.classList.add('active')
-  $$videoControls[index].classList.add('playing')
-  $$videos[index].play()
+      wrapper.classList.add("active");
+      $$videoControls[index].classList.add("playing");
+      $$videos[index].play();
 
-  $$videoControls[index].querySelector(
-    '.progress-bar span'
-  ).style.transitionDuration =
-    Math.ceil($$videos[index].duration / playbackRate).toString() + 's'
+      // sync playback bars to video.currentTime
+      setInterval(() => {
+        if (!isNaN($$videos[index].duration)) {
+          $$videoBars[index].style.width = `${($$videos[index].currentTime /
+            $$videos[index].duration) *
+            100}%`;
+        }
+      }, 200);
 
       // set the currentIndex to be that of the current video's index
-  currentIndex = index
-}
-
-function initiateVideos() {
-  // remove 'active' from wrappers which may be 
-  // there on page load because of turbolinks
-  for (var i = 0; i < $$wrappers.length; i++) {
-    $$wrappers[i].classList.remove('active')
+      currentIndex = index;
     }
 
+    function initiateVideos() {
       // loop through videos to set up options/listeners
       for (var i = 0; i < $$videos.length; i++) {
         // set video default speed
-    $$videos[i].playbackRate = playbackRate
+        $$videos[i].playbackRate = playbackRate;
 
         // listen for video ending, then go to the next video
-    $$videos[i].addEventListener('ended', function() {
-      var nextIndex = currentIndex + 1
-      initiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0)
-    })
+        $$videos[i].addEventListener("ended", function() {
+          var nextIndex = currentIndex + 1;
+          initiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0);
+        });
       }
 
       for (var i = 0; i < $$videoControls.length; i++) {
-    // remove 'playing' from controls which may be 
-    // there on page load because of turbolinks
-    $$videoControls[i].classList.remove('playing')
-
         // listen for control clicks and initiate videos appropriately
-    $$videoControls[i].addEventListener('click', function() {
-      if (!this.classList.contains('playing')) {
-        initiateVideoChange(this.dataset.index)
+        $$videoControls[i].addEventListener("click", function() {
+          if (!this.classList.contains("playing")) {
+            initiateVideoChange(this.dataset.index);
           }
-    })
+        });
       }
 
       // go to first video to start this thing
       if ($$videos.length > 0) {
-    initiateVideoChange(0)
+        initiateVideoChange(0);
+      }
     }
-}
 
-document.addEventListener('turbolinks:load', initiateVideos)
+    initiateVideos();
+
+    // reset it all
+    document.addEventListener("turbolinks:before-cache", function() {
+      for (var i = 0; i < $$videos.length; i++) {
+        $$videos[i].currentTime = 0;
+        $$videoBars[i].style.width = 0;
+        $$videoControls[i].classList.remove("playing");
+        $$wrappers[i].classList.remove("active");
+      }
+    });
+  }
+});

website/source/assets/stylesheets/consul-connect/pages/_home.scss

@@ -208,13 +208,6 @@
 
         &.playing {
           color: $consul-black;
-
-          .progress-bar {
-            span {
-              transition: width linear;
-              width: 100%;
-            }
-          }
         }
 
         & > span {

website/source/index.html.erb

@@ -295,7 +295,3 @@ description: |-
   </section>
 
 </div>
-
-<% content_for :scripts do %>
-  <script src='/assets/javascripts/consul-connect/home-hero.js' defer></script>
-<% end %>