Multiple audio players on blogger

JavaScript
565

isPlaying()

Now what?

I put this back in:

  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
  }

function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    playButtonClickHandler(evt);
  }
566

It can wait until you have one piece of JavaScript code that controls a variety of different buttons.
That way, the code can check to see if the button has an initial image, and handle that appropriately.

567 
Unused 'isPaused'.
    function isPaused(button) {
568

Hover your mouse over the initial button. Are you sure that you want isPlaying to cause that bad behaviour?

It behaves properly when using !isPaused instead.

569

As soon as you put back in that initialOverlayClickHandler() function, the playButton() function will no longer have any reason why it can’t use the isPlaying() function instead.

570

That initialOverlayClickHandler() function is not currently assigned to the click event, and the mouseover/mouseout event handlers outside of the initialOverlayClickHandler() function need to be removed.

The initialOverlayClickHandler() function also requires the use of a hideInitialOverlay() function too.

571

The initialOverlayClickHandler() function also requires the use of a hideInitialOverlay() function too.

572

So first, put in the hideInitialOverlay() function, then assign initialOverlayClickHandler to the click handler, and finally clean up by moving those mouseover/mouseout events inside of the initialOverlayClickHandler() function.

573

hideInitialOverlay(button);

574 
  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    playButtonClickHandler(evt);
  }
575

Yes, that function doesn’t currently exist. You’ll find it from the same place that you got the initialOverlayClickHandler() function.

576 
  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
  }
577

The playButtonClickHandler should not be assigning the mouseover/mouseout events every time that you click.

It was the only place for them at the time, but a much better place now exists for them. Move them to the initialOverlayClickHandler() function instead.

578 
  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }
579

And lastly, assign the initialOverlayClickHandler to the click event:

    // button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("click", initialOverlayClickHandler);
581

Like that?

    button.removeEventListener("click", playButtonClickHandler);
    button.addEventListener("click", initialOverlayClickHandler);
582

Putting showPlayButton in the hideInitialOverlay() function is an even better solution.

  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
    showPlayButton(button);
}
583

Why is it better?

584

The initialOverlayClickHandler() function needs to remove initialOverlayClickHandler and add playButtonClickHandler - not the other way around as you seem to show there.

585

Like this?

   button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);