Changes to cope with separating HTML players and covers

JavaScript
1

This is the last working code: https://jsfiddle.net/kcr3n01e/

To be able to have the code work with the play buttons in a separate container, is there a proper way to do that?

An example of that would be this: https://jsfiddle.net/417vpLae/

The only thing I touched in the code was the html, placing the buttons, inside their own container.

After placing the play buttons inside a separate container, as shown below.

I received this error.

Uncaught TypeError: Cannot read properties of null (reading ‘classList’) at line 234 col 8

Which in the javascript points to this line: el.classList.remove("hide");

Which is inside here:

const managePlayer = (function makeManagePlayer() {

  function show(el) {
    el.classList.remove("hide");
  }

To fix that error, I think parent inside this function would need to be changed to document.

I could be wrong though.

I do know that, after that is done, the error goes away.

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

html

<div class="outer">
<div class="container play1 with-curtain">
   <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="CHahce95B1g"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <g id="exit">
               <title>exit</title>
               <path class="exitHover" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" fill="red" />
               <circle cx="0" cy="0" r="113" />
               <path class="exitHover" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
            </g>
         </svg>
      </button>
   </div>
</div>
<div class="container play2 with-curtain">
   <div class="inner-container curtain curtain2">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play3 with-curtain">
   <div class="inner-container curtain curtain3">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play4 with-curtain">
   <div class="inner-container curtain curtain4">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play5 with-curtain">
   <div class="inner-container curtain curtain5">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play6 with-curtain">
   <div class="inner-container curtain curtain6">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play7 with-curtain">
   <div class="inner-container curtain curtain7">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play8 with-curtain">
   <div class="inner-container curtain curtain8">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
<div class="container play9 with-curtain">
   <div class="inner-container curtain curtain9">
      <div class="ratio-keeper">
         <div class="wrap">
            <div class="video video-frame" data-id="-Xgi_way56U"></div>
         </div>
         <div class="sliding-panels">
            <div class="panel-left"></div>
            <div class="panel-right"></div>
         </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
         <svg width="100%" height="100%" viewBox="-144 -144 288 288">
            <use href="#exit" />
         </svg>
      </button>
   </div>
</div>
</div>

Here would be the playButtonContainer that holds all the buttons.

In here I am using data-destination=" to reach the above html.

Though, data-destination="" may not even be doing anything in the code.

or, maybe it is not needed, I am not sure.

<div class="playButtonContainer">
   <button data-destination=".play1" 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>
   <button data-destination=".play2" class="playb thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play3" class="playc thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play4" class="playd thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play5" class="playe thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play6" class="playf thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play7" class="playg thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play8" class="playh thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button data-destination=".play9" class="playi thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
</div>
2

I just realized, .outer was not in the above updated jsfiddle with the changed html.

It is needed, or it is not, I am not sure.

I added it in here: https://jsfiddle.net/417vpLae/

It may need to be there to hold everything in place.

And because it is referenced inside the javascript.

resetButtons(".outer");

<div class="outer">
</div>

<div class="playButtonContainer">
</div>

With the play buttons in their own container, this might be able to be removed.

I also could be wrong about this, and that this is still needed.

Yes it is, I’m pretty sure about that now.

 function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

resetButtons(".outer");

But .outer would need to stay in the html and css to hold the structure together.

Also, this may need to be added to the css to hold the video/curtain in place.
But I am not sure yet.
or different properties would need to be placed in there.

.outer {
  display: flex;
  min-height: 100%;
}
3

Please left me know when you have finished changing things around, and let me know which set of code I should take a look at.

1 Like
4

This is the code where the play buttons are in their own container: https://jsfiddle.net/d941n62h/

I don’t use jsitor to test code that often but after placing the above jsfiddle in there.
Then I turned on auto play. autoplay: 1,

Then after changing parent to document in here.

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

I was able to get the video to play after clicking a button.

But that was all I was able to do.

After clicking a button, a connection is made, the video is playing, but there is no video showing on the screen.

I am not sure what that is able to tell you other than, what may be working partially, and what isn’t working.

Also, is data-destination="" something that will be needed, or can that attribute be removed?

getAttribute("data-destination");

415×523 71 KB

<div class="outer">
</div>

<div class="playButtonContainer">
//Holds the play buttons
</div>

<div class="outer">
  <div class="container play1 with-curtain">
    <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <path class="exitHover" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" fill="red" />
            <circle cx="0" cy="0" r="113" />
            <path class="exitHover" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
          </g>
        </svg>
      </button>
    </div>
  </div>
  <div class="container play2 with-curtain">
    <div class="inner-container curtain curtain2">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play3 with-curtain">
    <div class="inner-container curtain curtain3">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play4 with-curtain">
    <div class="inner-container curtain curtain4">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play5 with-curtain">
    <div class="inner-container curtain curtain5">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play6 with-curtain">
    <div class="inner-container curtain curtain6">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play7 with-curtain">
    <div class="inner-container curtain curtain7">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play8 with-curtain">
    <div class="inner-container curtain curtain8">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play9 with-curtain">
    <div class="inner-container curtain curtain9">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
</div>

playButtonContainer

<div class="playButtonContainer">
  <button data-destination=".play1" 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>
  <button data-destination=".play2" class="playb thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play3" class="playc thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play4" class="playd thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play5" class="playe thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play6" class="playf thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play7" class="playg thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play8" class="playh thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button data-destination=".play9" class="playi thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
</div>
5

I think the idea would be to eventually remove the outer class, but not yet, and wait until progress has been made here first, which is the proper thing to do.

<div class="outer"></div>

My thinking would be to use .container as the class to position the curtain without relying on .outer.

.container {
  position: absolute;
}

But I can’t guess without making progress, so that will have to wait.

Also, I would need to be able to see the curtain, and currently I am only able to see the buttons.

6

Well let’s see what the errors are when using the code at https://jsfiddle.net/d941n62h/

Uncaught TypeError: Cannot read properties of null (reading 'classList')

That’s happening in the managePlayer’s show function.

  function show(el) {
    el.classList.remove("hide");
  }

When the show function is given a null object, there’s nothing that can be done about that. Let’s look one level higher, at what calls the show function. I do that by setting a breakpoint on the first line of code in the show function, restart the code, and trigger the same problem to occur by clicking on a player.

The call stack shows me that the functions are:

  • show
  • initPlayer
  • callback

That’s an amazingly bland and useless name, callback. Let’s rename it to be more informative about things.

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

That’s better. Now on rerunning the page and triggering the breakpoint, the call stack shows:

  • show
  • initPlayer
  • initPlayerCallback

show has a function parameter of null
initPlayer has a wrapper of null
initPlayerCallback has a wrapper that is still null

It’s time for a new breakpoint. The old breakpoint at the show function can be removed, and a new breakpoint can be added to the playerAdder function. Running the code and clicking on a play button to trigger the same problem, brings us to the following line of code:

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

parent is a reference to playButtonContainer, and wrapper is null. We’ve found the culprit.

Clearly the wrap selector can’t be found because you’ve completely separated the players from the covers.

The intention of playerAdder was for the parent variable to be completely unique for each player, allowing us to get from a wrapper to the player. That can’t be done now because of the restructure. A different technique needs to be used.

To help prepare us for that new technique, we should remove parent from the playerAdder function and replace it with wrapper instead. The line that gets the wrapper should then be moved out of playerAdder and into the addPlayer function that calls the playerAdder function.

We have now reduced the complexity of the playerAdder function, and moved the crux of the problem to just one place here in the addPlayer function.

It is now possible to work on a solution to this problem. That solution is to have manageUI when it’s initialized, scan the page for all players and for all covers, storing them in an array object, for example:

[
  {player: ..., cover: ...}
  {player: ..., cover: ...}
  {player: ..., cover: ...}
]

Even though our code does work with the wrapper, it makes better sense for manageUI to keep track of both the player and the cover. It’s easy enough to then get the wrapper from the player instead.

That way we can give manageUI a player and get the cover with something like manageUI.getCover(player)
And, we can give manageUI a cover and get the player with manageUI.getPlayer(cover)

Fortunately though all of the changes can be done on working code, which helps to ensure that things aren’t broken. When the changes are all in place, the code can then be used on the HTML with the separated players and covers.

This is going to be a long and difficult part of the project for you to do. How ready are you, to still be potentially working away at this solution until potentially next year?

2 Likes
7

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);
    };
  }
8

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);
  }
9

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
10

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
11

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

Am I supposed to wait for further instruction?

12

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
13

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);
    };
  }
14

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
  };
}());
16

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);
  }
17

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

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

18

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.

20

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

23

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();
    };
24

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