feat: next music from playlist

src/screens/Library/AllMyPlaylist.web.js

@@ -1,5 +1,5 @@
 import { BlurView } from "expo-blur";
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Image, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { useGlobal } from "reactn";
@@ -9,6 +9,7 @@ import { playlistsRef, projectsRef } from "../../config/firebase";
 import useDataFromArrayDocId from "../../hooks/useDataFromArrayId";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
+import usePlayer from "../../hooks/usePlayer";
 import Page from "../../layouts/Page";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
@@ -42,6 +43,74 @@ const AllMyPlaylist = ({ route }) => {
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
   const navigateToMusicDetails = useNavigateToMusicDetails();
+  const { setQueue } = usePlayer() || {};
+
+  const playlistQueueItems = useMemo(() => {
+    if (!Array.isArray(musics)) return [];
+    return musics
+      .map((project) => {
+        const projectId =
+          typeof project?.id === "string" ? project.id : project?.projectId ?? null;
+        const songUrl =
+          typeof project?.songUrl === "string" && project.songUrl.length > 0
+            ? project.songUrl
+            : null;
+        if (!songUrl) return null;
+        const descriptorId = projectId ? `project-${projectId}` : songUrl;
+        return {
+          id: descriptorId,
+          uri: songUrl,
+          songUrl,
+          title: project?.title || "Sans titre",
+          artist: project?.userName || "",
+          artwork: project?.coverUrl ?? null,
+          coverUrl: project?.coverUrl ?? null,
+          metadata: {
+            projectId,
+            playlistId: selectedPlaylistId ?? null,
+            playlistName: playlist?.name ?? null,
+          },
+          context: {
+            projectId,
+            playlistId: selectedPlaylistId ?? null,
+            playlistName: playlist?.name ?? null,
+          },
+        };
+      })
+      .filter(Boolean);
+  }, [musics, playlist?.name, selectedPlaylistId]);
+
+  const handlePlayFromPlaylist = useCallback(
+    (project) => {
+      if (!project?.id) return;
+      if (Array.isArray(playlistQueueItems) && playlistQueueItems.length > 0) {
+        const queueIndex = playlistQueueItems.findIndex(
+          (item) => item?.metadata?.projectId === project.id
+        );
+        if (queueIndex >= 0 && typeof setQueue === "function") {
+          setQueue({
+            items: playlistQueueItems,
+            id: selectedPlaylistId,
+            type: "playlist",
+            name: playlist?.name ?? null,
+            index: queueIndex,
+          });
+        }
+      }
+      navigateToMusicDetails({
+        projectId: project.id,
+        songUrl: project?.songUrl,
+        project,
+      });
+    },
+    [
+      navigateToMusicDetails,
+      playlist?.name,
+      playlistQueueItems,
+      selectedPlaylistId,
+      setQueue,
+    ]
+  );
 
   // delete playlist
   const confirmDelete = () => {
@@ -209,13 +278,7 @@ const AllMyPlaylist = ({ route }) => {
                 imageUri={p?.coverUrl || null}
                 projectId={p?.id}
                 likedBy={p?.likedBy || []}
-                onPress={() =>
-                  navigateToMusicDetails({
-                    projectId: p.id,
-                    songUrl: p?.songUrl,
-                    project: p,
-                  })
-                }
+                onPress={() => handlePlayFromPlaylist(p)}
                 onPressMore={(posTop) => {
                   setSelectedProjectId(p.id);
                   setMenuPosition(posTop);