{"id":69702,"date":"2025-09-07T03:01:00","date_gmt":"2025-09-06T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69702"},"modified":"2025-09-07T08:40:02","modified_gmt":"2025-09-06T22:40:02","slug":"youtube-api-caller-phase-two-console-warning-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-console-warning-tutorial\/","title":{"rendered":"YouTube API Caller Phase Two Console Warning Tutorial"},"content":{"rendered":"
\"YouTube<\/a>

YouTube API Caller Phase Two Console Warning Tutorial<\/p><\/div>\n

Continuing on from yesterday’s YouTube API Caller Phase Two Text Cursor Tutorial<\/a> …<\/p>\n

\nWhat the dickens is “Console Warning”?\n<\/p><\/blockquote>\n

Well, it’s a new good friend to us using the Google Chrome<\/a> web browser (but other web browsers can work it too) Web Inspector<\/a>‘s division of “issue or not” reporting you can get your web applications to do via Javascript to debug or inform as the web application executes. We have found …<\/p>\n


\nconsole.warn<\/a>('Any text of your interest, not just the technical sense of a warning error in http land.');
\n<\/code><\/p>\n

… as a useful way to sort the chaff from the rest trying to analyse issues. Tissues for issues<\/i>?! Most web application get issues from the time you give birth and well into their adolescent years to when they get deprecated and sent to “the scrapheap of the online wooooorrrrrllllddddd” … shipped off to Mars we’re predicting next … oops … too many plays of this<\/a> we’re suspecting … although …<\/p>\n

<\/img><\/p>\n

… it might have passed the notice of some?!<\/p>\n

Anyway, the day of “shoring up” our Tabular Single Row Image Gallery<\/a> web application’s “Radio Play” mode of use started with an innocent question …<\/p>\n

\nWhy is the web application “less flaky” just after we clear the web browser<\/sup> cache<\/a> for an hour?\n<\/p><\/blockquote>\n

Our first suspect we just launched into without proof, but really conditionally<\/font> did much less<\/font> of<\/sup> …<\/p>\n


\n if (('' + parent.document.URL).replace(\/\\%23http$\/g,'#http').replace(\/\\#http$\/g,'') == ('' + parent.document.URL)) { \/\/ ie. \"Radio Play\"<\/font>
\n if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(\/^undefined\/g,'').replace(\/^null\/g,'').trim() != '') {
\n window.sessionStorage.removeItem('loop_' + vid.split(',')[0]);
\n }
\n window.sessionStorage.setItem('loop_' + vid.split(',')[0], 'y');<\/font>
\n }<\/font>
\n<\/code><\/p>\n

… window.sessionStorage<\/a> means by which to encourage the “single song obsessional<\/sup> looping” talked about below.<\/p>\n

Our second suspect, that the thinking above leads to, was the “encouragement of single song obsessional<\/sup> looping” (from audio stream of video days early on in this project, even<\/font>) as distinct from …<\/p>\n


\n\"encouragement of set of song videos<\/sup> looping\"
\n<\/code><\/p>\n

… this latter mode of use asking in our “three tier hierarchical web application environment” that …<\/p>\n

\nThe grandchild must be set free … aka Home Alone<\/a> … to work alone and unsupported.\n<\/p><\/blockquote>\n

… an idea which is anathema to other ways we’ve worked our inhouse YouTube API<\/a> calling work.<\/p>\n

In this new wooooorrrrllllddd calls to YouTube API’s …<\/p>\n


\n player.stopVideo(); \/\/\/ or player.pauseVideo() for that matter
\n<\/code><\/p>\n

… are definite nonos, as are calls from the “middle child”. But the code is full of such calls, and other uses of player.stopVideo()<\/i> suit other modes of use? Right?!<\/p>\n

\nYou betcha!\n<\/p><\/blockquote>\n

We need to debug which codelines containing player.stopVideo()<\/i> or “middle child”<\/i> calls to narrow down the relevant one or two making the web application “flaky”. Well, using codelines such as …<\/p>\n


\n \/\/ Middle child ...
\n console.warn('here at 13 ' + ('' + new Date()) + ' ' + document.getElementById('myiframe').title + ' ?vid=' + ourvid + \"&playtime=\" + thisd + \"&start=\" + document.getElementById('i' + i).value.split(';')[0] + '&ct=' + encodeURIComponent(ndt.toUTCString()) + onestodoprefix + encodeURIComponent(onestodosuffix));
\n \/\/ Grandchild ...
\n console.log('' + ('' + new Date()) + ' ViD=' + vid + ' ivid=' + ivid + ' referrer=' + document.referrer + ' uRl=' + document.URL);
\n<\/code><\/p>\n

… with those timestamps and “relative isolation” into the console tab’s “Warning section” helping heaps, thanks to the powers that be<\/sup>! It got us to where we knew when to intervene … a variable kpi<\/i> became -1 (the one place possible being) …<\/p>\n


\n kpi=-1;
\n console.log('document.URL=' + document.URL + ' ' + ('' + new Date()));
\n console.warn('document.URL=' + document.URL + ' ' + ('' + new Date()));
\n keepParentInformed();
\n<\/code><\/p>\n

… the debugging information of which narrowed down the contention to this fix<\/font> …<\/p>\n


\nfunction updatesc() {
\n cnt+=one;
\n cntpause+=onepause;
\n if (toggle == 0) secscnt+=one;
\n var ours=\"00\" + eval(secscnt % 60);
\n var ourm=\"00\" + eval((secscnt - ours) \/ 60);
\n suffix=\"#t=\" + ourm.substring(eval(ourm.length - 2)) + \"m\" + ours.substring(eval(ours.length - 2)) + \"s\";
\n if (presuffix != \"\") presuffix=suffix;
\n if (eval(eval(cnt) - eval(cntpause)) >= duration && eval(duration) > 0) { \/\/ && eval(playtime) < 0) {
\n if (tobechecked != null) {
\n if (tobechecked.value != '') {
\n document.getElementById('oform').submit();
\n }
\n } else if (nexturl != '') {
\n console.warn('9875');
\n if (urlis == '') location.href=nexturl;
\n } else {
\n secscnt=cnt;
\n if (('' + parent.document.URL + 's').replace(\/\\#https\/g,'') == ('' + parent.document.URL + 's')) { \/\/ but not for \"Radio Play\"<\/font>
\n stopVideo();
\n }<\/font>
\n }
\n }
\n if (window.parent) {
\n if (parent.document.getElementById('i0')) {
\n if (('' + parent.document.URL + 's').replace(\/\\#https\/g,'') != ('' + parent.document.URL + 's')) {
\n \/\/top.document.title='x';
\n if (('' + parent.document.getElementById('i0').title + ' ').indexOf('#') == 0 || ('' + top.window.sessionStorage.getItem('ssytemp')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {
\n \/\/top.document.title='z';
\n \/\/alert(5643);
\n monitorplh();
\n }
\n }
\n }
\n if (parent.document.getElementById('an_i_thingo')) {
\n if (parent.document.getElementById('an_i_thingo').value != '') {
\n parent.document.getElementById('an_i_thingo').value='';
\n \/\/top.document.title='w';
\n \/\/alert(5643);
\n monitorplh();
\n }
\n }
\n }
\n}
\n<\/code><\/p>\n

… which further contributed to less …<\/p>\n

\n❄️ – ( ☃️ – 🧍‍♂️ )\n<\/p><\/blockquote>\n

… via …<\/p>\n