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

another commit without a list of specific changes! (misc)

Browse Source
This commit is contained in:
codey
2025-08-21 15:07:10 -04:00
parent 1528931a29
commit 315919186b
15 changed files with 299 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,9 +27,6 @@ export default function BreadcrumbNav({ currentPage }) {
);
})}
</nav >
<div className="mb-2">
Self Service
</div>
</div>
);
}

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

@@ -3,6 +3,7 @@ import { toast } from "react-toastify";
import { Button } from "@mui/joy";
import { Accordion, AccordionTab } from "primereact/accordion";
import { AutoComplete } from "primereact/autocomplete";
import { authFetch } from "@/utils/authFetch";
import BreadcrumbNav from "./BreadcrumbNav";
import { API_URL, ENVIRONMENT } from "@/config";
@@ -12,6 +13,7 @@ export default function MediaRequestForm() {
const [artistInput, setArtistInput] = useState("");
const [albumInput, setAlbumInput] = useState("");
const [trackInput, setTrackInput] = useState("");
const [quality, setQuality] = useState("FLAC"); // default FLAC
const [selectedItem, setSelectedItem] = useState(null);
const [albums, setAlbums] = useState([]);
const [tracksByAlbum, setTracksByAlbum] = useState({});
@@ -29,15 +31,6 @@ export default function MediaRequestForm() {
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // Helper for delays
// Helper fetch wrapper that includes cookies automatically
const authFetch = async (url, options = {}) => {
const opts = {
...options,
credentials: "include", // <--- send HttpOnly cookies with requests
};
return fetch(url, opts);
};
const Spinner = () => (
<span
@@ -82,8 +75,6 @@ export default function MediaRequestForm() {
};
//helpers for string truncation
const truncate = (text, maxLen) =>
maxLen <= 3
? text.slice(0, maxLen)
@@ -138,7 +129,7 @@ export default function MediaRequestForm() {
try {
const res = await authFetch(
`${API_URL}/trip/get_albums_by_artist_id/${selectedArtist.id}`
`${API_URL}/trip/get_albums_by_artist_id/${selectedArtist.id}?quality=${quality}`
);
if (!res.ok) throw new Error("API error");
const data = await res.json();
@@ -190,13 +181,21 @@ export default function MediaRequestForm() {
const handleTrackClick = async (trackId, artist, title) => {
try {
const res = await authFetch(`${API_URL}/trip/get_track_by_id/${trackId}`);
const res = await authFetch(`${API_URL}/trip/get_track_by_id/${trackId}?quality=${quality}`);
if (!res.ok) throw new Error("Failed to fetch track URL");
const data = await res.json();
if (data.stream_url) {
const fileResponse = await authFetch(data.stream_url);
if (!fileResponse.ok) throw new Error("Failed to fetch track file");
// Use plain fetch for public resource
const fileResponse = await fetch(data.stream_url, {
method: "GET",
mode: "cors", // ensure cross-origin is allowed
credentials: "omit", // do NOT send cookies or auth
});
if (!fileResponse.ok) {
throw new Error(`Failed to fetch track file: ${fileResponse.status}`);
}
const blob = await fileResponse.blob();
const url = URL.createObjectURL(blob);
@@ -204,16 +203,14 @@ export default function MediaRequestForm() {
const link = document.createElement("a");
link.href = url;
// Sanitize filename (remove / or other illegal chars)
const sanitize = (str) => str.replace(/[\\/:*?"<>|]/g, "_");
const filename = `${sanitize(artist)} - ${sanitize(title)}.flac`;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
URL.revokeObjectURL(url);
} else {
toast.error("No stream URL returned for this track.");
@@ -271,7 +268,7 @@ export default function MediaRequestForm() {
if (albumsToFetch.length === 0) return;
const fetchTracksSequentially = async () => {
const minDelay = 200; // ms between API requests
const minDelay = 500; // ms between API requests
setIsFetching(true);
const totalAlbums = albumsToFetch.length;
@@ -402,7 +399,8 @@ export default function MediaRequestForm() {
},
body: JSON.stringify({
track_ids: allSelectedIds,
target: selectedArtist.artist
target: selectedArtist.artist,
quality: quality,
}),
});
@@ -494,10 +492,10 @@ export default function MediaRequestForm() {
}
`}</style>
<BreadcrumbNav currentPage="request" />
<h2 className="text-3xl font-semibold mt-0">New Request</h2>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4">
<label for="artistInput">Artist: </label>
<label htmlFor="artistInput">Artist: </label>
<AutoComplete
id={artistInput}
ref={autoCompleteRef}
@@ -526,6 +524,20 @@ export default function MediaRequestForm() {
placeholder={type === "album" ? "Album" : "Track"}
/>
)}
<div className="flex items-center gap-4 justify-end mt-2">
<label htmlFor="qualitySelect" className="text-sm font-medium">
Quality:
</label>
<select
id="qualitySelect"
value={quality}
onChange={(e) => setQuality(e.target.value)}
className="border border-neutral-300 dark:border-neutral-600 rounded px-2 py-1 bg-white dark:bg-neutral-800 text-black dark:text-white"
>
<option value="FLAC">FLAC</option>
<option value="Lossy">Lossy</option>
</select>
</div>
<Button onClick={handleSearch} disabled={isSearching}>
{isSearching ? (
@@ -616,7 +628,7 @@ export default function MediaRequestForm() {
>
{truncate(track.title, 80)}
</button>
<span className="text-xs text-neutral-500">{track.audioQuality}</span>
<span className="text-xs text-neutral-500">{quality}</span>
{track.version && (
<span className="text-xs text-neutral-400">({track.version})</span>
)}
@@ -636,7 +648,6 @@ export default function MediaRequestForm() {
);
})}
</Accordion>
<div className="flex justify-end">
<Button onClick={handleSubmitRequest} color="primary" className="mt-4" disabled={isSubmitting}>
{isSubmitting ? (

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

@@ -5,12 +5,13 @@ import { Column } from "primereact/column";
import { Dropdown } from "primereact/dropdown";
import { Button } from "@mui/joy";
import { Dialog } from "primereact/dialog";
import { authFetch } from "@/utils/authFetch";
import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
import BreadcrumbNav from "./BreadcrumbNav";
import { API_URL } from "@/config";
const STATUS_OPTIONS = ["queued", "started", "compressing", "finished", "failed"];
const TAR_BASE_URL = "https://codey.lol/m/m2/"; // configurable prefix
const TAR_BASE_URL = "https://codey.lol/m/m2"; // configurable prefix
export default function RequestManagement() {
const [requests, setRequests] = useState([]);
@@ -22,12 +23,11 @@ export default function RequestManagement() {
const pollingRef = useRef(null);
const pollingDetailRef = useRef(null);
const authFetch = async (url, options = {}) => fetch(url, { ...options, credentials: "include" });
const tarballUrl = (absPath) => {
const tarballUrl = (absPath, quality) => {
if (!absPath) return null;
const filename = absPath.split("/").pop(); // get "SOMETHING.tar.gz"
return `${TAR_BASE_URL}${filename}`;
return `${TAR_BASE_URL}/${quality}/${filename}`;
};
const fetchJobs = async () => {
@@ -53,7 +53,12 @@ export default function RequestManagement() {
return await res.json();
} catch (err) {
console.error(err);
toast.error("Failed to fetch job details");
if (!toast.isActive('fetch-job-fail-toast')) {
toast.error("Failed to fetch job details",
{
toastId: "fetch-job-fail-toast",
});
}
return null;
}
};
@@ -108,17 +113,41 @@ export default function RequestManagement() {
}
};
const getQualityColorClass = (quality) => {
switch (quality) {
case "FLAC": return "bg-green-500 text-white";
case "Lossy": return "bg-yellow-500 text-white";
default: return "bg-gray-500 text-white";
}
};
const statusBodyTemplate = (rowData) => (
<span className={`inline-block px-3 py-1 rounded-full font-semibold text-sm ${getStatusColorClass(rowData.status)}`}>
{rowData.status}
</span>
);
const qualityBodyTemplate = (rowData) => (
<span className={`inline-block px-3 py-1 rounded-full font-semibold text-sm ${getQualityColorClass(rowData.quality)}`}>
{rowData.quality}
</span>
);
const safeText = (val) => (val === 0 ? "0" : val || "—");
const textWithEllipsis = (val, width = "12rem") => (
<span className="truncate block" style={{ maxWidth: width }} title={val || ""}>{val || "—"}</span>
);
const truncate = (text, maxLen) =>
maxLen <= 3
? text.slice(0, maxLen)
: text.length <= maxLen
? text
: text.slice(0, maxLen - 3) + '...';
const basename = (p) => (typeof p === "string" ? p.split("/").pop() : "");
const formatProgress = (p) => {
@@ -280,16 +309,16 @@ export default function RequestManagement() {
responsiveLayout="scroll"
onRowClick={handleRowClick}
>
<Column field="id" header="ID" sortable style={{ width: "10rem" }} body={(row) => textWithEllipsis(row.id, "8rem")} />
<Column field="id" header="ID" sortable style={{ width: "8rem" }} body={(row) => textWithEllipsis(row.id, "6rem")} />
<Column field="target" header="Target" sortable style={{ width: "12rem" }} body={(row) => textWithEllipsis(row.target, "10rem")} />
<Column field="tracks" header="# Tracks" sortable style={{ width: "10rem" }} body={(row) => row.tracks} />
<Column field="tracks" header="# Tracks" sortable style={{ width: "8rem" }} body={(row) => row.tracks} />
<Column field="status" header="Status" body={statusBodyTemplate} style={{ width: "10rem", textAlign: "center" }} sortable />
<Column field="progress" header="Progress" body={(row) => formatProgress(row.progress)} style={{ width: "8rem", textAlign: "center" }} sortable />
<Column
field="tarball"
header="Tarball"
body={(row) => {
const url = tarballUrl(row.tarball);
const url = tarballUrl(row.tarball, row.quality || "FLAC");
return url ? (
<a
href={url}
@@ -298,14 +327,20 @@ export default function RequestManagement() {
className="text-blue-500 hover:underline truncate block"
title={url.split("/").pop()}
>
{url.split("/").pop()}
{truncate(url.split("/").pop(), 16)}
</a>
) : (
"—"
);
}}
style={{ width: "18rem" }}
style={{ width: "10rem" }}
/>
<Column
field="quality"
header="Quality"
body={qualityBodyTemplate}
style={{ width: "6rem", textAlign: "center" }}
sortable />
</DataTable>
</div>
@@ -368,12 +403,19 @@ export default function RequestManagement() {
</a>
</p>
)}
{selectedRequest.quality && (
<p><strong>Quality:</strong>{" "}
<span
className={`px-2 py-0.5 rounded-full text-xs font-bold ${getQualityColorClass(selectedRequest.quality)}`}
>{selectedRequest.quality}</span></p>
)}
</div>
) : (
<p>Loading...</p>
)}
</Dialog>
)
}
</Dialog >
</div>
</div >
);
}