Improving back/home button added to manageCover

asasass · September 24, 2021, 2:21pm

Home/Exit button is the same button.
https://jsfiddle.net/awy26kon/

Currently after it is clicked, it disappears from the screen, And it appears on the screen when it is supposed to show.

That means, show/hide are both working.

After that you can set it up to listen for home events and exit events.

Would this be the stuff that stops the video after the home/exit button is clicked?

player.stopVideo();

I need help with that part.

Are there instructions I can follow to set that up?

When it comes to this:
https://jsfiddle.net/p5ova3tj/

I think ‘Stop’ would be a better name than ‘Close’ as that is what it is doing in the code, after the home/exit button is clicked, the video should stop.

or maybe, it should be Close instead?
What do you think?

    function addStopHandler(stopSelector, handler) {
        const stop = document.querySelector(stopSelector);
        stop.addEventListener("click", handler);
    }

    return {
        addStopHandler,
        init
    };
}());

Also: Will I be adding something similar to this?

    function addPlayer(stopSelector, playerSettings) {
        const clickHandler = createCoverClickHandler(playerSettings);
        manageUI.addStopHandler(addStopHandler, clickHandler);
    }

Which would be placed under this function:

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

function addPlayer(stopSelector, playerSettings) {
        const clickHandler = createCoverClickHandler(playerSettings);
        manageUI.addStopHandler(addStopHandler, clickHandler);
    }

or, am I just adding on to this function?

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

This is what you said:

It seems that there is a rather obvious solution to this, that being to add to the manageCover code a method called addCloseHandler similar to the addCoverHandler, so that you can later on use manageCover.addCloseHandler to give it a function that stops the player.

So, then I would be adding inside this code the ability for the video to stop after the home button is clicked?

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

I need direction on how to implement what I am trying to do in the code.

Which is, having the video stop, after the home button is clicked.

After the home button is clicked, this should occur: player.stopVideo();

Paul_Wilkins · September 24, 2021, 10:53pm

When it comes to manageUI, videoPlayer, and addPlayer:

it’s not appropriate for manageUI to make function calls to videoPlayer or addPlayer
it’s not appropriate for videoPlayer to make function calls to manageUI or addPlayer
it’s not appropriate for addPlayer to make function calls to manageUI

What that means is that the manageUI code needs an addExitHandler function, and the addPlayer code needs a way to stop a player. That way external to all of those functions we can tell manageUI to add an exit handler that uses addPlayer to stop the video.

asasass · September 25, 2021, 1:08am

addExitHandler
https://jsfiddle.net/c6u4zrfg/

function addExitHandler(exitSelector, handler) {
        const exit = document.querySelector(exitSelector);
        exit.addEventListener("click", handler);
    }

    function init() {
        const goHome = document.querySelectorAll(".home");
        addClickToHome(goHome);
    }

    return {
        addExitHandler,
        init
    };
}());

and the addPlayer code needs a way to stop a player.

Next would be doing something in here:

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

That way external to all of those functions we can tell manageUI to add an exit handler that uses addPlayer to stop the video.

What am I supposed to do next?

asasass · September 25, 2021, 5:09pm

These two functions need to talk to/connect with each other?
https://jsfiddle.net/c6u4zrfg/

If yes, how do I do that?

function addExitHandler(exitSelector, handler) {
        const exit = document.querySelector(exitSelector);
        exit.addEventListener("click", handler);
    }

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

Paul_Wilkins · September 25, 2021, 10:39pm

Not correct, as it’s inappropriate for the managePlayer code to know anything about manageUI.

As long as you use a consistent interface for event handler functions, you can pass that manageUI.addExitHandler function name to the managePlayer code. That way managePlayer can add the exit handler while still knowing nothing about manageUI.

Let’s track this through:

manageUI.addExitHandler doesn’t come from managePlayer
exitSelector doesn’t come from managePlayer
the handler does come from managePlayer

So we need to give manageUI.addExitHandler and exitSelector to managePlayer.
That seems to be function parameters of (exitSelector, addHandlerFn)

That function creates a stop handler function to close the player and gives both the exitSelector and the stop handler function to that addHandlerFn.

The only mystery left is what to call the managePlayer function that adds the handler. As it’s intended to later on stop the player we shuld have the word stop in its name. But what would be a good name for it? In full we are wanting the managePlayer code to use a different function to add a stop handler.

There doesn’t seem to be a good name for that, so perhaps a different approach is needed.

Instead of having managePlayer take control of adding the exit handler, we can have managePlayer instead just give us a handler to stop the player.

That way we can call managePlayer.stopHandler(player) which returns a function that when called will stop that player.

