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

feat: implement player functionality with hyperscript

Browse Source
This commit is contained in:
Araozu 2024-10-08 19:00:06 -05:00
parent 3095071301
commit 5e16177461
4 changed files with 26 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/album/album.templ
View File

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

2
src/modules/album/album_templ.go
View File

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

43
src/utils/utils.templ
View File

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

14
src/utils/utils_templ.go
View File

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