add 0.5 seconds

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