mirror of
https://github.com/krateng/maloja.git
synced 2023-08-10 21:12:55 +03:00
Added page to manually scrobble
This commit is contained in:
Krateng
parent
9b8e7c65f1
commit
8b0904e589
@ -290,6 +290,18 @@ input#apikey {
|
||||
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 {
|
||||
cursor:pointer;
|
||||
|
||||
@ -42,3 +42,7 @@ function checkAPIkey() {
|
||||
apikeycorrect = false
|
||||
}
|
||||
}
|
||||
|
||||
function APIkey() {
|
||||
return document.getElementById("apikey").value;
|
||||
}
|
||||
|
||||
214
website/manual.html
Normal file
214
website/manual.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user