Nice looking cards

happy_ripper.py

@@ -4,7 +4,7 @@ from flask import Flask, render_template, request, jsonify
 from threading import RLock, Thread
 import time
 from yt_dlp import YoutubeDL
-from yt_dlp.utils import DownloadError
+from yt_dlp.utils import DownloadError, ExtractorError
 from collections.abc import Callable
 import pathlib
 import os
@@ -15,6 +15,7 @@ import shutil
 class ReleaseInfo:
     artist: str
     title: str
+    art_url: str
     status: str
 
 
@@ -75,7 +76,12 @@ def rip_worker(
         create_or_wipe_folder(tmp_path)
 
         current_url = rip_queue.pop(0)
-        release_info = ReleaseInfo("", current_url, "Starting")
+        release_info = ReleaseInfo(
+            "",
+            current_url,
+            "https://imgs.search.brave.com/LeS4HHKZ1oz1T15VY5MwiUjWDjLiYKj0vgRABB3D2BY/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly90My5m/dGNkbi5uZXQvanBn/LzA2Lzg2LzE5LzM0/LzM2MF9GXzY4NjE5/MzQwN19ESFp3amV5/ZEJPUjF0RURrTEF6/d00zdzVrWXN0Unp6/Qi5qcGc",
+            "Starting",
+        )
         status_callback(release_info)
 
         is_album = False
@@ -86,8 +92,19 @@ def rip_worker(
         release_info.status = "Gathering Info"
         status_callback(release_info)
 
+        try:
             info = get_content_json(current_url)
 
+        except DownloadError:
+            release_info.status = "Info Download Failed"
+            finish_callback(release_info)
+            continue
+
+        except ExtractorError:
+            release_info.status = "Info Extraction Failed"
+            finish_callback(release_info)
+            continue
+
         entries = info.get("entries")
         if entries is None:
             release_info.status = "Entries is none"
@@ -124,6 +141,15 @@ def rip_worker(
 
         release_info.title = title
 
+        thumbnails = info.get("thumbnails")
+        if thumbnails is None:
+            release_info.status = "Thumbnails is none"
+            finish_callback(release_info)
+            continue
+
+        art_url = thumbnails[1]["url"]
+        release_info.art_url = art_url
+
         if not is_album:
             release_info.status = "Failed, not an album"
             finish_callback(release_info)
@@ -150,6 +176,11 @@ def rip_worker(
             finish_callback(release_info)
             continue
 
+        except ExtractorError:
+            release_info.status = "Content Extraction Failed"
+            finish_callback(release_info)
+            continue
+
         release_info.status = "Writting Metadata"
         status_callback(release_info)
 
@@ -163,7 +194,7 @@ if __name__ == "__main__":
     rip_queue = []
     finished_queue = []
 
-    current_release_info = ReleaseInfo("", "", "Waiting")
+    current_release_info = ReleaseInfo("", "", "", "Waiting")
 
     def get_current_release_info(release_info: ReleaseInfo):
         global current_release_info
@@ -172,7 +203,7 @@ if __name__ == "__main__":
     def get_current_release_info_on_finish(release_info: ReleaseInfo):
         global current_release_info
         global finished_queue
-        current_release_info = ReleaseInfo("", "", "Waiting")
+        current_release_info = ReleaseInfo("", "", "", "Waiting")
         finished_queue.append(release_info)
         if len(finished_queue) > 30:
             finished_queue.pop(0)
@@ -197,11 +228,15 @@ if __name__ == "__main__":
             {
                 "success": True,
                 "queue": rip_queue,
-                "finishedQueue": [{"artist": q.artist, "title": q.title, "status": q.status} for q in finished_queue],
+                "finishedQueue": [
+                    {"artist": q.artist, "title": q.title, "status": q.status, "art_url": q.art_url}
+                    for q in finished_queue
+                ],
                 "currentReleaseInfo": {
                     "artist": current_release_info.artist,
                     "title": current_release_info.title,
                     "status": current_release_info.status,
+                    "art_url": current_release_info.art_url,
                 },
             }
         )

templates/index.html

@@ -34,7 +34,7 @@
 
     <div class="container">
       <h2>Current</h2>
-      <p id="status-message">Waiting</p>
+      <div id="status-message"></div>
     </div>
 
     </br>
@@ -56,19 +56,29 @@
 
     <div class="container">
       <h2>Finished</h2>
-      <table class="table" id="finish-table">
+      <div id=finish-table-body></div>
-        <thead>
-          <tr>
-            <th scope="col">Artist</th>
-            <th scope="col">Title</th>
-            <th scope="col">Status</th>
-          </tr>
-        </thead>
-        <tbody id="finish-table-body"></tbody>
-      </table>
     </div>
 
     <script>
+      function createCard(artist, title, status, art) {
+        return `
+          <div class="card mb-3" style="max-width: 540px;">
+            <div class="row g-0">
+              <div class="col-md-4">
+                <img src="${art}" class="img-fluid rounded-start">
+              </div>
+              <div class="col-md-8">
+                <div class="card-body">
+                  <h5 class="card-title">${title}</h5>
+                  <p class="card-text">${artist}</p>
+                  <p class="card-text"><small class="text-body-secondary">${status}</small></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+
       const ripFormInput = document.getElementById("urlInput");
 
       document
@@ -90,14 +100,14 @@
       const queueTableBody = document.getElementById("queue-table-body");
       const finishTableBody = document.getElementById("finish-table-body");
       const statusMessage = document.getElementById("status-message");
+      const statusMessageImage = document.getElementById("status-message-img");
 
       async function status() {
-
         const response = await fetch("/status", { method: "GET" });
         const statusJson = await response.json();
 
         const currentInfo = statusJson.currentReleaseInfo;
-        statusMessage.innerText = `${currentInfo.title} by ${currentInfo.artist} | ${currentInfo.status}`;
+        statusMessage.innerHTML = createCard(currentInfo.artist, currentInfo.title, currentInfo.status, currentInfo.art_url);
 
         queueTableBody.innerHTML = "";
 
@@ -109,7 +119,7 @@
 
         finishTableBody.innerHTML = "";
         for (const q of statusJson.finishedQueue) {
-          finishTableBody.innerHTML += `<tr><td>${q.artist}</td><td>${q.title}</td><td>${q.status}</td></tr>`;
+          finishTableBody.innerHTML += createCard(q.artist, q.title, q.status, q.art_url);
         }
       }