70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>TechDJ Live</title>
|
|
<link rel="stylesheet" href="listener.css?v=2.0">
|
|
</head>
|
|
|
|
<body class="listener-glow listening-active">
|
|
<!-- Listener UI -->
|
|
<div class="listener-mode" id="listener-mode">
|
|
<div class="listener-header">
|
|
<h1>TECHY.MUSIC</h1>
|
|
<div class="live-indicator" id="live-badge" {% if not live %}hidden{% endif %}>
|
|
<span class="pulse-dot"></span>
|
|
<span>🔴 LIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="listener-content">
|
|
<div class="now-playing" id="listener-now-playing">Waiting for stream...</div>
|
|
|
|
<canvas id="viz-listener" width="400" height="100"></canvas>
|
|
|
|
<!-- Enable Audio Button (shown when autoplay is blocked) -->
|
|
<button class="enable-audio-btn" id="enable-audio-btn" onclick="enableListenerAudio()">
|
|
<span class="audio-icon">🎧</span>
|
|
<span class="audio-text">ENABLE AUDIO</span>
|
|
<span class="audio-subtitle">Click to start listening</span>
|
|
</button>
|
|
|
|
<div class="volume-control">
|
|
<label>Volume</label>
|
|
<input type="range" id="listener-volume" min="0" max="100" value="80"
|
|
oninput="setListenerVolume(this.value)">
|
|
</div>
|
|
<div class="connection-status" id="connection-status">Connecting...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
|
<script src="listener.js?v=2.0"></script>
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
var badge = document.getElementById('live-badge');
|
|
|
|
function setLive(isLive) {
|
|
if (!badge) return;
|
|
if (isLive) {
|
|
badge.removeAttribute('hidden');
|
|
} else {
|
|
badge.setAttribute('hidden', '');
|
|
}
|
|
}
|
|
|
|
// Poll /api/srt_status every 5s to react to live state changes
|
|
setInterval(function () {
|
|
fetch('/api/srt_status')
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (d) { setLive(!!d.broadcast_active); })
|
|
.catch(function () {});
|
|
}, 5000);
|
|
}());
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|