add 0.5 seconds

src/providers/UserDataProvider.js

@@ -63,7 +63,9 @@ export default ({ children }) => {
     condition: !!currentUID,
     refreshArray: [currentUID],
   });
-
+  const userLikedPlaybacks = Array.isArray(userLikedProjects)
+    ? userLikedProjects.filter((project) => project.playbackUrl)
+    : [];
   // Subscribe to user's playlists
   const { data: userPlaylists = [] } = useDataFromRef({
     ref: currentUID ? playlistsRef.where("createdBy", "==", currentUID) : null,
@@ -118,7 +120,7 @@ export default ({ children }) => {
           ...partial,
           updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
         },
-        options,
+        options
       );
     } catch (e) {
       console.log("updateProjectData error", e?.message);
@@ -154,7 +156,7 @@ export default ({ children }) => {
             followedBy: arrayUnion(currentUID),
             lastFollowersUpdateAt: new Date(),
           },
-          { merge: true },
+          { merge: true }
         );
         setTooltip({ type: "success", text: "Abonnement mis à jour" });
       }
@@ -172,7 +174,7 @@ export default ({ children }) => {
             followedBy: arrayRemove(currentUID),
             lastFollowersUpdateAt: new Date(),
           },
-          { merge: true },
+          { merge: true }
         );
         setTooltip({
           type: "success",
@@ -303,6 +305,7 @@ export default ({ children }) => {
         userProjects,
         userPlaybacks,
         userLikedProjects,
+        userLikedPlaybacks,
         userPlaylists,
         selectedProjectId,
         selectedProject,

src/screens/Library/MusicDetails.js

@@ -217,6 +217,8 @@ const MusicDetails = () => {
     () => Math.max(0, (progressInfo.pos || 0) / 1000),
     [progressInfo.pos]
   );
+  // Preview lead: show words 0.5s earlier
+  const visibleTimeS = useMemo(() => Math.max(0, currentTimeS + 0.5), [currentTimeS]);
   // Group words into timed lines (similar to KaraokeLyrics)
   const groupAlignedWordsToLines = (words = [], { removeTags = true } = {}) => {
     const out = [];
@@ -296,13 +298,13 @@ const MusicDetails = () => {
     if (!lines || lines.length === 0) return -1;
     for (let i = 0; i < lines.length; i++) {
       const L = lines[i];
-      if (currentTimeS >= (L.startS || 0) && currentTimeS <= (L.endS || 0))
+      if (visibleTimeS >= (L.startS || 0) && visibleTimeS <= (L.endS || 0))
         return i;
     }
-    if (currentTimeS > (lines[lines.length - 1]?.endS || 0))
+    if (visibleTimeS > (lines[lines.length - 1]?.endS || 0))
       return lines.length - 1;
     return -1;
-  }, [lines, currentTimeS]);
+  }, [lines, visibleTimeS]);
 
   // Auto-scroll lyrics to keep the current line visible
   const lyricsRef = useRef(null);
@@ -487,7 +489,7 @@ const MusicDetails = () => {
                     <Text
                       key={`w-${i}-${j}`}
                       style={
-                        currentTimeS >= (w.startS || 0)
+                        visibleTimeS >= (w.startS || 0)
                           ? styles.karaokeWordActive
                           : styles.karaokeWord
                       }

src/screens/Library/components/BackTracks.js

@@ -1,9 +1,15 @@
 import React, { useState } from "react";
-import { FlatList, Image, Pressable, Text, View, useWindowDimensions } from "react-native";
+import {
+  FlatList,
+  Image,
+  Pressable,
+  Text,
+  View,
+  useWindowDimensions,
+} from "react-native";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
-import { Style } from "../../../styles";
 import CardContainer from "./CardContainer";
 const BackTracks = () => {
   const { userPlaybacks } = useUserData();
@@ -30,7 +36,11 @@ const BackTracks = () => {
             keyExtractor={(item) => item.id}
             renderItem={({ item }) => (
               <View style={{ width: itemWidth }} key={item.id}>
-                <Pressable onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}>
+                <Pressable
+                  onPress={() =>
+                    navigate(Routes.Playbacks, { projectId: item.id })
+                  }
+                >
                   <Image
                     source={{ uri: item.coverUrl || "" }}
                     style={{