Questions about the YouTube player_api code


#230

The reason for destructing is to help solve a problem. Would you like to know more about the problem that it solves?


#231

I would use destructuring on the single grid player then?
https://jsfiddle.net/zt7anuL3/72/


#232

Yes please.


#233

Here:

Single grid player
https://jsfiddle.net/zt7anuL3/74/

TypeError: cover is null

  function addVideo(video, settings) {
    const defaultSettings = {
      width: settings.width || 198,
      height: settings.height || 198,
  function initPlayer(wrapper) {
    const video = wrapper.querySelector(".video");
 
    videoPlayer.init(video);
  }

Would I change it to this?


function loadPlayer(containerSelector, playerVars) {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    function initPlayer(wrapper) {
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
    const cover = document.querySelector(containerSelector);
    cover.addEventListener("click", coverClickHandler);
}

#234

Okay. Here is a good example of the problem.

function displaySummary(student) {
    console.log('Hello, ' + student.name);
    console.log('Your Maths score is ' + (student.scores.maths || 0));
    console.log('Your English score is ' + (student.scores.english || 0));
    console.log('Your Science score is ' + (student.scores.science || 0));
}

The problem is that students.someName.somethingElse is always being accessed, resulting in long strings of student.scores.science

Normally that is solved by assigning variables at the start of the function:

function displaySummary(student) {
    const name = student.name;
    const scores = student.scores;
    console.log('Hello, ' + name);
    console.log('Your Maths score is ' + (scores.maths || 0));
    console.log('Your English score is ' + (scores.english || 0));
    console.log('Your Science score is ' + (scores.science || 0));
}

The problem that destructuring solves, is to remove the need for those const lines.
Instead of those, you can tell the function the properties from the student object, that you want to use.

// function displaySummary(student) {
function displaySummary({name, scores}) {
    // const name = student.name;
    // const scores = student.scores;
    console.log('Hello, ' + name);
    console.log('Your Maths score is ' + (scores.maths || 0));
    console.log('Your English score is ' + (scores.english || 0));
    console.log('Your Science score is ' + (scores.science || 0));
}

And that way, you don’t need those const assignments to assign parts of the object to separate variables.

That is the problem that destructuring seeks to solve.


#235

How would I get this to work please? #233

Single grid player
https://jsfiddle.net/zt7anuL3/74/

TypeError: cover is null

How is that fixed?


#236

Deleting is my favorite solution. In this case, delete all of the single player code that you’ve left in there.


#237

In function load player, or the other part?


#238

Here:

Or did you want me to delete this?
https://jsfiddle.net/zt7anuL3/80/

function addVideo(video, settings) {
        function addVideo(video, {
          width,
          height,
          playerVars
        }) {
          const defaultSettings = {
            width: width || 198,
            height: height || 198,
            videoId: video.dataset.id,
            playerVars: {
              autoplay: 1,
              controls: 1,
              showinfo: 1,
              rel: 0,
              iv_load_policy: 3,
              cc_load_policy: 0,
              fs: 0,
              disablekb: 1,
            },
            events: {
              "onReady": onPlayerReady,
              "onStateChange": onPlayerStateChange
            }
          };

#239

I tried using Firefox debugging tools to find out more about the problem. It wasn’t useful.

Chrome tells me instead:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at manageCover ((index):213)
    at window.onload ((index):214)

which you might find more useful.

Look for addEventListener in a manageCover function. That’s where the problem is happening.


#240

This doesn’t get deleted then:

    function loadPlayer(opts) {
      "use strict";
      const show = (el) => el.classList.remove("hide");

      function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");

        videoPlayer.init(video);
      }

      function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
      }
      const cover = document.querySelector(opts.target);
      cover.addEventListener("click", coverClickHandler);
    }

#241

Would I remove opts from it?


#242

It helps to only delete after you understand what’s causing the problem, and how that will be solved by deleting things.

You haven’t yet come to the stage of understanding what’s causing the problem.


#243

manageCover
https://fiddle.jshell.net/zt7anuL3/80/show/:213:3
window.onload
https://fiddle.jshell.net/zt7anuL3/80/show/:204:11


#244

What do you find when you look for cover and addEventListener in a manageCover function. For that’s where the problem is happening.


#245

I delete that
https://jsfiddle.net/zt7anuL3/82/

TypeError: videoPlayer is undefined


#246

It’s best not to until you understand the problem. As for me, my time here is up. All the best.


#250

Here Fixed: Working Code
https://jsfiddle.net/zt7anuL3/85/

Would we want to add width and height to this function?

function addVideo(video, settings) {
    const defaultSettings = {
      videoId: video.dataset.id,
      playerVars: {

or, do we want to keep width and height inside this function?

  function initPlayer(wrapper) {
    const video = wrapper.querySelector(".video");
    const width = opts.width || 198;
    const height = opts.height || 198;
    const playerVars = opts.playerVars || opts;
    delete playerVars.width;
    delete playerVars.height;
    videoPlayer.init(video, {
      width,
      height,
      playerVars
    });
  }

#251

Width and height already get into the addVideo function, inside of the settings variable.

Would it help to make that more clear, by updating the initPlayer function?

    ...
    delete playerVars.width;
    delete playerVars.height;
    const settings = {
      width,
      height,
      playerVars
    };
    videoPlayer.init(video, settings);

#252

#250

After I got the code working:
https://jsfiddle.net/zt7anuL3/85/

I wanted to know if width/height should be removed from this function.

function initPlayer(wrapper) {
    const video = wrapper.querySelector(".video");
    const width = opts.width || 198;
    const height = opts.height || 198;
    const playerVars = opts.playerVars || opts;
    delete playerVars.width;
    delete playerVars.height;
    videoPlayer.init(video, {
      width,
      height,
      playerVars
    });
  }

And added to this function instead:

function addVideo(video, settings) {
    const defaultSettings = {
      videoId: video.dataset.id,
      playerVars: {

or is that not necessary?