From 6d9bf2cbabd3bf9b492e2d35b26719819dd3ba1e Mon Sep 17 00:00:00 2001
From: Jakub Hejhal <kubic71@gmail.com>
Date: Fri, 5 Jul 2024 12:33:11 +0200
Subject: [PATCH 1/4] include audio assets in the webpack build

---
 src/build_logic/webpack.common.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/build_logic/webpack.common.js b/src/build_logic/webpack.common.js
index 98201f19..259e09c8 100644
--- a/src/build_logic/webpack.common.js
+++ b/src/build_logic/webpack.common.js
@@ -48,7 +48,12 @@ const common = {
                 {
                     from: path.resolve(__dirname, '../../_prebuild_output/assets'),
                     to: path.resolve(__dirname, '../../dist/assets')
-                }
+                },
+
+                {
+                    from: path.resolve(__dirname, '../../src/audio'),
+                    to: path.resolve(__dirname, '../../dist/audio')
+                },
             ]
         }),
         new MiniCssExtractPlugin({

From f91df1793997989b6d4c5ac2e28b97444fd40f0d Mon Sep 17 00:00:00 2001
From: Jakub Hejhal <kubic71@gmail.com>
Date: Fri, 5 Jul 2024 12:37:27 +0200
Subject: [PATCH 2/4] basic html audio player playing 44 silver

---
 src/templates/pages/cryptograss.hbs | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/templates/pages/cryptograss.hbs b/src/templates/pages/cryptograss.hbs
index 8be6c3c4..488cffb3 100644
--- a/src/templates/pages/cryptograss.hbs
+++ b/src/templates/pages/cryptograss.hbs
@@ -10,6 +10,13 @@
     <p class="h5 text-light pixel-font text-center">Decentralized apps written by bluegrassers</p>
     <p class="h3 text-light curly text-center">Bluegrass written by cryptographers</p>
 
+    <div class="custom-audio-player">
+        <audio id="audio-player" controls>
+            <source src="audio/silver44.wav" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+    </div>
+
     <div class="row">  {{!-- cryptograss nav --}}
         <div class="col-12">
             <ul class="nav subnav nav-tabs pixel-font">

From af49656b7b3487f50d3a3017837fd43e0db1d18e Mon Sep 17 00:00:00 2001
From: Jakub Hejhal <kubic71@gmail.com>
Date: Fri, 5 Jul 2024 18:30:22 +0200
Subject: [PATCH 3/4] rudimentary player

---
 src/templates/pages/cryptograss.hbs | 137 +++++++++++++++++++++++++++-
 1 file changed, 134 insertions(+), 3 deletions(-)

diff --git a/src/templates/pages/cryptograss.hbs b/src/templates/pages/cryptograss.hbs
index 488cffb3..c1eb1f67 100644
--- a/src/templates/pages/cryptograss.hbs
+++ b/src/templates/pages/cryptograss.hbs
@@ -10,11 +10,28 @@
     <p class="h5 text-light pixel-font text-center">Decentralized apps written by bluegrassers</p>
     <p class="h3 text-light curly text-center">Bluegrass written by cryptographers</p>
 
-    <div class="custom-audio-player">
-        <audio id="audio-player" controls>
-            <source src="audio/silver44.wav" type="audio/mpeg">
+    <div class="player">
+        <audio id="audio-player">
+            <source type="audio/mpeg">
             Your browser does not support the audio element.
         </audio>
+        
+
+        <div class="album-art">
+            <img alt="Album Art" id="player-album-cover">
+        </div>
+        <div class="info">
+            <div id="player-title" class="player-title"></div>
+            <div id="player-artist" class="player-artist"></div>
+        </div>
+        <div class="controls">
+            <button id="player-previous" onclick="previousSong()">&#x23EE</button> <!-- previous -->
+            <button id="player-play-pause" onclick="playPause()">&#9654;</button> <!-- play/pause -->
+            <button id="player-next" onclick="nextSong()">&#x23ED</button> <!-- next -->
+        </div>
+        <div class="progress-bar">
+            <progress value="0" max="100"></progress>
+        </div>
     </div>
 
     <div class="row">  {{!-- cryptograss nav --}}
@@ -31,6 +48,9 @@
         </div>
     </div>
 
+    <br>
+    <br>
+
     <div id="bazaar" class="cryptograss-nav">
 
         <h3 class="text-white">
@@ -58,3 +78,114 @@
         <div class="col-2"></div>
     </div>
 </div>
+
+<style>
+        .player {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            width: 250px;
+            background: #fff;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            border-radius: 10px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px;
+        }
+
+        .album-art {
+            width: 100%;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .album-art img {
+            width: 100%;
+        }
+        .info {
+            text-align: center;
+            margin-top: 10px;
+        }
+
+        .player-title {
+            font-size: 1.2em;
+            color: #27292b;
+            font-weight: bold;
+        }
+        .player-artist {
+            color: #666;
+            font-size: 0.9em;
+        }
+        .controls {
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .controls button {
+            background: none;
+            border: none;
+            color: #666;
+            font-size: 1.5em;
+            cursor: pointer;
+        }
+
+        .controls button:hover {
+            color: #000;
+        }
+        .progress-bar {
+            width: 100%;
+            margin: 10px 0;
+        }
+        .progress-bar progress {
+            width: 100%;
+        }
+</style>
+
+<script>
+const audioPlayer = document.getElementById('audio-player');
+const playlist = [
+    {'file':'audio/silver44.wav', "length": 342, "name": "Silver .44", "artist": "Justin Holmes", "album_cover": "{{resolveImage 'albums/vowel-sounds-cover-art-400.png' }}"},
+    {'file':'audio/august.wav', "length": 179, "name": "August", "artist": "Justin Holmes", "album_cover": "{{resolveImage 'albums/vowel-sounds-cover-art-400.png' }}"}
+];
+let currentSongIndex = 0;
+
+function loadSong(index) {
+    audioPlayer.src = playlist[index]['file'];
+    audioPlayer.load();
+
+    document.getElementById('player-title').innerText = playlist[index]['name'];
+    document.getElementById('player-artist').innerText = playlist[index]['artist'];
+    document.getElementById('player-album-cover').src = playlist[index]['album_cover'];
+}
+
+loadSong(currentSongIndex);
+
+function nextSong() {
+    currentSongIndex = (currentSongIndex + 1) % playlist.length;
+    loadSong(currentSongIndex);
+    audioPlayer.play();
+}
+
+function previousSong() {
+    currentSongIndex = (currentSongIndex - 1 + playlist.length) % playlist.length;
+    loadSong(currentSongIndex);
+}
+
+function playPause() {
+    if (audioPlayer.paused) {
+        audioPlayer.play();
+        document.getElementById("player-play-pause").innerHTML = "&#x23F8";
+    } else {
+        audioPlayer.pause();
+        document.getElementById("player-play-pause").innerHTML = "&#9654;";
+    }
+}
+
+// On load, load the first song
+document.addEventListener('DOMContentLoaded', function() {
+    audioPlayer.src = playlist[currentSongIndex]['file'];
+    audioPlayer.load();
+});
+
+</script>
\ No newline at end of file

From a180946217d149ff365524154cc04f29391a2f12 Mon Sep 17 00:00:00 2001
From: Jakub Hejhal <kubic71@gmail.com>
Date: Sat, 6 Jul 2024 15:08:14 +0200
Subject: [PATCH 4/4] player playing state is preserved across songs

---
 src/templates/pages/cryptograss.hbs | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/templates/pages/cryptograss.hbs b/src/templates/pages/cryptograss.hbs
index c1eb1f67..eb3b2caf 100644
--- a/src/templates/pages/cryptograss.hbs
+++ b/src/templates/pages/cryptograss.hbs
@@ -31,6 +31,8 @@
         </div>
         <div class="progress-bar">
             <progress value="0" max="100"></progress>
+            <span class="time" id="current-time">00:00</span>
+            <span class="time" id="current-time">00:00</span>
         </div>
     </div>
 
@@ -163,13 +165,23 @@ loadSong(currentSongIndex);
 
 function nextSong() {
     currentSongIndex = (currentSongIndex + 1) % playlist.length;
+    var is_playing = !audioPlayer.paused;
+
     loadSong(currentSongIndex);
-    audioPlayer.play();
+
+    if(is_playing) {
+        audioPlayer.play();
+    }
 }
 
 function previousSong() {
     currentSongIndex = (currentSongIndex - 1 + playlist.length) % playlist.length;
+    var is_playing = !audioPlayer.paused;
     loadSong(currentSongIndex);
+
+    if(is_playing) {
+        audioPlayer.play();
+    }
 }
 
 function playPause() {