96 lines
2.4 KiB
HTML
96 lines
2.4 KiB
HTML
{% extends 'base.html' %} {% block content %}
|
|
<div class="container">
|
|
<form id="browse-form">
|
|
<div class="mb-3">
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
id="searchInput"
|
|
placeholder="Album, Arist, Playlist..."
|
|
class="form-control"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
</form>
|
|
</div>
|
|
|
|
</br>
|
|
|
|
<div class="container" id="results"></div>
|
|
|
|
<script>
|
|
async function enqueue(url, is_artist) {
|
|
const formData = new FormData();
|
|
formData.append("url", url);
|
|
|
|
if (is_artist) {
|
|
formData.append("is-channel-check", "");
|
|
}
|
|
|
|
const response = await fetch("/rip", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
}
|
|
|
|
const searchInput = document.getElementById("searchInput");
|
|
const results = document.getElementById("results");
|
|
|
|
document
|
|
.getElementById("browse-form")
|
|
.addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
|
|
const response = await fetch("/search", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
console.log(data)
|
|
|
|
results.innerHTML = "";
|
|
for (release of data) {
|
|
var button = "url" in release ? `
|
|
<div class="col">
|
|
<button class="btn btn-primary" onclick="enqueue('${release.url}', ${release.category == 'artist'})">
|
|
Enqueue
|
|
</button>
|
|
</div>` : "";
|
|
|
|
results.innerHTML += `
|
|
<div class="card" style="max-width: 720px;">
|
|
<div class="row">
|
|
<div class="col">
|
|
<img
|
|
src="${release.thumbnails[0].url}"
|
|
class="card-img-top"
|
|
style="max-width: 120px;"
|
|
>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="card-body">
|
|
<h5 class="card-title">${release.title}</h5>
|
|
<p class="card-text">${release.category} • ${release.artist}</p>
|
|
</div>
|
|
</div>
|
|
|
|
${button}
|
|
|
|
</div>
|
|
</div>
|
|
<br>
|
|
`;
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|