We can then from outside of all of those manage functions pass that player to manageUI.addExitHandler. That seems to be the better approach.

Paul_Wilkins · September 25, 2021, 11:59pm

So to simplify, the managePlayer code needs a createStopHandler function that is given the player. That createStopHandler function then returns a handler function that stops the player. That handler function can then be given to the manageUI code.

asasass · September 26, 2021, 12:33am

Is this what you wanted me to do?

Am I close?
https://jsfiddle.net/tudw2mbk/

Is: player.stopVideo(); supposed to be in there somewhere?

  function createStopHandler(createSelector, playerSettings) {
    const clickHandler = createCoverClickHandler(playerSettings);
    managePlayer.addExitHandler(createSelector, clickHandler);
  }

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

  return {
    add: addPlayer
  };
}());

Paul_Wilkins · September 26, 2021, 2:50am

No, that’s nothing like what you should be doing.

Here’s what I said:

Breaking that down it is:

the managePlayer code needs a createStopHandler function that is given the player.
That createStopHandler function then returns a handler function that stops the player.
That handler function can then be given to the manageUI code.

Breaking those down even further we have:

the managePlayer code needs a createStopHandler function that is given the player.

function createStopHandler(player) {
    ...
}

That createStopHandler function then returns a handler function that stops the player.

function createStopHandler(player) {
    return function stopHandler() {
        ...
    };
}

That uses what is called a closure technique around the player variable (and other variables in the parent function), so that the stopHandler function still knows what the player is.

That handler function can then be given to the manageUI code.

const player = managePlayer.add(...);
const stopHandler = addPlayer.createStopHandler(player);
manageUI.addExitHandler(".home", stopHandler);

You still need to return the player from the managePlayer.add code along with perhaps doing a few other things, but that is the fundamental core of the process. Use the player from managePlayer to create a handler, and pass that handler to manageUI.

Paul_Wilkins · September 26, 2021, 2:51am

Once all of that runs, some of that code can then be moved into other code, perhaps a manage managePage module which is the only code that is allowed to know about both manageUI and managePlayer.

That way you can then issue a command such as:

managePage.addPlayer(".playa", {});

and that managePage code takes care of the details of getting things from managePlayer and giving it to manageUI.

asasass · September 26, 2021, 7:25am

I did something wrong:

I think I’m supposed to get it working like this first.
https://jsfiddle.net/k2req91b/

Is something supposed to go inside those brackets? (...)
const player = managePlayer.add(...);

Code:

  function createStopHandler(player) {
    return function stopHandler() {
      const player = addPlayer.add();
      const stopHandler = addPlayer.createStopHandler(player);
      manageUI.addExitHandler(".home", stopHandler);
    };
  }

  return {
    add: addPlayer
  };
}());

function onYouTubeIframeAPIReady() {
  managePlayer.add(".playa", {});

  managePlayer.add(".playb", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  managePlayer.add(".playc", {});

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

  manageUI.init({});
}

Paul_Wilkins · September 26, 2021, 7:42am

The only thing that the stopHandler function should do is to use the player parameter to stop the handler. In other words, to have only one command, that being player.stopVideo();

asasass · September 26, 2021, 3:16pm

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

 function createStopHandler(player) {
    return function stopHandler() {
      player.stopVideo();
    };
  }

 /* const player = managePlayer.add();
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);*/

  return {
    add: addPlayer
  };
}());

Next:

I don’t know how to add this part to the code.

Also, is something supposed to go inside those brackets? (...)

  const player = managePlayer.add(...);
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);

Also, I’m not sure where it’s supposed to be placed in the code.

Where does it go?

Does it stay where I have it?

If it stays where I have it I get this error:
https://jsfiddle.net/6ph7k58L/

Cannot access ‘managePlayer’ before initialization"

 function createStopHandler(player) {
    return function stopHandler() {
      player.stopVideo();
    };
  }

 const player = managePlayer.add();
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);

  return {
    add: addPlayer

  };
}());

Paul_Wilkins · September 26, 2021, 9:53pm

That part temporarily goes in the place that you have managePlayer.add code.

You put the parameters that you use with your existing managePlayer.add code in there.

After you have things working, refactoring can then occur to move the bulk of the work to a separate managePage module, which is the only place that knowledge of both manageUI and managePlayer should exist.

asasass · September 26, 2021, 10:50pm

I’m still quite confused.

What do I do after I do this?
https://jsfiddle.net/5wh7xoby/

That part temporarily goes in the place that you have managePlayer.add code.

I did that here:

Cannot read properties of null (reading ‘addEventListener’)"

Code

