mirror of
https://github.com/krateng/maloja.git
synced 2023-08-10 21:12:55 +03:00
215 lines
5.3 KiB
HTML
215 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Maloja</title>
|
|
<script src="javascript/cookies.js"></script>
|
|
|
|
<script>
|
|
function keyDetect(event) {
|
|
if (event.key === "Enter" || event.key === "Tab") { addArtist() }
|
|
if (event.key === "Backspace" && document.getElementById("artists").value == "") { removeArtist() }
|
|
}
|
|
|
|
function addArtist() {
|
|
element = document.getElementById("artists");
|
|
newartist = element.value.trim();
|
|
element.value = "";
|
|
if (newartist != "") {
|
|
artist = document.createElement("span");
|
|
artist.innerHTML = newartist;
|
|
artist.style = "padding:5px;";
|
|
document.getElementById("artists_td").insertBefore(artist,element);
|
|
|
|
element.placeholder = "Backspace to remove last"
|
|
}
|
|
}
|
|
function removeArtist() {
|
|
artists = document.getElementById("artists_td").getElementsByTagName("span")
|
|
lastartist = artists[artists.length-1]
|
|
document.getElementById("artists_td").removeChild(lastartist);
|
|
if (artists.length < 1) {
|
|
document.getElementById("artists").placeholder = "Separate with Enter"
|
|
}
|
|
}
|
|
|
|
|
|
function scrobbleIfEnter(event) {
|
|
if (event.key === "Enter") {
|
|
scrobbleNew()
|
|
}
|
|
}
|
|
|
|
function scrobbleNew() {
|
|
artistnodes = document.getElementById("artists_td").getElementsByTagName("span");
|
|
artists = [];
|
|
for (let node of artistnodes) {
|
|
artists.push(node.innerHTML);
|
|
}
|
|
title = document.getElementById("title").value;
|
|
scrobble(artists,title);
|
|
}
|
|
|
|
function scrobble(artists,title) {
|
|
|
|
|
|
artist = artists.join(";");
|
|
key = APIkey();
|
|
|
|
if (title != "" && artists.length > 0) {
|
|
xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = scrobbledone
|
|
xhttp.open("GET","/api/newscrobble?artist=" + encodeURIComponent(artist) +
|
|
"&title=" + encodeURIComponent(title) +
|
|
"&key=" + encodeURIComponent(key), true);
|
|
xhttp.send();
|
|
}
|
|
|
|
document.getElementById("title").value = "";
|
|
document.getElementById("artists").value = "";
|
|
parent = document.getElementById("artists_td");
|
|
artists = document.getElementById("artists_td").getElementsByTagName("span")
|
|
while (artists.length > 0) {
|
|
removeArtist();
|
|
}
|
|
}
|
|
|
|
function scrobbledone() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
result = JSON.parse(this.responseText);
|
|
txt = result["track"]["title"] + " by " + result["track"]["artists"][0];
|
|
if (result["track"]["artists"].length > 1) {
|
|
txt += " et al.";
|
|
}
|
|
document.getElementById("scrobbleresult").innerHTML = "Scrobbled " + txt + "!";
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
///
|
|
// SEARCH
|
|
///
|
|
|
|
function search_manualscrobbling(searchfield) {
|
|
txt = searchfield.value;
|
|
if (txt == "") {
|
|
|
|
}
|
|
else {
|
|
xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = searchresult_manualscrobbling;
|
|
xhttp.open("GET","/api/search?max=5&query=" + encodeURIComponent(txt), true);
|
|
xhttp.send();
|
|
}
|
|
}
|
|
function searchresult_manualscrobbling() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
document.getElementById("searchresults").innerHTML = "";
|
|
result = JSON.parse(this.responseText);
|
|
tracks = result["tracks"].slice(0,10);
|
|
console.log(tracks);
|
|
for (let t of tracks) {
|
|
track = document.createElement("span");
|
|
trackstr = t["artists"].join(", ") + " - " + t["title"];
|
|
tracklink = t["link"];
|
|
track.innerHTML = "<a href='" + tracklink + "'>" + trackstr + "</a>";
|
|
row = document.createElement("tr")
|
|
col1 = document.createElement("td")
|
|
col1.className = "scrobblebutton"
|
|
col1.innerHTML = "Scrobble!"
|
|
col1.onclick = function(){ scrobble(t["artists"],t["title"])};
|
|
col2 = document.createElement("td")
|
|
row.appendChild(col1)
|
|
row.appendChild(col2)
|
|
col2.appendChild(track)
|
|
document.getElementById("searchresults").appendChild(row);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.scrobblebutton {
|
|
padding:3px;
|
|
padding-right:6px;
|
|
padding-left:6px;
|
|
background-color:beige;
|
|
color:black;
|
|
cursor:pointer;
|
|
}
|
|
.scrobblebutton:hover {
|
|
background-color:gold;
|
|
}
|
|
.scrobblebutton:active {
|
|
background-color:orange;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<table class="top_info">
|
|
<tr>
|
|
<td class="image">
|
|
<div style="background-image:url('/favicon.png')"></div>
|
|
</td>
|
|
<td class="text">
|
|
<h1>Manual Scrobbling</h1><br/>
|
|
<br/><br/>
|
|
API Key: <input id='apikey' onchange='checkAPIkey()' style='width:300px;'/><br/><br/>
|
|
<span id="scrobbleresult"></span>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h1>Scrobble new discovery</h1>
|
|
|
|
<table>
|
|
<tr>
|
|
<td style="padding-right:7px;">
|
|
Artists:
|
|
</td><td id="artists_td">
|
|
<input placeholder='Separate with Enter' class='simpleinput' id='artists' onKeydown='keyDetect(event)' />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-right:7px;">
|
|
Title:
|
|
</td><td>
|
|
<input placeholder='Enter to scrobble' class='simpleinput' id='title' onKeydown='scrobbleIfEnter(event)' />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br/>
|
|
|
|
<span class="scrobblebutton" onclick="scrobbleNew(event)">Scrobble!</span>
|
|
|
|
<br/>
|
|
|
|
|
|
|
|
<h1>Search</h1>
|
|
|
|
<input class="simpleinput" placeholder='Search for a track' oninput='search_manualscrobbling(this)' />
|
|
<br/><br/>
|
|
<table id="searchresults"></table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|