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

109 lines
3.3 KiB
JavaScript

var qs = document.querySelector.bind(document)
var qsa = document.querySelectorAll.bind(document)
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
// initiate a video change
function initiateVideoChange(index) {
var wrapper = $$wrappers[currentIndex]
var nextWrapper = $$wrappers[index]
// pause the current video
$$videos[currentIndex].pause()
// 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'
// reset the current video
if (!isNaN($$videos[currentIndex].duration)) {
$$videos[currentIndex].currentTime = 0
}
$$videoControls[currentIndex].classList.remove('playing')
// 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)
}
// activate and play a video
function playVideo(index, wrapper) {
// toggle
$$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()
$$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)
}
})
}
// go to first video to start this thing
if ($$videos.length > 0) {
initiateVideoChange(0)
}
}
document.addEventListener('turbolinks:load', initiateVideos)