Adding combinePlayerOptions into existing code

This is where we make the managePlayer’s addPlayer function easier to understand.

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

playerSettings used to mean that it was a weird combination of both playerOptions and playerVars. That code doesn’t have a way to separate those out, so we should only use playerOptions.

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

And that change flows on through to the createCoverClickHandler function too.

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

And that change flows on through to the createPlayer function

  function createPlayer(videoWrapper, playerOptions = {}, videoIds = "") {
    const video = videoWrapper.querySelector(".video");
    if (!videoIds) {
      videoIds = video.dataset.id;
    }
    playerOptions = createPlayerOptions(playerOptions);
    return videoPlayer.addPlayer(video, playerOptions, videoIds);
  }

And that createPlayerOptions function isn’t needed anymore.

  function createPlayerOptions(settings) {
    const playerOptions = combinePlayerOptions(defaults, settings);
    return playerOptions;
  }

Instead, we can use combinePlayerOptions in the createPlayer function.

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

As it is playerOptions that addPlayer uses, those start properties need to be in their correct playerVars object instead, as you’ve already done with init.

    managePlayer.init({
        playerVars: {
            controls: 0
        }
    });
    managePlayer.addRandom(".playa", {
        playerVars: {
            start: 45
        }
    }, [
        "0dgNc5S8cLI",
        "mnfmQe8Mv1g",
        "-Xgi_way56U",
        "CHahce95B1g"
    ]);

The playerVars options now look to be working at https://jsfiddle.net/ro04qb53/

1 Like