Questions about the YouTube player_api code


#186

You would assign settings.width and settings.height, then delete them from the opts object.


#187

This:

  settings.width = width || 198;
  settings.height = height || 198;

Would become this?

  settings.width || 198;
  settings.height || 198;

#188

No, the initial code uses opts.width instead of just width.


#189

This is the initial code.

Where it uses just width, that becomes opts.width


#190

Like this then?
https://jsfiddle.net/zt7anuL3/26/

        const {...options} = opts;

        settings.width = opts.width || 198;
        settings.height = opts.height || 198;

Still there:
image


#191

That const line needs to be removed - that can never be satisfactory to JSLint.

Instead, after setting the width and height, delete them from the opts object.

delete opts.width;
delete opts.height;

#192

This can’t be right:

   settings.width = delete opts.width; || 198;
        settings.height = delete opts.height; || 198;

#193

No, that’s not right at all. Go and read the documentation about the delete operator.


#194

I don’t understand it.

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

#195

You shouldn’t have removed the code assigning width and height to the settings object.


#196

This line gets deleted:

 const {...options} = opts;

These lines are being worked on.

   settings.width = delete opts.width; || 198;
        settings.height = delete opts.height; || 198;

#197

I don’t have the stamina to push on through this with you today. Good luck with things.


#202

It’s still not clear how this line would be fixed, adjusted.

        const {
            width,
            height,
            ...options
        } = opts;

Start, End, Loop are now not working in the code at all in the 1st player, or the grid player.

This is set up wrong then:
https://jsfiddle.net/zt7anuL3/40/

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

Start, End, Loop all work in the code when it’s set like this:
https://jsfiddle.net/zt7anuL3/41/

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

Context of how it was put together

function initPlayer(wrapper) {
    const video = wrapper.querySelector(".video");
    // Create an EMPTY object, this will be our settings.
    let settings = {};
    // Strip out the width and height from the passed object, leave the rest
    const {width, height, ...options} = opts
    // default to 198x198 for multiple video players
    settings.width = width || 198;
    settings.height = height || 198;
    
    // the var 'options' contains everything BUT width and height.
    settings.playerVars = options.playerVars || options;
    
    videoPlayer.init(video, settings);
}

#203

JSLint doesn’t want you using assignment destructuring, because it can easily lead to confusion.

Also, someone has changed the combineSettings function to do the complete opposite of what I designed it to do.

I designed it to protect oldSettings from strange and unknown properties in newSettings.
The change that someone made, is to let everything in newSettings change what’s in oldSettings, no matter if it’s good,bad, or ugly.

You don’t need the combineSettings function to achieve that. You can just use Object.assign instead.

    function combineSettings(oldSettings, newSettings) {
        // We want to add or update only those properties found on our 
        //  newSettings object -- this is our custom settings. So get ONLY
        //  those keys.
        /*
        const props = Object.keys(newSettings);
        let combinedSettings = props.reduce(function combine(combined, prop) {
            // Is the current property a  nested object? If so, RECURSE!
            if (typeof(oldSettings[prop]) === "object") {
                const oldProp = oldSettings[prop] || {};
                const newProp = newSettings[prop] || {};
                combined[prop] = combineSettings(oldProp, newProp);
            } else {
                // Otherwise, simply add/update the property on  our defaults
                combined[prop] = newSettings[prop];
            }
            return combined;
        }, oldSettings);
        return combinedSettings;
        */
        return Object.assign(newSettings, oldSettings);
    }

Why is it so hard to do the right thing? Because everyone would otherwise be doing it and it wouldn’t be as worthwhile.


#204

Oh, but aside from that distraction in the previous post, instead of using assignment destructors as in the following code:

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

You can do that in a less confusing way that JSLint is happy with, like this:

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

If you want to use destructuring, then the function parameters is where that’s used instead.

    function addVideo(video, settings) {
    function addVideo(video, {width, height, playerVars}) {
        // achieves the same as:
        // const width = settings.width;
        // const height = settings.height;
        // const playerVars = settings.playerVars;

        const defaultSettings = {
            // width: settings.width || 600,
            width: width || 600,
            // height: settings.height || 338,
            height: height || 338,
            ... // and so on

#205

Off Topic

I believe that’s a case of “too many cooks”, and demonstrates why (apart from simple good manners) it is not a good idea to ask multiple members on multiples forums to work on the same code at the same time.


#206

The code should be working set like this?
https://jsfiddle.net/zt7anuL3/56/

It turns on and everything, but.

Start, End, Loop, aren’t working in the code now.

In the Web Console, they are not being shown added to the playerVars.

    function combineSettings(oldSettings, newSettings) {

        return Object.assign(newSettings, oldSettings);
    }

Bottom:

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

loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop:true
});

#207

Never mind - it’s late and I not only got the assign order reversed, but it doesn’t do deep copies either.


#208

We’ll do this later then. And thank you for explaining all this to me.


#209

There was code missing from the middle of it.

When that is good, then these should work.
Start, End, Loop,

The old settings, would be referring to the “defaultSettings,” what they all start off with.

            playerVars: {
                autoplay: 1,
                controls: 1,
                showinfo: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
            },

The new settings would be, what gets specified in each load player.

loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop:true
});

And so, what’s being done here is combining the oldSettings, with the newSettings.

function combineSettings(oldSettings, newSettings) {

// And then stuff in here:

return Object.assign(newSettings, oldSettings);
 }