Remove manageCover from the managePlayer code

  • The createCoverClickHandler function is in managePlayer when it should be in manageCover
  • The createCoverClickHandler function does things both for the cover and the player. Those need to be separated.

Shouldn’t I be doing this instead then, or no?

Adding it to manageCover?

Maybe I am not up to that yet.

const manageCover = (function makeManageCover() {

    function createCoverClickHandler(playerOptions) {
        return function coverClickHandler(evt) {
            const cover = evt.currentTarget;
            const wrapper = cover.nextElementSibling;
            show(wrapper);
            const player = createPlayer(wrapper, playerOptions);
            wrapper.player = player;
        };
    }

Maybe that is Step 4.

All instructions for Step 2 - Step 7 can be found in Post #3 and Post #5?

I think there are only instructions on how to do Step 1, which can be found in Post #5.

I see: Step 1

Step 1: Change needed private functions to be public

I don’t see Step 2

Am I supposed to be waiting for those before going ahead?

Should I be waiting for further instruction, guidance?

Sometimes I think I can go ahead on my own, thinking I know what to do, then I end up getting it all messed up and wrong because I am doing too many things at once.

I asked because I am stuck here.

There is an issue I run into when moving 2 functions into onYouTubeIframeAPIReady.

The code stops working: https://jsfiddle.net/7toykpu2/1/

I am stuck and confused.

These are the 2 functions being moved.

Is that wrong?

  function createCoverClickHandler(playerOptions) {

  function addPlayer(coverSelector, playerOptions) {

After moving those 2 functions out, should the code still be working right away?

or, am I supposed to be making other changes also?

The return I think should only have show in it I think.

This

  return {
  show
  };

Not this:

  return {
    add: addPlayer,
    createCoverClickHandler,
    createPlayer,
    show
  };

I tried:
add: show Did not work.
show: show Did not work.
addPlayer: show Did not work.

What am I doing wrong?

I don’t know how to move the functions out without the code falling apart.

I can’t do anything without making other changes, and I don’t know what to do next.

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

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {
    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
        combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
      }
    });
    return combined;
  }

  function createPlayer(videoWrapper, playerOptions = {}) {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);
    return videoPlayer.addPlayer(video, options);
  }

  return {
    add: addPlayer,
    createCoverClickHandler,
    createPlayer,
    show
  };
}());

function onYouTubeIframeAPIReady() {

  function createCoverClickHandler(playerOptions) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerOptions);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }
  
  managePlayer.show(".playa", {});
  managePlayer.show(".playb", {});
  managePlayer.show(".playc", {});
  managePlayer.show(".playd", {});
  managePlayer.show(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  
  managePlayer.show(".playe", {});
  managePlayer.show(".playf", {});
  managePlayer.show(".playg", {});
  managePlayer.show(".playh", {});

I am stuck here:
Code does not work: https://jsfiddle.net/shkb3eLj/

There are no instructions that tell me what to do after moving the functions out.

Am I supposed to wait for further instructions?

I don’t see Step 2 Instructions.

function createPlayer(videoWrapper, playerOptions = {}) {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);
    return videoPlayer.addPlayer(video, options);
  }

  return {
    createPlayer,
    show
  };
}());

function onYouTubeIframeAPIReady() {

  function createCoverClickHandler(playerOptions) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerOptions);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }
  
  managePlayer.show(".playa", {});
  managePlayer.show(".playb", {});
  managePlayer.show(".playc", {});
  managePlayer.show(".playd", {});
  managePlayer.show(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  
  managePlayer.show(".playe", {});
  managePlayer.show(".playf", {});
  managePlayer.show(".playg", {});
  managePlayer.show(".playh", {});

  manageCover.init({
    container: ".container",
    playButton: ".thePlay"
  });

  manageUI.init({});
}

Are these still staying as add, not show?
I’m confused.

I don’t know how to get the code to work.

Changed back to add:
https://jsfiddle.net/kxhg3pr8/

  managePlayer.add(".playa", {});
  managePlayer.add(".playb", {});
  managePlayer.add(".playc", {});
  managePlayer.add(".playd", {});
  managePlayer.add(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  
  managePlayer.add(".playe", {});
  managePlayer.add(".playf", {});
  managePlayer.add(".playg", {});
  managePlayer.add(".playh", {});

Please only do step 1, and have me check that you have done things correctly before we move on to step 2.

1 Like

I completed Step 1 here: https://jsfiddle.net/9qz7bujL/

    return {
        add: addPlayer,
        createCoverClickHandler,
        createPlayer,
        show
    };
}());

If step 1 has been completed, then step 2 and 3 can next be done.
I don’t think that you’ve completed step 1 though because trouble happens when you try steps 2 and 3.

I’m confused and lost.

I keep reading and re-reading your instructions and nothing is telling me to write the returns differently from what I put down in my attempts here.

I still haven’t gotten past Step 1 then.

You want me to do this?

