50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T27c0,"use client" import { useEffect, useRef, useState } from "react" import { createPortal } from "react-dom" import { mapgl } from "./map-library" import { cn } from "@/lib/utils" import { useMap } from "./hooks" import type { MapCoordinates } from "./types" type MusicNote = { id: number offsetX: number delay: number duration: number type: "note" | "eighth" | "double" } type MapMusicDiscProps = { coordinates: MapCoordinates size?: number image?: string spinning?: boolean spinDuration?: number showNotes?: boolean noteColor?: string discColor?: string centerColor?: string pitchAlignment?: "map" | "viewport" | "auto" className?: string } type DiscContentProps = { size: number image?: string spinning: boolean spinDuration: number discColor: string centerColor: string className?: string } type NotesContentProps = { size: number noteColor: string notes: MusicNote[] } type MusicDiscContentProps = { size: number image?: string spinning: boolean spinDuration: number showNotes: boolean noteColor: string discColor: string centerColor: string notes: MusicNote[] className?: string } type MusicNoteIconProps = { note: MusicNote color: string } const DEFAULT_SIZE = 64 const DEFAULT_SPINNING = true const DEFAULT_SPIN_DURATION = 4000 const DEFAULT_SHOW_NOTES = true const DEFAULT_NOTE_COLOR = "#a855f7" const DEFAULT_DISC_COLOR = "#0a0a0a" const DEFAULT_CENTER_COLOR = "#171717" const DEFAULT_PITCH_ALIGNMENT = "viewport" as const const NOTE_SYMBOLS = { note: "♪", eighth: "♫", double: "♬", } as const export const MapMusicDisc = ({ coordinates, size = DEFAULT_SIZE, image, spinning = DEFAULT_SPINNING, spinDuration = DEFAULT_SPIN_DURATION, showNotes = DEFAULT_SHOW_NOTES, noteColor = DEFAULT_NOTE_COLOR, discColor = DEFAULT_DISC_COLOR, centerColor = DEFAULT_CENTER_COLOR, pitchAlignment = DEFAULT_PITCH_ALIGNMENT, className, }: MapMusicDiscProps) => { const { map, isLoaded } = useMap() const discMarkerRef = useRef(null) const notesMarkerRef = useRef(null) const discContainerRef = useRef(null) const notesContainerRef = useRef(null) const [isMounted, setIsMounted] = useState(false) const needsSeparateMarkers = showNotes && pitchAlignment === "map" useEffect(() => { if (!map || !isLoaded) { return } const discContainer = document.createElement("div") discContainerRef.current = discContainer const discMarker = new mapgl.Marker({ element: discContainer, anchor: "center", pitchAlignment, }) .setLngLat(coordinates) .addTo(map) discMarkerRef.current = discMarker if (needsSeparateMarkers) { const notesContainer = document.createElement("div") notesContainerRef.current = notesContainer const notesMarker = new mapgl.Marker({ element: notesContainer, anchor: "center", pitchAlignment: "viewport", }) .setLngLat(coordinates) .addTo(map) notesMarkerRef.current = notesMarker } setIsMounted(true) return () => { discMarker.remove() discMarkerRef.current = null discContainerRef.current = null if (notesMarkerRef.current) { notesMarkerRef.current.remove() notesMarkerRef.current = null notesContainerRef.current = null } setIsMounted(false) } }, [map, isLoaded, needsSeparateMarkers, pitchAlignment]) useEffect(() => { if (discMarkerRef.current) { discMarkerRef.current.setLngLat(coordinates) } if (notesMarkerRef.current) { notesMarkerRef.current.setLngLat(coordinates) } }, [coordinates]) if (!isMounted || !discContainerRef.current) { return null } if (needsSeparateMarkers) { return ( <> {createPortal( , discContainerRef.current )} {notesContainerRef.current && createPortal(, notesContainerRef.current)} ) } return createPortal( , discContainerRef.current ) } export const MusicDisc = ({ size = DEFAULT_SIZE, image, spinning = DEFAULT_SPINNING, spinDuration = DEFAULT_SPIN_DURATION, showNotes = DEFAULT_SHOW_NOTES, noteColor = DEFAULT_NOTE_COLOR, discColor = DEFAULT_DISC_COLOR, centerColor = DEFAULT_CENTER_COLOR, className, }: Omit) => { return ( ) } const MusicDiscContent = ({ size, image, spinning, spinDuration, showNotes, noteColor, discColor, centerColor, notes, className, }: MusicDiscContentProps) => { return (

{showNotes && (

{notes.map((note) => { return })}

)}

) } const NotesContent = ({ size, noteColor, notes }: NotesContentProps) => { return (

{notes.map((note) => { return })}

) } const DiscContent = ({ size, image, spinning, spinDuration, discColor, centerColor, className }: DiscContentProps) => { const grooveCount = Math.floor(size / 8) const centerSize = size * 0.35 const holeSize = size * 0.08 return (

{Array.from({ length: grooveCount }, (_, grooveIndex) => { const grooveRadius = ((grooveIndex + 1) / grooveCount) * 45 return (

) })}

{image ? ( Album cover

) : (

)}

) } const MusicNoteIcon = ({ note, color }: MusicNoteIconProps) => { return ( {NOTE_SYMBOLS[note.type]} ) } const NOTES: MusicNote[] = [ { id: 0, offsetX: -12, delay: 0, duration: 2400, type: "note" }, { id: 1, offsetX: 8, delay: 500, duration: 2800, type: "eighth" }, { id: 2, offsetX: -6, delay: 1000, duration: 2200, type: "double" }, { id: 3, offsetX: 14, delay: 1500, duration: 2600, type: "note" }, { id: 4, offsetX: -16, delay: 2000, duration: 2400, type: "eighth" }, { id: 5, offsetX: 4, delay: 2500, duration: 3000, type: "double" }, ] 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","mapbox-gl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mapbox-gl","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"mapbox-gl"}]]}]}]]}],["$","$L50",null,{"namespace":"@terrae","registryDependencies":["https://www.terrae.dev/map.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/map/music-disc.tsx","content":"$52","type":"registry:ui","target":"components/ui/map/music-disc.tsx"}],"className":"h-[70svh] min-h-80"}]]}]