sendnrw/nginx-stream-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

staging
Some checks failed
release-tag / release-image (push) Failing after 1m2s
Details

Browse Source
This commit is contained in:
jbergner
2025-09-21 14:58:13 +02:00
parent 536dd3d416
commit 42e484c47c
12 changed files with 566 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
internal/ui/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Streams</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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:1100px;margin:0 auto;padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.row{display:flex;align-items:center;gap:8px}
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}
input{width:220px;padding:8px 10px;border-radius:10px;border:1px solid #36446c;background:#0f1530;color:#e6eaf2}
.title{display:flex;align-items:center;justify-content:space-between}
</style>
</head>
<body>
<div class="wrap">
<div class="title">
<h1 style="margin:0">🎬 Streams</h1>
<div class="row">
<input id="filter" placeholder="Filter (z.B. stream1)">
<a href="/refresh" class="pill">Neu laden</a>
</div>
</div>
<p style="opacity:.8">RTMP Ingest: <code>rtmp://HOST/&lt;name&gt;</code> · HLS: <code>http(s)://HOST/hls/&lt;name&gt;</code></p>
<div id="list" class="grid"></div>
</div>
<script>
async function load(){
const res = await fetch('/api/streams');
const data = await res.json();
const q = (document.getElementById('filter').value||'').toLowerCase();
const list = document.getElementById('list');
list.innerHTML = '';
data.items.filter(it => !q || it.name.toLowerCase().includes(q)).forEach(it => {
const a = document.createElement('a');
a.href = '/' + encodeURIComponent(it.name);
a.className = 'card';
a.innerHTML = `
<div class="row" style="justify-content:space-between">
<div>
<div style="font-weight:800;font-size:1.1rem">${it.name}</div>
<div style="opacity:.8;font-size:.9rem">Zuschauer: ${it.viewers}</div>
</div>
<div class="pill ${it.live ? 'live':'off'}">${it.live ? 'LIVE' : 'Offline'}</div>
</div>`;
list.appendChild(a);
})
}
document.getElementById('filter').addEventListener('input', load);
load(); setInterval(load, 3000);
</script>
</body>
</html>

56
internal/ui/stream.html Normal file
View 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>

6
internal/ui/templates.go Normal file
View File

@@ -0,0 +1,6 @@
package ui
import "embed"
//go:embed *.html
var FS embed.FS