YouTube Music Video External Javascript Drag Genericization Tutorial

YouTube Music Video External Javascript Drag Genericization Tutorial

Onto yesterday’s YouTube Music Video External Javascript More Genericization Tutorial‘s progress, today, we’ve …

• added recent GET argument functionalities …
  

  • Mr Smith Goes To Washington … and, today, our newly compiled …
  • Slow Classical Movements
  • Movie Soundtracks

  … into the top dropdown, and as they go to window.localStorage also, the options to clear window.localStorage as requested by the user …

• non-mobile only drag like functionality to swap “Brady Bunch” roles (we all knew Alice was young at heart) …
  
var curvalis=0;
var neednine=0;
var fromidis='', toidis='', lbd=false, latestidis='', trectis=null, prelatestidis='', tdvw=0, tdvh=0, tdoff=0, swapdone=false, tryfrom=9, preind=-1, lastind=-1;
var nogocnt=0;
var ouriframes=[], ouriftds=[];

function getsquare(e) {
var pos3=0, pos4=0, xoff=0, yoff=0;
if (e.touches) {
if (e.touches[0].pageX) {
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos3 = e.pageX;
pos4 = e.pageY;
}
if (eval(pos3 - trectis.left) >= eval('' + tdvw)) {
xoff++;
if (eval(pos3 - trectis.left) >= eval(2 * eval('' + tdvw))) {
xoff++;
}
}
if (eval(pos4 - trectis.top) >= eval('' + tdvh)) {
yoff++;
if (eval(pos4 - trectis.top) >= eval(2 * eval('' + tdvh))) {
yoff++;
}
}
//alert('xoff=' + xoff + ' and yoff=' + yoff);
if (prelatestidis != ouriframes[eval(tdoff + yoff * 3 + xoff)].id && lbd) {
if (prelatestidis != '') { fromidis=prelatestidis; }
//alert('Here in ' + ouriframes[eval(tdoff + yoff * 3 + xoff)].id + ' with button down=' + lbd + ' from ' + fromidis);
}
return ouriframes[eval(tdoff + yoff * 3 + xoff)].id;
}

function iflaterdo() {
ouriframes=document.getElementsByTagName('iframe');
ouriftds=document.getElementsByTagName('td');
trectis=document.getElementById('vplayer1').getBoundingClientRect();
tdvw=trectis.width;
tdvh=trectis.height;
trectis=document.getElementsByTagName('table')[0].getBoundingClientRect();
document.getElementsByTagName('table')[0].onmouseup=function(event) { if (event.which === 1) { lbd = false; fromidis=''; toidis=''; } };
document.getElementsByTagName('table')[0].onmousedown=function(event) { if (event.which === 1) { lbd = true; if (fromidis == '') { fromidis=' '; } } };
document.getElementsByTagName('table')[0].onmousemove=function(event) { if (event.which === 1) { lbd = true; if (fromidis == '') { fromidis=' '; } } else { lbd=false; } latestidis=getsquare(event); if (prelatestidis != latestidis) { prelatestidis=latestidis; if (lbd) { if (fromidis.trim() == '') { if (fromidis == ' ') { fromidis=latestidis; } } else if (lbd) { toidis=latestidis; swappos(fromidis, toidis); } } } };
}

• make textbox placeholder and dropdown (ie. select) element advice stand out more via CSS property text-shadow …
  
if (document.getElementById('dshuffle')) {
document.getElementById('dshuffle').innerHTML+='<style> select { text-shadow: -1px 1px 1px #e52dff; } #rshuffle::placeholder { text-shadow: -1px 1px 1px #e52dff; } #rshuffle:-ms-input-placeholder { text-shadow: -1px 1px 1px #e52dff; } #rshuffle::-ms-input-placeholder { text-shadow: -1px 1px 1px #e52dff; } </style>';
}


… via the changed youtube_brady_bunch.js external Javascript featuring in Yacht Rock, for example.

Previous relevant YouTube Music Video External Javascript More Genericization Tutorial is shown below.

YouTube Music Video External Javascript More Genericization Tutorial

Yesterday’s YouTube Music Video External Javascript Genericization Tutorial started our external Javascript genericizations with our Peer to Peer YouTube Web Application. Some may find it irritating, but we even use code like …


if (document.getElementById('sshuffle')) {
var ssos=document.getElementById('sshuffle').innerHTML.split('</option>');
console.log('sshuffle option numbers=' + eval(-1 + ssos.length));
if (eval(-1 + ssos.length) <= 1) {
if (typeof process == "function") {
nogocnt++;
if (nogocnt >= 3) { process(document.getElementById('sshuffle')); }
}
}
}


… to have external Javascript look back at its hosting webpage’s code, rather than duplicating effort, especially for optional workflow functionality. We don’t think it’s so bad, as we’d resiled ourselves to HTML iframe logic that looks back at its parent for clientside help, in the past.

With us, it’s in large part Javascript DOM here, and DOM has that …


// document.getElementById([elementId]).style.[CSSpropertyLessMinusBecomesCapital] = [value]; // eg .
document.getElementById('rshuffle').style.backgroundColor='#f9f9f9';


… ability to change the look of the webpage CSS styling.

And external Javascript can be the “backup” system, as it checks to see whether it needs to help populate that shuffle functionality dropdown at the bottom of the webpage, in that code snippet above.

The “right click” ideas of yesterday were okay for non-mobile, but not so much for mobile (where we now offer double click event functionality), and so we recoded …


if (document.getElementById('rshuffle')) {
if (('' + document.getElementById('rshuffle').placeholder).indexOf(' click ') == -1) {
betterhc=capitfl(document.URL.split('.htm')[0].split('/')[eval(-1 + document.URL.split('.htm')[0].split('/').length)].replace(/\_/g,' '));
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('rshuffle').placeholder+=' ... double click for ' + decodeURIComponent(inpttls[curvalis]);
document.getElementById('rshuffle').ondblclick=function(event) { if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); } };
} else {
document.getElementById('rshuffle').placeholder+=' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);
document.getElementById('rshuffle').oncontextmenu=function(event) { if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); } };
}
document.getElementById('rshuffle').style.backgroundColor='#f9f9f9';
} else {
var wascur=curvalis;
curvalis++;
if (curvalis >= eval('' + inpvals.length)) { curvalis=0; }
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf(' ... double click for ') != -1) {
document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... double click for ')[0] + ' ... double click for ' + decodeURIComponent(inpttls[curvalis]);
}
} else {
if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf(' ... right click (or two finger gesture) for ') != -1) {
document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... right click (or two finger gesture) for ')[0] + ' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);
}
}
}
}


