From 62145ef7412999b72734a01e9f8e760d9b849b41 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Mon, 18 Apr 2022 01:59:54 -0500
Subject: [PATCH] Continuous playing between songs fixed.

---
 audioshowkit/src/player/PlaylistSong.js         | 17 ++++++++++++++---
 audioshowkit/src/player/SongPlayer.js           |  9 +++++----
 .../styles/{songplayer.css => songPlayer.css}   |  9 +++++++--
 showcase/src/js/main.js                         |  4 +++-
 4 files changed, 29 insertions(+), 10 deletions(-)
 rename audioshowkit/src/styles/{songplayer.css => songPlayer.css} (75%)

diff --git a/audioshowkit/src/player/PlaylistSong.js b/audioshowkit/src/player/PlaylistSong.js
index 380e77d..4961a74 100644
--- a/audioshowkit/src/player/PlaylistSong.js
+++ b/audioshowkit/src/player/PlaylistSong.js
@@ -36,18 +36,27 @@ export default class PlayListSong {
      * @returns {HTMLAudioElement} The audio element that represents this song.
      */
     fetchAudio(onReady) {
+        console.log("Fetching audio...");
         if (this.#audio) {
             if (this.#ready) {
+                console.log("Already ready.");
                 if (onReady) onReady(this.#audio);
+            } else if (onReady) {
+                this.#audio.addEventListener("canplaythrough", () => {
+                    onReady(this.#audio);
+                }, { once: true });
             }
             return this.#audio;
         }
         this.#audio = new Audio(this.#url);
-        console.log("Audio is not ready. Loading.");
+        console.log("Fetching from url: " + this.#url);
         const listener = () => {
             this.#ready = true;
+            console.log("attempting to invoke onReady.");
+            console.log(onReady);
             if (onReady && this.isAudioInstantiated()) {
                 onReady(this.#audio);
+                console.log("onReady invoked.");
             }
         };
         this.#audio.addEventListener("canplaythrough", listener, { once: true });
@@ -180,7 +189,9 @@ export default class PlayListSong {
      * Stops the visualizer.
      */
     unloadVisualizer() {
-        this.#visualizer.stop();
-        this.#visualizer = null;
+        if (this.#visualizer) {
+            this.#visualizer.stop();
+            this.#visualizer = null;
+        }
     }
 }
\ No newline at end of file
diff --git a/audioshowkit/src/player/SongPlayer.js b/audioshowkit/src/player/SongPlayer.js
index 7d48f96..b499e4e 100644
--- a/audioshowkit/src/player/SongPlayer.js
+++ b/audioshowkit/src/player/SongPlayer.js
@@ -1,4 +1,4 @@
-import "../styles/songplayer.css";
+import "../styles/songPlayer.css";
 import PlayListSong from "./PlaylistSong.js";
 import SongPlaylist from "./SongPlaylist.js";
 
@@ -10,6 +10,7 @@ export default class SongPlayer {
     #current = 0;
     #volume = 1;
     #autoplay = false;
+    #wasPlaying = false;
     #playlistChangeListeners = [];
     #currentSongChangeListeners = [];
     #volumeChangeListeners = [];
@@ -95,7 +96,7 @@ export default class SongPlayer {
                 this.currentSong.fetchAudio().addEventListener(key, listener);
             });
         });
-        if (this.#autoplay) {
+        if (this.#wasPlaying || this.#autoplay) {
             this.playCurrent();
         }
         return true;
@@ -110,12 +111,12 @@ export default class SongPlayer {
     }
 
     playCurrent() {
-        console.log("Attempting to play...");
+        console.log("playing " + this.#current);
         this.currentSong.fetchAudio((audio) => {
             audio.volume = this.volume;
             audio.play();
-            console.log("playing...");
         });
+        this.#wasPlaying = true;
     }
 
     /**
diff --git a/audioshowkit/src/styles/songplayer.css b/audioshowkit/src/styles/songPlayer.css
similarity index 75%
rename from audioshowkit/src/styles/songplayer.css
rename to audioshowkit/src/styles/songPlayer.css
index ed95922..3f11e3f 100644
--- a/audioshowkit/src/styles/songplayer.css
+++ b/audioshowkit/src/styles/songPlayer.css
@@ -1,13 +1,14 @@
 .player.play-btn {
     box-sizing: border-box;
-    height: 60px;
+    height: 48px;
+    width: 48;
     transition: 80ms all ease;
     will-change: border-width;
     cursor: pointer;
     border-color: transparent transparent transparent black;
 
     border-style: solid;
-    border-width: 30px 0px 30px 50px;
+    border-width: 24px 0px 24px 48px;
 }
 
 .player.play-btn.pause {
@@ -18,10 +19,14 @@
 
 .player.next {
     border-style: none;
+    width: 48px;
+    height: 48px;
 }
 
 .player.previous {
     border-style: none;
+    width: 48px;
+    height: 48px;
 }
 
 table.player {
diff --git a/showcase/src/js/main.js b/showcase/src/js/main.js
index ffcfc86..d39c3f4 100644
--- a/showcase/src/js/main.js
+++ b/showcase/src/js/main.js
@@ -6,4 +6,6 @@ playlist.add("/audio/moments.mp3", "moments", "Lost Identities x Robbie Rosen");
 playlist.add("/audio/XXI.mp3", "XXI", "QR");
 const player = ask.player.createSongPlayer(playlist);
 const playerElem = document.getElementById("player-showcase");
-playerElem.appendChild(player.generatePlayElement());
\ No newline at end of file
+playerElem.appendChild(player.generatePlayElement());
+playerElem.appendChild(player.generateNextElement());
+playerElem.appendChild(player.generatePreviousElement());