Remove manageCover from the managePlayer code

JavaScript
55

Step 4 Part 5: The wrapper

Let’s now take a look in at the wrapper in onYouTubeIframeAPIReady’s addPlayer function.

    function addPlayer(coverSelector, playerOptions) {
        const cover = document.querySelector(coverSelector);
        const wrapper = cover.nextElementSibling;
        const callback = managePlayer.adder(wrapper, playerOptions);
        manageCover.addCoverHandler(coverSelector, callback);
    }

Here is the cover and the wrapper from the HTML code.

  <div class="container with-curtain">
    <button class="playa thePlay" type="button" aria-label="Open">
      ...
    </button>
    <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
        </div>
        ...
      </div>

The addPlayer code is not actually getting the wrapper, which is the “wrapa” class. Instead the addPlayer code is getting the curtain element.

Is cover.nextElementSibling supposed to be getting the wrapper instead? Does the code work when it’s actually the wrapper that’s being used? We can find out, by deliberately making sure that it is the wrap element being obtained.

    function addPlayer(coverSelector, playerOptions) {
        const cover = document.querySelector(coverSelector);
        const wrapper = document.querySelector(".wrapa");

Good, that still works with the first video. Having multiple similar classnames such as wrapa and wrapb and wrapc is an extremely bad idea, as it multiplies the amount of work that needs to be done. Looking at the HTML code there is no wrapb and wrapc, instead wrapa is used throughout in many different places, which leads to even more confusion.

Renaming wrapa to just wrap, and updating the code so that the wrap class is used to find the wrapper is what needs to be done.

Renaming wrapa to be just wrap throughout all of the HTML code gives us HTML code that looks like this:

      <div class="ratio-keeper">
        <div class="wrap">

We can now properly update addPlayer to get that wrap element.

By going up a parent from the cover we can do a general search down below for a wrap element.

    function addPlayer(coverSelector, playerOptions) {
        const cover = document.querySelector(coverSelector);
        // const parent = cover.parentElement;
        // const wrapper = cover.nextElementSibling;
        const wrapper = parent.querySelector(".wrap");
        const callback = managePlayer.adder(wrapper, playerOptions);
        manageCover.addCoverHandler(coverSelector, callback);
    }

Now that we have a reliable way to get the wrapper, that doesn’t involve anything to do with the cover, we can move that “wrap” search into the playerAdder function.

    // function playerAdder(wrapper, playerOptions) {
    function playerAdder(parent, playerOptions) {
        const wrapper = parent.querySelector(".wrap");
        return function callback() {
            initPlayer(wrapper, playerOptions);
        };
    }
...
    function addPlayer(coverSelector, playerOptions) {
        // const cover = document.querySelector(coverSelector);
        // const wrapper = parent.querySelector(".wrap");
        // const callback = managePlayer.adder(wrapper, playerOptions);
        const parent = document.querySelector(coverSelector).parentElement;
        const callback = managePlayer.adder(parent, playerOptions);
        manageCover.addCoverHandler(coverSelector, callback);
    }

Because we are using addPlayer with a cover selector and player options, that’s about as simple as we’re going to get with that code there. The addPlayer code doesn’t belong in either the manageCover or the managePlayer code, so that can stay where it is as a helper function inside of onYouTubeIframeAPIReady.

That’s a lot of detail for Step 4, so let me know how you’re coming along with it.

1 Like