Upload

backend/app/templates/streamer_panel.html

@@ -0,0 +1,44 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="page-head">
+  <h1>Streamer-panel — {{ stream.name }}</h1>
+  <span class="badge {{ 'live' if stream.is_live else 'off' }}">{{ 'LIVE' if stream.is_live else 'OFFLINE' }}</span>
+</div>
+<div class="grid streamer-layout">
+  <div class="card">
+    <h2>Server preview</h2>
+    <video id="preview" class="video" controls autoplay muted playsinline></video>
+    <div class="stats-grid">
+      <div><strong>Video</strong><br>{{ stats.video_codec or '-' }}</div>
+      <div><strong>Opløsning</strong><br>{{ stats.width or '-' }}x{{ stats.height or '-' }}</div>
+      <div><strong>FPS</strong><br>{{ stats.fps or '-' }}</div>
+      <div><strong>Bitrate</strong><br>{% if stats.bitrate %}{{ (stats.bitrate/1000)|round(1) }} kbps{% else %}-{% endif %}</div>
+      <div><strong>Lyd</strong><br>{{ stats.audio_codec or '-' }}</div>
+      <div><strong>Kanaler</strong><br>{% if stats.audio_channels == 1 %}<span class="warn">MONO ⚠️</span>{% elif stats.audio_channels %}{{ stats.audio_channels }} ch{% else %}-{% endif %}</div>
+    </div>
+    <div class="codebox">
+      <div><strong>RTMP URL</strong><br><code>{{ ingest }}</code></div>
+      <div><strong>HLS preview</strong><br><code>{{ public_hls }}</code></div>
+    </div>
+  </div>
+  <div class="card">
+    <h2>Chat</h2>
+    {% if stream.chat_url %}
+      <iframe class="chatframe tall" src="{{ stream.chat_url }}"></iframe>
+    {% else %}
+      <p>Ingen chat sat op.</p>
+    {% endif %}
+  </div>
+</div>
+<script>
+const video = document.getElementById('preview');
+const src = {{ public_hls|tojson }};
+if (Hls.isSupported()) {
+  const hls = new Hls({ lowLatencyMode: true, backBufferLength: 90 });
+  hls.loadSource(src);
+  hls.attachMedia(video);
+} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+  video.src = src;
+}
+</script>
+{% endblock %}