another commit without a list of specific changes! (misc)
This commit is contained in:
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user