Feature: resume playback from local storage of current tape time

1 files changed, 89 insertions, 43 deletions

diff --git a/tape-deck.js b/tape-deck.js
index f730600..7362feb 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -1,54 +1,78 @@
 const urlParams = new URLSearchParams(window.location.search);
 const currentSide = urlParams.get("side");
-const tape = new Audio(`audio/2019-mix-side-${currentSide}.mp3`);
+const Cassette = new Audio(`audio/2019-mix-side-${currentSide}.mp3`);
+
+let TapeDeck = {
+    elem: document.getElementById("tape-deck"),
+    notes: document.getElementById("notes"),
+    trackData: [],
+    currentTrackIndex: 0,
+    hasStarted: false,
+    isPlaying: false,
+    images: { stop: "images/cool-deck.png", go: "images/cool-deck.gif" },
+    go: function () {
+        this.elem.src = this.images.go;
+        this.isPlaying = true;
+    },
+    stop: function () {
+        this.elem.src = this.images.stop;
+        this.isPlaying = false;
+    },
+    playButton: {
+        elem: document.getElementById("play-button"),
+        state: "off",
+        up: "images/play-button-up.png",
+        down: "images/play-button-down.png",
+        initSound: new Audio("audio/tape-start.mp3"),
+        pressSound: new Audio("audio/button-press.mp3"),
+        toggle: function () {
+            if (this.state === "off") {
+                this.elem.src = this.down;
+                this.state = "on";
+            } else {
+                this.elem.src = this.up;
+                this.state = "off";
+            }
+        }
+    }
+};
 
-const pressPlaySound = new Audio("audio/tape-start.mp3");
-const buttonPressSound = new Audio("audio/button-press.mp3");
-pressPlaySound.onended = (event) => { tape.play(); };
+function start() {
+    const btn = TapeDeck.playButton;
 
-const stopImage = "images/cool-deck.png";
-const playImage = "images/cool-deck.gif";
+    TapeDeck.hasStarted = true;
+    btn.toggle();
+    btn.initSound.onended = (event) => { Cassette.play(); };
+    btn.initSound.play();
+}
 
-let playButton = document.getElementById("play-button");
-const playButtonUp = "images/play-button-up.png";
-const playButtonDown = "images/play-button-down.png";
+function pause() {
+    const btn = TapeDeck.playButton;
 
-let deck = document.getElementById("tape-deck");
-let notes = document.getElementById("notes");
-let trackData = [];
-let currentTrackIndex = 0;
-let hasStarted = false;
-let isPlaying = false;
+    btn.toggle();
+    btn.pressSound.play();
+    Cassette.pause();
+    TapeDeck.stop();
+}
 
-function loadTrackData() {
-    fetch(`side${currentSide}.json`)
-        .then(response => response.json())
-        .then((data) => {
-            trackData = data;
-        });
+function resume() {
+    const btn = TapeDeck.playButton;
+
+    btn.pressSound.play();
+    btn.toggle();
+    Cassette.play();
 }
 
+// button onclick points here
 function play() {
-  if (isPlaying) {
-        playButton.src = playButtonUp;
-        buttonPressSound.play();
-        tape.pause();
-        deck.src = stopImage;
-        isPlaying = false;
-        return;
-    }
+    if (TapeDeck.isPlaying) { pause(); return; }
 
-    if (!hasStarted) {
-        pressPlaySound.play();
-        hasStarted = true;
-    } else {
-        buttonPressSound.play();
-        tape.play();
-    }
+    TapeDeck.hasStarted ? resume() : start();
+    TapeDeck.go();
+}
 
-    isPlaying = true;
-    playButton.src = playButtonDown;
-    deck.src = playImage;
+function reset() {
+    Cassette.currentTime = 0;
 }
 
 function isLastTrack(current, tracks) {
@@ -56,6 +80,7 @@ function isLastTrack(current, tracks) {
 }
 
 function getTrack(time) {
+    const { currentTrackIndex, trackData } = TapeDeck;
     const nextIndex = currentTrackIndex + 1;
     const startTimes = trackData.map( t => t.start );
 
@@ -63,7 +88,7 @@ function getTrack(time) {
         return trackData[trackData.length - 1];
     } else {
         if (time >= startTimes[nextIndex]) {
-            currentTrackIndex = nextIndex;
+            TapeDeck.currentTrackIndex = nextIndex;
         }
 
         return trackData[currentTrackIndex];
@@ -83,10 +108,31 @@ function formatTrackData(track) {
     return string;
 }
 
+function loadTrackData() {
+    fetch(`side${currentSide}.json`)
+        .then(response => response.json())
+        .then((data) => {
+            TapeDeck.trackData = data;
+        });
+}
+
+function resumeMaybe() {
+    if (localStorage.getItem(currentSide)) {
+        Cassette.currentTime = localStorage.getItem(currentSide);
+    }
+}
+
 loadTrackData();
 
-tape.addEventListener("timeupdate", (event) => {
-    const time = tape.currentTime;
+resumeMaybe();
+
+Cassette.addEventListener("timeupdate", (event) => {
+    const time = Cassette.currentTime;
     const currentTrack = getTrack(time);
-    notes.textContent = formatTrackData(currentTrack);
+
+    localStorage.setItem(currentSide, time);
+
+    if (!currentTrack) return;
+
+    TapeDeck.notes.textContent = formatTrackData(currentTrack);
 });