Yesterday’s code had a curiosity, we were curious to know whether you were curious about … curiouser and curiouser …

var inpvals=[‘zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ’];
var inpttls=[encodeURIComponent(‘Mr Smith Goes To Washington’)];

Why use arrays for what is ostensibly scalar data? Well, arrays are not much more bother to work with (ie. just {scalarName}[0] really), and they give scope to …

• remind the programmer of a future intention … and, in our case, today …
• immmediately start to use array data (ie. with [index] above [0] perhaps) …
  
var inpvals=['gZXKl36YS9k,HWqKPWO5T4o,AFa1-kciCb4,F2RnxZnubCM,3JWTaaS7LdU,U5zbcTxxz6M,hDaQF-LNrug,eFHdRkeEnpM,YnzgdBAKyJo,-p6OH7FoWoQ,057A1RdssoU,DhlPAj38rHc,yyV_eb3p3Zw,dfe8tCcHnKY,K69tbUo3vGs,_D0ZQPqeJkk,jA9NbU_R-y4,8XDB7GMnbUQ,z9_S411e9RI,X6ymVaq3Fqk,JYMySrHL0Fo,RuxHLzwlDY4,Wkr8iZlKaRk,4Yd2PzoF1y8,-9012SGz-yY,oXY5UWBmIFs,gCTeh8avZQI,78N2SP6JFaI,ntXJJwEk1NA','FtE3hoR_Nvo,W5IKT_xue4o,IfaGhyK78E8,BuN3yCmHb_U,TdiAwCPb_As,euZcUku9XiE,aMs0rNtBZJk,sUgoBb8m1eE,Pppexz-KKig,s-CpJpWm9Vs,2WfaotSK3mI,GKkeDqJBlK8,CvFH_6DNRCY,u-_hosF7TpI,IOWN5fQnzGk,YqVRcFQagtI', 'zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ'];
var inpttls=[encodeURIComponent('Movie Soundtracks'),encodeURIComponent('Slow Classical Movements'), encodeURIComponent('Mr Smith Goes To Washington')];


