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

Add 'Play Full Title' button to waveform editor

Browse Source
This commit is contained in:
Hördle Bot
2025-12-05 21:57:34 +01:00
parent fa6f1097dd
commit fa3b64f490
1 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/WaveformEditor.tsx
View File

@@ -16,6 +16,7 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
const [audioDuration, setAudioDuration] = useState(0); const [audioDuration, setAudioDuration] = useState(0);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [playingSegment, setPlayingSegment] = useState<number | null>(null); const [playingSegment, setPlayingSegment] = useState<number | null>(null);
const [isPlayingFullTitle, setIsPlayingFullTitle] = useState(false);
const [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in const [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in
const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
@@ -237,6 +238,7 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
sourceRef.current?.stop(); sourceRef.current?.stop();
setIsPlaying(false); setIsPlaying(false);
setPlayingSegment(null); setPlayingSegment(null);
setIsPlayingFullTitle(false);
setPlaybackPosition(null); setPlaybackPosition(null);
if (animationFrameRef.current) { if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current); cancelAnimationFrame(animationFrameRef.current);
@@ -305,16 +307,16 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
const handlePlayFull = () => { const handlePlayFull = () => {
if (!audioBuffer || !audioContextRef.current) return; if (!audioBuffer || !audioContextRef.current) return;
// If full playback is already playing, stop it // If full selection playback is already playing, stop it
if (isPlaying && playingSegment === null) { if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
stopPlayback(); stopPlayback();
return; return;
} }
// Stop any current playback (segment or full) // Stop any current playback (segment, full selection, or full title)
stopPlayback(); stopPlayback();
// Start full playback // Start full selection 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);
@@ -325,12 +327,53 @@ 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 setPlayingSegment(null);
setIsPlayingFullTitle(false);
setPlaybackPosition(startTime); setPlaybackPosition(startTime);
source.onended = () => { source.onended = () => {
setIsPlaying(false); setIsPlaying(false);
setPlayingSegment(null); 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); setPlaybackPosition(null);
if (animationFrameRef.current) { if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current); cancelAnimationFrame(animationFrameRef.current);
@@ -427,7 +470,21 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
fontWeight: 'bold' 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> </button>
<div style={{ fontSize: '0.875rem', color: '#666' }}> <div style={{ fontSize: '0.875rem', color: '#666' }}>