diff --git a/app/admin/specials/[id]/page.tsx b/app/admin/specials/[id]/page.tsx index 8219d9e..493569e 100644 --- a/app/admin/specials/[id]/page.tsx +++ b/app/admin/specials/[id]/page.tsx @@ -36,6 +36,8 @@ export default function SpecialEditorPage() { const [selectedSongId, setSelectedSongId] = useState(null); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); + const [pendingStartTime, setPendingStartTime] = useState(null); + const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); useEffect(() => { fetchSpecial(); @@ -49,6 +51,8 @@ export default function SpecialEditorPage() { setSpecial(data); if (data.songs.length > 0) { setSelectedSongId(data.songs[0].songId); + // Initialize pendingStartTime with the current startTime of the first song + setPendingStartTime(data.songs[0].startTime); } } } catch (error) { @@ -58,15 +62,20 @@ export default function SpecialEditorPage() { } }; - const handleStartTimeChange = async (songId: number, newStartTime: number) => { - if (!special) return; + const handleStartTimeChange = (newStartTime: number) => { + setPendingStartTime(newStartTime); + setHasUnsavedChanges(true); + }; + + const handleSave = async () => { + if (!special || !selectedSongId || pendingStartTime === null) return; setSaving(true); try { const res = await fetch(`/api/specials/${specialId}/songs`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ songId, startTime: newStartTime }) + body: JSON.stringify({ songId: selectedSongId, startTime: pendingStartTime }) }); if (res.ok) { @@ -76,10 +85,12 @@ export default function SpecialEditorPage() { return { ...prev, songs: prev.songs.map(ss => - ss.songId === songId ? { ...ss, startTime: newStartTime } : ss + ss.songId === selectedSongId ? { ...ss, startTime: pendingStartTime } : ss ) }; }); + setHasUnsavedChanges(false); + setPendingStartTime(null); // Reset pending state after saving } } catch (error) { console.error('Error updating start time:', error); @@ -176,21 +187,35 @@ export default function SpecialEditorPage() { Curate: {selectedSpecialSong.song.title}
-

- Click on the waveform to select where the puzzle should start. The highlighted region shows what players will hear. -

+
+

+ Click on the waveform to select where the puzzle should start. The highlighted region shows what players will hear. +

+ +
handleStartTimeChange(selectedSpecialSong.songId, newStartTime)} + onStartTimeChange={handleStartTimeChange} /> - {saving && ( -
- Saving... -
- )}
)}