Playing YouTube videos from an array

defaults.playerOptions is too big, so put it into a smaller temporary variable called defaultOptions, and use that defaultOptions variable instead of defaults.playerOptions.

Is there something about what I’m saying or how I’m saying it that is difficult to understand?

const defaultOptions = defaultOptions;


        const optionParams = ["width", "height", "videoid", "host"];
        const defaultOptions = defaultOptions;
        const defaultVars = defaultOptions.playerVars;
        const playerVars = settings.playerVars;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
        return playerOptions;
    }

const defaultOptions

Gets changed to?

I know what, let’s give more detail.

The following line is causing problems:

const playerOptions = Object.assign({}, defaults.playerOptions, settings); // too long

Of the things in that line, we have:

  • playerOptions
  • {}
  • defaults.playerOptions
  • settings

The longest thing on that line is defaults.playerOptions, so that’s a good candidate for shortening.

How can we shorten it? We could use d.po instead throughout the code, but then we lose any ability to understand what it’s used for.

Instead of directly shortening it, we can copy its value to another variable, one that is shorter in length. defaultOptions is shorter than defaults.playerOptions, and defaultOptions in the context of your code clearly gives an understanding of what is there.

So we assign defaults.playerOptions to defaultOptions

const defaultOptions = defaults.playerOptions;

and we can then use that defaultOptions variable in the code, to replace the problem part of the longer line that was causing trouble.

Does that help to give you more of an understanding about what is happening and why?

2 Likes

This

        const optionParams = ["width", "height", "videoid", "host"];
        const defaultOptions = defaults.playerOptions;
        const defaultVars = defaultOptions.playerVars;
        const playerVars = settings.playerVars;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
        return playerOptions;
    }

it’s broken now.

Back to the beginning:
https://jsfiddle.net/or5uqk1a/

Before you had one problem line, and you should end up with two lines that solve the problem. You have added many things there instead.

Default options is already being used.

Here:
const playerOptions = Object.assign({}, defaultOptions, settings);

Doesn’t it have to be a new name?

defaults.playerOptions

const playerOptions = Object.assign({}, defaults.playerOptions, settings);

A name that isn’t already taken?

That is being used in a different area and has no connection with what is happening in the other area.

defaultOptions is the correct variable name to use there.

I’m changing every single one of these in the code, right?
defaults.playerOptions

No you’re not. Please read what I posted in post #226 more carefully.

I don’t just write that stuff out for my entertainment.

I write it out to try to help you understand.

That is done.
https://jsfiddle.net/ezjcLqhb/

Next, assigning a variable.

Those get changed, right?

It’s already named here as a const?
const defaultOptions = defaults.playerOptions;

I can’t do that.
const defaultOptions = defaultOptions;

    function init(playerOptions) {
        Object.assign(defaults.playerOptions, playerOptions);
    }

With this?

defaultOptions

default options needs to be highlighted, given a variable.

Variable still needs to be given.
https://jsfiddle.net/ezjcLqhb/

I know you don’t mean this, because it doesn’t work in the code:

Variable given: Code does not work.
https://jsfiddle.net/wrvLyhk1/
function addPlayer(video, settings, videoIds, defaultOptions) {

Used to be this: Last working code: https://jsfiddle.net/or5uqk1a/
const playerOptions = Object.assign({}, defaults.playerOptions, settings);

It’s only in the one place where you had too long a line that defaultOptions is used. No other changes need to occur elsewhere in regard to that.

You only had to do two things to solve the problem:

  • create a temporary variable called defaultOptions assigned to equal defaults.playerOptions
  • Shorten defaults.playerOptions to defaultOptions only on the one line that was too long

That’s all that you had to do to solve the problem.

1 Like

I understand this.

https://jsfiddle.net/r437cz5q/
const playerOptions = Object.assign({}, defaultOptions, settings);

Stuck on this,

create a temporary variable called defaultOptions assigned to equal defaults.playerOptions

There used to be defaults.playerOptions in that line. You still need to access it somehow, which is done before that line.

That is where to the defaultOptions variable, you assign the defaults.playerOptions

Do you mean this?

Code doesn’t work doing that.
https://jsfiddle.net/ctbxhkda/

    function addPlayer(video, settings, videoIds) {
        const videoId = !Array.isArray(videoIds) && videoIds;
        const playlist = Array.isArray(videoIds) && videoIds;
        const defaultOptions = {}
        const defaults = {
       
        
            playerOptions: {
                events: {
                    "onReady": onPlayerReady
                },
                host: "https://www.youtube-nocookie.com",
                videoId: video.dataset.id
            }
        };
        const playerOptions = Object.assign({}, defaultOptions, settings);
        players.push(new YT.Player(video, playerOptions));
    }

No I don’t mean that. I mean something much simpler and easier to achieve than that.

const defaultOptions = defaults.playerOptions.

I remain puzzled as to why it’s been so difficult for you to understand what I’ve been saying about that.

1 Like

Isn’t it already assigned here, or no?

Neither of these is correct?

const defaults.playerOptions = defaultOptions;

const defaultOptions = defaults.playerOptions;

I’m getting something confused and I don’t know what it is.

defaultOptions variable, you assign the defaults.playerOptions

That means, defaults.playerOptions goes away and becomes defaultOptions

That’s what I understand it to mean.

I don’t think you mean this:
defaultOptions.playerOptions

This:

 const optionParams = ["width", "height", "videoid", "host"];
        const defaultOptions = {}
        const defaultVars = defaultOptions.playerVars;
        const playerVars = settings.playerVars;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
        return playerOptions;
    }

I don’t understand, and I don’t know why.

Is assigned a particular javascript term?

Object.assign()

This: Did I get it? I know it broke the code what I did.
defaultOptions = Object.assign({},defaults.playerOptions);

      const optionParams = ["width", "height", "videoid", "host"];
        const defaultOptions = Object.assign({},defaults.playerOptions);
        const defaultVars = defaultOptions.playerVars;
        const playerVars = settings.playerVars;
        const playerOptions = Object.assign({}, defaultOptions, settings);
        playerOptions.playerVars = Object.assign({}, defaultVars, playerVars);
        return playerOptions;
    }