Setting up single-player tests before adding spinner

JavaScript
2492

Test passes: https://jsfiddle.net/7fawrx3o/1/

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    const callbackHasReady = callback && callback.ready;
    if (!callbackHasReady) {
      addAfterClickEvent(cover, callback);
    } else {
      addAfterClickEvent(cover, callback.ready(callback));
    }
  }

At what point will it work the same way as this?

What is left to be done in the test code?

https://jsfiddle.net/95oLbw3h/1/

function initCover() {
  manageCover.init(function playVideo() {
    videoPlayer.play();
  });
}
videoPlayer.afterPlayerReady = initCover;

const videoIds = [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
];
videoPlayer.init(videoIds);
2493

In what way does it currently not work the same way as that?
When that question has nothing else worth working on, is when that point will be.

2495

How the code is supposed to work is as follows:

Clicking on it too soon, should cause the curtain/cover not to open to the video unless it is ready.

As how it works here: https://jsfiddle.net/95oLbw3h/1/

Nothing in the test code we have been working on does this at all.

function initCover() {
  manageCover.init(function playVideo() {
    videoPlayer.play();
  });
}
videoPlayer.afterPlayerReady = initCover;

const videoIds = [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
];
videoPlayer.init(videoIds);

Seen here: Curtain doesn’t open when clicking on it too soon.

The play button doesn’t even disappear.

They both stay.

2496

The play button shows pretty much instantaneously for me.

We will need to find a way to reliably experience a slowly loading play button.

2497

To reproduce: https://jsfiddle.net/95oLbw3h/1/

First click inside html, css, or javascript.

Next:

hold ctrl down then press enter

then click play button very fast:

Keep repeating until you are able to reproduce.

Does that help you reproduce?

Keep doing that until it doesn’t open when clicking on the play button.

Maybe, before moving onto the tests, we should have understood this, how it works more clearly?

For context from a different post of yours:

Fist instance where initCover appeared, or was used in the code.

post #60:

or, maybe this post is better?

post #30

or, maybe just being able to reproduce it is better.

It originally looked like this:

videoPlayer.init({
    afterPlayerReady: function initCover() {
        manageCover.init(function playVideo() {
            videoPlayer.play();
        });
    }

Then this:

function initCover() {
  manageCover.init(function playVideo() {
    videoPlayer.play();
  });
}
videoPlayer.afterPlayerReady = initCover;
videoPlayer.init();

Then improved to this:

function initCover() {
  manageCover.init(function playVideo() {
    videoPlayer.play();
  });
}
videoPlayer.afterPlayerReady = initCover;

In our tests, would it be good to go back to when the javascript looked like this?

Removing changes that weren’t needed, or not necessary for what needed to be done.

function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

Doing that would bring us back to the last working test before working on this:

https://jsfiddle.net/ga1v0mjr/2/

post #2316

2498

After more clearly understanding how this code works:
https://jsfiddle.net/95oLbw3h/1/

function initCover() {
  manageCover.init(function playVideo() {
    videoPlayer.play();
  });
}
videoPlayer.afterPlayerReady = initCover;

const videoIds = [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
];
videoPlayer.init(videoIds);

And what we are needing to do in this code so that it behaves the same as the above code:

https://jsfiddle.net/czv3qwr7/3/

const videoIds = [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
];

manageCover.init(videoPlayer.init(videoIds));

How do we reconcile how both are set up so that there is one way that it is set up?

Both codes are updated to the latest version.

Those are the only differences in both codes.

2499

I still don’t understand how the behaviour is different.

Please put together a good clear example of the difference in behaviour.

2500

Were you able to reproduce what I was referring to?

To reproduce: https://jsfiddle.net/95oLbw3h/1/

First click inside html, css, or javascript.

Next:

hold ctrl down then press enter

then click play button very fast:

Keep repeating until you are able to reproduce.

2501

I have not been able to reproduce. Every time the video plays without fault.

2503

I was able to reproduce here 6 times in a row using only my mouse.

Try on here instead. https://jsitor.com/icRe-Bh7N

Click Run

Then click the play button right away.

Keep doing that until it doesn’t open.

Meaning, where nothing occurs when clicking on it.

You should be able to reproduce on there.

You just need to use the mouse.

Run is closer to the play button on there.

I was able to make them even closer here:

Click run then the play button right away, repeat until it doesn’t open.

2504

It’s taking a long time to load, just saying preparing environment.
Reloading the page doesn’t seem to help, it just still says preparing environment.

I’ll leave it in the tab as it’s loading, and occasionally check on it

2505

It shows everything loaded here. https://jsitor.com/icRe-Bh7N

1280×548 55.4 KB

2506

That initialization section at the end of the code is initializing the cover after the player is ready. That is what is causing the problem there, and we are not doing that anymore.

2507

What are you saying?

https://jsitor.com/icRe-Bh7N

What we are needing to do in this code so that it behaves the same as the above code:

https://jsfiddle.net/czv3qwr7/3/

const videoIds = [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
];

manageCover.init(videoPlayer.init(videoIds));
2508

You were saying that https://jsitor.com/icRe-Bh7N is problem code.

I am hearing from you that you want to change code in https://jsfiddle.net/czv3qwr7/3/ so that it has the same problem as the code at https://jsitor.com/icRe-Bh7N

That doesn’t seem to make any sense.

2509

That is not a problem code, why is that a problem code?

Clicking on it too soon, should cause the curtain/cover not to open to the video unless it is ready.

That is how it works here: https://jsitor.com/icRe-Bh7N

Wanted the same thing to occur here: https://jsfiddle.net/czv3qwr7/3/

2510

We need to restart on examining the problem, for I wasted lots of time trying to experience the problem in the code at https://jsitor.com/icRe-Bh7N

2511

It’s not a problem though, I don’t understand why you are keep saying that it is.

It works how it is supposed to.

Clicking on it too soon, should cause the curtain/cover not to open to the video unless it is ready.

I assume you were able to reproduce what I was referring to.

I wanted to add how it works in there, to this code: https://jsfiddle.net/4xdtc27v/

const videoIds = [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
];

manageCover.init(videoPlayer.init(videoIds));
2513

It has been an interesting several years working on this, but as I am now in full time work I must say goodbye.

4 Likes
2514

So let me get something straight here, @asasass. Paul has tirelessly helped you for almost a year, in a thread with with close to 2500 posts. In his own time, which he did not have to do.

And then we he says he’s not able to continue you can’t show some common decency and thank the man for all his effort?

4 Likes