{"id":59762,"date":"2023-06-17T03:01:48","date_gmt":"2023-06-16T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59762"},"modified":"2023-06-16T21:03:23","modified_gmt":"2023-06-16T11:03:23","slug":"youtube-music-video-external-javascript-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-genericization-tutorial\/","title":{"rendered":"YouTube Music Video External Javascript Genericization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yacht_rock.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Music Video External Javascript Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/msgtwin.jpg\" title=\"YouTube Music Video External Javascript Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube Music Video External Javascript Genericization Tutorial<\/p><\/div>\n<p>In yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-peering-disco-tutorial' title='The Wrecking Crew Peering Disco Tutorial'>The Wrecking Crew Peering Disco Tutorial<\/a> we praised the role of external Javascript in the current <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube Music Video Peer to Peer web applications<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-peering-disco-tutorial'>\n<ul>\n<li>more twinning possibilities, easily applied, as per today\u2019s Stop Press<\/li>\n<li>generic <a target=\"_blank\" title=\"YouTube IFrame Player API\" href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference\">YouTube IFrame Player API<\/a> based music web application changes<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and it is that second more involved advantage we want to chase down today, and into the future.<\/p>\n<p>Today, we&#8217;ve made our first <i>only to external Javascript<\/i> generic changes, which flow through to the three parent web applications by &#8230;<\/p>\n<ul>\n<li>honing in on top textbox &#8230;<\/li>\n<li>improving its <i>placeholder<\/i> information &#8230; thereby &#8230;<\/li>\n<li>informing the user that a right click (or two finger gesture) will lead to <i>a list of comma separated YouTube video IDs<\/i>,<i>Title<\/i> <font size=1>(our first cab off the rank being title &#8220;Mr Smith Goes To Washington&#8221;)<\/font> being mapped onto the textbox&#8217;s value &#8230; then &#8230;<\/li>\n<li>[textboxObject].blur(); <font size=1>(ie. the <i>onblur<\/i> event logic is called)<\/font><\/li>\n<\/ul>\n<p> &#8230; via &#8230;<\/p>\n<p><code><br \/>\n\/\/ youtube_brady_bunch.js<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ June, 2023<br \/>\n\/\/ Help out (eg. peer to peer twinning) ...<br \/>\nvar ptplisturls=['.\/the_wrecking_crew.html','.\/disco_version.html','.\/yacht_rock.html'];<br \/>\nvar newoptideas=[];<br \/>\nvar betterhc='', ourhc='';<br \/>\nvar ourhashis='';<br \/>\nvar curvalis=0;<br \/>\nvar inpvals=['zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ'];<br \/>\nvar inpttls=[encodeURIComponent('Mr Smith Goes To Washington')];<br \/>\n<br \/>\nfunction newdecodeURIComponent(inbx) {<br \/>\n  if (ourhashis == '') {<br \/>\n  var inbxa=decodeURIComponent(inbx).split(',');<br \/>\n  \/\/alert(inbxa[eval(-1 + inbxa.length)]);<br \/>\n  if (inbxa[eval(-1 + inbxa.length)].length != 11 || inbxa[eval(-1 + inbxa.length)].indexOf(' ') != -1) {<br \/>\n    ourhashis=inbxa[eval(-1 + inbxa.length)];<br \/>\n    \/\/alert(ourhashis);<br \/>\n    if (typeof shuffle == \"function\") {<br \/>\n    return shuffle(decodeURIComponent(inbx).replace(',' + ourhashis,'').replace(ourhashis,''));<br \/>\n    } else {<br \/>\n    return decodeURIComponent(inbx).replace(',' + ourhashis,'').replace(ourhashis,'');<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n  return decodeURIComponent(inbx);<br \/>\n}<br \/>\n<br \/>\nvar ejcbl=location.search.split('videolist=')[1] ? newdecodeURIComponent(location.search.split('videolist=')[1].split('&')[0]) : '';<br \/>\nif (ejcbl == '') { ejcbl=location.search.split('alist=')[1] ? newdecodeURIComponent(location.search.split('alist=')[1].split('&')[0]) : '';  }<br \/>\n<br \/>\nfunction capitfl(intl) {<br \/>\n  var intwords=intl.split(' ');<br \/>\n  var outwords=intl;<br \/>\n  for (var mn=0; mn&lt;intwords.length; mn++) {<br \/>\n    outwords=outwords.replace(intwords[mn], intwords[mn].replace(intwords[mn].substring(0,1),intwords[mn].substring(0,1).toUpperCase()));<br \/>\n  }<br \/>\n  \/\/alert(outwords.replace(\/\\ Version$\/g, ''));<br \/>\n  return outwords.replace(\/\\ Version$\/g, '');<br \/>\n}<br \/>\n<br \/>\nfunction checksytitle() {<br \/>\n  var ols='';<br \/>\n  var vsbn=document.URL.split('.htm')[0].split('\/')[eval(-1 + document.URL.split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ');<br \/>\n  if (ourhc == '') {<br \/>\n  if (ejcbl.indexOf('|') != -1) {<br \/>\n    ourhc=ejcbl.split('|')[1];<br \/>\n  } else if (ourhashis != '') {<br \/>\n    ourhc=ourhashis.trim();<br \/>\n  } else if (('' + location.hash).replace('#','').replace('null','').replace('undefined','').trim() != '') {<br \/>\n    ourhc=decodeURIComponent(('' + location.hash).replace('#','').replace('null','').replace('undefined','').trim());<br \/>\n  }<br \/>\n  }<br \/>\n  if (document.getElementById('rshuffle')) {<br \/>\n    if (('' + document.getElementById('rshuffle').placeholder).indexOf(' click ') == -1) {<br \/>\n       betterhc=capitfl(document.URL.split('.htm')[0].split('\/')[eval(-1 + document.URL.split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' '));<br \/>\n       document.getElementById('rshuffle').placeholder+=' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);<br \/>\n       document.getElementById('rshuffle').oncontextmenu=function(event) {  if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); }  };<br \/>\n    } else {<br \/>\n       var wascur=curvalis;<br \/>\n       curvalis++;<br \/>\n       if (curvalis &gt;= eval('' + inpvals.length)) { curvalis=0; }<br \/>\n       if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf('') != -1) {<br \/>\n        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]);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  if (!document.getElementById('selsytitle')) {<br \/>\n  if (document.getElementById('sytitle')) {<br \/>\n    var hc=document.getElementById('sytitle').innerHTML.replace(\/\\&nbsp\\;\/g,' ');<br \/>\n    ols='&lt;option value=\"' + document.URL + '\"&gt;' + (ourhc != '' ? ourhc : hc) + '&lt;\/option&gt;';<br \/>\n    \/\/alert(45);<br \/>\n    if (hc.toLowerCase().indexOf('&lt;select') == -1 || document.getElementById('syztitle')) {<br \/>\n    \/\/alert(145);<br \/>\n      for (var inb=0; inb&lt;ptplisturls.length; inb++) {<br \/>\n        if (ptplisturls[inb].toLowerCase().indexOf(hc.toLowerCase()) != -1) {<br \/>\n    console.log(ptplisturls[inb] + ' vs ' + hc);<br \/>\n          if (ols.indexOf('&gt;' + hc + '&lt;') == -1) {<br \/>\n          \/\/alert('why?');<br \/>\n          newoptideas.unshift('&lt;option value=\"' + ptplisturls[inb] + '\"&gt;' + (betterhc != '' ? betterhc : hc) + '&lt;\/option&gt;');<br \/>\n          }<br \/>\n        } else {<br \/>\n    console.log(ptplisturls[inb] + ' Vs ' + hc);<br \/>\n          if (ols.indexOf('&gt;' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')) + '&lt;') == -1) {<br \/>\n     console.log(ptplisturls[inb] + ' Vs1 ' + hc);<br \/>\n         if (ourhc != '' && (capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')).trim() + '&lt;').indexOf(ourhc + '&lt;') != -1) {<br \/>\n         ourhc=ourhc;<br \/>\n         } else {<br \/>\n  console.log('\"&gt;' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')) + '&lt;\/option&gt; versus ' + ourhc);<br \/>\n          newoptideas.push('&lt;option value=\"' + ptplisturls[inb] + '\"&gt;' + capitfl(ptplisturls[inb].split('.htm')[0].split('\/')[eval(-1 + ptplisturls[inb].split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' ')) + '&lt;\/option&gt;');<br \/>\n    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,' ')));<br \/>\n          }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (eval('' + newoptideas.length) != 0) {<br \/>\n      for (var jnb=0; jnb&lt;newoptideas.length; jnb++) {<br \/>\n        ols+=newoptideas[jnb];<br \/>\n      }<br \/>\n      if (document.getElementById('syztitle')) {<br \/>\n      document.getElementById('syztitle').innerHTML+=ols;<br \/>\n      document.getElementById('sytitle').innerHTML+='&lt;span id=selsytitle&gt;&lt;\/span&gt;';<br \/>\n      setInterval(prunesyztitle, 4000);<br \/>\n      } else {<br \/>\n      document.getElementById('sytitle').innerHTML='&lt;select id=selsytitle onchange=\"location.href=this.value;\"&gt;' + ols + '&lt;\/select&gt;';<br \/>\n      }<br \/>\n      newoptideas=[];<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction prunesyztitle() {<br \/>\n      var lsc='', wasoptih='', newoptih='', opta=[], ynftl='youwillneverfindthis&lt;', ynfti=1, git='', ipn=0, lastw='';<br \/>\n            git='list' + ('000' + ynfti).slice(-3);<br \/>\n            lsc=('' + window.localStorage.getItem('list' + ('000' + ynfti).slice(-3))).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n            if (lsc == '') {<br \/>\n            git=('000' + ynfti).slice(-3) + 'list';<br \/>\n            lsc=('' + window.localStorage.getItem(('000' + ynfti).slice(-3) + 'list')).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n            \/\/alert('LSC=' + lsc);<br \/>\n            } \/\/else {<br \/>\n            \/\/alert('Lsc=' + lsc);<br \/>\n            \/\/<br \/>\n            \/\/alert('lsc=' + lsc);<br \/>\n      if (document.getElementById('syztitle')) {<br \/>\n        wasoptih=document.getElementById('syztitle').innerHTML;<br \/>\n        optsa=wasoptih.split('&lt;\/option&gt;');<br \/>\n        for (var iouy=0; iouy&lt;optsa.length; iouy++) {<br \/>\n          if (optsa[iouy].trim() != '') {<br \/>\n            if (newoptih.indexOf(optsa[iouy].trim().split('&gt;')[eval(-1 + optsa[iouy].trim().split('&gt;').length)]) == -1) {<br \/>\n              if (optsa[iouy].trim().indexOf('%20') == -1) { newoptih+=optsa[iouy].trim() + '&lt;\/option&gt;'; }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        if ((newoptih != '' && wasoptih != '') || ourhashis != '') {<br \/>\n          if (eval('' + newoptih.length) &lt;= eval('' + wasoptih.length)) {<br \/>\n        \/\/alert(ourhashis + ' ... ' + eval('' + newoptih.length) + ' ... ' + eval('' + wasoptih.length));<br \/>\n            if (ourhashis != '') {<br \/>\n        \/\/alert('HeRe ' + ourhashis);<br \/>\n            while (lsc.trim() != '') {<br \/>\n              if (lsc.indexOf(encodeURIComponent(',' + ourhashis)) != -1 || lsc.indexOf(encodeURIComponent(encodeURIComponent(',' + ourhashis))) != -1 || lsc.indexOf(encodeURIComponent(encodeURIComponent(encodeURIComponent(',' + ourhashis)))) != -1) {<br \/>\n              ynftl=('000' + ynfti).slice(-3) + '&lt;';<br \/>\n              newoptih=newoptih.replace(ynftl,  ourhashis + '&lt;').replace(ynftl,  decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;');<br \/>\n              if (ynfti &gt; 1) {<br \/>\n          lastw='';<br \/>\n         for (ipn=0; ipn&lt;inpttls.length; ipn++) {<br \/>\n           lastw=decodeURIComponent(inpttls[ipn]).split(' ')[eval(-1 + decodeURIComponent(inpttls[ipn]).split(' ').length)];<br \/>\n           if ((lsc + '~!@') != lsc.replace((lastw + '~!@'),'')) {<br \/>\n            while (document.getElementById('syztitle').innerHTML.indexOf(git.replace('list','') + '&lt;') != -1) {<br \/>\n             ynfti=eval(0 - Math.abs(ynfti));<br \/>\n             document.getElementById('syztitle').innerHTML=document.getElementById('syztitle').innerHTML.replace(git.replace('list','') + '&lt;', decodeURIComponent(inpttls[ipn]) + '&lt;');<br \/>\n            }<br \/>\n           }<br \/>\n         }<br \/>\n              if (ynfti &gt;= 0) {<br \/>\n              window.localStorage.removeItem(git);<br \/>\n              if (git.indexOf('list') == 0) {<br \/>\n              window.localStorage.removeItem(git.replace('list','') + 'list');<br \/>\n              }<br \/>\n              }<br \/>\n              ynfti=Math.abs(ynfti);<br \/>\n<br \/> <br \/>\n              }<br \/>\n              \/\/alert(ynftl);<br \/>\n              } \/\/else {<br \/>\n              \/\/alert(ourhashis + ' ... ' + lsc);<br \/>\n              \/\/}<br \/>\n              ynfti++;<br \/>\n            git='list' + ('000' + ynfti).slice(-3);<br \/>\n              lsc=('' + window.localStorage.getItem('list' + ('000' + ynfti).slice(-3))).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n              if (lsc == '') {<br \/>\n            git=('000' + ynfti).slice(-3) + 'list';<br \/>\n              lsc=('' + window.localStorage.getItem(('000' + ynfti).slice(-3) + 'list')).replace(\/^null$\/g,'').replace(\/^undefined$\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n            document.getElementById('syztitle').innerHTML=newoptih.replace(\/Your\\ List\\&lt;\/g, decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;').replace(ynftl,  decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;').replace(ynftl,  decodeURIComponent(decodeURIComponent(decodeURIComponent(ourhashis))) + '&lt;');<br \/>\n            } else {<br \/>\n            document.getElementById('syztitle').innerHTML=newoptih;<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n<br \/> <br \/>\n        if (lsc != '') {<br \/>\n         lastw='';<br \/>\n         for (ipn=0; ipn&lt;inpttls.length; ipn++) {<br \/>\n           lastw=decodeURIComponent(inpttls[ipn]).split(' ')[eval(-1 + decodeURIComponent(inpttls[ipn]).split(' ').length)];<br \/>\n           if ((lsc + '~!@') != lsc.replace((lastw + '~!@'),'')) {<br \/>\n             document.getElementById('syztitle').innerHTML=document.getElementById('syztitle').innerHTML.replace(\/001\\&lt;\/g, decodeURIComponent(inpttls[ipn]) + '&lt;');<br \/>\n           }<br \/>\n         }<br \/>\n        }<br \/>\n        \/\/alert('LsC=' + lsc);<br \/>\n<br \/> <br \/>\n      }<br \/>\n}<br \/>\n<br \/>\nsetInterval(checksytitle, 8000);<br \/>\n<\/code><\/p>\n<p> &#8230; via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_brady_bunch.js--GETME\">youtube_brady_bunch.js<\/a> external Javascript featuring in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yacht_rock.html\">Yacht Rock<\/a>, for example.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59762' onclick='var dv=document.getElementById(\"d59762\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59762' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In yesterday&#8217;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 &#8230; more twinning possibilities, easily applied, as per today\u2019s Stop Press generic YouTube IFrame &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-genericization-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,28,37],"tags":[49,88,168,4363,4367,4139,290,4366,367,1683,380,400,409,4368,3362,576,587,652,714,739,764,1830,2010,1922,875,3735,3440,914,2643,2362,1898,997,998,1866,2263,1200,1253,1675,3435,3758,1369,1431,4365,1493,2017],"class_list":["post-59762","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-oop","category-tutorials","tag-abc-702","tag-api","tag-buffer","tag-buffering","tag-comma-separated-list","tag-cue","tag-data","tag-disco","tag-dropdown","tag-dynamic","tag-email","tag-event","tag-external-javascript","tag-gernericization","tag-hardcoding","tag-html","tag-iframe","tag-javascript","tag-local-web-server","tag-mailto","tag-member","tag-method","tag-object-oriented-programming","tag-onerror","tag-oop","tag-pause","tag-peer","tag-peer-to-peer","tag-placeholder","tag-play","tag-playlist","tag-programming","tag-programming-tutorial","tag-select","tag-span","tag-stop-press","tag-testing","tag-textbox","tag-the-wrecking-crew","tag-twin","tag-video","tag-wikipedia","tag-yacht-rock","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59762"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=59762"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59762\/revisions"}],"predecessor-version":[{"id":59766,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59762\/revisions\/59766"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}