Nice looking cards

This commit is contained in:
2026-09-06 17:18:32 -06:00
parent 0f6a62335f
commit 13e5d34446
2 changed files with 65 additions and 20 deletions
+41 -6
View File
@@ -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,7 +92,18 @@ def rip_worker(
release_info.status = "Gathering Info"
status_callback(release_info)
info = get_content_json(current_url)
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:
@@ -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,
},
}
)
+24 -14
View File
@@ -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">
<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 id=finish-table-body></div>
</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);
}
}