Are 2 Math.floor's needed or necessary in this code?

javascriptcoding5678 · August 25, 2021, 6:24pm

This is the code I am removing duplication from:
https://jsfiddle.net/3aj02byv/

The original code was using 2 Math.floors, I reduced it to 1.

The original code was also using 2 separate arrays, I reduced it to one.

Right now I am having difficulty adding function onStateChange from the original code,

Adding it to the code I am working on.
https://jsfiddle.net/8fzmtxeu/

This is the part of the code that allows the video to change over to the next video after the one before it finishes in a random order.

function onStateChange(evt) {
        if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

JeremyLT · August 25, 2021, 6:26pm

What kind of difficulty are you experiencing? What specifically do you need help with?

javascriptcoding5678 · August 25, 2021, 6:27pm

Adding this part:

   function onStateChange(evt) {
        if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

To work in here:
https://jsfiddle.net/8fzmtxeu/



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

    function rotateYT() {
        const videos = [
            "0dgNc5S8cLI",
            "mnfmQe8Mv1g",
            "CHahce95B1g",
            "2VwsvrPFr9w"
        ];

        const index = Math.floor(Math.random() * videos.length);
        return videos[index];
    }

    function addPlayer(video) {
        const videoID = rotateYT();
        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            videoId: videoID,

JeremyLT · August 25, 2021, 6:29pm

Ok, that is not at all specific. Without any details, I cannot help.

We do not write code for users on the forum. If you want assistance, you need to actually talk about what specifically you need help with.

What about your code is not working correctly?

What have you tried?

What is the current result?

What is the desired result?

We are not a vending machine of code solutions.

javascriptcoding5678 · August 25, 2021, 6:31pm

The desired result is having the YouTube player being able to play one video after another in a random order from an array of YouTube ids.

After one song finishes, it goes to the next video and starts playing it.

How it works here:
https://jsfiddle.net/3aj02byv/

In that code there is too much duplication.

So, I am trying to reduce the duplication:

and I got this far:
https://jsfiddle.net/8fzmtxeu/

Currently, it is only able to play 1 video.

This is the part of the code that allows the video to change over to the next video after the one before it finishes.


 function onStateChange(evt) {
        if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

JeremyLT · August 25, 2021, 6:37pm

Ok, what have you tried in order to reduce the duplication? What lines are you most worried about? Which part feels repetitive to you?

javascriptcoding5678 · August 25, 2021, 6:40pm

I got the duplication down to this:
https://jsfiddle.net/8fzmtxeu/

 function rotateYT() {
        const videos = [
            "0dgNc5S8cLI",
            "mnfmQe8Mv1g",
            "CHahce95B1g",
            "2VwsvrPFr9w"
        ];

        const index = Math.floor(Math.random() * videos.length);
        return videos[index];
    }

    function addPlayer(video) {
        const videoID = rotateYT();
        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            videoId: videoID,

I’m up to trying to figure out how to add this piece in.

function onStateChange(evt) {
        if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

javascriptcoding5678 · August 25, 2021, 6:41pm

The original code was using 2 Math.floors, I reduced it to 1.

https://jsfiddle.net/3aj02byv/

The original code was also using 2 separate arrays, I reduced it to one.

        const videos = [
            "0dgNc5S8cLI",
            "mnfmQe8Mv1g",
            "CHahce95B1g",
            "2VwsvrPFr9w"
        ];

Right now I am having difficulty adding function onStateChange from the original code,

Adding it to the code I am working on.
https://jsfiddle.net/8fzmtxeu/

javascriptcoding5678 · August 25, 2021, 10:26pm

I can try to write the code a different way where it might be easier to add the Math.floor code to it.

Getting it to work where the videos are able to play one after another first, then the last thing would be adding the Math.floor code to it so that the videos play in a randomized order.

I’m going to try that now and see what I am able to do.

javascriptcoding5678 · August 25, 2021, 11:35pm

Now I just need help figuring out how to add Math.floor to onStateChange which is meant to play the videos in a randomized order.

https://jsfiddle.net/yroscqd3/

Currently it only plays in the order that the ids are in.

The videos play one after the other.

const videoPlayer = (function makeVideoPlayer() {

    let player = null;
    let currentVideoId = 0;

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    const videoID = [
        "0dgNc5S8cLI",
        "mnfmQe8Mv1g",
        "CHahce95B1g",
        "2VwsvrPFr9w"
    ];

    function onPlayerReady(event) {
        event.target.loadVideoById(videoID[currentVideoId]);
        player.setVolume(100); // percent

    }

    function onStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoID.length) {
                player.loadVideoById(videoID[currentVideoId]);
            }
        }
    }


    function addPlayer(video) {

        const config = {
            height: 360,
            host: "https://www.youtube-nocookie.com",
            width: 640
        };

This is the Math.floor code that randomizes the order of the video ids.

You can see how it works in the code here.

The videos play in a randomized order.
https://jsfiddle.net/3aj02byv/

I need help figuring out how to add it to the above code I am working on. @colinthornton

let videoList = [];

function onStateChange(evt) {
        if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }


        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

javascriptcoding5678 · August 26, 2021, 3:02am

I’m stuck and having difficulty adding Math.floor.

javascriptcoding5678 · August 26, 2021, 9:19am

Both of these codes have similar functionality.

Code 1
https://jsfiddle.net/bmnf0Lkw/

Code 2
https://jsfiddle.net/3aj02byv/

Both codes are set up to allow another video to start after one ends.

In Code 1 it is easier to understand what is happening in the code.

    function onStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoID.length) {
                player.loadVideoById(videoID[currentVideoId]);
            }
        }
    }

In Code 2 it has the added Math.floor code which allows for the videos to play in a randomized order.

      //copy list of videos and remove last played id so it doesn't play again

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

      //get random index and remove the id from the array

const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];

Would the Math.floor code from Code 2 be able to be added to Code 1 the code that is able to be more understood?

jsdisco · August 26, 2021, 3:02pm

What does your first function do?

Whenever a video has ended, it goes to the next, because of this:

currentVideoId++

You just go from index 0 to 1 to 2 and so on.

Now instead of adding +1 to the index, you’d rather want a random number.

That random number should be between 0 and 4 (exclusive) because you have 4 IDs in your array. That’s index 0, 1, 2 and 3.

All you have to figure out is how to generate a random number between 0 and 4 with JavaScript. That random number will be your new currentVideoId.

In fact you don’t actually have to figure it out, you already have a piece of code that generates a random number between 0 and 4 (rather, between 0 and the length of the list).

javascriptcoding5678 · August 26, 2021, 3:21pm

Step 1, what do I do first?

jsdisco · August 26, 2021, 4:45pm

In general, first learn how to log stuff, so you know what it does.

This for example:

const test = Math.random() * 4

console.log('test is: ', test)

Once you’ve figured out what Math.random() * 4 does, you can extend it and include the Math.floor:

const test2 = Math.floor(Math.random() * 4);

console.log('test2 is: ', test2)

Log it multiple times. If you have an idea what’s happening, we’ll use it to fix your Code 1.

javascriptcoding5678 · August 26, 2021, 4:55pm

Like this?
Code 1
https://jsfiddle.net/fah80nwu/

const videoID = ["0dgNc5S8cLI", "2VwsvrPFr9w", "0dgNc5S8cLI", "CHahce95B1g"];
const index = Math.floor(Math.random() * 4);

or, this:

Code 2
https://jsfiddle.net/epLvwto1/

const videoID = ["0dgNc5S8cLI", "mnfmQe8Mv1g", "CHahce95B1g", "2VwsvrPFr9w"];

const videos = videoID [Math.floor(Math.random() * videoID.length)];

jsdisco · August 26, 2021, 6:32pm

You’re only guessing and make no efforts whatsoever to actually understand, debug and test your own code.

Here’s a solution to copy and paste

    function onStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId = Math.floor(Math.random() * videoID.length);
            player.loadVideoById(videoID[currentVideoId]);
        }
    }

