feat: Implemented audio effects

src/mainview/scripts/utils.ts

@@ -3,7 +3,8 @@ import { RefObject, useEffect, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { jobsApi } from "./clientApi";
 import { JobsAPIType } from "@/bun/api/rpc";
-import { Router } from "..";
+import { AnyRouter, Router, useRouter } from "@tanstack/react-router";
+import { soundMap } from "./audio/audio";
 
 export type ScrollSaveParams = {
   id: string;
@@ -59,6 +60,13 @@ export function mobileCheck ()
   return check;
 };
 
+export function getLocalSetting<TKey extends keyof LocalSettingsType> (key: TKey)
+{
+  const localValueRaw = localStorage.getItem(key);
+  if (!localValueRaw) return LocalSettingsSchema.shape[key].parse(undefined);
+  return LocalSettingsSchema.shape[key].parse(JSON.parse(localValueRaw));
+}
+
 export function useLocalSetting<TKey extends keyof LocalSettingsType> (key: TKey)
 {
   const [localValue] = useLocalStorage(key, LocalSettingsSchema.shape[key].parse(undefined), { deserializer: (value) => LocalSettingsSchema.shape[key].parse(JSON.parse(value)) });
@@ -218,7 +226,7 @@ export function scrollIntoViewHandler (params?: ScrollIntoViewOptions)
   return (focusKey: string, node: HTMLElement, details: any) =>
   {
     if (details.nativeEvent instanceof PointerEvent) return;
-    node.scrollIntoView({ ...params, behavior: details.instant ? 'instant' : 'smooth' });
+    node.scrollIntoView({ ...params, behavior: details.instant || !details.event ? 'instant' : 'smooth' });
   };
 }
 
@@ -315,13 +323,37 @@ export function useJobStatus<const JOB extends keyof JobsAPIType['~Routes']['api
   return { data, state, error, wsRef: ref };
 }
 
-export function HandleGoBack ()
+export function HandleGoBack (router: AnyRouter)
 {
-  if (Router.history.canGoBack())
+  if (router.history.canGoBack())
   {
-    Router.history.back();
+    router.history.back();
   } else
   {
-    Router.navigate({ to: '/', viewTransition: { types: ['zoom-out'] } });
+    router.navigate({ to: '/', viewTransition: { types: ['zoom-out'] } });
   }
+}
+
+export function useOnNavigateBack (callback: (state: { sound?: keyof typeof soundMap; } & Record<string, any>) => void)
+{
+  const router = useRouter();
+  const prevIndex = useRef(router.history.location.state.__TSR_index);
+
+  useEffect(() =>
+  {
+    const unsub = router.history.subscribe(() =>
+    {
+      const currentIndex = router.history.location.state.__TSR_index;
+      const isBack = currentIndex < prevIndex.current;
+
+      if (isBack)
+      {
+        callback(router.history.location.state);
+      }
+
+      prevIndex.current = currentIndex;
+    });
+
+    return unsub;
+  }, [router]);
 }