-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (112 loc) · 5.73 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trending Music</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white p-6">
<h1 class="text-4xl font-bold mb-6">🔥 Trending Music 🔥</h1>
<p class="text-lg text-center text-gray-300 mb-6">
A website which lists trending music from YouTube across all of its regions.</br>
List is updated at IST midnight i.e. <span id="countdown"></span> from now.
</p>
<div class="mb-6 flex flex-wrap gap-2">
<select id="sort-by" class="appearance-none px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg cursor-pointer">
<option value="views">Sort by Views</option>
<option value="likes">Sort by Likes</option>
<option value="comments">Sort by Comments</option>
<option value="frequency">Sort by Region Coverage</option>
</select>
<button id="toggle-data" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg">Newly Added</button>
<a href="https://github.com/clitic/music" target="_blank" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg">Source Code</a>
<a href="https://raw.githubusercontent.com/clitic/music/refs/heads/gh-pages/data.json" target="_blank" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg">JSON</a>
</div>
<div class="w-full max-w-lg space-y-4" id="music-list">
<!-- data will be injected here -->
</div>
<script>
function sortData(criteria) {
if (criteria === "views") {
data.sort((a, b) => b.view_count - a.view_count);
} else if (criteria === "likes") {
data.sort((a, b) => b.like_count - a.like_count);
} else if (criteria === "comments") {
data.sort((a, b) => b.comment_count - a.comment_count);
} else if (criteria === "frequency") {
data.sort((a, b) => b.frequency - a.frequency);
}
renderData();
}
function loadData(filename) {
fetch(filename)
.then(response => response.json())
.then(xdata => {
data = xdata;
sortData(document.getElementById("sort-by").value);
})
.catch(error => {
console.error("Error loading songs:", error);
});
}
function toggleData() {
const newlyAddedBtn = document.getElementById("toggle-data");
if (newlyAddedBtn.innerText === "Newly Added") {
loadData("data-newly-added.json");
newlyAddedBtn.innerText = "All Videos";
} else {
loadData("data.json");
newlyAddedBtn.innerText = "Newly Added";
}
}
function formatNumber(value) {
if (value >= 1_000_000_000) return (value / 1_000_000_000).toFixed(1) + " B";
if (value >= 1_000_000) return (value / 1_000_000).toFixed(1) + " M";
if (value >= 1_000) return (value / 1_000).toFixed(1) + " K";
return value;
}
function renderData() {
const musicList = document.getElementById("music-list");
musicList.innerHTML = "";
data.forEach((song, index) => {
const card = document.createElement("div");
card.className = "p-4 flex items-center bg-gray-800 shadow-lg rounded-lg hover:bg-gray-700 transition cursor-pointer";
card.onclick = () => window.open("https://youtu.be/" + song.id, "_blank");
const songInfo = document.createElement("div");
songInfo.className = "flex-1";
songInfo.innerHTML = `
<span class="font-semibold text-lg">${index + 1}. ${song.title}</span><br>
<span class="text-sm text-gray-400">🔎 ${formatNumber(song.view_count)}</span>
<span class="text-sm text-gray-400">❤️ ${formatNumber(song.like_count)}</span>
<span class="text-sm text-gray-400">💬 ${formatNumber(song.comment_count)}</span>
<span class="text-sm text-gray-400">🌍 ${song.frequency.toFixed(1)} %</span>
`;
const thumbnail = document.createElement("img");
thumbnail.className = "w-20 h-20 rounded-lg object-cover ml-4";
thumbnail.src = "https://img.youtube.com/vi/" + song.id + "/hqdefault.jpg";
thumbnail.loading = "lazy";
card.appendChild(songInfo);
card.appendChild(thumbnail);
musicList.appendChild(card);
});
}
function istMidnightCountdown() {
const now = new Date();
const midnight = new Date();
midnight.setUTCHours(18, 30, 0, 0);
if (now > midnight) midnight.setDate(midnight.getDate() + 1);
const diff = midnight - now;
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
document.getElementById("countdown").innerText = `${hours}h ${minutes}m`;
}
let data = [];
document.getElementById("sort-by").addEventListener("change", event => sortData(event.target.value));
document.getElementById("toggle-data").addEventListener("click", toggleData);
setInterval(istMidnightCountdown, 60000);
istMidnightCountdown();
loadData("data.json");
</script>
</body>
</html>