feat: Implemented audio effects

src/mainview/routes/store/details.emulator.$id.tsx

@@ -4,9 +4,8 @@ import
     useFocusable,
     FocusContext,
 } from "@noriginmedia/norigin-spatial-navigation";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
 import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";
-import { Router } from "@/mainview";
 import Shortcuts from "@/mainview/components/Shortcuts";
 import { AnimatedBackground } from "@/mainview/components/AnimatedBackground";
 import { systemApi } from "@/mainview/scripts/clientApi";
@@ -18,7 +17,7 @@ import Screenshots from "@/mainview/components/Screenshots";
 import { StickyHeaderUI } from "@/mainview/components/Header";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { EmulatorsSection } from "@/mainview/components/store/EmulatorsSection";
-import { HandleGoBack, scrollIntoViewHandler, useJobStatus } from "@/mainview/scripts/utils";
+import { HandleGoBack, scrollIntoViewHandler, useJobStatus, useOnNavigateBack } from "@/mainview/scripts/utils";
 import toast from "react-hot-toast";
 import { getErrorMessage } from "react-error-boundary";
 import { emulatorStatusIcons } from "@/mainview/components/store/StoreEmulatorCard";
@@ -27,6 +26,7 @@ import { GamesSection } from "@/mainview/components/store/GamesSection";
 import { deleteBiosMutation, downloadBiosMutation, installEmulatorMutation, storeEmulatorDeleteMutation, storeEmulatorDetailsQuery, storeEmulatorsRecommendedQuery } from "@queries/store";
 import { gamesRecommendedBasedOnEmulatorQuery } from "@queries/romm";
 import FocusTooltip from "@/mainview/components/FocusTooltip";
