diff --git a/website/src/repl/components/panel/ImportPrebakeScriptButton.jsx b/website/src/repl/components/panel/ImportPrebakeScriptButton.jsx index c997f6b6e..64ce198be 100644 --- a/website/src/repl/components/panel/ImportPrebakeScriptButton.jsx +++ b/website/src/repl/components/panel/ImportPrebakeScriptButton.jsx @@ -1,6 +1,7 @@ import { errorLogger } from '@strudel/core'; import { useSettings, storePrebakeScript } from '../../../settings.mjs'; import { SpecialActionInput } from '../button/action-button'; +import { confirmDialog, SETTING_CHANGE_RELOAD_MSG } from '@src/repl/util.mjs'; async function importScript(script) { const reader = new FileReader(); @@ -23,7 +24,19 @@ export function ImportPrebakeScriptButton() { type="file" label="import prebake script" accept=".strudel" - onChange={(e) => importScript(e.target.files[0])} + onChange={async (e) => { + const file = e.target.files[0]; + const confirmed = await confirmDialog(SETTING_CHANGE_RELOAD_MSG); + if (!confirmed) { + return; + } + try { + await importScript(file); + window.location.reload(); + } catch (e) { + errorLogger(e); + } + }} /> ); } diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx index f46fa661c..7f488c544 100644 --- a/website/src/repl/components/panel/SettingsTab.jsx +++ b/website/src/repl/components/panel/SettingsTab.jsx @@ -1,13 +1,13 @@ import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs'; import { themes } from '@strudel/codemirror'; import { Textbox } from '../textbox/Textbox.jsx'; -import { isUdels } from '../../util.mjs'; +import { confirmAndReloadPage, isUdels } from '../../util.mjs'; import { ButtonGroup } from './Forms.jsx'; import { AudioDeviceSelector } from './AudioDeviceSelector.jsx'; import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx'; import { confirmDialog } from '../../util.mjs'; import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio'; -import { ActionButton, SpecialActionButton } from '../button/action-button.jsx'; +import { SpecialActionButton } from '../button/action-button.jsx'; import { ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx'; function Checkbox({ label, value, onChange, disabled = false }) { @@ -86,8 +86,6 @@ const fontFamilyOptions = { galactico: 'galactico', }; -const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?'; - export function SettingsTab({ started }) { const { theme, @@ -127,11 +125,8 @@ export function SettingsTab({ started }) { isDisabled={started} audioDeviceName={audioDeviceName} onChange={(audioDeviceName) => { - confirmDialog(RELOAD_MSG).then((r) => { - if (r == true) { - settingsMap.setKey('audioDeviceName', audioDeviceName); - return window.location.reload(); - } + confirmAndReloadPage(() => { + settingsMap.setKey('audioDeviceName', audioDeviceName); }); }} /> @@ -141,11 +136,8 @@ export function SettingsTab({ started }) { { - confirmDialog(RELOAD_MSG).then((r) => { - if (r == true) { - settingsMap.setKey('audioEngineTarget', target); - return window.location.reload(); - } + confirmAndReloadPage(() => { + settingsMap.setKey('audioEngineTarget', target); }); }} /> @@ -175,12 +167,9 @@ export function SettingsTab({ started }) { label="Multi Channel Orbits" onChange={(cbEvent) => { const val = cbEvent.target.checked; - confirmDialog(RELOAD_MSG).then((r) => { - if (r == true) { - settingsMap.setKey('multiChannelOrbits', val); - setMultiChannelOrbits(val); - return window.location.reload(); - } + confirmAndReloadPage(() => { + settingsMap.setKey('multiChannelOrbits', val); + setMultiChannelOrbits(val); }); }} value={multiChannelOrbits} @@ -297,11 +286,8 @@ export function SettingsTab({ started }) { label="Sync across Browser Tabs / Windows" onChange={(cbEvent) => { const newVal = cbEvent.target.checked; - confirmDialog(RELOAD_MSG).then((r) => { - if (r) { - settingsMap.setKey('isSyncEnabled', newVal); - window.location.reload(); - } + confirmAndReloadPage(() => { + settingsMap.setKey('isSyncEnabled', newVal); }); }} disabled={shouldAlwaysSync} diff --git a/website/src/repl/util.mjs b/website/src/repl/util.mjs index 4a7cb26a8..06dad2467 100644 --- a/website/src/repl/util.mjs +++ b/website/src/repl/util.mjs @@ -1,4 +1,4 @@ -import { code2hash, evalScope, hash2code, logger } from '@strudel/core'; +import { code2hash, errorLogger, evalScope, hash2code, logger } from '@strudel/core'; import { settingPatterns } from '../settings.mjs'; import { setVersionDefaults } from '@strudel/webaudio'; import { getMetadata } from '../metadata_parser'; @@ -107,7 +107,19 @@ export function confirmDialog(msg) { resolve(confirmed); }); } - +export const SETTING_CHANGE_RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?'; +export function confirmAndReloadPage(onSuccess) { + confirmDialog(SETTING_CHANGE_RELOAD_MSG).then((r) => { + if (r == true) { + try { + onSuccess(); + return window.location.reload(); + } catch (e) { + errorLogger(e); + } + } + }); +} //RIP due to SPAM // let lastShared; // export async function shareCode(codeToShare) {