Add curator special curation flow and shared editor
This commit is contained in:
Hördle Bot
212
components/CurateSpecialEditor.tsx
Normal file
212
components/CurateSpecialEditor.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import WaveformEditor from '@/components/WaveformEditor';
|
||||
|
||||
export type LocalizedString = string | { de: string; en: string };
|
||||
|
||||
export interface CurateSpecialSong {
|
||||
id: number;
|
||||
songId: number;
|
||||
startTime: number;
|
||||
order: number | null;
|
||||
song: {
|
||||
id: number;
|
||||
title: string;
|
||||
artist: string;
|
||||
filename: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface CurateSpecial {
|
||||
id: number;
|
||||
name: LocalizedString;
|
||||
subtitle?: LocalizedString | null;
|
||||
maxAttempts: number;
|
||||
unlockSteps: string;
|
||||
songs: CurateSpecialSong[];
|
||||
}
|
||||
|
||||
export interface CurateSpecialEditorProps {
|
||||
special: CurateSpecial;
|
||||
locale: 'de' | 'en';
|
||||
onBack: () => void;
|
||||
onSaveStartTime: (songId: number, startTime: number) => Promise<void>;
|
||||
backLabel?: string;
|
||||
headerPrefix?: string;
|
||||
noSongsHint?: string;
|
||||
noSongsSubHint?: string;
|
||||
instructionsText?: string;
|
||||
savingLabel?: string;
|
||||
saveChangesLabel?: string;
|
||||
savedLabel?: string;
|
||||
}
|
||||
|
||||
const resolveLocalized = (value: LocalizedString | null | undefined, locale: 'de' | 'en'): string | undefined => {
|
||||
if (!value) return undefined;
|
||||
if (typeof value === 'string') return value;
|
||||
return value[locale] ?? value.en ?? value.de;
|
||||
};
|
||||
|
||||
export default function CurateSpecialEditor({
|
||||
special,
|
||||
locale,
|
||||
onBack,
|
||||
onSaveStartTime,
|
||||
backLabel = '← Back',
|
||||
headerPrefix = 'Edit Special:',
|
||||
noSongsHint = 'No songs assigned to this special yet.',
|
||||
noSongsSubHint = 'Go back to the dashboard to add songs to this special.',
|
||||
instructionsText = 'Click on the waveform to select where the puzzle should start. The highlighted region shows what players will hear.',
|
||||
savingLabel = '💾 Saving...',
|
||||
saveChangesLabel = '💾 Save Changes',
|
||||
savedLabel = '✓ Saved',
|
||||
}: CurateSpecialEditorProps) {
|
||||
const [selectedSongId, setSelectedSongId] = useState<number | null>(
|
||||
special.songs.length > 0 ? special.songs[0].songId : null
|
||||
);
|
||||
const [pendingStartTime, setPendingStartTime] = useState<number | null>(
|
||||
special.songs.length > 0 ? special.songs[0].startTime : null
|
||||
);
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const specialName = resolveLocalized(special.name, locale) ?? `Special #${special.id}`;
|
||||
const specialSubtitle = resolveLocalized(special.subtitle ?? null, locale);
|
||||
|
||||
const unlockSteps = JSON.parse(special.unlockSteps);
|
||||
const totalDuration = unlockSteps[unlockSteps.length - 1];
|
||||
|
||||
const selectedSpecialSong = special.songs.find(ss => ss.songId === selectedSongId) ?? null;
|
||||
|
||||
const handleStartTimeChange = (newStartTime: number) => {
|
||||
setPendingStartTime(newStartTime);
|
||||
setHasUnsavedChanges(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedSongId || pendingStartTime === null) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await onSaveStartTime(selectedSongId, pendingStartTime);
|
||||
setHasUnsavedChanges(false);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<button
|
||||
onClick={onBack}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
background: '#e5e7eb',
|
||||
border: 'none',
|
||||
borderRadius: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
marginBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
{backLabel}
|
||||
</button>
|
||||
<h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
|
||||
{headerPrefix} {specialName}
|
||||
</h1>
|
||||
{specialSubtitle && (
|
||||
<p style={{ fontSize: '1.125rem', color: '#4b5563', marginTop: '0.25rem' }}>
|
||||
{specialSubtitle}
|
||||
</p>
|
||||
)}
|
||||
<p style={{ color: '#666', marginTop: '0.5rem' }}>
|
||||
Max Attempts: {special.maxAttempts} | Puzzle Duration: {totalDuration}s
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{special.songs.length === 0 ? (
|
||||
<div style={{ padding: '2rem', background: '#f3f4f6', borderRadius: '0.5rem', textAlign: 'center' }}>
|
||||
<p>{noSongsHint}</p>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
{noSongsSubHint}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
||||
Select Song to Curate
|
||||
</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem' }}>
|
||||
{special.songs.map(ss => (
|
||||
<div
|
||||
key={ss.songId}
|
||||
onClick={() => {
|
||||
setSelectedSongId(ss.songId);
|
||||
setPendingStartTime(ss.startTime);
|
||||
setHasUnsavedChanges(false);
|
||||
}}
|
||||
style={{
|
||||
padding: '1rem',
|
||||
background: selectedSongId === ss.songId ? '#4f46e5' : '#f3f4f6',
|
||||
color: selectedSongId === ss.songId ? 'white' : 'black',
|
||||
borderRadius: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
border: selectedSongId === ss.songId ? '2px solid #4f46e5' : '2px solid transparent'
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: 'bold' }}>{ss.song.title}</div>
|
||||
<div style={{ fontSize: '0.875rem', opacity: 0.8 }}>{ss.song.artist}</div>
|
||||
<div style={{ fontSize: '0.75rem', marginTop: '0.5rem', opacity: 0.7 }}>
|
||||
Start: {ss.startTime}s
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedSpecialSong && (
|
||||
<div>
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
||||
Curate: {selectedSpecialSong.song.title}
|
||||
</h2>
|
||||
<div style={{ background: '#f9fafb', padding: '1.5rem', borderRadius: '0.5rem' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', margin: 0 }}>
|
||||
{instructionsText}
|
||||
</p>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!hasUnsavedChanges || saving}
|
||||
style={{
|
||||
padding: '0.5rem 1.5rem',
|
||||
background: hasUnsavedChanges ? '#10b981' : '#e5e7eb',
|
||||
color: hasUnsavedChanges ? 'white' : '#9ca3af',
|
||||
border: 'none',
|
||||
borderRadius: '0.5rem',
|
||||
cursor: hasUnsavedChanges && !saving ? 'pointer' : 'not-allowed',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '0.875rem',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
{saving ? savingLabel : hasUnsavedChanges ? saveChangesLabel : savedLabel}
|
||||
</button>
|
||||
</div>
|
||||
<WaveformEditor
|
||||
audioUrl={`/uploads/${selectedSpecialSong.song.filename}`}
|
||||
startTime={pendingStartTime ?? selectedSpecialSong.startTime}
|
||||
duration={totalDuration}
|
||||
unlockSteps={unlockSteps}
|
||||
onStartTimeChange={handleStartTimeChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user