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

2
src/components/AppLayout.jsx
View File

@@ -32,7 +32,7 @@ export default function Root({ child }) {
color="danger">
Work in progress... bugs are to be expected.
</Alert> */}
{child == "LoginPage" && (<LoginPage />)}
{child == "LoginPage" && (<LoginPage client:only="react" />)}
{child == "LyricSearch" && (<LyricSearch client:only="react" />)}
{child == "Player" && (<Player client:only="react" />)}
{child == "Memes" && <Memes client:only="react" />}

75
src/components/Login.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useRef, useEffect } from "react";
import { toast } from "react-toastify";
import { API_URL } from "@/config";
@@ -7,6 +7,14 @@ export default function LoginPage() {
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const passwordRef = useRef();
useEffect(() => {
if (passwordRef.current && password === "") {
passwordRef.current.value = "";
}
}, []);
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
@@ -20,6 +28,7 @@ export default function LoginPage() {
setLoading(false);
return toast.error("Password is required");
}
const formData = new URLSearchParams();
formData.append("username", username);
formData.append("password", password);
@@ -30,10 +39,8 @@ export default function LoginPage() {
const resp = await fetch(`${API_URL}/auth/login`, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
credentials: "include", // Important for cookies
headers: { "Content-Type": "application/x-www-form-urlencoded" },
credentials: "include",
body: formData.toString(),
});
@@ -44,21 +51,15 @@ export default function LoginPage() {
}
if (!resp.ok) {
if (resp.json().detail) {
toast.error(`Login failed: ${resp.json().detail}`);
}
else {
toast.error("Login failed");
}
const data = await resp.json().catch(() => ({}));
toast.error(data.detail ? `Login failed: ${data.detail}` : "Login failed");
setLoading(false);
return;
}
const data = await resp.json();
if (data.access_token) {
toast.success("Login successful!");
// Redirect
window.location.href = "/TRip"; // TODO: fix, hardcoded
} else {
toast.error("Login failed: no access token received");
@@ -72,21 +73,16 @@ export default function LoginPage() {
}
return (
<div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-50">
<div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-10">
<div className="max-w-md w-full bg-white dark:bg-[#1E1E1E] rounded-2xl shadow-xl px-10 pb-6">
<h2 className="flex flex-col items-center text-3xl font-semibold text-gray-900 dark:text-white mb-8 font-sans">
<img className="logo-auth mb-4" src="/images/kode.png" alt="Logo" />
Authentication Required
</h2>
<form className="space-y-6" onSubmit={handleSubmit} noValidate>
<div>
<label
htmlFor="username"
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
Username
</label>
<form className="space-y-6 relative" onSubmit={handleSubmit} noValidate>
{/* Username */}
<div className="relative">
<input
type="text"
id="username"
@@ -95,31 +91,42 @@ export default function LoginPage() {
value={username}
onChange={(e) => setUsername(e.target.value)}
required
className="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-[#121212] dark:text-white"
placeholder="Your username"
disabled={loading}
className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<label
htmlFor="username"
className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
>
Username
</label>
</div>
<div>
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
Password
</label>
{/* Password */}
<div className="relative">
<input
type="password"
id="password"
name="password"
autoComplete="off"
autoComplete="new-password"
spellCheck="false"
ref={passwordRef}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-[#121212] dark:text-white"
placeholder="••••••••"
disabled={loading}
className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<label
htmlFor="password"
className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
>
Password
</label>
</div>
<button

2
src/components/LyricSearch.jsx
View File

@@ -23,7 +23,7 @@ export default function LyricSearch() {
<span>Lyric Search</span>
</h2>
<div className="card-text my-4">
<label for="lyric-search-input">Search:</label>
<label htmlFor="lyric-search-input">Search:</label>
<LyricSearchInputField
id="lyric-search-input"
placeholder="Artist - Song"

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 >
);
}