Adding Const defaultPlayerVars =

JavaScript
4

As another refinement, it’s not appropriate for default parameters to be specified in the createPlayerOptions function. Let’s move them out.

    function createPlayerOptions(options, settings) {
        function paramInOptions(opts, param) {
            if (settings[param] !== undefined) {
                opts[param] = settings[param];
                delete settings[param];
            }
            return opts;
        }

        const optionParams = ["width", "height", "videoid", "host"];
        const preferred = optionParams.reduce(paramInOptions, {});
        const playerOptions = Object.assign({}, options, preferred);
        const playerVars = Object.assign({}, options.playerVars, settings);

        playerOptions.playerVars = playerVars;
        return playerOptions;
    }

    function initPlayer(videoWrapper, options, settings = {}) {
        ...
        const playerOptions = createPlayerOptions(options, settings);
        ...
    }

The clickHandler is somewhere further out to specify defaults.

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        const options = {
            height: 207,
            width: 277
        };
        options.playerVars = {
            autoplay: 0,
            controls: 1,
            disablekb: 1,
            enablejsapi: 1,
            fs: 0,
            iv_load_policy: 3,
            rel: 0
        };
        initPlayer(wrapper, options, config);
    }

But even then the clickHandler isn’t the appropriate place to specify the defaults.

What makes better sense is to initialise the player defaults when initializing the cover.

    const defaults = {
        height: 207,
        width: 277
    };
    defaults.playerVars = {
        autoplay: 0,
        controls: 1,
        disablekb: 1,
        enablejsapi: 1,
        fs: 0,
        iv_load_policy: 3,
        rel: 0
    };
    initPlayerDefaults(defaults);
    const cover = document.querySelector(config.target);
    delete config.target;
    cover.addEventListener("click", coverClickHandler);

We can then feed those defaults into where they need to be.

function loadPlayer(config) {
    const playerDefaults = {};
...
    function coverClickHandler(evt) {
        ...
        initPlayer(wrapper, config);
    }
...
    function createPlayerOptions(settings) {
        ...
        const playerOptions = Object.assign({}, playerDefaults, preferred);
        const playerVars = Object.assign(
            {},
            playerDefaults.playerVars,
            settings.playerVars
        );

        playerOptions.playerVars = playerVars;
        return playerOptions;
    }
...
    function initPlayerDefaults(defaults) {
        Object.assign(playerDefaults, defaults);
    }

    function initPlayer(videoWrapper, settings = {}) {
        const video = videoWrapper.querySelector(".video");
        const playerOptions = createPlayerOptions(settings);
        const player = videoPlayer.addPlayer(video, playerOptions);
        ...
    }

Doing things that way is a lot more stable and reliable.

1 Like