fix video

src/screens/Playbacks/Playbacks.web.js

@@ -10,7 +10,6 @@ import PlaybackItem from "./components/PlaybackItem.web";
 const Playbacks = () => {
   const { height: windowHeight } = useWindowDimensions();
   const [activeIndex, setActiveIndex] = useState(0);
-  const carouselRef = useRef(null);
   const route = useRoute();
   const focusProjectId =
     route?.params?.projectId || route?.params?.focusId || null;
@@ -25,15 +24,132 @@ const Playbacks = () => {
     batchSize: 6,
   });
 
+  const activePlayback = playbacks?.[activeIndex] || null;
+  const activeVideoUrl = activePlayback?.playbackUrl || null;
+  const backgroundVideoRef = useRef(null);
+  const lastActiveIndexRef = useRef(0);
+  const backgroundSeekPendingRef = useRef(false);
+  const listRef = useRef(null);
+
+  useEffect(() => {
+    const total = playbacks?.length || 0;
+    if (total <= 0) {
+      if (activeIndex !== 0) {
+        lastActiveIndexRef.current = 0;
+        setActiveIndex(0);
+      }
+      return;
+    }
+    const maxIndex = total - 1;
+    if (activeIndex > maxIndex) {
+      lastActiveIndexRef.current = maxIndex;
+      setActiveIndex(maxIndex);
+    }
+  }, [playbacks?.length, activeIndex]);
+
+  const handleActiveIndexChange = useCallback(
+    (rawIndex) => {
+      if (Number.isNaN(rawIndex)) return;
+      const total = playbacks?.length || 0;
+      const maxIndex = Math.max(0, total - 1);
+      const clamped = Math.max(0, Math.min(rawIndex, maxIndex));
+      if (clamped === lastActiveIndexRef.current) return;
+      lastActiveIndexRef.current = clamped;
+      setActiveIndex((prev) => (prev === clamped ? prev : clamped));
+      if (total > 0 && clamped >= Math.max(0, total - 6)) {
+        loadMore?.();
+      }
+    },
+    [playbacks?.length, loadMore]
+  );
+
+  const syncBackgroundVideo = useCallback(({ currentTime, isPlaying }) => {
+    const bg = backgroundVideoRef.current;
+    if (!bg) return;
+
+    if (typeof currentTime === "number" && Number.isFinite(currentTime)) {
+      const applyTime = () => {
+        backgroundSeekPendingRef.current = false;
+        const diff = Math.abs((bg.currentTime || 0) - currentTime);
+        if (diff > 0.25) {
+          try {
+            bg.currentTime = currentTime;
+          } catch (_e) {}
+        }
+      };
+
+      if (bg.readyState >= 1) applyTime();
+      else if (!backgroundSeekPendingRef.current) {
+        backgroundSeekPendingRef.current = true;
+        const handler = () => applyTime();
+        bg.addEventListener("loadeddata", handler, { once: true });
+      }
+    }
+
+    if (isPlaying === true) {
+      if (bg.paused) {
+        bg.play().catch(() => {});
+      }
+    } else if (isPlaying === false) {
+      try {
+        if (!bg.paused) bg.pause();
+      } catch (_e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    const bg = backgroundVideoRef.current;
+    if (!bg) return;
+    if (!activeVideoUrl) {
+      backgroundSeekPendingRef.current = false;
+      try {
+        bg.pause();
+      } catch (_e) {}
+      bg.removeAttribute?.("src");
+      bg.load?.();
+      return;
+    }
+    backgroundSeekPendingRef.current = false;
+    const setSrcIfNeeded = () => {
+      const attrSrc = bg.getAttribute("src");
+      if (attrSrc !== activeVideoUrl) {
+        bg.setAttribute("src", activeVideoUrl);
+        try {
+          bg.load();
+        } catch (_e) {}
+      }
+    };
+
+    const startPlayback = () => {
+      bg.play().catch(() => {});
+    };
+
+    setSrcIfNeeded();
+
+    if (bg.readyState >= 2) {
+      startPlayback();
+      return;
+    }
+
+    const handleLoaded = () => {
+      startPlayback();
+    };
+    bg.addEventListener("loadeddata", handleLoaded, { once: true });
+    return () => {
+      bg.removeEventListener("loadeddata", handleLoaded);
+    };
+  }, [activeVideoUrl]);
+
   const triedLoadMoreRef = useRef(0);
   useEffect(() => {
     if (!focusProjectId) return;
     const idx = playbacks.findIndex((p) => p?.id === focusProjectId);
     if (idx >= 0) {
+      lastActiveIndexRef.current = idx;
       setActiveIndex(idx);
       setTimeout(() => {
         try {
-          carouselRef.current?.scrollTo?.({ index: idx, animated: false });
+          listRef.current?.scrollToIndex?.({ index: idx, animated: false });
         } catch (_e) {}
       }, 50);
     } else if (loadMore && triedLoadMoreRef.current < 6) {
@@ -43,22 +159,27 @@ const Playbacks = () => {
   }, [focusProjectId, playbacks, loadMore]);
 
   // === FlatList (one real page per item) ===
-  const listRef = useRef(null);
-
   // keep active index in sync with scroll
   const onMomentumScrollEnd = useCallback(
     (e) => {
       try {
         const y = e?.nativeEvent?.contentOffset?.y || 0;
         const idx = Math.round(y / windowHeight);
-        if (!Number.isNaN(idx))
-          setActiveIndex(
-            Math.max(0, Math.min(idx, (playbacks?.length || 1) - 1))
-          );
-        if (idx >= (playbacks?.length || 0) - 6) loadMore?.();
+        handleActiveIndexChange(idx);
       } catch (_e) {}
     },
-    [windowHeight, playbacks?.length, loadMore]
+    [windowHeight, handleActiveIndexChange]
+  );
+
+  const onScroll = useCallback(
+    (e) => {
+      try {
+        const y = e?.nativeEvent?.contentOffset?.y || 0;
+        const idx = Math.round(y / windowHeight);
+        handleActiveIndexChange(idx);
+      } catch (_e) {}
+    },
+    [windowHeight, handleActiveIndexChange]
   );
 
   // programmatic jump to focus item
@@ -66,6 +187,7 @@ const Playbacks = () => {
     if (!focusProjectId) return;
     const idx = playbacks.findIndex((p) => p?.id === focusProjectId);
     if (idx >= 0) {
+      lastActiveIndexRef.current = idx;
       setActiveIndex(idx);
       setTimeout(() => {
         try {
@@ -85,8 +207,36 @@ const Playbacks = () => {
   );
 
   return (
-    <Page headerType="NONE" width="100%" containerStyle={{ padding: 0 }}>
+    <Page
+      headerType="NONE"
+      width="100%"
+      containerStyle={{ padding: 0 }}
+    >
       <View style={styles.screen}>
+        {activeVideoUrl ? (
+          <View pointerEvents="none" style={styles.backgroundVideoWrapper}>
+            <video
+              ref={backgroundVideoRef}
+              key={activeVideoUrl}
+              src={activeVideoUrl}
+              autoPlay
+              muted
+              loop
+              playsInline
+              preload="auto"
+              style={{
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                filter: "blur(28px) saturate(120%) brightness(55%)",
+                transform: "scale(1.1)",
+              }}
+            />
+            <View style={styles.backgroundOverlay} />
+          </View>
+        ) : null}
         <FlatList
           ref={listRef}
           data={playbacks}
@@ -98,6 +248,7 @@ const Playbacks = () => {
                 userCache={userCache}
                 getUserByUid={getUserByUid}
                 isActive={isFocused && index === activeIndex}
+                onBackgroundSync={syncBackgroundVideo}
               />
             </View>
           )}
@@ -108,7 +259,8 @@ const Playbacks = () => {
           initialNumToRender={3}
           windowSize={5}
           removeClippedSubviews
-          scrollEventThrottle={32}
+          onScroll={onScroll}
+          scrollEventThrottle={16}
         />
       </View>
     </Page>
@@ -121,5 +273,16 @@ const styles = StyleSheet.create({
   screen: {
     flex: 1,
     overscrollBehavior: "none",
+    position: "relative",
+  },
+  backgroundVideoWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: "hidden",
+    zIndex: -1,
+    backgroundColor: "#060606",
+  },
+  backgroundOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(2, 2, 2, 0.35)",
   },
 });

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={{

src/screens/Writing/components/CreateLyricsHeader.js

@@ -1,10 +1,10 @@
-import { View, Text, Pressable, Platform } from "react-native";
-import React, { useState } from "react";
 import { BlurView } from "expo-blur";
+import React, { useState } from "react";
+import { Pressable, Text, View } from "react-native";
 import BorderGradient from "../../../components/BorderGradient/BorderGradient";
+import useLayoutType from "../../../hooks/useLayoutType";
 import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
-import useLayoutType from "../../../hooks/useLayoutType";
 
 const CreateLyricsHeader = ({
   title = "",