This teams with time as a dimension when you involve the setTimeout and setInterval delayed code Javascript functionalities, that can change that top textbox’s placeholder over time, and navigate accordingly, should the user decide to right click (or two finger gesture) that textbox among (so far) …

• Mr Smith Goes To Washington … and, today, our newly compiled …
• Slow Classical Movements
• Movie Soundtracks

… functionality options which use URL ? and & GET argument methodologies to look up different YouTube video ID data sets, for content purposes via the changed youtube_brady_bunch.js external Javascript featuring in Yacht Rock, for example.

Previous relevant YouTube Music Video External Javascript Genericization Tutorial is shown below.

YouTube Music Video External Javascript Genericization Tutorial

In yesterday’s The Wrecking Crew Peering Disco Tutorial we praised the role of external Javascript in the current YouTube Music Video Peer to Peer web applications …

• more twinning possibilities, easily applied, as per today’s Stop Press
• generic YouTube IFrame Player API based music web application changes

… and it is that second more involved advantage we want to chase down today, and into the future.

Today, we’ve made our first only to external Javascript generic changes, which flow through to the three parent web applications by …

• honing in on top textbox …
• improving its placeholder information … thereby …
• informing the user that a right click (or two finger gesture) will lead to a list of comma separated YouTube video IDs,Title (our first cab off the rank being title “Mr Smith Goes To Washington”) being mapped onto the textbox’s value … then …
• [textboxObject].blur(); (ie. the onblur event logic is called)

… via …


// youtube_brady_bunch.js
// RJM Programming
// June, 2023
// Help out (eg. peer to peer twinning) ...
var ptplisturls=['./the_wrecking_crew.html','./disco_version.html','./yacht_rock.html'];
var newoptideas=[];
var betterhc='', ourhc='';
var ourhashis='';
var curvalis=0;
var inpvals=['zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ'];
var inpttls=[encodeURIComponent('Mr Smith Goes To Washington')];

function newdecodeURIComponent(inbx) {
if (ourhashis == '') {
var inbxa=decodeURIComponent(inbx).split(',');
//alert(inbxa[eval(-1 + inbxa.length)]);
if (inbxa[eval(-1 + inbxa.length)].length != 11 || inbxa[eval(-1 + inbxa.length)].indexOf(' ') != -1) {
ourhashis=inbxa[eval(-1 + inbxa.length)];
//alert(ourhashis);
if (typeof shuffle == "function") {
return shuffle(decodeURIComponent(inbx).replace(',' + ourhashis,'').replace(ourhashis,''));
} else {
return decodeURIComponent(inbx).replace(',' + ourhashis,'').replace(ourhashis,'');
}
}
}
return decodeURIComponent(inbx);
}

var ejcbl=location.search.split('videolist=')[1] ? newdecodeURIComponent(location.search.split('videolist=')[1].split('&')[0]) : '';
if (ejcbl == '') { ejcbl=location.search.split('alist=')[1] ? newdecodeURIComponent(location.search.split('alist=')[1].split('&')[0]) : ''; }

function capitfl(intl) {
var intwords=intl.split(' ');
var outwords=intl;
for (var mn=0; mn<intwords.length; mn++) {
outwords=outwords.replace(intwords[mn], intwords[mn].replace(intwords[mn].substring(0,1),intwords[mn].substring(0,1).toUpperCase()));
}
//alert(outwords.replace(/\ Version$/g, ''));
return outwords.replace(/\ Version$/g, '');
}

