diff --git a/frontend/src/styles/notifications.scss b/frontend/src/styles/notifications.scss index be4a81040..b9fb36697 100644 --- a/frontend/src/styles/notifications.scss +++ b/frontend/src/styles/notifications.scss @@ -7,8 +7,11 @@ right: 1rem; top: 1rem; transition: 0.125s opacity; - &.focus { - opacity: 0; + &.focus .notif { + visibility: hidden; + } + &.focus .notif.important { + visibility: visible; } .history { display: grid; diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts index daf6bfc2b..1621eab3e 100644 --- a/frontend/src/ts/config.ts +++ b/frontend/src/ts/config.ts @@ -1212,17 +1212,16 @@ export function setFontFamily(font: string, nosave?: boolean): boolean { Notifications.add( "Empty input received, reverted to the default font.", 0, - 3, - "Custom font" + { + customTitle: "Custom font", + } ); } if (!isConfigKeyValid(font)) { - Notifications.add( - `Invalid font name value: "${font}".`, - -1, - 3, - "Custom font" - ); + Notifications.add(`Invalid font name value: "${font}".`, -1, { + customTitle: "Custom font", + duration: 3, + }); return false; } config.fontFamily = font; @@ -1361,7 +1360,9 @@ function setThemes( Notifications.add( "Missing sub alt color. Please edit it in the custom theme settings and save your changes.", 0, - 7 + { + duration: 7, + } ); } customThemeColors.splice(4, 0, "#000000"); @@ -1448,7 +1449,9 @@ export function setCustomThemeColors( Notifications.add( "Missing sub alt color. Please edit it in the custom theme settings and save your changes.", 0, - 7 + { + duration: 7, + } ); colors.splice(4, 0, "#000000"); } diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts index c4c312d87..fe4feab73 100644 --- a/frontend/src/ts/controllers/account-controller.ts +++ b/frontend/src/ts/controllers/account-controller.ts @@ -53,7 +53,9 @@ export const gmailProvider = new GoogleAuthProvider(); export async function sendVerificationEmail(): Promise { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } @@ -63,11 +65,11 @@ export async function sendVerificationEmail(): Promise { Loader.hide(); Notifications.add( "Failed to request verification email: " + result.message, - 3000 + -1 ); } else { Loader.hide(); - Notifications.add("Verification email sent", 1, 3); + Notifications.add("Verification email sent", 1); } } @@ -89,12 +91,16 @@ export async function getDataAndInit(): Promise { Notifications.add( "Doing so will save you bandwidth, make the next test be ready faster and will not sign you out (which could mean your new personal best would not save to your account).", 0, - 0 + { + duration: 0, + } ); Notifications.add( "You will run into this error if you refresh the website to restart the test. It is NOT recommended to do that. Instead, use tab + enter or just tab (with quick tab mode enabled) to restart the test.", 0, - 0 + { + duration: 0, + } ); } const msg = e.message || e; @@ -312,7 +318,9 @@ if (Auth && ConnectionState.get()) { Notifications.add( "Challenge links temporarily disabled. Please use the command line to load the challenge manually", 0, - 7 + { + duration: 7, + } ); return; // Notifications.add("Loading challenge", 0); @@ -344,7 +352,9 @@ if (Auth && ConnectionState.get()) { Notifications.add( "Challenge links temporarily disabled. Please use the command line to load the challenge manually", 0, - 7 + { + duration: 7, + } ); return; } @@ -353,11 +363,13 @@ if (Auth && ConnectionState.get()) { export async function signIn(): Promise { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1); return; } if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } @@ -408,11 +420,15 @@ export async function signIn(): Promise { export async function signInWithGoogle(): Promise { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } @@ -457,7 +473,9 @@ export async function signInWithGoogle(): Promise { export async function addGoogleAuth(): Promise { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } Loader.show(); @@ -482,7 +500,9 @@ export async function addPasswordAuth( password: string ): Promise { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } Loader.show(); @@ -518,13 +538,17 @@ export async function addPasswordAuth( export function signOut(): void { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } if (!Auth.currentUser) return; Auth.signOut() .then(function () { - Notifications.add("Signed out", 0, 2); + Notifications.add("Signed out", 0, { + duration: 2, + }); AllTimeStats.clear(); Settings.hideAccountSection(); AccountButton.update(); @@ -544,11 +568,15 @@ export function signOut(): void { async function signUp(): Promise { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } RegisterCaptchaPopup.show(); @@ -583,7 +611,7 @@ async function signUp(): Promise { /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ) ) { - Notifications.add("Invalid email", 0, 3); + Notifications.add("Invalid email", 0); LoginPage.hidePreloader(); LoginPage.enableInputs(); LoginPage.updateSignupButton(); @@ -591,7 +619,7 @@ async function signUp(): Promise { } if (email !== emailVerify) { - Notifications.add("Emails do not match", 0, 3); + Notifications.add("Emails do not match", 0); LoginPage.hidePreloader(); LoginPage.enableInputs(); LoginPage.updateSignupButton(); @@ -599,7 +627,7 @@ async function signUp(): Promise { } if (password !== passwordVerify) { - Notifications.add("Passwords do not match", 0, 3); + Notifications.add("Passwords do not match", 0); LoginPage.hidePreloader(); LoginPage.enableInputs(); LoginPage.updateSignupButton(); @@ -611,7 +639,9 @@ async function signUp(): Promise { Notifications.add( "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long", 0, - 4 + { + duration: 4, + } ); LoginPage.hidePreloader(); LoginPage.enableInputs(); @@ -663,7 +693,7 @@ async function signUp(): Promise { ); } } - Notifications.add("Account created", 1, 3); + Notifications.add("Account created", 1); } catch (e) { //make sure to do clean up here if (createdAuthUser) { @@ -713,7 +743,9 @@ $(".pageLogin .login .button.signInWithGoogle").on("click", () => { $("#top .signInOut").on("click", () => { if (Auth === undefined) { - Notifications.add("Authentication uninitialized", -1, 3); + Notifications.add("Authentication uninitialized", -1, { + duration: 3, + }); return; } if (Auth.currentUser) { @@ -738,7 +770,9 @@ $(".pageLogin .register .button").on("click", () => { $(".pageSettings #addGoogleAuth").on("click", async () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } addGoogleAuth(); @@ -746,7 +780,9 @@ $(".pageSettings #addGoogleAuth").on("click", async () => { $(".pageAccount").on("click", ".sendVerificationEmail", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } sendVerificationEmail(); diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts index fef304e21..ac2ca74b4 100644 --- a/frontend/src/ts/controllers/challenge-controller.ts +++ b/frontend/src/ts/controllers/challenge-controller.ts @@ -153,7 +153,9 @@ export function verify( Notifications.add( "You will receive a role shortly. Please don't post a screenshot in challenge submissions.", 1, - 5 + { + duration: 5, + } ); } Notifications.add( diff --git a/frontend/src/ts/controllers/preset-controller.ts b/frontend/src/ts/controllers/preset-controller.ts index ef7c5e8e2..3c8294d3c 100644 --- a/frontend/src/ts/controllers/preset-controller.ts +++ b/frontend/src/ts/controllers/preset-controller.ts @@ -19,7 +19,9 @@ export function apply(_id: string): void { TagController.saveActiveToLocalStorage(); } TestLogic.restart(); - Notifications.add("Preset applied", 1, 2); + Notifications.add("Preset applied", 1, { + duration: 2, + }); UpdateConfig.saveFullConfigToLocalStorage(); } }); diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts index 185100b47..783aedc89 100644 --- a/frontend/src/ts/elements/alerts.ts +++ b/frontend/src/ts/elements/alerts.ts @@ -98,9 +98,11 @@ export function hide(): void { badgesClaimed.length > 1 ? "s" : "" } unlocked: ${badgesClaimed.join(", ")}`, 1, - 5, - "Reward", - "gift" + { + duration: 5, + customTitle: "Reward", + customIcon: "gift", + } ); } if (totalXpClaimed > 0) { diff --git a/frontend/src/ts/elements/notifications.ts b/frontend/src/ts/elements/notifications.ts index 1d8e32a50..5e0e6fba4 100644 --- a/frontend/src/ts/elements/notifications.ts +++ b/frontend/src/ts/elements/notifications.ts @@ -19,6 +19,7 @@ class Notification { type: string; message: string; level: number; + important: boolean; duration: number; customTitle?: string; customIcon?: string; @@ -27,6 +28,7 @@ class Notification { type: string, message: string, level: number, + important: boolean, duration: number | undefined, customTitle?: string, customIcon?: string, @@ -38,6 +40,7 @@ class Notification { this.type = type; this.message = allowHTML ? message : Misc.escapeHTML(message); this.level = level; + this.important = important; if (type === "banner") { this.duration = duration as number; } else { @@ -75,6 +78,10 @@ class Notification { console.error(this.message); } + if (this.important) { + cls += " important"; + } + if (this.customTitle != undefined) { title = this.customTitle; } @@ -232,26 +239,32 @@ class Notification { } } +interface AddNotificationOptions { + important?: boolean; + duration?: number; + customTitle?: string; + customIcon?: string; + closeCallback?: () => void; + allowHTML?: boolean; +} + export function add( message: string, level = 0, - duration?: number, - customTitle?: string, - customIcon?: string, - closeCallback?: () => void, - allowHTML?: boolean + options: AddNotificationOptions = {} ): void { - NotificationEvent.dispatch(message, level, customTitle); + NotificationEvent.dispatch(message, level, options.customTitle); new Notification( "notification", message, level, - duration, - customTitle, - customIcon, - closeCallback, - allowHTML + false, + options.duration, + options.customTitle, + options.customIcon, + options.closeCallback, + options.allowHTML ).show(); } @@ -267,6 +280,7 @@ export function addBanner( "banner", message, level, + false, sticky ? -1 : 0, undefined, customIcon, diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index 553aa0080..4360c6315 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -1042,7 +1042,9 @@ export async function downloadResults(): Promise { if (DB.getSnapshot()?.results !== undefined) return; const results = await DB.getUserResults(); if (results === false && !ConnectionState.get()) { - Notifications.add("Could not get results - you are offline", -1, 5); + Notifications.add("Could not get results - you are offline", -1, { + duration: 5, + }); return; } TodayTracker.addAllFromToday(); diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index 2ebc5babc..e2f616978 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -1109,7 +1109,9 @@ $(".pageSettings .section.fontSize .inputAndButton .save").on("click", () => { ) ); if (didConfigSave) { - Notifications.add("Saved", 1, 1); + Notifications.add("Saved", 1, { + duration: 1, + }); } }); @@ -1123,7 +1125,9 @@ $(".pageSettings .section.fontSize .inputAndButton input").keypress((e) => { ) ); if (didConfigSave === true) { - Notifications.add("Saved", 1, 1); + Notifications.add("Saved", 1, { + duration: 1, + }); } } }); diff --git a/frontend/src/ts/popups/ape-keys-popup.ts b/frontend/src/ts/popups/ape-keys-popup.ts index 824470a27..5211f6a83 100644 --- a/frontend/src/ts/popups/ape-keys-popup.ts +++ b/frontend/src/ts/popups/ape-keys-popup.ts @@ -92,7 +92,9 @@ export function hide(): void { //show the popup export async function show(): Promise { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } Skeleton.append(wrapperId); diff --git a/frontend/src/ts/popups/custom-test-duration-popup.ts b/frontend/src/ts/popups/custom-test-duration-popup.ts index 7c5805e86..5d7978316 100644 --- a/frontend/src/ts/popups/custom-test-duration-popup.ts +++ b/frontend/src/ts/popups/custom-test-duration-popup.ts @@ -117,7 +117,9 @@ function apply(): void { Notifications.add( "Infinite time! Make sure to use Bail Out from the command line to save your result.", 0, - 7 + { + duration: 7, + } ); } } else { diff --git a/frontend/src/ts/popups/custom-text-popup.ts b/frontend/src/ts/popups/custom-text-popup.ts index b8e401072..a02d085f9 100644 --- a/frontend/src/ts/popups/custom-text-popup.ts +++ b/frontend/src/ts/popups/custom-text-popup.ts @@ -168,7 +168,9 @@ $(`${popup} textarea`).on("keypress", (e) => { CustomTextState.getCustomTextName() !== "" ) { CustomTextState.setCustomTextName("", undefined); - Notifications.add("Disabled long custom text progress tracking", 0, 5); + Notifications.add("Disabled long custom text progress tracking", 0, { + duration: 5, + }); updateLongTextWarning(); } }); @@ -239,7 +241,9 @@ function apply(): void { Notifications.add( "You need to specify word count or time in seconds to start a random custom test", 0, - 5 + { + duration: 5, + } ); return; } @@ -252,7 +256,9 @@ function apply(): void { Notifications.add( "You need to pick between word count or time in seconds to start a random custom test", 0, - 5 + { + duration: 5, + } ); return; } @@ -264,7 +270,9 @@ function apply(): void { Notifications.add( "Infinite words! Make sure to use Bail Out from the command line to save your result.", 0, - 7 + { + duration: 7, + } ); } diff --git a/frontend/src/ts/popups/custom-word-amount-popup.ts b/frontend/src/ts/popups/custom-word-amount-popup.ts index c32faf9ce..6e9a00b30 100644 --- a/frontend/src/ts/popups/custom-word-amount-popup.ts +++ b/frontend/src/ts/popups/custom-word-amount-popup.ts @@ -51,7 +51,9 @@ function apply(): void { Notifications.add( "Infinite words! Make sure to use Bail Out from the command line to save your result.", 0, - 7 + { + duration: 7, + } ); } } diff --git a/frontend/src/ts/popups/edit-preset-popup.ts b/frontend/src/ts/popups/edit-preset-popup.ts index d2347aeb4..865013b40 100644 --- a/frontend/src/ts/popups/edit-preset-popup.ts +++ b/frontend/src/ts/popups/edit-preset-popup.ts @@ -12,7 +12,9 @@ const wrapperId = "presetWrapper"; export function show(action: string, id?: string, name?: string): void { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } Skeleton.append(wrapperId); @@ -112,7 +114,9 @@ async function apply(): Promise { -1 ); } else { - Notifications.add("Preset added", 1, 2); + Notifications.add("Preset added", 1, { + duration: 2, + }); snapshotPresets.push({ name: presetName, config: configChanges, diff --git a/frontend/src/ts/popups/edit-profile-popup.ts b/frontend/src/ts/popups/edit-profile-popup.ts index 9b193c849..786e0ea93 100644 --- a/frontend/src/ts/popups/edit-profile-popup.ts +++ b/frontend/src/ts/popups/edit-profile-popup.ts @@ -13,7 +13,9 @@ let callbackFuncOnHide: (() => void) | null = null; export function show(callbackOnHide: () => void): void { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } Skeleton.append(wrapperId); diff --git a/frontend/src/ts/popups/edit-tags-popup.ts b/frontend/src/ts/popups/edit-tags-popup.ts index 49eddc202..fca73177d 100644 --- a/frontend/src/ts/popups/edit-tags-popup.ts +++ b/frontend/src/ts/popups/edit-tags-popup.ts @@ -11,7 +11,9 @@ const wrapperId = "tagsWrapper"; export function show(action: string, id?: string, name?: string): void { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } diff --git a/frontend/src/ts/popups/google-sign-up-popup.ts b/frontend/src/ts/popups/google-sign-up-popup.ts index e511d4de1..08fd7581c 100644 --- a/frontend/src/ts/popups/google-sign-up-popup.ts +++ b/frontend/src/ts/popups/google-sign-up-popup.ts @@ -48,7 +48,9 @@ export function show(credential: UserCredential): void { export async function hide(): Promise { if (isPopupVisible(wrapperId)) { if (signedInUser !== undefined) { - Notifications.add("Sign up process canceled", 0, 5); + Notifications.add("Sign up process canceled", 0, { + duration: 5, + }); LoginPage.hidePreloader(); LoginPage.enableInputs(); if (signedInUser && getAdditionalUserInfo(signedInUser)?.isNewUser) { @@ -105,7 +107,7 @@ async function apply(): Promise { await updateProfile(signedInUser.user, { displayName: name }); await sendEmailVerification(signedInUser.user); AllTimeStats.clear(); - Notifications.add("Account created", 1, 3); + Notifications.add("Account created", 1); $("#menu .textButton.account .text").text(name); LoginPage.enableInputs(); LoginPage.hidePreloader(); diff --git a/frontend/src/ts/popups/quote-submit-popup.ts b/frontend/src/ts/popups/quote-submit-popup.ts index caeae47e6..275daf051 100644 --- a/frontend/src/ts/popups/quote-submit-popup.ts +++ b/frontend/src/ts/popups/quote-submit-popup.ts @@ -65,7 +65,9 @@ export async function show(noAnim = false): Promise { Notifications.add( "Quote submission is disabled temporarily due to a large submission queue.", 0, - 5 + { + duration: 5, + } ); return; // Skeleton.append(wrapperId); diff --git a/frontend/src/ts/popups/result-tags-popup.ts b/frontend/src/ts/popups/result-tags-popup.ts index b626a43c1..7afe2590e 100644 --- a/frontend/src/ts/popups/result-tags-popup.ts +++ b/frontend/src/ts/popups/result-tags-popup.ts @@ -16,7 +16,9 @@ const state: Record = { function show(): void { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { + duration: 2, + }); return; } Skeleton.append(wrapperId); @@ -82,7 +84,9 @@ $(".pageAccount").on("click", ".group.history #resultEditTags", (f) => { Notifications.add( "You haven't created any tags. You can do it in the settings page", 0, - 4 + { + duration: 4, + } ); } }); @@ -147,7 +151,9 @@ $("#resultEditTagsPanelWrapper .confirmButton").on("click", async () => { const responseTagPbs = response.data.tagPbs; - Notifications.add("Tags updated", 1, 2); + Notifications.add("Tags updated", 1, { + duration: 2, + }); DB.getSnapshot()?.results?.forEach( (result: MonkeyTypes.Result) => { if (result._id === resultId) { diff --git a/frontend/src/ts/popups/simple-popups.ts b/frontend/src/ts/popups/simple-popups.ts index fb158b3af..39d767ae5 100644 --- a/frontend/src/ts/popups/simple-popups.ts +++ b/frontend/src/ts/popups/simple-popups.ts @@ -540,7 +540,9 @@ list["updatePassword"] = new SimplePopup( Notifications.add( "New password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long", 0, - 4 + { + duration: 4, + } ); return; } @@ -678,7 +680,9 @@ list["deleteAccount"] = new SimplePopup( Notifications.add("Deleting login information...", 0); await Auth?.currentUser?.delete(); - Notifications.add("Goodbye", 1, 5); + Notifications.add("Goodbye", 1, { + duration: 5, + }); setTimeout(() => { location.reload(); @@ -1332,7 +1336,7 @@ list["forgotPassword"] = new SimplePopup( ); } else { Loader.hide(); - Notifications.add("Password reset email sent", 1, 3); + Notifications.add("Password reset email sent", 1); } }, (thisPopup) => { @@ -1356,7 +1360,7 @@ $(".pageSettings .section.discordIntegration #unlinkDiscordButton").on( "click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["unlinkDiscord"].show(); @@ -1365,7 +1369,7 @@ $(".pageSettings .section.discordIntegration #unlinkDiscordButton").on( $(".pageSettings #removeGoogleAuth").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["removeGoogleAuth"].show(); @@ -1373,7 +1377,7 @@ $(".pageSettings #removeGoogleAuth").on("click", () => { $("#resetSettingsButton").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["resetSettings"].show(); @@ -1381,7 +1385,7 @@ $("#resetSettingsButton").on("click", () => { $(".pageSettings #resetPersonalBestsButton").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["resetPersonalBests"].show(); @@ -1389,7 +1393,7 @@ $(".pageSettings #resetPersonalBestsButton").on("click", () => { $(".pageSettings #updateAccountName").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["updateName"].show(); @@ -1397,7 +1401,7 @@ $(".pageSettings #updateAccountName").on("click", () => { $("#bannerCenter").on("click", ".banner .text .openNameChange", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["updateName"].show(); @@ -1405,7 +1409,7 @@ $("#bannerCenter").on("click", ".banner .text .openNameChange", () => { $(".pageSettings #addPasswordAuth").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["addPasswordAuth"].show(); @@ -1413,7 +1417,7 @@ $(".pageSettings #addPasswordAuth").on("click", () => { $(".pageSettings #emailPasswordAuth").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["updateEmail"].show(); @@ -1421,7 +1425,7 @@ $(".pageSettings #emailPasswordAuth").on("click", () => { $(".pageSettings #passPasswordAuth").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["updatePassword"].show(); @@ -1429,7 +1433,7 @@ $(".pageSettings #passPasswordAuth").on("click", () => { $(".pageSettings #deleteAccount").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["deleteAccount"].show(); @@ -1437,7 +1441,7 @@ $(".pageSettings #deleteAccount").on("click", () => { $(".pageSettings #resetAccount").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["resetAccount"].show(); @@ -1445,7 +1449,7 @@ $(".pageSettings #resetAccount").on("click", () => { $(".pageSettings #optOutOfLeaderboardsButton").on("click", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["optOutOfLeaderboards"].show(); @@ -1453,7 +1457,7 @@ $(".pageSettings #optOutOfLeaderboardsButton").on("click", () => { $("#popups").on("click", "#apeKeysPopup .generateApeKey", () => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } list["generateApeKey"].show(); @@ -1464,7 +1468,7 @@ $(".pageSettings").on( ".section.themes .customTheme .delButton", (e) => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } const $parentElement = $(e.currentTarget).parent(".customTheme.button"); @@ -1478,7 +1482,7 @@ $(".pageSettings").on( ".section.themes .customTheme .editButton", (e) => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } const $parentElement = $(e.currentTarget).parent(".customTheme.button"); @@ -1516,7 +1520,7 @@ $("#popups").on( $("#popups").on("click", "#apeKeysPopup table tbody tr .button.delete", (e) => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } const keyId = $(e.target).closest("tr").attr("keyId") as string; @@ -1525,7 +1529,7 @@ $("#popups").on("click", "#apeKeysPopup table tbody tr .button.delete", (e) => { $("#popups").on("click", "#apeKeysPopup table tbody tr .button.edit", (e) => { if (!ConnectionState.get()) { - Notifications.add("You are offline", 0, 2); + Notifications.add("You are offline", 0, { duration: 2 }); return; } const keyId = $(e.target).closest("tr").attr("keyId") as string; diff --git a/frontend/src/ts/popups/video-ad-popup.ts b/frontend/src/ts/popups/video-ad-popup.ts index e2309972e..db78e00b3 100644 --- a/frontend/src/ts/popups/video-ad-popup.ts +++ b/frontend/src/ts/popups/video-ad-popup.ts @@ -12,7 +12,9 @@ export async function show(): Promise { Notifications.add( "Looks like you're using an adblocker. Video ads will not work until you disable it.", 0, - 6 + { + duration: 6, + } ); return; } @@ -22,7 +24,9 @@ export async function show(): Promise { Notifications.add( "Looks like you're using a cookie popup blocker. Video ads will not work without giving your consent through the popup.", 0, - 7 + { + duration: 7, + } ); return; } @@ -65,7 +69,9 @@ export function egVideoListener(options: Record): void { } else if (event === "finished") { hide(); } else if (event === "empty") { - Notifications.add("Failed to load video ad. Please try again later", -1, 3); + Notifications.add("Failed to load video ad. Please try again later", -1, { + duration: 3, + }); hide(); } } diff --git a/frontend/src/ts/states/connection.ts b/frontend/src/ts/states/connection.ts index 017a3d178..ea4f50cf6 100644 --- a/frontend/src/ts/states/connection.ts +++ b/frontend/src/ts/states/connection.ts @@ -23,7 +23,9 @@ function showBanner(): void { ConnectionEvent.subscribe((newState) => { state = newState; if (state) { - Notifications.add("You're back online", 1, 3, "Connection"); + Notifications.add("You're back online", 1, { + customTitle: "Connection", + }); if (noInternetBannerId != undefined) { $( `#bannerCenter .banner[id="${noInternetBannerId}"] .closeButton` diff --git a/frontend/src/ts/test/funbox/funbox-validation.ts b/frontend/src/ts/test/funbox/funbox-validation.ts index f7ae11a6b..cff25f587 100644 --- a/frontend/src/ts/test/funbox/funbox-validation.ts +++ b/frontend/src/ts/test/funbox/funbox-validation.ts @@ -139,7 +139,9 @@ export function canSetConfigWithCurrentFunboxes( key )} to ${value} with currently active funboxes.`, 0, - 5 + { + duration: 5, + } ); } return false; @@ -178,7 +180,9 @@ export function canSetFunboxWithConfig( " " )} with currently active config.`, 0, - 5 + { + duration: 5, + } ); return false; } else { diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts index 3a8f09c39..4790a72b3 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/frontend/src/ts/test/test-logic.ts @@ -402,7 +402,9 @@ export function restart(options = {} as RestartOptions): void { Notifications.add( `Quick restart disabled in long tests. ${message}`, 0, - 4 + { + duration: 4, + } ); return; } @@ -1307,7 +1309,9 @@ export async function retrySavingResult(): Promise { Notifications.add( "Could not retry saving the result as the result no longer exists.", 0, - -1 + { + duration: 5, + } ); return; @@ -1569,7 +1573,9 @@ export async function finish(difficultyFailed = false): Promise { let tooShort = false; //fail checks if (difficultyFailed) { - Notifications.add(`Test failed - ${failReason}`, 0, 1); + Notifications.add(`Test failed - ${failReason}`, 0, { + duration: 1, + }); dontSave = true; } else if (afkDetected) { Notifications.add("Test invalid - AFK detected", 0); @@ -1659,7 +1665,9 @@ export async function finish(difficultyFailed = false): Promise { CustomText.getCustomTextLongProgress(customTextName) + TestInput.input.getHistory().length; CustomText.setCustomTextLongProgress(customTextName, newProgress); - Notifications.add("Long custom text progress saved", 1, 5); + Notifications.add("Long custom text progress saved", 1, { + duration: 5, + }); let newText = CustomText.getCustomText(customTextName, true); newText = newText.slice(newProgress); @@ -1668,7 +1676,9 @@ export async function finish(difficultyFailed = false): Promise { // They finished the test CustomText.setCustomTextLongProgress(customTextName, 0); CustomText.setText(CustomText.getCustomText(customTextName, true)); - Notifications.add("Long custom text completed", 1, 5); + Notifications.add("Long custom text completed", 1, { + duration: 5, + }); } } @@ -1748,13 +1758,19 @@ async function saveResult( isRetrying: boolean ): Promise { if (!TestState.savingEnabled) { - Notifications.add("Result not saved: disabled by user", -1, 3, "Notice"); + Notifications.add("Result not saved: disabled by user", -1, { + duration: 3, + customTitle: "Notice", + }); AccountButton.loading(false); return; } if (!ConnectionState.get()) { - Notifications.add("Result not saved: offline", -1, 2, "Notice"); + Notifications.add("Result not saved: offline", -1, { + duration: 2, + customTitle: "Notice", + }); AccountButton.loading(false); retrySaving.canRetry = true; $("#retrySavingResultButton").removeClass("hidden"); diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index 0c4b7fc86..ca07878eb 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -27,7 +27,9 @@ const debouncedZipfCheck = debounce(250, () => { Config.language.replace(/_/g, " ") )} does not support Zipf funbox, because the list is not ordered by frequency. Please try another word list.`, 0, - 7 + { + duration: 7, + } ); } if (supports === "unknown") { @@ -36,7 +38,9 @@ const debouncedZipfCheck = debounce(250, () => { Config.language.replace(/_/g, " ") )} may not support Zipf funbox, because we don't know if it's ordered by frequency or not. If you would like to add this label, please contact us.`, 0, - 7 + { + duration: 7, + } ); } }); @@ -471,14 +475,18 @@ export async function screenshot(): Promise { }) ); await navigator.clipboard.write([clipItem]); - Notifications.add("Copied to clipboard", 1, 2); + Notifications.add("Copied to clipboard", 1, { + duration: 2, + }); } catch (e) { console.error("Error while saving image to clipboard", e); if (blob) { Notifications.add( "Could not save image to clipboard. Opening in new tab instead (make sure popups are allowed)", 0, - 5 + { + duration: 5, + } ); open(URL.createObjectURL(blob)); } else { @@ -1160,7 +1168,9 @@ $(".pageTest #copyWordsListButton").on("click", async () => { .join(" "); } await navigator.clipboard.writeText(words); - Notifications.add("Copied to clipboard", 0, 2); + Notifications.add("Copied to clipboard", 0, { + duration: 2, + }); } catch (e) { Notifications.add("Could not copy to clipboard: " + e, -1); } diff --git a/frontend/src/ts/utils/url-handler.ts b/frontend/src/ts/utils/url-handler.ts index 601752c61..9b5c9c787 100644 --- a/frontend/src/ts/utils/url-handler.ts +++ b/frontend/src/ts/utils/url-handler.ts @@ -172,14 +172,9 @@ export function loadTestSettingsFromUrl(getOverride?: string): void { }); if (appliedString !== "") { - Notifications.add( - "Settings applied from URL:

" + appliedString, - 1, - 10, - undefined, - undefined, - undefined, - true - ); + Notifications.add("Settings applied from URL:

" + appliedString, 1, { + duration: 10, + allowHTML: true, + }); } }