Remove manageCover from the managePlayer code

In regard to managePlayer inappropriately calling manageCover, here is the code in question:

From the managePlayer module in

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

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

A few problems are noticed there.

  • The createCoverClickHandler function is in managePlayer when it should be in manageCover
  • The createCoverClickHandler function does things both for the cover and the player. Those need to be separated.
  • The managePlayer code has intimate knowledge of what the cover needs to do. That knowledge needs to be in the manageCover code instead.

In terms of big picture, we are going to move those functions out of managePlayer and in to the onYouTubeIframeAPIReady code. That way we can then reorganise the code and put things away where they belong in terms of the cover and the player.

Before moving out the code though, we need to ensure that functions that are called from the code, are available no matter where we move the code to. That means temporarily making public functions such as show and createPlayer.

Step 1: Change needed private functions to be public
Step 2: Move 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

And after all of that, we re-evaluate what we’ve done to figure out if any good improvements can be made from there.

I will explain what we do for Step 1 in my next post.

1 Like