Files
radio-bullshit/www/index.html
T

66 lines
1.7 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 get_metadata()
},
2000,
)
$watch('metadata.title', () => 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 get_metadata = async () => {
return Object.fromEntries(
await (await fetch("/status.json")).json()
)
}
</script>
</html>