Source: components/video-controls.js

(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);
})();