<!DOCTYPE html>
<html>
<head>
<title>Disco Version - Dynamic Javascript and the YouTube API - Thanks to https://developers.google.com/youtube/iframe_api_reference ... RJM Programming - May, 2018</title>
</head>
<body>
<a onclick="location.href=document.URL.split('?')[0].split('#')[0];" id=xshuffle title=Refresh style='display:inline-block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🎥</a> <a onclick="location.href='#dshuffle';" id=ashuffle title=Shuffles style='display:inline-block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🔀</a> <span id=wshuffle style='font-size:8px;visibility:hidden;'>Disco YouTube Videos - RJM Programming - December, 2019</span>

<table border=1 style=width:100%;height:100vh;>
<tr><td id="vplayer1"></td><td id="vplayer2"></td><td id="vplayer3"></td></tr>
<tr><td id="vplayer4"></td><td id="vplayer5"></td><td id="vplayer6"></td></tr>
<tr><td id="vplayer7"></td><td id="vplayer8"></td><td id="vplayer9"></td></tr>
<tr style=display:none;><td id="vplayer10"></td><td id="vplayer11"></td><td id="vplayer12"></td></tr>
<tr style=display:none;><td id="vplayer13"></td><td id="vplayer14"></td><td id="vplayer15"></td></tr>
<tr style=display:none;><td id="vplayer16"></td><td id="vplayer17"></td><td id="vplayer18"></td></tr>
<tr style=display:none;><td id="vplayer19"></td><td id="vplayer20"></td><td id="vplayer21"></td></tr>
<tr style=display:none;><td id="vplayer22"></td><td id="vplayer23"></td><td id="vplayer24"></td></tr>
</table>
<div id=dshuffle style=visibility:hidden;display:inline-block;><a onclick="location.href='#ashuffle';" id=zshuffle title=Top style='display:block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🎥</a><br><select id=sshuffle style=display:inline-block;background-color:#e0e0e0; multiple><option value=''>Single selections shuffle with your choice first played (for up to 9 slots available), below ...</option></select> <input onclick=process(this); type=button id=bshuffle style=display:inline-block;background-color:yellow;vertical-align:top; value=Shuffle></input></div>
<script>

function process(bsin) {
var jj=0, mbo='', mlist='', mdelim='', vscnt=0;
var sin=document.getElementById(bsin.id.replace('b','s'));
for (var i=0; i<sin.options.length; i++) {
if (sin.options[i].selected) {
if (sin.options[i].value != '') {
jj++;
vscnt++;
mbo=sin.options[i].value.split('|')[0];
mlist+=mdelim + sin.options[i].value.split('|')[0];
mdelim=',';
}
}
}
if (jj == 1) {
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=') + '&mustbeone=' + encodeURIComponent(mbo)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
} else if (jj > 1) {
if (oclickcnt == vscnt) { mlist=olist; }
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=').replace('videolist=','videoxxxlist=') + '&videolist=' + encodeURIComponent(mlist)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
}
oclickcnt=0;
occ=[];
olist='';
odelim='';
}

