/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { AnimatePresence, motion } from "https://esm.sh/framer-motion?deps=react@18.2.0,react-dom@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function ErrorMessage({ message }) { return (

Oops! {message}

); } function Loader() { return (

{/* Outer container for spin */}

{/* Main record container */}

{/* Outer ring groove */}

{/* Inner grooves */}

{/* Light arcs to show rotation */}

{/* Center label */}

{/* Center hole */}

{/* Subtle label detail */}

{/* Loading text with subtle pulse animation */}

Loading Ash's record collection...

); } function shuffleArray(array) { const shuffledArray = [...array]; for (let i = shuffledArray.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]]; } return shuffledArray; } function MusicButtons({ albumTitle, artistName }) { const links = [ { name: "Apple Music", url: `https://music.apple.com/search?term=${ encodeURIComponent( `${artistName} ${albumTitle}`, ) }`, classes: "bg-gray-900 dark:bg-black", }, { name: "Spotify", url: `https://open.spotify.com/search/${ encodeURIComponent( `${albumTitle} ${artistName}`, ) }`, classes: "bg-green-500", }, ]; return (

{links.map((link) => ( {link.name} ))}

); } function RecordCard({ theme, toggleTheme }) { const [records, setRecords] = useState([]); const [currentRecordIndex, setCurrentRecordIndex] = useState(0); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [backHistory, setBackHistory] = useState([]); const [forwardHistory, setForwardHistory] = useState([]); const [moveDirection, setMoveDirection] = useState(null); const [hasInteracted, setHasInteracted] = useState(false); const fetchedRecords = useRef(new Set()); useEffect(() => { async function fetchReleases() { try { const response = await fetch("https://ashryanio-getallreleasesfromdiscogs.web.val.run"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const fetchedRecords = await response.json(); if (!Array.isArray(fetchedRecords)) { throw new Error("Received data is not an array"); } const shuffledRecords = shuffleArray(fetchedRecords); setRecords(shuffledRecords); setIsLoading(false); } catch (error) { console.error("Failed to fetch releases:", error); setError(error.message); setIsLoading(false); } } fetchReleases(); }, []); // Fetch release year for the current record useEffect(() => { async function fetchReleaseYear() { if (records.length === 0) return; const currentRecord = records[currentRecordIndex]; if (!currentRecord || fetchedRecords.current.has(currentRecord.basic_information.master_id)) { return; // Skip if already fetched } try { console.log("Fetching release year for:", currentRecord); const response = await fetch( `https://ashryanio-getallreleasesfromdiscogs.web.val.run/masters?id=${currentRecord.basic_information.master_id}`, ); if (!response.ok) { throw new Error(`Failed to fetch release year: ${response.status}`); } const data = await response.json(); console.log("Fetched data:", data); // Mark as fetched fetchedRecords.current.add(currentRecord.basic_information.master_id); // Update the record setRecords((prevRecords) => prevRecords.map((record, index) => index === currentRecordIndex ? { ...record, releaseYear: data.originalReleaseYear } // Use the correct key : record ) ); } catch (error) { console.error("Error fetching release year:", error); } } fetchReleaseYear(); }, [currentRecordIndex, records.length]); const getRandomRecord = useCallback(() => { if (!hasInteracted) setHasInteracted(true); setMoveDirection("right"); if (forwardHistory.length > 0) { const nextIndex = forwardHistory[forwardHistory.length - 1]; setCurrentRecordIndex(nextIndex); setForwardHistory(prev => prev.slice(0, -1)); setBackHistory(prev => [...prev, currentRecordIndex]); } else { const randomIndex = Math.floor(Math.random() * records.length); setBackHistory(prev => [...prev, currentRecordIndex]); setForwardHistory([]); setCurrentRecordIndex(randomIndex); } }, [records, currentRecordIndex, forwardHistory, hasInteracted]); const goBack = useCallback(() => { if (!hasInteracted) setHasInteracted(true); setMoveDirection("left"); if (backHistory.length > 0) { const lastIndex = backHistory[backHistory.length - 1]; setForwardHistory(prev => [...prev, currentRecordIndex]); setCurrentRecordIndex(lastIndex); setBackHistory(prev => prev.slice(0, -1)); } }, [backHistory, currentRecordIndex, hasInteracted]); useEffect(() => { function handleKeydown(event) { if ( event.target.tagName.toLowerCase() !== "input" && event.target.tagName.toLowerCase() !== "textarea" ) { switch (event.key) { case "ArrowLeft": if (backHistory.length > 0) { goBack(); } break; case "ArrowRight": getRandomRecord(); break; } } } window.addEventListener("keydown", handleKeydown); return () => window.removeEventListener("keydown", handleKeydown); }, [goBack, getRandomRecord]); const handleDragEnd = useCallback((event, info) => { const SWIPE_THRESHOLD = 50; const SWIPE_VELOCITY = 0.3; if (Math.abs(info.offset.x) > SWIPE_THRESHOLD && Math.abs(info.velocity.x) > SWIPE_VELOCITY) { if (info.offset.x > 0 && backHistory.length > 0) { goBack(); } else if (info.offset.x < 0) { getRandomRecord(); } } }, [goBack, getRandomRecord, backHistory.length]); if (error) return ; if (isLoading) return ; if (records.length === 0) { return (

No records found.

); } const record = records[currentRecordIndex]; const variants = { enter: (direction) => ({ x: direction === "left" ? -200 : 200, opacity: 0, }), center: { x: 0, opacity: 1, }, exit: (direction) => ({ x: direction === "left" ? 200 : -200, opacity: 0, }), }; const navigationVariants = { visible: { opacity: 1 }, hidden: { opacity: 0 }, }; return (

Ash Randorecs

Pulling from {records.length} records

{/* Navigation buttons outside AnimatePresence */} {backHistory.length > 0 && ( )}

${record.basic_information.title}$

artist.name).join(", ")} />

{record.basic_information.title}

{record.basic_information.artists.map((a) => a.name).join(", ")} •{" "} {record.releaseYear || record.basic_information.year}

Format

{record.basic_information.formats[0]?.name} - {record.basic_information.formats[0]?.text}

{record.basic_information.formats[0]?.descriptions?.join(" • ")}

Label

{record.basic_information.labels[0]?.name} • {record.basic_information.labels[0]?.catno}

{record.basic_information.genres?.map((genre) => ( {genre} ))} {record.basic_information.styles?.map((style) => ( {style} ))}

); } class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("ErrorBoundary caught an error:", error, errorInfo); } render() { if (this.state.hasError) { return ; } return this.props.children; } } function App() { const [theme, setTheme] = useState(() => localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") ); useEffect(() => { document.documentElement.classList.toggle("dark", theme === "dark"); localStorage.setItem("theme", theme); }, [theme]); const toggleTheme = () => setTheme(theme === "dark" ? "light" : "dark"); return (

); } function client() { const rootElement = document.getElementById("root"); if (!rootElement) { console.error("Root element not found"); return; } const root = createRoot(rootElement); root.render( , ); } // Ensure client() runs after the DOM is fully loaded if (typeof document !== "undefined") { document.addEventListener("DOMContentLoaded", client); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/favicon.svg") { return new Response( ``, ); } return new Response( ` Ash Randorecs

`, { headers: { "content-type": "text/html" }, }, ); }

randoDisc