replay musics

src/screens/Library/MusicDetails.web.js

@@ -1,5 +1,6 @@
 import { BlurView } from "expo-blur";
 import { Image as ExpoImage } from "expo-image";
+import { Feather } from "@expo/vector-icons";
 import React, {
   useCallback,
   useEffect,
@@ -33,6 +34,7 @@ import {
 } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import useTrackController from "../../hooks/useTrackController";
+import usePlayer from "../../hooks/usePlayer";
 import Page from "../../layouts/Page";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
@@ -67,6 +69,7 @@ const MusicDetails = ({ route }) => {
   const incrementDoneRef = React.useRef(false);
   const timerRef = React.useRef(null);
   const hasAutoPlayedRef = React.useRef(false);
+  const { isLooping, setLooping } = usePlayer() || {};
 
   const { data: project } = useDataFromRef({
     ref: projectId ? projectsRef.doc(projectId) : null,
@@ -275,6 +278,7 @@ const MusicDetails = ({ route }) => {
   } = useTrackController(trackDescriptor);
 
   const isPlaying = isTrackPlaying;
+  const loopEnabled = isCurrentTrack && !!isLooping;
 
   // Karaoke aligned words (from timestamps)
   const alignedWords = useMemo(() => {
@@ -429,6 +433,31 @@ const MusicDetails = ({ route }) => {
     [trackDescriptor, durationMs, isCurrentTrack, ensureLoaded, seekTrackTo]
   );
 
+  const handleToggleLoop = useCallback(async () => {
+    if (!isCurrentTrack) return;
+    const next = !loopEnabled;
+    if (typeof setLooping === "function") {
+      setLooping(next);
+    }
+    if (next) {
+      try {
+        await seekTrackTo(0);
+        if (!isPlaying) {
+          await resumeTrack();
+        }
+      } catch (e) {
+        console.log("MusicDetails.web loop toggle error", e?.message);
+      }
+    }
+  }, [
+    isCurrentTrack,
+    loopEnabled,
+    setLooping,
+    seekTrackTo,
+    isPlaying,
+    resumeTrack,
+  ]);
+
   useEffect(() => {
     if (!autoPlayRequested || hasAutoPlayedRef.current) {
       return;
@@ -926,6 +955,27 @@ const MusicDetails = ({ route }) => {
                   <Text style={styles.name}>{artist}</Text>
                 </View>
                 <View style={{ ...Style.containerRow, gap: 12 }}>
+                  <PressableScale
+                    onPress={handleToggleLoop}
+                    disabled={!isCurrentTrack}
+                    hitSlop={10}
+                    style={{
+                      ...size({ size: 32 }),
+                      alignItems: "center",
+                      justifyContent: "center",
+                      opacity: isCurrentTrack ? 1 : 0.4,
+                    }}
+                    contentStyle={{
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Feather
+                      name="repeat"
+                      size={24}
+                      color={loopEnabled ? Palette.primary : Palette.white}
+                    />
+                  </PressableScale>
                   <Pressable
                     onPress={async () => {
                       if (!projectId || !currentUID) return;
@@ -972,9 +1022,7 @@ const MusicDetails = ({ route }) => {
                   <Pressable onPress={() => handleSeekBySeconds(-10)}>
                     <RNImage
                       source={icons.forward}
-                      style={{
-                        ...size({ size: 30 }),
-                      }}
+                      style={{ ...size({ size: 30 }) }}
                     />
                   </Pressable>
                   {/* Play / Pause */}
@@ -987,7 +1035,7 @@ const MusicDetails = ({ route }) => {
                     onPress={togglePlay}
                   >
                     <RNImage
-                      resizeMode={"contain"}
+                      resizeMode="contain"
                       source={isPlaying ? icons.pause : icons.play}
                       style={size({ size: 34 })}
                     />