feat: AuthContext, protected routes, admin page, fix VideoPlayer URL

frontend/src/components/RequireAuth.tsx

@@ -0,0 +1,15 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useAuthContext } from '../context/AuthContext';
+
+export default function RequireAuth() {
+  const { user, loading } = useAuthContext();
+  const location = useLocation();
+
+  if (loading) return null;
+
+  if (!user) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return <Outlet />;
+}

frontend/src/components/VideoPlayer.tsx

@@ -20,10 +20,11 @@ export default function VideoPlayer({ storageType, storageKey }: VideoPlayerProp
     return <YouTubePlayer videoId={storageKey} />;
   }
 
+  const apiBase = import.meta.env.VITE_API_URL || '/api';
   const url =
     storageType === 'external'
       ? storageKey
-      : `${import.meta.env.VITE_API_URL}/stream/${storageKey}`;
+      : `${apiBase}/stream/${storageKey}`;
 
   return <NativePlayer url={url} />;
 }

frontend/src/components/layout/Header.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { apiFetch } from '../../lib/api';
-import type { User } from '../../hooks/useAuth';
+import type { User } from '../../context/AuthContext';
 
 interface HeaderProps {
   theme: 'dark' | 'light';
@@ -39,6 +39,11 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
               Playlists
             </Link>
           )}
+          {user && (
+            <Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
+              admin
+            </Link>
+          )}
         </nav>
 
         {/* Right — thème + auth */}

frontend/src/components/layout/Layout.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 import Header from './Header';
-import { useAuth } from '../../hooks/useAuth';
+import { useAuthContext } from '../../context/AuthContext';
 
 interface LayoutProps {
   theme: 'dark' | 'light';
@@ -8,7 +8,7 @@ interface LayoutProps {
 }
 
 export default function Layout({ theme, onToggleTheme }: LayoutProps) {
-  const { user, loading, setUser } = useAuth();
+  const { user, loading, setUser } = useAuthContext();
 
   return (
     <div className="min-h-screen bg-od-bg text-od-text">