Understanding the JavaScript delete operator


#41

There you go, events is still needed too. Just add it below playerVars.

        settings.videoId = video.dataset.id;
        settings.playerVars = Object.assign({
                autoplay: 1,
                controls: 1
            }, settings);
        settings.events = {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        };

#42

None of this is needed now:
https://jsfiddle.net/89zwf62y/31/

    function combineSettings(oldSettings, newSettings) {
        const props = Object.keys(oldSettings);
        return props.reduce(function combine(combined, prop) {
            if (oldSettings[prop].toString() === "[object Object]") {
                const oldProp = oldSettings[prop] || {};
                const newProp = newSettings[prop] || {};
                combined[prop] = combineSettings(oldProp, newProp);
            } else if (newSettings.hasOwnProperty(prop)) {
                combined[prop] = newSettings[prop];
            }
            return combined;
        }, oldSettings);
    }

#43

None of it.


#44

Is this where console log would go, and how it would be written?
https://jsfiddle.net/89zwf62y/34/

        };
        players.push(new YT.Player(video, settings));
        console.log(JSON.parse(JSON.stringify(settings)));
    }

#45

There’s no need for the console.log.

If you wanted to get fancy, you could even use Object.assign to add those different properties all at once.

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            playerVars: Object.assign({
                autoplay: 1,
                controls: 1
            }),
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

https://jsfiddle.net/pmw57/89zwf62y/38/


#46

start, end, loop don’t work in that code.
https://jsfiddle.net/89zwf62y/41/

How would you fix that?

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

#47

I missed a settings.

Here it is updated and working.

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            playerVars: Object.assign({
                autoplay: 1,
                controls: 1
            }, settings),
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

https://jsfiddle.net/pmw57/nb1gyse8/


#48

Thank you very much for your help with this. Greatly appreciated beyond belief.

I like to keep console log in these so I remember how to use it, because I’ve never used it that often. But now I’m beginning to do so.

     }, settings)));
        console.log(JSON.parse(JSON.stringify(settings)));
    }

#49

@asasass , I’m not understanding what you’re doing with this line.

the stringify runs first
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

converts a JavaScript object or value to a JSON string

then parse
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

parses a JSON string, constructing the JavaScript value or object described by the string

Doesn’t that result in what was started with to begin with and could simply be written as

console.log(settings); 

?


#50

I believe that came from other code that created a copy of an object. You’re dead right about logging only the settings object.


#51

oh, so this is all I needed then.

console.log(settings); 

Thank you.


#52

I think each gives you different results.

Each does different things, but I could be wrong.

console.log(settings);

console.log(JSON.parse(JSON.stringify(settings)));


#53

The parse/stringify one makes a copy of the settings object.
There is no benefit in doing that, especially when you’re logging it to the console.


#54

If there’s no cover over the video, how would I be able to get it to load on the screen?
https://jsfiddle.net/sx87fa65/9/

Would I be able to use this:
Without load.js
https://jsfiddle.net/sx87fa65/11/

    function init(opts) {
       ("https://www.youtube.com/player_api").then(function() {
            YT.ready(function() {
                addVideo(opts.video);
            });
        });
    }
    return {
        init
    };
}());
const load = (function() {
    "use strict";

    function _load(tag) {
        return function(url) {
            return new Promise(function(resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function() {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());

const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(0); // percent
    }

    function onPlayerStateChange(event) {
        const player = event.target;
        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video) {
        new YT.Player(video, {
            videoId: video.dataset.id,
            width: 606,
            height: 344,
            playerVars: {
                autoplay: 1,
                controls: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                loop: true,
                start: 200,
                end: 204
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }

    function init(opts) {
        load.js("https://www.youtube.com/player_api").then(function() {
            YT.ready(function() {
                addVideo(opts.video);
            });
        });
    }
    return {
        init
    };
}());

#55

From what I can tell, that load function has nothing to do with the video cover.


#56

I added it back in, how would I get the video to load on the screen?

What is it missing?
https://jsfiddle.net/sx87fa65/13/


#57

I recommend that you go back to working code, so that removals can then occur in a smarter manner that keeps everything working.


#58

What should I remove first ?
https://jsfiddle.net/sx87fa65/14/


#59

That all depends on what you want to remove.

Is it just the single player cover that you want to remove?


#60

Yes, it’s just the cover I want to remove.

I removed the jacket from the html and the css here:
https://jsfiddle.net/sx87fa65/16/

TypeError: cover is null

And now the cover is removed from the top of the javascript:
https://jsfiddle.net/sx87fa65/18/