elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix waveform editor: show end marker for last segment and fix play full section stop functionality

Browse Source
This commit is contained in:
Hördle Bot
2025-12-05 21:47:57 +01:00
parent 8914c552cd
commit d2ec0119ce
1 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/WaveformEditor.tsx
View File

@@ -133,6 +133,24 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
cumulativeTime = step; 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([]); ctx.setLineDash([]);
// Draw hover preview (semi-transparent) // Draw hover preview (semi-transparent)
@@ -287,9 +305,16 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
const handlePlayFull = () => { const handlePlayFull = () => {
if (!audioBuffer || !audioContextRef.current) return; if (!audioBuffer || !audioContextRef.current) return;
if (isPlaying) { // If full playback is already playing, stop it
if (isPlaying && playingSegment === null) {
stopPlayback(); stopPlayback();
} else { return;
}
// Stop any current playback (segment or full)
stopPlayback();
// Start full playback
const source = audioContextRef.current.createBufferSource(); const source = audioContextRef.current.createBufferSource();
source.buffer = audioBuffer; source.buffer = audioBuffer;
source.connect(audioContextRef.current.destination); source.connect(audioContextRef.current.destination);
@@ -300,17 +325,18 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
source.start(0, startTime, duration); source.start(0, startTime, duration);
sourceRef.current = source; sourceRef.current = source;
setIsPlaying(true); setIsPlaying(true);
setPlayingSegment(null); // Ensure playingSegment is null for full playback
setPlaybackPosition(startTime); setPlaybackPosition(startTime);
source.onended = () => { source.onended = () => {
setIsPlaying(false); setIsPlaying(false);
setPlayingSegment(null);
setPlaybackPosition(null); setPlaybackPosition(null);
if (animationFrameRef.current) { if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current); cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = null; animationFrameRef.current = null;
} }
}; };
}
}; };
const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10)); const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10));