feat: update player status after a song finishes playing

src/utils/utils.templ

@@ -33,16 +33,17 @@ templ MusicPlayer() {
 		_="init set $sound to null then set $playing to false then set $volume to 0.1"
 	>
 		<div class="h-12 bg-sky-200 rounded">
-			<img id="music-player-img"/>
+			<img class="rounded" 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 cursor-pointer"
+			class="flex items-center justify-center cursor-pointer relative"
 			_="on click togglePlaying()"
 		>
+			@circleNotchIcon("hidden absolute animate-spin", 48)
 			@playIcon(26)
 			@pauseIcon(26)
 		</div>
@@ -51,6 +52,11 @@ templ MusicPlayer() {
 		</button>
 	</div>
 	<script type="text/hyperscript">
+		def onSongEnd()
+			set $playing to false
+			updateUi(false)
+		end
+
 		def playSong(title, artist, albumId, songId)
 			set #music-player-img's @src to "/covers/" + albumId
 			put title into #music-player-title's innerHTML
@@ -58,8 +64,8 @@ templ MusicPlayer() {
 
 			-- Update icons
 			set $playing to true
-			add .hidden to #play-icon
+			remove .hidden from #spinner
-			remove .hidden from #pause-icon
+			updateUi(false)
 
 			if $sound exists
 				$sound.fade($volume, 0.0, 250)
@@ -73,18 +79,33 @@ templ MusicPlayer() {
 				volume: $volume
 			} called $sound
 			$sound.play()
+			$sound.once("load", onSongLoaded)
+			js $sound.once("end", () => onSongEnd())
+		end
+
+		def onSongLoaded()
+			add .hidden to #spinner
+			updateUi(true)
+		end
+
+		def updateUi(playing)
+			if playing is true
+				add .hidden to #play-icon
+				remove .hidden from #pause-icon
+			else
+				remove .hidden from #play-icon
+				add .hidden to #pause-icon
+			end
 		end
 
 		def togglePlaying()
 			if $playing is true
-				remove .hidden from #play-icon
-				add .hidden to #pause-icon
 				set $playing to false
+				updateUi(false)
 				$sound.pause()
 			else
-				add .hidden to #play-icon
-				remove .hidden from #pause-icon
 				set $playing to true
+				updateUi(true)
 				$sound.play()
 			end
 		end
@@ -127,3 +148,19 @@ templ skipForwardIcon(size int) {
 		<path d="M208,40V216a8,8,0,0,1-16,0V146.77L72.43,221.55A15.95,15.95,0,0,1,48,208.12V47.88A15.95,15.95,0,0,1,72.43,34.45L192,109.23V40a8,8,0,0,1,16,0Z"></path>
 	</svg>
 }
+
+templ circleNotchIcon(class string, size int) {
+	<svg
+		id="spinner"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="#000000"
+		viewBox="0 0 256 256"
+		style="--darkreader-inline-fill: #000000;"
+		data-darkreader-inline-fill=""
+		width={ strconv.Itoa(size) }
+		height={ strconv.Itoa(size) }
+		class={ class }
+	>
+		<path d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"></path>
+	</svg>
+}

src/utils/utils_templ.go

@@ -68,7 +68,11 @@ 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\" _=\"init set $sound to null then set $playing to false then set $volume to 0.1\"><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 cursor-pointer\" _=\"on click togglePlaying()\">")
+		_, 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 then set $playing to false then set $volume to 0.1\"><div class=\"h-12 bg-sky-200 rounded\"><img class=\"rounded\" 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 cursor-pointer relative\" _=\"on click togglePlaying()\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = circleNotchIcon("hidden absolute animate-spin", 48).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -88,7 +92,7 @@ func MusicPlayer() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, 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\t-- Update icons\n\t\t\tset $playing to true\n\t\t\tadd .hidden to #play-icon\n\t\t\tremove .hidden from #pause-icon\n\n\t\t\tif $sound exists\n\t\t\t\t$sound.fade($volume, 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\tvolume: $volume\n\t\t\t} called $sound\n\t\t\t$sound.play()\n\t\tend\n\n\t\tdef togglePlaying()\n\t\t\tif $playing is true\n\t\t\t\tremove .hidden from #play-icon\n\t\t\t\tadd .hidden to #pause-icon\n\t\t\t\tset $playing to false\n\t\t\t\t$sound.pause()\n\t\t\telse\n\t\t\t\tadd .hidden to #play-icon\n\t\t\t\tremove .hidden from #pause-icon\n\t\t\t\tset $playing to true\n\t\t\t\t$sound.play()\n\t\t\tend\n\t\tend\n\t</script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div><script type=\"text/hyperscript\">\n\t\tdef onSongEnd()\n\t\t\tset $playing to false\n\t\t\tupdateUi(false)\n\t\tend\n\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\t-- Update icons\n\t\t\tset $playing to true\n\t\t\tremove .hidden from #spinner\n\t\t\tupdateUi(false)\n\n\t\t\tif $sound exists\n\t\t\t\t$sound.fade($volume, 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\tvolume: $volume\n\t\t\t} called $sound\n\t\t\t$sound.play()\n\t\t\t$sound.once(\"load\", onSongLoaded)\n\t\t\tjs $sound.once(\"end\", () => onSongEnd())\n\t\tend\n\n\t\tdef onSongLoaded()\n\t\t\tadd .hidden to #spinner\n\t\t\tupdateUi(true)\n\t\tend\n\n\t\tdef updateUi(playing)\n\t\t\tif playing is true\n\t\t\t\tadd .hidden to #play-icon\n\t\t\t\tremove .hidden from #pause-icon\n\t\t\telse\n\t\t\t\tremove .hidden from #play-icon\n\t\t\t\tadd .hidden to #pause-icon\n\t\t\tend\n\t\tend\n\n\t\tdef togglePlaying()\n\t\t\tif $playing is true\n\t\t\t\tset $playing to false\n\t\t\t\tupdateUi(false)\n\t\t\t\t$sound.pause()\n\t\t\telse\n\t\t\t\tset $playing to true\n\t\t\t\tupdateUi(true)\n\t\t\t\t$sound.play()\n\t\t\tend\n\t\tend\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -124,7 +128,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: 98, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 119, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -137,7 +141,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: 99, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 120, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -179,7 +183,7 @@ func pauseIcon(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: 118, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 139, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -192,7 +196,7 @@ func pauseIcon(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: 119, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 140, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -234,7 +238,7 @@ func skipForwardIcon(size int) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, 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: 126, Col: 67}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 147, Col: 67}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -247,7 +251,7 @@ func skipForwardIcon(size int) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, 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: 126, Col: 97}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 147, Col: 97}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -261,4 +265,77 @@ func skipForwardIcon(size int) templ.Component {
 	})
 }
 
+func circleNotchIcon(class string, size int) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var13 = []any{class}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var13...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg id=\"spinner\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" viewBox=\"0 0 256 256\" style=\"--darkreader-inline-fill: #000000;\" data-darkreader-inline-fill=\"\" width=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, 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: 160, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" height=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, 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: 161, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var13).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><path d=\"M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z\"></path></svg>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
 var _ = templruntime.GeneratedTemplate