Can this function be organized better?

JavaScript
43

Which of these should be done next?
https://jsfiddle.net/7men1q6z/

  • combinePlayerOptions is used both by videoPlayer and managePlayer. I want to reduce its use to only one module, but that can come later
  • manageCover definately doesn’t belong though.
const manageUI = (function makeManageUI() {

    function resetBackground(backgroundSelector) {
        const allBackgrounds = document.querySelectorAll(backgroundSelector);

        function showBackground(background) {
            background.classList.remove("bg1");
        }
        allBackgrounds.forEach(showBackground);
    }

    function resetCurtains(curtainSelector) {
        const allCurtains = document.querySelectorAll(curtainSelector);

        function showCurtain(curtain) {
            curtain.classList.remove("active");
        }
        allCurtains.forEach(showCurtain);
    }

    function showAllButtons(buttonSelector) {
        const allButtons = document.querySelectorAll(buttonSelector);

        function showButton(button) {
            button.classList.remove("hide");
        }
        allButtons.forEach(showButton);
    }

    function resetButtons(buttonSelector) {
        const allButtons = document.querySelectorAll(buttonSelector);

        function showButton(button) {
            button.classList.remove("isOpen");
        }
        allButtons.forEach(showButton);
    }

    function resetPage() {
        resetBackground("body");
        resetCurtains(".with-curtain");
        showAllButtons(".container.hide");
        resetButtons(".outer");
    }

    function hideCurtains(exitButtons) {
        const container = exitButtons.closest(".inner-container");
        const curtains = container.querySelector(".sliding-panels");
        curtains.classList.add("hide");
    }

    function exitClickHandler(evt) {
        resetPage();
        hideCurtains(evt.currentTarget);
    }

    function addClickToExit(exitButtons) {
        exitButtons.forEach(function addExitButtonHandler(exitButtons) {
            exitButtons.addEventListener("click", exitClickHandler);
        });
    }

    function init() {
        const exitButtons = document.querySelectorAll(".exit");
        addClickToExit(exitButtons);
    }

    return {
        init
    };
}());

const manageCover = (function makeManageCover() {
    const config = {};

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function hideAll(elements) {
        elements.forEach(hide);
    }

    function resetBackground(backgroundSelector) {
        const allBackgrounds = document.querySelectorAll(backgroundSelector);

        function hideBackground(background) {
            background.classList.add("bg1");
        }
        allBackgrounds.forEach(hideBackground);
    }

    function resetButtons(buttonSelector) {
        const allButtons = document.querySelectorAll(buttonSelector);

        function hideButton(button) {
            button.classList.add("isOpen");
        }
        allButtons.forEach(hideButton);
    }

    function resetPage() {
        resetBackground("body");
        resetButtons(".outer");
    }

    function markAsPlayed(played) {
        played.classList.add("played");
    }

    function showCovers(playButton) {
        const cover = playButton.parentElement;
        cover.classList.add("active");
        show(cover);
    }

    function coverClickHandler(evt) {
        hideAll(config.containers);
        resetPage();
        markAsPlayed(evt.currentTarget);
        const cover = evt.currentTarget;
        showCovers(cover);
    }

    function addClickToButtons(playButtons) {
        playButtons.forEach(function playButtonHandler(playButton) {
            playButton.addEventListener("click", coverClickHandler);
        });
    }

    function addCoverHandler(coverSelector, handler) {
        const cover = document.querySelector(coverSelector);
        cover.addEventListener("click", handler);
    }

    function init(selectors) {
        config.containers = document.querySelectorAll(selectors.container);
        const playButtons = document.querySelectorAll(selectors.playButton);
        addClickToButtons(playButtons);
    }

    return {
        addCoverHandler,
        init
    };
}());

function combinePlayerOptions(options1 = {}, options2 = {}) {
    const combined = Object.assign({}, options1, options2);
    Object.keys(options1).forEach(function checkObjects(prop) {
        if (typeof options1[prop] === "object") {
            combined[prop] = Object.assign({}, options1[prop], options2[prop]);
        }
    });
    return combined;
}

const videoPlayer = (function makeVideoPlayer() {
    const players = [];

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function createStopHandler(player) {
        const stopButtons = document.querySelectorAll(".exit");
        stopButtons.forEach(function stopButtonHandler(button) {
            button.addEventListener("click", function buttonClickHandler() {
                player.stopVideo();
            });
        });
    }

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100);
        createStopHandler(player);
    }

    function addPlayer(video, settings) {
        const defaults = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            videoId: video.dataset.id,
            width: 640
        };
        defaults.events = {
            "onReady": onPlayerReady
        };

        const playerOptions = combinePlayerOptions(defaults, settings);
        const player = new YT.Player(video, playerOptions);
        players.push(player);
        return player;
    }

    return {
        addPlayer
    };
}());

const managePlayer = (function makeManagePlayer() {
    const defaults = {
        playerVars: {
            autoplay: 0,
            controls: 1,
            disablekb: 1,
            enablejsapi: 1,
            fs: 0,
            iv_load_policy: 3
        }
    };

    function show(el) {
        el.classList.remove("hide");
    }

    function createPlayer(videoWrapper, settings = {}) {
        const video = videoWrapper.querySelector(".video");
        const playerOptions = combinePlayerOptions(defaults, settings);
        return videoPlayer.addPlayer(video, playerOptions);
    }

    function createCoverClickHandler(playerOptions) {
        return function coverClickHandler(evt) {
            const cover = evt.currentTarget;
            const wrapper = cover.nextElementSibling;
            show(wrapper);
            const player = createPlayer(wrapper, playerOptions);
            wrapper.player = player;
        };
    }

    function addPlayer(coverSelector, playerOptions) {
        const clickHandler = createCoverClickHandler(playerOptions);
        manageCover.addCoverHandler(coverSelector, clickHandler);
    }

    return {
        add: addPlayer
    };

}());

function onYouTubeIframeAPIReady() {

    managePlayer.add(".playa", {});
    managePlayer.add(".playb", {});
    managePlayer.add(".playc", {});
    managePlayer.add(".playd", {});
    managePlayer.add(".playe", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    managePlayer.add(".playe", {});
    managePlayer.add(".playf", {});
    managePlayer.add(".playg", {});
    managePlayer.add(".playh", {});
    managePlayer.add(".playi", {});

    manageCover.init({
        container: ".container",
        playButton: ".thePlay"
    });

    manageUI.init({});
}