From 490242b4b8b54832454b38a18731f3679821ed3f Mon Sep 17 00:00:00 2001 From: RJ Spiker Date: Thu, 20 Jun 2019 18:06:29 -0600 Subject: [PATCH] website - updates to home hero video carousel (#5932) --- .../source/assets/javascripts/application.js | 1 + .../javascripts/consul-connect/home-hero.js | 192 +++++++++--------- .../consul-connect/pages/_home.scss | 7 - website/source/index.html.erb | 4 - 4 files changed, 99 insertions(+), 105 deletions(-) diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js index 98baefa2d..6552cb315 100644 --- a/website/source/assets/javascripts/application.js +++ b/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 diff --git a/website/source/assets/javascripts/consul-connect/home-hero.js b/website/source/assets/javascripts/consul-connect/home-hero.js index c7bce8ee2..5104941a8 100644 --- a/website/source/assets/javascripts/consul-connect/home-hero.js +++ b/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() + // pause the current video + $$videos[currentIndex].pause(); - // deactivate the current video - wrapper.classList.remove('active') - wrapper.classList.add('deactivate') + // deactivate the current video + 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' + // after the current video animates out... + setTimeout(function() { + // reset the current video + if (!isNaN($$videos[currentIndex].duration)) { + $$videos[currentIndex].currentTime = 0; + } + $$videoControls[currentIndex].classList.remove("playing"); - // reset the current video - if (!isNaN($$videos[currentIndex].duration)) { - $$videos[currentIndex].currentTime = 0 + // stop deactivation + 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); + } else { + $$videos[index].addEventListener( + "canplaythrough", + playVideo(index, nextWrapper) + ); + } + }, 1000); } - $$videoControls[currentIndex].classList.remove('playing') - // stop deactivation - wrapper.classList.remove('deactivate') + // activate and play a video + function playVideo(index, wrapper) { + // toggle + $$videos[index].classList.add("loaded"); - // check if the video is loaded - // if not, listen for it to load - if ($$videos[index].classList.contains('loaded')) { - playVideo(index, nextWrapper) - } else { - $$videos[index].addEventListener( - 'canplaythrough', - playVideo(index, nextWrapper) - ) + // activate the next video and start playing it + wrapper.classList.add("active"); + $$videoControls[index].classList.add("playing"); + $$videos[index].play(); + + // 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; } - }, 1000) -} -// activate and play a video -function playVideo(index, wrapper) { - // toggle - $$videos[index].classList.add('loaded') + 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; - // activate the next video and start playing it - 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' - - // 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') - } - - // loop through videos to set up options/listeners - for (var i = 0; i < $$videos.length; i++) { - // set video default speed - $$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) - }) - } - - 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) + // 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); + }); } - }) - } - // go to first video to start this thing - if ($$videos.length > 0) { - initiateVideoChange(0) - } -} + for (var i = 0; i < $$videoControls.length; i++) { + // listen for control clicks and initiate videos appropriately + $$videoControls[i].addEventListener("click", function() { + if (!this.classList.contains("playing")) { + initiateVideoChange(this.dataset.index); + } + }); + } -document.addEventListener('turbolinks:load', initiateVideos) \ No newline at end of file + // go to first video to start this thing + if ($$videos.length > 0) { + initiateVideoChange(0); + } + } + + 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"); + } + }); + } +}); diff --git a/website/source/assets/stylesheets/consul-connect/pages/_home.scss b/website/source/assets/stylesheets/consul-connect/pages/_home.scss index 3e38dc6ae..bcd1152d1 100644 --- a/website/source/assets/stylesheets/consul-connect/pages/_home.scss +++ b/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 { diff --git a/website/source/index.html.erb b/website/source/index.html.erb index f7d9483e4..dd6989b0b 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -295,7 +295,3 @@ description: |- - -<% content_for :scripts do %> - -<% end %>