website - updates to home hero video carousel (#5932)
This commit is contained in:
RJ Spiker
Matt Keeler
parent
352adf204c
commit
490242b4b8
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// 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");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -208,13 +208,6 @@
|
|||
|
||||
&.playing {
|
||||
color: $consul-black;
|
||||
|
||||
.progress-bar {
|
||||
span {
|
||||
transition: width linear;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
|
|
|
|||
|
|
@ -295,7 +295,3 @@ description: |-
|
|||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<% content_for :scripts do %>
|
||||
<script src='/assets/javascripts/consul-connect/home-hero.js' defer></script>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue