66 lines
3.0 KiB
Plaintext
66 lines
3.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
|
|
<script src="/asteroid/static/js/stream-player.js"></script>
|
|
</head>
|
|
<body class="persistent-player-container">
|
|
<div class="persistent-player">
|
|
<!-- Mini spectrum visualizer -->
|
|
<canvas id="mini-spectrum-canvas" width="100" height="28" style="vertical-align: middle; margin-right: 8px; border-radius: 3px; background: #000;"></canvas>
|
|
|
|
<span class="player-label">
|
|
<span class="live-stream-indicator">🟢 </span>
|
|
LIVE:
|
|
</span>
|
|
|
|
<div class="channel-selector">
|
|
<input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
|
|
<label for="stream-channel">Channel:</label>
|
|
<select id="stream-channel" onchange="changeChannel()">
|
|
<option value="curated">🎧 <c:splice lquery="(text curated-channel-name)">Curated</c:splice></option>
|
|
<option value="shuffle">🎲 Shuffle</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="quality-selector">
|
|
<select id="stream-quality" onchange="changeStreamQuality()" title="Stream Quality">
|
|
<option value="aac">AAC</option>
|
|
<option value="mp3">MP3</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
|
|
<audio id="persistent-audio" controls preload="metadata" crossorigin="anonymous">
|
|
<source id="audio-source" lquery="(attr :src default-stream-url :type default-stream-encoding)">
|
|
</audio>
|
|
|
|
<a id="mini-musicbrainz-link" href="#" target="_blank" title="Search on MusicBrainz" style="display: none; margin-right: 4px; text-decoration: none;">🔗</a>
|
|
<span class="now-playing-mini" id="mini-now-playing">Loading...</span>
|
|
<span class="favorite-count-mini" id="favorite-count-mini"></span>
|
|
|
|
<button class="btn-favorite-mini" id="favorite-btn-mini" onclick="toggleFavoriteMini()" title="Add to favorites">
|
|
<span class="star-icon">☆</span>
|
|
</button>
|
|
<input type="hidden" id="current-track-id-mini" value="">
|
|
|
|
<button id="notification-toggle" onclick="toggleNotifications()" class="persistent-notification-btn" title="Track notifications OFF - click to enable">🔕</button>
|
|
|
|
<button id="reconnect-btn" onclick="reconnectStream()" class="persistent-reconnect-btn" title="Reconnect if audio stops working">
|
|
<img src="/asteroid/static/icons/sync.png" alt="Reconnect" style="width: 18px; height: 18px; vertical-align: middle; filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);">
|
|
</button>
|
|
|
|
<button onclick="disableFramesetMode()" class="persistent-disable-btn">
|
|
✕ Disable
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Status indicator for connection issues -->
|
|
<div id="stream-status" style="display: none; background: #550000; color: #ff6666; padding: 4px 10px; text-align: center; font-size: 0.85em;"></div>
|
|
|
|
<!-- Initialization handled by stream-player.js -->
|
|
</body>
|
|
</html>
|