function onYouTubeIframeAPIReady() {

  const player = managePlayer.add();
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);
  
  managePlayer.add(".playa", {});

  managePlayer.add(".playb", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  managePlayer.add(".playc", {});

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

  manageUI.init({});
}

Am I supposed to do something like this?

This does not seem like the right thing to do.

I’m confused on how this is set up.

Is this close?

const player = managePlayer.add(".playa", {});
const player = managePlayer.add(".playb", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  const player = managePlayer.add(".playc", {});
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);

First, I’m trying to get it to work, then refactoring after I have it running.

Also, is addPlayer supposed to be highlighted in blue?

Paul_Wilkins · September 27, 2021, 12:26am

The intention is that the three player/stophandler/manageUI lines replaces one of the managePlayer.add statements.

This could be done a different way though, of having a separate module called managePage with an add function that contains those three lines.
That way you can just rename managePlayer.add to be managePage.add and all of the work is then done for you.

asasass · September 27, 2021, 12:31am

Let’s do that then.

What do I do next?

I added: managePage.addPlayer

https://jsfiddle.net/5jp7d2o8/


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

  function createStopHandler(player) {
    return function stopHandler() {
      player.stopVideo();
    };
  }
  
  return {
    add: addPlayer

  };
}());

function onYouTubeIframeAPIReady() {

  const player =  managePage.addPlayer();
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);
  
  managePage.addPlayer(".playa", {});

  managePage.addPlayer(".playb", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  managePage.addPlayer(".playc", {});

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

  manageUI.init({});
}

Paul_Wilkins · September 27, 2021, 2:21am

First I would rename playerSettings to playerOptions. We have historically used playerSettings to mean a combined version of both playerOptions and playerVars. Also, youtube calls them options. So renaming playerSettings to playerOptions makes the most sense.

  function addPlayer(coverSelector, playerOptions) {

As the managePage.addPlayer code has function parameter of coverSelector and playerOptions, that results in the three lines in the addPlayer code being the following:

  const player = managePlayer.add(coverSelector, playerOptions);
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);

asasass · September 27, 2021, 2:38am

playerSettings has been changed to playerOptions

and I added this:
But I don’t know how to get it to work in the code.
It still is not working, and I have not been able to get it to work.

  const player = managePlayer.add(coverSelector, playerOptions);
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);

https://jsfiddle.net/dwyxsrpf/

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

  function createStopHandler(player) {
    return function stopHandler() {
      player.stopVideo();
    };
  }

  return {
    add: addPlayer

  };
}());

function onYouTubeIframeAPIReady() {

  const player = managePlayer.add(coverSelector, playerOptions);
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);
  
  managePage.addPlayer(".playa", {});

  managePage.addPlayer(".playb", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  managePage.addPlayer(".playc", {});

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

  manageUI.init({});
}

Is manageUI.addExitHandler in the right spot?

I’m confused on how to get it to work.

Should I be doing this?

Adding variables here?

function onYouTubeIframeAPIReady(coverSelector,playerOptions) {

After I do that, I get this error:
https://jsfiddle.net/nkgvwy2z/

Cannot read properties of null (reading ‘addEventListener’)"

function onYouTubeIframeAPIReady(coverSelector, playerOptions) {

  const player = managePlayer.add(coverSelector, playerOptions);
  const stopHandler = addPlayer.createStopHandler(player);
  manageUI.addExitHandler(".home", stopHandler);

asasass · September 27, 2021, 5:31pm

I’m confused here, am I supposed to wrap a function around it?
https://jsfiddle.net/wevup94n/

I can’t get the stopHandler code to work.

function onYouTubeIframeAPIReady() {

  function functionName(coverSelector, playerOptions) {
    const player = managePlayer.add(coverSelector, playerOptions);
    const stopHandler = addPlayer.createStopHandler(player);
    manageUI.addExitHandler(".home", stopHandler);
  }

Paul_Wilkins · September 27, 2021, 8:24pm

There are some other things that need to be done too in regard to the player variable, so until we get other things working just comment out player.stopVideo() and use a console.log statement there to give you confirmation that the stopHandler function gets run.

    return function stopHandler() {
      console.log("stop handler was called");
      // player.stopVideo();
    };

That helps to simplify things. There are less competing demands on your attention and when you get that console.log statement to appropriately appear in the console, we can then move on to getting the player part working.

Topic		Replies	Views
Strange button behavior JavaScript	12	1288	February 18, 2022
Adding a back button HTML & CSS	15	5558	February 19, 2023
Fading back in the page from before HTML & CSS	52	4178	February 6, 2022
JavaScript Back Button JavaScript	12	1516	October 8, 2014
Improving manageCover code JavaScript	147	3545	December 22, 2021

Improving back/home button added to manageCover

Related topics