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

refactor: Replace hyperscript with alpine in player

Browse Source
This commit is contained in:
Araozu 2024-10-10 06:23:49 -05:00
parent 134d43b65d
commit 4bcea58eb7
2 changed files with 111 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/utils/utils.templ
View File

@ -16,6 +16,7 @@ templ SkeletonTempl() {
<script src="/public/js/htmx.min.js" defer></script>
<script src="/public/js/_hyperscript.min.js" defer></script>
<script src="/public/js/howler.min.js" defer></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js" defer></script>
</head>
<body>
@ -30,123 +31,106 @@ 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 then set $playing to false then set $volume to 0.1 then set $queue to [] then set $queueIdx to 0"
x-data="player"
>
<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>
<p
id="music-player-title"
class="overflow-hidden overflow-ellipsis whitespace-nowrap w-full"
x-text="queue[idx]?.title ?? '-'"
>
-
</p>
<p
id="music-player-artist"
class="text-sm opacity-75 overflow-hidden overflow-ellipsis whitespace-nowrap w-full"
x-text="queue[idx]?.artist ?? '-'"
>
-
</p>
</div>
<div
class="flex items-center justify-center cursor-pointer relative"
_="on click togglePlaying()"
@click="togglePlayPause"
>
@circleNotchIcon("hidden absolute animate-spin", 48)
@circleNotchIcon(48)
@playIcon(26)
@pauseIcon(26)
</div>
<button
id="next-button"
class="flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
_="on click playNext()"
@click="next"
:disabled="idx + 1 >= queue.length? true: false"
>
@skipForwardIcon(24)
</button>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data("player", () => ({
init() {
window.replaceQueueAndPlayAt = (...params) => this.replaceQueueAndPlayAt(...params);
},
queue: [],
idx: 0,
currentSound: null,
volume: 0.1,
playing: false,
loading: false,
replaceQueueAndPlayAt(queue, idx) {
this.queue = queue;
this.idx = idx;
this.play();
},
async play() {
const songId = this.queue[this.idx].songId;
if (this.currentSound !== null) {
this.currentSound.fade(this.volume, 0.0, 250);
await wait(250);
this.currentSound.unload();
}
const sound = new Howl({
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,
volume: this.volume,
})
this.loading = true;
sound.play();
sound.once("load", () => {
this.loading = false;
this.playing = true;
});
this.currentSound = sound;
},
togglePlayPause() {
if (this.playing === true) {
this.playing = false;
this.currentSound?.pause();
} else {
this.playing = true;
this.currentSound?.play();
}
},
next() {
if (this.idx + 1 < this.queue.length) {
this.idx += 1;
this.play();
}
}
}));
})
function wait(ms) {
return new Promise(r => setTimeout(r, m));
}
</script>
</div>
<script type="text/hyperscript">
def replaceQueueAndPlayAt(queue, pos)
set $queue to queue
if pos < queue.length
playAt(pos)
end
end
def playAt(pos)
set $queueIdx to pos
set song to $queue[pos]
playSong(song.title, song.artist, song.albumId, song.songId)
end
def playNext()
if $queueIdx + 1 < $queue.length
playAt($queueIdx + 1)
end
end
def updateNextButton()
if $queueIdx is $queue.length -1
set #next-button's @disabled to "true"
else
remove @disabled from #next-button
end
end
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
-- Update icons
set $playing to true
remove .hidden from #spinner
updateUi(false)
updateNextButton()
if $sound exists
$sound.fade($volume, 0.0, 250)
wait 250ms
$sound.unload()
end
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,
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 onSongEnd()
set $playing to false
set $sound to null
if $queueIdx is not $queue.length -1
playNext()
else
updateUi(false)
end
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
set $playing to false
updateUi(false)
$sound.pause()
else
set $playing to true
updateUi(true)
$sound.play()
end
end
</script>
}
templ playIcon(size int) {
@ -159,6 +143,7 @@ templ playIcon(size int) {
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
:style="{display: playing? 'none': 'inline-block'}"
>
<path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"></path>
</svg>
@ -175,6 +160,7 @@ templ pauseIcon(size int) {
class="hidden"
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
:style="{display: playing? 'inline-block': 'none'}"
>
<path d="M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z"></path>
</svg>
@ -186,9 +172,10 @@ templ skipForwardIcon(size int) {
</svg>
}
templ circleNotchIcon(class string, size int) {
templ circleNotchIcon(size int) {
<svg
id="spinner"
:style="{display: loading? 'inline-block': 'none'}"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
viewBox="0 0 256 256"
@ -196,7 +183,7 @@ templ circleNotchIcon(class string, size int) {
data-darkreader-inline-fill=""
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
class={ class }
class="absolute animate-spin"
>
<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>

66
src/utils/utils_templ.go
View File

@ -31,7 +31,7 @@ func SkeletonTempl() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"es\"><head><meta charset=\"utf-8\"><title>Acide Template</title><link href=\"/public/css/output.css\" rel=\"stylesheet\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap\" rel=\"stylesheet\"><script src=\"/public/js/htmx.min.js\" defer></script><script src=\"/public/js/_hyperscript.min.js\" defer></script><script src=\"/public/js/howler.min.js\" defer></script><script src=\"https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js\" defer></script></head><body><main class=\"pb-16\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"es\"><head><meta charset=\"utf-8\"><title>Acide Template</title><link href=\"/public/css/output.css\" rel=\"stylesheet\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap\" rel=\"stylesheet\"><script src=\"/public/js/htmx.min.js\" defer></script><script src=\"/public/js/_hyperscript.min.js\" defer></script><script src=\"/public/js/howler.min.js\" defer></script><script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script><script src=\"https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js\" defer></script></head><body><main class=\"pb-16\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -68,11 +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 then set $queue to [] then set $queueIdx to 0\"><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()\">")
_, 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\" x-data=\"player\"><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\" x-text=\"queue[idx]?.title ?? &#39;-&#39;\">-</p><p id=\"music-player-artist\" class=\"text-sm opacity-75 overflow-hidden overflow-ellipsis whitespace-nowrap w-full\" x-text=\"queue[idx]?.artist ?? &#39;-&#39;\">-</p></div><div class=\"flex items-center justify-center cursor-pointer relative\" @click=\"togglePlayPause\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = circleNotchIcon("hidden absolute animate-spin", 48).Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = circleNotchIcon(48).Render(ctx, templ_7745c5c3_Buffer)
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("</div><button id=\"next-button\" class=\"flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed\" _=\"on click playNext()\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><button id=\"next-button\" class=\"flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed\" @click=\"next\" :disabled=\"idx + 1 &gt;= queue.length? true: false\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -92,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 replaceQueueAndPlayAt(queue, pos)\n\t\t\tset $queue to queue\n\t\t\tif pos < queue.length\n\t\t\t\tplayAt(pos)\n\t\t\tend\n\t\tend\n\n\t\tdef playAt(pos)\n\t\t\tset $queueIdx to pos\n\t\t\tset song to $queue[pos]\n\t\t\tplaySong(song.title, song.artist, song.albumId, song.songId)\n\t\tend\n\n\t\tdef playNext()\n\t\t\tif $queueIdx + 1 < $queue.length\n\t\t\t\tplayAt($queueIdx + 1)\n\t\t\tend\n\t\tend\n\n\t\tdef updateNextButton()\n\t\t\tif $queueIdx is $queue.length -1\n\t\t\t\tset #next-button's @disabled to \"true\"\n\t\t\telse\n\t\t\t\tremove @disabled from #next-button\n\t\t\tend\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\t\t\tupdateNextButton()\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 onSongEnd()\n\t\t\tset $playing to false\n\t\t\tset $sound to null\n\t\t\tif $queueIdx is not $queue.length -1\n\t\t\t\tplayNext()\n\t\t\telse\n\t\t\t\tupdateUi(false)\n\t\t\tend\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>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button><script>\n\t\tdocument.addEventListener('alpine:init', () => {\n\t\t\tAlpine.data(\"player\", () => ({\n\t\t\t\tinit() {\n\t\t\t\t\twindow.replaceQueueAndPlayAt = (...params) => this.replaceQueueAndPlayAt(...params);\n\t\t\t\t},\n\t\t\t\tqueue: [],\n\t\t\t\tidx: 0,\n\t\t\t\tcurrentSound: null,\n\t\t\t\tvolume: 0.1,\n\t\t\t\tplaying: false,\n\t\t\t\tloading: false,\n\n\t\t\t\treplaceQueueAndPlayAt(queue, idx) {\n\t\t\t\t\tthis.queue = queue;\n\t\t\t\t\tthis.idx = idx;\n\t\t\t\t\tthis.play();\n\t\t\t\t},\n\t\t\t\tasync play() {\n\t\t\t\t\tconst songId = this.queue[this.idx].songId;\n\n\t\t\t\t\tif (this.currentSound !== null) {\n\t\t\t\t\t\tthis.currentSound.fade(this.volume, 0.0, 250);\n\t\t\t\t\t\tawait wait(250);\n\t\t\t\t\t\tthis.currentSound.unload();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst sound = new Howl({\n\t\t\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\t\t\thtml5: true,\n\t\t\t\t\t\tvolume: this.volume,\n\t\t\t\t\t})\n\t\t\t\t\tthis.loading = true;\n\t\t\t\t\tsound.play();\n\t\t\t\t\tsound.once(\"load\", () => {\n\t\t\t\t\t\tthis.loading = false;\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t});\n\t\t\t\t\tthis.currentSound = sound;\n\t\t\t\t},\n\t\t\t\ttogglePlayPause() {\n\t\t\t\t\tif (this.playing === true) {\n\t\t\t\t\t\tthis.playing = false;\n\t\t\t\t\t\tthis.currentSound?.pause();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t\tthis.currentSound?.play();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tnext() {\n\t\t\t\t\tif (this.idx + 1 < this.queue.length) {\n\t\t\t\t\t\tthis.idx += 1;\n\t\t\t\t\t\tthis.play();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}));\n\t\t})\n\n\t\tfunction wait(ms) {\n\t\t\treturn new Promise(r => setTimeout(r, m));\n\t\t}\n\t\t</script></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -128,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: 156, Col: 28}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 140, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@ -141,13 +141,13 @@ 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: 157, Col: 29}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 141, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" fill=\"#000000\" viewBox=\"0 0 256 256\" style=\"--darkreader-inline-fill: #000000;\" data-darkreader-inline-fill=\"\"><path d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"></path></svg>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" fill=\"#000000\" viewBox=\"0 0 256 256\" style=\"--darkreader-inline-fill: #000000;\" data-darkreader-inline-fill=\"\" :style=\"{display: playing? &#39;none&#39;: &#39;inline-block&#39;}\"><path d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"></path></svg>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -183,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: 176, Col: 28}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 161, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@ -196,13 +196,13 @@ 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: 177, Col: 29}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 162, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><path d=\"M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z\"></path></svg>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" :style=\"{display: playing? &#39;inline-block&#39;: &#39;none&#39;}\"><path d=\"M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z\"></path></svg>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -238,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: 184, Col: 67}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 170, Col: 67}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
@ -251,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: 184, Col: 97}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 170, Col: 97}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
@ -265,7 +265,7 @@ func skipForwardIcon(size int) templ.Component {
})
}
func circleNotchIcon(class string, size int) templ.Component {
func circleNotchIcon(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 {
@ -286,21 +286,16 @@ func circleNotchIcon(class string, size int) templ.Component {
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...)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg id=\"spinner\" :style=\"{display: loading? &#39;inline-block&#39;: &#39;none&#39;}\" 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
}
_, 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=\"")
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 184, Col: 28}
}
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: 197, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -308,29 +303,16 @@ func circleNotchIcon(class string, size int) templ.Component {
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))
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: 198, Col: 29}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 185, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
_, 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("\" 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>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"absolute animate-spin\"><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
}