Setting up single-player tests before adding spinner

JavaScript
8

I was trying different things and found this that works.

Instead of using this: const iframe = player.h;

I can do this: https://jsfiddle.net/q2v5hew4/

Is this good?

    const iframe = document.querySelector("iframe");
    iframe.dispatchEvent(events.afterPlayerReady);
  }

    const iframe = document.querySelector("iframe");
    const eventHandler = eventHandlers.afterPlayerReady;
    iframe.addEventListener("afterPlayerReady", eventHandler);
  }

Improving on that I can then do this: https://jsfiddle.net/z1kywacL/

 function getIframe() {
    return document.querySelector("iframe");
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
    const iframe = getIframe();
    iframe.dispatchEvent(events.afterPlayerReady);
  }

  function addPlayer(video) {

    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };

    player = new YT.Player(video, config);

    const iframe = getIframe();
    const eventHandler = eventHandlers.afterPlayerReady;
    iframe.addEventListener("afterPlayerReady", eventHandler);
  }

If that was good, next I can try to add the spinner in.

The spinner code would be added to this I think.

This seems difficult for me to understand how it is done.

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

Spinner Instructions: I found these that were done.

I do not understand how to do any of this:

And it may need to be changed a bit because I am only doing this to a single video, so some of, or all would need to be changed.

Because this spinner code was written many different ways I am seeing.

I do not know, or can’t comprehend how it would be added to a single video code .

function toggleSpinner(evt) {
        spinner.toggleDualRing(evt.target);
    }

player.init({
        onAddPlayer: toggleSpinner,
        onPlayerReady: toggleSpinner
    });

  const config = {};
    const onAddPlayer = new Event("onAddPlayer");
    const onPlayerReady = new Event("onPlayerReady");
...
    function addEvents(cover) {
        cover.addEventListener("onAddPlayer", config.onAddPlayer);
        cover.addEventListener("onPlayerReady", config.onPlayerReady);
    }

    function add(coverSelector, settings = {}) {
        const cover = document.querySelector(coverSelector);
        addEvents(cover);

    function playerReadyWrapper(cover, onPlayerReady) {
        return function playerReadyCallback() {
            manageCover.init(cover);
            cover.dispatchEvent(onPlayerReady);
        };
    }

I do know that the spinner code was used in these 3 topic threads:

Topic 1

Topic 2

Topic 3

Post #102

With the spinners, it’s not a good idea to have the code calling toggleSpinner embedded directly in the other code that deals with players. There is a Separation of Concerns ideal that should be applied.

Instead of having the toggleSpinner embedded in the code, we want the spinner to start when the player is a added, and to stop spinning when the player is ready.