(function () { "use strict"; /** * Custom controls for HTML5 video * @namespace */ db.libs.videoControls = (function ($) { function bindSoundButton(soundButton, video, unmuteCallback) { soundButton.addEventListener('click', function() { if (video.muted === false) { video.muted = true; soundButton.classList.add('muted'); } else { video.muted = false; soundButton.classList.remove('muted'); unmuteCallback(); } }); var stickyHeroVideos = document.querySelectorAll('.sticky-hero__video'); var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.intersectionRatio > 1) { video.muted = false; soundButton.classList.remove("muted"); unmuteCallback(); } else { video.muted = true; soundButton.classList.add("muted"); } }, config); }); stickyHeroVideos.forEach(function(video) { observer.observe(video); }); var config = { threshold: [0, 0.5, 1] }; } function turnOffSound(wrapper) { var video = wrapper.getElementsByTagName('video'); if (!video || !video[0]) { return; } video = video[0]; var soundButton = wrapper.getElementsByClassName('sound'); if (!soundButton || !soundButton[0]) { return; } soundButton = soundButton[0]; if (video.muted === false) { video.muted = true; soundButton.classList.add('muted'); } } function bindVideoWrapper(wrapper, currentIndex, videoWrappers) { var video = wrapper.getElementsByTagName('video'); if (!video || !video[0]) { return; } video = video[0]; var soundButton = wrapper.getElementsByClassName('sound'); if (!soundButton || !soundButton[0]) { return; } soundButton = soundButton[0]; bindSoundButton(soundButton, video, function() { for (var i = 0; i < videoWrappers.length; i++) { if (i === currentIndex) { continue; } turnOffSound(videoWrappers[i]); } }); } function init() { var videoWrappers = document.getElementsByClassName('sticky-hero__video'); for (var index = 0; index < videoWrappers.length; index++) { var wrapper = videoWrappers[index]; bindVideoWrapper(wrapper, index, videoWrappers); } } return { init: init, reflow: init }; })(jQuery); })();