Bump version to 0.1.6.21

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

@@ -17,22 +17,27 @@ export default function SpecialEditorPage() {
     const [special, setSpecial] = useState<CurateSpecial | null>(null);
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        const fetchSpecial = async () => {
-            try {
-                const res = await fetch(`/api/specials/${specialId}`);
-                if (res.ok) {
-                    const data = await res.json();
-                    setSpecial(data);
-                }
-            } catch (error) {
-                console.error('Error fetching special:', error);
-            } finally {
+    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();
+                setSpecial(data);
+            }
+        } 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/curator/specials/[id]/page.tsx

@@ -25,32 +25,36 @@ export default function CuratorSpecialEditorPage() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    useEffect(() => {
-        const fetchSpecial = async () => {
-            try {
+    const fetchSpecial = async (showLoading = true) => {
+        try {
+            if (showLoading) {
                 setLoading(true);
-                const res = await fetch(`/api/curator/specials/${specialId}`, {
-                    headers: getCuratorAuthHeaders(),
-                });
-                if (res.status === 403) {
-                    setError(t('specialForbidden'));
-                    return;
-                }
-                if (!res.ok) {
-                    setError('Failed to load special');
-                    return;
-                }
-                const data = await res.json();
-                setSpecial(data);
-            } catch (e) {
+            }
+            const res = await fetch(`/api/curator/specials/${specialId}`, {
+                headers: getCuratorAuthHeaders(),
+            });
+            if (res.status === 403) {
+                setError(t('specialForbidden'));
+                return;
+            }
+            if (!res.ok) {
                 setError('Failed to load special');
-            } finally {
+                return;
+            }
+            const data = await res.json();
+            setSpecial(data);
+        } 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/CurateSpecialEditor.tsx

@@ -98,19 +98,6 @@ export default function CurateSpecialEditor({
     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>

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,30 +307,79 @@ 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 {
-            const source = audioContextRef.current.createBufferSource();
-            source.buffer = audioBuffer;
-            source.connect(audioContextRef.current.destination);
-
-            playbackStartTimeRef.current = audioContextRef.current.currentTime;
-            playbackOffsetRef.current = startTime;
-
-            source.start(0, startTime, duration);
-            sourceRef.current = source;
-            setIsPlaying(true);
-            setPlaybackPosition(startTime);
-
-            source.onended = () => {
-                setIsPlaying(false);
-                setPlaybackPosition(null);
-                if (animationFrameRef.current) {
-                    cancelAnimationFrame(animationFrameRef.current);
-                    animationFrameRef.current = null;
-                }
-            };
+            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);
+
+        playbackStartTimeRef.current = audioContextRef.current.currentTime;
+        playbackOffsetRef.current = startTime;
+
+        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' }}>

package.json

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