140 lines
4.4 KiB
Plaintext
140 lines
4.4 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">
|
|
</head>
|
|
<body class="persistent-player-container">
|
|
<div class="persistent-player">
|
|
<span class="player-label">
|
|
<span class="live-stream-indicator">🟢 </span>
|
|
LIVE:
|
|
</span>
|
|
|
|
<div class="quality-selector">
|
|
<input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
|
|
<label for="stream-quality">Quality:</label>
|
|
<select id="stream-quality" onchange="changeStreamQuality()">
|
|
<option value="aac">AAC 96k</option>
|
|
<option value="mp3">MP3 128k</option>
|
|
<option value="low">MP3 64k</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>
|
|
|
|
<span class="now-playing-mini" id="mini-now-playing">Loading...</span>
|
|
|
|
<button onclick="disableFramesetMode()" class="persistent-disable-btn">
|
|
✕ Disable
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Configure audio element for better streaming
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const audioElement = document.getElementById('persistent-audio');
|
|
|
|
// Try to enable low-latency mode if supported
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: 'Asteroid Radio Live Stream',
|
|
artist: 'Asteroid Radio',
|
|
album: 'Live Broadcast'
|
|
});
|
|
}
|
|
|
|
// Add event listeners for debugging
|
|
audioElement.addEventListener('waiting', function() {
|
|
console.log('Audio buffering...');
|
|
});
|
|
|
|
audioElement.addEventListener('playing', function() {
|
|
console.log('Audio playing');
|
|
});
|
|
|
|
audioElement.addEventListener('error', function(e) {
|
|
console.error('Audio error:', e);
|
|
});
|
|
|
|
const selector = document.getElementById('stream-quality');
|
|
const streamQuality = localStorage.getItem('stream-quality') || 'aac';
|
|
if (selector && selector.value !== streamQuality) {
|
|
selector.value = streamQuality;
|
|
selector.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
// Stream quality configuration
|
|
function getStreamConfig(streamBaseUrl, encoding) {
|
|
const config = {
|
|
aac: {
|
|
url: streamBaseUrl + '/asteroid.aac',
|
|
type: 'audio/aac'
|
|
},
|
|
mp3: {
|
|
url: streamBaseUrl + '/asteroid.mp3',
|
|
type: 'audio/mpeg'
|
|
},
|
|
low: {
|
|
url: streamBaseUrl + '/asteroid-low.mp3',
|
|
type: 'audio/mpeg'
|
|
}
|
|
};
|
|
return config[encoding];
|
|
}
|
|
|
|
// Change stream quality
|
|
function changeStreamQuality() {
|
|
const selector = document.getElementById('stream-quality');
|
|
const streamBaseUrl = document.getElementById('stream-base-url').value;
|
|
const config = getStreamConfig(streamBaseUrl, selector.value);
|
|
|
|
// Save preference
|
|
localStorage.setItem('stream-quality', selector.value);
|
|
|
|
const audioElement = document.getElementById('persistent-audio');
|
|
const sourceElement = document.getElementById('audio-source');
|
|
|
|
const wasPlaying = !audioElement.paused;
|
|
|
|
sourceElement.src = config.url;
|
|
sourceElement.type = config.type;
|
|
audioElement.load();
|
|
|
|
if (wasPlaying) {
|
|
audioElement.play().catch(e => console.log('Autoplay prevented:', e));
|
|
}
|
|
}
|
|
|
|
// Update mini now playing display
|
|
async function updateMiniNowPlaying() {
|
|
try {
|
|
const response = await fetch('/api/asteroid/partial/now-playing-inline');
|
|
if (response.ok) {
|
|
const text = await response.text();
|
|
document.getElementById('mini-now-playing').textContent = text;
|
|
}
|
|
} catch(error) {
|
|
console.log('Could not fetch now playing:', error);
|
|
}
|
|
}
|
|
|
|
// Update every 10 seconds
|
|
setTimeout(updateMiniNowPlaying, 1000);
|
|
setInterval(updateMiniNowPlaying, 10000);
|
|
|
|
// Disable frameset mode function
|
|
function disableFramesetMode() {
|
|
// Clear preference
|
|
localStorage.removeItem('useFrameset');
|
|
// Redirect parent window to regular view
|
|
window.parent.location.href = '/asteroid/';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|