\n \n Oops!\n {message}\n\n

\n {retry && (\n \n Try Again\n \n )}\n\n {useFallback && (\n \n Use Sample Data\n \n )}\n

\n \n );\n}\n\nfunction Loader() {\n return (\n

\n {/* Outer container for spin */}\n

\n {/* Main record container */}\n

\n {/* Outer ring groove */}\n

\n\n {/* Inner grooves */}\n

\n\n {/* Light arcs to show rotation */}\n

\n\n {/* Center label */}\n

\n {/* Center hole */}\n

\n {/* Subtle label detail */}\n

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

\n Loading Ash's record collection...\n

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

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

\n );\n}\n\nfunction RecordCard() {\n const [records, setRecords] = useState([]);\n const [currentRecordIndex, setCurrentRecordIndex] = useState(0);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n const [backHistory, setBackHistory] = useState([]);\n const [forwardHistory, setForwardHistory] = useState([]);\n const [moveDirection, setMoveDirection] = useState(null);\n const [hasInteracted, setHasInteracted] = useState(false);\n const [useFallbackData, setUseFallbackData] = useState(false);\n const fetchedRecords = useRef(new Set());\n\n const loadFallbackData = useCallback(() => {\n // Sample fallback data in case the API is down\n const fallbackRecords = [\n {\n basic_information: {\n title: \"Kind of Blue\",\n year: 1959,\n cover_image:\n \"https://maxm-imggenurl.web.val.run/vinyl-record-album-cover-miles-davis-kind-of-blue\",\n artists: [{ name: \"Miles Davis\" }],\n formats: [\n {\n name: \"Vinyl\",\n text: \"LP, Album\",\n descriptions: [\"Mono\", \"Reissue\"],\n },\n ],\n labels: [{ name: \"Columbia\", catno: \"CL 1355\" }],\n genres: [\"Jazz\"],\n styles: [\"Modal\", \"Cool Jazz\"],\n },\n },\n {\n basic_information: {\n title: \"Abbey Road\",\n year: 1969,\n cover_image:\n \"https://maxm-imggenurl.web.val.run/vinyl-record-album-cover-the-beatles-abbey-road\",\n artists: [{ name: \"The Beatles\" }],\n formats: [\n {\n name: \"Vinyl\",\n text: \"LP, Album\",\n descriptions: [\"Stereo\", \"Reissue\"],\n },\n ],\n labels: [{ name: \"Apple Records\", catno: \"PCS 7088\" }],\n genres: [\"Rock\"],\n styles: [\"Pop Rock\", \"Classic Rock\"],\n },\n },\n {\n basic_information: {\n title: \"Thriller\",\n year: 1982,\n cover_image:\n \"https://maxm-imggenurl.web.val.run/vinyl-record-album-cover-michael-jackson-thriller\",\n artists: [{ name: \"Michael Jackson\" }],\n formats: [\n { name: \"Vinyl\", text: \"LP, Album\", descriptions: [\"Stereo\"] },\n ],\n labels: [{ name: \"Epic\", catno: \"EPC 85930\" }],\n genres: [\"Pop\", \"Funk / Soul\"],\n styles: [\"Disco\", \"Pop Rock\"],\n },\n },\n ];\n\n setRecords(fallbackRecords);\n setIsLoading(false);\n setUseFallbackData(true);\n setError(null);\n }, []);\n\n const fetchReleases = useCallback(async () => {\n setIsLoading(true);\n setError(null);\n try {\n const response = await fetch(\n \"https://ashryanio-getallreleasesfromdiscogs.web.val.run\"\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const fetchedRecords = await response.json();\n if (!Array.isArray(fetchedRecords)) {\n throw new Error(\"Received data is not an array\");\n }\n\n const shuffledRecords = shuffleArray(fetchedRecords);\n setRecords(shuffledRecords);\n setIsLoading(false);\n setUseFallbackData(false);\n } catch (error) {\n console.error(\"Failed to fetch releases:\", error);\n setError(\n `Failed to load records: ${error.message}. The API endpoint might be down.`\n );\n setIsLoading(false);\n }\n }, []);\n\n useEffect(() => {\n fetchReleases();\n }, [fetchReleases]);\n\n // Fetch release year for the current record\n useEffect(() => {\n async function fetchReleaseYear() {\n if (records.length === 0) return;\n\n const currentRecord = records[currentRecordIndex];\n if (\n !currentRecord ||\n fetchedRecords.current.has(currentRecord.basic_information.master_id)\n ) {\n return; // Skip if already fetched\n }\n\n try {\n console.log(\"Fetching release year for:\", currentRecord);\n const response = await fetch(\n `https://ashryanio-getallreleasesfromdiscogs.web.val.run/masters?id=${currentRecord.basic_information.master_id}`\n );\n if (!response.ok) {\n throw new Error(`Failed to fetch release year: ${response.status}`);\n }\n const data = await response.json();\n console.log(\"Fetched data:\", data);\n\n // Mark as fetched\n fetchedRecords.current.add(currentRecord.basic_information.master_id);\n\n // Update the record\n setRecords((prevRecords) =>\n prevRecords.map((record, index) =>\n index === currentRecordIndex\n ? { ...record, releaseYear: data.originalReleaseYear } // Use the correct key\n : record\n )\n );\n } catch (error) {\n console.error(\"Error fetching release year:\", error);\n }\n }\n\n fetchReleaseYear();\n }, [currentRecordIndex, records.length]);\n\n const getRandomRecord = useCallback(() => {\n if (!hasInteracted) setHasInteracted(true);\n setMoveDirection(\"right\");\n\n if (forwardHistory.length > 0) {\n const nextIndex = forwardHistory[forwardHistory.length - 1];\n setCurrentRecordIndex(nextIndex);\n setForwardHistory((prev) => prev.slice(0, -1));\n setBackHistory((prev) => [...prev, currentRecordIndex]);\n } else {\n const randomIndex = Math.floor(Math.random() * records.length);\n setBackHistory((prev) => [...prev, currentRecordIndex]);\n setForwardHistory([]);\n setCurrentRecordIndex(randomIndex);\n }\n }, [records, currentRecordIndex, forwardHistory, hasInteracted]);\n\n const goBack = useCallback(() => {\n if (!hasInteracted) setHasInteracted(true);\n setMoveDirection(\"left\");\n\n if (backHistory.length > 0) {\n const lastIndex = backHistory[backHistory.length - 1];\n setForwardHistory((prev) => [...prev, currentRecordIndex]);\n setCurrentRecordIndex(lastIndex);\n setBackHistory((prev) => prev.slice(0, -1));\n }\n }, [backHistory, currentRecordIndex, hasInteracted]);\n\n useEffect(() => {\n function handleKeydown(event) {\n if (\n event.target.tagName.toLowerCase() !== \"input\" &&\n event.target.tagName.toLowerCase() !== \"textarea\"\n ) {\n switch (event.key) {\n case \"ArrowLeft\":\n if (backHistory.length > 0) {\n goBack();\n }\n break;\n case \"ArrowRight\":\n getRandomRecord();\n break;\n }\n }\n }\n\n window.addEventListener(\"keydown\", handleKeydown);\n return () => window.removeEventListener(\"keydown\", handleKeydown);\n }, [goBack, getRandomRecord]);\n\n const handleDragEnd = useCallback(\n (event, info) => {\n const SWIPE_THRESHOLD = 50;\n const SWIPE_VELOCITY = 0.3;\n\n if (\n Math.abs(info.offset.x) > SWIPE_THRESHOLD &&\n Math.abs(info.velocity.x) > SWIPE_VELOCITY\n ) {\n if (info.offset.x > 0 && backHistory.length > 0) {\n goBack();\n } else if (info.offset.x < 0) {\n getRandomRecord();\n }\n }\n },\n [goBack, getRandomRecord, backHistory.length]\n );\n\n if (error)\n return (\n \n );\n if (isLoading) return ;\n if (records.length === 0) {\n return (\n

No records found.

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

\n Ash Randorecs\n

\n Welcome to the rough sketch of what will become{\" \"}\n \n Collxn\n \n \n :{\" \"}\n \n
a new way to{\" \"}\n \n rediscover, navigate, and flex\n {\" \"}\n your{\" \"}\n \n vinyl record collection\n \n

\n \n rediscover, navigate, and flex\n \n
\n your vinyl record collection\n

\n \n Get Collxn before it's a cult classic\n \n

\n This prototype is proudly built and hosted on{\" \"}\n \n Val Town\n \n .\n

\n {useFallbackData\n ? \"Using sample data (API unavailable)\"\n : `Pulling from ${records.length} records in Ash's collection`}\n

\n\n

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

\n \n

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

\n {record.basic_information.title}\n

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

\n\n

\n Format\n

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

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

\n\n

\n Label\n

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

\n\n

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

\n \n \n

\n );\n}\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.error(\"ErrorBoundary caught an error:\", error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n return ;\n }\n\n return this.props.children;\n }\n}\n\nfunction App() {\n // Always use dark mode\n useEffect(() => {\n document.documentElement.classList.add(\"dark\");\n }, []);\n\n return (\n

\n \n

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

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n }\n );\n}\n","collxn",[],[183],{"_103":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":109,"_105":196,"_99":121,"_163":164,"_165":197,"_167":22,"_168":-5,"_169":198,"_98":199},"93e03b3a-3634-11f0-997f-9e149126039e","tsconfig.json","933db64e-3634-11f0-a803-9e149126039e",179,["D",1747825989536],"{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"module\": \"ESNext\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"noImplicitAny\": true,\n \"moduleResolution\": \"Node\",\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n",[],[193],"files",[152,172,181,191],"counts",{"_204":32,"_205":121,"_206":207,"_208":32},"pulls","branches","forks",2,"envVars","contents",[211,214,217,220],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":109,"_105":212,"_99":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":213},["D",1747824911935],[154],{"_103":173,"_95":174,"_155":175,"_157":-5,"_158":140,"_159":176,"_161":109,"_105":215,"_99":32,"_163":164,"_165":178,"_167":22,"_168":-5,"_98":216},["D",1747824911937],[174],{"_103":182,"_95":183,"_155":116,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":218,"_99":185,"_163":186,"_165":187,"_167":22,"_168":188,"_98":219},["D",1747841319708],[183],{"_103":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":109,"_105":221,"_99":121,"_163":164,"_165":197,"_167":22,"_168":-5,"_98":222},["D",1747825989536],[193],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_99":100,"_98":72,"_101":231,"_150":236,"_200":249,"_164":-7,"_209":250,"_259":-5,"_260":22,"_261":-5,"_262":-5,"_263":-5,"_264":265},{"_103":104,"_95":96,"_105":232,"_107":-5,"_108":109,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":109,"_118":119,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":233,"_135":234,"_138":235,"_149":22},["D",1746211347023],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_99":119,"_95":43,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[237,240,243,246],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":109,"_105":162,"_99":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":238,"_98":239},[],[154],{"_103":173,"_95":174,"_155":175,"_157":-5,"_158":140,"_159":176,"_161":109,"_105":177,"_99":32,"_163":164,"_165":178,"_167":22,"_168":-5,"_169":241,"_98":242},[],[174],{"_103":182,"_95":183,"_155":116,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":184,"_99":185,"_163":186,"_165":187,"_167":22,"_168":188,"_169":244,"_98":245},[],[183],{"_103":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":109,"_105":196,"_99":121,"_163":164,"_165":197,"_167":22,"_168":-5,"_169":247,"_98":248},[],[193],[237,240,243,246],[251,253,255,257],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":109,"_105":212,"_99":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":252},[154],{"_103":173,"_95":174,"_155":175,"_157":-5,"_158":140,"_159":176,"_161":109,"_105":215,"_99":32,"_163":164,"_165":178,"_167":22,"_168":-5,"_98":254},[174],{"_103":182,"_95":183,"_155":116,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":218,"_99":185,"_163":186,"_165":187,"_167":22,"_168":188,"_98":256},[183],{"_103":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":109,"_105":221,"_99":121,"_163":164,"_165":197,"_167":22,"_168":-5,"_98":258},[193],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

ashryanio

randoDisc