function shuffle(array) { // thanks to https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var currentIndex = array.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...
while (0 !== currentIndex) {

// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

return array;
}

var scont='<option value="">Single selections shuffle with your choice first played (for up to 9 slots available), below ...</option>';
var splaycnt=0;
var curplay='';
var oclickcnt=0;
var occ=[];
var mid=-1;
var olist='';
var odelim='';
var precp='';
var precv=0;
var curdur=-1;
var vplayer=[];
var yid=['zPv0S1-ETdI','qYf35nBq8Oo','Se3kxManWUY','i7hk-TupE5g','LnK0tnaNUag','dbH4Amzn-Rk','BL-Jg7CyqLQ','0v7Ea7kg2gA','NRjWEE0hmjQ'];
yid=['ARt9HV9T0w8#GG','OAfxs0IDeMs#Heart','huavJMGUbiI#BB'];
yid=location.search.split('videolist=')[1] ? eval("['" + decodeURIComponent(location.search.split('videolist=')[1].split('&')[0]).replace(/\,/g,"','") + "']") : shuffle(['h2r59-Xmge4','yT1iDKkZNYU','S-u6qdeaPoE','Nm-ISatLDG0','Gs069dndIYk','dwxjpIJm9JM','8iwBM_YB1sE','CS9OO0S5w2k','I_izvAbhExY','xFrGuyw1V8s','T6fVDAjs9f0','gQ8O9SidZbs','_QNEf9oGw8o','1ff29VSvP_s','4-Vz6tNfV1Y','Zi_XLOBDo_Y','xfmZRiePkEM','iPUmE-tne5U','m5y2GaW0MZA','yioNn7XS-bw','XKuJUxGntRI','vsBak0oCgdY','eBpYgpF1bqQ','Q8xuUdI1an0']);
var mbo=location.search.split('mustbeone=')[1] ? decodeURIComponent(location.search.split('mustbeone=')[1].split('&')[0]) : '';

if (mbo != '') {
var oyid=[mbo];
for (var iu=0; iu<yid.length; iu++) {
if (yid[iu] != mbo) {
oyid.push(yid[iu]);
}
}
yid=oyid;
}

var curv=0;
var dostop=true;
var done=[];
var stopthese=[];
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
//var vplayer1, vplayer2;
function onYouTubeIframeAPIReady() {
for (var ii=1; ii<=yid.length; ii++) {
done.push(false);
vplayer.push(eval("new YT.Player('vplayer" + ii + "', { height: '260', width: '33%', videoId: '" + yid[-1 + ii] + "', playerVars: { autoplay: 0, controls: 1, disablekb: 1, loop: 0, modestbranding: 0, showinfo: 0, autohide: 1, color: 'white', iv_load_policy: 3, theme: 'light', rel: 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }})"));
}
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
var dis, cti, gvd, uri, jis, prv='', iyi=0, huht='';
uri=event.target.getVideoUrl();
jis=yid.indexOf(uri.split('=')[1].split('&')[0]);
dis=event.target.getDuration();
cti=event.target.getCurrentTime();
gvd=event.target.getVideoData().title;
yid[jis]+='|' + dis + '|' + cti + '|' + gvd;
//alert(yid[jis]);
splaycnt++;
if (splaycnt > 9) {
if (scont.indexOf(yid[jis]) == -1) {
prv=scont;
if (scont.indexOf('>' + gvd + '<') == -1) { scont=prv.split('</option>')[0] + '</option><option id="' + yid[jis].split('|')[0] + '" onclick="oclick(this);" value="' + yid[jis] + '">' + gvd + '</option>' + prv.replace(prv.split('</option>')[0] + '</option>',''); }
}
} else {
if (scont.indexOf('>' + gvd + '<') == -1) { scont+='<option id="' + yid[jis].split('|')[0] + '" onclick="oclick(this);" value="' + yid[jis] + '">' + gvd + '</option>'; }
if (splaycnt == 9 && yid.length > 9) {
for (iyi=0; iyi<yid.length; iyi++) {
if (scont.indexOf(yid[iyi]) == -1) {
try {
huht=vplayer[splaycnt].getVideoData().title;
prv=scont;
if (scont.indexOf('>' + gvd + '<') == -1) { scont=prv.split('</option>')[0] + '</option><option id="' + yid[iyi].split('|')[0] + '" value="' + yid[iyi] + '" onclick="oclick(this);">' + gvd + '</option>' + prv.replace(prv.split('</option>')[0] + '</option>',''); }
} catch(rtde) {
}
}
}
}
}
event.target.playVideo();
event.target.mute();
}

function midit() {
if (mid >= 0) {
var imid=mid;
mid=-1;
try {
vplayer[imid].mute();
} catch (htjh) { }
}
}

// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) { // && !done) {
curplay=curplay;
} else if (event.data == YT.PlayerState.CUED) { // && !done) {
curplay=curplay;
} else if (event.data == YT.PlayerState.PAUSED) { // && !done) {
//curv=eval(eval(1 + curv) % eval('' + 9));
//alert('' + curv);
if (curplay != '') { precv=curv; precp=curplay; }
curplay='';
//vplayer[curv].playVideo();
} else if (event.data == YT.PlayerState.PLAYING) { // && !done) {
if (dostop) {
stopthese.push(event.target);
setTimeout(stopVideo, 6000);
} else if (curplay == '') {

if (precp == event.target.getVideoUrl().split('=')[1].split('&')[0]) {
//alert(1);
curplay=precp;
curv=precv;
} else if (1 == 6) {
//alert(11);
mid=precv;
if (1 == 2) { vplayer[curv].mute(); }
}

curplay=event.target.getVideoUrl().split('=')[1].split('&')[0];
curdur=eval('' + event.target.getDuration());
for (var ijj=0; ijj<yid.length; ijj++) {
if (yid[ijj].indexOf(curplay + '|') == 0) { curv=ijj; }
}

if (mid >= 0) { setTimeout(midit, 2000); }

//}
//alert(curplay + ' ... ' + curv);
} else {
//console.log('' + eval('' + event.target.getCurrentTime()) + ' >= ' + curdur);
if (eval(2 + eval('' + event.target.getCurrentTime())) >= curdur) {
// alert('ready');
vplayer[curv].mute();
curv=eval(eval(1 + curv) % eval('' + 9));
//alert('' + curv);
//vplayer[curv]=eval("new YT.Player('vplayer" + eval(1 + curv) + "', { height: '260', width: '33%', videoId: '" + yid[curv] + "', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }})");
curplay='';
vplayer[curv].seekTo(0,true);
vplayer[curv].unMute();
vplayer[curv].playVideo();
//alert('2:' + curv);
}
}
//done = true;
} else if (curplay != '') {
//console.log('' + eval('' + event.target.getCurrentTime()) + ' >= ' + curdur);
if (eval(2 + eval('' + event.target.getCurrentTime())) >= curdur) {
// alert('Ready');
vplayer[curv].mute();
curv=eval(eval(1 + curv) % eval('' + 9));
//alert('' + curv);
curplay='';
vplayer[curv].seekTo(0,true);
vplayer[curv].unMute();
vplayer[curv].playVideo();
//alert('3:' + curv);
}
}
}

