feat(frontend): playlist B1 — edit, delete, share, invitations

- PlaylistPage: bouton Éditer (formulaire inline titre/visibilité), Supprimer (confirm → DELETE → redirect), Partager (modal userId/permission → POST share), Retirer vidéo (✕ → DELETE)
- PlaylistsPage: section invitations reçues avec Accept / Refuser (PATCH share/:shareId)
- tsc --noEmit : 0 erreur, 0 console.log

backend/src/middleware/admin.middleware.ts

@@ -3,6 +3,7 @@ import { AppDataSource } from "../config/data-source";
 import { User } from "../entities/User";
 import { UserRole } from "../entities/UserRole";
 import { AuthenticatedRequest } from "./auth.middleware";
+import logger from "../utils/logger";
 
 /**
  * Middleware requireAdmin — s'exécute APRÈS requireAuth.
@@ -39,7 +40,8 @@ export const requireAdmin = async (
     }
 
     next();
-  } catch {
+  } catch (err) {
+    logger.error("requireAdmin — DB error", { err });
     res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
   }
 };

backend/src/routes/stream.routes.ts

@@ -5,6 +5,7 @@ import { AppDataSource } from "../config/data-source";
 import { Video } from "../entities/Video";
 import { User } from "../entities/User";
 import { UserSubscription } from "../entities/UserSubscription";
+import logger from "../utils/logger";
 
 const router = Router();
 
@@ -41,7 +42,8 @@ async function getUserLevel(token: string | undefined): Promise<number> {
     });
 
     return sub?.plan.level ?? 0;
-  } catch {
+  } catch (err) {
+    logger.warn("getUserLevel — auth/DB error", { err });
     return 0;
   }
 }
@@ -128,7 +130,8 @@ router.get("/:key(*)", async (req: Request, res: Response): Promise<void> => {
       });
       fs.createReadStream(resolved).pipe(res);
     }
-  } catch {
+  } catch (err) {
+    logger.error("GET /stream/:key — unexpected error", { err });
     res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
   }
 });

backend/src/routes/user.routes.ts

@@ -3,6 +3,7 @@ import { AppDataSource } from "../config/data-source";
 import { User } from "../entities/User";
 import { UserSubscription } from "../entities/UserSubscription";
 import { requireAuth, AuthenticatedRequest } from "../middleware/auth.middleware";
+import logger from "../utils/logger";
 
 const router = Router();
 
@@ -27,6 +28,7 @@ async function getActiveSub(userId: string) {
 router.get("/me/profile", requireAuth, async (req: Request, res: Response): Promise<void> => {
   const { user } = req as AuthenticatedRequest;
 
+  try {
     const localUser = await AppDataSource.getRepository(User).findOne({
       where: { superOAuthId: user.id },
       relations: ["userRoles", "userRoles.role"],
@@ -66,6 +68,10 @@ router.get("/me/profile", requireAuth, async (req: Request, res: Response): Prom
         createdAt: localUser.createdAt.toISOString(),
       },
     });
+  } catch (err) {
+    logger.error("GET /users/me/profile — DB error", { err });
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+  }
 });
 
 /**
@@ -95,12 +101,13 @@ router.patch("/me", requireAuth, async (req: Request, res: Response): Promise<vo
       if (!["http:", "https:"].includes(parsed.protocol)) {
         throw new Error("invalid protocol");
       }
-    } catch {
+    } catch (_err) {
       res.status(400).json({ success: false, error: "INVALID_AVATAR", message: "avatar must be a valid http/https URL or null" });
       return;
     }
   }
 
+  try {
     const userRepo = AppDataSource.getRepository(User);
     const localUser = await userRepo.findOne({ where: { superOAuthId: user.id } });
 
@@ -122,6 +129,10 @@ router.patch("/me", requireAuth, async (req: Request, res: Response): Promise<vo
         avatar: localUser.avatar,
       },
     });
+  } catch (err) {
+    logger.error("PATCH /users/me — DB error", { err });
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+  }
 });
 
 export default router;

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>
+    <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>

frontend/src/pages/PlaylistPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { apiFetch, ApiError } from '../lib/api';
 
 interface Video {
@@ -27,9 +27,25 @@ interface PlaylistResponse {
 
 export default function PlaylistPage() {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const [data, setData] = useState<PlaylistResponse['data'] | null>(null);
   const [error, setError] = useState<'forbidden' | 'not_found' | null>(null);
   const [loading, setLoading] = useState(true);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  // Edit inline form
+  const [editOpen, setEditOpen] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editVisibility, setEditVisibility] = useState<'private' | 'shared' | 'public'>('private');
+  const [saving, setSaving] = useState(false);
+
+  // Share modal
+  const [shareOpen, setShareOpen] = useState(false);
+  const [shareUserId, setShareUserId] = useState('');
+  const [sharePermission, setSharePermission] = useState<'view' | 'edit'>('view');
+  const [sharing, setSharing] = useState(false);
+  const [shareError, setShareError] = useState<string | null>(null);
+  const [shareOk, setShareOk] = useState(false);
 
   useEffect(() => {
     if (!id) return;
@@ -42,6 +58,73 @@ export default function PlaylistPage() {
       .finally(() => setLoading(false));
   }, [id]);
 
+  function openEdit() {
+    if (!data) return;
+    setEditTitle(data.playlist.title);
+    setEditVisibility(data.playlist.visibility);
+    setEditOpen(true);
+    setActionError(null);
+  }
+
+  async function handleEdit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!id || saving) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>(
+        `/playlists/${id}`,
+        { method: 'PATCH', body: JSON.stringify({ title: editTitle.trim(), visibility: editVisibility }) }
+      );
+      setData((prev) => prev ? { ...prev, playlist: res.data.playlist } : prev);
+      setEditOpen(false);
+    } catch {
+      setActionError('Impossible de modifier la playlist.');
+    }
+    setSaving(false);
+  }
+
+  async function handleDelete() {
+    if (!id || !confirm('Supprimer cette playlist ?')) return;
+    setActionError(null);
+    try {
+      await apiFetch(`/playlists/${id}`, { method: 'DELETE' });
+      navigate('/playlists');
+    } catch {
+      setActionError('Impossible de supprimer la playlist.');
+    }
+  }
+
+  async function handleRemoveVideo(videoId: string) {
+    if (!id || !confirm('Retirer cette vidéo de la playlist ?')) return;
+    setActionError(null);
+    try {
+      await apiFetch(`/playlists/${id}/videos/${videoId}`, { method: 'DELETE' });
+      setData((prev) => prev ? { ...prev, videos: prev.videos.filter((v) => v.id !== videoId) } : prev);
+    } catch {
+      setActionError('Impossible de retirer la vidéo.');
+    }
+  }
+
+  async function handleShare(e: React.FormEvent) {
+    e.preventDefault();
+    if (!id || !shareUserId.trim() || sharing) return;
+    setSharing(true);
+    setShareError(null);
+    setShareOk(false);
+    try {
+      await apiFetch(`/playlists/${id}/share`, {
+        method: 'POST',
+        body: JSON.stringify({ userId: shareUserId.trim(), permission: sharePermission }),
+      });
+      setShareOk(true);
+      setShareUserId('');
+    } catch {
+      setShareError("Impossible d'envoyer l'invitation.");
+    }
+    setSharing(false);
+  }
+
   if (loading) {
     return (
       <div className="flex flex-col gap-3">
@@ -77,11 +160,50 @@ export default function PlaylistPage() {
   }
 
   const { playlist, videos, permission } = data;
+  const isOwner = permission === 'owner';
 
   return (
     <div className="flex flex-col gap-6">
 
-      <div className="flex flex-col gap-1 border-b border-od-border pb-6">
+      {/* Header */}
+      <div className="flex flex-col gap-3 border-b border-od-border pb-6">
+        {editOpen ? (
+          <form onSubmit={handleEdit} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
+            <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Modifier</p>
+            <input
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              required
+              className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+            />
+            <select
+              value={editVisibility}
+              onChange={(e) => setEditVisibility(e.target.value as 'private' | 'shared' | 'public')}
+              className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+            >
+              <option value="private">Privée</option>
+              <option value="shared">Partagée</option>
+              <option value="public">Publique</option>
+            </select>
+            <div className="flex gap-2">
+              <button
+                type="submit"
+                disabled={saving}
+                className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+              >
+                {saving ? '…' : 'Enregistrer'}
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditOpen(false)}
+                className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+              >
+                Annuler
+              </button>
+            </div>
+          </form>
+        ) : (
+          <>
             <div className="flex items-center gap-3">
               <h1 className="text-xl font-semibold text-od-text">{playlist.title}</h1>
               <span className="font-mono text-xs text-od-muted">{permission}</span>
@@ -89,29 +211,111 @@ export default function PlaylistPage() {
             {playlist.description && (
               <p className="text-sm text-od-muted">{playlist.description}</p>
             )}
+            {isOwner && (
+              <div className="flex gap-2">
+                <button
+                  onClick={openEdit}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
+                >
+                  Éditer
+                </button>
+                <button
+                  onClick={() => { setShareOpen(true); setShareError(null); setShareOk(false); }}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
+                >
+                  Partager
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors"
+                >
+                  Supprimer
+                </button>
+              </div>
+            )}
+          </>
+        )}
+        {actionError && <p className="font-mono text-xs text-od-crit">{actionError}</p>}
       </div>
 
