move player back above router

src/renderer/app.tsx

@@ -20,6 +20,8 @@ import { useAppTheme } from '/@/renderer/themes/use-app-theme';
 import { sanitizeCss } from '/@/renderer/utils/sanitize';
 import { WebAudio } from '/@/shared/types/types';
 import '/@/shared/styles/global.css';
+import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
+import { AudioPlayers } from '/@/renderer/features/player/components/audio-players';
 
 const ipc = isElectron() ? window.api.ipc : null;
 
@@ -84,7 +86,10 @@ export const App = () => {
                 zIndex={50000}
             />
             <WebAudioContext.Provider value={webAudioProvider}>
+                <PlayerProvider>
+                    <AudioPlayers />
                     <AppRouter />
+                </PlayerProvider>
             </WebAudioContext.Provider>
             <IsUpdatedDialog />
         </MantineProvider>

src/renderer/router/app-router.tsx

@@ -2,8 +2,6 @@ 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';
@@ -76,8 +74,6 @@ export const AppRouter = () => {
     const router = (
         <HashRouter>
             <RouterErrorBoundary>
-                <PlayerProvider>
-                    <AudioPlayers />
                 <ModalsProvider
                     modals={{
                         addToPlaylist: AddToPlaylistContextModal,
@@ -87,10 +83,7 @@ export const AppRouter = () => {
                 >
                     <Routes>
                         <Route element={<TitlebarOutlet />}>
-                                <Route
-                                    element={<AppOutlet />}
-                                    errorElement={<RouteErrorBoundary />}
-                                >
+                            <Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}>
                                 <Route element={<ResponsiveLayout />}>
                                     <Route
                                         element={<HomeRoute />}
@@ -197,9 +190,7 @@ export const AppRouter = () => {
                                             />
                                             <Route
                                                 element={<SongListRoute />}
-                                                    path={
-                                                        AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS
-                                                    }
+                                                path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
                                             />
                                             <Route
                                                 element={<AlbumArtistDetailTopSongsListRoute />}
@@ -224,7 +215,6 @@ export const AppRouter = () => {
                         </Route>
                     </Routes>
                 </ModalsProvider>
-                </PlayerProvider>
             </RouterErrorBoundary>
         </HashRouter>
     );