- TRip: various ui/ux enhancements
- other minor changes
This commit is contained in:
@@ -401,6 +401,84 @@ Custom
|
||||
border-color: #f87171;
|
||||
}
|
||||
|
||||
.trip-checkbox {
|
||||
appearance: none;
|
||||
width: 2.1rem;
|
||||
height: 1.1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #9ca3af;
|
||||
background: #e5e7eb;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trip-checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.trip-checkbox:hover {
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.trip-checkbox:focus-visible {
|
||||
outline: 2px solid rgba(37, 99, 235, 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.trip-checkbox:checked {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.trip-checkbox:checked::after {
|
||||
transform: translate(0.95rem, -50%);
|
||||
}
|
||||
|
||||
.trip-checkbox:indeterminate {
|
||||
background: linear-gradient(90deg, #93c5fd, #2563eb);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.trip-checkbox:indeterminate::after {
|
||||
width: 0.8rem;
|
||||
height: 0.2rem;
|
||||
border-radius: 0.2rem;
|
||||
background: white;
|
||||
transform: translate(0.65rem, -50%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .trip-checkbox {
|
||||
border-color: #4b5563;
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .trip-checkbox::after {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .trip-checkbox:checked {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .trip-checkbox:checked::after {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.lyric-search-input.has-ready .p-autocomplete-input {
|
||||
border-color: #34d399;
|
||||
}
|
||||
|
||||
@@ -11,34 +11,50 @@ import { JoyUIRootIsland } from "./Components"
|
||||
import { useHtmlThemeAttr } from "../hooks/useHtmlThemeAttr";
|
||||
import { usePrimeReactThemeSwitcher } from "../hooks/usePrimeReactThemeSwitcher";
|
||||
|
||||
const { title, description = metaData.description, image } = Astro.props;
|
||||
const { title, description, image } = Astro.props;
|
||||
|
||||
const { url, site } = Astro;
|
||||
const { url } = Astro;
|
||||
|
||||
const shareTitle = title ? `${title} | ${metaData.title}` : metaData.shareTitle ?? metaData.title;
|
||||
const shareDescription = description ?? metaData.shareDescription ?? metaData.description;
|
||||
const canonicalUrl = url?.href ?? metaData.baseUrl;
|
||||
const shareImage = new URL(image ?? metaData.ogImage, metaData.baseUrl).toString();
|
||||
const shareImageAlt = metaData.shareImageAlt ?? metaData.shareTitle ?? metaData.title;
|
||||
|
||||
---
|
||||
|
||||
<SEO
|
||||
title={title}
|
||||
title={shareTitle}
|
||||
titleTemplate=`%s | ${metaData.title}`
|
||||
titleDefault={metaData.title}
|
||||
description={description}
|
||||
description={shareDescription}
|
||||
charset="UTF-8"
|
||||
openGraph={{
|
||||
basic: {
|
||||
title: title || metaData.title,
|
||||
title: shareTitle,
|
||||
type: "website",
|
||||
image: "",
|
||||
url: url,
|
||||
image: shareImage,
|
||||
url: canonicalUrl,
|
||||
},
|
||||
optional: {
|
||||
description,
|
||||
siteName: "codey.lol",
|
||||
description: shareDescription,
|
||||
siteName: metaData.name,
|
||||
locale: "en_US",
|
||||
},
|
||||
}}
|
||||
extend={{
|
||||
// extending the default link tags
|
||||
link: [{ rel: "icon", href: "https://codey.lol/images/favicon.png" }],
|
||||
link: [
|
||||
{ rel: "icon", href: "https://codey.lol/images/favicon.png" },
|
||||
{ rel: "canonical", href: canonicalUrl },
|
||||
],
|
||||
meta: [
|
||||
{ property: "og:image:alt", content: shareImageAlt },
|
||||
{ name: "twitter:card", content: "summary_large_image" },
|
||||
{ name: "twitter:title", content: shareTitle },
|
||||
{ name: "twitter:description", content: shareDescription },
|
||||
{ name: "twitter:image", content: shareImage },
|
||||
{ name: "twitter:image:alt", content: shareImageAlt },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ import { AutoComplete } from "primereact/autocomplete";
|
||||
import { authFetch } from "@/utils/authFetch";
|
||||
import BreadcrumbNav from "./BreadcrumbNav";
|
||||
import { API_URL, ENVIRONMENT } from "@/config";
|
||||
import "./MediaRequestForm.css";
|
||||
|
||||
export default function MediaRequestForm() {
|
||||
const [type, setType] = useState("artist");
|
||||
@@ -25,12 +24,66 @@ export default function MediaRequestForm() {
|
||||
const [loadingAlbumId, setLoadingAlbumId] = useState(null);
|
||||
const [expandedAlbums, setExpandedAlbums] = useState([]);
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const [currentTrackId, setCurrentTrackId] = useState(null);
|
||||
const [isAudioPlaying, setIsAudioPlaying] = useState(false);
|
||||
const [audioLoadingTrackId, setAudioLoadingTrackId] = useState(null);
|
||||
const [playbackQueue, setPlaybackQueue] = useState([]);
|
||||
const [queueIndex, setQueueIndex] = useState(null);
|
||||
const [queueAlbumId, setQueueAlbumId] = useState(null);
|
||||
const [albumPlaybackLoadingId, setAlbumPlaybackLoadingId] = useState(null);
|
||||
const [shuffleAlbums, setShuffleAlbums] = useState({});
|
||||
const [audioProgress, setAudioProgress] = useState({ current: 0, duration: 0 });
|
||||
|
||||
const debounceTimeout = useRef(null);
|
||||
const autoCompleteRef = useRef(null);
|
||||
const metadataFetchToastId = useRef(null);
|
||||
const audioRef = useRef(null);
|
||||
const audioSourcesRef = useRef({});
|
||||
const pendingTrackFetchesRef = useRef({});
|
||||
const playbackQueueRef = useRef([]);
|
||||
const queueIndexRef = useRef(null);
|
||||
const queueAlbumIdRef = useRef(null);
|
||||
const albumHeaderRefs = useRef({});
|
||||
const suppressHashRef = useRef(false);
|
||||
const lastUrlRef = useRef("");
|
||||
|
||||
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // Helper for delays
|
||||
const sanitizeFilename = (text) => (text || "").replace(/[\\/:*?"<>|]/g, "_") || "track";
|
||||
const formatTime = (seconds) => {
|
||||
if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
return `${mins}:${secs}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
lastUrlRef.current = window.location.pathname + window.location.search + window.location.hash;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return undefined;
|
||||
|
||||
const handleHashChange = () => {
|
||||
if (suppressHashRef.current) {
|
||||
const fallback =
|
||||
lastUrlRef.current || window.location.pathname + window.location.search;
|
||||
if (typeof window.history?.replaceState === "function") {
|
||||
window.history.replaceState(null, "", fallback);
|
||||
}
|
||||
lastUrlRef.current = fallback;
|
||||
suppressHashRef.current = false;
|
||||
} else {
|
||||
lastUrlRef.current =
|
||||
window.location.pathname + window.location.search + window.location.hash;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("hashchange", handleHashChange);
|
||||
return () => window.removeEventListener("hashchange", handleHashChange);
|
||||
}, []);
|
||||
|
||||
|
||||
const Spinner = () => (
|
||||
@@ -40,6 +93,164 @@ export default function MediaRequestForm() {
|
||||
/>
|
||||
);
|
||||
|
||||
const InlineSpinner = ({ sizeClass = "h-3 w-3" }) => (
|
||||
<span
|
||||
className={`inline-block ${sizeClass} border-2 border-t-2 border-gray-300 border-t-blue-600 rounded-full animate-spin`}
|
||||
aria-label="Loading audio"
|
||||
/>
|
||||
);
|
||||
|
||||
const PlayIcon = () => (
|
||||
<svg viewBox="0 0 24 24" role="presentation" className="w-4 h-4" aria-hidden="true">
|
||||
<path fill="currentColor" d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const PauseIcon = () => (
|
||||
<svg viewBox="0 0 24 24" role="presentation" className="w-4 h-4" aria-hidden="true">
|
||||
<path fill="currentColor" d="M6 5h4v14H6zm8 0h4v14h-4z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ShuffleIcon = ({ active }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
role="presentation"
|
||||
className={`w-4 h-4 ${active ? "text-blue-600" : "text-neutral-500"}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M17 3h4v4h-2V6.41l-4.29 4.3-1.42-1.42L17.59 5H17V3zm0 11h-1.59l-2.7-2.7 1.42-1.42 2.99 3h1.88v-1.59L21 14l-3.99 3V15zm-7.12-1.71L4.41 5H3V3h2.59l6.12 6.12-1.71 1.17zM3 19v-2h1.41l4.7-4.7 1.42 1.41L6.41 19H3z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const shuffleArray = (arr) => {
|
||||
const clone = [...arr];
|
||||
for (let i = clone.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[clone[i], clone[j]] = [clone[j], clone[i]];
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
|
||||
const ensureAlbumExpanded = (albumIndex) => {
|
||||
if (typeof albumIndex !== "number") return;
|
||||
let albumAdded = false;
|
||||
setExpandedAlbums((prev) => {
|
||||
const current = Array.isArray(prev) ? [...prev] : [];
|
||||
if (current.includes(albumIndex)) return prev;
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
lastUrlRef.current = window.location.pathname + window.location.search + window.location.hash;
|
||||
}
|
||||
|
||||
suppressHashRef.current = true;
|
||||
current.push(albumIndex);
|
||||
albumAdded = true;
|
||||
return current;
|
||||
});
|
||||
|
||||
if (albumAdded) {
|
||||
setTimeout(() => {
|
||||
suppressHashRef.current = false;
|
||||
}, 400);
|
||||
}
|
||||
};
|
||||
|
||||
const resetQueueState = () => {
|
||||
setPlaybackQueue([]);
|
||||
playbackQueueRef.current = [];
|
||||
setQueueIndex(null);
|
||||
queueIndexRef.current = null;
|
||||
setQueueAlbumId(null);
|
||||
queueAlbumIdRef.current = null;
|
||||
setAlbumPlaybackLoadingId(null);
|
||||
setAudioProgress({ current: 0, duration: 0 });
|
||||
};
|
||||
|
||||
const getTrackSource = async (trackId) => {
|
||||
if (audioSourcesRef.current[trackId]) {
|
||||
return audioSourcesRef.current[trackId];
|
||||
}
|
||||
|
||||
if (!pendingTrackFetchesRef.current[trackId]) {
|
||||
pendingTrackFetchesRef.current[trackId] = (async () => {
|
||||
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) {
|
||||
throw new Error("No stream URL returned for this track.");
|
||||
}
|
||||
|
||||
const fileResponse = await fetch(data.stream_url, {
|
||||
method: "GET",
|
||||
mode: "cors",
|
||||
credentials: "omit",
|
||||
});
|
||||
|
||||
if (!fileResponse.ok) {
|
||||
throw new Error(`Failed to fetch track file: ${fileResponse.status}`);
|
||||
}
|
||||
|
||||
const blob = await fileResponse.blob();
|
||||
const sourceUrl = URL.createObjectURL(blob);
|
||||
|
||||
if (audioSourcesRef.current[trackId]) {
|
||||
URL.revokeObjectURL(audioSourcesRef.current[trackId]);
|
||||
}
|
||||
|
||||
audioSourcesRef.current[trackId] = sourceUrl;
|
||||
return sourceUrl;
|
||||
})().finally(() => {
|
||||
delete pendingTrackFetchesRef.current[trackId];
|
||||
});
|
||||
}
|
||||
|
||||
return pendingTrackFetchesRef.current[trackId];
|
||||
};
|
||||
|
||||
const prefetchTrack = async (track) => {
|
||||
if (!track || audioSourcesRef.current[track.id] || pendingTrackFetchesRef.current[track.id]) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await getTrackSource(track.id);
|
||||
} catch (error) {
|
||||
console.error("Prefetch failed", error);
|
||||
}
|
||||
};
|
||||
|
||||
const playTrack = async (track, { fromQueue = false } = {}) => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio || !track) return;
|
||||
|
||||
if (!fromQueue) {
|
||||
resetQueueState();
|
||||
}
|
||||
|
||||
setAudioLoadingTrackId(track.id);
|
||||
try {
|
||||
const sourceUrl = await getTrackSource(track.id);
|
||||
audio.pause();
|
||||
audio.currentTime = 0;
|
||||
audio.src = sourceUrl;
|
||||
setAudioProgress({ current: 0, duration: 0 });
|
||||
setCurrentTrackId(track.id);
|
||||
await audio.play();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Failed to play track.");
|
||||
if (!fromQueue) {
|
||||
resetQueueState();
|
||||
}
|
||||
} finally {
|
||||
setAudioLoadingTrackId(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch artist suggestions for autocomplete
|
||||
const searchArtists = (e) => {
|
||||
const query = e.query.trim();
|
||||
@@ -187,6 +398,16 @@ export default function MediaRequestForm() {
|
||||
const handleSearch = async () => {
|
||||
toast.dismiss();
|
||||
setIsSearching(true);
|
||||
resetQueueState();
|
||||
setShuffleAlbums({});
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.removeAttribute("src");
|
||||
audioRef.current.load();
|
||||
}
|
||||
setIsAudioPlaying(false);
|
||||
setAudioLoadingTrackId(null);
|
||||
setCurrentTrackId(null);
|
||||
try {
|
||||
if (metadataFetchToastId.current) toast.dismiss(metadataFetchToastId.current);
|
||||
} catch (err) {
|
||||
@@ -219,6 +440,7 @@ export default function MediaRequestForm() {
|
||||
);
|
||||
|
||||
setAlbums(data);
|
||||
setShuffleAlbums({});
|
||||
setTracksByAlbum({});
|
||||
setExpandedAlbums([]);
|
||||
|
||||
@@ -259,50 +481,244 @@ export default function MediaRequestForm() {
|
||||
setIsSearching(false);
|
||||
};
|
||||
|
||||
const handleTrackClick = async (trackId, artist, title) => {
|
||||
const handleTrackPlayPause = async (track, albumId = null, albumIndex = null) => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
if (typeof albumIndex === "number") {
|
||||
ensureAlbumExpanded(albumIndex);
|
||||
}
|
||||
|
||||
if (currentTrackId === track.id) {
|
||||
if (audio.paused) {
|
||||
try {
|
||||
await audio.play();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Unable to resume playback.");
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
await playTrack(track, { fromQueue: false });
|
||||
};
|
||||
|
||||
const toggleAlbumShuffle = (albumId) => {
|
||||
setShuffleAlbums((prev) => ({ ...prev, [albumId]: !prev[albumId] }));
|
||||
};
|
||||
|
||||
const startAlbumPlayback = async (albumId, albumIndex) => {
|
||||
const tracks = tracksByAlbum[albumId];
|
||||
if (!Array.isArray(tracks) || tracks.length === 0) {
|
||||
toast.error("Tracks are still loading for this album.");
|
||||
return;
|
||||
}
|
||||
|
||||
ensureAlbumExpanded(albumIndex);
|
||||
|
||||
const shouldShuffle = !!shuffleAlbums[albumId];
|
||||
const queue = shouldShuffle ? shuffleArray(tracks) : [...tracks];
|
||||
setPlaybackQueue(queue);
|
||||
playbackQueueRef.current = queue;
|
||||
setQueueAlbumId(albumId);
|
||||
queueAlbumIdRef.current = albumId;
|
||||
setQueueIndex(0);
|
||||
queueIndexRef.current = 0;
|
||||
setAlbumPlaybackLoadingId(albumId);
|
||||
|
||||
try {
|
||||
const res = await authFetch(`${API_URL}/trip/get_track_by_id/${trackId}?quality=${quality}`);
|
||||
await playTrack(queue[0], { fromQueue: true });
|
||||
setAlbumPlaybackLoadingId(null);
|
||||
if (queue[1]) prefetchTrack(queue[1]);
|
||||
} catch (err) {
|
||||
setAlbumPlaybackLoadingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAlbumPlayPause = async (albumId, albumIndex) => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
ensureAlbumExpanded(albumIndex);
|
||||
|
||||
if (queueAlbumId === albumId && playbackQueue.length > 0) {
|
||||
if (audio.paused) {
|
||||
try {
|
||||
await audio.play();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Unable to resume album playback.");
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
await startAlbumPlayback(albumId, albumIndex);
|
||||
};
|
||||
|
||||
const handleTrackDownload = async (track) => {
|
||||
try {
|
||||
const res = await authFetch(`${API_URL}/trip/get_track_by_id/${track.id}?quality=${quality}`);
|
||||
if (!res.ok) throw new Error("Failed to fetch track URL");
|
||||
const data = await res.json();
|
||||
|
||||
if (data.stream_url) {
|
||||
// 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);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
|
||||
const sanitize = (str) => str.replace(/[\\/:*?"<>|]/g, "_");
|
||||
const urlPath = new URL(data.stream_url).pathname;
|
||||
const extension = urlPath.split('.').pop().split('?')[0] || 'flac';
|
||||
const filename = `${sanitize(artist)} - ${sanitize(title)}.${extension}`;
|
||||
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
} else {
|
||||
toast.error("No stream URL returned for this track.");
|
||||
if (!data.stream_url) {
|
||||
throw new Error("No stream URL returned for this track.");
|
||||
}
|
||||
|
||||
const fileResponse = await fetch(data.stream_url, {
|
||||
method: "GET",
|
||||
mode: "cors",
|
||||
credentials: "omit",
|
||||
});
|
||||
|
||||
if (!fileResponse.ok) {
|
||||
throw new Error(`Failed to fetch track file: ${fileResponse.status}`);
|
||||
}
|
||||
|
||||
const blob = await fileResponse.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const artistName = track.artist || selectedArtist?.artist || "Unknown Artist";
|
||||
const urlPath = new URL(data.stream_url).pathname;
|
||||
const extension = urlPath.split(".").pop().split("?")[0] || "flac";
|
||||
const filename = `${sanitizeFilename(artistName)} - ${sanitizeFilename(track.title)}.${extension}`;
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
toast.error("Failed to get track download URL.");
|
||||
console.error(error);
|
||||
toast.error("Failed to download track.");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof Audio === "undefined") {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const audio = new Audio();
|
||||
audio.preload = "auto";
|
||||
audioRef.current = audio;
|
||||
|
||||
const handleEnded = async () => {
|
||||
const queue = playbackQueueRef.current;
|
||||
const index = queueIndexRef.current;
|
||||
|
||||
if (Array.isArray(queue) && queue.length > 0 && index !== null && index + 1 < queue.length) {
|
||||
const nextIndex = index + 1;
|
||||
setQueueIndex(nextIndex);
|
||||
queueIndexRef.current = nextIndex;
|
||||
setAlbumPlaybackLoadingId(queueAlbumIdRef.current);
|
||||
try {
|
||||
await playTrack(queue[nextIndex], { fromQueue: true });
|
||||
setAlbumPlaybackLoadingId(null);
|
||||
const upcoming = queue[nextIndex + 1];
|
||||
if (upcoming) prefetchTrack(upcoming);
|
||||
} catch (error) {
|
||||
console.error("Failed to advance queue", error);
|
||||
setAlbumPlaybackLoadingId(null);
|
||||
resetQueueState();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAudioPlaying(false);
|
||||
setCurrentTrackId(null);
|
||||
resetQueueState();
|
||||
};
|
||||
|
||||
const updateProgress = () => {
|
||||
setAudioProgress({ current: audio.currentTime || 0, duration: audio.duration || 0 });
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
setIsAudioPlaying(false);
|
||||
updateProgress();
|
||||
};
|
||||
|
||||
const handlePlay = () => {
|
||||
setIsAudioPlaying(true);
|
||||
updateProgress();
|
||||
};
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
updateProgress();
|
||||
const queue = playbackQueueRef.current;
|
||||
const index = queueIndexRef.current;
|
||||
if (!Array.isArray(queue) || queue.length === 0 || index === null) return;
|
||||
const nextTrack = queue[index + 1];
|
||||
if (!nextTrack) return;
|
||||
|
||||
const duration = audio.duration || 0;
|
||||
const currentTime = audio.currentTime || 0;
|
||||
const progress = duration > 0 ? currentTime / duration : 0;
|
||||
if ((duration > 0 && progress >= 0.7) || (duration === 0 && currentTime >= 15)) {
|
||||
prefetchTrack(nextTrack);
|
||||
}
|
||||
};
|
||||
|
||||
audio.addEventListener("ended", handleEnded);
|
||||
audio.addEventListener("pause", handlePause);
|
||||
audio.addEventListener("play", handlePlay);
|
||||
audio.addEventListener("timeupdate", handleTimeUpdate);
|
||||
audio.addEventListener("loadedmetadata", updateProgress);
|
||||
audio.addEventListener("seeking", updateProgress);
|
||||
audio.addEventListener("seeked", updateProgress);
|
||||
|
||||
return () => {
|
||||
audio.pause();
|
||||
audio.removeAttribute("src");
|
||||
audio.load();
|
||||
audio.removeEventListener("ended", handleEnded);
|
||||
audio.removeEventListener("pause", handlePause);
|
||||
audio.removeEventListener("play", handlePlay);
|
||||
audio.removeEventListener("timeupdate", handleTimeUpdate);
|
||||
audio.removeEventListener("loadedmetadata", updateProgress);
|
||||
audio.removeEventListener("seeking", updateProgress);
|
||||
audio.removeEventListener("seeked", updateProgress);
|
||||
Object.values(audioSourcesRef.current).forEach((url) => URL.revokeObjectURL(url));
|
||||
audioSourcesRef.current = {};
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
playbackQueueRef.current = playbackQueue;
|
||||
}, [playbackQueue]);
|
||||
|
||||
useEffect(() => {
|
||||
queueIndexRef.current = queueIndex;
|
||||
}, [queueIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
queueAlbumIdRef.current = queueAlbumId;
|
||||
}, [queueAlbumId]);
|
||||
|
||||
useEffect(() => {
|
||||
Object.values(audioSourcesRef.current).forEach((url) => URL.revokeObjectURL(url));
|
||||
audioSourcesRef.current = {};
|
||||
pendingTrackFetchesRef.current = {};
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.removeAttribute("src");
|
||||
audioRef.current.load();
|
||||
}
|
||||
setIsAudioPlaying(false);
|
||||
setAudioLoadingTrackId(null);
|
||||
setCurrentTrackId(null);
|
||||
resetQueueState();
|
||||
}, [quality]);
|
||||
|
||||
const allTracksLoaded = albums.every(({ id }) => Array.isArray(tracksByAlbum[id]) && tracksByAlbum[id].length > 0);
|
||||
|
||||
const handleToggleAllAlbums = () => {
|
||||
@@ -378,7 +794,7 @@ export default function MediaRequestForm() {
|
||||
setTracksByAlbum((prev) => ({ ...prev, [album.id]: data }));
|
||||
setSelectedTracks((prev) => ({
|
||||
...prev,
|
||||
[album.id]: data.map((t) => t.id),
|
||||
[album.id]: data.map((t) => String(t.id)),
|
||||
}));
|
||||
} catch (err) {
|
||||
toast.error(`Failed to fetch tracks for album ${album.album}.`);
|
||||
@@ -661,7 +1077,7 @@ export default function MediaRequestForm() {
|
||||
activeIndex={expandedAlbums}
|
||||
onTabChange={(e) => setExpandedAlbums(e.index)}
|
||||
>
|
||||
{albums.map(({ album, id, release_date }) => {
|
||||
{albums.map(({ album, id, release_date }, albumIndex) => {
|
||||
const allTracks = tracksByAlbum[id] || [];
|
||||
const selected = selectedTracks[id];
|
||||
|
||||
@@ -676,7 +1092,7 @@ export default function MediaRequestForm() {
|
||||
<AccordionTab
|
||||
key={id}
|
||||
header={
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-wrap items-center gap-3 w-full text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allChecked}
|
||||
@@ -685,9 +1101,48 @@ export default function MediaRequestForm() {
|
||||
}}
|
||||
onChange={() => toggleAlbum(id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="cursor-pointer"
|
||||
className="trip-checkbox cursor-pointer"
|
||||
aria-label={`Select all tracks for album ${album}`}
|
||||
/>
|
||||
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleAlbumPlayPause(id, albumIndex);
|
||||
}}
|
||||
className={`w-7 h-7 flex items-center justify-center rounded-full border transition-colors disabled:opacity-60 disabled:cursor-not-allowed ${queueAlbumId === id && isAudioPlaying
|
||||
? "border-green-500 text-green-500"
|
||||
: "border-neutral-400 text-neutral-600 hover:text-blue-600 hover:border-blue-600"}`}
|
||||
aria-label={`${queueAlbumId === id && isAudioPlaying ? "Pause" : "Play"} album ${album}`}
|
||||
aria-pressed={queueAlbumId === id && isAudioPlaying}
|
||||
disabled={albumPlaybackLoadingId === id}
|
||||
>
|
||||
{albumPlaybackLoadingId === id ? (
|
||||
<InlineSpinner sizeClass="h-3 w-3" />
|
||||
) : queueAlbumId === id && isAudioPlaying ? (
|
||||
<PauseIcon />
|
||||
) : (
|
||||
<PlayIcon />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleAlbumShuffle(id);
|
||||
}}
|
||||
className={`w-7 h-7 flex items-center justify-center rounded-full border transition-colors ${shuffleAlbums[id]
|
||||
? "border-blue-600 text-blue-600"
|
||||
: "border-neutral-400 text-neutral-500 hover:text-blue-600 hover:border-blue-600"}`}
|
||||
aria-label={`Toggle shuffle for album ${album}`}
|
||||
aria-pressed={!!shuffleAlbums[id]}
|
||||
>
|
||||
<ShuffleIcon active={!!shuffleAlbums[id]} />
|
||||
</button>
|
||||
</div>
|
||||
<span className="flex items-center" title={album}>
|
||||
{truncate(album, 32)}
|
||||
{loadingAlbumId === id && <Spinner />}
|
||||
@@ -706,33 +1161,93 @@ export default function MediaRequestForm() {
|
||||
>
|
||||
{allTracks.length > 0 ? (
|
||||
<ul className="text-sm">
|
||||
{allTracks.map((track) => (
|
||||
<li key={track.id} className="py-1 flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected?.includes(String(track.id))}
|
||||
onChange={() => toggleTrack(id, track.id)}
|
||||
className="cursor-pointer"
|
||||
aria-label={`Select track ${track.title} `}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTrackClick(track.id, selectedArtist.artist, track.title)}
|
||||
className="font-medium text-blue-600 hover:underline cursor-pointer bg-transparent border-none p-0"
|
||||
aria-label={`Download track ${track.title} `}
|
||||
>
|
||||
{truncate(track.title, 80)}
|
||||
</button>
|
||||
<span className="text-xs text-neutral-500">{quality}</span>
|
||||
{track.version && (
|
||||
<span className="text-xs text-neutral-400">({track.version})</span>
|
||||
)}
|
||||
{track.duration && (
|
||||
<span className="text-xs text-neutral-500 ml-auto tabular-nums">{track.duration}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
{allTracks.map((track) => {
|
||||
const isCurrentTrack = currentTrackId === track.id;
|
||||
const showProgress = isCurrentTrack && audioProgress.duration > 0;
|
||||
const safeProgress = {
|
||||
current: Math.min(audioProgress.current, audioProgress.duration || 0),
|
||||
duration: audioProgress.duration || 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<li key={track.id} className="py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected?.includes(String(track.id))}
|
||||
onChange={() => toggleTrack(id, track.id)}
|
||||
className="trip-checkbox cursor-pointer"
|
||||
aria-label={`Select track ${track.title} `}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTrackPlayPause(track, id, albumIndex)}
|
||||
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"}`}
|
||||
aria-label={`${isCurrentTrack && isAudioPlaying ? "Pause" : "Play"} ${track.title}`}
|
||||
aria-pressed={isCurrentTrack && isAudioPlaying}
|
||||
disabled={audioLoadingTrackId === track.id}
|
||||
>
|
||||
{audioLoadingTrackId === track.id ? (
|
||||
<InlineSpinner sizeClass="h-4 w-4" />
|
||||
) : isCurrentTrack && isAudioPlaying ? (
|
||||
<PauseIcon />
|
||||
) : (
|
||||
<PlayIcon />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex-1 min-w-0 text-left">
|
||||
<span className="block truncate" title={track.title}>
|
||||
{truncate(track.title, 80)}
|
||||
</span>
|
||||
{track.version && (
|
||||
<span className="block text-[0.7rem] text-neutral-500 truncate" title={track.version}>
|
||||
{track.version}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 ml-auto text-xs text-neutral-500">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTrackDownload(track)}
|
||||
className="text-neutral-500 hover:text-blue-600 underline whitespace-nowrap cursor-pointer"
|
||||
aria-label={`Download ${track.title}`}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<span>{quality}</span>
|
||||
{track.duration && (
|
||||
<span className="tabular-nums">{track.duration}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showProgress && (
|
||||
<div className="mt-2 pr-6 pl-16">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={safeProgress.duration}
|
||||
value={safeProgress.current}
|
||||
step="0.25"
|
||||
onChange={(e) => {
|
||||
if (!audioRef.current) return;
|
||||
const nextValue = Number(e.target.value);
|
||||
audioRef.current.currentTime = nextValue;
|
||||
setAudioProgress((prev) => ({ ...prev, current: nextValue }));
|
||||
}}
|
||||
className="w-full h-1 cursor-pointer accent-blue-600"
|
||||
aria-label={`Seek within ${track.title}`}
|
||||
/>
|
||||
<div className="flex justify-between text-[0.65rem] text-neutral-500 mt-1">
|
||||
<span>{formatTime(safeProgress.current)}</span>
|
||||
<span>{formatTime(safeProgress.duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="text-sm italic text-neutral-600 dark:text-neutral-400">
|
||||
|
||||
@@ -3,9 +3,11 @@ export const metaData = {
|
||||
title: "CODEY STUFF",
|
||||
name: "codey.lol",
|
||||
owner: "codey",
|
||||
ogImage: "/opengraph-image.png",
|
||||
description:
|
||||
"codey.lol",
|
||||
ogImage: "/images/favicon.png",
|
||||
description: "CODEY STUFF!",
|
||||
shareTitle: "CODEY STUFF",
|
||||
shareDescription: "CODEY STUFF!",
|
||||
shareImageAlt: "/images/favicon.png",
|
||||
};
|
||||
|
||||
export const API_URL = "https://api.codey.lol";
|
||||
|
||||
@@ -8,8 +8,6 @@ import "@/assets/styles/nav.css";
|
||||
const user = await requireAuthHook(Astro);
|
||||
const isLoggedIn = Boolean(user);
|
||||
const userDisplayName = user?.user ?? null;
|
||||
const userInitial = userDisplayName ? String(userDisplayName).charAt(0).toUpperCase() : '?';
|
||||
|
||||
|
||||
const navItems = [
|
||||
{ label: "Home", href: "/" },
|
||||
|
||||
Reference in New Issue
Block a user