Shower Songs Delimitation Remembering Tutorial
Our steps forward onto yesterday’s Shower Songs Delimitation Role Tutorial involve window.localStorage remembering of lists that land within the orbit of Shower Songs YouTube API “radio play” web application.
In a “remembering and recall” scenario …
- first you have to store such a listing URL into window.localStorage …
if (('' + window.localStorage.getItem('song_list_' + decodeURIComponent(document.URL.split('thelist=')[1].split('&')[0].split('#')[0]))).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
window.localStorage.setItem('song_list_' + decodeURIComponent(document.URL.split('thelist=')[1].split('&')[0].split('#')[0]), newerproposedurl.replace('?', '?subject=' + encodeURIComponent(document.getElementById('mys1').innerText) + '&'));
} else {
window.localStorage.removeItem('song_list_' + decodeURIComponent(document.URL.split('thelist=')[1].split('&')[0].split('#')[0]));
window.localStorage.setItem('song_list_' + decodeURIComponent(document.URL.split('thelist=')[1].split('&')[0].split('#')[0]), newerproposedurl.replace('?', '?subject=' + encodeURIComponent(document.getElementById('mys1').innerText) + '&'));
}
… and then … - you should recall these stored settings so that they can be reused …
function ourblurb(inurlidea) {
return String.fromCharCode(10) + decodeURIComponent(('' + inurlidea + '#thetlist=').split('thetlist=')[1].split('&')[0].split('#')[0]).replace(/\|/g,' ... then ... ' + String.fromCharCode(10));
}
function thenagain(inurlidea) {
var outurlidea=inurlidea, isokayhere=true, iuyx=0;
//alert(inurlidea + ' becomes ' + ('' + inurlidea + '#order=').split('order=')[1].trim());
if (inurlidea.indexOf('thelist=') != -1 && eval('' + ('' + inurlidea + '#order=').split('order=')[1].split('#')[0].trim().split(',').length) == 7) {
//alert(inurlidea + ' Becomes ' + ('' + inurlidea + '#order=').split('order=')[1].split('#')[0] + ' of length ' + eval('' + ('' + inurlidea + '#order=').split('order=')[1].split('#')[0].length));
if (eval('' + ('' + inurlidea + '#order=').split('order=')[1].split('#')[0].length) == 13) {
//alert(inurlidea + ' becomeS ' + ('' + inurlidea + '#order=').split('order=')[1].split('#')[0].trim());
var theseurlsare=('' + inurlidea + '#thelist=').split('thelist=')[1].split('&')[0].split('#')[0];
var newurlsare=theseurlsare;
var theurlsare=decodeURIComponent(theseurlsare.split('&')[0].split('#')[0]).split(',');
var thesetsare=('' + inurlidea + '#thetlist=').split('thetlist=')[1].split('&')[0].split('#')[0];
var newtsare=thesetsare;
var thetsare=decodeURIComponent(thesetsare.split('&')[0].split('#')[0]).split('|');
var thenumsarehere=('' + inurlidea + '#order=').split('order=')[1].split('#')[0].trim().split(',');
var minone=-1;
if ((',' + ('' + inurlidea + '#order=').split('order=')[1].trim() + ',').indexOf(',0,') != -1) {
minone=0;
}
//alert(inurlidea + ' becOmeS ' + ('' + inurlidea + '#order=').split('order=')[1].split('#')[0].trim());
for (iuyx=0; iuyx<thenumsarehere.length; iuyx++) {
if (eval(minone + eval('' + thenumsarehere[iuyx])) < eval('' + eval('' + theurlsare.length))) {
isokayhere=isokayhere;
} else {
isokayhere=false;
}
}
//alert(33);
if (!isokayhere) { return outurlidea; }
newurlsare='';
newtsare='';
//alert(5);
for (iuyx=0; iuyx<thenumsarehere.length; iuyx++) {
if (eval(minone + eval('' + thenumsarehere[iuyx])) < eval('' + eval('' + theurlsare.length))) {
if (newurlsare == '') {
newurlsare=encodeURIComponent(theurlsare[eval(minone + eval('' + thenumsarehere[iuyx]))]);
} else {
newurlsare+=encodeURIComponent(',' + theurlsare[eval(minone + eval('' + thenumsarehere[iuyx]))]);
}
}
if (eval(minone + eval('' + thenumsarehere[iuyx])) < eval('' + eval('' + thetsare.length))) {
if (newtsare == '') {
newtsare=encodeURIComponent(thetsare[eval(minone + eval('' + thenumsarehere[iuyx]))]);
} else {
newtsare+=encodeURIComponent('|' + thetsare[eval(minone + eval('' + thenumsarehere[iuyx]))]);
}
}
}
//alert(55);
if (thesetsare != '') {
//alert('0:' + theseurlsare + ' vs ' + newurlsare);
inurlidea=inurlidea.replace(theseurlsare, newurlsare).replace(thesetsare, newtsare);
} else if (theseurlsare != '') {
//alert('1:' + theseurlsare + ' vs ' + newurlsare);
inurlidea=inurlidea.replace(theseurlsare, newurlsare);
} else {
//alert('2:' + theseurlsare + ' vs ' + newurlsare);
return outurlidea;
}
if (isokayhere) { return inurlidea.split('order=')[0].replace(/\?$/g,'').replace(/\&$/g,'').replace(/\#$/g,''); }
}
}
return outurlidea;
}
if (document.URL.indexOf('/shower_songs.htm') != -1) {
setTimeout(function(){
Object.keys(window.localStorage).forEach(function(key){
if (document.URL.indexOf('/shower_songs.htm') != -1) {
var compagainst=('thelist=' + (document.URL + '#thelist=').split('thelist=')[1].split('&')[0].split('#')[0]).replace(/^thelist\=$/g,'');
var listblurbis='';
if (('' + key).indexOf('song_list_') == 0) { {
//alert(1);
if (document.getElementById('myh3')) {
//alert(11);
if (potsel == '') {
potsel='<select id=selpot title="Remembered song lists which are optionally recallable." style=width:60px;display:inline-block;margin-left:25px; onchange="if (this.value.trim().length != 0) { if (this.value.indexOf(' + "'hT'" + ') == 0) { var xzsuff=ourblurb(this.value); xxzz=prompt(' + "'Optionally change order as presented' + xzsuff" + ',' + "'&order=1,2,3,4,5,6,7'" + '); window.open(thenagain(this.value + (xxzz == null ? String.fromCharCode(32).trim() : xxzz)),' + "'_self'" + '); } else { window.open(this.value,' + "'_self'" + '); } }"><option value=>++</option></select>';
//alert(potsel);
document.getElementById('myh3').innerHTML+=potsel;
}
if (compagainst != '' && document.URL.indexOf('thetlist=') == -1) {
if (compagainst.indexOf('thelist=' + (('' + key).split('song_list_')[1])) != -1) {
window.open(window.localStorage.getItem(key), '_blank');
location.href=document.URL.split('?')[0].split('#')[0];
}
}
if (('' + window.localStorage.getItem(key)).indexOf('thetlist=') != -1) {
if (document.getElementById('selpot')) {
document.getElementById('selpot').innerHTML+='<option value="' + window.localStorage.getItem(key) + '">First song is ' + decodeURIComponent(('' + window.localStorage.getItem(key).split('thetlist=')[1])).split('|')[0] + '</option>';
potsel='';
if (7 == 7 || (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) <= 0 && document.URL.indexOf('.9JUNK5.247/') == -1)) {
document.getElementById('selpot').innerHTML+='<option value="' + window.localStorage.getItem(key).replace(/^HT/g,'hT').replace(/^ht/g,'hT') + '">Reorder list where first song is ' + decodeURIComponent(('' + window.localStorage.getItem(key)).split('thetlist=')[1]).split('|')[0] + '</option>';
//alert(22);
}
} else {
potsel=potsel.replace('</select>', '<option value="' + window.localStorage.getItem(key) + '">First song is ' + decodeURIComponent(('' + window.localStorage.getItem(key).split('thetlist=')[1])).split('|')[0] + '</option></select>');
if (7 == 7 || (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) <= 0 && document.URL.indexOf('.9JUNK5.247/') == -1)) {
potsel=potsel.replace('</select>', '<option value="' + window.localStorage.getItem(key).replace(/^HT/g,'hT').replace(/^ht/g,'hT') + '">Reorder list where first song is ' + decodeURIComponent(('' + window.localStorage.getItem(key)).split('thetlist=')[1]).split('|')[0] + '</option></select>');
//alert(122);
}
}
} else {
if (document.getElementById('selpot')) {
document.getElementById('selpot').innerHTML+='<option value="' + window.localStorage.getItem(key) + '">First song is ' + decodeURIComponent(('' + window.localStorage.getItem(key))) + '">First YouTube video ID is ' + decodeURIComponent(('' + window.localStorage.getItem(key)).split('thelist=')[1]).split(',')[0] + '</option>';
potsel='';
if (7 == 7 || (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) <= 0 && document.URL.indexOf('.9JUNK5.247/') == -1)) {
document.getElementById('selpot').innerHTML+='<option value="' + window.localStorage.getItem(key).replace(/^HT/g,'hT').replace(/^ht/g,'hT') + '">Reorder list where first song is ' + decodeURIComponent(('' + window.localStorage.getItem(key))) + '">First YouTube video ID is ' + decodeURIComponent(('' + window.localStorage.getItem(key)).split('thelist=')[1]).split(',')[0] + '</option>';
//alert(222);
}
} else {
potsel=potsel.replace('</select>', '<option value="' + window.localStorage.getItem(key) + '">First YouTube video ID is ' + decodeURIComponent(('' + window.localStorage.getItem(key).split('thelist=')[1])).split(',')[0] + '</option></select>');
if (7 == 7 || (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) <= 0 && document.URL.indexOf('.9JUNK5.247/') == -1)) {
potsel=potsel.replace('</select>', '<option value="' + window.localStorage.getItem(key).replace(/^HT/g,'hT').replace(/^ht/g,'hT') + '">Reorder list where first YouTube video ID is ' + decodeURIComponent(('' + window.localStorage.getItem(key).split('thelist=')[1])).split(',')[0] + '</option></select>');
//alert(2222);
}
}
}
}
}
}
}
});
if (potsel != '' && !document.getElementById('selpot')) {
document.getElementById('divcbi').innerHTML+=potsel;
}
}, 500);
}
… in …
- the changed shower_songs.html external Javascript powered Shower Songs (at the grandparent level)
- the changed ytaudioonly.js external Javascript helper
… still using the RJM Programming’s 404.shtml HTTP Error Code 404 supervisor …
if (eval(('' + encodeURIComponent((decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'')) + ',').replace(/[AEIMQUYcgkosw048]\,/g,'z'))).length) == 77 && eval(('' + decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,''))).length) == 83 && eval('' + decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'')).split(',').length) == 7) {
location.href='//www.rjmprogramming.com.au/HTMLCSS/shower_songs.html?thelist=' + encodeURIComponent(decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'')));
}
… making it swing the Shower Songs into play with an erroneous URL such as …
Previous relevant Shower Songs Delimitation Role Tutorial is shown below.
Shower Songs Delimitation Role Tutorial
You’d think we’d be done with ablutions at this blog, but noooooo wayyyy … Luna says … there’s all manner of molecular interest out there …
It’s not just H and the 2 and the O … it’s the art of the
roleroll.
… or so says “The Lu” anyway!
We wanted our recent Shower Songs web application be the application of choice for URLs at RJM Programming involving our Shower Songs web application YouTube API “radio play” web application.
In a “remembering and recall” scenario …
- first you have to store such a listing URL into window.localStorage …
… and then … - you should recall these stored settings so that they can be reused …
… in …
- the changed shower_songs.html external Javascript powered Shower Songs (at the grandparent level)
- the changed ytaudioonly.js external Javascript helper
… still using the RJM Programming’s 404.shtml HTTP Error Code 404 supervisor …
if (eval(('' + encodeURIComponent((decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'')) + ',').replace(/[AEIMQUYcgkosw048]\,/g,'z'))).length) == 77 && eval(('' + decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,''))).length) == 83 && eval('' + decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'')).split(',').length) == 7) {
location.href='//www.rjmprogramming.com.au/HTMLCSS/shower_songs.html?thelist=' + encodeURIComponent(decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au/').replace('.au%20','.au/').split('rjmprogramming.com.au/')[1].replace(/^index\.php/g,'').replace(/^index\.html/g,'').replace(/^index\.htm/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'').replace(/^\%20/g,'')));
}
… making it swing the Shower Songs into play with an erroneous URL such as …
Previous relevant Shower Songs Colour Coding Tutorial is shown below.
Shower Songs Colour Coding Tutorial
YouTube API Songname Providence Shower Songs Tutorial of recent times had us interfacing …
- song providence via Wikipedia ideas … with …
- our inhouse Shower Songs project using YouTube API means to “Radio Play” some, let’s say, “theatrical pursuits by the water”
A couple of times now, we’ve used it as company in the bath via an iPhone, preparing the list ahead of ever having to tap another anything, to hear some songs in the sequence the user establishes ahead of time … ie. the purpose of this web application.
However, we made some bad colour choices, especially regarding the mobile red button overlayed by black text containing the song title. It was hard to see. It is easier now, that text being yellow.
While there, we decided on a pale green background colour to apply to the textarea user interactive input and progress displaying conduit, when it’s relevant YouTube video is playing (in audio stream only mode), and another principle of our Shower Songs logic is that you should only see one pale green textarea for any great period of time … ie. the songs play in sequence, and looping around in continuous play, like on the radio.
Believe it or not, the actual top level hierarchy Shower Songs window needs no changes for this, but …
- the changed …
<script type=text/javascript>
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || eval('' + navigator.maxTouchPoints) > 0) {
if (window.parent != window.self) {
if (('' + top.document.URL).indexOf('/shower_songs.htm') != -1 || ('' + parent.document.URL).indexOf('/shower_songs.htm') != -1) {
document.write('<div><sty' + 'le> button { color: yellow !important; font-weight: bold !important; text-shadow: -1px 1px 1px #e52dff !important; } </sty' + 'le></div>');
}
}
}
</script>
</body>
… karaoke_youtube_api.htm inhouse YouTube video interfacer helps with the yellow font via CSS … while with the supervised we have … - a changed two scenario Javascript situation …
// textarea gets a pale green background
if (('' + top.document.URL).indexOf('/shower_songs.htm') != -1 || ('' + parent.parent.document.URL).indexOf('/shower_songs.htm') != -1) {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).style.backgroundColor='#F0FFF0';
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + secscnt + '/' + duration + ' ... ' + 'P=pause/play S=stop M=mute U=unmute Y=YouTube G=Google W=Wikipedia L=loop ';
//
// textarea gets usual white background
if (('' + top.document.URL).indexOf('/shower_songs.htm') != -1 || ('' + parent.parent.document.URL).indexOf('/shower_songs.htm') != -1) {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).style.backgroundColor='white';
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(cen) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute Y=YouTube G=Google W=Wikipedia L=loop' + psuf;
… where stop_start_youtube.html controls those textarea element background colours in that grandchild YouTube API inhouse interfacer
… were needed to make this colour coding logic happen to improve how the user uses this web application, we’re hoping. Ie. bye for now.
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.
