Bump version to 0.1.6.20

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' }}>

package.json

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