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

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)