+      {/* Share modal */}
+      {shareOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-od-bg/80">
+          <div className="w-full max-w-sm rounded border border-od-border bg-od-surface p-6 flex flex-col gap-4">
+            <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Partager</p>
+            <form onSubmit={handleShare} className="flex flex-col gap-3">
+              <input
+                value={shareUserId}
+                onChange={(e) => setShareUserId(e.target.value)}
+                placeholder="ID utilisateur"
+                required
+                className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+              />
+              <select
+                value={sharePermission}
+                onChange={(e) => setSharePermission(e.target.value as 'view' | 'edit')}
+                className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+              >
+                <option value="view">Lecture seule</option>
+                <option value="edit">Édition</option>
+              </select>
+              {shareError && <p className="font-mono text-xs text-od-crit">{shareError}</p>}
+              {shareOk && <p className="font-mono text-xs text-od-ok">Invitation envoyée.</p>}
+              <div className="flex gap-2">
+                <button
+                  type="submit"
+                  disabled={sharing || !shareUserId.trim()}
+                  className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+                >
+                  {sharing ? '…' : 'Inviter'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShareOpen(false)}
+                  className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+                >
+                  Fermer
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Videos */}
       {videos.length === 0 ? (
         <p className="text-sm text-od-muted">Aucune vidéo dans cette playlist.</p>
       ) : (
         <div className="flex flex-col gap-2">
           {videos.map((v, i) => (
-            <Link
+            <div
               key={v.id}
-              to={`/video/${v.id}`}
+              className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
-              className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3 hover:border-od-accent/40 transition-colors"
             >
               <span className="font-mono text-xs text-od-muted w-5 shrink-0">{i + 1}</span>
+              <Link
+                to={`/video/${v.id}`}
+                className="flex flex-1 items-center gap-4 hover:opacity-80 transition-opacity min-w-0"
+              >
                 {v.thumbnailUrl && (
                   <img src={v.thumbnailUrl} alt="" className="h-10 w-16 rounded object-cover shrink-0" />
                 )}
-              <span className="flex-1 text-sm text-od-text">{v.title}</span>
+                <span className="flex-1 text-sm text-od-text truncate">{v.title}</span>
                 {v.duration && (
                   <span className="font-mono text-xs text-od-muted shrink-0">
                     {Math.floor(v.duration / 60)}:{String(v.duration % 60).padStart(2, '0')}
                   </span>
                 )}
               </Link>
+              {isOwner && (
+                <button
+                  onClick={() => handleRemoveVideo(v.id)}
+                  className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors shrink-0"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
           ))}
         </div>
       )}

frontend/src/pages/PlaylistsPage.tsx

@@ -9,28 +9,40 @@ interface Playlist {
   visibility: 'private' | 'shared' | 'public';
 }
 
+interface Invitation {
+  shareId: string;
+  playlistId: string;
+  playlistTitle: string;
+  permission: 'view' | 'edit';
+}
+
 interface PlaylistsResponse {
   success: boolean;
   data: {
     owned: Playlist[];
     shared: (Playlist & { permission: 'view' | 'edit' })[];
+    invitations?: Invitation[];
   };
 }
 
 export default function PlaylistsPage() {
   const [owned, setOwned] = useState<Playlist[]>([]);
   const [shared, setShared] = useState<(Playlist & { permission: 'view' | 'edit' })[]>([]);
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
   const [loading, setLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [createTitle, setCreateTitle] = useState('');
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
+  const [inviteError, setInviteError] = useState<string | null>(null);
+  const [respondingId, setRespondingId] = useState<string | null>(null);
 
   useEffect(() => {
     apiFetch<PlaylistsResponse>('/playlists')
       .then((res) => {
         setOwned(res.data.owned);
         setShared(res.data.shared);
+        setInvitations(res.data.invitations ?? []);
       })
       .catch(() => setFetchError('Impossible de charger les playlists.'))
       .finally(() => setLoading(false));
@@ -54,6 +66,28 @@ export default function PlaylistsPage() {
     setCreating(false);
   }
 
+  async function respondInvitation(inv: Invitation, status: 'accepted' | 'revoked') {
+    if (respondingId) return;
+    setRespondingId(inv.shareId);
+    setInviteError(null);
+    try {
+      await apiFetch(`/playlists/${inv.playlistId}/share/${inv.shareId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status }),
+      });
+      setInvitations((prev) => prev.filter((i) => i.shareId !== inv.shareId));
+      if (status === 'accepted') {
+        const res = await apiFetch<PlaylistsResponse>('/playlists');
+        setOwned(res.data.owned);
+        setShared(res.data.shared);
+        setInvitations(res.data.invitations ?? []);
+      }
+    } catch {
+      setInviteError("Impossible de répondre à l'invitation.");
+    }
+    setRespondingId(null);
+  }
+
   if (loading) {
     return (
       <div className="flex flex-col gap-3">
@@ -96,6 +130,41 @@ export default function PlaylistsPage() {
         {createError && <p className="font-mono text-xs text-od-crit">{createError}</p>}
       </div>
 
+      {/* Invitations reçues */}
+      {invitations.length > 0 && (
+        <section className="flex flex-col gap-2">
+          <h2 className="font-mono text-xs uppercase tracking-widest text-od-muted">Invitations</h2>
+          {inviteError && <p className="font-mono text-xs text-od-crit">{inviteError}</p>}
+          {invitations.map((inv) => (
+            <div
+              key={inv.shareId}
+              className="flex items-center justify-between gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
+            >
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-sm text-od-text truncate">{inv.playlistTitle}</span>
+                <span className="font-mono text-xs text-od-muted">{inv.permission}</span>
+              </div>
+              <div className="flex gap-2 shrink-0">
+                <button
+                  disabled={respondingId === inv.shareId}
+                  onClick={() => respondInvitation(inv, 'accepted')}
+                  className="rounded border border-od-ok px-3 py-1 font-mono text-xs text-od-ok hover:bg-od-ok hover:text-od-bg transition-colors disabled:opacity-40"
+                >
+                  {respondingId === inv.shareId ? '…' : 'Accepter'}
+                </button>
+                <button
+                  disabled={respondingId === inv.shareId}
+                  onClick={() => respondInvitation(inv, 'revoked')}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors disabled:opacity-40"
+                >
+                  Refuser
+                </button>
+              </div>
+            </div>
+          ))}
+        </section>
+      )}
+
       {/* Mes playlists */}
       {owned.length > 0 && (
         <section className="flex flex-col gap-2">
@@ -112,7 +181,7 @@ export default function PlaylistsPage() {
         </section>
       )}
 
-      {owned.length === 0 && shared.length === 0 && (
+      {owned.length === 0 && shared.length === 0 && invitations.length === 0 && (
         <p className="text-sm text-od-muted">Aucune playlist pour l'instant.</p>
       )}