+import { AutoFocus } from "@/mainview/components/AutoFocus";
 
 export const Route = createFileRoute('/store/details/emulator/$id')({
     component: RouteComponent,
@@ -35,6 +35,10 @@ export const Route = createFileRoute('/store/details/emulator/$id')({
         ctx.context.queryClient.prefetchQuery(storeEmulatorDetailsQuery(ctx.params.id));
         ctx.context.queryClient.prefetchQuery(storeEmulatorsRecommendedQuery(ctx.params.id));
         ctx.context.queryClient.prefetchQuery(gamesRecommendedBasedOnEmulatorQuery(ctx.params.id));
+    },
+    staticData: {
+        enterSound: "openDetails",
+        goBackSound: "returnDetails"
     }
 });
 
@@ -288,7 +292,7 @@ function Description (data: { emulator?: FrontEndEmulatorDetailed; })
 export function RouteComponent ()
 {
     const { id } = Route.useParams();
-
+    const router = useRouter();
     const { ref, focusKey, focusSelf } = useFocusable({
         focusKey: `GAME_DETAIL_${id}`,
         trackChildren: true,
@@ -301,22 +305,16 @@ export function RouteComponent ()
 
     useShortcuts(focusKey, () => [{
         label: "Return",
-        action: HandleGoBack,
+        action: () => HandleGoBack(router),
         button: GamePadButtonCode.B
-    }]);
+    }], [router]);
 
     const installMutation = useMutation({
         ...installEmulatorMutation(id), onSuccess: (data, variables, onMutateResult, context) => context.client.refetchQueries(storeEmulatorDetailsQuery(id)),
     });
 
-    useEffect(() =>
-    {
-        focusSelf();
-    }, []);
-
     const { shortcuts } = useShortcutContext();
 
-
     const stats: StatEntry[] = [];
     if (emulator)
     {
@@ -341,6 +339,7 @@ export function RouteComponent ()
 
     return (
         <AnimatedBackground ref={ref} className="" scrolling>
+            <AutoFocus focus={focusSelf} />
             <FocusContext.Provider value={focusKey}>
                 <StickyHeaderUI ref={ref} />
                 <div className="flex flex-col z-10">
@@ -370,7 +369,7 @@ export function RouteComponent ()
                             onFocus={scrollIntoViewHandler({ block: 'center' })}
                             onSelect={(id, focus) =>
                             {
-                                Router.navigate({
+                                router.navigate({
                                     to: '/store/details/emulator/$id', params: { id }
                                 });
                             }}
@@ -386,7 +385,7 @@ export function RouteComponent ()
                         </div>
                         <GamesSection showSources={true} onFocus={scrollIntoViewHandler({ behavior: 'smooth', block: 'center' })} onSelect={(id) =>
                         {
-                            Router.navigate({
+                            router.navigate({
                                 to: '/game/$source/$id', params: { id: id.id, source: id.source }
                             });
                         }} games={recommendedGames} /></div>}

src/mainview/routes/store/tab/route.tsx

@@ -1,4 +1,4 @@
-import { Router } from '@/mainview';
+import { AutoFocus } from '@/mainview/components/AutoFocus';
 import { FilterUI } from '@/mainview/components/Filters';
 import { HeaderUI } from '@/mainview/components/Header';
 import Shortcuts from '@/mainview/components/Shortcuts';
@@ -6,19 +6,21 @@ import { StoreContext } from '@/mainview/scripts/contexts';
 import { gameQuery } from '@/mainview/scripts/queries/romm';
 import { storeEmulatorDetailsQuery } from '@/mainview/scripts/queries/store';
 import { GamePadButtonCode, useShortcutContext, useShortcuts } from '@/mainview/scripts/shortcuts';
-import { mobileCheck, useStickyDataAttr } from '@/mainview/scripts/utils';
+import { HandleGoBack, mobileCheck, useStickyDataAttr } from '@/mainview/scripts/utils';
 import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
 import { useQueryClient } from '@tanstack/react-query';
-import { useMatchRoute } from '@tanstack/react-router';
+import { useMatchRoute, useRouter } from '@tanstack/react-router';
 import { createFileRoute, Outlet } from '@tanstack/react-router';
 import { zodValidator } from '@tanstack/zod-adapter';
-import { Settings } from 'lucide-react';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import z from 'zod';
 
 export const Route = createFileRoute('/store/tab')({
   component: RouteComponent,
-  validateSearch: zodValidator(z.object({ focus: z.string().optional() }))
+  validateSearch: zodValidator(z.object({ focus: z.string().optional() })),
+  staticData: {
+    enterSound: 'openStore'
+  }
 });
 
 function useIsSettings (subPath: string)
@@ -33,6 +35,7 @@ function useIsSettings (subPath: string)
 
 function TopArea (data: { filters: Record<string, FilterOption>; })
 {
+  const router = useRouter();
   const { ref, focusKey } = useFocusable({
     focusKey: 'top-area',
     preferredChildFocusKey: `store-tabs`,
@@ -44,13 +47,13 @@ function TopArea (data: { filters: Record<string, FilterOption>; })
 
   useShortcuts("STORE_ROOT", () => [{
     label: "Return",
-    action: () => Router.navigate({ to: '/', viewTransition: { types: ['zoom-out'] } }),
+    action: () => HandleGoBack(router),
     button: GamePadButtonCode.B
-  }], []);
+  }], [router]);
 
   const handleNavigate = (s: string) =>
   {
-    Router.navigate({ to: `/store/tab/${s === 'home' ? '' : s}`, viewTransition: { types: ['slide-up'] }, replace: true });
+    router.navigate({ to: `/store/tab/${s === 'home' ? '' : s}`, viewTransition: { types: ['slide-up'] }, replace: true });
   };
 
   return <div ref={ref}>
@@ -76,6 +79,7 @@ function StoreOutlet ()
 function RouteComponent ()
 {
   // Root spatial nav container
+  const router = useRouter();
   const { ref, focusKey, focusSelf } = useFocusable({
     focusKey: "STORE_ROOT",
     preferredChildFocusKey: 'top-area',
@@ -93,25 +97,16 @@ function RouteComponent ()
   const { shortcuts } = useShortcutContext();
   const { focus } = Route.useSearch();
 
-  useEffect(() =>
-  {
-    if (!focus)
-    {
-      focusSelf();
-    }
-  }, []);
-
   const handleDetails = (type: string, source: string, id: string, focus: string) =>
   {
     if (type === 'emulator')
     {
-      Router.navigate({ to: '/store/details/emulator/$id', params: { id } });
+      router.navigate({ to: '/store/details/emulator/$id', params: { id } });
     }
     else if (type === 'game')
     {
-      Router.navigate({ to: '/game/$source/$id', params: { source: source, id: id } });
+      router.navigate({ to: '/game/$source/$id', params: { source: source, id: id } });
     }
-
   };
 
   const handlePrefetch = (type: string, source: string, id: string) =>
@@ -150,5 +145,6 @@ function RouteComponent ()
         </div>
       </FocusContext.Provider>
     </StoreContext>
+    <AutoFocus focus={focusSelf} />
   </div >;
 }