From 7766b15ea1550af435051b03f9d1fb3eb2aa514c Mon Sep 17 00:00:00 2001
From: Tyler Vigario <tyler@jpswebdesigns.com>
Date: Mon, 27 Apr 2020 18:32:44 -0700
Subject: [PATCH] Implement play/pause as one button

---
 static/js/custom.js  | 28 ++++++++++++++++++----------
 templates/index.html | 19 +++----------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/static/js/custom.js b/static/js/custom.js
index c69ee5e..8c39006 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -43,6 +43,9 @@ var playlist_range_to = 0;
 
 var last_volume = 0;
 
+var playing = false;
+var playPauseBtn = $("#play-pause-btn");
+
 function request(_url, _data, refresh = false) {
     console.log(_data);
     $.ajax({
@@ -56,7 +59,7 @@ function request(_url, _data, refresh = false) {
                 }
                 updateControls(data.empty, data.play, data.mode, data.volume);
             }
-        }
+        },
     });
     if (refresh) {
         location.reload()
@@ -241,18 +244,15 @@ function bindPlaylistEvent() {
 
 function updateControls(empty, play, mode, volume) {
     if (empty) {
-        $("#play-btn").prop("disabled", true);
-        $("#pause-btn").prop("disabled", true);
-        $("#stop-btn").prop("disabled", true);
+        playPauseBtn.prop("disabled", true);
     } else {
+        playPauseBtn.prop("disabled", false);
         if (play) {
-            $("#play-btn").prop("disabled", true);
-            $("#pause-btn").prop("disabled", false);
-            $("#stop-btn").prop("disabled", false);
+            playing = true;
+            playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-play').addClass('fa-pause');
         } else {
-            $("#play-btn").prop("disabled", false);
-            $("#pause-btn").prop("disabled", true);
-            $("#stop-btn").prop("disabled", true);
+            playing = false;
+            playPauseBtn.find('[data-fa-i2svg]').removeClass('fa-pause').addClass('fa-play');
         }
     }
     if (mode === "one-shot") {
@@ -313,6 +313,14 @@ function setPageTheme(theme) {
         document.getElementById("pagestyle").setAttribute("href", "../static/css/bootstrap.darkly.min.css");
 }
 
+function togglePlayPause() {
+    if (playing) {
+        request('post', {action: 'pause'});
+    } else {
+        request('post', {action: 'resume'});
+    }
+}
+
 // Check the version of playlist to see if update is needed.
 setInterval(checkForPlaylistUpdate, 3000);
 
diff --git a/templates/index.html b/templates/index.html
index cd9fe51..d1e39b2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,22 +28,9 @@
         <div id="playlist">
             <div class="row">
                 <div class="col">
-                    <div class="btn-group mb-2">
-                        <button type="button" id="play-btn" class="btn btn-info btn-space"
-                            onclick="request('post', {action : 'resume'})" disabled>
-                            <i class="fas fa-play" aria-hidden="true"></i>
-                        </button>
-
-                        <button type="button" id="pause-btn" class="btn btn-warning btn-space"
-                            onclick="request('post', {action : 'pause'})" disabled>
-                            <i class="fas fa-pause" aria-hidden="true"></i>
-                        </button>
-
-                        <button type="button" id="stop-btn" class="btn btn-danger btn-space"
-                            onclick="request('post', {action : 'stop'})" disabled>
-                            <i class="fas fa-stop" aria-hidden="true"></i>
-                        </button>
-                    </div>
+                    <button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
+                        <i class="fas fa-play"></i>
+                    </button>
                 </div>
                 <div class="col text-right">
                     <div class="btn-group mb-2">