fernando/music-to-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update player status after a song finishes playing

Browse Source
This commit is contained in:
Araozu 2024-10-08 20:53:49 -05:00
parent 1cbaf953fc
commit adb9881cb9
2 changed files with 130 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/utils/utils.templ
View File

@ -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 #pause-icon
remove .hidden from #spinner
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>
}

93
src/utils/utils_templ.go
View File

@ -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