Updates

2 files changed, 70 insertions, 44 deletions

diff --git a/client/index.html b/client/index.html
index aace5a2..fb473f5 100644
--- a/client/index.html
+++ b/client/index.html
@@ -83,6 +83,10 @@
             <div class="groups">
                 <table>
                     <tr>
+                        <th>Time of visit (ms)</th>
+                        <td class="time-of-visit"></td>
+                    </tr>
+                    <tr>
                         <th>Time elapsed since visited (s)</th>
                         <td class="you-are-here"></td>
                     </tr>
@@ -106,7 +110,7 @@
                         <td class="max-played"></td>
                     </tr>
                     <tr>
-                        <th>Dt</th>
+                        <th>Dt = TP - TFP</th>
                         <td class="d-t"></td>
                     </tr>
                     <tr>
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 38f901a..3bd0315 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -61,6 +61,7 @@ var placeholders = {
     listInfo: document.querySelector('.list-info'),
     dt: document.querySelector('.d-t'),
     deltaTime: document.querySelector('.delta-time'),
+    timeOfVisit: document.querySelector('.time-of-visit')
 }
 
 var values = {
@@ -86,13 +87,18 @@ function setTitleMessage(message){
     document.title = message + separator + documentTitle;
 }
 
-function increaseSeconds()
+function updateComponentsAfterIncreaseSeconds()
 {
-    values.seconds_here = values.seconds_here + 1;
     placeholders.youAreHere.innerText = values.seconds_here;
     placeholders.playProgress.value = values.current_time + values.seconds_here;
     placeholders.relativeTime.innerText = values.current_time + values.seconds_here;
     placeholders.listeningAt.innerText = Math.floor(audioElement.currentTime);
+}
+
+function increaseSeconds()
+{
+    values.seconds_here = values.seconds_here + 1;
+    updateComponentsAfterIncreaseSeconds();
     return values.seconds_here;
 }
 function getSecondsHere()
@@ -144,6 +150,7 @@ function FetchAudio(url, callback)
     request.addEventListener("progress", (event)=>{
         if (event.lengthComputable)
         {
+            debugLog(`Fetching: ${event.total}`);
             placeholders.dlProgress.value = (event.loaded/event.total)*100;
         }
     });
@@ -171,35 +178,37 @@ function stopHereAndReflect()
     return 0;
 }
 
-function loadShowCallback(json, params)
+function updateComponentsAfterLoadShowCallback(json, listItem)
 {
-    const [ list, now_on_sequence, listItem, hash_of_list ] = params;
-    debugLog('loadShowCallback');
-    debugLog(json);
-    debugLog(listItem);
-    //debugLog(params);
+    setTitleMessage ( "▶️ " + json.artist + " - " + json.title );
     placeholders.currentShowHash.innerText = listItem.hash;
     placeholders.artist.innerText = json.artist;
     placeholders.title.innerText = json.title;
-    setTitleMessage ( "▶️ " + json.artist + " - " + json.title );
-    debugLog('----------');
     placeholders.showDuration.forEach((element)=>{element.innerText = Math.floor(listItem.duration/1000)});
     placeholders.startsOn.innerText = listItem.starts_on;
     placeholders.playProgress.max = Math.floor(listItem.duration/1000);
     placeholders.showInfo.innerText = JSON.stringify(json, null, 2);
+    placeholders.currentTime.innerText = values.current_time;
+}
+
+function loadShowCallback(json, params)
+{
+    const [ list, now_on_sequence, listItem, hash_of_list ] = params;
+    debugLog('loadShowCallback');
+    debugLog(json);
+    debugLog(listItem);
+    //debugLog(params);
     audioElement.load();
     FetchAudio(`${audioRequest}${json.hash}`, sync_radio);
     audioElement.type = json.mimetype;
     values.current_time = Math.floor((values.now_on_sequence/1000)); // - listItem.starts_on)/1000);
-    placeholders.currentTime.innerText = values.current_time;
+    updateComponentsAfterLoadShowCallback(json, listItem);
     audioElement.addEventListener('ended', function(){
         values.current_time = 0;
         values.seconds_here = 0;
         placeholders.currentTime.value = 0;
         FetchJSON(`${listRequest}`, hashCallback, [ new Date().getTime() ]);
-        // setTimeout(sync_radio, 10000);
     });
-    // setTimeout(sync_radio, 10000);
 }
 
 function slowIncreaseVolume()
@@ -214,18 +223,24 @@ function slowIncreaseVolume()
     }
 }
 
+function preciseIncreaseVolume(value)
+{
+    if ( value <= 1 ) audioElement.volume = value;
+}
+
 function fadeInAudio()
 {
-    setTimeout( slowIncreaseVolume, 250);
-    setTimeout( slowIncreaseVolume, 500);
-    setTimeout( slowIncreaseVolume, 750);
-    setTimeout( slowIncreaseVolume, 1000);
-    setTimeout( slowIncreaseVolume, 1250);
-    setTimeout( slowIncreaseVolume, 1500);
-    setTimeout( slowIncreaseVolume, 1750);
-    setTimeout( slowIncreaseVolume, 2050);
-    setTimeout( slowIncreaseVolume, 2350);
-    setTimeout( slowIncreaseVolume, 2700);
+    var timeSpan = 1000;
+    var timeStep = 100;
+    for ( var i = 0; i <= 90; i++ )
+    {
+        timeSpan = timeSpan + timeStep;
+        var newVolume = Math.sin(i*(Math.PI/180));
+        debugLog(i)
+        debugLog(timeSpan)
+        debugLog(newVolume)
+        setTimeout( preciseIncreaseVolume(newVolume), timeSpan);
+    }
 }
 
 function sync_radio()
@@ -240,6 +255,25 @@ function sync_radio()
     return new_now;
 }
 
+function syncOnDOMfromListCallback(now, hash_of_list, json)
+{
+    placeholders.timeOfVisit.innerText = now;
+    placeholders.listStarted.innerText = json.started_on;
+    placeholders.listDuration.innerText = json.duration;
+    placeholders.listHash.innerText = hash_of_list;
+    placeholders.deltaTime.innerText = values.delta_time;
+    placeholders.minTimesPlayed.innerText = values.min_times_played;
+    placeholders.maxTimesPlayed.innerText = values.max_times_to_be_played;
+    placeholders.dt.innerText = values.Dt;
+    placeholders.currentTime.innerText = values.now_on_sequence;
+    placeholders.listInfo.innerText = JSON.stringify(json, null, 2);
+}
+
+function appendPreviouslyPlayedShows(listItem){
+    var tmp = document.createElement('pre');
+    tmp.innerText = JSON.stringify(listItem, null, 2);
+    placeholders.previouslyPlayed.append(tmp);
+}
 
 function listCallback(json, params)
 {
@@ -252,16 +286,9 @@ function listCallback(json, params)
     values.max_times_to_be_played = values.delta_time / json.duration;
     values.Dt = values.max_times_to_be_played - values.min_times_played;
     values.now_on_sequence = values.Dt * json.duration;
-    placeholders.listStarted.innerText = json.started_on;
-    placeholders.listHash.innerText = hash_of_list;
-    placeholders.deltaTime.innerText = values.delta_time;
-    placeholders.dt.innerText = values.Dt;
-    placeholders.currentTime.innerText = values.now_on_sequence;
-    placeholders.listDuration.innerText = json.duration;
-    placeholders.minTimesPlayed.innerText = values.min_times_played;
-    placeholders.maxTimesPlayed.innerText = values.max_times_to_be_played;
-    placeholders.listInfo.innerText = JSON.stringify(json, null, 2);
+    syncOnDOMfromListCallback(now, hash_of_list, json);
     debugLog(`now_on_sequence: ${values.now_on_sequence}, Dt: ${values.Dt}`)
+    debugLog(json.list.map((item, index)=>({index, value: item})).sort((a,b)=>{return b.value.index - a.value.index}));
     if ( json.list.length === 1 )
     {
         FetchJSON(`${jsonRequest}${json.list[0].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[0], hash_of_list]);
@@ -275,9 +302,7 @@ function listCallback(json, params)
             {
                 if( i !== 0)
                 {
-                    var tmp = document.createElement('pre');
-                    tmp.innerText = JSON.stringify(json.list[i-1], null, 2);
-                    placeholders.previouslyPlayed.append(tmp);
+                    appendPreviouslyPlayedShows(json.list[i-1]);
                 }
                 values.now_on_sequence = values.now_on_sequence - json.list[i].starts_on;
                 debugLog(`now_on_sequence (1updated): ${values.now_on_sequence}`);
@@ -287,13 +312,8 @@ function listCallback(json, params)
             }
             else if ( values.now_on_sequence > json.list[i].starts_on && values.now_on_sequence > json.list[i+1].starts_on )
             {
+                appendPreviouslyPlayedShows(json.list[i]);
                 i++;
-                if( i !== 0)
-                {
-                    var tmp = document.createElement('pre');
-                    tmp.innerText = JSON.stringify(json.list[i-1], null, 2);
-                    placeholders.previouslyPlayed.append(tmp);
-                }
                 values.now_on_sequence = values.now_on_sequence - json.list[i].starts_on;
                 FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[i], hash_of_list]);
                 debugLog('Second!');
@@ -301,11 +321,13 @@ function listCallback(json, params)
             }
             else
             {
+                // values.now_on_sequence = values.now_on_sequence - json.list[i].starts_on;
+                debugLog(`We are here: ${i}`);
                 debugLog(values.now_on_sequence);
                 debugLog(json.list[i].starts_on);
-                debugLog(json.list[i-1].starts_on);
+                if (i > 0) debugLog(json.list[i-1].starts_on);
                 debugLog('Nothing!');
-                continue;
+                // continue;
             }
         }
     }