Remove manageCover from the managePlayer code

Sorry for the confusion.

Let’s do this one: https://jsfiddle.net/9dkzy6x1/

Because everytime I place the function names inside the return, I keep doing it wrong for some reason.

Each time I rearrange the returns, I check to see if I am able to move out those 2 functions, and so far I have not been able to do that yet.

return {
        add: addPlayer
    };

I don’t know how to add these function names to the return.

 createCoverClickHandler
 createPlayer
 show

Where the code will work with these functions moved out and placed inside the onYouTubeIframeAPIReady() function.

According to the instructions, after the return is set up the right way, I should be able to do this next.

function onYouTubeIframeAPIReady() {

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

On looking at the public methods of managePlayer, at line 346 of https://jsfiddle.net/9dkzy6x1/ I see that no change has happened there. These are the instructions I gave in regard to that:

Once you have accomplished that simple task we can then move on to the rest of what was instructed in the Step 1 instructions.

Reading those instructions I did this.
https://jsfiddle.net/a0zer5gq/

    return {
        add: addPlayer,
        addCover: createCoverClickHandler,
        makePlayer: createPlayer,
        addShow: show
    };

Thanks. Giving the methods names different from the function names does result in making more work for you. They are only temporary and won’t remain by the end of the process.

Are you sure that you want them to be different names?

Ideally instead of makePlayer: createPlayer, it should just be createPlayer by itself. And similar for the other ones that were added.

1 Like

Like this then.
What do I do next?

If this is good, we can continue making progress from here.

https://jsfiddle.net/ckxohm89/

    return {
        add: addPlayer,
        createCoverClickHandler,
        createPlayer,
        show
    };

I am not quite fully understanding this:
Meaning, I am not fully understanding what you want me to do.

After the public methods have been added for show, createPlayer, and createCoverClickHandler, we need to update those functions so that the public methods are used instead. That should only mean updating function calls in those functions such as show, so that managePlayer.show is used instead.

The only thing I understand, if I understand at all is that, with show,

You want me to change add to show here:

Which is done at this link: https://jsfiddle.net/c8p23qyw/

This:

  managePlayer.add(".playa", {});
  managePlayer.add(".playb", {});
  managePlayer.add(".playc", {});
  managePlayer.add(".playd", {});

to this:

  managePlayer.show(".playa", {});
  managePlayer.show(".playb", {});
  managePlayer.show(".playc", {});
  managePlayer.show(".playd", {});

Is something supposed to be changed in these functions also, I don’t know, and if yes, I don’t know what would be changed.

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

Doing this is a guess because I don’t know:

Do you want me to add createPlayer, show to the function call here?

function createCoverClickHandler(playerOptions, createPlayer, show) {

Sorry, but you are completely wrong there.

In the two functions that we plan to move soon, we need to replace occurrences of createCoverClickHandler, createPlayer and show, with managePlayer.createCoverClickHandler, managePlayer.createPlayer, and managePlayer.show.

Thank you for explaining that to me.

Following those instructions, I did this: https://jsfiddle.net/sx8bawvr/

Can further progress be made?

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

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

This:
const player = createPlayer(wrapper, playerOptions);

Became:
const player = managePlayer.createPlayer(wrapper, playerOptions);

This:
show(wrapper);

Became:
managePlayer.show(wrapper);

This:
const clickHandler = createCoverClickHandler(playerOptions);

Became:
const clickHandler = managePlayer.createCoverClickHandler(playerOptions);

Good one. It looks like we are ready for step 2. As a reminder, here are the steps that were initially conceived.

Step 1: Change needed private functions to be public
Step 2: MoveCopy unsuitable functions to onYouTubeIframeAPIReady
Step 3: Rename managePlayer.add to use the addPlayer function in onYouTubeIframeAPIReady
Step 4: Move parts of the functions back in to manageCover and managePlayer
Step 5: Rename addPlayer in onYouTubeIframeAPIReady back to managePlayer.add
Step 6: Change public functions that no longer need to be public back to private
Step 7: Remove as much of the onYouTubeIframeAPIReady functions as we can

Step 2: Copy unsuitable functions to onYouTubeIframeAPIReady

This is where the createCoverClickHandler and addPlayer functions are copied out of managePlayer and pasted into the start of the onYouTubeIframeAPIReady function.

Those functions will later on be removed from the managePlayer code, but that will be after we’ve completed step 3. For now, it is just copying out the createCoverClickHandler and addPlayer functions into the start of the onYouTubeIframeAPIReady function.

1 Like

Like this? https://jsfiddle.net/o57fgz83/

After I moved the functions out the code stopped working.

createCoverClickHandler is not defined

Cannot access ‘managePlayer’ before initialization

Was the code not supposed to work after the functions were moved out?

After I do Step 2, is the code supposed to continue working?

Did I forget to do something?

That’s because you shouldn’t move the functions out just yet.
Can you please just follow my simple instructions for once?

I’m sorry, I thought you had instructed me to move the functions out.

Here I copied them. https://jsfiddle.net/bgqc9su5/

If this is good, we can work on Step 3, which is below this.

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

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = managePlayer.createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }
  
  return {
    add: addPlayer,
    createCoverClickHandler,
    createPlayer,
    show
  };
}());

