From d5732917e318a4e9fa6a96bacaa95c1826f24a82 Mon Sep 17 00:00:00 2001
From: Claude Integration <claude@systemd.cosmolan.fr>
Date: Tue, 2 Jun 2026 02:03:23 +0000
Subject: [PATCH] =?UTF-8?q?feat(reels):=20swipe=20horizontal=20anim=C3=A9?=
 =?UTF-8?q?=20avec=20suivi=20du=20doigt=20+=20snap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/decouvrir/_components/ReelSlide.tsx | 290 +++++++++++++++-----
 1 file changed, 216 insertions(+), 74 deletions(-)

diff --git a/src/app/decouvrir/_components/ReelSlide.tsx b/src/app/decouvrir/_components/ReelSlide.tsx
index a8476f4..7c1b4e7 100644
--- a/src/app/decouvrir/_components/ReelSlide.tsx
+++ b/src/app/decouvrir/_components/ReelSlide.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 
 import type { ReelCarbet } from "@/lib/reels";
@@ -14,36 +14,71 @@ type Props = {
   onToggleFavorite: () => void;
 };
 
+const SWIPE_THRESHOLD_RATIO = 0.18; // % de la largeur pour valider le swipe
+const VELOCITY_THRESHOLD = 0.4; // px/ms — un flick rapide même court valide
+
 export function ReelSlide({ carbet, isActive, shouldPreload, isFavorite, onToggleFavorite }: Props) {
   const [mediaIndex, setMediaIndex] = useState(0);
   const [muted, setMuted] = useState(true);
-  const touchStart = useRef<{ x: number; y: number } | null>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
+  const [dragX, setDragX] = useState(0);
+  const [transitioning, setTransitioning] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const videoRefs = useRef<Map<number, HTMLVideoElement>>(new Map());
+  const drag = useRef<{
+    startX: number;
+    startY: number;
+    startTime: number;
+    locked: "horizontal" | "vertical" | null;
+  } | null>(null);
 
+  const total = carbet.media.length;
   const current = carbet.media[mediaIndex];
 
-  const nextMedia = useCallback(() => {
-    setMediaIndex((i) => (i + 1) % carbet.media.length);
-  }, [carbet.media.length]);
-  const prevMedia = useCallback(() => {
-    setMediaIndex((i) => (i - 1 + carbet.media.length) % carbet.media.length);
-  }, [carbet.media.length]);
+  const goTo = useCallback(
+    (next: number, animated = true) => {
+      const clamped = ((next % total) + total) % total;
+      setTransitioning(animated);
+      setMediaIndex(clamped);
+      setDragX(0);
+    },
+    [total],
+  );
 
-  // Auto-play/pause vidéos quand slide active
+  const nextMedia = useCallback(() => goTo(mediaIndex + 1), [goTo, mediaIndex]);
+  const prevMedia = useCallback(() => goTo(mediaIndex - 1), [goTo, mediaIndex]);
+
+  // Suit la largeur du container pour les calculs de seuils / progress
   useEffect(() => {
-    if (!videoRef.current) return;
-    if (isActive && current?.type === "VIDEO") {
-      videoRef.current.play().catch(() => {});
-    } else {
-      videoRef.current.pause();
-    }
-  }, [isActive, current?.type, mediaIndex]);
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => setContainerWidth(el.offsetWidth || window.innerWidth);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    window.addEventListener("resize", update);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, []);
 
