Getting audio players to play their respective streams out of their element


#1287

Do I add something like this?

     function playButtonClickHandler(button) {
        var link = upTo(button, ".linkse");
        link.classList.remove("inactive");
        
        button.classList.add("activated");
    }

#1288

Don't do that. I'm working on a post that takes us through how to do it properly. I'll post what I'm up to, and then carry on from there.


#1289

Would go with this?

document.querySelector(".linkse").classList.add("inactive");
  var playButton = document.querySelector(".playButtone");
  playButton.addEventListener("click", playButtonClickHandler);

#1290

To remove the initial overlay code, we can do what the hideInitialOverlay() function does, and comment it out from the initialOverlayClickHandler() function.

Just commenting out the hideInitialOverlay() function results in the test failing, which is bad, so we need to do what that hideInitialOverlay() function does to return the test back to passing.

The first thing that it does is to remove inactive from the links. We can instead remove the code that adds inactive to the links.

    document.querySelector(".linkse").classList.add("inactive");

But the test still fails. The next thing is to hide the initial element. We can do that by adding hidee to the initial element in the HTML code.

And the test passes, but the play button isn't visible. We want the code to start by showing the play button, and currently all the tests we have are green and passing, so we need another test that tells us that things are failing.

  it("Starts by showing the play button", function () {
    var playImage = button.querySelector(".playe");
    expect(playImage.classList.contains("hidee")).toBe(false);
  });

But, that test passes, so that test doesn't help us at all. http://jsfiddle.net/uf70rj0g/211/

Instead, we need to first understand why the play button isn't showing, before we can write a test for what we expect when it is showing.


#1291

here look:
http://jsfiddle.net/uf70rj0g/219/

the button is broken


#1292

Currently we can just add activated to the button and the play button will show, but I want to remove the need for that activated, especially since we haven't even interacted with the button yet.

So instead, activated adds a fill to the play button, and it's that fill that we can look for in the test as well.

    expect(playImage.classList.contains("hidee")).toBe(false);
    expect(window.getComputedStyle(playImage).fill).toBe("rgb(170, 255, 0)");

Now those are better tests, where the rbg color is what the browser has when the play button is given a color of #aaff00

http://jsfiddle.net/uf70rj0g/220/

We can now work on making that test pass, which can temporarily be done by adding the activated class name to the play button.

And the tests all pass. http://jsfiddle.net/uf70rj0g/221/

We still have two refactoring tasks to do though, one is to remove more of the intialOverlay code, and the other is to remove the need for that activated class on the play button.


#1293

The hideInitialOverlayButton() function can now be removed, and the tests all pass and the button still works.
The commented line in the initialOverlayClickHandler() function can be removed now too.

We can now change the addEventListener line and replace initialOverlayClickHandler with playButtonClickHandler instead, but that causes the code to fail. http://jsfiddle.net/uf70rj0g/222/

Why does it fail? Because the code was clicking on the button. Remove that click code, and the tests all pass, allowing us to remove more of the initialOverlay code. http://jsfiddle.net/uf70rj0g/223/


#1294

The initialOverlayClickHandler() function can be completely removed now, and the commented-out line that added inactive can be removed too. There's no more scripting code that related to the initial overlay, so the "activated" part can be worked on now.

Remove activated from the CSS code, and we continue to have working code:

/* .playButtone.activated { */
.playButtone {

The activated classname can now be removed from the HTML playbutton,

<!-- <div class="playButtone activated" data-audio="http://hi5.1980s.fm/;"> -->
<div class="playButtone" data-audio="http://hi5.1980s.fm/;">

and the two refactoring tasks that we were doing, of removing initial overlay, and the activated class name, are all now complete.

http://jsfiddle.net/uf70rj0g/228/


#1295

What if I used this instead?
http://jsfiddle.net/uf70rj0g/233/

   function getButtonContainer(el) {
        while (el.classList.contains("playButtone") === false) {
            el = el.parentNode;
        }
        return el;
    }



        function playButtonClickHandler(evt) {
        var button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }

Instead of this:

   function upTo(el, selector) {
        while (el.matches(selector) === false) {
            el = el.parentNode;
        }
        return el;
    }



    function playButtonClickHandler(evt) {
        var button = upTo(evt.target, ".playButtone");
        togglePlayButton(button);
    }

#1296

The function name is more descriptive, so it shouldn't hurt.


#1297

#1229

How would I get initial to work at the top of the code?
https://jsfiddle.net/20998tdo/78/

It's not opening when you click on it.

Web console is not telling me anything.


#1298

First your post was just:

And then it changed to be:

And then it changed to be:

If you edit your code, you need to be aware that nobody will be notified of the changes that you make, unless they are directly watching the post.

Normally when you make a post there are notifications that go out to everybody that's watching the thread, and emails get sent out too. When you edit your post though to add significant information, you need to be aware that your changes might not be seen by anybody.


#1299

I should have written a new reply instead?


#1300

You shouldn't be so quick to hit the reply button.


#1301

ok, I will remember that.


#1302

I should be back in about 5 hours to help further with things.


#1303

ok. thank you.


#1304

It would take some kind of CSS change to hide the initial image. I recommend that you get the advice of CSS people to find out the CSS changes to get that initial one to work, and whether it means adding another classname to it, or some other technique.


#1305

Could I turn initiale into .playButtone?
https://jsfiddle.net/tavcvcu6/46/


#1306

From this:
https://jsfiddle.net/tavcvcu6/44/

  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">

    <div class="initiale">
      <p>Links</p>
    </div>

to this:
https://jsfiddle.net/tavcvcu6/53/

  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">
      <p>Links</p>



.playButtone {
  height: 168px;
  background: url("https://i.imgur.com/BBYxKcf.jpg");
  border: 3px solid #0059dd;
  cursor: pointer;
}

.playButtone p {
  font-family: Tahoma;
  font-weight: 900;
  font-size: 30px;
  color: #0059dd;
  line-height: 40px;
  text-align: center;
}

.playButtone::before,
.playButtone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtone::after {
  left: 177px;
}

.playButtone.activated {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: 3px solid #0059dd;
  fill: #aaff00;
}