This commit is contained in:
56
internal/ui/stream.html
Normal file
56
internal/ui/stream.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>{{.Name}}</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root { --bg:#0b1020; --card:#121a33; --muted:#9fb0d8; --ok:#22c55e; --danger:#ef4444; }
|
||||
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:#e6eaf2}
|
||||
.wrap{max-width:1000px;margin:0 auto;padding:24px}
|
||||
.card{background:var(--card);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
|
||||
a{color:#90cdf4;text-decoration:none}
|
||||
.pill{font-size:.85rem;border-radius:999px;padding:4px 10px;background:#0f1530;border:1px solid #36446c}
|
||||
.live{background:#142e1e;border-color:#1f6e42;color:#96f7b2}
|
||||
.off{background:#2a1420;border-color:#6b1f3a;color:#f7a6be}
|
||||
video{width:100%;border-radius:12px;background:#000}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<a href="/">← Zurück</a>
|
||||
<h1 style="margin:8px 0">{{.Name}} <span id="live" class="pill off">Offline</span></h1>
|
||||
<div class="card">
|
||||
<video id="v" controls playsinline></video>
|
||||
<div style="margin-top:10px;display:flex;gap:10px;align-items:center">
|
||||
<code id="hlssrc"></code>
|
||||
<span id="viewers" class="pill">Zuschauer: 0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
|
||||
<script>
|
||||
const name = {{.JSONName}};
|
||||
async function refresh(){
|
||||
const r = await fetch('/api/streams');
|
||||
const d = await r.json();
|
||||
const it = d.items.find(x=>x.name===name);
|
||||
const live = !!(it && it.live);
|
||||
document.getElementById('live').className = 'pill ' + (live ? 'live' : 'off');
|
||||
document.getElementById('live').textContent = live ? 'LIVE' : 'Offline';
|
||||
document.getElementById('viewers').textContent = 'Zuschauer: ' + (it? it.viewers:0);
|
||||
if(live){
|
||||
const src = '/hls/'+encodeURIComponent(name);
|
||||
document.getElementById('hlssrc').textContent = src;
|
||||
const v = document.getElementById('v');
|
||||
if(Hls.isSupported()){
|
||||
if(!window._hls){ window._hls = new Hls(); window._hls.attachMedia(v); }
|
||||
window._hls.loadSource(src);
|
||||
} else if(v.canPlayType('application/vnd.apple.mpegurl')){ v.src = src; }
|
||||
}
|
||||
}
|
||||
refresh(); setInterval(refresh, 2500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user