Bump version to 0.1.6.20

app/[locale]/admin/page.tsx

@@ -115,6 +115,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
     const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
     const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
+    const [newSpecialUnlockStepsError, setNewSpecialUnlockStepsError] = useState<string | null>(null);
     const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
     const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
     const [newSpecialCurator, setNewSpecialCurator] = useState('');
@@ -124,6 +125,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
     const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
     const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
+    const [editSpecialUnlockStepsError, setEditSpecialUnlockStepsError] = useState<string | null>(null);
     const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
     const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
     const [editSpecialCurator, setEditSpecialCurator] = useState('');
@@ -239,6 +241,25 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         }
     };
 
+    // Validate JSON for unlock steps
+    const validateUnlockSteps = (value: string): string | null => {
+        if (!value.trim()) {
+            return t('unlockStepsRequired');
+        }
+        try {
+            const parsed = JSON.parse(value);
+            if (!Array.isArray(parsed)) {
+                return t('unlockStepsMustBeArray');
+            }
+            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
+                return t('unlockStepsMustBePositiveNumbers');
+            }
+            return null;
+        } catch (e) {
+            return t('unlockStepsInvalidJson');
+        }
+    };
+
     const handleLogout = () => {
         localStorage.removeItem('hoerdle_admin_auth');
         setIsAuthenticated(false);
@@ -352,6 +373,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const handleCreateSpecial = async (e: React.FormEvent) => {
         e.preventDefault();
         if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;
+        
+        // Validate unlock steps
+        const unlockStepsError = validateUnlockSteps(newSpecialUnlockSteps);
+        if (unlockStepsError) {
+            setNewSpecialUnlockStepsError(unlockStepsError);
+            return;
+        }
+        setNewSpecialUnlockStepsError(null);
+        
         const res = await fetch('/api/specials', {
             method: 'POST',
             headers: getAuthHeaders(),
@@ -370,12 +400,14 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
             setNewSpecialSubtitle({ de: '', en: '' });
             setNewSpecialMaxAttempts(7);
             setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
+            setNewSpecialUnlockStepsError(null);
             setNewSpecialLaunchDate('');
             setNewSpecialEndDate('');
             setNewSpecialCurator('');
             fetchSpecials();
         } else {
-            alert('Failed to create special');
+            const errorData = await res.json().catch(() => ({}));
+            alert(errorData.error || 'Failed to create special');
         }
     };
 
@@ -455,6 +487,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
         setEditSpecialMaxAttempts(special.maxAttempts);
         setEditSpecialUnlockSteps(special.unlockSteps);
+        setEditSpecialUnlockStepsError(null);
         setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
         setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
         setEditSpecialCurator(special.curator || '');
@@ -462,6 +495,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
 
     const saveEditedSpecial = async () => {
         if (editingSpecialId === null) return;
+        
+        // Validate unlock steps
+        const unlockStepsError = validateUnlockSteps(editSpecialUnlockSteps);
+        if (unlockStepsError) {
+            setEditSpecialUnlockStepsError(unlockStepsError);
+            return;
+        }
+        setEditSpecialUnlockStepsError(null);
+        
         const res = await fetch('/api/specials', {
             method: 'PUT',
             headers: getAuthHeaders(),
@@ -478,9 +520,11 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         });
         if (res.ok) {
             setEditingSpecialId(null);
+            setEditSpecialUnlockStepsError(null);
             fetchSpecials();
         } else {
-            alert('Failed to update special');
+            const errorData = await res.json().catch(() => ({}));
+            alert(errorData.error || 'Failed to update special');
         }
     };
 
@@ -1300,8 +1344,38 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                             <input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
                         </div>
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
-                            <input type="text" placeholder={t('unlockSteps')} value={newSpecialUnlockSteps} onChange={e => setNewSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
+                            <label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                                {t('unlockSteps')}
+                                {newSpecialUnlockStepsError && (
+                                    <span 
+                                        title={newSpecialUnlockStepsError}
+                                        style={{ 
+                                            color: '#ef4444', 
+                                            cursor: 'help',
+                                            fontSize: '0.875rem'
+                                        }}
+                                    >
+                                        ⚠️
+                                    </span>
+                                )}
+                            </label>
+                            <input 
+                                type="text" 
+                                placeholder={t('unlockSteps')} 
+                                value={newSpecialUnlockSteps} 
+                                onChange={e => {
+                                    const value = e.target.value;
+                                    setNewSpecialUnlockSteps(value);
+                                    const error = validateUnlockSteps(value);
+                                    setNewSpecialUnlockStepsError(error);
+                                }} 
+                                className="form-input" 
+                                title={newSpecialUnlockStepsError || undefined}
+                                style={{ 
+                                    width: '200px',
+                                    borderColor: newSpecialUnlockStepsError ? '#ef4444' : undefined
+                                }} 
+                            />
                         </div>
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
                             <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1315,7 +1389,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                             <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                             <input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
                         </div>
-                        <button type="submit" className="btn-primary" style={{ height: '38px' }}>{t('addSpecial')}</button>
+                        <button 
+                            type="submit" 
+                            className="btn-primary" 
+                            style={{ 
+                                height: '38px',
+                                opacity: newSpecialUnlockStepsError ? 0.5 : 1,
+                                cursor: newSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
+                            }}
+                            disabled={!!newSpecialUnlockStepsError}
+                        >
+                            {t('addSpecial')}
+                        </button>
                     </div>
                 </form>
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
@@ -1379,8 +1464,37 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                                 <input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
                             </div>
                             <div style={{ display: 'flex', flexDirection: 'column' }}>
-                                <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
-                                <input type="text" value={editSpecialUnlockSteps} onChange={e => setEditSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
+                                <label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                                    {t('unlockSteps')}
+                                    {editSpecialUnlockStepsError && (
+                                        <span 
+                                            title={editSpecialUnlockStepsError}
+                                            style={{ 
+                                                color: '#ef4444', 
+                                                cursor: 'help',
+                                                fontSize: '0.875rem'
+                                            }}
+                                        >
+                                            ⚠️
+                                        </span>
+                                    )}
+                                </label>
+                                <input 
+                                    type="text" 
+                                    value={editSpecialUnlockSteps} 
+                                    onChange={e => {
+                                        const value = e.target.value;
+                                        setEditSpecialUnlockSteps(value);
+                                        const error = validateUnlockSteps(value);
+                                        setEditSpecialUnlockStepsError(error);
+                                    }} 
+                                    className="form-input" 
+                                    title={editSpecialUnlockStepsError || undefined}
+                                    style={{ 
+                                        width: '200px',
+                                        borderColor: editSpecialUnlockStepsError ? '#ef4444' : undefined
+                                    }} 
+                                />
                             </div>
                             <div style={{ display: 'flex', flexDirection: 'column' }}>
                                 <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1394,7 +1508,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                                 <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                                 <input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
                             </div>
-                            <button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>{t('save')}</button>
+                            <button 
+                                onClick={saveEditedSpecial} 
+                                className="btn-primary" 
+                                style={{ 
+                                    height: '38px',
+                                    opacity: editSpecialUnlockStepsError ? 0.5 : 1,
+                                    cursor: editSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
+                                }}
+                                disabled={!!editSpecialUnlockStepsError}
+                            >
+                                {t('save')}
+                            </button>
                             <button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
                         </div>
                     </div>

app/admin/specials/[id]/page.tsx

@@ -17,9 +17,11 @@ export default function SpecialEditorPage() {
     const [special, setSpecial] = useState<CurateSpecial | null>(null);
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        const fetchSpecial = async () => {
+    const fetchSpecial = async (showLoading = true) => {
         try {
+            if (showLoading) {
+                setLoading(true);
+            }
             const res = await fetch(`/api/specials/${specialId}`);
             if (res.ok) {
                 const data = await res.json();
@@ -28,11 +30,14 @@ export default function SpecialEditorPage() {
         } catch (error) {
             console.error('Error fetching special:', error);
         } finally {
+            if (showLoading) {
                 setLoading(false);
             }
+        }
     };
 
-        fetchSpecial();
+    useEffect(() => {
+        fetchSpecial(true);
     }, [specialId]);
 
     const handleSaveStartTime = async (songId: number, startTime: number) => {
@@ -46,6 +51,9 @@ export default function SpecialEditorPage() {
             const errorText = await res.text().catch(() => res.statusText || 'Unknown error');
             console.error('Error updating special song (admin):', res.status, errorText);
             throw new Error(`Failed to save start time: ${errorText}`);
+        } else {
+            // Reload special data to update the start time in the song list
+            await fetchSpecial(false);
         }
     };
 

app/api/specials/route.ts

@@ -40,6 +40,21 @@ export async function POST(request: Request) {
         return NextResponse.json({ error: 'Name is required' }, { status: 400 });
     }
 
+    // Validate unlockSteps JSON
+    if (unlockSteps) {
+        try {
+            const parsed = JSON.parse(unlockSteps);
+            if (!Array.isArray(parsed)) {
+                return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
+            }
+            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
+                return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
+            }
+        } catch (e) {
+            return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
+        }
+    }
+
     // Ensure name is stored as JSON
     const nameData = typeof name === 'string' ? { de: name, en: name } : name;
     const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
@@ -81,6 +96,21 @@ export async function PUT(request: Request) {
         return NextResponse.json({ error: 'ID required' }, { status: 400 });
     }
 
+    // Validate unlockSteps JSON if provided
+    if (unlockSteps !== undefined) {
+        try {
+            const parsed = JSON.parse(unlockSteps);
+            if (!Array.isArray(parsed)) {
+                return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
+            }
+            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
+                return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
+            }
+        } catch (e) {
+            return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
+        }
+    }
+
     const updateData: any = {};
     if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
     if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;

app/curator/specials/[id]/page.tsx

@@ -25,10 +25,11 @@ export default function CuratorSpecialEditorPage() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    useEffect(() => {
-        const fetchSpecial = async () => {
+    const fetchSpecial = async (showLoading = true) => {
         try {
+            if (showLoading) {
                 setLoading(true);
+            }
             const res = await fetch(`/api/curator/specials/${specialId}`, {
                 headers: getCuratorAuthHeaders(),
             });
@@ -45,12 +46,15 @@ export default function CuratorSpecialEditorPage() {
         } catch (e) {
             setError('Failed to load special');
         } finally {
+            if (showLoading) {
                 setLoading(false);
             }
+        }
     };
 
+    useEffect(() => {
         if (specialId) {
-            fetchSpecial();
+            fetchSpecial(true);
         }
     }, [specialId, t]);
 
@@ -67,6 +71,9 @@ export default function CuratorSpecialEditorPage() {
             setError(t('specialForbidden'));
         } else if (!res.ok) {
             setError('Failed to save changes');
+        } else {
+            // Reload special data to update the start time in the song list
+            await fetchSpecial(false);
         }
     };
 

components/WaveformEditor.tsx

@@ -16,6 +16,7 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
     const [audioDuration, setAudioDuration] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
     const [playingSegment, setPlayingSegment] = useState<number | null>(null);
+    const [isPlayingFullTitle, setIsPlayingFullTitle] = useState(false);
     const [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in
     const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
     const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
@@ -133,6 +134,24 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
 
             cumulativeTime = step;
         });
+        
+        // Draw end marker for the last segment (at startTime + duration)
+        const endTime = startTime + duration;
+        const endPx = ((endTime - visibleStart) / visibleDuration) * width;
+        if (endPx >= 0 && endPx <= width) {
+            ctx.beginPath();
+            ctx.moveTo(endPx, 0);
+            ctx.lineTo(endPx, height);
+            ctx.stroke();
+            
+            // Draw "End" label
+            ctx.setLineDash([]);
+            ctx.fillStyle = '#ef4444';
+            ctx.font = 'bold 12px sans-serif';
+            ctx.fillText('End', endPx + 3, 15);
+            ctx.setLineDash([5, 5]);
+        }
+        
         ctx.setLineDash([]);
 
         // Draw hover preview (semi-transparent)
@@ -219,6 +238,7 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
         sourceRef.current?.stop();
         setIsPlaying(false);
         setPlayingSegment(null);
+        setIsPlayingFullTitle(false);
         setPlaybackPosition(null);
         if (animationFrameRef.current) {
             cancelAnimationFrame(animationFrameRef.current);
@@ -287,9 +307,16 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
     const handlePlayFull = () => {
         if (!audioBuffer || !audioContextRef.current) return;
 
-        if (isPlaying) {
+        // If full selection playback is already playing, stop it
+        if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
             stopPlayback();
-        } else {
+            return;
+        }
+
+        // Stop any current playback (segment, full selection, or full title)
+        stopPlayback();
+
+        // Start full selection playback
         const source = audioContextRef.current.createBufferSource();
         source.buffer = audioBuffer;
         source.connect(audioContextRef.current.destination);
@@ -300,17 +327,59 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
         source.start(0, startTime, duration);
         sourceRef.current = source;
         setIsPlaying(true);
+        setPlayingSegment(null);
+        setIsPlayingFullTitle(false);
         setPlaybackPosition(startTime);
 
         source.onended = () => {
             setIsPlaying(false);
+            setPlayingSegment(null);
+            setIsPlayingFullTitle(false);
             setPlaybackPosition(null);
             if (animationFrameRef.current) {
                 cancelAnimationFrame(animationFrameRef.current);
                 animationFrameRef.current = null;
             }
         };
+    };
+
+    const handlePlayFullTitle = () => {
+        if (!audioBuffer || !audioContextRef.current) return;
+
+        // If full title playback is already playing, stop it
+        if (isPlaying && isPlayingFullTitle) {
+            stopPlayback();
+            return;
         }
+
+        // Stop any current playback (segment, full selection, or full title)
+        stopPlayback();
+
+        // Start full title playback (from 0 to audioDuration)
+        const source = audioContextRef.current.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(audioContextRef.current.destination);
+
+        playbackStartTimeRef.current = audioContextRef.current.currentTime;
+        playbackOffsetRef.current = 0;
+
+        source.start(0, 0, audioDuration);
+        sourceRef.current = source;
+        setIsPlaying(true);
+        setPlayingSegment(null);
+        setIsPlayingFullTitle(true);
+        setPlaybackPosition(0);
+
+        source.onended = () => {
+            setIsPlaying(false);
+            setPlayingSegment(null);
+            setIsPlayingFullTitle(false);
+            setPlaybackPosition(null);
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
     };
 
     const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10));
@@ -401,7 +470,21 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
                         fontWeight: 'bold'
                     }}
                 >
-                    {isPlaying && playingSegment === null ? '⏸ Pause' : '▶ Play Full Selection'}
+                    {isPlaying && playingSegment === null && !isPlayingFullTitle ? '⏸ Pause' : '▶ Play Full Selection'}
+                </button>
+                <button
+                    onClick={handlePlayFullTitle}
+                    style={{
+                        padding: '0.5rem 1rem',
+                        background: '#10b981',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '0.5rem',
+                        cursor: 'pointer',
+                        fontWeight: 'bold'
+                    }}
+                >
+                    {isPlaying && isPlayingFullTitle ? '⏸ Pause' : '▶ Play Full Title'}
                 </button>
 
                 <div style={{ fontSize: '0.875rem', color: '#666' }}>

messages/de.json

@@ -149,6 +149,10 @@
     "subtitle": "Untertitel",
     "maxAttempts": "Max. Versuche",
     "unlockSteps": "Freischalt-Schritte",
+    "unlockStepsRequired": "Freischalt-Schritte sind erforderlich",
+    "unlockStepsInvalidJson": "Ungültiges JSON-Format. Bitte verwende ein Array von Zahlen, z.B. [2,4,7,11,16,30,60]",
+    "unlockStepsMustBeArray": "Freischalt-Schritte müssen ein Array sein",
+    "unlockStepsMustBePositiveNumbers": "Alle Werte müssen positive Zahlen sein",
     "launchDate": "Startdatum",
     "endDate": "Enddatum",
     "curator": "Kurator",

messages/en.json

@@ -149,6 +149,10 @@
     "subtitle": "Subtitle",
     "maxAttempts": "Max Attempts",
     "unlockSteps": "Unlock Steps",
+    "unlockStepsRequired": "Unlock steps are required",
+    "unlockStepsInvalidJson": "Invalid JSON format. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]",
+    "unlockStepsMustBeArray": "Unlock steps must be an array",
+    "unlockStepsMustBePositiveNumbers": "All values must be positive numbers",
     "launchDate": "Launch Date",
     "endDate": "End Date",
     "curator": "Curator",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoerdle",
-  "version": "0.1.6.16",
+  "version": "0.1.6.20",
   "private": true,
   "scripts": {
     "dev": "next dev",