function checksytitle() {
var ols='';
var vsbn=document.URL.split('.htm')[0].split('/')[eval(-1 + document.URL.split('.htm')[0].split('/').length)].replace(/\_/g,' ');
if (ourhc == '') {
if (ejcbl.indexOf('|') != -1) {
ourhc=ejcbl.split('|')[1];
} else if (ourhashis != '') {
ourhc=ourhashis.trim();
} else if (('' + location.hash).replace('#','').replace('null','').replace('undefined','').trim() != '') {
ourhc=decodeURIComponent(('' + location.hash).replace('#','').replace('null','').replace('undefined','').trim());
}
}
if (document.getElementById('rshuffle')) {
if (('' + document.getElementById('rshuffle').placeholder).indexOf(' click ') == -1) {
betterhc=capitfl(document.URL.split('.htm')[0].split('/')[eval(-1 + document.URL.split('.htm')[0].split('/').length)].replace(/\_/g,' '));
document.getElementById('rshuffle').placeholder+=' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);
document.getElementById('rshuffle').oncontextmenu=function(event) { if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); } };
} else {
var wascur=curvalis;
curvalis++;
if (curvalis >= eval('' + inpvals.length)) { curvalis=0; }
if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf('') != -1) {
document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... right click (or two finger gesture) for ')[0] + ' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);
}
}
}
if (!document.getElementById('selsytitle')) {
if (document.getElementById('sytitle')) {
var hc=document.getElementById('sytitle').innerHTML.replace(/\ \;/g,' ');
ols='<option value="' + document.URL + '">' + (ourhc != '' ? ourhc : hc) + '</option>';
//alert(45);
if (hc.toLowerCase().indexOf('<select') == -1 || document.getElementById('syztitle')) {
//alert(145);
for (var inb=0; inb<ptplisturls.length; inb++) {
if (ptplisturls[inb].toLowerCase().indexOf(hc.toLowerCase()) != -1) {
console.log(ptplisturls[inb] + ' vs ' + hc);
if (ols.indexOf('>' + hc + '<') == -1) {
//alert('why?');
newoptideas.unshift('<option value="' + ptplisturls[inb] + '">' + (betterhc != '' ? betterhc : hc) + '</option>');
}
} else {
console.log(ptplisturls[inb] + ' Vs ' + hc);
if (ols.indexOf('>' + capitfl(ptplisturls[inb].split('.htm')[0].split('/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('/').length)].replace(/\_/g,' ')) + '<') == -1) {
console.log(ptplisturls[inb] + ' Vs1 ' + hc);
if (ourhc != '' && (capitfl(ptplisturls[inb].split('.htm')[0].split('/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('/').length)].replace(/\_/g,' ')).trim() + '<').indexOf(ourhc + '<') != -1) {
ourhc=ourhc;
} else {
console.log('">' + capitfl(ptplisturls[inb].split('.htm')[0].split('/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('/').length)].replace(/\_/g,' ')) + '</option> versus ' + ourhc);
newoptideas.push('<option value="' + ptplisturls[inb] + '">' + capitfl(ptplisturls[inb].split('.htm')[0].split('/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('/').length)].replace(/\_/g,' ')) + '</option>');
console.log(ptplisturls[inb] + ' Vs2 ' + hc + ' for ' + capitfl(ptplisturls[inb].split('.htm')[0].split('/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('/').length)].replace(/\_/g,' ')));
}
}
}
}
}
}
if (eval('' + newoptideas.length) != 0) {
for (var jnb=0; jnb<newoptideas.length; jnb++) {
ols+=newoptideas[jnb];
}
if (document.getElementById('syztitle')) {
document.getElementById('syztitle').innerHTML+=ols;
document.getElementById('sytitle').innerHTML+='<span id=selsytitle></span>';
setInterval(prunesyztitle, 4000);
} else {
document.getElementById('sytitle').innerHTML='<select id=selsytitle onchange="location.href=this.value;">' + ols + '</select>';
}
newoptideas=[];
}
}
}

function prunesyztitle() {
var lsc='', wasoptih='', newoptih='', opta=[], ynftl='youwillneverfindthis<', ynfti=1, git='', ipn=0, lastw='';
git='list' + ('000' + ynfti).slice(-3);
lsc=('' + window.localStorage.getItem('list' + ('000' + ynfti).slice(-3))).replace(/^null$/g,'').replace(/^undefined$/g,'');
if (lsc == '') {
git=('000' + ynfti).slice(-3) + 'list';
lsc=('' + window.localStorage.getItem(('000' + ynfti).slice(-3) + 'list')).replace(/^null$/g,'').replace(/^undefined$/g,'');
//alert('LSC=' + lsc);
} //else {
//alert('Lsc=' + lsc);
//
//alert('lsc=' + lsc);
if (document.getElementById('syztitle')) {
wasoptih=document.getElementById('syztitle').innerHTML;
optsa=wasoptih.split('</option>');
for (var iouy=0; iouy<optsa.length; iouy++) {
if (optsa[iouy].trim() != '') {
if (newoptih.indexOf(optsa[iouy].trim().split('>')[eval(-1 + optsa[iouy].trim().split('>').length)]) == -1) {
if (optsa[iouy].trim().indexOf('%20') == -1) { newoptih+=optsa[iouy].trim() + '</option>'; }
}
}
}
if ((newoptih != '' && wasoptih != '') || ourhashis != '') {
if (eval('' + newoptih.length) <= eval('' + wasoptih.length)) {
//alert(ourhashis + ' ... ' + eval('' + newoptih.length) + ' ... ' + eval('' + wasoptih.length));
if (ourhashis != '') {
//alert('HeRe ' + ourhashis);
while (lsc.trim() != '') {
if (lsc.indexOf(encodeURIComponent(',' + ourhashis)) != -1 || lsc.indexOf(encodeURIComponent(encodeURIComponent(',' + ourhashis))) != -1 || lsc.indexOf(encodeURIComponent(encodeURIComponent(encodeURIComponent(',' + ourhashis)))) != -1) {
ynftl=('000' + ynfti).slice(-3) + '<';
newoptih=newoptih.replace(ynftl, ourhashis + '<').replace(ynftl, decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '<');
if (ynfti > 1) {
lastw='';
for (ipn=0; ipn<inpttls.length; ipn++) {
lastw=decodeURIComponent(inpttls[ipn]).split(' ')[eval(-1 + decodeURIComponent(inpttls[ipn]).split(' ').length)];
if ((lsc + '~!@') != lsc.replace((lastw + '~!@'),'')) {
while (document.getElementById('syztitle').innerHTML.indexOf(git.replace('list','') + '<') != -1) {
ynfti=eval(0 - Math.abs(ynfti));
document.getElementById('syztitle').innerHTML=document.getElementById('syztitle').innerHTML.replace(git.replace('list','') + '<', decodeURIComponent(inpttls[ipn]) + '<');
}
}
}
if (ynfti >= 0) {
window.localStorage.removeItem(git);
if (git.indexOf('list') == 0) {
window.localStorage.removeItem(git.replace('list','') + 'list');
}
}
ynfti=Math.abs(ynfti);


}
//alert(ynftl);
} //else {
//alert(ourhashis + ' ... ' + lsc);
//}
ynfti++;
git='list' + ('000' + ynfti).slice(-3);
lsc=('' + window.localStorage.getItem('list' + ('000' + ynfti).slice(-3))).replace(/^null$/g,'').replace(/^undefined$/g,'');
if (lsc == '') {
git=('000' + ynfti).slice(-3) + 'list';
lsc=('' + window.localStorage.getItem(('000' + ynfti).slice(-3) + 'list')).replace(/^null$/g,'').replace(/^undefined$/g,'');
}
}
document.getElementById('syztitle').innerHTML=newoptih.replace(/Your\ List\</g, decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '<').replace(ynftl, decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '<').replace(ynftl, decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '<');
} else {
document.getElementById('syztitle').innerHTML=newoptih;
}
}
}


if (lsc != '') {
lastw='';
for (ipn=0; ipn<inpttls.length; ipn++) {
lastw=decodeURIComponent(inpttls[ipn]).split(' ')[eval(-1 + decodeURIComponent(inpttls[ipn]).split(' ').length)];
if ((lsc + '~!@') != lsc.replace((lastw + '~!@'),'')) {
document.getElementById('syztitle').innerHTML=document.getElementById('syztitle').innerHTML.replace(/001\</g, decodeURIComponent(inpttls[ipn]) + '<');
}
}
}
//alert('LsC=' + lsc);


}
}

setInterval(checksytitle, 8000);


… via the changed youtube_brady_bunch.js external Javascript featuring in Yacht Rock, for example.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.