-  // Reset au changement de slide (différé pour éviter cascading renders)
+  // Auto-play/pause vidéos selon média actif
+  useEffect(() => {
+    videoRefs.current.forEach((video, idx) => {
+      if (idx === mediaIndex && isActive && carbet.media[idx]?.type === "VIDEO") {
+        video.play().catch(() => {});
+      } else {
+        video.pause();
+      }
+    });
+  }, [isActive, mediaIndex, carbet.media]);
+
+  // Reset au changement de slide carbet (différé pour éviter cascading renders)
   useEffect(() => {
     if (isActive) return;
-    queueMicrotask(() => setMediaIndex(0));
-  }, [isActive]);
+    queueMicrotask(() => goTo(0, false));
+  }, [isActive, goTo]);
 
   // Navigation clavier ← →
   useEffect(() => {
@@ -65,21 +100,88 @@ export function ReelSlide({ carbet, isActive, shouldPreload, isFavorite, onToggl
 
   function onTouchStart(e: React.TouchEvent) {
     const t = e.touches[0];
-    touchStart.current = { x: t.clientX, y: t.clientY };
+    drag.current = {
+      startX: t.clientX,
+      startY: t.clientY,
+      startTime: Date.now(),
+      locked: null,
+    };
+    setTransitioning(false);
   }
-  function onTouchEnd(e: React.TouchEvent) {
-    if (!touchStart.current) return;
-    const t = e.changedTouches[0];
-    const dx = t.clientX - touchStart.current.x;
-    const dy = t.clientY - touchStart.current.y;
-    touchStart.current = null;
-    // Seuil horizontal > vertical pour considérer un swipe horizontal
-    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2) {
-      if (dx < 0) nextMedia();
-      else prevMedia();
+
+  function onTouchMove(e: React.TouchEvent) {
+    if (!drag.current) return;
+    const t = e.touches[0];
+    const dx = t.clientX - drag.current.startX;
+    const dy = t.clientY - drag.current.startY;
+
+    // Première détection : verrouille l'axe (horizontal ou vertical)
+    if (drag.current.locked === null) {
+      if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return; // trop petit, attend
+      drag.current.locked = Math.abs(dx) > Math.abs(dy) ? "horizontal" : "vertical";
+    }
+
+    if (drag.current.locked !== "horizontal") return;
+    // Empêche le scroll vertical pendant un swipe horizontal
+    e.stopPropagation();
+    if (e.cancelable) e.preventDefault();
+
+    // Résistance aux bords : si on swipe gauche sur le 1er ou droite sur le dernier,
+    // on glisse moins (effet rubber-band)
+    let effective = dx;
+    if (total <= 1) {
+      effective = dx * 0.2;
+    } else if (mediaIndex === 0 && dx > 0) {
+      effective = dx * 0.35;
+    } else if (mediaIndex === total - 1 && dx < 0) {
+      effective = dx * 0.35;
+    }
+    setDragX(effective);
+  }
+
+  function onTouchEnd() {
+    if (!drag.current) return;
+    const wasHorizontal = drag.current.locked === "horizontal";
+    const elapsed = Date.now() - drag.current.startTime;
+    const width = containerWidth || window.innerWidth;
+    const velocity = Math.abs(dragX) / Math.max(1, elapsed); // px/ms
+    drag.current = null;
+
+    if (!wasHorizontal) {
+      setDragX(0);
+      return;
+    }
+
+    const distance = Math.abs(dragX);
+    const isFlick = velocity > VELOCITY_THRESHOLD && distance > 20;
+    const isSlow = distance > width * SWIPE_THRESHOLD_RATIO;
+    const shouldChange = (isFlick || isSlow) && total > 1;
+
+    if (shouldChange) {
+      if (dragX < 0 && mediaIndex < total - 1) {
+        goTo(mediaIndex + 1);
+      } else if (dragX > 0 && mediaIndex > 0) {
+        goTo(mediaIndex - 1);
+      } else {
+        // Bord : retour à 0
+        setTransitioning(true);
+        setDragX(0);
+      }
+    } else {
+      setTransitioning(true);
+      setDragX(0);
     }
   }
 
+  // Préchargement intelligent : current, current ± 1
+  const preloadIndexes = useMemo(() => {
+    const s = new Set<number>();
+    s.add(mediaIndex);
+    if (mediaIndex > 0) s.add(mediaIndex - 1);
+    if (mediaIndex < total - 1) s.add(mediaIndex + 1);
+    return s;
+  }, [mediaIndex, total]);
+
   const share = useCallback(async () => {
     const url = `${window.location.origin}/carbets/${carbet.slug}`;
     const title = carbet.title;
@@ -92,57 +194,97 @@ export function ReelSlide({ carbet, isActive, shouldPreload, isFavorite, onToggl
 
   if (!current) return null;
 
+  const offsetPct = -mediaIndex * 100;
+
   return (
-    <div
-      className="relative h-full w-full bg-black"
-      onTouchStart={onTouchStart}
-      onTouchEnd={onTouchEnd}
-    >
-      {/* Média */}
-      <div className="absolute inset-0 flex items-center justify-center">
-        {current.type === "VIDEO" ? (
-          <video
-            ref={videoRef}
-            src={shouldPreload ? current.url : undefined}
-            data-src={current.url}
-            muted={muted}
-            playsInline
-            loop
-            preload={shouldPreload ? "auto" : "none"}
-            className="h-full w-full object-cover"
-            onClick={() => setMuted((m) => !m)}
-          />
-        ) : (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={shouldPreload ? current.url : undefined}
-            srcSet={shouldPreload ? buildSrcSet(current.url) : undefined}
-            sizes="(min-width: 768px) 800px, 100vw"
-            data-src={current.url}
-            alt={`${carbet.title} — média ${mediaIndex + 1}`}
-            loading={shouldPreload ? "eager" : "lazy"}
-            fetchPriority={shouldPreload ? "high" : "auto"}
-            decoding="async"
-            className="h-full w-full object-cover"
-          />
-        )}
+    <div className="relative h-full w-full overflow-hidden bg-black">
+      {/* Track : tous les médias en ligne, transformX selon index + drag */}
+      <div
+        ref={containerRef}
+        className="absolute inset-0 flex"
+        style={{
+          width: `${total * 100}%`,
+          transform: `translateX(calc(${offsetPct / total}% + ${dragX}px))`,
+          transition: transitioning ? "transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1)" : "none",
+          touchAction: "pan-y",
+        }}
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        onTransitionEnd={() => setTransitioning(false)}
+      >
+        {carbet.media.map((m, idx) => {
+          const visible = preloadIndexes.has(idx) || shouldPreload;
+          return (
+            <div
+              key={m.id}
+              className="relative flex h-full shrink-0 items-center justify-center"
+              style={{ width: `${100 / total}%` }}
+              aria-hidden={idx !== mediaIndex}
+            >
+              {m.type === "VIDEO" ? (
+                <video
+                  ref={(el) => {
+                    if (el) videoRefs.current.set(idx, el);
+                    else videoRefs.current.delete(idx);
+                  }}
+                  src={visible ? m.url : undefined}
+                  muted={muted}
+                  playsInline
+                  loop
+                  preload={visible ? "auto" : "none"}
+                  className="h-full w-full object-cover"
+                />
+              ) : (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={visible ? m.url : undefined}
+                  srcSet={visible ? buildSrcSet(m.url) : undefined}
+                  sizes="(min-width: 768px) 800px, 100vw"
+                  alt={`${carbet.title} — média ${idx + 1}`}
+                  loading={idx === mediaIndex ? "eager" : "lazy"}
+                  fetchPriority={idx === mediaIndex ? "high" : "auto"}
+                  decoding="async"
+                  draggable={false}
+                  className="h-full w-full select-none object-cover"
+                />
+              )}
+            </div>
+          );
+        })}
       </div>
 
       {/* Voile dégradé en bas pour lisibilité */}
       <div className="pointer-events-none absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
 
       {/* Indicateurs progression médias (sticks en haut) */}
-      {carbet.media.length > 1 ? (
+      {total > 1 ? (
         <div className="pointer-events-none absolute left-3 right-3 top-12 flex gap-1">
-          {carbet.media.map((_, i) => (
-            <span
-              key={i}
-              className={
-                "h-0.5 flex-1 rounded-full " +
-                (i === mediaIndex ? "bg-white" : i < mediaIndex ? "bg-white/60" : "bg-white/30")
-              }
-            />
-          ))}
+          {carbet.media.map((_, i) => {
+            const isActiveStick = i === mediaIndex;
+            const wasSeen = i < mediaIndex;
+            // Progression visuelle pendant le drag (preview du swipe)
+            const progress = isActiveStick && Math.abs(dragX) > 0 && containerWidth > 0
+              ? Math.min(1, Math.abs(dragX) / containerWidth)
+              : 0;
+            return (
+              <span
+                key={i}
+                className={
+                  "relative h-0.5 flex-1 overflow-hidden rounded-full " +
+                  (isActiveStick ? "bg-white/30" : wasSeen ? "bg-white/60" : "bg-white/30")
+                }
+              >
+                <span
+                  className={
+                    "absolute inset-y-0 left-0 bg-white " +
+                    (isActiveStick ? "w-full" : wasSeen ? "w-full" : "w-0")
+                  }
+                  style={progress > 0 ? { width: `${progress * 100}%` } : undefined}
+                />
+              </span>
+            );
+          })}
         </div>
       ) : null}