Artist Ripper working

2026-09-18 23:45:26 -06:00
parent 86d8283217
commit b6d155f071
4 changed files with 403 additions and 169 deletions
@@ -0,0 +1,95 @@
+{% 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 %}