move player context and audioplayers inside of router

src/renderer/app.tsx

@@ -11,8 +11,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import i18n from '/@/i18n/i18n';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
-import { AudioPlayers } from '/@/renderer/features/player/components/audio-players';
-import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 import { useServerVersion } from '/@/renderer/hooks/use-server-version';
 import { IsUpdatedDialog } from '/@/renderer/is-updated-dialog';
@@ -86,10 +84,7 @@ export const App = () => {
                 zIndex={50000}
             />
             <WebAudioContext.Provider value={webAudioProvider}>
-                <PlayerProvider>
                 <AppRouter />
-                    <AudioPlayers />
-                </PlayerProvider>
             </WebAudioContext.Provider>
             <IsUpdatedDialog />
         </MantineProvider>

src/renderer/router/app-router.tsx

@@ -2,6 +2,8 @@ import { lazy, Suspense } from 'react';
 import { HashRouter, Route, Routes } from 'react-router';
 
 import { RouterErrorBoundary } from '/@/renderer/components/error-boundary/router-error-boundary';
+import { AudioPlayers } from '/@/renderer/features/player/components/audio-players';
+import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
 import { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal';
 import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
 import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout';
@@ -74,6 +76,8 @@ export const AppRouter = () => {
     const router = (
         <HashRouter>
             <RouterErrorBoundary>
+                <PlayerProvider>
+                    <AudioPlayers />
                     <ModalsProvider
                         modals={{
                             addToPlaylist: AddToPlaylistContextModal,
@@ -83,7 +87,10 @@ export const AppRouter = () => {
                     >
                         <Routes>
                             <Route element={<TitlebarOutlet />}>
-                            <Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}>
+                                <Route
+                                    element={<AppOutlet />}
+                                    errorElement={<RouteErrorBoundary />}
+                                >
                                     <Route element={<ResponsiveLayout />}>
                                         <Route
                                             element={<HomeRoute />}
@@ -190,7 +197,9 @@ export const AppRouter = () => {
                                                 />
                                                 <Route
                                                     element={<SongListRoute />}
-                                                path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
+                                                    path={
+                                                        AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS
+                                                    }
                                                 />
                                                 <Route
                                                     element={<AlbumArtistDetailTopSongsListRoute />}
@@ -215,6 +224,7 @@ export const AppRouter = () => {
                             </Route>
                         </Routes>
                     </ModalsProvider>
+                </PlayerProvider>
             </RouterErrorBoundary>
         </HashRouter>
     );