76 lines
2.0 KiB
HTML
76 lines
2.0 KiB
HTML
<!DOCTYPE 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>
|
||
<script defer src="/static/alpine.min.js"></script>
|
||
<meta charset="utf-8">
|
||
<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="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"
|
||
>
|
||
<div
|
||
class="track-title"
|
||
>
|
||
<p
|
||
x-text="metadata.title ?? '𝐍𝐨𝐰 𝐥𝐨𝐚𝐝𝐢𝐧𝐠. . .'"
|
||
x-ref="scrollTitle"
|
||
:class="{
|
||
overflow: isTitleOverflow
|
||
}"
|
||
></p>
|
||
</div>
|
||
<audio :title="metadata.title" 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> |