refactor: use animejs instead of jquery (@Miodec) (#7101)

Also changes how slow timer is handled - now the animation frame rate is
reduced to 30fps instead of disabling them entirely.

Author: Miodec

frontend/package.json

@@ -93,6 +93,7 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@ts-rest/core": "3.52.1",
+    "animejs": "4.2.2",
     "balloon-css": "1.2.0",
     "canvas-confetti": "1.5.1",
     "chart.js": "3.7.1",
@@ -108,8 +109,6 @@
     "howler": "2.2.3",
     "idb": "8.0.3",
     "jquery": "3.7.1",
-    "jquery-color": "2.2.0",
-    "jquery.easing": "1.4.1",
     "konami": "1.7.0",
     "lz-ts": "1.1.2",
     "modern-screenshot": "4.6.5",

frontend/src/html/pages/settings.html

@@ -1887,6 +1887,35 @@
         <button>open</button>
       </div>
     </div>
+    <div class="section fpsLimit">
+      <div class="groupTitle">
+        <i class="fas fa-video"></i>
+        <span>animation fps limit</span>
+        <button class="text" tabindex="-1">
+          <i class="fas fa-fw fa-link"></i>
+        </button>
+      </div>
+      <div class="text">
+        Limit the maximum fps for animations. Setting this to "native" will run
+        the animations as fast as possible (at your monitor's refresh rate).
+        Setting this above your monitor's refresh rate will have no effect.
+      </div>
+      <!-- <div class="inputs">
+        <div class="rangeGroup">
+          <div class="value">---</div>
+          <input type="range" min="30" max="1000" step="10" />
+        </div>
+      </div> -->
+      <div class="inputs">
+        <button data-fpsLimit="native">native</button>
+        <div class="separator">
+          <div class="line"></div>
+          or
+          <div class="line"></div>
+        </div>
+        <input type="number" placeholder="custom limit" min="30" max="1000" />
+      </div>
+    </div>
     <div class="section resetSettings" data-section-id="resetSettings">
       <div class="groupTitle">
         <i class="fas fa-redo-alt"></i>

frontend/src/styles/account.scss

@@ -193,7 +193,7 @@
       }
 
       .active {
-        animation: accountRowHighlight 4s linear 0s 1;
+        animation: accountRowHighlight 5s linear 0s 1;
       }
 
       .loadMoreButton {

frontend/src/styles/nav.scss

@@ -69,7 +69,6 @@ nav {
       }
 
       .level {
-        transition: 0.125s;
         width: max-content;
         font-size: 0.65em;
         line-height: 0.65em;

frontend/src/styles/notifications.scss

@@ -2,14 +2,17 @@
   width: 350px;
   z-index: 99999999;
   display: grid;
-  gap: 1rem;
+  // gap: 1rem;
+  // margin-top: 1rem;
+  padding-top: 1rem;
   position: fixed;
   right: 1rem;
-  top: 1rem;
+  // top: 1rem;
   transition: 0.125s opacity;
 
   .clearAll.button {
     font-size: 0.75em;
+    margin-bottom: 1rem;
   }
   &.focus .clearAll {
     visibility: hidden;
@@ -22,13 +25,14 @@
   }
   .history {
     display: grid;
-    gap: 1rem;
+    // gap: 1rem;
   }
 
   .notif {
     --notif-border-color: rgba(0, 130, 251, 0.985);
     --notif-background-color: rgba(0, 77, 148, 0.9);
     transition: 0.125s background;
+    margin-bottom: 1rem;
 
     -webkit-user-select: none;
     user-select: none;

frontend/src/styles/settings.scss

@@ -169,9 +169,11 @@
     }
 
     &[data-config-name="fontFamily"],
-    &[data-config-name="customBackgroundSize"] {
+    &[data-config-name="customBackgroundSize"],
+    &.fpsLimit {
       .separator {
         margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
         grid-column: span 2;
         // color: var(--sub-color);
         display: grid;
@@ -187,6 +189,15 @@
       }
     }
 
+    &.fpsLimit {
+      .inputs {
+        button,
+        input {
+          width: 100%;
+        }
+      }
+    }
+
     &[data-config-name="fontFamily"] {
       grid-template-areas:
         "title title"

frontend/src/styles/test.scss

@@ -1264,18 +1264,14 @@
     border-radius: var(--roundness);
     z-index: 2;
     // width: max-content;
+    overflow: hidden;
   }
   .spacer {
     height: auto;
     width: 0.5em;
     border-radius: calc(var(--roundness) / 2);
     background: var(--bg-color);
     margin: 0.75em 0;
-    transition: 250ms;
-    &.scrolled {
-      opacity: 0;
-      width: 0;
-    }
   }
 
   .wordCount,
@@ -1334,6 +1330,12 @@
     transition: opacity 0.25s, right 0.25s;
     opacity: 0;
   }
+
+  .mode {
+    background: var(--sub-alt-color);
+    z-index: 2;
+  }
+
   &:hover {
     .shareButton {
       opacity: 1;

frontend/src/ts/anim.ts

@@ -0,0 +1,37 @@
+import { engine } from "animejs";
+import { LocalStorageWithSchema } from "./utils/local-storage-with-schema";
+import { z } from "zod";
+
+export const fpsLimitSchema = z.number().int().min(30).max(1000);
+
+const fpsLimit = new LocalStorageWithSchema({
+  key: "fpsLimit",
+  schema: fpsLimitSchema,
+  fallback: 1000,
+});
+
+export function setfpsLimit(fps: number): boolean {
+  const result = fpsLimit.set(fps);
+  applyEngineSettings();
+  return result;
+}
+
+export function getfpsLimit(): number {
+  return fpsLimit.get();
+}
+
+export function applyEngineSettings(): void {
+  engine.pauseOnDocumentHidden = false;
+  engine.fps = fpsLimit.get();
+  engine.defaults.frameRate = fpsLimit.get();
+}
+
+export function setLowFpsMode(): void {
+  engine.fps = 30;
+  engine.defaults.frameRate = 30;
+}
+
+export function clearLowFpsMode(): void {
+  engine.fps = fpsLimit.get();
+  engine.defaults.frameRate = fpsLimit.get();
+}

frontend/src/ts/commandline/commandline.ts

@@ -577,6 +577,8 @@ async function updateActiveCommand(): Promise<void> {
   command.hover?.();
 }
 
+let shakeTimeout: null | NodeJS.Timeout;
+
 function handleInputSubmit(): void {
   if (isAnimating) return;
   if (inputModeParams.command === null) {
@@ -587,13 +589,13 @@ function handleInputSubmit(): void {
     //validation ongoing, ignore the submit
     return;
   } else if (inputModeParams.validation?.status === "failed") {
-    const cmdLine = $("#commandLine .modal");
-    cmdLine
-      .stop(true, true)
-      .addClass("hasError")
-      .animate({ undefined: 1 }, 500, () => {
-        cmdLine.removeClass("hasError");
-      });
+    modal.getModal().classList.add("hasError");
+    if (shakeTimeout !== null) {
+      clearTimeout(shakeTimeout);
+    }
+    shakeTimeout = setTimeout(() => {
+      modal.getModal().classList.remove("hasError");
+    }, 500);
     return;
   }
 

frontend/src/ts/controllers/page-controller.ts

@@ -54,11 +54,9 @@ function updateTitle(nextPage: { id: string; display?: string }): void {
 async function showSyncLoading({
   loadingOptions,
   totalDuration,
-  easingMethod,
 }: {
   loadingOptions: LoadingOptions[];
   totalDuration: number;
-  easingMethod: Misc.JQueryEasing;
 }): Promise<void> {
   PageLoading.page.element.removeClass("hidden").css("opacity", 0);
   await PageLoading.page.beforeShow({});
@@ -67,14 +65,10 @@ async function showSyncLoading({
   const fillOffset = 100 / fillDivider;
 
   //void here to run the loading promise as soon as possible
-  void Misc.promiseAnimation(
-    PageLoading.page.element,
-    {
-      opacity: "1",
-    },
-    totalDuration / 2,
-    easingMethod
-  );
+  void Misc.promiseAnimate(PageLoading.page.element[0] as HTMLElement, {
+    opacity: "1",
+    duration: totalDuration / 2,
+  });
 
   for (let i = 0; i < loadingOptions.length; i++) {
     const currentOffset = fillOffset * i;
@@ -102,14 +96,10 @@ async function showSyncLoading({
     }
   }
 
-  await Misc.promiseAnimation(
-    PageLoading.page.element,
-    {
-      opacity: "0",
-    },
-    totalDuration / 2,
-    easingMethod
-  );
+  await Misc.promiseAnimate(PageLoading.page.element[0] as HTMLElement, {
+    opacity: "0",
+    duration: totalDuration / 2,
+  });
 
   await PageLoading.page.afterHide();
   PageLoading.page.element.addClass("hidden");
@@ -208,7 +198,6 @@ export async function change(
   const previousPage = pages[ActivePage.get()];
   const nextPage = pages[pageName];
   const totalDuration = Misc.applyReducedMotion(250);
-  const easingMethod: Misc.JQueryEasing = "swing";
 
   //start
   PageTransition.set(true);
@@ -217,14 +206,10 @@ export async function change(
   //previous page
   await previousPage?.beforeHide?.();
   previousPage.element.removeClass("hidden").css("opacity", 1);
-  await Misc.promiseAnimation(
-    previousPage.element,
-    {
-      opacity: "0",
-    },
-    totalDuration / 2,
-    easingMethod
-  );
+  await Misc.promiseAnimate(previousPage.element[0] as HTMLElement, {
+    opacity: "0",
+    duration: totalDuration / 2,
+  });
   previousPage.element.addClass("hidden");
   await previousPage?.afterHide();
 
@@ -245,7 +230,6 @@ export async function change(
       await showSyncLoading({
         loadingOptions: syncLoadingOptions,
         totalDuration,
-        easingMethod,
       });
     }
 
@@ -297,14 +281,10 @@ export async function change(
   }
 
   nextPage.element.removeClass("hidden").css("opacity", 0);
-  await Misc.promiseAnimation(
-    nextPage.element,
-    {
-      opacity: "1",
-    },
-    totalDuration / 2,
-    easingMethod
-  );
+  await Misc.promiseAnimate(nextPage.element[0] as HTMLElement, {
+    opacity: "1",
+    duration: totalDuration / 2,
+  });
   nextPage.element.addClass("active");
   await nextPage?.afterShow();