Understanding the JavaScript delete operator


#61

What do you want there instead?


#62

I want the video to show instead of being hidden.


#63

A good start is made by having the code click the cover.

Add this to the end of the code:

document.querySelector(".jacketc").click();

#64

https://jsfiddle.net/sx87fa65/20/

    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
document.querySelector(".jacketc").click();

#66

https://jsfiddle.net/sx87fa65/22/

    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
    document.querySelector(".jacketc").click();
}());

#67

Sorry, correction. You were right before, I misunderstood and thought you were putting it below the manageCover code.

I’m not in a good state of mind to help right now, so am leaving.


#68

That’s ok. Thanks for all your help before.
Also, you don’t have to help me with this code later.
If I want to come back to it, I’ll ask it another time.


#69

Should one of these functions be called function iife?
or there doesn’t need to be one called that in this code?
https://jsfiddle.net/g6oaht8f/45/


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")
    };
}());
(function manageCover() {
    "use strict";
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

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

    function onPlayerStateChange(event) {
        const player = event.target;
        if (event.data === YT.PlayerState.PLAYING) {
            const otherVideos = (video) => video !== player;
            const pauseVideo = (video) => video.pauseVideo();
            players.filter(otherVideos).forEach(pauseVideo);
        }
        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            playerVars: Object.assign({
                autoplay: 1,
                controls: 1,
                showinfo: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1
            }, settings),
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
        console.log(settings);
    }

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

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

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

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop: true
});
loadPlayer({
    target: ".playa",
    start: 8,
    end: 12,
    loop: true
});
loadPlayer({
    target: ".playb",
    start: 8,
    end: 40
});
loadPlayer({
    target: ".playc",
    start: 2,
    end: 90
});
loadPlayer({
    target: ".playd",
    start: 5,
    end: 60
});
loadPlayer({
    target: ".playe",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playf",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playg",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playh",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playi",
    start: 1,
    end: 50
});

#70

IIFE is just a placeholder, until a better name is found.

It’s like saying that you gave something in your hand. It’s much better to know that the thing in your hand is an apple, or a cricket ball, or a dagger.


#71

That which we call a rose . By any other name would smell as sweet.

JavaScript has native functions, libraries have names for their functions, and you, as a programmer can name your functions.

Other than avoiding naming conflicts, you can name them whatever makes sense to you. eg.

  • iife
  • immediately_invoked_function_expression
  • immediatelyInvokedFunctionExpression

It is generally a good idea to avoid short names and use names that will make reading the code easier. In this case “iife” is a common enough acronym that programmers will know what it means after they have seen it a few times.


#72

As IIFE sections are usually used to make a different function, I usually like to call them that.

There’s a difference with using make vs create too. “Make tea” meaning making a cuppa, whereas “Create tea” means growing the plants from which we harvest the tea leaves. With JavaScript, “make” is used for functions, and “create” is used for other things like objects or connections.

For example with this load line:

const load = (function() {

I would name that function makeLoad

const load = (function makeLoad() {

That way it leaves no questions about what it does.


#73

I was just told this about your adjustment:
https://jsfiddle.net/g6oaht8f/129/

You are merging settings to playerVars as well as oldSettings, which would make redundant properties in your result settings object.

Is there an issue with the way this one is set up?

What the person said, if it’s true, is that an issue with the way this one is set up?

If it is, how would that be fixed, adjusted?

But isn’t that what the code is supposed to do, why would there be something wrong with the way this is set up?

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

#74

It takes a lot more code to clean things up properly. When I’ve attempted to do things more properly like that though, you’ve fought strongly against every improvement, mostly i think because you failed to understand important reasons about why it was being done.

That’s not an issue though, as the youtube just ignores anything that isn’t supposed to be there.


#75

Correct, because I looked inside the console log and there weren’t any extra property values given to any videos where they didn’t belong. None were missing, and no extra property’s were added on.


#76

And so, because the youtube api lets you get away with bad behaviour, that’s the way that you’re happy with going for now.


#77

I don’t get it, why is that bad?


#78

It’s bad because we’re giving to the youtube api, things that it is not documented to support.


#79

What doesn’t it support?


#80

That would be everything that it is not documented to support, such as start/end values in the settings, or width/height values in playerVars.


#81

If it were me, I’d have a simple array of supported properties for each section, and use the initPlayer to properly organise things before sending that info to the videoPlayer init function.