From 5e16177461f1d0dc587989aa6e63e500e7b07b0a Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 8 Oct 2024 19:00:06 -0500
Subject: [PATCH] feat: implement player functionality with hyperscript

---
 src/modules/album/album.templ    |  2 +-
 src/modules/album/album_templ.go |  2 +-
 src/utils/utils.templ            | 43 +++++++++++++-------------------
 src/utils/utils_templ.go         | 14 +++++------
 4 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/modules/album/album.templ b/src/modules/album/album.templ
index 0cf1932..e73ee06 100644
--- a/src/modules/album/album.templ
+++ b/src/modules/album/album.templ
@@ -19,7 +19,7 @@ templ albumTempl(albumId string, album *utils.Album, songs []utils.Song) {
 				for _, song := range songs {
 					<p
 						class="py-2 px-4"
-						_={ fmt.Sprintf("on click js play('%s', '%s', '%s', '%s')", 
+						_={ fmt.Sprintf("on click playSong('%s', '%s', '%s', '%s')", 
 							utils.EscapeSingle(song.Title),
 							utils.EscapeSingle(song.Artist),
 							albumId,
diff --git a/src/modules/album/album_templ.go b/src/modules/album/album_templ.go
index d84023c..5455715 100644
--- a/src/modules/album/album_templ.go
+++ b/src/modules/album/album_templ.go
@@ -95,7 +95,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var6 string
-				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("on click js play('%s', '%s', '%s', '%s')",
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("on click playSong('%s', '%s', '%s', '%s')",
 					utils.EscapeSingle(song.Title),
 					utils.EscapeSingle(song.Artist),
 					albumId,
diff --git a/src/utils/utils.templ b/src/utils/utils.templ
index d685ef6..5f03388 100644
--- a/src/utils/utils.templ
+++ b/src/utils/utils.templ
@@ -30,6 +30,7 @@ templ MusicPlayer() {
 	<div
 		id="music-player"
 		class="fixed bottom-0 left-0 w-screen border-t border-sky-500 grid grid-cols-[3rem_auto_3rem_3rem] gap-2 p-1 bg-white"
+		_="init set $sound to null"
 	>
 		<div class="h-12 bg-sky-200 rounded">
 			<img id="music-player-img"/>
@@ -41,38 +42,28 @@ templ MusicPlayer() {
 		<div class="flex items-center justify-center">
 			@playIcon(26)
 		</div>
-		<button class="flex items-center justify-center">
+		<button class="flex items-center justify-center" _="on click log $sound">
 			@skipForwardIcon(24)
 		</button>
 	</div>
-	<script>
-		const playerImage = document.getElementById("music-player-img");
-		const playerTitle = document.getElementById("music-player-title");
-		const playerArtist = document.getElementById("music-player-artist");
+	<script type="text/hyperscript">
+		def playSong(title, artist, albumId, songId)
+			set #music-player-img's @src to "/covers/" + albumId
+			put title into #music-player-title's innerHTML
+			put artist into #music-player-artist's innerHTML
 
-		let currentSound = null;
+			if $sound exists
+				$sound.fade(1.0, 0.0, 250)
+				wait 250ms
+				$sound.unload()
+			end
 
-		async function play(title, artist, albumId, songId) {
-			playerImage.src = `/covers/${albumId}`;
-			playerTitle.innerText = title;
-			playerArtist.innerText = artist;
-
-			if (currentSound !== null) {
-				currentSound.fade(1.0, 0.0, 250);
-				await wait(250);
-				currentSound.unload();
-			}
-
-			currentSound = new Howl({
+			make a Howl from {
 				src: [`https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`],
-				html5: true,
-			});
-			currentSound.play();
-		}
-
-		function wait(ms) {
-			return new Promise(resolve => setTimeout(resolve, ms));
-		}
+				html5: true
+			} called $sound
+			$sound.play()
+		end
 	</script>
 }
 
diff --git a/src/utils/utils_templ.go b/src/utils/utils_templ.go
index dfb1790..5698a54 100644
--- a/src/utils/utils_templ.go
+++ b/src/utils/utils_templ.go
@@ -68,7 +68,7 @@ func MusicPlayer() templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"music-player\" class=\"fixed bottom-0 left-0 w-screen border-t border-sky-500 grid grid-cols-[3rem_auto_3rem_3rem] gap-2 p-1 bg-white\"><div class=\"h-12 bg-sky-200 rounded\"><img id=\"music-player-img\"></div><div class=\"w-full overflow-hidden\"><p id=\"music-player-title\" class=\"overflow-hidden overflow-ellipsis whitespace-nowrap w-full\">-</p><p id=\"music-player-artist\" class=\"text-sm opacity-75 overflow-hidden overflow-ellipsis whitespace-nowrap w-full\">-</p></div><div class=\"flex items-center justify-center\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"music-player\" class=\"fixed bottom-0 left-0 w-screen border-t border-sky-500 grid grid-cols-[3rem_auto_3rem_3rem] gap-2 p-1 bg-white\" _=\"init set $sound to null\"><div class=\"h-12 bg-sky-200 rounded\"><img id=\"music-player-img\"></div><div class=\"w-full overflow-hidden\"><p id=\"music-player-title\" class=\"overflow-hidden overflow-ellipsis whitespace-nowrap w-full\">-</p><p id=\"music-player-artist\" class=\"text-sm opacity-75 overflow-hidden overflow-ellipsis whitespace-nowrap w-full\">-</p></div><div class=\"flex items-center justify-center\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -76,7 +76,7 @@ func MusicPlayer() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><button class=\"flex items-center justify-center\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><button class=\"flex items-center justify-center\" _=\"on click log $sound\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -84,7 +84,7 @@ func MusicPlayer() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div><script>\n\t\tconst playerImage = document.getElementById(\"music-player-img\");\n\t\tconst playerTitle = document.getElementById(\"music-player-title\");\n\t\tconst playerArtist = document.getElementById(\"music-player-artist\");\n\n\t\tlet currentSound = null;\n\n\t\tasync function play(title, artist, albumId, songId) {\n\t\t\tplayerImage.src = `/covers/${albumId}`;\n\t\t\tplayerTitle.innerText = title;\n\t\t\tplayerArtist.innerText = artist;\n\n\t\t\tif (currentSound !== null) {\n\t\t\t\tcurrentSound.fade(1.0, 0.0, 250);\n\t\t\t\tawait wait(250);\n\t\t\t\tcurrentSound.unload();\n\t\t\t}\n\n\t\t\tcurrentSound = new Howl({\n\t\t\t\tsrc: [`https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`],\n\t\t\t\thtml5: true,\n\t\t\t});\n\t\t\tcurrentSound.play();\n\t\t}\n\n\t\tfunction wait(ms) {\n\t\t\treturn new Promise(resolve => setTimeout(resolve, ms));\n\t\t}\n\t</script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div><script type=\"text/hyperscript\">\n\t\tdef playSong(title, artist, albumId, songId)\n\t\t\tset #music-player-img's @src to \"/covers/\" + albumId\n\t\t\tput title into #music-player-title's innerHTML\n\t\t\tput artist into #music-player-artist's innerHTML\n\n\t\t\tif $sound exists\n\t\t\t\t$sound.fade(1.0, 0.0, 250)\n\t\t\t\twait 250ms\n\t\t\t\t$sound.unload()\n\t\t\tend\n\n\t\t\tmake a Howl from {\n\t\t\t\tsrc: [`https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`],\n\t\t\t\thtml5: true\n\t\t\t} called $sound\n\t\t\t$sound.play()\n\t\tend\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -120,7 +120,7 @@ func playIcon(size int) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 83, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 74, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -133,7 +133,7 @@ func playIcon(size int) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 84, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 75, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -175,7 +175,7 @@ func skipForwardIcon(size int) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 95, Col: 67}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 86, Col: 67}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -188,7 +188,7 @@ func skipForwardIcon(size int) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 95, Col: 97}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 86, Col: 97}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {