Changes to cope with separating HTML players and covers

Did you want me to change both of these return statements to:

return function addPlayerCallback?

or only one of these?

  function createCallback(wrapper, playerOptions) {
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

I only changed it on this one: https://jsfiddle.net/c0pj682k/

  function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }

we should remove parent from the playerAdder function and replace it with wrapper instead.

This stays as this:

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

The line that gets the wrapper should then be moved out of playerAdder and into the addPlayer function that calls the playerAdder function.

const wrapper = wrapper.querySelector(playerAdder);

I am stuck on this.

How is that line added to this function?

I added it to the 2nd line unless if it should be on the 1st line there.


  function addPlayer(coverSelector, playerAdder, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const wrapper = wrapper.querySelector(playerAdder);
    const callback = managePlayer.adder(parent, playerOptions);
    manageCover.addCoverHandler(coverSelector, playerAdder, callback);
  }

No, don’t do anything with the code on which you modified and separated the HTML code. It’s not possible on there to know when you have broken things.

Instead, updates are to be made to the working code. I’ll come up with something tomorrow.

1 Like

The code at https://jsfiddle.net/kcr3n01e/ seems to be the most recent code that works, before the HTML was reorganized to separate the players and the covers. Do you have a different set of recent working code that you prefer to use instead?

1 Like

Yes, this code is fine: https://jsfiddle.net/kcr3n01e/

Am I supposed to wait for further instruction?

Yes you are, for instructions change depending on the code being used.

On that code at https://jsfiddle.net/kcr3n01e/, the minor cleaning up starts by noticing that createCallback and playerAdder both return the same identical callback function. In the playerAdder function instead of returning the callback function, we should return the createCallback function, invoking it of course with the required function arguments. This is a good time to also rename the callback function to be addPlayerCallback instead.

In the returned object at the end of the managePlayer code, there’s no need for createCallback to be there because nothing outside of managePlayer calls createCallback, so remove createCallback from that object too.

The querySelector line shouldn’t be in the playerAdder function. We can move that out of there and in to the addPlayer function, which is found in coverUIPlayerFacade function. After that move, update the managePlayer.adder function call to replace parent with wrapper. We get an error that wrapper is not defined in the playerAdder function, so rename parent to be wrapper instead.

Everything goes back to working, and we now have code in the addPlayer function that uses a cover to get the wrapper. We want manageUI to do that job instead, because we have plans for manageUI to scan the code for all covers and players, letting us easily go from one to another.

Once you’ve achieved the above, we’ll move on putting some of the code into manageUI, after which all of our work should then be in manageUI where we’ll build up what’s needed for it to scan for the players and covers, letting us then use them to give the correct one that’s wanted.

1 Like

In the playerAdder function instead of returning the callback function, we should return the createCallback function, invoking it of course with the required function arguments. This is a good time to also rename the callback function to be addPlayerCallback instead.

I did this: https://jsfiddle.net/ch2zf53o/

 function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function addPlayerCallback(createCallback) {
      initPlayer(wrapper, playerOptions);
    };
  }

In the returned object at the end of the managePlayer code, there’s no need for createCallback to be there because nothing outside of managePlayer calls createCallback, so remove createCallback from that object too.

I did that here: https://jsfiddle.net/ch2zf53o/1/

return {
    adder: playerAdder,
    removePlayerHandler
  };
}());

The querySelector line shouldn’t be in the playerAdder function. We can move that out of there and in to the addPlayer function, which is found in coverUIPlayerFacade function. After that move, update the managePlayer.adder function call to replace parent with wrapper. We get an error that wrapper is not defined in the playerAdder function, so rename parent to be wrapper instead.

I did that here: https://jsfiddle.net/jgptsuhx/

  function playerAdder(wrapper, playerOptions) {
    return function addPlayerCallback(createCallback) {
      initPlayer(wrapper, playerOptions);
    };
  }
 function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const wrapper = parent.querySelector(".wrap");
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

I think I did everything you asked me to do in post #12

Last working code: https://jsfiddle.net/jgptsuhx/

That is not correct. There is one function called playerAdder, and just above it is another function called createCallback. What is required is to remove from playerAdder all that it is returning, and replace that with just returning a call to createCallback.

I have completely ignored your other posts. There is no benefit at all in dealing with those until this first thing is properly dealt with.

I was confused about that, but because the code continued to stay working, I thought I was doing it right.

I did that: callback gets changed to addPlayerCallback

Returning a call to createCallback

Is this right?

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

Code link after the above is done: https://jsfiddle.net/uohsqb87/

all that it is returning

Refers to what inside here?

 function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }

I am supposed to place this somewhere?

return createCallback();

remove from playerAdder all that it is returning

I don’t understand what that means in relation to this function.

What is being removed and replaced with return createCallback(); ?

function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }

Oh dear, it seems that you just don’t understand. There is a different way to deal with the duplication of the callback function, and that is from the initial code at https://jsfiddle.net/kcr3n01e/ to just delete the whole createCallback function.

1 Like

Thank you for catching this, this function was supposed to be removed from prior instructions, and I just noticed that now.

This function gets deleted:
It should have been removed a long time ago.

function createCallback(wrapper, playerOptions) {
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

Everything else that was done: Can progress be made from here?

https://jsfiddle.net/5ymse1u6/

 function playerAdder(wrapper, playerOptions) {
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }
 return {
    adder: playerAdder,
    removePlayerHandler
  };
}());
 function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const wrapper = parent.querySelector(".wrap");
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

The next part is where we give a cover to the manageUI code and get a player in return.

Before we can do that, we first need a cover. The addPlayer code uses coverSelector to get a cover, and then from that it gets the parentElement.

We need to split that into two different lines. One line defines a cover variable where querySelector and coverSelector are used to get the cover, and the other line defines a parent variable that uses the cover variable and parentElement.

When you have the cover variable being reliably defined, we can then move on to doing the manageUI stuff.

1 Like

I think I did this right: https://jsfiddle.net/p40sefr8/

Can progress be made from here?

function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }