From aa59670b7f7a1a61f7c1cbbabcc08fc8ac6c7013 Mon Sep 17 00:00:00 2001
From: Grant Shangreaux <shshoshin@protonmail.com>
Date: Sat, 4 Jan 2020 22:06:03 -0600
Subject: Add: formatting of additional track data to display

---
 tape-deck.js | 60 +++++++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/tape-deck.js b/tape-deck.js
index 14ed83f..55aa4de 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -3,40 +3,38 @@ const currentSide = urlParams.get("side");
 const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`);
 
 const pressPlaySound = new Audio("audio/tape-start.mp3");
-pressPlaySound.onended = (event) => {
-    tape.play();
-}
+pressPlaySound.onended = (event) => { tape.play(); };
 
+const stopImage = "images/cool-deck.png";
+const playImage = "images/cool-deck.gif";
 
 let deck = document.getElementById("tape-deck");
 let notes = document.getElementById("notes");
+let trackData = [];
 let currentTrackIndex = 0;
 let hasStarted = false;
 
-function play() {
+function loadTrackData() {
     fetch(`side${currentSide}.json`)
         .then(response => response.json())
-        .then((trackData) => {
-            if (!hasStarted) {
-                pressPlaySound.play();
-                hasStarted = true;
-                deck.src = "images/cool-deck.gif"
-
-                tape.addEventListener("timeupdate", (event) => {
-                    const time = tape.currentTime;
-                    const currentTrack = getTrack(time, currentTrackIndex, trackData);
-                    notes.textContent = currentTrack.title;
-                });
-            } else {
-                tape.play();
-                deck.src = "images/cool-deck.gif"
-            }
+        .then((data) => {
+            trackData = data;
         });
 }
 
+function play() {
+    if (!hasStarted) {
+        pressPlaySound.play();
+        hasStarted = true;
+    } else {
+        tape.play();
+    }
+    deck.src = playImage;
+}
+
 function pause() {
     tape.pause();
-    deck.src = "images/cool-deck.png"
+    deck.src = stopImage;
 }
 
 function isLastTrack(current, tracks) {
@@ -44,7 +42,7 @@ function isLastTrack(current, tracks) {
 }
 
 function getTrack(time, currentTrackIndex, trackData) {
-    const nextIndex = currentTrackIndex + 1
+    const nextIndex = currentTrackIndex + 1;
     const startTimes = trackData.map( t => t.start );
 
     if (isLastTrack(currentTrackIndex, startTimes)) {
@@ -58,3 +56,23 @@ function getTrack(time, currentTrackIndex, trackData) {
     }
 }
 
+function formatTrackData(track) {
+    let string = `${track.title} - ${track.artist}`;
+    if (track.album) {
+        string.concat(` - ${track.album}`)
+    }
+
+    if (track.link) {
+        string.concat(` - ${track.link}`)
+    }
+
+    return string;
+}
+
+loadTrackData();
+
+tape.addEventListener("timeupdate", (event) => {
+    const time = tape.currentTime;
+    const currentTrack = getTrack(time, currentTrackIndex, trackData);
+    notes.textContent = formatTrackData(currentTrack);
+});
-- 
cgit v1.2.3