add legacy stuff
This commit is contained in:
uimaxbai
parent
c33ef02dca
commit
ab04031fcd
5 changed files with 483 additions and 0 deletions
BIN
legacy/getie3.gif
Normal file
BIN
legacy/getie3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
legacy/getnet3.gif
Normal file
BIN
legacy/getnet3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
81
legacy/index.html
Normal file
81
legacy/index.html
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Monochrome Legacy</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<link rel="stylesheet" type="text/css" href="legacy.css">
|
||||||
|
<script type="text/javascript" src="legacy.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
|
||||||
|
<!-- Header -->
|
||||||
|
<tr height="80">
|
||||||
|
<td colspan="2" bgcolor="#000000" align="center">
|
||||||
|
<font color="#FFFFFF" size="6" face="Comic Sans MS, Arial"><b>Monochrome Music</b></font><br>
|
||||||
|
<font color="#cccccc" size="2">music</font>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Marquee -->
|
||||||
|
<tr height="20">
|
||||||
|
<td colspan="2" class="marquee-container">
|
||||||
|
<marquee scrollamount="5" scrolldelay="100">Welcome to Monochrome Music Legacy Edition check out the latest hits new songs added daily under construction sign guestbook</marquee>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- Main Body -->
|
||||||
|
<tr valign="top">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<td width="150" bgcolor="#dddddd" class="beveled-box">
|
||||||
|
<br>
|
||||||
|
<center><b>Menu</b></center>
|
||||||
|
<hr>
|
||||||
|
<ul style="list-style-type: square; padding-left: 20px;">
|
||||||
|
<li class="sidebar-link"><a href="#" id="btn-home">Home</a></li>
|
||||||
|
<!-- Search is now inline below -->
|
||||||
|
<li class="sidebar-link"><a href="/">Go to Modern Site</a></li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<!-- Search Form moved to main content -->
|
||||||
|
<br>
|
||||||
|
<center>
|
||||||
|
<img src="getie3.gif" alt="IE Logo" width="88" height="31"><br><br>
|
||||||
|
<img src="getnet3.gif" alt="Netscape Logo" width="88" height="31"><br><br>
|
||||||
|
<font size="1">Free and open software</font>
|
||||||
|
</center>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<td bgcolor="#ffffff">
|
||||||
|
<div style="padding: 10px;">
|
||||||
|
<!-- Now Playing / Player Control -->
|
||||||
|
<div class="controls" style="margin-bottom: 20px;">
|
||||||
|
<font face="Verdana" size="2">
|
||||||
|
<span id="now-playing-info">Status: Ready to play.</span>
|
||||||
|
</font>
|
||||||
|
<br><br>
|
||||||
|
<audio id="audio-player" controls preload="none" style="width: 300px; height: 30px;">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Moved Search Form -->
|
||||||
|
<div class="beveled-box" style="margin-bottom: 20px; text-align: center;">
|
||||||
|
<b>Search Music: </b>
|
||||||
|
<form id="search-form" onsubmit="return false;" style="display: inline;">
|
||||||
|
<input type="text" id="search-input" size="40">
|
||||||
|
<input type="submit" id="btn-search" value="Search">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main-content">
|
||||||
|
<center><h3>Loading...</h3></center>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
98
legacy/legacy.css
Normal file
98
legacy/legacy.css
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
/* Retro 90s Styling */
|
||||||
|
body {
|
||||||
|
background-color: #c0c0c0;
|
||||||
|
font-family: "Times New Roman", Times, serif;
|
||||||
|
color: #000000;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-image: url("assets/bg_texture.gif"); /* Fallback if not found is just grey */
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #000000;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse; /* Not strictly 90s but makes it cleaner */
|
||||||
|
}
|
||||||
|
|
||||||
|
.beveled-box {
|
||||||
|
border-top: 2px solid #ffffff;
|
||||||
|
border-left: 2px solid #ffffff;
|
||||||
|
border-right: 2px solid #808080;
|
||||||
|
border-bottom: 2px solid #808080;
|
||||||
|
background-color: #c0c0c0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inset-box {
|
||||||
|
border-top: 2px solid #808080;
|
||||||
|
border-left: 2px solid #808080;
|
||||||
|
border-right: 2px solid #ffffff;
|
||||||
|
border-bottom: 2px solid #ffffff;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-container {
|
||||||
|
background-color: #000000;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "Courier New", Courier, monospace;
|
||||||
|
padding: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-link {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-row td {
|
||||||
|
padding: 2px 5px;
|
||||||
|
border: 1px solid #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #a0a0a0;
|
||||||
|
border: 2px outset #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #c0c0c0;
|
||||||
|
border-top: 2px solid #ffffff;
|
||||||
|
border-left: 2px solid #ffffff;
|
||||||
|
border-right: 2px solid #000000;
|
||||||
|
border-bottom: 2px solid #000000;
|
||||||
|
padding: 2px 10px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
border-top: 2px solid #000000;
|
||||||
|
border-left: 2px solid #000000;
|
||||||
|
border-right: 2px solid #ffffff;
|
||||||
|
border-bottom: 2px solid #ffffff;
|
||||||
|
}
|
||||||
304
legacy/legacy.js
Normal file
304
legacy/legacy.js
Normal file
|
|
@ -0,0 +1,304 @@
|
||||||
|
// strictly ES5/Legacy JS
|
||||||
|
(function () {
|
||||||
|
var currentApiUrl = ""; // Will be set from instances.json
|
||||||
|
var isHttpFallback = false;
|
||||||
|
var FALLBACK_INSTANCES = [
|
||||||
|
"https://triton.squid.wtf",
|
||||||
|
"https://wolf.qqdl.site",
|
||||||
|
"https://maus.qqdl.site",
|
||||||
|
"https://vogel.qqdl.site",
|
||||||
|
"https://katze.qqdl.site",
|
||||||
|
"https://hund.qqdl.site",
|
||||||
|
"https://tidal.kinoplus.online",
|
||||||
|
"https://tidal-api.binimum.org",
|
||||||
|
];
|
||||||
|
var audioPlayer;
|
||||||
|
var currentTrackInfo;
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
audioPlayer = document.getElementById("audio-player");
|
||||||
|
currentTrackInfo = document.getElementById("now-playing-info");
|
||||||
|
|
||||||
|
fetchInstances(function (url) {
|
||||||
|
currentApiUrl = url;
|
||||||
|
loadRecentTracks();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple event delegation if we wanted, but explicit bindings are safer for old browsers
|
||||||
|
var btnHome = document.getElementById("btn-home");
|
||||||
|
if (btnHome) {
|
||||||
|
btnHome.onclick = function () {
|
||||||
|
loadRecentTracks();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Search button removed, using persistent form now
|
||||||
|
|
||||||
|
var searchForm = document.getElementById("search-form");
|
||||||
|
searchForm.onsubmit = function () {
|
||||||
|
var query = document.getElementById("search-input").value;
|
||||||
|
performSearch(query);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function loadRecentTracks() {
|
||||||
|
setContent("Loading recent tracks...");
|
||||||
|
apiRequest(
|
||||||
|
"/search/?s=a&limit=20",
|
||||||
|
function (data) {
|
||||||
|
if (data && data.data && data.data.items) {
|
||||||
|
renderTracks(data.data.items, "Recently Added / Popular");
|
||||||
|
} else {
|
||||||
|
setContent("No recent tracks found.");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
setContent("Error loading tracks: " + err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchInstances(callback) {
|
||||||
|
var xhr = createXHR();
|
||||||
|
xhr.open("GET", "instances.json", true);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) {
|
||||||
|
try {
|
||||||
|
var instances = JSON.parse(xhr.responseText);
|
||||||
|
if (instances && instances.length > 0) {
|
||||||
|
var randomUrl =
|
||||||
|
instances[Math.floor(Math.random() * instances.length)];
|
||||||
|
// Remove trailing slash if present
|
||||||
|
if (randomUrl.charAt(randomUrl.length - 1) === "/") {
|
||||||
|
randomUrl = randomUrl.substring(0, randomUrl.length - 1);
|
||||||
|
}
|
||||||
|
callback(randomUrl);
|
||||||
|
} else {
|
||||||
|
useFallback(callback);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
useFallback(callback);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
useFallback(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.onerror = function () {
|
||||||
|
useFallback(callback);
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function useFallback(callback) {
|
||||||
|
var randomUrl =
|
||||||
|
FALLBACK_INSTANCES[Math.floor(Math.random() * FALLBACK_INSTANCES.length)];
|
||||||
|
callback(randomUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
function performSearch(query) {
|
||||||
|
var resultsDiv = document.getElementById("search-results");
|
||||||
|
if (!resultsDiv) {
|
||||||
|
setContent('<div id="search-results">Searching...</div>');
|
||||||
|
resultsDiv = document.getElementById("search-results");
|
||||||
|
} else {
|
||||||
|
resultsDiv.innerHTML = "Searching...";
|
||||||
|
}
|
||||||
|
|
||||||
|
apiRequest(
|
||||||
|
"/search/?s=" + encodeURIComponent(query) + "&limit=25",
|
||||||
|
function (data) {
|
||||||
|
var tracks = (data && data.data && data.data.items) ? data.data.items : [];
|
||||||
|
if (tracks.length === 0) {
|
||||||
|
resultsDiv.innerHTML = "No results found.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Manually render table string to avoid complex DOM manipulation
|
||||||
|
var html =
|
||||||
|
'<table width="100%" border="1" cellpadding="2" cellspacing="0">';
|
||||||
|
html +=
|
||||||
|
'<tr bgcolor="#bbbbbb"><th>Play</th><th>Title</th><th>Artist</th><th>Album</th></tr>';
|
||||||
|
|
||||||
|
for (var i = 0; i < tracks.length; i++) {
|
||||||
|
var t = tracks[i];
|
||||||
|
var safeTitle = escapeHtml(t.title);
|
||||||
|
var safeArtist = escapeHtml(t.artist.name);
|
||||||
|
var safeAlbum = escapeHtml(t.album.title);
|
||||||
|
|
||||||
|
html += '<tr class="track-row">';
|
||||||
|
html +=
|
||||||
|
'<td align="center"><button onclick="window.playTrack(\'' +
|
||||||
|
t.id +
|
||||||
|
"')\">Play</button></td>";
|
||||||
|
html += "<td>" + safeTitle + "</td>";
|
||||||
|
html += "<td>" + safeArtist + "</td>";
|
||||||
|
html += "<td>" + safeAlbum + "</td>";
|
||||||
|
html += "</tr>";
|
||||||
|
}
|
||||||
|
html += "</table>";
|
||||||
|
|
||||||
|
resultsDiv.innerHTML = html;
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
resultsDiv.innerHTML = "Error: " + err;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTracks(tracks, title) {
|
||||||
|
var html = "<h3>" + title + "</h3>";
|
||||||
|
html += '<table width="100%" border="1" cellpadding="2" cellspacing="0">';
|
||||||
|
html +=
|
||||||
|
'<tr bgcolor="#bbbbbb"><th>Play</th><th>Title</th><th>Artist</th><th>Album</th></tr>';
|
||||||
|
|
||||||
|
for (var i = 0; i < tracks.length; i++) {
|
||||||
|
var t = tracks[i];
|
||||||
|
var safeTitle = escapeHtml(t.title);
|
||||||
|
var safeArtist = escapeHtml(t.artist.name);
|
||||||
|
var safeAlbum = escapeHtml(t.album.title);
|
||||||
|
|
||||||
|
html += '<tr class="track-row">';
|
||||||
|
html +=
|
||||||
|
'<td align="center"><button onclick="window.playTrack(\'' +
|
||||||
|
t.id +
|
||||||
|
"')\">Play</button></td>";
|
||||||
|
html += "<td>" + safeTitle + "</td>";
|
||||||
|
html += "<td>" + safeArtist + "</td>";
|
||||||
|
html += "<td>" + safeAlbum + "</td>";
|
||||||
|
html += "</tr>";
|
||||||
|
}
|
||||||
|
html += "</table>";
|
||||||
|
|
||||||
|
setContent(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global player function
|
||||||
|
window.playTrack = function (id) {
|
||||||
|
apiRequest(
|
||||||
|
"/track/?id=" + id + "&quality=HIGH",
|
||||||
|
function (data) {
|
||||||
|
if (data && data.data && data.data.manifest) {
|
||||||
|
try {
|
||||||
|
// Manifest is Base64 encoded JSON
|
||||||
|
var manifestStr = base64Decode(data.data.manifest);
|
||||||
|
var manifest = JSON.parse(manifestStr);
|
||||||
|
if (manifest.urls && manifest.urls.length > 0) {
|
||||||
|
audioPlayer.src = manifest.urls[0];
|
||||||
|
audioPlayer.play();
|
||||||
|
|
||||||
|
if (currentTrackInfo) {
|
||||||
|
// We don't get full track info in playback response easily without another call or passing it,
|
||||||
|
// but for legacy we might accept just "Now Playing..." or maybe we pass it?
|
||||||
|
// For now simplicity:
|
||||||
|
currentTrackInfo.innerHTML = "Now Playing...";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert("No stream URLs found in manifest.");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
alert("Error parsing playback manifest: " + e.message);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert("Invalid track data received.");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
function (err) {
|
||||||
|
alert("Error playing track: " + err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function setContent(html) {
|
||||||
|
var content = document.getElementById("main-content");
|
||||||
|
content.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function apiRequest(endpoint, success, error) {
|
||||||
|
var xhr = createXHR();
|
||||||
|
// Use fallback HTTP if needed logic
|
||||||
|
var finalUrl = currentApiUrl;
|
||||||
|
if (isHttpFallback && finalUrl.indexOf("https://") === 0) {
|
||||||
|
finalUrl = "http://" + finalUrl.substring(8);
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.open("GET", finalUrl + endpoint, true);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) {
|
||||||
|
try {
|
||||||
|
var data = JSON.parse(xhr.responseText);
|
||||||
|
success(data);
|
||||||
|
} catch (e) {
|
||||||
|
error("JSON Parse Error");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// If failed and not yet fallback, try fallback
|
||||||
|
if(!isHttpFallback) {
|
||||||
|
isHttpFallback = true;
|
||||||
|
apiRequest(endpoint, success, error);
|
||||||
|
} else {
|
||||||
|
error("HTTP " + xhr.status);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.onerror = function () {
|
||||||
|
if(!isHttpFallback) {
|
||||||
|
isHttpFallback = true;
|
||||||
|
apiRequest(endpoint, success, error);
|
||||||
|
} else {
|
||||||
|
error("Network Error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(text) {
|
||||||
|
if (!text) return "";
|
||||||
|
return text
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
function createXHR() {
|
||||||
|
if (window.XMLHttpRequest) {
|
||||||
|
return new XMLHttpRequest();
|
||||||
|
}
|
||||||
|
// IE5/6 support
|
||||||
|
try {
|
||||||
|
return new ActiveXObject("Msxml2.XMLHTTP");
|
||||||
|
} catch (e) {}
|
||||||
|
try {
|
||||||
|
return new ActiveXObject("Microsoft.XMLHTTP");
|
||||||
|
} catch (e) {}
|
||||||
|
alert("Your browser does not support AJAX!");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function base64Decode(str) {
|
||||||
|
if (window.atob) {
|
||||||
|
return window.atob(str);
|
||||||
|
}
|
||||||
|
// Polyfill for IE
|
||||||
|
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
||||||
|
var output = "";
|
||||||
|
str = String(str).replace(/=+$/, '');
|
||||||
|
if (str.length % 4 == 1) {
|
||||||
|
throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
|
||||||
|
}
|
||||||
|
for (
|
||||||
|
var bc = 0, bs = 0, buffer, i = 0;
|
||||||
|
buffer = str.charAt(i++);
|
||||||
|
~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
|
||||||
|
bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
|
||||||
|
) {
|
||||||
|
buffer = chars.indexOf(buffer);
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
}
|
||||||
|
})();
|
||||||
Loading…
Reference in a new issue