fix: stabilize auto-save by using ref for currentTime
The handleSaveProject callback had currentTime in its dependencies, which caused the callback to be recreated on every playback frame update. This made the auto-save effect reset its timer constantly, preventing auto-save from ever triggering. Solution: Use a ref to capture the latest currentTime value without including it in the callback dependencies. This keeps the callback stable while still saving the correct currentTime. Added debug logging to track auto-save scheduling and triggering. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -881,6 +881,12 @@ export function AudioEditor() {
|
|||||||
}, [loadProjectsList]);
|
}, [loadProjectsList]);
|
||||||
|
|
||||||
// Save current project
|
// Save current project
|
||||||
|
// Use ref to capture latest currentTime without triggering callback recreation
|
||||||
|
const currentTimeRef = React.useRef(currentTime);
|
||||||
|
React.useEffect(() => {
|
||||||
|
currentTimeRef.current = currentTime;
|
||||||
|
}, [currentTime]);
|
||||||
|
|
||||||
const handleSaveProject = React.useCallback(async () => {
|
const handleSaveProject = React.useCallback(async () => {
|
||||||
if (tracks.length === 0) return;
|
if (tracks.length === 0) return;
|
||||||
|
|
||||||
@@ -904,7 +910,7 @@ export function AudioEditor() {
|
|||||||
tracks,
|
tracks,
|
||||||
{
|
{
|
||||||
zoom,
|
zoom,
|
||||||
currentTime,
|
currentTime: currentTimeRef.current, // Use ref value
|
||||||
sampleRate: audioContext.sampleRate,
|
sampleRate: audioContext.sampleRate,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -929,17 +935,26 @@ export function AudioEditor() {
|
|||||||
duration: 3000,
|
duration: 3000,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [tracks, currentProjectId, currentProjectName, zoom, currentTime, addToast]);
|
}, [tracks, currentProjectId, currentProjectName, zoom, addToast]); // Removed currentTime from deps
|
||||||
|
|
||||||
// Auto-save effect (saves on track or name changes after 3 seconds of no changes)
|
// Auto-save effect (saves on track or name changes after 3 seconds of no changes)
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (tracks.length === 0) return;
|
if (tracks.length === 0) return;
|
||||||
|
|
||||||
|
console.log('[Auto-save] Scheduling auto-save in 3 seconds...', {
|
||||||
|
trackCount: tracks.length,
|
||||||
|
projectName: currentProjectName,
|
||||||
|
});
|
||||||
|
|
||||||
const autoSaveTimer = setTimeout(() => {
|
const autoSaveTimer = setTimeout(() => {
|
||||||
|
console.log('[Auto-save] Triggering auto-save now');
|
||||||
handleSaveProject();
|
handleSaveProject();
|
||||||
}, 3000); // Auto-save after 3 seconds of no changes
|
}, 3000); // Auto-save after 3 seconds of no changes
|
||||||
|
|
||||||
return () => clearTimeout(autoSaveTimer);
|
return () => {
|
||||||
|
console.log('[Auto-save] Clearing auto-save timer');
|
||||||
|
clearTimeout(autoSaveTimer);
|
||||||
|
};
|
||||||
}, [tracks, currentProjectName, handleSaveProject]);
|
}, [tracks, currentProjectName, handleSaveProject]);
|
||||||
|
|
||||||
// Create new project
|
// Create new project
|
||||||
|
|||||||
Reference in New Issue
Block a user