Improving This
Single Player
let oldNumber = 0;
let NewNumber = 10;
function newRandomNumber(min, max) {
oldNumber = NewNumber;
NewNumber = Math.floor(Math.random() * max) + min;
if (NewNumber == oldNumber) {
newRandomNumber(min, max);
} else {
return NewNumber;
}
}
To This:
Single Player
let newNumber;
function newRandomNumber(min, max) {
newNumber = Math.floor(Math.random() * max) + min;
return newNumber;
}
Improved Further Here:
Single Player
https://jsfiddle.net/qnbyg5x9/142/
function newRandomNumber(min, max) {
const newNumber = Math.floor(Math.random() * max) + min;
return newNumber;
}
Improved Even Further:
I think this may be as far as it can be improved.
Single Player
https://jsfiddle.net/qnbyg5x9/143/
function newRandomNumber(min, max) {
return Math.floor(Math.random() * max) + min;
}
I’m having issues here:
Single + Grid Player
Not Working:
https://jsfiddle.net/cgrw42zy/12/
This is how it works in the single player, no grid.
https://jsfiddle.net/qnbyg5x9/143/
Also, the top player works if you remove this piece from the code:
The only reason why it disappears is because it’s not working.
index: newRandomNumber(0, 10),
Undeclared ‘newRandomNumber’.
index: newRandomNumber(0, 10),
I don’t know how that will be resolved.
newRandomNumber is in 2 different functions where they are not able to connect to each other.
They would need to be inside the same function I think.
newRandomNumber is here:
const videoPlayer = (function makeVideoPlayer() {
"use strict";
function newRandomNumber(min, max) {
return Math.floor(Math.random() * max) + min;
}
newRandomNumber is here:
function loadPlayer(opts) {
"use strict";
loadPlayer({
target: ".jacketc",
width: 600,
height: 338,
index: newRandomNumber(0, 10),
loop: true,
listType: "playlist",
list: "TLGGCePU6hOj6WQyMjEyMjAxOA"
});
Full Code:
function onPlayerStateChange(event) {
const player = event.target;
player.setShuffle(true);
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 newRandomNumber(min, max) {
return Math.floor(Math.random() * max) + min;
}
function addVideo(video, settings) {
players.push(new YT.Player(video, Object.assign({
videoId: video.dataset.id,
host: "https://www.youtube-nocookie.com",
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;
opts.autoplay = 1;
opts.controls = 1;
opts.rel = 0;
opts.iv_load_policy = 3;
opts.fs = 0;
opts.disablekb = 1;
function paramInOpts(settings, param) {
if (opts[param] !== undefined) {
settings[param] = opts[param];
}
return settings;
}
const settingsParams = ["width", "height", "host", "videoid"];
const settings = settingsParams.reduce(paramInOpts, {});
const playerVarsParams = ["autoplay", "index", "cc_load_policy",
"controls", "disablekb", "end", "fs", "iv_load_policy", "list",
"listType", "loop", "playlist", "rel", "start"];
settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
videoPlayer.init(video, settings);
}
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,
index: newRandomNumber(0, 10),
loop: true,
listType: "playlist",
list: "TLGGCePU6hOj6WQyMjEyMjAxOA"
});