glenn
/
asteroid
mirror of https://github.com/glenneth1/asteroid.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: move frontpage javascript code to own file

This commit is contained in:
Luis Pereira 2025-10-04 16:04:47 +01:00 committed by Brian O'Reilly
parent 35f4c6516b
commit 6edbb5754b
2 changed files with 106 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
static/js/front-page.js Normal file
View File

@ -0,0 +1,105 @@
// Stream quality configuration
const streamConfig = {
aac: {
url: 'http://localhost:8000/asteroid.aac',
format: 'AAC 96kbps Stereo',
type: 'audio/aac',
mount: 'asteroid.aac'
},
mp3: {
url: 'http://localhost:8000/asteroid.mp3',
format: 'MP3 128kbps Stereo',
type: 'audio/mpeg',
mount: 'asteroid.mp3'
},
low: {
url: 'http://localhost:8000/asteroid-low.mp3',
format: 'MP3 64kbps Stereo',
type: 'audio/mpeg',
mount: 'asteroid-low.mp3'
}
};
// Change stream quality
function changeStreamQuality() {
const selector = document.getElementById('stream-quality');
const config = streamConfig[selector.value];
// Update UI elements
document.getElementById('stream-url').textContent = config.url;
document.getElementById('stream-format').textContent = config.format;
// Update Station Status stream quality display
const statusQuality = document.querySelector('[data-text="stream-quality"]');
if (statusQuality) {
statusQuality.textContent = config.format;
}
// Update audio player
const audioElement = document.getElementById('live-audio');
const sourceElement = document.getElementById('audio-source');
const wasPlaying = !audioElement.paused;
const currentTime = audioElement.currentTime;
sourceElement.src = config.url;
sourceElement.type = config.type;
audioElement.load();
// Resume playback if it was playing
if (wasPlaying) {
audioElement.play().catch(e => console.log('Autoplay prevented:', e));
}
}
// Update now playing info from Icecast
async function updateNowPlaying() {
try {
const response = await fetch('/asteroid/api/icecast-status')
const data = await response.json()
if (data.icestats && data.icestats.source) {
// Find the high quality stream (asteroid.mp3)
const sources = Array.isArray(data.icestats.source) ? data.icestats.source : [data.icestats.source];
const mainStream = sources.find(s => s.listenurl && s.listenurl.includes('asteroid.mp3'));
if (mainStream && mainStream.title) {
// Parse "Artist - Track" format
const titleParts = mainStream.title.split(' - ');
const artist = titleParts.length > 1 ? titleParts[0] : 'Unknown Artist';
const track = titleParts.length > 1 ? titleParts.slice(1).join(' - ') : mainStream.title;
document.querySelector('[data-text="now-playing-artist"]').textContent = artist;
document.querySelector('[data-text="now-playing-track"]').textContent = track;
document.querySelector('[data-text="listeners"]').textContent = mainStream.listeners || '0';
// Update stream status
const statusElement = document.querySelector('.live-stream p:nth-child(3) span');
if (statusElement) {
statusElement.textContent = '● LIVE - ' + track;
statusElement.style.color = '#00ff00';
}
}
}
} catch(error) {
console.log('Could not fetch stream status:', error);
}
}
// Initialize stream quality display on page load
window.addEventListener('DOMContentLoaded', function() {
// Set initial quality display to match the selected stream
const selector = document.getElementById('stream-quality');
const config = streamConfig[selector.value];
document.getElementById('stream-url').textContent = config.url;
document.getElementById('stream-format').textContent = config.format;
const statusQuality = document.querySelector('[data-text="stream-quality"]');
if (statusQuality) {
statusQuality.textContent = config.format;
}
// Update playing information right after load
updateNowPlaying();
});
// Update every 10 seconds
setInterval(updateNowPlaying, 10000);

107
template/front-page.chtml
View File

@ -8,6 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<script src="/asteroid/static/js/front-page.js"></script>
</head>
<body>
<div class="container">
@ -62,111 +63,5 @@
</div>
</main>
</div>
<script>
// Stream quality configuration
const streamConfig = {
aac: {
url: 'http://localhost:8000/asteroid.aac',
format: 'AAC 96kbps Stereo',
type: 'audio/aac',
mount: 'asteroid.aac'
},
mp3: {
url: 'http://localhost:8000/asteroid.mp3',
format: 'MP3 128kbps Stereo',
type: 'audio/mpeg',
mount: 'asteroid.mp3'
},
low: {
url: 'http://localhost:8000/asteroid-low.mp3',
format: 'MP3 64kbps Stereo',
type: 'audio/mpeg',
mount: 'asteroid-low.mp3'
}
};
// Change stream quality
function changeStreamQuality() {
const selector = document.getElementById('stream-quality');
const config = streamConfig[selector.value];
// Update UI elements
document.getElementById('stream-url').textContent = config.url;
document.getElementById('stream-format').textContent = config.format;
// Update Station Status stream quality display
const statusQuality = document.querySelector('[data-text="stream-quality"]');
if (statusQuality) {
statusQuality.textContent = config.format;
}
// Update audio player
const audioElement = document.getElementById('live-audio');
const sourceElement = document.getElementById('audio-source');
const wasPlaying = !audioElement.paused;
const currentTime = audioElement.currentTime;
sourceElement.src = config.url;
sourceElement.type = config.type;
audioElement.load();
// Resume playback if it was playing
if (wasPlaying) {
audioElement.play().catch(e => console.log('Autoplay prevented:', e));
}
}
// Update now playing info from Icecast
function updateNowPlaying() {
fetch('/asteroid/api/icecast-status')
.then(response => response.json())
.then(data => {
if (data.icestats && data.icestats.source) {
// Find the high quality stream (asteroid.mp3)
const sources = Array.isArray(data.icestats.source) ? data.icestats.source : [data.icestats.source];
const mainStream = sources.find(s => s.listenurl && s.listenurl.includes('asteroid.mp3'));
if (mainStream && mainStream.title) {
// Parse "Artist - Track" format
const titleParts = mainStream.title.split(' - ');
const artist = titleParts.length > 1 ? titleParts[0] : 'Unknown Artist';
const track = titleParts.length > 1 ? titleParts.slice(1).join(' - ') : mainStream.title;
document.querySelector('[data-text="now-playing-artist"]').textContent = artist;
document.querySelector('[data-text="now-playing-track"]').textContent = track;
document.querySelector('[data-text="listeners"]').textContent = mainStream.listeners || '0';
// Update stream status
const statusElement = document.querySelector('.live-stream p:nth-child(3) span');
if (statusElement) {
statusElement.textContent = '● LIVE - ' + track;
statusElement.style.color = '#00ff00';
}
}
}
})
.catch(error => console.log('Could not fetch stream status:', error));
}
// Initialize stream quality display on page load
window.addEventListener('DOMContentLoaded', function() {
// Set initial quality display to match the selected stream
const selector = document.getElementById('stream-quality');
const config = streamConfig[selector.value];
document.getElementById('stream-url').textContent = config.url;
document.getElementById('stream-format').textContent = config.format;
const statusQuality = document.querySelector('[data-text="stream-quality"]');
if (statusQuality) {
statusQuality.textContent = config.format;
}
});
// Update every 10 seconds
updateNowPlaying();
setInterval(updateNowPlaying, 10000);
</script>
</body>
</html>