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
|
const connectedColor = '#2ECC40';
const connectingColor = '#FF851B';
const disconnectedColor = '#FF4136';
const websocketUrl = 'ws://wailt.leonardobishop.com/';
let progressMillis;
let durationMillis;
let predictProgressInterval;
const msToTime = (duration) => {
const seconds = Math.floor((duration / 1000) % 60);
const minutes = Math.floor((duration / (1000 * 60)) % 60);
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
const setProgress = (progressMillis, durationMillis) => {
const progressPercent = durationMillis == 0 ? 0 : Math.min((progressMillis / durationMillis) * 100, 100);
const songProgress = document.getElementById('song-progress');
const songDuration = document.getElementById('song-duration');
const songProgressBarThumb = document.getElementById('song-progress-bar-thumb');
const progressTime = msToTime(progressMillis);
const durationTime = msToTime(durationMillis);
songProgress.innerHTML = progressTime;
songDuration.innerHTML = durationTime;
songProgressBarThumb.style.width = `${progressPercent}%`;
}
const predictProgress = () => {
progressMillis = Math.min(durationMillis, progressMillis + 1000);
setProgress(progressMillis, durationMillis);
}
const setDefaultData = () => {
const songTitle = document.getElementById('song-title');
const songArtist = document.getElementById('song-artist');
const songAlbum = document.getElementById('song-album');
const songAlbumArt = document.getElementById('song-album-art');
songTitle.innerHTML = 'No song playing';
songArtist.innerHTML = '';
songAlbum.innerHTML = '';
songAlbumArt.src = '/images/blank-album-cover.png';
setProgress(0, 0);
}
const setOpenInSpotify = (songUrl) => {
const openInSpotify = document.getElementById('open-in-spotify');
if (songUrl) {
openInSpotify.href = songUrl;
openInSpotify.style.display = 'block';
} else {
openInSpotify.style.display = 'none';
}
}
const connectWebsocket = () => {
const connectionStatus = document.getElementById('connection-status-text');
const connectionStatusIndicator = document.getElementById('connection-status-indicator');
const onDisconnect = () => {
connectionStatus.innerHTML = "Disconnected";
connectionStatusIndicator.style.backgroundColor = disconnectedColor;
setDefaultData();
clearInterval(predictProgressInterval);
}
const onConnect = () => {
connectionStatus.innerHTML = "Connected";
connectionStatusIndicator.style.backgroundColor = connectedColor;
}
connectionStatus.innerHTML = "Connecting";
connectionStatusIndicator.style.backgroundColor = connectingColor;
const songTitle = document.getElementById('song-title');
const songArtist = document.getElementById('song-artist');
const songAlbum = document.getElementById('song-album');
const songAlbumArt = document.getElementById('song-album-art');
const updateData = (data) => {
clearInterval(predictProgressInterval);
progressMillis = data.progress;
durationMillis = data.duration;
songTitle.innerHTML = data.title;
songArtist.innerHTML = data.artist;
songAlbum.innerHTML = data.album;
songAlbumArt.src = data.albumArt || '/images/blank-album-cover.png';
setProgress(progressMillis, durationMillis);
setOpenInSpotify(data.url);
if (data.state === 'playing') {
predictProgressInterval = setInterval(predictProgress, 1000);
}
}
const socket = new WebSocket(websocketUrl);
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
updateData(data);
}
socket.addEventListener('open', onConnect);
socket.addEventListener('close', onDisconnect);
socket.addEventListener('error', onDisconnect);
}
document.addEventListener("DOMContentLoaded", setDefaultData);
document.addEventListener("DOMContentLoaded", connectWebsocket);
|