function newonPlayerStateChange(event) {

//YT.PlayerState.ENDED
//YT.PlayerState.PLAYING
//YT.PlayerState.PAUSED
//YT.PlayerState.BUFFERING
//YT.PlayerState.CUED

// const playerState = {
//UNSTARTED: -1,
//ENDED: 0,
//PLAYING: 1,
//PAUSED: 2,
//BUFFERING: 3,
//CUED: 5,
// };

document.title+=' . ' + event.data;

if (event.data == YT.PlayerState.BUFFERING) { // && !done) {
curplay=curplay;
} else if (event.data == YT.PlayerState.CUED) { // && !done) {
curplay=curplay;
} else if (event.data == YT.PlayerState.PAUSED) { // && !done) {
//curv=eval(eval(1 + curv) % eval('' + 9));
//alert('' + curv);
if (curplay != '') { precv=curv; precp=curplay; event.target.mute(); }
curplay='';
//vplayer[curv].playVideo();
} else if (event.data == YT.PlayerState.PLAYING) { // && !done) {
if (dostop) {
stopthese.push(event.target);
setTimeout(stopVideo, 6000);
} else if (curplay == '') {
if (precp == event.target.getVideoUrl().split('=')[1].split('&')[0]) {
curplay=precp;
curv=precv;
} else {
vplayer[curv].mute();
}
curplay=event.target.getVideoUrl().split('=')[1].split('&')[0];
curdur=eval('' + event.target.getDuration());
for (var ijj=0; ijj<yid.length; ijj++) {
if (yid[ijj].indexOf(curplay + '|') == 0) { curv=ijj; }
}
//alert(curplay + ' ... ' + curv);
} else {
if (curplay != '' || precp == event.target.getVideoUrl().split('=')[1].split('&')[0]) {
if (curplay != event.target.getVideoUrl().split('=')[1].split('&')[0]) {
if (curplay == '' && precp == event.target.getVideoUrl().split('=')[1].split('&')[0]) {
curplay=precp;
curv=precv;
} else {
vplayer[curv].mute();
curplay=event.target.getVideoUrl().split('=')[1].split('&')[0];
curdur=eval('' + event.target.getDuration());
for (var ijjx=0; ijjx<yid.length; ijjx++) {
if (yid[ijjx].indexOf(curplay + '|') == 0) { curv=ijjx; }
}
}
}
}
//console.log('' + eval('' + event.target.getCurrentTime()) + ' >= ' + curdur);
if (eval(2 + eval('' + event.target.getCurrentTime())) >= eval('' + curdur)) {
// alert('ready');
document.title+=' .. ' + event.data;
vplayer[curv].mute();
curv=eval(eval(1 + curv) % eval('' + 9));
//alert('' + curv);
//vplayer[curv]=eval("new YT.Player('vplayer" + eval(1 + curv) + "', { height: '260', width: '33%', videoId: '" + yid[curv] + "', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }})");
curplay='';
vplayer[curv].unMute();
vplayer[curv].playVideo();
vplayer[curv].seekTo(0,true);
precp='';
//for (var iyx=0; iyx<vplayer.length; iyx++) {
//if (iyx != curv) { vplayer[iyx].mute(); }
//}
//alert('2:' + curv);
}
}
//done = true;
} else if (curplay != '' && event.data == YT.PlayerState.ENDED) {
//console.log('' + eval('' + event.target.getCurrentTime()) + ' >= ' + curdur);
if (eval(2 + eval('' + event.target.getCurrentTime())) >= eval('' + curdur)) {
// alert('Ready');
document.title+=' ... ' + event.data;
vplayer[curv].mute();
curv=eval(eval(1 + curv) % eval('' + 9));
//alert('' + curv);
curplay='';
//if ( player.isMuted() && player.getPlayerState() == 2 && isUnMuted ) {
//}
vplayer[curv].unMute();
vplayer[curv].playVideo();
vplayer[curv].seekTo(0,true);
precp='';
//for (var iy=0; iy<vplayer.length; iy++) {
//if (iy != curv) { vplayer[iy].mute(); }
//}
//alert('3:' + curv);
}
}
}

function oclick(opto) {
oclickcnt++;
olist+=odelim + opto.id.split('|')[0];
odelim=',';
}

function undostop() {
document.getElementById('xshuffle').style.visibility='visible';
document.getElementById('wshuffle').style.visibility='visible';
if (yid.length > 9) {
document.getElementById('ashuffle').style.visibility='visible';
document.getElementById('zshuffle').style.visibility='visible';
document.getElementById('sshuffle').size=eval(-1 + eval('' + scont.split('</option>').length));
document.getElementById('sshuffle').innerHTML=scont;
document.getElementById('dshuffle').style.visibility='visible';
}
dostop=false;
}

function stopVideo() {
stopthese[0].stopVideo();
stopthese.shift();
}

setTimeout(undostop, 9000);

</script>
</body>
</html>