Preventing the browser from reading the YouTube code until the image was clicked

asasass · December 1, 2018, 12:14am

I’m simplifying this code

function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.a.src;
      const otherVideos = (player) => player.a.src !== temp;
      const pauseVideo = (player) => player.pauseVideo();
      players.filter(otherVideos).forEach(pauseVideo);
    }
  }

By putting it into here:

Into Here:

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

I got up to here:
const otherVideos = (video) => video !== player.a.src !== temp;
And I’m having issues with this line:
https://jsfiddle.net/d72Lp43v/396/

 function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.a.src;
      const otherVideos = (video) => video !== player.a.src !== temp;
      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);
    }
  }

Paul_Wilkins · December 1, 2018, 12:16am

Does that first lot of code do anything that isn’t being done by the second lot of code?

I think that the answer is no, and you should just delete it.

asasass · December 1, 2018, 12:18am

The 1st code only has playing.

The 2nd code has both playing and ended.

Paul_Wilkins · December 1, 2018, 12:19am

Exactly. When asking if the first code does anything that isn’t done by the second code, the answer is no.

asasass · December 1, 2018, 12:21am

The 1st code is what I was able to get up to.

From that point, is adding it into here:

 function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.a.src;
      const otherVideos = (video) => video !== player.a.src !== temp;
      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);
    }
  }

Paul_Wilkins · December 1, 2018, 12:25am

Why are you doing that when the second set of code already works?

asasass · December 1, 2018, 12:26am

It shuts off right away after it’s clicked on:
That’s the issue.

const otherVideos = (video) => video !== player.a.src !== temp;

Paul_Wilkins · December 1, 2018, 12:28am

I am not going anywhere near that code with temp, until you convince me that it’s needed.

The other code already works.

asasass · December 1, 2018, 12:29am

How would I add
player.a.src
To this code?

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

Paul_Wilkins · December 1, 2018, 12:32am

You don’t. That’s not helpful to you at all. It breaks far too easily.

If you ever have a video with the same source, which is the case with most of your video pages, that fails to work for you.

asasass · December 1, 2018, 12:37am

How would I fix this line?

We can call temp something else.
const otherVideos = (video) => video !== player.getVideoUrl() !== temp;

All urls are different in the code.

player.getVideoUrl()


  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.getVideoUrl();
      const otherVideos = (video) => video !== player.getVideoUrl() !== temp;
      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);
    }
  }

Paul_Wilkins · December 1, 2018, 12:43am

Why are you wanting to compare video.getVideoUrl() with player.getVideoUrl() when just comparing video with player already achieves the same thing with less potential problems?

asasass · December 1, 2018, 12:47am

That’s how I did it here:

This:

  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.getVideoUrl();
      players.forEach(function pauseOtherVideos(player) {
        if (player.getVideoUrl() != temp) {
          player.pauseVideo();
        }
      });
    }
  }

Would become this:
And I changed all the urls so it will work this time.

  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.PLAYING) {
      const temp = event.target.getVideoUrl();
      const otherVideos = (player) => player.getVideoUrl() != temp;
      const pauseVideo = (player) => player.pauseVideo();
      players.filter(otherVideos).forEach(pauseVideo);
    }
  }

Paul_Wilkins · December 1, 2018, 12:48am

Temp is useless and not worthy of your or my time. Goodbye for the day.

asasass · December 1, 2018, 1:53am

Temp is now removed.

Is this better now?

This one uses: getVideoUrl
const otherVideos = (video) => video.getVideoUrl() !== player.getVideoUrl()

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.PLAYING) {
      const otherVideos = (video) => video.getVideoUrl() != player.getVideoUrl()
      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);
    }
  }

This one uses: a.src
const otherVideos = (video) => video.a.src !== player.a.src;

 function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.PLAYING) {
      const otherVideos = (video) => video.a.src !== player.a.src;
      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);
    }
  }

asasass · December 1, 2018, 2:18am

Line is longer than 80 characters.
const otherVideos = (video) => video.getVideoUrl() !== player.getVideoUrl();

Update:
of these, which is the best way to reconfigure the line?

Do you like how Code 1 is set up, or no?

Code 1

    const playerURL = player.getVideoUrl();
    if (event.data === YT.PlayerState.PLAYING) {
    const otherVideos = (video) => video.getVideoUrl() !== playerURL;

What’s the difference between Code 2 & Code 3?
2 uses a Return and Braces {}, 3 uses only Parentheses ()

Which one of those is better?

Code 2

      const otherVideos = (video) => {
        return video.getVideoUrl() !== player.getVideoUrl();
      };

Code 3
https://jsfiddle.net/hzyrfkwb/14/

      const otherVideos = (video) => (
        video.getVideoUrl() !== player.getVideoUrl()
      );

    function onPlayerStateChange(event) {
        const player = event.target;
        if (event.data === YT.PlayerState.PLAYING) {
            const otherVideos = (video) => video.getVideoUrl() !== player.getVideoUrl();
            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);
        }
    }

asasass · December 1, 2018, 7:27am

Update:

Code 3 is no good because it’s still 80 characters or more.
const otherVideos = (video) => (video.getVideoUrl() !== player.getVideoUrl());

Code 2 there’s an issue with this:

How would I fix this?

Expected ‘function’ and instead saw ‘=>’.
const otherVideos = (video) => {

      const otherVideos = (video) => {
        return video.getVideoUrl() !== player.getVideoUrl();
      };

Is this how I would fix Code 2?

function onPlayerStateChange(event) {
        const player = event.target;

        function otherVideos(video) {
            return video.getVideoUrl() !== player.getVideoUrl();
        }

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

Paul_Wilkins · December 1, 2018, 7:54am

Even better than comparing video.getVideoUrl() !== player.getVideoUrl() is to instead compare video !== player

Not only does it work better, it’s shorter too.

asasass:

Code 2 there’s an issue with this:
https://jsfiddle.net/hzyrfkwb/17/

How would I fix this?

Expected ‘function’ and instead saw ‘=>’.
const otherVideos = (video) => {
      const otherVideos = (video) => {
        return video.getVideoUrl() !== player.getVideoUrl();
      };

Curly braces are used to group multiple statements together. JSLint expects arrow-notation to be used on only one statement. Curly braces tempt you to use more than one statement, so curly braces aren’t used.

This function:

      const otherVideos = function(video) {
        return video !== player;
      };

has only one statement and is converted to arrow-notation by removing the word function, removing the opening and closing curly braces, and removing return

      const otherVideos = (video) => video !== player;

asasass · December 1, 2018, 8:04am

I got this one passing jslint:

That’s because the arrow is now removed, and function is added to it.

            const otherVideos = function(video) {
                return video.getVideoUrl() !== player.getVideoUrl();
            };

Paul_Wilkins · December 1, 2018, 8:09am

Yes, arrow notation is supposed to be for small simple pieces of logic. Not for when you are delving into getVideoUrl of two separate things. JSLint is trying to tell you that what you’re doing there is not simple. Start listening to it.

You need to answer why you insist on using getVideoUrl instead of just comparing the video and player object themselves.