klmp200/radio-bullshit
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Add music title to html title and as a tooltip for audio player
All checks were successful
ci / deploy (push) Successful in 3m53s
Details

Browse Source
This commit is contained in:
Antoine Bartuccio
2026-01-28 14:56:56 +01:00
parent 4fe1e88220
commit fd1cbc0e60
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
www/index.html
View File

@@ -1,9 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html
x-data="{
metadata: { status: 'down' },
isTitleOverflow: false
}"
x-init="setInterval(
async () => {
metadata = await getMetadata()
},
2000,
)
$watch('metadata.title', async (value, oldValue) => {
if (value == oldValue){
return
}
// First, reset overflow for proper recalculation
isTitleOverflow = false
await $nextTick()
// Now check for overflow
isTitleOverflow = $refs.scrollTitle.offsetWidth < $refs.scrollTitle.scrollWidth
})
"
>
<head> <head>
<script defer src="/static/alpine.min.js"></script> <script defer src="/static/alpine.min.js"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Radio bullshit, la radio du paradis !</title> <title x-text="'Radio bullshit, la radio du paradis ! Now playing: ' + metadata.title"></title>
<link rel="stylesheet" type="text/css" href="/static/style.css"> <link rel="stylesheet" type="text/css" href="/static/style.css">
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
@@ -11,27 +33,6 @@
<body> <body>
<div <div
class="radio-container" class="radio-container"
x-data="{
metadata: { status: 'down' },
isTitleOverflow: false
}"
x-init="setInterval(
async () => {
metadata = await getMetadata()
},
2000,
)
$watch('metadata.title', async (value, oldValue) => {
if (value == oldValue){
return
}
// First, reset overflow for proper recalculation
isTitleOverflow = false
await $nextTick()
// Now check for overflow
isTitleOverflow = $refs.scrollTitle.offsetWidth < $refs.scrollTitle.scrollWidth
})
"
> >
<div <div
class="track-title" class="track-title"
@@ -44,7 +45,7 @@
}" }"
></p> ></p>
</div> </div>
<audio controls autoplay> <audio :title="metadata.title" controls autoplay>
<source src="/radio-bullshit" type="audio/mpeg" preload="none" > <source src="/radio-bullshit" type="audio/mpeg" preload="none" >
Ton navigateur ne supporte pas l'audio HTML5. Pas de Zambla pour toi ! Ton navigateur ne supporte pas l'audio HTML5. Pas de Zambla pour toi !
</audio> </audio>