If no, I’m having trouble with the code and need help.

This is where I am having difficulty with the code.

https://jsfiddle.net/gcfkwmLr/1/

 return {
        add: addPlayer,
        createCover: createCoverClickHandler,
        create: createPlayer,
        show
    };
}());

I don’t seem to understand what the structure of the returns should be.

I was told this is wrong: https://jsfiddle.net/9qz7bujL/
Post #16

    return {
        add: addPlayer,
        createCoverClickHandler,
        createPlayer,
        show
    };
}());

I was told this is wrong: https://jsfiddle.net/gtc0e7hf/
Post #8

 return {
    show: addPlayer,
    createCoverClickHandler,
    createPlayer,
  };

I am thinking this is wrong also. https://jsfiddle.net/6yz7xo18/1/

  return {
    add: addPlayer,
    createCover: createCoverClickHandler(),
    create: createPlayer(),
    show
  };

What am I supposed to do in the code that is supposed to prepare me to move out these functions?

 function createCoverClickHandler(playerOptions) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerOptions);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }

I still am having a lot of difficulty with Step 1.

If I had the returns structured correctly, I would be able to move out the functions.

All the returns I have written turn out to be wrong.

Where am I making my mistakes?

What am I doing that I shouldn’t be doing, and what should I be doing instead?

I keep reading and re-reading this over and over again.

I don’t understand what I am doing wrong.

Maybe it is not possible to move out those functions.

Step 1: Change needed private functions to be public

In the above code, I’ll use the terms private methods and public methods to talk about functions that can’t and can be accessed from outside of the module.

The private methods used by the above functions are show(), createPlayer(), and createCoverClickHandler(). We need to make those private methods public, so that the functions will still work when we move them out.

It is at the end of the managePlayer code where the public methods are managed:

    return {
        add: addPlayer
    };

Currently the add method is the only public method (which uses the private method called addPlayer). We need to add show, createPlayer, and createCoverClickHandler to that list of public methods.

Of the key value pair, where add is the key and addPlayer is the value, looking like add: addPlayer , when both the key and the value are both the same, only the value is needed to be used. That is a property shorthand that helps to avoid annoying createPlayer: createPlayer duplications in the objet properties.

All of these are wrong.

I don’t know, or can’t think of any possible other way the return statements can be written differently.

    return {
        add: addPlayer,
        createCoverClickHandler,
        createPlayer,
        show
    };
 return {
    show: addPlayer,
    createCoverClickHandler,
    createPlayer
  };
  return {
    add: addPlayer,
    createCover: createCoverClickHandler(),
    create: createPlayer(),
    show
  };
 return {
        add: addPlayer,
        createCover: createCoverClickHandler,
        create: createPlayer,
        show
    };

Please supply a link to your updated code that you think most closely follows what Step 1 asks, and I’ll try to provide some advice in regard to that code.

The only thing I touched in the code was inside the return.
That was the only thing that was meant to be touched.

Inside the return was the only thing being worked on in Step 1.
I am not able to move on to Step 2 unless Step 1 is correct.

I also know I’m not doing something the right way because if I was, I would be able to do Step 2, and so far I have not been able to. Which means, I am still stuck on Step 1.

You keep telling me I’m doing it wrong, so I’m very confused.

Do either of these returns look right to you?

I don’t know how to write the returns a different way.

This code: https://jsfiddle.net/9qz7bujL/

return {
        add: addPlayer,
        createCoverClickHandler,
        createPlayer,
        show
    };

or this code:

This code: https://jsfiddle.net/gcfkwmLr/1/

return {
        add: addPlayer,
        createCover: createCoverClickHandler,
        create: createPlayer
        show
    };

Completing Step 1 is supposed to prepare me for Step 2.

In Step 2 I am supposed to be able to move these functions out, and I am still not able to.

function createCoverClickHandler(playerOptions) {
        return function coverClickHandler(evt) {
            const cover = evt.currentTarget;
            const wrapper = cover.nextElementSibling;
            show(wrapper);
            const player = createPlayer(wrapper, playerOptions);
            wrapper.player = player;
        };
    }

    function addPlayer(coverSelector, playerOptions) {
        const clickHandler = createCoverClickHandler(playerOptions);
        manageCover.addCoverHandler(coverSelector, clickHandler);
    }

Which one of those links to code should I put my efforts into providing advice?

Sorry for the confusion.

Let’s do this one: https://jsfiddle.net/9dkzy6x1/

Because everytime I place the function names inside the return, I keep doing it wrong for some reason.

Each time I rearrange the returns, I check to see if I am able to move out those 2 functions, and so far I have not been able to do that yet.

return {
        add: addPlayer
    };

I don’t know how to add these function names to the return.

 createCoverClickHandler
 createPlayer
 show

Where the code will work with these functions moved out and placed inside the onYouTubeIframeAPIReady() function.

According to the instructions, after the return is set up the right way, I should be able to do this next.

