mirror/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2023-08-10 21:12:55 +03:00
Code Issues Projects Releases Wiki Activity

Added page to manually scrobble

Browse Source
This commit is contained in:
Krateng 2019-05-14 12:50:31 +02:00
parent 9b8e7c65f1
commit 8b0904e589
3 changed files with 230 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
website/css/maloja.css
View File

@ -290,6 +290,18 @@ input#apikey {
padding:2px; padding:2px;
} }
input.simpleinput {
font-family:'Ubuntu';
color:beige;
outline:none;
border-top: 0px solid;
border-left: 0px solid;
border-right: 0px solid;
padding:2px;
background-color:inherit;
border-bottom: 1px solid beige;
}
a { a {
cursor:pointer; cursor:pointer;

4
website/javascript/cookies.js
View File

@ -42,3 +42,7 @@ function checkAPIkey() {
apikeycorrect = false apikeycorrect = false
} }
} }
function APIkey() {
return document.getElementById("apikey").value;
}

214
website/manual.html Normal file
View File

@ -0,0 +1,214 @@
<!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 onload="insertAPIKeyFromCookie()">
<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>