-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (100 loc) · 5.19 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Now Playing Widget</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="widget">
<!-- <a href="https://www.last.fm/user/Kirito139" style="color: inherit; text-decoration: none; display: inline-block; font-size: 8px;">
<img id="lastfm-logo" src="https://raw.githubusercontent.com/Kirito139/lastfm_now_playing/refs/heads/main/lastfm.png"> <span>Kirito139's Scrobbles:</span>
</a> -->
<a href="https://www.last.fm/user/Kirito139" target="_blank" class="lastfm-link">
<img id="lastfm-logo" src="https://raw.githubusercontent.com/Kirito139/lastfm_now_playing/refs/heads/main/lastfm.png" alt="Last.fm logo">
<span>Kirito139's Scrobbles:</span>
</a>
<div class="current-song" id="current-song">
<img id="current-song-art" src="" alt="Current song art">
<div class="current-song-details">
<div id="current-song-info">Loading scrobbles...</div> <!-- Text is now in a div -->
<div id="now-playing-text"></div>
</div>
</div>
<ul class="scrobbles" id="scrobbles"></ul>
</div>
<script>
const API_KEY = '55a6bee68905f489858d708932ae824e';
const USERNAME = 'Kirito139';
const currentSongDiv = document.getElementById('current-song');
const currentSongArt = document.getElementById('current-song-art');
const scrobblesList = document.getElementById('scrobbles');
async function fetchScrobbles() {
const response = await fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${USERNAME}&api_key=${API_KEY}&format=json&limit=5`);
const data = await response.json();
return data.recenttracks.track;
}
async function updateWidget() {
const tracks = await fetchScrobbles();
if (tracks.length > 0) {
const nowPlaying = tracks[0]['@attr']?.nowplaying ? tracks[0] : tracks.find(track => track['@attr']?.nowplaying);
/*if (nowPlaying) {
currentSongDiv.innerHTML = `
<img src="${nowPlaying.image[2]['#text']}" alt="${nowPlaying.name} album art">
<div id="current-song-info">${nowPlaying.artist['#text']} - ${nowPlaying.name}</div>
<div id="now-playing-text" class="now-playing">Now Playing</div>
`;
} else {
currentSongDiv.innerHTML = '<div>No song currently playing</div>';
}*/
if (nowPlaying) {
currentSongDiv.innerHTML = `
<img src="${nowPlaying.image[2]['#text']}" alt="${nowPlaying.name} album art">
<div class="current-song-details">
<div id="current-song-info">${nowPlaying.artist['#text']} - ${nowPlaying.name}</div>
<div id="now-playing-text" class="now-playing">Now Scrobbling</div>
</div>
`;
} else {
currentSongDiv.innerHTML = '<div>No song currently playing</div>';
}
scrobblesList.innerHTML = '';
tracks.forEach((track, index) => {
if (!track['@attr']?.nowplaying) {
const listItem = document.createElement('li');
listItem.className = 'scrobble';
const timeAgo = getTimeAgo(track.date.uts);
/*listItem.innerHTML = `
<img src="${track.image[2]['#text']}" alt="${track.name} album art">
<div>${track.artist['#text']} - ${track.name}</div>
<div class="time-ago">${timeAgo}</div>
`;*/
listItem.innerHTML = `
<img src="${track.image[2]['#text']}" alt="${track.name} album art">
<div class="scrobble-details">
<div class="scrobble-song">${track.artist['#text']} - ${track.name}</div>
<div class="time-ago">${timeAgo}</div>
</div>
`;
scrobblesList.appendChild(listItem);
}
});
}
}
function getTimeAgo(timestamp) {
const now = Math.floor(Date.now() / 1000);
const seconds = now - timestamp;
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
return 'Just now';
}
setInterval(updateWidget, 30000); // Update every 30 seconds
updateWidget(); // Initial fetch
</script>
</body>
</html>