Refactor components to TypeScript, enhance media request handling, and improve UI elements
- Updated Radio component to TypeScript and added WebSocket connection checks. - Enhanced DiscordLogs component with thread detection and improved bot presence checks. - Modified Login component to include a client ID for authentication. - Refactored RadioBanner for better styling and accessibility. - Improved BreadcrumbNav with Astro reload attribute for better navigation. - Enhanced MediaRequestForm to prevent rapid clicks during track play/pause. - Updated RequestManagement to handle track lists and finalizing job status more effectively. - Improved CSS for RequestManagement to enhance progress bar and track list display.
This commit is contained in:
@@ -24,6 +24,7 @@ export default function BreadcrumbNav({ currentPage }: BreadcrumbNavProps): Reac
|
||||
<React.Fragment key={key}>
|
||||
<a
|
||||
href={href}
|
||||
data-astro-reload
|
||||
className={`px-3 py-1.5 rounded-full transition-colors ${isActive
|
||||
? "bg-neutral-200 dark:bg-neutral-700 font-semibold text-neutral-900 dark:text-white"
|
||||
: "text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
||||
|
||||
@@ -100,6 +100,7 @@ export default function MediaRequestForm() {
|
||||
const albumHeaderRefs = useRef<Record<string | number, HTMLElement | null>>({});
|
||||
const suppressHashRef = useRef(false);
|
||||
const lastUrlRef = useRef("");
|
||||
const playPauseClickRef = useRef(false);
|
||||
|
||||
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); // Helper for delays
|
||||
const sanitizeFilename = (text: string) => (text || "").replace(/[\\/:*?"<>|]/g, "_") || "track";
|
||||
@@ -558,31 +559,42 @@ export default function MediaRequestForm() {
|
||||
};
|
||||
|
||||
const handleTrackPlayPause = async (track: Track, albumId: string | number | null = null, albumIndex: number | null = null) => {
|
||||
// Prevent double-clicks / rapid clicks
|
||||
if (playPauseClickRef.current) return;
|
||||
playPauseClickRef.current = true;
|
||||
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (!audio) {
|
||||
playPauseClickRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof albumIndex === "number") {
|
||||
ensureAlbumExpanded(albumIndex);
|
||||
}
|
||||
|
||||
if (currentTrackId === track.id) {
|
||||
if (audio.paused) {
|
||||
setIsAudioPlaying(true);
|
||||
try {
|
||||
try {
|
||||
if (currentTrackId === track.id) {
|
||||
if (audio.paused) {
|
||||
setIsAudioPlaying(true);
|
||||
await audio.play();
|
||||
} catch (error) {
|
||||
} else {
|
||||
setIsAudioPlaying(false);
|
||||
console.error(error);
|
||||
toast.error("Unable to resume playback.");
|
||||
audio.pause();
|
||||
}
|
||||
} else {
|
||||
setIsAudioPlaying(false);
|
||||
audio.pause();
|
||||
await playTrack(track, { fromQueue: false });
|
||||
}
|
||||
return;
|
||||
} catch (error) {
|
||||
setIsAudioPlaying(false);
|
||||
console.error(error);
|
||||
toast.error("Unable to play/pause track.");
|
||||
} finally {
|
||||
// Small delay before allowing next click to prevent rapid clicks
|
||||
setTimeout(() => {
|
||||
playPauseClickRef.current = false;
|
||||
}, 150);
|
||||
}
|
||||
|
||||
await playTrack(track, { fromQueue: false });
|
||||
};
|
||||
|
||||
const toggleAlbumShuffle = (albumId) => {
|
||||
@@ -993,11 +1005,14 @@ export default function MediaRequestForm() {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
toast.success(`Request submitted! (${allSelectedIds.length} tracks)`);
|
||||
// Send the user to the requests page to monitor progress
|
||||
if (typeof window !== "undefined") {
|
||||
window.location.href = "/TRip/requests";
|
||||
}
|
||||
const toastId = 'trip-request-submitted';
|
||||
toast.success(`Request submitted! (${allSelectedIds.length} tracks)`, {
|
||||
toastId,
|
||||
autoClose: 3000,
|
||||
onClose: () => {
|
||||
if (typeof window !== 'undefined') window.location.href = '/TRip/requests';
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Failed to submit request.");
|
||||
@@ -1301,22 +1316,13 @@ export default function MediaRequestForm() {
|
||||
e.stopPropagation();
|
||||
handleTrackPlayPause(track, id, albumIndex);
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
try {
|
||||
if (e?.pointerType === "touch" || e.type === "touchstart") {
|
||||
e.preventDefault();
|
||||
}
|
||||
} catch (err) {
|
||||
// ignore
|
||||
}
|
||||
}}
|
||||
style={{ touchAction: "manipulation" }}
|
||||
className={`flex items-center justify-center w-8 h-8 rounded-full border text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed ${isCurrentTrack && isAudioPlaying
|
||||
style={{ touchAction: "manipulation", WebkitTapHighlightColor: "transparent" }}
|
||||
className={`flex items-center justify-center w-8 h-8 rounded-full border text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed select-none ${isCurrentTrack && isAudioPlaying
|
||||
? "border-green-600 text-green-600"
|
||||
: "border-neutral-400 text-neutral-600 hover:text-blue-600 hover:border-blue-600"}`}
|
||||
aria-label={`${isCurrentTrack && isAudioPlaying ? "Pause" : "Play"} ${track.title}`}
|
||||
aria-pressed={isCurrentTrack && isAudioPlaying}
|
||||
disabled={audioLoadingTrackId === track.id}
|
||||
disabled={audioLoadingTrackId === track.id || playPauseClickRef.current}
|
||||
>
|
||||
{audioLoadingTrackId === track.id ? (
|
||||
<InlineSpinner sizeClass="h-4 w-4" />
|
||||
|
||||
@@ -279,6 +279,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 0.5rem; /* space between track and percent */
|
||||
}
|
||||
|
||||
|
||||
@@ -292,6 +293,7 @@
|
||||
overflow: hidden; /* must clip when scaled */
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin-right: 0; /* ensure neighbor percent isn't pushed inside */
|
||||
}
|
||||
|
||||
.rm-progress-track-lg {
|
||||
@@ -308,13 +310,41 @@
|
||||
transform: scaleX(var(--rm-progress, 0)); /* use custom property (0-1 range) */
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
transition: transform 0.24s cubic-bezier(0.4,0,0.2,1), border-radius 0.24s;
|
||||
transition: transform .5s cubic-bezier(.25,.8,.25,1), background-color .28s ease, border-radius .28s;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
right: 0;
|
||||
min-width: 0;
|
||||
will-change: transform;
|
||||
will-change: transform, background-color;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; /* ensure fill sits beneath the percent text */
|
||||
}
|
||||
|
||||
/* Ensure percent label appears above the fill even when inside the track */
|
||||
.rm-progress-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: none; /* don't stretch */
|
||||
margin-left: 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Finalizing pulse for near-100% jobs */
|
||||
.rm-finalizing {
|
||||
animation: rm-finalize-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes rm-finalize-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.10);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix for native audio progress bar (range input) */
|
||||
@@ -404,16 +434,47 @@
|
||||
.rm-progress-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Ensure progress styles apply when rendered within a PrimeReact Dialog (portal) */
|
||||
.p-dialog .rm-progress-container{display:flex;align-items:center;width:100%}
|
||||
.p-dialog .rm-progress-track{position:relative;flex:1 1 0%;min-width:0;height:6px;background-color:#80808033;border-radius:999px;overflow:hidden;margin:0!important;padding:0!important}
|
||||
.p-dialog .rm-progress-track-lg{height:10px}
|
||||
.p-dialog .rm-progress-fill{position:absolute;left:0;top:0;height:100%;width:100%!important;transform-origin:left center;transform:scaleX(var(--rm-progress, 0));border-top-left-radius:999px;border-bottom-left-radius:999px;transition:transform .24s cubic-bezier(.4,0,.2,1),border-radius .24s;margin:0!important;padding:0!important;right:0;min-width:0;will-change:transform;box-sizing:border-box}
|
||||
.p-dialog .rm-progress-text{font-size:.75rem;font-weight:600;min-width:2.5rem;text-align:right}
|
||||
min-width: 2.5rem;
|
||||
text-align: right;
|
||||
.p-dialog .rm-progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.p-dialog .rm-progress-track {
|
||||
position: relative;
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
height: 6px;
|
||||
background-color: #80808033;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.p-dialog .rm-progress-track-lg { height: 10px; }
|
||||
.p-dialog .rm-progress-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
transform-origin: left center;
|
||||
transform: scaleX(var(--rm-progress, 0));
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
transition: transform .5s cubic-bezier(.25,.8,.25,1), background-color .28s ease, border-radius .28s;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
right: 0;
|
||||
min-width: 0;
|
||||
will-change: transform, background-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.p-dialog .rm-progress-text { font-size: .75rem; font-weight: 600; color: #e5e7eb !important; margin-left: 0.5rem; white-space: nowrap; }
|
||||
|
||||
|
||||
/* Container Styles */
|
||||
.trip-management-container {
|
||||
@@ -531,6 +592,25 @@
|
||||
padding: 0.5rem !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
/* Track list scrollbar and status pill adjustments */
|
||||
.rm-track-list {
|
||||
/* Give room for overlay scrollbars so status pills don't overlap */
|
||||
padding-inline-end: 1.25rem; /* ~20px */
|
||||
}
|
||||
|
||||
.rm-track-status {
|
||||
/* Ensure the status pill has extra right padding and sits visually clear of the scrollbar */
|
||||
padding-right: 0.75rem !important;
|
||||
margin-right: 0.25rem !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
|
||||
/* Slightly reduce spacing on very small screens */
|
||||
@media (max-width: 480px) {
|
||||
.rm-track-list { padding-inline-end: 0.75rem; }
|
||||
.rm-track-status { padding-right: 0.5rem !important; }
|
||||
}
|
||||
|
||||
/* Album header info stacks */
|
||||
.album-header-info {
|
||||
|
||||
@@ -11,6 +11,15 @@ import BreadcrumbNav from "./BreadcrumbNav";
|
||||
import { API_URL } from "@/config";
|
||||
import "./RequestManagement.css";
|
||||
|
||||
interface TrackInfo {
|
||||
title?: string;
|
||||
artist?: string;
|
||||
status?: string;
|
||||
error?: string;
|
||||
filename?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface RequestJob {
|
||||
id: string | number;
|
||||
target: string;
|
||||
@@ -22,6 +31,7 @@ interface RequestJob {
|
||||
tarball?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
track_list?: TrackInfo[];
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
@@ -38,6 +48,8 @@ export default function RequestManagement() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const pollingDetailRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
// Track finalizing job polls to actively refresh job status when progress hits 100% but status hasn't updated yet
|
||||
const finalizingPollsRef = useRef<Record<string | number, ReturnType<typeof setInterval> | null>>({});
|
||||
|
||||
|
||||
const resolveTarballPath = (job: RequestJob) => job.tarball;
|
||||
@@ -47,6 +59,13 @@ export default function RequestManagement() {
|
||||
const filename = absPath.split("/").pop(); // get "SOMETHING.tar.gz"
|
||||
// If the backend already stores a fully qualified URL, return as-is
|
||||
if (/^https?:\/\//i.test(absPath)) return absPath;
|
||||
|
||||
// Check if path is /storage/music/TRIP
|
||||
if (absPath.includes("/storage/music/TRIP/")) {
|
||||
return `https://music.boatson.boats/TRIP/${filename}`;
|
||||
}
|
||||
|
||||
// Otherwise, assume /storage/music2/completed/{quality} format
|
||||
return `${TAR_BASE_URL}/${quality}/${filename}`;
|
||||
};
|
||||
|
||||
@@ -182,30 +201,105 @@ export default function RequestManagement() {
|
||||
|
||||
const computePct = (p: unknown) => {
|
||||
if (p === null || p === undefined || p === "") return 0;
|
||||
// Handle "X / Y" format (e.g., "9 / 545") - note spaces around slash from backend
|
||||
if (typeof p === 'string' && p.includes('/')) {
|
||||
const parts = p.split('/').map(s => s.trim());
|
||||
const current = parseFloat(parts[0]);
|
||||
const total = parseFloat(parts[1]);
|
||||
if (Number.isFinite(current) && Number.isFinite(total) && total > 0) {
|
||||
return Math.min(100, Math.max(0, Math.round((current / total) * 100)));
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
const num = Number(p);
|
||||
if (!Number.isFinite(num)) return 0;
|
||||
const normalized = num > 1 ? num : num * 100;
|
||||
return Math.min(100, Math.max(0, Math.round(normalized)));
|
||||
// Backend sends progress as 0-100 directly, so just clamp it
|
||||
return Math.min(100, Math.max(0, Math.round(num)));
|
||||
};
|
||||
|
||||
// Visual pct used for display/fill. Prevent briefly showing 100% unless status is Finished
|
||||
const displayPct = (p: unknown, status?: string) => {
|
||||
const pct = computePct(p);
|
||||
const statusNorm = String(status || "").trim();
|
||||
// If the backend reports 100% but the job hasn't reached 'Finished', show 99 to avoid flash
|
||||
if (pct >= 100 && statusNorm.toLowerCase() !== 'finished') return 99;
|
||||
return pct;
|
||||
};
|
||||
const isFinalizingJob = (job: RequestJob | { progress?: unknown; status?: string }) => {
|
||||
const pct = computePct(job.progress);
|
||||
const statusNorm = String(job.status || "").trim().toLowerCase();
|
||||
// Only treat as finalizing when status is explicitly "Compressing"
|
||||
// This is set by the backend only when progress == 100 and tarball isn't ready yet
|
||||
return statusNorm === 'compressing';
|
||||
};
|
||||
|
||||
const startFinalizingPoll = (jobId: string | number) => {
|
||||
if (finalizingPollsRef.current[jobId]) return; // already polling
|
||||
|
||||
let attempts = 0;
|
||||
const iv = setInterval(async () => {
|
||||
attempts += 1;
|
||||
try {
|
||||
const updated = await fetchJobDetail(jobId);
|
||||
if (updated) {
|
||||
// Merge the updated job into requests list so UI refreshes
|
||||
setRequests((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
|
||||
// If it's no longer finalizing, stop this poll
|
||||
if (!isFinalizingJob(updated)) {
|
||||
if (finalizingPollsRef.current[jobId]) {
|
||||
clearInterval(finalizingPollsRef.current[jobId] as ReturnType<typeof setInterval>);
|
||||
finalizingPollsRef.current[jobId] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// ignore individual errors; we'll retry a few times
|
||||
}
|
||||
// safety cap: stop after ~20 attempts (~30s)
|
||||
if (attempts >= 20) {
|
||||
if (finalizingPollsRef.current[jobId]) {
|
||||
clearInterval(finalizingPollsRef.current[jobId] as ReturnType<typeof setInterval>);
|
||||
finalizingPollsRef.current[jobId] = null;
|
||||
}
|
||||
}
|
||||
}, 1500);
|
||||
|
||||
finalizingPollsRef.current[jobId] = iv;
|
||||
};
|
||||
|
||||
// stop all finalizing polls on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
Object.values(finalizingPollsRef.current).forEach((iv) => {
|
||||
if (iv) clearInterval(iv);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
const progressBarTemplate = (rowData: RequestJob) => {
|
||||
const p = rowData.progress;
|
||||
if (p === null || p === undefined || p === "") return "—";
|
||||
const pct = computePct(p);
|
||||
const pctRaw = computePct(p);
|
||||
const isFinalizing = isFinalizingJob(rowData);
|
||||
const pct = isFinalizing ? 99 : pctRaw;
|
||||
|
||||
const getProgressColor = () => {
|
||||
if (rowData.status === "Failed") return "bg-red-500";
|
||||
if (rowData.status === "Finished") return "bg-green-500";
|
||||
if (pct < 30) return "bg-blue-400";
|
||||
if (pct < 70) return "bg-blue-500";
|
||||
if (isFinalizing) return "bg-yellow-500"; // finalizing indicator
|
||||
if (pctRaw < 30) return "bg-blue-400";
|
||||
if (pctRaw < 70) return "bg-blue-500";
|
||||
return "bg-blue-600";
|
||||
};
|
||||
|
||||
// If this job appears to be finalizing, ensure a poll is active to get the real status
|
||||
if (isFinalizing) startFinalizingPoll(rowData.id);
|
||||
|
||||
return (
|
||||
<div className="rm-progress-container">
|
||||
<div className="rm-progress-track" style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
className={`rm-progress-fill ${getProgressColor()}`}
|
||||
className={`rm-progress-fill ${getProgressColor()} ${isFinalizing ? 'rm-finalizing' : ''}`}
|
||||
style={{
|
||||
// CSS custom property for progress animation
|
||||
['--rm-progress' as string]: (pct / 100).toString(),
|
||||
@@ -213,12 +307,12 @@ export default function RequestManagement() {
|
||||
borderBottomRightRadius: pct === 100 ? '999px' : 0
|
||||
}}
|
||||
data-pct={pct}
|
||||
aria-valuenow={pct}
|
||||
aria-valuenow={pctRaw}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
/>
|
||||
</div>
|
||||
<span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%</span>
|
||||
<span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%{isFinalizing ? ' (finalizing...)' : ''}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -411,26 +505,34 @@ export default function RequestManagement() {
|
||||
<div className="rm-progress-container mt-2">
|
||||
<div className="rm-progress-track rm-progress-track-lg">
|
||||
{(() => {
|
||||
const pctDialog = computePct(selectedRequest.progress);
|
||||
const pctRawDialog = computePct(selectedRequest.progress);
|
||||
const isFinalizingDialog = isFinalizingJob(selectedRequest);
|
||||
const pctDialog = isFinalizingDialog ? 99 : pctRawDialog;
|
||||
const status = selectedRequest.status;
|
||||
const fillColor = status === "Failed" ? "bg-red-500" : status === "Finished" ? "bg-green-500" : "bg-blue-500";
|
||||
const fillColor = status === "Failed" ? "bg-red-500" : status === "Finished" ? "bg-green-500" : isFinalizingDialog ? "bg-yellow-500" : "bg-blue-500";
|
||||
|
||||
// Ensure we poll for finalizing jobs to get the real status update
|
||||
if (isFinalizingDialog) startFinalizingPoll(selectedRequest.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rm-progress-fill ${fillColor}`}
|
||||
style={{
|
||||
['--rm-progress' as string]: (pctDialog / 100).toString(),
|
||||
borderTopRightRadius: pctDialog >= 100 ? '999px' : 0,
|
||||
borderBottomRightRadius: pctDialog >= 100 ? '999px' : 0
|
||||
}}
|
||||
data-pct={pctDialog}
|
||||
aria-valuenow={pctDialog}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
/>
|
||||
<>
|
||||
<div
|
||||
className={`rm-progress-fill ${fillColor} ${isFinalizingDialog ? 'rm-finalizing' : ''}`}
|
||||
style={{
|
||||
['--rm-progress' as string]: (pctDialog / 100).toString(),
|
||||
borderTopRightRadius: pctDialog >= 100 ? '999px' : 0,
|
||||
borderBottomRightRadius: pctDialog >= 100 ? '999px' : 0
|
||||
}}
|
||||
data-pct={pctDialog}
|
||||
aria-valuenow={pctRawDialog}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<span className="rm-progress-text">{formatProgress(selectedRequest.progress)}</span>
|
||||
<span className="rm-progress-text">{formatProgress(selectedRequest.progress)}{isFinalizingJob(selectedRequest) ? ' — finalizing' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -462,6 +564,66 @@ export default function RequestManagement() {
|
||||
)
|
||||
}
|
||||
|
||||
{/* --- Track List Card --- */}
|
||||
{selectedRequest.track_list && selectedRequest.track_list.length > 0 && (
|
||||
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md">
|
||||
<p className="mb-2"><strong>Tracks ({selectedRequest.track_list.length}):</strong></p>
|
||||
<div className="max-h-60 overflow-y-auto space-y-2" data-lenis-prevent>
|
||||
{selectedRequest.track_list.map((track, idx) => {
|
||||
const rawStatus = String(track.status || "pending");
|
||||
const statusNorm = rawStatus.trim().toLowerCase();
|
||||
|
||||
const isError = statusNorm === "failed" || statusNorm === "error" || !!track.error;
|
||||
const isSuccess = ["done", "success", "completed", "finished"].includes(statusNorm);
|
||||
const isPending = ["pending", "queued"].includes(statusNorm);
|
||||
const isDownloading = ["downloading", "in_progress", "started"].includes(statusNorm);
|
||||
|
||||
const statusBadgeClass = isError
|
||||
? "bg-red-600 text-white"
|
||||
: isSuccess
|
||||
? "bg-green-600 text-white"
|
||||
: isDownloading
|
||||
? "bg-blue-600 text-white"
|
||||
: isPending
|
||||
? "bg-yellow-600 text-white"
|
||||
: "bg-gray-500 text-white";
|
||||
|
||||
const trackTitle = track.title || track.filename || `Track ${idx + 1}`;
|
||||
const trackArtist = track.artist;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`p-2 rounded border ${isError ? "border-red-500/50 bg-red-500/10" : "border-neutral-300 dark:border-neutral-600"}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate" title={trackTitle}>
|
||||
{trackTitle}
|
||||
</p>
|
||||
{trackArtist && (
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 truncate" title={trackArtist}>
|
||||
{trackArtist}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={`px-2 py-0.5 pr-3 mr-2 rounded text-xs font-semibold whitespace-nowrap ${statusBadgeClass} rm-track-status`} title={rawStatus}>
|
||||
{rawStatus}
|
||||
</span>
|
||||
</div>
|
||||
{track.error && (
|
||||
<p className="mt-1 text-xs text-red-400 break-words">
|
||||
<i className="pi pi-exclamation-triangle mr-1" />
|
||||
{track.error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div >
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
|
||||
Reference in New Issue
Block a user