fix video

src/screens/Playbacks/components/PlaybackItem.web.js

@@ -32,12 +32,21 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
 import { size } from "../../../styles/Style";
 import CommentsPanel from "./CommentsPanel.web";
 
+// Debug logging toggle for web playback
+const DEBUG_PLAYBACK_WEB = true;
+
 // NOTE: Web-only implementation that uses a native <video> element instead of expo-video
 // - No Platform checks
-// - Handles autoplay requirements (muted first, unmute on first gesture)
-// - Keeps external audio track in sync when present
+// - Always relies on an external audio track for playback
+// - Keeps the muted video visuals in sync with the external audio clock
 
-const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
+const PlaybackItem = ({
+  item,
+  isActive,
+  userCache,
+  getUserByUid,
+  onBackgroundSync,
+}) => {
   const { width: viewportWidth, height: viewportHeight } =
     useWindowDimensions();
 
@@ -51,13 +60,15 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
 
   const videoUrl = item?.playbackUrl || null;
   const videoRef = useRef(null); // HTMLVideoElement
+  const wasActiveRef = useRef(false);
+  const startedRef = useRef(false);
+  const debugTickRef = useRef(0);
+  const pendingSeekRef = useRef(false);
 
   const audioSource = useMemo(() => {
     const fromSong = item?.songUrl ? { uri: item.songUrl } : null;
     return fromSong;
-  }, [item]);
-
-  const hasExternalAudio = !!audioSource;
+  }, [item?.songUrl]);
 
   const initialLikedBy = Array.isArray(item?.likedBy) ? item.likedBy : [];
   const [isLiked, setIsLiked] = useState(
@@ -135,6 +146,30 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
 
   const audioPlayer = useAudioPlayer(audioSource || undefined);
 
+  // Helpers to normalize and map clocks
+  const getAudioTimeSeconds = useCallback(() => {
+    const raw = Number(audioPlayer?.currentTime || 0);
+    // On web, expo-audio currentTime can be in ms; convert if it looks like ms (>1000)
+    const seconds = raw > 1000 ? raw / 1000 : raw;
+    return Number.isFinite(seconds) ? seconds : 0;
+  }, [audioPlayer]);
+
+  const getTargetVideoTime = useCallback(
+    (el) => {
+      const sec = getAudioTimeSeconds();
+      const dur = Number(el?.duration || NaN);
+      if (Number.isFinite(dur) && dur > 0.3) {
+        let t = sec % dur;
+        // Avoid setting time extremely close to the end to prevent immediate loop
+        const guard = Math.max(0, dur - 0.25);
+        if (t > guard) t = guard;
+        return t;
+      }
+      return sec;
+    },
+    [getAudioTimeSeconds]
+  );
+
   // --- Playback control helpers (web <video>) ---
   const playVideo = useCallback(async () => {
     try {
@@ -148,96 +183,133 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     } catch (_e) {}
   }, []);
 
-  const unmuteVideoOnFirstGesture = useCallback(() => {
-    if (typeof document === "undefined") return () => {};
-    const handler = async () => {
-      try {
-        const el = videoRef.current;
-        if (!el) return;
-        if (!hasExternalAudio) {
-          el.muted = false; // restore sound if video is the only audio
+  const syncVideoClockToAudio = useCallback(() => {
+    try {
+      const el = videoRef.current;
+      if (!el) return;
+      const audioTimeS = getAudioTimeSeconds();
+      const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
+      if (!audioIsPlaying) return;
+      const target = getTargetVideoTime(el);
+
+      // If not enough data loaded to seek accurately, attach one-time seek on loadeddata
+      if (el.readyState < 2) {
+        if (!pendingSeekRef.current) {
+          pendingSeekRef.current = true;
+          const handler = () => {
+            try {
+              const t = getTargetVideoTime(el);
+              el.currentTime = t;
+              if (el.paused) el.play().catch(() => {});
+              if (DEBUG_PLAYBACK_WEB) {
+                console.log("[PlaybackItem.web] deferred seek on loadeddata", {
+                  t,
+                  rs: el.readyState,
+                });
+              }
+            } catch (_) {}
+            pendingSeekRef.current = false;
+          };
+          el.addEventListener("loadeddata", handler, { once: true });
         }
-        if (el.paused) await el.play();
-        if (hasExternalAudio && audioPlayer && !audioPlayer.playing) {
-          await audioPlayer.play?.();
+        return;
+      }
+
+      const diff = Math.abs((el.currentTime || 0) - target);
+      if (diff > 0.5) {
+        if (DEBUG_PLAYBACK_WEB) {
+          console.log("[PlaybackItem.web] sync video", {
+            audioTimeS,
+            target,
+            videoTime: Number(el.currentTime || 0),
+            duration: Number(el.duration || 0),
+          });
         }
-      } catch (_e) {}
-    };
-    const events = [
-      "pointerdown",
-      "click",
-      "touchstart",
-      "keydown",
-      "wheel",
-      "scroll",
-    ];
-    events.forEach((ev) =>
-      document.addEventListener(ev, handler, { once: true, passive: true })
-    );
-    return () => {
-      events.forEach((ev) => document.removeEventListener(ev, handler));
-    };
-  }, [audioPlayer, hasExternalAudio]);
+        el.currentTime = target;
+        if (el.paused) el.play().catch(() => {});
+      }
+    } catch (_e) {}
+  }, [audioPlayer, getAudioTimeSeconds, getTargetVideoTime]);
 
   // Start/reset when active
   useEffect(() => {
     const el = videoRef.current;
     if (!isActive || !el) return;
+    if (startedRef.current) return;
 
     const start = async () => {
       try {
-        // Reset clocks
-        if (audioPlayer && hasExternalAudio) await audioPlayer.seekTo?.(0);
-        el.currentTime = 0;
-
-        await playVideo();
-        if (hasExternalAudio && audioPlayer && !audioPlayer.playing) {
-          await audioPlayer.play?.();
+        if (DEBUG_PLAYBACK_WEB) {
+          console.log("[PlaybackItem.web] start()", {
+            isActive,
+            audioPlaying: !!audioPlayer?.playing,
+            audioTime: Number(audioPlayer?.currentTime || 0),
+            videoPaused: el.paused,
+            videoTime: Number(el.currentTime || 0),
+            readyState: el.readyState,
+          });
         }
+
+        // 1) Start the visual first to guarantee motion
+        await playVideo();
+
+        // 2) Try to start audio, but don't force sync until it's actually playing
+        if (audioPlayer && !audioPlayer.playing) {
+          try {
+            await audioPlayer.play?.();
+          } catch (_e) {}
+        }
+
+        // 3) Choose the best clock available for initial background sync
+        const audioTimeS = getAudioTimeSeconds();
+        const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
+        const videoTime = Number(el.currentTime || 0);
+        const clockTime = audioIsPlaying ? getTargetVideoTime(el) : videoTime;
+        onBackgroundSync?.({
+          currentTime: Number.isFinite(clockTime) ? clockTime : 0,
+          isPlaying: audioIsPlaying || !el.paused,
+        });
+
+        startedRef.current = true;
       } catch (_e) {}
     };
 
     start();
-    const removeGesture = unmuteVideoOnFirstGesture();
-    return () => {
-      removeGesture?.();
-    };
+    return () => {};
   }, [
     isActive,
     playVideo,
     audioPlayer,
-    hasExternalAudio,
-    unmuteVideoOnFirstGesture,
+    syncVideoClockToAudio,
+    onBackgroundSync,
   ]);
 
-  // Keep external audio & video roughly in sync (when audio is the source of truth)
   useEffect(() => {
-    if (!isActive || !hasExternalAudio) return;
-    const id = setInterval(() => {
-      try {
-        if (!audioPlayer?.playing) return;
-        const el = videoRef.current;
-        if (!el) return;
-        const a = Number(audioPlayer?.currentTime || 0);
-        const v = Number(el.currentTime || 0);
-        if (Math.abs(a - v) > 0.2) {
-          el.currentTime = Math.max(0, a);
-        }
-      } catch (_e) {}
-    }, 300);
-    return () => clearInterval(id);
-  }, [isActive, hasExternalAudio, audioPlayer]);
+    if (isActive) return;
+    try {
+      if (audioPlayer?.playing) audioPlayer.pause?.();
+    } catch (_e) {}
+
+    const el = videoRef.current;
+    if (!el) return;
+    try {
+      if (!el.paused) el.pause();
+      el.muted = true;
+    } catch (_e) {}
+    startedRef.current = false;
+  }, [isActive, audioPlayer]);
 
   // Pause all on unmount
   useEffect(() => {
+    const el = videoRef.current; // snapshot ref for cleanup
     return () => {
       try {
-        const el = videoRef.current;
         if (audioPlayer?.playing) audioPlayer.pause?.();
         if (el && !el.paused) el.pause();
       } catch (_e) {}
+      onBackgroundSync?.({ isPlaying: false });
     };
-  }, [audioPlayer]);
+  }, [audioPlayer, onBackgroundSync]);
 
   // Lyrics timing
   const alignedWords = useMemo(() => {
@@ -256,15 +328,67 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     if (!isActive) return;
     const id = setInterval(() => {
       try {
-        const useAudioTime = hasExternalAudio && !!audioPlayer?.playing;
-        const t = useAudioTime
-          ? Number(audioPlayer?.currentTime || 0)
-          : Number(videoRef.current?.currentTime || 0);
-        setCurrentTimeS(t);
+        const el = videoRef.current;
+        const audioTimeS = getAudioTimeSeconds();
+        const audioIsPlaying = !!audioPlayer?.playing || audioTimeS > 0.05;
+        const videoTime = Number(el?.currentTime || 0);
+
+        // Lyrics: real audio seconds (normalized), not modulo
+        const timeForLyrics =
+          audioIsPlaying && Number.isFinite(audioTimeS)
+            ? audioTimeS
+            : Number.isFinite(videoTime)
+              ? videoTime
+              : 0;
+        setCurrentTimeS(timeForLyrics);
+
+        // Keep video roughly in sync with audio only when audio is genuinely playing
+        if (audioIsPlaying) {
+          syncVideoClockToAudio();
+        }
+
+        onBackgroundSync?.({
+          // Background video: use the same modulo/clamped target as the main video to avoid loop-thrashing
+          currentTime: getTargetVideoTime(el),
+          isPlaying: audioIsPlaying || (!!el && !el.paused),
+        });
+
+        if (DEBUG_PLAYBACK_WEB) {
+          const n = (debugTickRef.current = (debugTickRef.current + 1) % 4);
+          if (n === 0) {
+            console.log("[PlaybackItem.web] tick", {
+              audioPlaying: !!audioPlayer?.playing,
+              audioTimeS,
+              videoPaused: !!el?.paused,
+              videoTime,
+              started: startedRef.current,
+            });
+          }
+        }
       } catch (_e) {}
     }, 250);
     return () => clearInterval(id);
-  }, [isActive, hasExternalAudio, audioPlayer]);
+  }, [
+    isActive,
+    audioPlayer,
+    syncVideoClockToAudio,
+    onBackgroundSync,
+    getAudioTimeSeconds,
+    getTargetVideoTime,
+  ]);
+
+  useEffect(() => {
+    if (!onBackgroundSync) return undefined;
+    if (isActive) {
+      wasActiveRef.current = true;
+      return undefined;
+    }
+    if (wasActiveRef.current) {
+      onBackgroundSync({ isPlaying: false });
+      wasActiveRef.current = false;
+    }
+    return undefined;
+  }, [isActive, onBackgroundSync]);
 
   const descriptionText =
     item?.description || item?.title || "Description chanson";
@@ -304,6 +428,37 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   );
   const panelHeight = Math.min(videoHeight, desiredHeight);
 
+  // Attach verbose event listeners on the HTML video element
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el || !DEBUG_PLAYBACK_WEB) return undefined;
+    const handler = (e) => {
+      // Avoid heavy logs: only show key events and brief state
+      console.log("[PlaybackItem.web] video:", e.type, {
+        t: Number(el.currentTime || 0).toFixed(2),
+        paused: el.paused,
+        rs: el.readyState,
+      });
+    };
+    const events = [
+      "loadedmetadata",
+      "loadeddata",
+      "play",
+      "playing",
+      "pause",
+      "seeking",
+      "seeked",
+      "stalled",
+      "waiting",
+      "ended",
+      "error",
+    ];
+    events.forEach((ev) => el.addEventListener(ev, handler));
+    return () => {
+      events.forEach((ev) => el.removeEventListener(ev, handler));
+    };
+  }, []);
+
   return (
     <View
       onLayout={handleLayout}
@@ -332,8 +487,6 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
                 src={videoUrl}
                 playsInline
                 muted
-                autoPlay
-                loop
                 preload="auto"
                 // Using web CSS properties here on purpose
                 style={{