codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

misc

Browse Source
This commit is contained in:
codey
2025-12-17 13:33:31 -05:00
parent e18aa3f42c
commit c49bfe5a3d
38 changed files with 2436 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/TRip/BreadcrumbNav.jsx
View File

@@ -14,16 +14,17 @@ export default function BreadcrumbNav({ currentPage }) {
<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"
? "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"
}`}
aria-current={isActive ? "page" : undefined}
>
{label}
</a>
{i < pages.length - 1 && (
<span className="text-neutral-400 dark:text-neutral-600" aria-hidden="true">/</span>
<span className="text-neutral-400 dark:text-neutral-600 py-1.5 flex items-center" aria-hidden="true">/</span>
)}
</React.Fragment>
);

25
src/components/TRip/MediaRequestForm.jsx
View File

@@ -240,8 +240,10 @@ export default function MediaRequestForm() {
audio.src = sourceUrl;
setAudioProgress({ current: 0, duration: 0 });
setCurrentTrackId(track.id);
setIsAudioPlaying(true);
await audio.play();
} catch (error) {
setIsAudioPlaying(false);
console.error(error);
toast.error("Failed to play track.");
if (!fromQueue) {
@@ -492,13 +494,16 @@ export default function MediaRequestForm() {
if (currentTrackId === track.id) {
if (audio.paused) {
setIsAudioPlaying(true);
try {
await audio.play();
} catch (error) {
setIsAudioPlaying(false);
console.error(error);
toast.error("Unable to resume playback.");
}
} else {
setIsAudioPlaying(false);
audio.pause();
}
return;
@@ -547,13 +552,16 @@ export default function MediaRequestForm() {
if (queueAlbumId === albumId && playbackQueue.length > 0) {
if (audio.paused) {
setIsAudioPlaying(true);
try {
await audio.play();
} catch (error) {
setIsAudioPlaying(false);
console.error(error);
toast.error("Unable to resume album playback.");
}
} else {
setIsAudioPlaying(false);
audio.pause();
}
return;
@@ -1182,7 +1190,21 @@ export default function MediaRequestForm() {
/>
<button
type="button"
onClick={() => handleTrackPlayPause(track, id, albumIndex)}
onClick={(e) => {
e.preventDefault();
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
? "border-green-600 text-green-600"
: "border-neutral-400 text-neutral-600 hover:text-blue-600 hover:border-blue-600"}`}
@@ -1213,6 +1235,7 @@ export default function MediaRequestForm() {
<button
type="button"
onClick={() => handleTrackDownload(track)}
referrerPolicy="no-referrer"
className="text-neutral-500 hover:text-blue-600 underline whitespace-nowrap cursor-pointer"
aria-label={`Download ${track.title}`}
>

305
src/components/TRip/RequestManagement.css
View File

@@ -1,6 +1,27 @@
/* Table and Dark Overrides */
.trip-management-container {
width: 100%;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
/* Improve DataTable font across headers, cells, paginator, and body */
.trip-management-container .p-datatable,
.trip-management-container .p-datatable th,
.trip-management-container .p-datatable td,
.trip-management-container .p-paginator,
.trip-management-container .p-datatable .p-datatable-header,
.trip-management-container .p-datatable .p-datatable-footer{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
line-height: 1.25rem !important;
}
/* Keep monospace for any code or ident columns */
.trip-management-container .p-datatable td.code,
.trip-management-container .p-datatable td.mono {
font-family: ui-monospace, "JetBrains Mono", "Fira Code", "Roboto Mono", "Consolas", "Monaco", "Courier New", monospace !important;
font-weight: 400 !important;
}
.trip-management-container .table-wrapper {
@@ -37,7 +58,9 @@
/* Column widths - distribute across table */
.trip-management-container .p-datatable-thead > tr > th,
.trip-management-container .p-datatable-tbody > tr > td {
/* Default: auto distribute */
/* Default column distribution: uniform padding and vertical alignment */
padding: 0.65rem 0.5rem;
vertical-align: middle;
}
/* ID column - narrow */
@@ -252,34 +275,142 @@
}
/* Progress Bar Styles */
.progress-bar-container {
.rm-progress-container {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.progress-bar-track {
flex: 1;
.rm-progress-track {
position: relative;
flex: 1 1 0%;
min-width: 0;
height: 6px;
background-color: rgba(128, 128, 128, 0.2);
border-radius: 999px;
overflow: hidden;
border-radius: 999px; /* rounded track so fill edge is hidden when smaller */
overflow: hidden; /* must clip when scaled */
margin: 0 !important;
padding: 0 !important;
}
.progress-bar-track-lg {
.rm-progress-track-lg {
height: 10px;
}
.progress-bar-fill {
.rm-progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 999px;
transition: width 0.3s ease;
width: 100% !important; /* full width; we scale via transform to avoid subpixel gaps */
transform-origin: left center;
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;
margin: 0 !important;
padding: 0 !important;
right: 0;
min-width: 0;
will-change: transform;
box-sizing: border-box;
}
.progress-bar-text {
/* Fix for native audio progress bar (range input) */
.audio-progress-range {
width: 100%;
height: 6px;
background: transparent;
appearance: none;
-webkit-appearance: none;
border-radius: 999px;
overflow: hidden;
margin: 0;
padding: 0;
}
.audio-progress-range::-webkit-slider-runnable-track {
height: 6px;
background: rgba(128, 128, 128, 0.2);
border-radius: 999px;
}
.audio-progress-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
margin-top: -3px;
cursor: pointer;
border: none;
}
.audio-progress-range::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #2563eb;
border: none;
cursor: pointer;
}
.audio-progress-range::-ms-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #2563eb;
border: none;
cursor: pointer;
}
.audio-progress-range::-ms-fill-lower {
background: #2563eb;
border-radius: 999px;
}
.audio-progress-range::-ms-fill-upper {
background: rgba(128, 128, 128, 0.2);
border-radius: 999px;
}
.audio-progress-range::-webkit-slider-thumb {
box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.audio-progress-range:focus {
outline: none;
}
.audio-progress-range::-webkit-slider-runnable-track {
background: linear-gradient(to right, #2563eb 0%, #2563eb var(--progress, 0%), rgba(128,128,128,0.2) var(--progress, 0%), rgba(128,128,128,0.2) 100%);
}
.audio-progress-range::-moz-range-progress {
background-color: #2563eb;
border-radius: 999px;
}
.audio-progress-range::-moz-range-track {
background-color: rgba(128, 128, 128, 0.2);
border-radius: 999px;
}
.audio-progress-range::-ms-fill-lower {
background-color: #2563eb;
border-radius: 999px;
}
.audio-progress-range::-ms-fill-upper {
background-color: rgba(128, 128, 128, 0.2);
border-radius: 999px;
}
.audio-progress-range:focus::-webkit-slider-runnable-track {
background: linear-gradient(to right, #2563eb 0%, #2563eb var(--progress, 0%), rgba(128,128,128,0.2) var(--progress, 0%), rgba(128,128,128,0.2) 100%);
}
.audio-progress-range::-ms-tooltip {
display: none;
}
.rm-progress-text {
font-size: 0.75rem;
font-weight: 600;
/* 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;
}
@@ -339,17 +470,17 @@
border-radius: 0.5rem;
}
.progress-bar-container {
.trip-management-container .rm-progress-container {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.progress-bar-track {
.trip-management-container .rm-progress-track {
width: 100%;
}
.progress-bar-text {
.trip-management-container .rm-progress-text {
text-align: left;
}
}
@@ -440,3 +571,147 @@
width: 100%;
}
}
/* ========================================
Mobile Card Layout for Request Table
======================================== */
@media (max-width: 768px) {
/* Hide table header on mobile */
.trip-management-container .p-datatable-thead {
display: none !important;
}
/* Convert table to block layout */
.trip-management-container .p-datatable-table {
display: block !important;
table-layout: auto !important;
}
.trip-management-container .p-datatable-tbody {
display: block !important;
}
/* Each row becomes a card */
.trip-management-container .p-datatable-tbody > tr {
display: flex !important;
flex-wrap: wrap !important;
padding: 1rem !important;
margin-bottom: 0.75rem !important;
border-radius: 0.5rem !important;
border: 1px solid rgba(128, 128, 128, 0.3) !important;
gap: 0.5rem 1rem;
align-items: flex-start;
}
/* Reset column widths */
.trip-management-container .p-datatable-tbody > tr > td {
width: auto !important;
padding: 0.25rem 0 !important;
border: none !important;
display: flex;
align-items: flex-start;
gap: 0.35rem;
flex: 1 1 48%;
min-width: 48%;
}
/* Add labels before each cell */
.trip-management-container .p-datatable-tbody > tr > td::before {
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.025em;
color: #9ca3af;
min-width: 60px;
line-height: 1.1;
display: inline-block;
}
/* Target takes full width */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(2) {
width: 100% !important;
order: -1;
font-weight: 600;
font-size: 1rem;
padding-bottom: 0.5rem !important;
border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
margin-bottom: 0.25rem;
flex: 1 1 100%;
}
.trip-management-container .p-datatable-tbody > tr > td:nth-child(2)::before {
display: none;
}
/* ID - small, muted */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(1) {
font-size: 0.75rem;
color: #6b7280;
}
.trip-management-container .p-datatable-tbody > tr > td:nth-child(1)::before {
content: "ID";
}
/* Tracks */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(3)::before {
content: "Tracks";
}
/* Status */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(4)::before {
content: "Status";
}
/* Progress - full width */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(5) {
width: 100% !important;
order: 10;
flex: 1 1 100%;
}
.trip-management-container .p-datatable-tbody > tr > td:nth-child(5)::before {
content: "Progress";
}
/* Quality */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(6)::before {
content: "Quality";
}
/* Tarball - full width */
.trip-management-container .p-datatable-tbody > tr > td:nth-child(7) {
width: 100% !important;
order: 11;
flex: 1 1 100%;
}
.trip-management-container .p-datatable-tbody > tr > td:nth-child(7)::before {
content: "Download";
}
/* Progress bar adjustments for mobile */
.trip-management-container .rm-progress-container {
flex: 1;
}
/* Skeleton adjustments for mobile */
.table-skeleton .skeleton-row {
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
margin-bottom: 0.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(128, 128, 128, 0.2);
}
.table-skeleton .skeleton-cell {
width: 100% !important;
}
.table-skeleton .skeleton-bar {
width: 60%;
}
.table-skeleton .skeleton-cell:first-child .skeleton-bar {
width: 100%;
height: 1.25rem;
}
}

49
src/components/TRip/RequestManagement.jsx
View File

@@ -163,12 +163,19 @@ export default function RequestManagement() {
return `${pct}%`;
};
const computePct = (p) => {
if (p === null || p === undefined || p === "") return 0;
const num = Number(p);
if (Number.isNaN(num)) return 0;
return Math.min(100, Math.max(0, num > 1 ? Math.round(num) : Math.round(num * 100)));
};
const progressBarTemplate = (rowData) => {
const p = rowData.progress;
if (p === null || p === undefined || p === "") return "—";
const num = Number(p);
if (Number.isNaN(num)) return "—";
const pct = Math.min(100, Math.max(0, num > 1 ? Math.round(num) : num * 100));
const pct = computePct(p);
const getProgressColor = () => {
if (rowData.status === "Failed") return "bg-red-500";
@@ -179,14 +186,22 @@ export default function RequestManagement() {
};
return (
<div className="progress-bar-container">
<div className="progress-bar-track">
<div className="rm-progress-container">
<div className="rm-progress-track" style={{ flex: 1, minWidth: 0 }}>
<div
className={`progress-bar-fill ${getProgressColor()}`}
style={{ width: `${pct}%` }}
className={`rm-progress-fill ${getProgressColor()}`}
style={{
'--rm-progress': (pct / 100).toString(),
borderTopRightRadius: pct === 100 ? '999px' : 0,
borderBottomRightRadius: pct === 100 ? '999px' : 0
}}
data-pct={pct}
aria-valuenow={pct}
aria-valuemin={0}
aria-valuemax={100}
/>
</div>
<span className="progress-bar-text">{pct}%</span>
<span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%</span>
</div>
);
};
@@ -348,7 +363,7 @@ export default function RequestManagement() {
<div className="space-y-4 text-sm">
{/* --- Metadata Card --- */}
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-2 gap-4">
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 sm:grid-cols-2 gap-4">
{selectedRequest.id && <p className="col-span-2 break-all"><strong>ID:</strong> {selectedRequest.id}</p>}
{selectedRequest.target && <p><strong>Target:</strong> {selectedRequest.target}</p>}
{selectedRequest.tracks && <p><strong># Tracks:</strong> {selectedRequest.tracks}</p>}
@@ -363,7 +378,7 @@ export default function RequestManagement() {
</div>
{/* --- Status / Progress Card --- */}
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-2 gap-4">
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 sm:grid-cols-2 gap-4">
{selectedRequest.status && (
<p>
<strong>Status:</strong>{" "}
@@ -375,14 +390,22 @@ export default function RequestManagement() {
{selectedRequest.progress !== undefined && selectedRequest.progress !== null && (
<div className="col-span-2">
<strong>Progress:</strong>
<div className="progress-bar-container mt-2">
<div className="progress-bar-track progress-bar-track-lg">
<div className="rm-progress-container mt-2">
<div className="rm-progress-track rm-progress-track-lg">
<div
className={`progress-bar-fill ${selectedRequest.status === "Failed" ? "bg-red-500" : selectedRequest.status === "Finished" ? "bg-green-500" : "bg-blue-500"}`}
style={{ width: `${Math.min(100, Math.max(0, Number(selectedRequest.progress) > 1 ? Math.round(selectedRequest.progress) : selectedRequest.progress * 100))}%` }}
className={`rm-progress-fill ${selectedRequest.status === "Failed" ? "bg-red-500" : selectedRequest.status === "Finished" ? "bg-green-500" : "bg-blue-500"}`}
style={{
'--rm-progress': (computePct(selectedRequest.progress) / 100).toString(),
borderTopRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0,
borderBottomRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0
}}
data-pct={computePct(selectedRequest.progress)}
aria-valuenow={Math.min(100, Math.max(0, Number(selectedRequest.progress) > 1 ? Math.round(selectedRequest.progress) : selectedRequest.progress * 100))}
aria-valuemin={0}
aria-valuemax={100}
/>
</div>
<span className="progress-bar-text">{formatProgress(selectedRequest.progress)}</span>
<span className="rm-progress-text">{formatProgress(selectedRequest.progress)}</span>
</div>
</div>
)}