Changes to cope with separating HTML players and covers

Ahh yes, that one should be const and not function, I’ll update my post.

1 Like

I will use the one you would use for this: https://jsfiddle.net/6ahg123t/

// inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

Continuing to make progress, what are the next steps?

What is the next thing or things that need to be done?

The next thing is to make those same changes on the page where the covers and werewords are separated. That is to rename the class to cover that was done here, and the javascript changes too.

I’m confused.

I don’t understand what you are saying.

What class is being renamed to cover?

thePlay was changed to cover throughout the entire code.

What else gets changed to cover?

I am not understanding what I am supposed to do here.

You want me to separate the buttons from the html now?

Maybe I am not up to that yet.

<div class="playButtonContainer">
<button class="playa cover" type="button" aria-label="Open"></button>
<button class="playb cover" type="button" aria-label="Open"></button>
<button class="playc cover" type="button" aria-label="Open"></button>
<button class="playd cover" type="button" aria-label="Open"></button>
<button class="playe cover" type="button" aria-label="Open"></button>
<button class="playf cover" type="button" aria-label="Open"></button>
<button class="playg cover" type="button" aria-label="Open"></button>
<button class="playh cover" type="button" aria-label="Open"></button>
<button class="playi cover" type="button" aria-label="Open"></button>
</div>

I am not undestanding this:

That is to rename the class to cover that was done here

Reading that, I think this:

class="playa cover" becomes cover="playa cover" in the html which does not make sense.

I’m lost.

I could have explained this further but thought that you were up to speed.

We are all finished with the code at the https://jsfiddle.net/6ahg123t/ page.
That is the code where covers and wrappers are together.
No more changes happen to that code.

Back in post #1 you were asking:

That is the code where covers and wrappers are separated.

That’s what we’ve been doing all of this work for.
We now have a way to do that.

The objective now is to take all of the changes that we’ve developed where the covers and wrappers are together, and apply those changes to the code where covers and wrappers are separated.

1 Like

I should stop here until I am ready for this.

I may need to get the css / html ready first before I can move on, I don’t know though.

We can see if I am able to get it to work, even if it is partially, then I can try to fix it.

The objective now is to take all of the changes that we’ve developed where the covers and wrappers are together, and apply those changes to the code where covers and wrappers are separated.

I did that here:

My attempt: https://jsfiddle.net/0a5n6g92/

I did this:

There are no errors in console log which is good.

Assuming this is what you wanted me to do?

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}
<div class="playButtonContainer">
<button class="playa cover" type="button" aria-label="Open"></button>
<button class="playb cover" type="button" aria-label="Open"></button>
<button class="playc cover" type="button" aria-label="Open"></button>
<button class="playd cover" type="button" aria-label="Open"></button>
<button class="playe cover" type="button" aria-label="Open"></button>
<button class="playf cover" type="button" aria-label="Open"></button>
<button class="playg cover" type="button" aria-label="Open"></button>
<button class="playh cover" type="button" aria-label="Open"></button>
<button class="playi cover" type="button" aria-label="Open"></button>
</div>

What I’m speaking about is renaming the https://jsfiddle.net/kcr3n01e/ classnames from thePlay to cover, and doing the same JavaScript that we’ve done in this thread. It’s nothing more complex than that.

This code has thePlay changed to cover in the css, html, javascript: using the old javascript: https://jsfiddle.net/p7bLnu3x/

Also, I’m not using svg’s, I’m using css for the buttons instead.

Maybe there was confusion there, or maybe that is not something that matters.

This
<button class="playa cover" type="button" aria-label="Open"></button>

Instead of:

This which was not a good way of doing it.

		<button class="playa thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
          <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>
    </button>

And this code is the new javascript we just did: https://jsfiddle.net/w30d4zr2/

// inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

There is more to the JavaScript that we did.

Fundamentally there is the players object which keeps track of the covers and players.
Then there is the also findPlayers function, which is invoked from the manageUI init function.

With those in place, the getWrapper function will work.

I still don’t understand, or can’t grasp what you want me to do.

This code has thePlay changed to cover in the css, html, javascript: using the old javascript: https://jsfiddle.net/p7bLnu3x/

And this code is the new javascript we just did that has thePlay changed to cover in the css, html, javascript: https://jsfiddle.net/w30d4zr2/

These are the changes we made updating the javascript.

