Remove manageCover from the managePlayer code

JavaScript
39

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