Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 3x 3x 3x 3x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 3x 3x 3x 3x 3x 3x 3x 3x 13x 3x 3x 3x 3x 13x 13x 13x 13x 3x 3x | 'use client'
import {useMemo, useState, type ReactNode} from 'react'
import type {Chart} from '@/lib/chordpro'
import {anchorLabel, placeCues, sectionAnchors, type Cue} from '@/lib/cues'
import CueView from '@/components/cues/CueView'
import CueComposer from '@/components/cues/CueComposer'
/**
* Your cues on a chart, as the two slots ChartBody takes: before the first
* section, and under each section's heading. While `editing`, every place
* gets an "add" button and each cue gets change/remove; otherwise the cues
* just read as part of the chart.
*/
export function useCueSlots({
songId,
chart,
songKey,
steps,
initial,
editing,
}: {
songId: string
chart: Chart
songKey: string | null
steps: number
initial: Cue[]
editing: boolean
}) {
const [cues, setCues] = useState(initial)
// Where the composer is open: an anchor to add at, or a cue id to change
const [open, setOpen] = useState<{anchor: string; cue?: Cue} | null>(null)
const anchors = useMemo(() => sectionAnchors(chart), [chart])
const placed = useMemo(() => placeCues(chart, cues), [chart, cues])
const saved = (cue: Cue) => {
setCues((cs) => [...cs.filter((c) => c.id !== cue.id), cue])
setOpen(null)
}
async function remove(cue: Cue) {
const before = cues
setCues(cues.filter((c) => c.id !== cue.id))
const r = await fetch(`/api/cues/${cue.id}`, {method: 'DELETE'})
if (!r.ok && r.status !== 404) setCues(before)
}
const one = (cue: Cue, where?: string) =>
open?.cue?.id === cue.id ? (
<CueComposer
key={cue.id}
songId={songId}
anchor={cue.anchor}
where={anchorLabel(cue.anchor, chart)}
songKey={songKey}
steps={steps}
editing={cue}
onSaved={saved}
onCancel={() => setOpen(null)}
/>
) : (
<div key={cue.id}>
<CueView cue={cue} songKey={songKey} steps={steps} where={where} />
{editing && (
<div className="-mt-[0.35em] mb-[0.5em] flex gap-3 text-[0.7em]">
<button
type="button"
onClick={() => setOpen({anchor: cue.anchor, cue})}
className="text-sky underline"
>
{cue.kind === 'IMAGE' ? 'Caption' : 'Change'}
</button>
<button
type="button"
onClick={() => remove(cue)}
className="text-bad underline"
>
Remove
</button>
</div>
)}
</div>
)
const place = (anchor: string, list: Cue[], extra?: ReactNode) => {
const adding = open && !open.cue && open.anchor === anchor
if (!list.length && !editing && !extra) return null
return (
<div className="chart-cues">
{extra}
{list.map((c) => one(c))}
{adding ? (
<CueComposer
songId={songId}
anchor={anchor}
where={anchorLabel(anchor, chart)}
songKey={songKey}
steps={steps}
onSaved={saved}
onCancel={() => setOpen(null)}
/>
) : (
editing && (
<button
type="button"
onClick={() => setOpen({anchor})}
className="mb-[0.5em] min-h-9 rounded-md border border-dashed border-amber px-2 text-[0.7em] font-semibold text-amber"
>
+ Cue {anchor ? 'here' : 'at the top'}
</button>
)
)}
</div>
)
}
const top = place(
'',
placed.top,
placed.lost.length ? (
<>{placed.lost.map((c) => one(c, `Was on ${anchorLabel(c.anchor)}`))}</>
) : undefined,
)
const extra = (i: number) => place(anchors[i], placed.sections.get(i) ?? [])
return {top, extra, count: cues.length}
}
/** The same slots, read-only (performance mode): nothing to click. */
export function readOnlyCueSlots(
chart: Chart,
cues: Cue[],
songKey: string | null,
steps: number,
) {
if (!cues.length) return {top: undefined, extra: undefined}
const placed = placeCues(chart, cues)
const view = (c: Cue, where?: string) => (
<CueView key={c.id} cue={c} songKey={songKey} steps={steps} where={where} />
)
const top =
placed.top.length || placed.lost.length ? (
<div className="chart-cues">
{placed.lost.map((c) => view(c, `Was on ${anchorLabel(c.anchor)}`))}
{placed.top.map((c) => view(c))}
</div>
) : undefined
const extra = (i: number) => {
const list = placed.sections.get(i)
return list?.length ? (
<div className="chart-cues">{list.map((c) => view(c))}</div>
) : null
}
return {top, extra}
}
|