function onYouTubeIframeAPIReady() {

function createCoverClickHandler(playerOptions) {
        return function coverClickHandler(evt) {
            const cover = evt.currentTarget;
            const wrapper = cover.nextElementSibling;
            show(wrapper);
            const player = createPlayer(wrapper, playerOptions);
            wrapper.player = player;
        };
    }

    function addPlayer(coverSelector, playerOptions) {
        const clickHandler = createCoverClickHandler(playerOptions);
        manageCover.addCoverHandler(coverSelector, clickHandler);
    }

On looking at the public methods of managePlayer, at line 346 of https://jsfiddle.net/9dkzy6x1/ I see that no change has happened there. These are the instructions I gave in regard to that:

Once you have accomplished that simple task we can then move on to the rest of what was instructed in the Step 1 instructions.

Reading those instructions I did this.
https://jsfiddle.net/a0zer5gq/

    return {
        add: addPlayer,
        addCover: createCoverClickHandler,
        makePlayer: createPlayer,
        addShow: show
    };

Thanks. Giving the methods names different from the function names does result in making more work for you. They are only temporary and won’t remain by the end of the process.

Are you sure that you want them to be different names?

Ideally instead of makePlayer: createPlayer, it should just be createPlayer by itself. And similar for the other ones that were added.

1 Like

Like this then.
What do I do next?

If this is good, we can continue making progress from here.

https://jsfiddle.net/ckxohm89/

    return {
        add: addPlayer,
        createCoverClickHandler,
        createPlayer,
        show
    };

I am not quite fully understanding this:
Meaning, I am not fully understanding what you want me to do.

After the public methods have been added for show, createPlayer, and createCoverClickHandler, we need to update those functions so that the public methods are used instead. That should only mean updating function calls in those functions such as show, so that managePlayer.show is used instead.

The only thing I understand, if I understand at all is that, with show,

You want me to change add to show here:

Which is done at this link: https://jsfiddle.net/c8p23qyw/

This:

  managePlayer.add(".playa", {});
  managePlayer.add(".playb", {});
  managePlayer.add(".playc", {});
  managePlayer.add(".playd", {});

to this:

  managePlayer.show(".playa", {});
  managePlayer.show(".playb", {});
  managePlayer.show(".playc", {});
  managePlayer.show(".playd", {});

Is something supposed to be changed in these functions also, I don’t know, and if yes, I don’t know what would be changed.

  function createCoverClickHandler(playerOptions) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerOptions);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }

Doing this is a guess because I don’t know:

Do you want me to add createPlayer, show to the function call here?

function createCoverClickHandler(playerOptions, createPlayer, show) {

Sorry, but you are completely wrong there.

In the two functions that we plan to move soon, we need to replace occurrences of createCoverClickHandler, createPlayer and show, with managePlayer.createCoverClickHandler, managePlayer.createPlayer, and managePlayer.show.

Thank you for explaining that to me.

Following those instructions, I did this: https://jsfiddle.net/sx8bawvr/

Can further progress be made?

  function createCoverClickHandler(playerOptions) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      managePlayer.show(wrapper);
      const player = managePlayer.createPlayer(wrapper, playerOptions);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = managePlayer.createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }

This:
const player = createPlayer(wrapper, playerOptions);

Became:
const player = managePlayer.createPlayer(wrapper, playerOptions);

This:
show(wrapper);

Became:
managePlayer.show(wrapper);

This:
const clickHandler = createCoverClickHandler(playerOptions);

Became:
const clickHandler = managePlayer.createCoverClickHandler(playerOptions);

Good one. It looks like we are ready for step 2. As a reminder, here are the steps that were initially conceived.

Step 1: Change needed private functions to be public
Step 2: MoveCopy unsuitable functions to onYouTubeIframeAPIReady
Step 3: Rename managePlayer.add to use the addPlayer function in onYouTubeIframeAPIReady
Step 4: Move parts of the functions back in to manageCover and managePlayer
Step 5: Rename addPlayer in onYouTubeIframeAPIReady back to managePlayer.add
Step 6: Change public functions that no longer need to be public back to private
Step 7: Remove as much of the onYouTubeIframeAPIReady functions as we can

Step 2: Copy unsuitable functions to onYouTubeIframeAPIReady

This is where the createCoverClickHandler and addPlayer functions are copied out of managePlayer and pasted into the start of the onYouTubeIframeAPIReady function.

Those functions will later on be removed from the managePlayer code, but that will be after we’ve completed step 3. For now, it is just copying out the createCoverClickHandler and addPlayer functions into the start of the onYouTubeIframeAPIReady function.

1 Like

Like this? https://jsfiddle.net/o57fgz83/

After I moved the functions out the code stopped working.

createCoverClickHandler is not defined

Cannot access ‘managePlayer’ before initialization

Was the code not supposed to work after the functions were moved out?

After I do Step 2, is the code supposed to continue working?

Did I forget to do something?