replay musics

src/screens/LandingPage.js

@@ -35,7 +35,7 @@ export default function LandingPage() {
   }, []);
 
   const handleLaunchAdventure = useCallback(() => {
-    navigation.navigate(Routes.Register);
+    navigation.navigate(Routes.Login);
   }, [navigation]);
 
   const { data: video } = useDataFromRef({
@@ -103,9 +103,7 @@ export default function LandingPage() {
                   title="Présentation de Musicland"
                   onPress={() =>
                     setVideoUrl(
-                      Platform.OS === "web"
-                        ? video?.landingWeb
-                        : video?.landing,
+                      Platform.OS === "web" ? video?.landingWeb : video?.landing
                     )
                   }
                   containerStyle={styles.actionButton}

src/screens/Library/MusicDetails.js

@@ -1,4 +1,6 @@
+import { Feather } from "@expo/vector-icons";
 import useTrackController from "../../hooks/useTrackController";
+import usePlayer from "../../hooks/usePlayer";
 import { Image as ExpoImage } from "expo-image";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -58,6 +60,7 @@ const MusicDetails = ({ route }) => {
   const incrementDoneRef = useRef(false);
   const timerRef = useRef(null);
   const hasAutoPlayedRef = useRef(false);
+  const { isLooping, setLooping } = usePlayer() || {};
 
   const { data: project } = useDataFromRef({
     ref: projectId ? projectsRef.doc(projectId) : null,
@@ -193,6 +196,7 @@ const MusicDetails = ({ route }) => {
     seekTo: seekTrackTo,
     seekBy: seekTrackBy,
   } = useTrackController(trackDescriptor);
+  const loopEnabled = isCurrentTrack && !!isLooping;
 
   // Karaoke aligned words (from timestamps)
   const alignedWords = useMemo(() => {
@@ -325,6 +329,31 @@ const MusicDetails = ({ route }) => {
     [durationMs, trackDescriptor, 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 (!isTrackPlaying) {
+          await resumeTrack();
+        }
+      } catch (e) {
+        console.log("MusicDetails loop toggle error", e?.message);
+      }
+    }
+  }, [
+    isCurrentTrack,
+    loopEnabled,
+    setLooping,
+    seekTrackTo,
+    isTrackPlaying,
+    resumeTrack,
+  ]);
+
   useEffect(() => {
     if (!autoPlayRequested || hasAutoPlayedRef.current) return;
     if (!trackDescriptor || !songUrl) return;
@@ -746,6 +775,24 @@ const MusicDetails = ({ route }) => {
                 <Text style={styles.name}>{artist}</Text>
               </View>
               <View style={{ ...Style.containerRow, gap: 16 }}>
+                <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>
                 <PressableScale
                   onPress={async () => {
                     if (!projectId || !currentUID) return;

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 })}
                     />

src/screens/Profile/Profile.js

@@ -34,11 +34,11 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { push } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
-import { getArtistDisplayName } from "../../utils/artistName";
-import { getProjectLikes, LIKE_TARGET } from "../../utils/likes";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { gutters, size } from "../../styles/Style";
+import { getArtistDisplayName } from "../../utils/artistName";
+import { getProjectLikes, LIKE_TARGET } from "../../utils/likes";
 import MusicCard from "../Library/components/MusicCard";
 const Profile = () => {
   const { params } = useRoute();
@@ -321,9 +321,7 @@ const Profile = () => {
   });
 
   const displayedProjects = isSelf ? selfProjects : otherUserProjects;
-  const displayedPlaybacksSource = isSelf
-    ? selfPlaybacks
-    : otherUserProjects;
+  const displayedPlaybacksSource = isSelf ? selfPlaybacks : otherUserProjects;
   const displayedPlaybacks = Array.isArray(displayedPlaybacksSource)
     ? displayedPlaybacksSource.filter((project) => project?.playbackUrl)
     : [];
@@ -419,12 +417,12 @@ const Profile = () => {
                 <Text style={styles.webLoaderText}>{webUploadMessage}</Text>
               ) : null}
               <Text
-              style={{
-                fontSize: 22,
-                color: Palette.white,
-                fontFamily: FONT_FAMILY.InterSemiBold,
-              }}
-            >
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
                 {profileTitle}
               </Text>
             </View>