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

I think I would be removing this whole piece:

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

When you say ā€œYouā€™re showing meā€ - it feels like youā€™re grabbing my arm preventing me from getting away, and forcing me to do unpleasant things with you.

Thatā€™s not appreciated, and has me not wanting to do things with you.

1 Like

This was the furthest I was able to get.

I meant about the testing the code part, because thatā€™s something I donā€™t know how to do. Donā€™t take it the wrong way.

Once I know how to do this, Iā€™ll be able to do others on my own.

Iā€™ve never used that method before to make changes to a code.

What does that mean?

How do I test to find out why the playbutton isnā€™t showing?

I would need to change something in here:

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

initialOverlayClickHandler

to something else I think.

I would change it to this, right?

     var playButton = document.querySelector(".playButtone");
    playButton.addEventListener("click", playButtonClickHandler);

A brief start can be made with the test code, using the following at the end of what you currently have there:

var button = document.querySelector(".playButtone");
var initial = button.querySelector(".initiale");
if (initial && initial.classList.contains(".hidee") === false) {
  console.error("Initial is still showing and must be removed");
}

But there are more proper ways using test code called Jasmine, that we can add support for later on too.

When using Jasmine, that above code becomes more structured, as:

describe("Button E tests", function () {
  var button = document.querySelector(".playButtone");
  var initial = button.querySelector(".initiale");

  it("Doesn't show the initial image", function () {
    expect(initial.classList.contains(".hidee")).toBe(false);
  });
});

and a pretty dialog is shown for you, with the tests, for example:

I added it:

I donā€™t see dialog box.

Did I do something wrong?

Am I supposed to be looking inside web console?

I donā€™t understand how to use these:

var button = document.querySelector(".playButtone");
var initial = button.querySelector(".initiale");
if (initial && initial.classList.contains(".hidee") === false) {
  console.error("Initial is still showing and must be removed");
}

describe("Button E tests", function () {
  var button = document.querySelector(".playButtone");
  var initial = button.querySelector(".initiale");

  it("Doesn't show the initial image", function () {
    expect(initial.classList.contains(".hidee")).toBe(false);
  });
});

Hereā€™s an update with the Jasmine test code included. That test now reports each time that we run the code, and will continue to check that things are as expected each time the code is run,

Itā€™s always harder to add tests in afterwards, partly because thereā€™s less incentive to because the code is already working.

Because of that, itā€™s a better work habit to start with a test first, and then write test to make it pass. Thatā€™s similar to writing out a work order for a contractor, and after the contractor has done the work, his work can be checked against the work order. If he hasnā€™t properly completed the contract, he gets sent back to do it again more properly, until all of the tests pass.

We can now go ahead with making changes to the code. Normally we would have other tests to ensure that the button still plays properly too, but those things can be added when changes occur that require other tests to be added.

Iā€™ll take a look at the code now and figure out what is the easiest way to make the test pass.

It helps if our test is looking for the right thing.

Change the test line to this and we can make good further progress.

expect(initial.classList.contains("hidee")).toBe(true);

Before it had `an incorrect fullstop in there as well.

We can just add playButton.click() to the end of the code, below the addEventListener code, and the test passes.

    playButton.addEventListener("click", initialOverlayClickHandler);
    playButton.click();

Now that the test passes, we can make further changes to improve the code, which is called refactoring the code while ensuring that the tests continue to pass.

In this case Iā€™ll be making changes to remove the initialOverlay parts of the code, while making sure that the test continues to pass.

Look at this:

.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;
}

Yes, that looks like it is CSS code.

What would I need to do to get that css working in the code?

Whatā€™s wrong with it?

aaff00 is green, not black

cursor: pointer; is not working.

This was deleted from the code:

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

from this:

    function initialOverlayClickHandler(evt) {
        var button = upTo(evt.target, ".playButtone");
        hideInitialOverlay(button);
        button.removeEventListener("click", initialOverlayClickHandler);
        button.addEventListener("click", playButtonClickHandler);
    }
    document.querySelector(".linkse").classList.add("inactive");
    var playButton = document.querySelector(".playButtone");
    playButton.addEventListener("click", initialOverlayClickHandler);
    playButton.click();
}());

to this:


  var playButton = document.querySelector(".playButtone");
  playButton.addEventListener("click", playButtonClickHandler);