feat: implement MusicPlayer component with volume control and playlist management

src/App.tsx

@@ -3,6 +3,7 @@ import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { Button } from '@/components/ui/button'
 import { AuthProvider } from '@/components/AuthProvider'
 import { SocketProvider } from '@/contexts/SocketContext'
+import { MusicPlayerProvider } from '@/contexts/MusicPlayerContext'
 import { AccountPage } from '@/pages/AccountPage'
 import { ActivityPage } from '@/pages/ActivityPage'
 import { AdminUsersPage } from '@/pages/AdminUsersPage'
@@ -21,7 +22,8 @@ function App() {
       <Toaster />
       <AuthProvider>
         <SocketProvider>
-          <Router>
+          <MusicPlayerProvider>
+            <Router>
           <Routes>
             <Route path="/login" element={<LoginPage />} />
             <Route path="/register" element={<RegisterPage />} />
@@ -110,7 +112,8 @@ function App() {
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
             <Route path="*" element={<Navigate to="/dashboard" replace />} />
           </Routes>
-          </Router>
+            </Router>
+          </MusicPlayerProvider>
         </SocketProvider>
       </AuthProvider>
     </ThemeProvider>