clean

src/screens/Playbacks.js

@@ -13,6 +13,7 @@ import { Image, Platform, Pressable, Text, View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { icons, img } from "../assets";
+import KaraokeLyrics from "../components/KaraokeLyrics";
 import {
   arrayRemove,
   arrayUnion,
@@ -163,6 +164,34 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     };
   }, [audioPlayer, videoPlayer]);
 
+  // Build alignedWords from item musicTimestamps
+  const alignedWords = useMemo(() => {
+    const idx = Number(item?.songIndex) || 0;
+    const ts = item?.musicTimestamps?.[idx];
+
+    const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
+    return arr.map((w) => ({
+      word: String(w?.word ?? ""),
+      startS: Number(w?.startS ?? 0),
+      endS: Number(w?.endS ?? 0),
+    }));
+  }, [item?.musicTimestamps, item?.songIndex]);
+
+  // Track current time for lyrics sync
+  const [currentTimeS, setCurrentTimeS] = useState(0);
+  useEffect(() => {
+    if (!isActive) return;
+    const id = setInterval(() => {
+      try {
+        const t = hasExternalAudio
+          ? Number(audioPlayer?.currentTime || 0)
+          : Number(videoPlayer?.currentTime || 0);
+        setCurrentTimeS(t);
+      } catch (e) {}
+    }, 250);
+    return () => clearInterval(id);
+  }, [isActive, hasExternalAudio, audioPlayer, videoPlayer]);
+
   return (
     <View
       style={{
@@ -343,15 +372,22 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
               Platform.OS !== "ios" ? "dimezisBlurView" : "none"
             }
           >
-            <Text
-              style={{
-                fontSize: 12,
-                color: Palette.white,
-                fontFamily: FONT_FAMILY.InterRegular,
-              }}
-            >
-              {item?.title || "Description chanson"}
-            </Text>
+            {alignedWords?.length > 0 ? (
+              <KaraokeLyrics
+                alignedWords={alignedWords}
+                currentTimeS={currentTimeS}
+              />
+            ) : (
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                {item?.title || "Description chanson"}
+              </Text>
+            )}
           </BlurView>
         </View>
       </View>