Upload

backend/app/templates/stream_detail.html

@@ -0,0 +1,61 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="page-head">
+  <h1>{{ stream.name }}</h1>
+  <div class="actions">
+    <a class="button secondary" href="{{ url_for('main.streamer_panel', slug=stream.slug) }}">Åbn streamer-panel</a>
+    <a class="button secondary" href="{{ url_for('main.stream_edit', stream_id=stream.id) }}">Rediger</a>
+  </div>
+</div>
+<div class="grid two">
+  <div class="card">
+    <h2>Preview</h2>
+    <video id="preview" class="video" controls autoplay muted playsinline></video>
+    <p class="small">HLS: <code>{{ public_hls }}</code></p>
+  </div>
+  <div class="card">
+    <h2>Status</h2>
+    <p><strong>LIVE:</strong> {{ 'Ja' if stream.is_live else 'Nej' }}</p>
+    <p><strong>Publish:</strong> {{ 'Åben' if stream.active else 'Lukket' }}</p>
+    <p><strong>Video:</strong> {{ stats.video_codec or '-' }} {{ stats.width or '-' }}x{{ stats.height or '-' }} / {{ stats.fps or '-' }} FPS</p>
+    <p><strong>Lyd:</strong> {{ stats.audio_codec or '-' }} / {{ stats.audio_sample_rate or '-' }} Hz / {% if stats.audio_channels == 1 %}<span class="warn">MONO ⚠️</span>{% elif stats.audio_channels %}{{ stats.audio_channels }} ch{% else %}-{% endif %}</p>
+    <p><strong>Bitrate:</strong> {% if stats.bitrate %}{{ (stats.bitrate / 1000)|round(1) }} kbps{% else %}-{% endif %}</p>
+    <p><strong>RTMP ingest:</strong><br><code>{{ ingest }}</code></p>
+    <form method="post" action="{{ url_for('main.toggle_stream', stream_id=stream.id) }}">
+      <button type="submit">{{ 'Stop publish' if stream.active else 'Start publish' }}</button>
+    </form>
+    <form method="post" action="{{ url_for('main.rotate_token', stream_id=stream.id) }}">
+      <button type="submit" class="secondary">Rotér token</button>
+    </form>
+  </div>
+</div>
+<div class="grid two">
+  <div class="card">
+    <h2>Chat</h2>
+    {% if stream.chat_url %}
+      <iframe class="chatframe" src="{{ stream.chat_url }}"></iframe>
+    {% else %}
+      <p>Ingen chat sat op.</p>
+    {% endif %}
+  </div>
+  <div class="card">
+    <h2>Hændelseslog</h2>
+    <div class="loglist">
+      {% for log in logs %}
+      <div class="log {{ log.level }}">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }} — {{ log.message }}</div>
+      {% endfor %}
+    </div>
+  </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 %}