diff --git a/scripts/Actions/Serialization.ts b/scripts/Actions/Serialization.ts index 192093c6..6e010685 100644 --- a/scripts/Actions/Serialization.ts +++ b/scripts/Actions/Serialization.ts @@ -1,4 +1,5 @@ import AnimeNotifier from "../AnimeNotifier" +import { applyTheme } from "./Theme" // Save new data from an input field export async function save(arn: AnimeNotifier, input: HTMLElement) { @@ -38,8 +39,8 @@ export async function save(arn: AnimeNotifier, input: HTMLElement) { // Update nickname based links on the page return arn.reloadPage() } else if(apiEndpoint.startsWith("/api/settings/") && input.dataset.field === "Theme") { - // Reload for the theme to take effect - location.reload() + // Apply theme instantly + applyTheme((input as HTMLInputElement).value) } else { return arn.reloadContent() } diff --git a/scripts/Actions/Theme.ts b/scripts/Actions/Theme.ts index 4f1efac4..2c1c7741 100644 --- a/scripts/Actions/Theme.ts +++ b/scripts/Actions/Theme.ts @@ -105,26 +105,34 @@ export function nextTheme(arn: AnimeNotifier) { for(let i = 0; i < themesSorted.length; i++) { if(themesSorted[i] === currentThemeName) { let newIndex = (i + 1) % themesSorted.length - applyTheme(themesSorted[newIndex]) + applyThemeAndPreview(arn, themesSorted[newIndex]) break } } +} + +// Apply theme and check for PRO accounts +export function applyThemeAndPreview(arn: AnimeNotifier, themeName: string) { + applyTheme(themeName) // Clear preview timeout clearTimeout(previewTimeoutID) - // Show preview message - if(currentThemeName !== "light" && (!arn.user || arn.user.dataset.pro !== "true")) { - arn.statusMessage.showInfo(`Previewing "${currentThemeName}" theme for 30 seconds. If you would like to use it permanently, please support us.`, 5000) - - // After 30 seconds, switch back to default theme if the user doesn't own a PRO account - previewTimeoutID = setTimeout(() => { - if(currentThemeName !== "light") { - applyTheme("light") - arn.statusMessage.showInfo("Theme preview time has ended. If you would like to use it permanently, please support us.", 5000) - } - }, 30000) + // If it's the free light theme or a PRO user, nothing to do here + if(currentThemeName === "light" || (arn.user && arn.user.dataset.pro == "true")) { + return } + + // Show preview message + arn.statusMessage.showInfo(`Previewing "${currentThemeName}" theme for 30 seconds. If you would like to use it permanently, please support us.`, 5000) + + // After 30 seconds, switch back to default theme if the user doesn't own a PRO account + previewTimeoutID = setTimeout(() => { + if(currentThemeName !== "light") { + applyTheme("light") + arn.statusMessage.showInfo("Theme preview time has ended. If you would like to use it permanently, please support us.", 5000) + } + }, 30000) } // Apply theme