75 lines
2.0 KiB
HTML
75 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script defer src="/static/alpine.min.js"></script>
|
|
<meta charset="utf-8">
|
|
<title>Radio bullshit, la radio du paradis !</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/style.css">
|
|
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
|
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
|
</head>
|
|
<body>
|
|
<div
|
|
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
|
|
class="track-title"
|
|
>
|
|
<p
|
|
x-text="metadata.title ?? '𝐍𝐨𝐰 𝐥𝐨𝐚𝐝𝐢𝐧𝐠. . .'"
|
|
x-ref="scrollTitle"
|
|
:class="{
|
|
overflow: isTitleOverflow
|
|
}"
|
|
></p>
|
|
</div>
|
|
<audio controls autoplay>
|
|
<source src="/radio-bullshit" type="audio/mpeg" preload="none" >
|
|
Ton navigateur ne supporte pas l'audio HTML5. Pas de Zambla pour toi !
|
|
</audio>
|
|
<p>
|
|
<ul class="radio-links">
|
|
<li>
|
|
<a href="/radio-bullshit" target="_blank">
|
|
🎵 VLC Stream
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/radio-bullshit.m3u">
|
|
📄 M3U file
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
const getMetadata = async () => {
|
|
return Object.fromEntries(
|
|
await (await fetch("/status.json")).json()
|
|
)
|
|
}
|
|
</script>
|
|
</html> |