fix(frontend): Error Boundary, HomePage error state, HLS catch — quick wins pre-Bloc-B

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,31 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props { children: ReactNode; }
+interface State { hasError: boolean; }
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-screen items-center justify-center bg-od-bg">
+          <div className="rounded border border-od-crit/40 bg-od-surface p-8 text-center">
+            <p className="font-mono text-sm text-od-crit">Une erreur inattendue s'est produite.</p>
+            <button
+              className="mt-4 rounded border border-od-border px-4 py-2 text-xs text-od-muted hover:border-od-accent/40"
+              onClick={() => window.location.reload()}
+            >
+              Recharger
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/components/VideoPlayer.tsx

@@ -69,7 +69,7 @@ function NativePlayer({ url }: { url: string }) {
         hls = new Hls();
         hls.loadSource(url);
         hls.attachMedia(video);
-      });
+      }).catch(() => { /* HLS non disponible — dégradation silencieuse */ });
     }
 
     return () => { hls?.destroy(); };

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles/index.css";
 import App from "./App";
+import ErrorBoundary from "./components/ErrorBoundary";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>
 );

frontend/src/pages/HomePage.tsx

@@ -19,11 +19,12 @@ interface VideosResponse {
 export default function HomePage() {
   const [videos, setVideos] = useState<Video[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
 
   useEffect(() => {
     apiFetch<VideosResponse>('/videos')
       .then((res) => setVideos(res.data.videos))
-      .catch(() => setVideos([]))
+      .catch(() => setError(true))
       .finally(() => setLoading(false));
   }, []);
 
@@ -47,7 +48,11 @@ export default function HomePage() {
         </div>
       )}
 
-      {!loading && (
+      {error && (
+        <p className="text-sm text-od-crit">Impossible de charger les vidéos. Réessaie plus tard.</p>
+      )}
+
+      {!loading && !error && (
         <>
           {free.length > 0 && (
             <section>