From c57ddeaef72afdb1c9682737a855b8a9f12a7516 Mon Sep 17 00:00:00 2001
From: Daniel Tam <daniel@danieltam.net>
Date: Sat, 16 Jul 2022 13:42:31 -0500
Subject: [PATCH] added shuffle function

---
 index.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d42cd86..216872c 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,9 @@
 	var g_playlist = null;
 	var g_previous = [];
 	var g_previous_idx = 0;
+	var g_current = 1;
 	var g_looping = false;
+	var g_shuffle = true;
 	var MAX_HISTORY = 10;
 
 	var scrubp = 0;
@@ -103,7 +105,13 @@
 			return;
 
 		if (g_previous_idx >= (g_previous.length - 1)) {
-			g_previous.push (Math.floor (Math.random () * g_playlist.length));
+			if (g_shuffle) {
+				g_current = Math.floor (Math.random () * g_playlist.length);
+			}
+			else {
+				g_current += 1;
+			}
+			g_previous.push (g_current);
 			g_previous_idx = g_previous.length - 1;
 		}
 		else {
@@ -133,6 +141,8 @@
 		$('html, body').stop ().animate ({
 			scrollTop: trackelem.offset ().top - $('.control-bar').height ()
 		}, 1000);
+
+		g_current = trackid;
 	}
 
 	function loadNewPlaylist (playlist, track) {
@@ -198,6 +208,17 @@
 		$('#btn-loop i').toggleClass('fa-repeat', !g_looping);
 	}
 
+	function toggleShuffle () {
+		g_shuffle = !g_shuffle;
+		if (g_shuffle) {
+			$('#btn-shuffle').css('color', '#FF9148');
+		}
+		else {
+			$('#btn-shuffle').css('color', '#808080');
+		}
+		
+	}
+
 	function populatePlaylistOptions () {
 		for (var name in PLAYLISTS) {
 			var option = $("<option>");
@@ -283,6 +304,10 @@
 			toggleLooping ();
 		});
 
+		$('#btn-shuffle').click (function () {
+			toggleShuffle ();
+		});
+
 		$('#select-playlist').on ('change', function () {
 			var playlist = $('#select-playlist').val ();
 			loadNewPlaylist (playlist, '');
@@ -591,6 +616,7 @@
 				<td id='btn-previous' class='control-button'><i class="fa fa-step-backward"></i></td>
 				<td id='btn-next' class='control-button'><i class="fa fa-step-forward"></i></td>
 				<td id='btn-loop' class='control-button'><i class="fa fa-repeat"></i></td>
+				<td id='btn-shuffle' class='control-button'><i class="fa fa-random"></i></td>
 				<td id='time-current'></td>
 				<td id='time-bar'><div id="scrubber-track"><div id="scrubber-progress"><div id="scrubber"></div></div></div></td>
 				<td id='time-remaining'></td>