Map Music Disc

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { createPortal } from "react-dom"
5import { mapgl } from "./map-library"
6import { cn } from "@/lib/utils"
7import { useMap } from "./hooks"
8import type { MapCoordinates } from "./types"
9 
10type MusicNote = {
11  id: number
12  offsetX: number
13  delay: number
14  duration: number
15  type: "note" | "eighth" | "double"
16}
17 
18type MapMusicDiscProps = {
19  coordinates: MapCoordinates
20  size?: number
21  image?: string
22  spinning?: boolean
23  spinDuration?: number
24  showNotes?: boolean
25  noteColor?: string
26  discColor?: string
27  centerColor?: string
28  pitchAlignment?: "map" | "viewport" | "auto"
29  className?: string
30}
31 
32type DiscContentProps = {
33  size: number
34  image?: string
35  spinning: boolean
36  spinDuration: number
37  discColor: string
38  centerColor: string
39  className?: string
40}
41 
42type NotesContentProps = {
43  size: number
44  noteColor: string
45  notes: MusicNote[]
46}
47 
48type MusicDiscContentProps = {
49  size: number
50  image?: string
51  spinning: boolean
52  spinDuration: number
53  showNotes: boolean
54  noteColor: string
55  discColor: string
56  centerColor: string
57  notes: MusicNote[]
58  className?: string
59}
60 
61type MusicNoteIconProps = {
62  note: MusicNote
63  color: string
64}
65 
66const DEFAULT_SIZE = 64
67const DEFAULT_SPINNING = true
68const DEFAULT_SPIN_DURATION = 4000
69const DEFAULT_SHOW_NOTES = true
70const DEFAULT_NOTE_COLOR = "#a855f7"
71const DEFAULT_DISC_COLOR = "#0a0a0a"
72const DEFAULT_CENTER_COLOR = "#171717"
73const DEFAULT_PITCH_ALIGNMENT = "viewport" as const
74 
75const NOTE_SYMBOLS = {
76  note: "♪",
77  eighth: "♫",
78  double: "♬",
79} as const
80 
81export const MapMusicDisc = ({
82  coordinates,
83  size = DEFAULT_SIZE,
84  image,
85  spinning = DEFAULT_SPINNING,
86  spinDuration = DEFAULT_SPIN_DURATION,
87  showNotes = DEFAULT_SHOW_NOTES,
88  noteColor = DEFAULT_NOTE_COLOR,
89  discColor = DEFAULT_DISC_COLOR,
90  centerColor = DEFAULT_CENTER_COLOR,
91  pitchAlignment = DEFAULT_PITCH_ALIGNMENT,
92  className,
93}: MapMusicDiscProps) => {
94  const { map, isLoaded } = useMap()
95  const discMarkerRef = useRef<mapboxgl.Marker | null>(null)
96  const notesMarkerRef = useRef<mapboxgl.Marker | null>(null)
97  const discContainerRef = useRef<HTMLDivElement | null>(null)
98  const notesContainerRef = useRef<HTMLDivElement | null>(null)
99  const [isMounted, setIsMounted] = useState(false)
100 
101  const needsSeparateMarkers = showNotes && pitchAlignment === "map"
102 
103  useEffect(() => {
104    if (!map || !isLoaded) {
105      return
106    }
107 
108// … truncated