function onYouTubeIframeAPIReady() {

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

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

After that is Step 3,

Step 3: Rename managePlayer.add to use the addPlayer function in onYouTubeIframeAPIReady

I did that here: Code Works: https://jsfiddle.net/zsf9yjkq/

If that is good, we can work on Step 4, which is below this.

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

Link from completed Step 3: https://jsfiddle.net/zsf9yjkq/

Here is Step 4:

Step 4: Move parts of the functions back in to manageCover and managePlayer

Are some parts being added to the already existing addCoverHandler function?

How do I add parts of this:

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

to the: addCoverHandler function?

How do I do that?

const manageCover = (function makeManageCover() {

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

This was an attempt: That did not work in the code.

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

Then I tried this: That did not work either.
Maybe I am doing it wrong.

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

If I am not doing that, am I then creating a new function that is placed below
the addCoverHandler function?

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

When you were referring to: manageCover and managePlayer.

I was thinking inside each of these:

const manageCover = (function makeManageCover() {

const managePlayer = (function makeManagePlayer() {

I think I am right, and if I am not supposed to be doing that, then I am misunderstanding the instructions and am confused then.

We can work on moving parts of the functions back in to manageCover if that is where you say I am up to.

I will wait for further instructions on what I should be doing.

Last Updated Code:
From Step 3 completed. https://jsfiddle.net/zsf9yjkq

Here are the steps that we are working with:

Step 1: Change needed private functions to be public
Step 2: MoveCopy unsuitable functions to onYouTubeIframeAPIReady
Step 3: Rename managePlayer.add to use the addPlayer function in onYouTubeIframeAPIReady
Step 4: Move parts of the functions back in to manageCover and managePlayer
Step 5: Rename addPlayer in onYouTubeIframeAPIReady back to managePlayer.add
Step 6: Change public functions that no longer need to be public back to private
Step 7: Remove as much of the onYouTubeIframeAPIReady functions as we can

That brings us to step 3.

Step 3: Rename managePlayer.add to use the addPlayer function in onYouTubeIframeAPIReady

Renaming managePlayer.add to instead use addPlayer is not the only thing that happens in this step. The main reason why we are doing this step is to remove the createCoverClickHandler and addPlayer functions from the managePlayer code.

After renaming managePlayer.add to be just addPlayer, we can remove the public method called add from the end of managePlayer, and also remove the addPlayer function from the managePlayer code.

In order to achieve that, we need to update the addPlayer function that’s inside of onYouTubeIframeAPIReady so that it doesn’t refer to managePlayer.createCoverClickHandler. Instead we just use createCoverClickHandler instead so that it’s the separate function that we copied into onYouTubeIframeAPIReady that is being used.

On doing that we can remove the createCoverClickHandler public method from the end of the managePlayer code, and we can now delete the createCoverClickHandler function from inside of managePlayer.

That is all for Step 3. What these first 3 steps has achieved is to extract two functions, createCoverClickHandler and addPlayer, out of managePlayer and into the onYouTubeIframeAPIReady function.

That was quite tricky what with attempting to avoid errors when doing that.

Before dealing with Step 4 I’ll demonstrate how this is more appropriately done, where errors are instead beneficially used to instruct is about what needs to be done next.

2 Likes

In the above work we were trying to avoid errors from happening. That requires a lot of knowledge about what is going to go wrong in the future, so that we can take steps now to prevent those errors from happening.

This post details a much easier and more reliable technique based on Test-Driven-Development, where we use errors to help drive us towards correct code.

Beneficial errors when extracting createCoverClickHandler and addPlayer

Part 1: Extract the functions

From the initial code at https://jsfiddle.net/koLvg1p4/ we start off by moving createCoverClickHandler and addPlayer to the onYouTubeIframeAPIReady function.

Part 2: Remove the add public method

The browser console gives us the following error:

Uncaught ReferenceError: addPlayer is not defined at makeManagePlayer

As there is no private method in managePlayer called addPlayer, the public method called add is not suitable anymore. We can delete the add public method from the end of the managePlayer code.

Here I use comments to indicate the deleted lines.

  return {
    // add: addPlayer
  };

Part 4: Use the extracted addPlayer function

After taking care of that, the next error message in the browser console is:

Uncaught TypeError: managePlayer.add is not a function at onYouTubeIframeAPIReady

With that one, we need to rename managePlayer.add to be addPlayer instead.

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

Part 5: Make show a public method

The next error message occurs when trying to play one of the videos:

Uncaught ReferenceError: show is not defined at HTMLButtonElement.coverClickHandler

The show function is inside of managePlayer, and we need to provide access to it. A public method at the end of the managePlayer code is how we provide that access.

  return {
    show
  };

Part 6: Use the show public method

We can now update the createCoverClickHandler function to use that public method:

      const wrapper = cover.nextElementSibling;
      // show(wrapper);
      managePlayer.show(wrapper);

Part 7: Make createPlayer a public method

The next error message is:

Uncaught ReferenceError: createPlayer is not defined at HTMLButtonElement.coverClickHandler 

We can deal with that in the same way as with the show function, by providing public access to the createPlayer function.

  return {
    createPlayer,
    show
  };

Part 8: Use the createPlayer public method

The createCoverClickHandler function can now be updated to use the createPlayer public method we added to the managePlayer code.

      // const player = createPlayer(wrapper, playerOptions);
      const player = managePlayer.createPlayer(wrapper, playerOptions);
      wrapper.player = player;

Conclusion

Even though it can look like a lot of work, each of those parts was directly informed and controlled by the error messages. Overall it’s a lot easier and more reliable to use the error messages to help give you direct knowledge about what needs to be dealt with.

And when you think about it, that is exactly how the TDD technique works, and is a part of why that technique has been so successful.

As a result I have no interest in the much harder process of there being zero errors when manipulating the structure of the code. Instead, the error messages help to give us direct information about what next needs to be done to make the code better.

2 Likes

I am up to doing this and I’m confused. https://jsfiddle.net/taeocz6b/

Now we are getting into doing too many things at once where I tend to make mistakes more easily.

After renaming managePlayer.add to be just addPlayer, we can remove the public method called add from the end of managePlayer, and also remove the addPlayer function from the managePlayer code.

In order to achieve that, we need to update the addPlayer function that’s inside of onYouTubeIframeAPIReady so that it doesn’t refer to managePlayer.createCoverClickHandler. Instead we just use createCoverClickHandler instead so that it’s the separate function that we copied into onYouTubeIframeAPIReady that is being used.

On doing that we can remove the createCoverClickHandler public method from the end of the managePlayer code, and we can now delete the createCoverClickHandler function from inside of managePlayer.

Following those instructions I did this: https://jsfiddle.net/k2pt15gv/

What did I do wrong, or, what did I forget to do because the code stopped working?

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

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

  return {
    /*add:*/
    addPlayer,
    /* createCoverClickHandler,*/
    createPlayer,
    show
  };
}());

function onYouTubeIframeAPIReady() {

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

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

  managePlayer.addPlayer(".playa", {});
  managePlayer.addPlayer(".playb", {});
  managePlayer.addPlayer(".playc", {});
  managePlayer.addPlayer(".playd", {});

I did this:

After renaming managePlayer.add to be just addPlayer, we can remove the public method called add from the end of managePlayer, and also remove the addPlayer function from the managePlayer code.

I did this:

In order to achieve that, we need to update the addPlayer function that’s inside of onYouTubeIframeAPIReady so that it doesn’t refer to managePlayer.createCoverClickHandler. Instead we just use createCoverClickHandler instead so that it’s the separate function that we copied into onYouTubeIframeAPIReady that is being used.

I did this:

On doing that we can remove the createCoverClickHandler public method from the end of the managePlayer code, and we can now delete the createCoverClickHandler function from inside of managePlayer.

And the code stopped working: https://jsfiddle.net/k2pt15gv/

addPlayer is not defined

Cannot access ‘managePlayer’ before initialization

Didn’t I do all those things in the code you asked me to?

I recommend that you start over from the start using the much easier technique that I demonstrated in fine detail in post #39 which achieves the first three steps in a much easier manner of 8 simple parts.

I am working on what you instructed me to do in post #38

Can further progress be made from attempting to follow these instructions you gave me to do?

After renaming managePlayer.add to be just addPlayer, we can remove the public method called add from the end of managePlayer, and also remove the addPlayer function from the managePlayer code.

In order to achieve that, we need to update the addPlayer function that’s inside of onYouTubeIframeAPIReady so that it doesn’t refer to managePlayer.createCoverClickHandler. Instead we just use createCoverClickHandler instead so that it’s the separate function that we copied into onYouTubeIframeAPIReady that is being used.

On doing that we can remove the createCoverClickHandler public method from the end of the managePlayer code, and we can now delete the createCoverClickHandler function from inside of managePlayer.

And this is the spot I am up to in the code where the code continues to work:

I did this:

renaming managePlayer.add to be just addPlayer, we can remove the public method called add from the end of managePlayer,

return {
    /*add: */
    addPlayer,
    createCoverClickHandler,
    createPlayer,
    show
  };
}());
  managePlayer.addPlayer(".playa", {});
  managePlayer.addPlayer(".playb", {});
  managePlayer.addPlayer(".playc", {});
  managePlayer.addPlayer(".playd", {});

Which is reflected here at this link: https://jsfiddle.net/wr6x2vuh/

Next: You instruct me to:

remove the addPlayer function from the managePlayer code.

Does that mean you are telling me to delete it from the code?

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

After I do that the code stops working: https://jsfiddle.net/p4st5xz1/

addPlayer is not defined

Cannot access ‘managePlayer’ before initialization

When the code stops working, should I try to fix it so that the code continues to work, or should I move on to what you instruct me to do next?

Continuing: You instruct me to do this:

In order to achieve that, we need to update the addPlayer function that’s inside of onYouTubeIframeAPIReady so that it doesn’t refer to managePlayer.createCoverClickHandler. Instead we just use createCoverClickHandler instead so that it’s the separate function that we copied into onYouTubeIframeAPIReady that is being used.

This:
const clickHandler = managePlayer.createCoverClickHandler(playerOptions);

Becomes:
const clickHandler = createCoverClickHandler(playerOptions);

Which is reflected in the code here: https://jsfiddle.net/uh8tzg09/

Next: You instruct me to do this:

On doing that we can remove the createCoverClickHandler public method from the end of the managePlayer code, and we can now delete the createCoverClickHandler function from inside of managePlayer.

First you are having me:

remove the createCoverClickHandler public method from the end of the managePlayer code,

I think that means you want me to delete it.

  return {
    /*createCoverClickHandler*/
  };

Next:

and we can now delete the createCoverClickHandler function from inside of managePlayer.

If I understand correctly, you are having me delete this function from managePlayer.

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

Those two things I did are reflected at this link: https://jsfiddle.net/qbg21eLo/

The code errors I am still receiving in the code are from:

After doing this:

remove the addPlayer function from the managePlayer code.

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

Where these errors never went away.

addPlayer is not defined

Cannot access ‘managePlayer’ before initialization

Can further progress be made from here after following your instructions in post #38 the best I could?

Can we work on fixing those errors, and on other things you think I may have not done the right way?

Do you see where I am making my mistakes?

I don’t understand what I am doing wrong.

I followed each thing you instructed me to do. I thought I followed each thing, I don’t see what I am doing incorrectly.

This is the part where you are going wrong.

1 Like

Thank you.

Taking a look at that again.

I think this is what you wanted me to do:

And the code is now working.
https://jsfiddle.net/f6o89qev/

Can work now begin on Step 4?

I don’t fully understand what this means I should be doing.
Can you provide further guidance on what needs to be done in Step 4?

Move parts of the functions back in to manageCover and managePlayer

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

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

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

  return {
    /*add: addPlayer,*/
    /*createCoverClickHandler,*/
    createPlayer,
    show
  };
}());

function onYouTubeIframeAPIReady() {

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

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

  /*managePlayer.*/
  addPlayer(".playa", {});
  /*managePlayer.*/
  addPlayer(".playb", {});
  /*managePlayer.*/
  addPlayer(".playc", {});
  /*managePlayer.*/
  addPlayer(".playd", {});
  /*managePlayer.*/

This was an attempt to do Step 4, but I don’t know if I did it right.

https://jsfiddle.net/djcvLh8z/

Move parts of the functions back in to manageCover and managePlayer

  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 = managePlayer.createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }*/

  return {
    /*add: addPlayer,*/
    createCoverClickHandler,
    /*createPlayer,*/
    /*show*/
  };
}());

function onYouTubeIframeAPIReady() {

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

Please remove all of the commented out code.
The commented out code is of no use or benefit now, and if you ever wanted to know what used to be there we have many older copies of the code elsewhere.

Remove the commented out code and I will proceed with step 4.

1 Like