Two versions of a playButton Binding Audio With a grid link structure


#758

upto is the same code as this:
https://jsfiddle.net/cubphcqd/58/


#759

There won't be multiple links.

this will be the only one that uses links.


#761

That's right, and we'll need the var link code in the play button function.


#762

I said I wanted to make 2 versions,

I didn't say I was going to use both on 1 page.


#763

That's fine. Remaining with upTo makes it more consistent with the code on other pages too.

Other benefits are that everything is accessed from the button variable, which makes the code more resilient to future change too.


#764

 function playButtonClickHandler() {
     var link = getPlayButton(button, ".links");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").style.display = "none";
        playButton.querySelector(".pause").style.display = "inline-block";
        player.play();
      } else {
        playButton.querySelector(".play").style.display = "inline-block";
        playButton.querySelector(".pause").style.display = "none";
        player.pause();
      }
    }
    
           function getPlayButton(el) {
     while (el.classList.contains("playButton") === false) {
       el = el.parentNode;
     }
     return el;
   }
    
    
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#765

Wait a second:

What's the point in doing this, if the code will be the same:
https://jsfiddle.net/cubphcqd/59/

Let's move on to version 2 then.

Getting this
https://jsfiddle.net/cubphcqd/58/

to work like this
https://jsfiddle.net/02me2fvk/40/

new added code:

 document.querySelector(".links").classList.add("hide");
   var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", linksClickHandler);
   var player = document.querySelector("audio");


       function linksClickHandler() {
            var button = document.querySelector(".playButton");
            hide(wrap.querySelector(".links"));
            hide(button.querySelector(".initial"));
            playButton.addEventListener("click", playButtonClickHandler);
            show(play);
            hide(pause);
            button.classList.add("playing");
        }
    }

#766

What is the benefit of that second code that you want to add to the first one?


#767

It doesn't start playing after you click the image.

Unless there's a better way to implement that?

Getting the play button to show after you click the image with no audio playing.

Instead of the pause button showing after you click the image..


#768

We need to slightly reorganise things to easily achieve that, by moving the if/else code up just under the var statements.

That way, we can have the if statement also check for something that the code below it changes.
We could check if ".playing" isn't on the button, or we could check if the ".initial" display image is hidden, or we could check of the ".inactive" class on the links isn't there.

Which of those three approaches do you think is most appropriate?


#769

check if ".playing" isn't on the button,


#770

Okay, first thing to do is to move the if/else block of code up until it's just below the var statements.


#771

is that right or not?


#772

Yes, what I instructed you to do is right.


#773

  function togglePlayButton(button) {
     var link = upTo(button, ".links");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");

    if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {


     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
     player.volume = 1.0;
 
       show(play);
       hide(pause);
       player.pause();
     }

#774

Good one. You are now going to create a new function just above the togglePlayButton one, called isPlaying(button)

That function will just return true/false, and from the if statement, we will use that function to check if it's okay to play.

This is a good time though to revisit the naming of the "playing" class. The purpose of it is to set how the play button looks after the initial image has been clicked.

The "playing" class is still there when it is playing and when it's paused, so another name like "active" is more appropriate, and certainly less confusing when we're working with the code.

What do you think? Shall we rename "playing" to "active", or to something else that you think is more appropriate?


#775

   function isPlaying(button) {
    ;
   }

#776

We need to first do something about that last piece, because it will change how the function is named.


#777

     button.classList.add("playing");

So active, or no?

Should they be different names?


#778

Active is the standard nomenclature. There should only be one place in each of the JavaScript and CSS code that needs to have playing renamed to active.