diff --git a/src/App.svelte b/src/App.svelte index 5cf55be..0325a48 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -89,11 +89,25 @@ let overlayDisabledDesign = 'transparent'; let overlayError = ''; let overlayBusy = false; + let overlaySavedSignature = ''; + let overlayAutosaveAttemptedSignature = ''; + let overlayAutosaveTimer: number | undefined; let oauthScopes: Record<'streamer' | 'bot', { connected: boolean; missing_scopes: string[]; reauthorization_required: boolean }> = { streamer: { connected: false, missing_scopes: [], reauthorization_required: false }, bot: { connected: false, missing_scopes: [], reauthorization_required: false }, }; + $: if (authenticated && selectedOverlayId && overlayName && !overlayBusy) { + const signature = overlayDraftSignature(); + if (signature !== overlaySavedSignature && signature !== overlayAutosaveAttemptedSignature && !overlayAutosaveTimer) { + overlayAutosaveAttemptedSignature = signature; + overlayAutosaveTimer = window.setTimeout(() => { + overlayAutosaveTimer = undefined; + void saveOverlay(); + }, 1000); + } + } + async function checkServer() { connectionState = 'CONNECTING'; const retryDelays = [0, 3000, 10000, 15000, 30000]; @@ -696,9 +710,19 @@ overlayJavascript = overlay.draft_javascript; overlayEnabled = overlay.enabled; overlayDisabledDesign = overlay.disabled_design; + overlaySavedSignature = overlayDraftSignature(); + overlayAutosaveAttemptedSignature = overlaySavedSignature; + } + + function overlayDraftSignature() { + return JSON.stringify({ overlayName, overlaySlug, overlayHtml, overlayCss, overlayJavascript, overlayEnabled, overlayDisabledDesign }); } async function createOverlay() { + if (overlayAutosaveTimer) window.clearTimeout(overlayAutosaveTimer); + overlayAutosaveTimer = undefined; + overlaySavedSignature = ''; + overlayAutosaveAttemptedSignature = ''; selectedOverlayId = ''; overlayName = 'New Overlay'; overlaySlug = `overlay-${Date.now()}`;