javascriptcoding5678 · August 26, 2021, 6:38pm

Code 1 The 1st video is always the same.
https://jsfiddle.net/7zd3yebn/

In Code 2, the 1st song is random, it’s not always the same song.
https://jsfiddle.net/3aj02byv/

How would I add that to this? So the 1st song is random.

function onStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId = Math.floor(Math.random() * videoID.length);
            player.loadVideoById(videoID[currentVideoId]);
        }
    }

To do that, how much of this code would be added to it, and how?

Do I just add .splice to it?


  let videoList = [];

    function onStateChange(evt) {
        if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

jsdisco · August 26, 2021, 6:59pm

The first video in your Code 1 is always the same because of line 25:

let currentVideoId = 0;

So you always play the first video. Make currentVideoId a random number instead of 0.

I’m not going to write your whole code for you. I’m also not going to tell you “copy this part of code, change that line to xxx, then paste it into that part of your code, check back so I can tell you if it’s correct”. Because that’s the same as writing the code for you, just more work. Here’s how to generate a random number in JavaScript:

javascriptcoding5678 · August 26, 2021, 7:09pm

In Code !, the same song is able to play twice in a row, in Code 2, that never happens.

or, the 1st video will play again after the 2nd video.

Would I have to redo a lot of code to have it work with this?

    if (evt.data)

        {
            return;
        }

        if (!videoList.length) {
            videoList = videos.filter(function (a) {
                return a !== player.getVideoData().video_id;
            });
        }

        const id = videoList.splice(Math.floor(Math.random() * videoList.length), 1)[0];
        player.loadVideoById(id);
    }

Topic		Replies	Views
[SOLVED] Can this code be written without it beng a function? JavaScript	22	713	February 24, 2022
Extracting the random number generation into a separate function JavaScript	56	1478	March 6, 2022
Learn Functional Programming by Building a Spreadsheet - Step 102 JavaScript	2	725	January 8, 2025
Type game using javascript Code Feedback	9	413	June 1, 2021
Learn Functional Programming by Building a Spreadsheet - Step 102 JavaScript	2	244	February 28, 2025

Are 2 Math.floor's needed or necessary in this code?

Related topics