fix tickets add reort mail and design fixes

src/screens/Library/MusicDetails.js

@@ -17,6 +17,7 @@ import {
 import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
 import PressableScale from "../../components/PressableScale";
+import ShareBtn from "../../components/ShareBtn/ShareBtn";
 import Slider from "../../components/Slider";
 import {
   arrayRemove,
@@ -37,6 +38,11 @@ import {
   getSegmentMeta,
   normalizeStructureType,
 } from "../../utils/songStructure";
+import {
+  createMusicSharePayload,
+  openShareSheet,
+} from "../../utils/shareSheet";
+import { Feather } from "@expo/vector-icons";
 
 // 20 secondes
 const timeBeforeIncrement = 20000;
@@ -44,6 +50,7 @@ const timeBeforeIncrement = 20000;
 const MusicDetails = ({ route }) => {
   const { params } = route || {};
   const action = params?.action;
+  const autoPlayRequested = params?.autoPlay;
   const projectId = params?.projectId || null;
   const [fav, setFav] = useState(false);
   const [currentUID] = useGlobal("currentUID");
@@ -51,6 +58,7 @@ const MusicDetails = ({ route }) => {
   const listenedMsRef = useRef(0);
   const incrementDoneRef = useRef(false);
   const timerRef = useRef(null);
+  const hasAutoPlayedRef = useRef(false);
 
   const { data: project } = useDataFromRef({
     ref: projectId ? projectsRef.doc(projectId) : null,
@@ -105,6 +113,33 @@ const MusicDetails = ({ route }) => {
     };
   }, [trackId, songUrl, title, artist, coverUrl, projectId]);
 
+  const sharePayload = useMemo(
+    () =>
+      createMusicSharePayload({
+        projectId,
+        title,
+        artist,
+      }),
+    [projectId, title, artist]
+  );
+
+  const handleShare = useCallback(() => {
+    if (!sharePayload) return;
+    openShareSheet(sharePayload);
+  }, [sharePayload]);
+
+  const handleReport = useCallback(() => {
+    if (!projectId) return;
+    SheetManager.show("Report", {
+      payload: {
+        targetType: "music",
+        projectId,
+        title,
+        ownerId: project?.userId || owner?.id || null,
+      },
+    });
+  }, [owner?.id, project?.userId, projectId, title]);
+
   const {
     isCurrent: isCurrentTrack,
     isPlaying: isTrackPlaying,
@@ -137,6 +172,7 @@ const MusicDetails = ({ route }) => {
   useEffect(() => {
     listenedMsRef.current = 0;
     incrementDoneRef.current = false;
+    hasAutoPlayedRef.current = false;
   }, [trackId]);
 
   // Start/stop a timer to accumulate listened milliseconds while playing
@@ -247,6 +283,34 @@ const MusicDetails = ({ route }) => {
     [durationMs, trackDescriptor, isCurrentTrack, ensureLoaded, seekTrackTo]
   );
 
+  useEffect(() => {
+    if (!autoPlayRequested || hasAutoPlayedRef.current) return;
+    if (!trackDescriptor || !songUrl) return;
+
+    const run = async () => {
+      try {
+        if (!isCurrentTrack) {
+          await ensureLoaded({ startPositionMs: 0, autoPlay: true });
+        } else if (!isTrackPlaying) {
+          await resumeTrack();
+        }
+        hasAutoPlayedRef.current = true;
+      } catch (e) {
+        console.log("MusicDetails autoplay error", e?.message);
+      }
+    };
+
+    run();
+  }, [
+    autoPlayRequested,
+    trackDescriptor,
+    songUrl,
+    isCurrentTrack,
+    ensureLoaded,
+    isTrackPlaying,
+    resumeTrack,
+  ]);
+
   const handleSliderSeekEnd = useCallback(async () => {
     try {
       if (wasPlayingBeforeSeek.current) {
@@ -627,17 +691,24 @@ const MusicDetails = ({ route }) => {
               style={styles.img}
             />
           )}
-          <View style={{ ...Style.containerSpaceBetween }}>
-            <View>
-              <Text style={styles.title}>{title}</Text>
-              <Text style={styles.name}>{artist}</Text>
-            </View>
-            <View style={{ ...Style.containerRow, gap: 12 }}>
-              <PressableScale
-                onPress={async () => {
-                  if (!projectId || !currentUID) return;
-                  const next = !fav;
-                  setFav(next);
+          <View style={{ gap: 12 }}>
+            <View
+              style={{
+                ...Style.containerRow,
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <View>
+                <Text style={styles.title}>{title}</Text>
+                <Text style={styles.name}>{artist}</Text>
+              </View>
+              <View style={{ ...Style.containerRow, gap: 16 }}>
+                <PressableScale
+                  onPress={async () => {
+                    if (!projectId || !currentUID) return;
+                    const next = !fav;
+                    setFav(next);
                   try {
                     await projectsRef.doc(projectId).update({
                       likedBy: next
@@ -655,6 +726,12 @@ const MusicDetails = ({ route }) => {
                   resizeMode="contain"
                 />
               </PressableScale>
+              <PressableScale onPress={handleReport}>
+                <Feather name="flag" size={22} color={Palette.white} style={{ marginHorizontal: 2 }} />
+              </PressableScale>
+              {!!sharePayload && (
+                <ShareBtn style={{ borderRadius: 18 }} onPress={handleShare} />
+              )}
               <Pressable
                 onPress={() =>
                   SheetManager.show("Playlist", { payload: { projectId } })
@@ -666,6 +743,7 @@ const MusicDetails = ({ route }) => {
                   resizeMode="contain"
                 />
               </Pressable>
+              </View>
             </View>
           </View>
         </View>