Something went wrong. Try again.
A decentralized music tracking and discovery platform built on AT Protocol 🎵 rocksky.app
spotify atproto lastfm musicbrainz scrobbling listenbrainz
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879import { useState } from "react";import { IconCheck, IconCopy } from "@tabler/icons-react";import musicBrainzLogo from "../assets/musicbrainz.svg";
export default function RecordingMetadata({ mbId, isrc,}: { mbId?: string | null; isrc?: string | null;}) { const [copied, setCopied] = useState(""); const [error, setError] = useState(""); const recordingId = mbId?.trim(); const code = isrc?.trim(); if (!recordingId && !code) return null; return ( <div className="flex flex-col items-start" style={{ gap: 20 }}> {recordingId && ( <a href={`https://musicbrainz.org/recording/${encodeURIComponent(recordingId)}`} target="_blank" rel="noopener noreferrer" className="no-underline text-sm" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "var(--color-text)", }} > <img src={musicBrainzLogo} width={25} height={25} style={{ flexShrink: 0 }} alt="" aria-hidden="true" /> View on MusicBrainz </a> )} {code && ( <div className="flex items-center gap-2 text-sm" style={{ color: "var(--color-text-muted)" }} > <span> ISRC: <span style={{ fontFamily: "var(--font-mono)" }}>{code}</span> </span> <button type="button" aria-label="Copy ISRC" title="Copy ISRC" className="inline-flex items-center justify-center p-2 rounded-full cursor-pointer" style={{ background: "transparent", border: 0, color: "inherit" }} onClick={async () => { try { await navigator.clipboard.writeText(code); setCopied(code); setError(""); } catch { setError( "Could not copy ISRC. Select the code to copy it manually.", ); } }} > {copied === code ? <IconCheck size={18} /> : <IconCopy size={18} />} </button> <span role="status"> {error || (copied === code ? "Copied" : "")} </span> </div> )} </div> );}