status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-02-03 01:14:23 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
RJ Spiker 2019-06-20 18:06:29 -06:00 committed by Matt Keeler
parent 8c821c1260
commit d545ffa8b5
4 changed files with 99 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
website/source/assets/javascripts/application.js
View File

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

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

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

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

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

4
website/source/index.html.erb
View File

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