fix für lokale dateien

2025-09-21 17:03:52 +02:00
parent 0c8d38dd7d
commit 1d478f8803
14 changed files with 154 additions and 299 deletions
--- a/cmd/dashboard/main.go
+++ b/cmd/dashboard/main.go
@@ -42,10 +42,20 @@ func main() {
 	r := chi.NewRouter()
 	r.Use(func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			w.Header().Set("Content-Security-Policy",
+				strings.Join([]string{
+					"default-src 'self'",
+					"img-src 'self' data:",
+					"style-src 'self'",
+					"font-src 'self'",
+					"script-src 'self'",
+					"connect-src 'self'",
+					// optional: "media-src 'self'",
+				}, "; "),
+			)
 			w.Header().Set("X-Content-Type-Options", "nosniff")
 			w.Header().Set("X-Frame-Options", "SAMEORIGIN")
 			w.Header().Set("Referrer-Policy", "no-referrer")
-			w.Header().Set("Content-Security-Policy", "default-src 'self'; img-src 'self' data:; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src https://fonts.gstatic.com; script-src 'self' https://cdn.jsdelivr.net")
 			next.ServeHTTP(w, req)
 		})
 	})
@@ -82,6 +92,11 @@ func main() {
 	proxy.ErrorHandler = func(w http.ResponseWriter, r *http.Request, e error) {
 		http.Error(w, "upstream error", http.StatusBadGateway)
 	}
+
+	r.Handle("/static/*", http.StripPrefix("/static",
+		http.FileServer(http.FS(ui.FS)),
+	))
+
 	r.Handle("/hls/*", http.StripPrefix("/hls", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		if strings.Contains(r.URL.Path, "..") {
 			http.NotFound(w, r)
--- a/go.sum
+++ b/go.sum
@@ -6,7 +6,11 @@ github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
 github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/klauspost/cpuid/v2 v2.2.10 h1:tBs3QSyvjDyFTq3uoc/9xFpCuOsJQFNPiAhYdw2skhE=
 github.com/klauspost/cpuid/v2 v2.2.10/go.mod h1:hqwkgyIinND0mEev00jJYCxPNVRVXFQeu1XKlok6oO0=
+github.com/zeebo/assert v1.3.0 h1:g7C04CbJuIDKNPFHmsk4hwZDO5O+kntRxzaUoNXj+IQ=
+github.com/zeebo/assert v1.3.0/go.mod h1:Pq9JiuJQpG8JLJdtkwrJESF0Foym2/D9XMU5ciN/wJ0=
 github.com/zeebo/xxh3 v1.0.2 h1:xZmwmqxHZA8AI603jOQ0tMqmBr9lPeFwGg6d+xy9DC0=
 github.com/zeebo/xxh3 v1.0.2/go.mod h1:5NWz9Sef7zIDm2JHfFlcQvNekmcEl9ekUZQQKCYaDcA=
+golang.org/x/sync v0.12.0 h1:MHc5BpPuC30uJk597Ri8TV3CNZcTLu6B6z4lJy+g6Jw=
+golang.org/x/sync v0.12.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc=
 golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
--- a/internal/ui/css2.css
+++ b/internal/ui/css2.css
@@ -1,189 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
-  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
-  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
-  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
--- a/internal/ui/index.html
+++ b/internal/ui/index.html
@@ -1,63 +1,26 @@
 <!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>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Streams</title>
+  <link rel="preload" href="/static/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/static/fonts/inter-semibold.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="stylesheet" href="/static/fonts/inter.css">
+  <link rel="stylesheet" href="/static/css/style.css">
 </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>
+  <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 class="muted">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 defer src="/static/js/index.js"></script>
 </body>
-</html>
+</html>
--- a/internal/ui/static/css/style.css
+++ b/internal/ui/static/css/style.css
@@ -0,0 +1,17 @@
+:root { --bg:#0b1020; --card:#121a33; --muted:#9fb0d8; }
+*{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;gap:8px;align-items:center}
+.row.space-between{justify-content:space-between}
+.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}
+.title-strong{font-weight:800;font-size:1.1rem}
+.muted{opacity:.8}
+video{width:100%;border-radius:12px;background:#000}
+.meta{margin-top:10px;display:flex;gap:10px;align-items:center}
+input{width:220px;padding:8px 10px;border-radius:10px;border:1px solid #36446c;background:#0f1530;color:#e6eaf2}
+a{color:#90cdf4;text-decoration:none}
--- a/internal/ui/static/fonts/inter-extrabold.woff2
+++ b/internal/ui/static/fonts/inter-extrabold.woff2
--- a/internal/ui/static/fonts/inter-regular.woff2
+++ b/internal/ui/static/fonts/inter-regular.woff2
--- a/internal/ui/static/fonts/inter-semibold.woff2
+++ b/internal/ui/static/fonts/inter-semibold.woff2
--- a/internal/ui/static/fonts/inter.css
+++ b/internal/ui/static/fonts/inter.css
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('/static/fonts/inter-regular.woff2') format('woff2');
+  font-weight: 400; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('/static/fonts/inter-semibold.woff2') format('woff2');
+  font-weight: 600; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('/static/fonts/inter-extrabold.woff2') format('woff2');
+  font-weight: 800; font-style: normal; font-display: swap;
+}
--- a/internal/ui/static/js/index.js
+++ b/internal/ui/static/js/index.js
@@ -0,0 +1,25 @@
+async function load(){
+  const r = await fetch('/api/streams');
+  const data = await r.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 space-between">
+          <div>
+            <div class="title-strong">${it.name}</div>
+            <div class="muted">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);
--- a/internal/ui/static/js/stream.js
+++ b/internal/ui/static/js/stream.js
@@ -0,0 +1,33 @@
+(function(){
+  const name = window.__STREAM_NAME__; // oder: document.body.dataset.name
+  const v = document.getElementById('v');
+  const liveEl = document.getElementById('live');
+  const viewersEl = document.getElementById('viewers');
+  const srcEl = document.getElementById('hlssrc');
+
+  function updateLive(live){ 
+    liveEl.className = 'pill ' + (live ? 'live' : 'off');
+    liveEl.textContent = live ? 'LIVE' : 'Offline';
+  }
+
+  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);
+    updateLive(live);
+    viewersEl.textContent = 'Zuschauer: ' + (it ? it.viewers : 0);
+    if(live){
+      const src = '/hls/'+encodeURIComponent(name);
+      srcEl.textContent = src;
+      if (window.Hls && 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);
+})();
--- a/internal/ui/static/vendor/hls.min.js
+++ b/internal/ui/static/vendor/hls.min.js
--- a/internal/ui/stream.html
+++ b/internal/ui/stream.html
@@ -1,56 +1,28 @@
 <!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>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>{{.Name}}</title>
+  <link rel="preload" href="/static/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/static/fonts/inter-semibold.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="stylesheet" href="/static/fonts/inter.css">
+  <link rel="stylesheet" href="/static/css/style.css">
 </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>
+  <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 class="meta">
+        <code id="hlssrc"></code>
+        <span id="viewers" class="pill">Zuschauer: 0</span>
+      </div>
+    </div>
+  </div>
+  <script defer src="/static/vendor/hls.min.js"></script>
+  <script defer src="/static/js/stream.js"></script>
+  <script>window.__STREAM_NAME__={{.JSONName}};</script>
 </body>
-</html>
+</html>
--- a/internal/ui/templates.go
+++ b/internal/ui/templates.go
@@ -3,4 +3,5 @@ package ui
 import "embed"

 //go:embed *.html
+//go:embed static/**
 var FS embed.FS