const manageUI = (function makeManageUI() {
  const body = document.body;

  const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  // inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }
const managePlayer = (function makeManagePlayer() {

  function playerAdder(wrapper, playerOptions) {
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }
const players = (function coverUIPlayerFacade() {

  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

There are two sets of code:

We have in this thread been working on the new code, to prepare what we need for the old code.

What next needs to be done is to take all of the changes that we did to the new code, and do the same changes to the old code.

What if I take the javascript out of the new code: https://jsfiddle.net/w30d4zr2/

and place it into the old code?: https://jsfiddle.net/p7bLnu3x/

I did that here: https://jsfiddle.net/0sL4yx52/


What next needs to be done is to take all of the changes that we did to the new code, and do the same changes to the old code.

But, wasn’t the old code https://jsfiddle.net/p7bLnu3x/

the code we made changes to and so now it has the new javascript in it?

This code here: https://jsfiddle.net/w30d4zr2/

Why am I confused still?

Do you see where I am not understanding?


The html and the css of the old code is exactly the same as the new code.

The only difference is the javascript.

You want me to remove the javascript from the new code and place it into the old code where the html and css is exactly the same as the new code?

What is wanted is to take the newly developed code such (but not exclusive to) the players object, the getPlayers function, the getWrappers function, and to use that to get your separated covers and wrappers working.

This may help me to better understand, and lead to progress.

After the newly developed code is added to the old code,

Will the old code look identical to the newly developed code?

If no, how will the 2 codes, look different from each other?

What will be different about each of them?

I am still thinking you want me to create an identical code where both codes look exactly the same.

I still don’t understand any of what you told me to do.

I do know that this is the new code that was developed:

const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  // inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

  function playerAdder(wrapper, playerOptions) {
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

Did I do what you asked me to do here?

https://jsfiddle.net/ank15fet/

If no, then I still don’t understand.

Are you asking me to separate the buttons from the html?

You never specifically said to do this, so maybe no.

But, this is how the code should be able to work when it is working.

Which is the buttons separated from the html.

<div class="playButtonContainer">
<button class="playa cover" type="button" aria-label="Open"></button>
<button class="playb cover" type="button" aria-label="Open"></button>
<button class="playc cover" type="button" aria-label="Open"></button>
<button class="playd cover" type="button" aria-label="Open"></button>
<button class="playe cover" type="button" aria-label="Open"></button>
<button class="playf cover" type="button" aria-label="Open"></button>
<button class="playg cover" type="button" aria-label="Open"></button>
<button class="playh cover" type="button" aria-label="Open"></button>
<button class="playi cover" type="button" aria-label="Open"></button>
</div>

I’m lost still.

Are there instructions that I can follow to do exactly what you asked me to do?

For whatever reason I am not understanding what you are having me do.

I hate when I am not able to understand what may seem simple to others, not simple for me.

There are two different types of HTML code involved here. One where the parts of the players are combined together, and one where the parts of the players are separated. For shorthand we can call them combined players and separated players.

You had trouble getting the separated players working, because the scripting code didn’t know how to find them.

The combined players page relied on strict parent-child relationships to navigate from one part to the other. That was fragile, and guaranteed to break as soon as you changed anything.

The separated players need a different technique for them to find the right parts, where an array of players and their parts is made, so that we can get what we need. That different technique works both for combined players and for separated players.

We successfully developed that solution on the combined players.
The next stage of things is to repeat that work on the separated players page.

Has that been an accurate assessment of where we are?

1 Like

At this code here: https://jsfiddle.net/kxhyLdr8/

The play buttons are seperated from the html, with the newly developed javascript added.

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}
<div class="playButtonContainer">
<button class="playa cover" type="button" aria-label="Open"></button>
<button class="playb cover" type="button" aria-label="Open"></button>
<button class="playc cover" type="button" aria-label="Open"></button>
<button class="playd cover" type="button" aria-label="Open"></button>
<button class="playe cover" type="button" aria-label="Open"></button>
<button class="playf cover" type="button" aria-label="Open"></button>
<button class="playg cover" type="button" aria-label="Open"></button>
<button class="playh cover" type="button" aria-label="Open"></button>
<button class="playi cover" type="button" aria-label="Open"></button>
</div>

Good one. That part of the code looks to be working well.
The next challenge is in figuring out what else is not working.

The error messages from the browser console don’t seem to be all that useful right now.

Things break, and having effective ways to easily figure out what broke is important.
You seem to to resist all idea involving code tests, so more difficult techniques much be used instead.

1 Like

5 posts were split to a new topic: Adding tests to video player code

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.