1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
document.addEventListener('DOMContentLoaded', function() {
const audio = document.getElementById('spinitronAudioPlayer');
const playButton = document.getElementById('spinitronPlayButton');
let updateInterval;
let statusInterval;
let currentSpinId = null;
let currentEndTime = null;
// Update metadata from the API
function updateMetadata() {
try {
const response = await fetch(spinitronConfig.endpoint);
const data = await response.json();
if (data.status === 'ok') {
// Update song metadata links
const songTitle = document.getElementById('spinitronSongTitle');
songTitle.textContent = data.spin_data.song || '-';
songTitle.href = `https://spinitron.com/WVAU/spin/${data.spin_data.id}`;
const artistLink = document.getElementById('spinitronArtist');
artistLink.textContent = data.spin_data.artist || '-';
artistLink.href = `https://spinitron.com/WVAU/artist/${encodeURIComponent(data.spin_data.artist)}`;
const releaseLink = document.getElementById('spinitronRelease');
releaseLink.textContent = data.spin_data.release || '-';
releaseLink.href = `https://spinitron.com/WVAU/release/${encodeURIComponent(data.spin_data.release)}`;
// Update show metadata links
const showTitle = document.getElementById('spinitronShowTitle');
showTitle.textContent = data.playlist_data.title || '-';
showTitle.href = `https://spinitron.com/WVAU/playlist/${data.playlist_data.id}`;
const episodeLink = document.getElementById('spinitronEpisode');
episodeLink.textContent = data.playlist_data.episode_name || '-';
episodeLink.href = `https://spinitron.com/WVAU/playlist/${data.playlist_data.id}`;
}
} catch (error) {
console.error('Error fetching metadata:', error);
}
}
// Update the "NOW PLAYING" / "LAST PLAYED" status labels
function updateStatusLabels() {
if (!currentEndTime) return;
const now = Date.now();
const endTime = currentEndTime.getTime();
const secondsSinceEnd = (now - endTime) / 1000;
const labels = document.querySelectorAll('.spinitron-now-playing');
labels.forEach(label => {
if (secondsSinceEnd > 60) {
label.textContent = 'LAST PLAYED (?)';
label.style.color = '#ff4444';
} else if (secondsSinceEnd > 30) {
label.textContent = 'LAST PLAYED';
label.style.color = '#ffa500';
} else {
label.textContent = 'NOW PLAYING';
label.style.color = '#888';
}
});
}
// Toggle audio playback
function togglePlayback() {
if (audio.paused) {
audio.play().catch(error => console.error('Audio playback failed:', error));
playButton.innerHTML = '<span>⏸</span> <span class="play-text">Pause</span>';
updateMetadata();
updateInterval = setInterval(updateMetadata, spinitronConfig.cacheDuration);
} else {
audio.pause();
playButton.innerHTML = '<span>▶</span> <span class="play-text">Play</span>';
clearInterval(updateInterval);
}
}
// Initial metadata check
updateMetadata();
// Event listeners
playButton.addEventListener('click', togglePlayback);
// Handle audio ending
audio.addEventListener('ended', () => {
playButton.innerHTML = '<span>▶</span> <span class="play-text">Play</span>';
clearInterval(updateInterval);
});
// Auto-update metadata when tab becomes visible
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
updateMetadata();
updateStatusLabels();
}
});
});
// Recently Played Marquee Updates
async function updateRecentlyPlayed() {
try {
const response = await fetch(spinitronConfig.endpoint);
const data = await response.json();
if (data.status === 'ok' && data.spin_data) {
const spin = data.spin_data;
const playlist = data.playlist_data;
const template = document.getElementById('recent-spin-template').innerHTML;
const container = document.getElementById('recent-spin-container');
const recentSpinHtml = template
.replace(/{time}/g, new Date(spin.start).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).toLowerCase())
.replace(/{song}/g, spin.song || 'Unknown Song')
.replace(/{artist}/g, spin.artist || 'Unknown Artist')
.replace(/{release}/g, spin.release || 'Unknown Release')
.replace(/{spin_id}/g, spin.id)
.replace(/{artist_id}/g, encodeURIComponent(spin.artist))
.replace(/{release_id}/g, encodeURIComponent(spin.release));
container.innerHTML = recentSpinHtml;
}
} catch (error) {
console.error('Error updating recently played:', error);
}
}
// Start updating the recently played marquee
if (document.getElementById('spin-recent')) {
updateRecentlyPlayed(); // Initial update
setInterval(updateRecentlyPlayed, spinitronConfig.cacheDuration); // Periodic updates
}
// Pause on hover
const ticker = document.getElementById('ticker');
if (ticker) {
ticker.addEventListener('mouseenter', () => {
ticker.style.animationPlayState = 'paused';
});
ticker.addEventListener('mouseleave', () => {
ticker.style.animationPlayState = 'running';
});
}
|
