feat: fixes and formatter
This commit is contained in:
@@ -1,25 +1,25 @@
|
||||
import { useRoute } from "@react-navigation/native";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { Image, Pressable, View } from "react-native";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { useDataFromRef } from "react-native-minuit/src/hooks";
|
||||
import useDataFromArrayId from "react-native-minuit/src/hooks/useDataFromArrayId";
|
||||
import { useGlobal } from "reactn";
|
||||
import { background, icons } from "../../assets";
|
||||
import MoreMenu from "../../components/MoreMenu";
|
||||
import { playlistsRef, projectsRef } from "../../config/firebase";
|
||||
import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
|
||||
import usePlayer from "../../hooks/usePlayer";
|
||||
import Page from "../../layouts/Page";
|
||||
import { goBack } from "../../navigation/NavigationService";
|
||||
import { gutters } from "../../styles";
|
||||
import { getProjectLikes, LIKE_TARGET } from "../../utils/likes";
|
||||
import MusicCard from "./components/MusicCard";
|
||||
import { useRoute } from '@react-navigation/native'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { Image, Pressable, View } from 'react-native'
|
||||
import { SheetManager } from 'react-native-actions-sheet'
|
||||
import { useDataFromRef } from 'react-native-minuit/src/hooks'
|
||||
import useDataFromArrayId from 'react-native-minuit/src/hooks/useDataFromArrayId'
|
||||
import { useGlobal } from 'reactn'
|
||||
import { background, icons } from '../../assets'
|
||||
import MoreMenu from '../../components/MoreMenu'
|
||||
import { playlistsRef, projectsRef } from '../../config/firebase'
|
||||
import useNavigateToMusicDetails from '../../hooks/useNavigateToMusicDetails'
|
||||
import usePlayer from '../../hooks/usePlayer'
|
||||
import Page from '../../layouts/Page'
|
||||
import { goBack } from '../../navigation/NavigationService'
|
||||
import { gutters } from '../../styles'
|
||||
import { getProjectLikes, LIKE_TARGET } from '../../utils/likes'
|
||||
import MusicCard from './components/MusicCard'
|
||||
|
||||
const PlaylistDetails = () => {
|
||||
const [, setTooltip] = useGlobal("_tooltip");
|
||||
const route = useRoute();
|
||||
const playlistId = route?.params?.playlistId;
|
||||
const [, setTooltip] = useGlobal('_tooltip')
|
||||
const route = useRoute()
|
||||
const playlistId = route?.params?.playlistId
|
||||
|
||||
// Fetch the playlist document
|
||||
const { data: playlist } = useDataFromRef({
|
||||
@@ -28,7 +28,7 @@ const PlaylistDetails = () => {
|
||||
listener: true,
|
||||
condition: !!playlistId,
|
||||
refreshArray: [playlistId],
|
||||
});
|
||||
})
|
||||
|
||||
// Fetch projects by ids from playlist.musics
|
||||
const { data: musics } = useDataFromArrayId({
|
||||
@@ -36,32 +36,32 @@ const PlaylistDetails = () => {
|
||||
arrayId: Array.isArray(playlist?.musics) ? playlist.musics : [],
|
||||
condition: Array.isArray(playlist?.musics) && playlist.musics.length > 0,
|
||||
refreshArray: [playlistId, playlist?.musics?.length || 0],
|
||||
});
|
||||
})
|
||||
|
||||
const [menuPosition, setMenuPosition] = useState(null);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [selectedProjectId, setSelectedProjectId] = useState(null);
|
||||
const navigateToMusicDetails = useNavigateToMusicDetails();
|
||||
const { setQueue } = usePlayer() || {};
|
||||
const [menuPosition, setMenuPosition] = useState(null)
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
const [selectedProjectId, setSelectedProjectId] = useState(null)
|
||||
const navigateToMusicDetails = useNavigateToMusicDetails()
|
||||
const { setQueue } = usePlayer() || {}
|
||||
|
||||
const playlistQueueItems = useMemo(() => {
|
||||
if (!Array.isArray(musics)) return [];
|
||||
if (!Array.isArray(musics)) return []
|
||||
return musics
|
||||
.map((project) => {
|
||||
const projectId =
|
||||
typeof project?.id === "string" ? project.id : project?.projectId ?? null;
|
||||
typeof project?.id === 'string' ? project.id : (project?.projectId ?? null)
|
||||
const songUrl =
|
||||
typeof project?.songUrl === "string" && project.songUrl.length > 0
|
||||
typeof project?.songUrl === 'string' && project.songUrl.length > 0
|
||||
? project.songUrl
|
||||
: null;
|
||||
if (!songUrl) return null;
|
||||
const descriptorId = projectId ? `project-${projectId}` : 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 || "",
|
||||
title: project?.title || 'Sans titre',
|
||||
artist: project?.userName || '',
|
||||
artwork: project?.coverUrl ?? null,
|
||||
coverUrl: project?.coverUrl ?? null,
|
||||
metadata: {
|
||||
@@ -74,73 +74,67 @@ const PlaylistDetails = () => {
|
||||
playlistId: playlistId ?? null,
|
||||
playlistName: playlist?.name ?? null,
|
||||
},
|
||||
};
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
}, [musics, playlist?.name, playlistId]);
|
||||
.filter(Boolean)
|
||||
}, [musics, playlist?.name, playlistId])
|
||||
|
||||
const handlePlayFromPlaylist = useCallback(
|
||||
(project) => {
|
||||
if (!project?.id) return;
|
||||
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") {
|
||||
)
|
||||
if (queueIndex >= 0 && typeof setQueue === 'function') {
|
||||
setQueue({
|
||||
items: playlistQueueItems,
|
||||
id: playlistId,
|
||||
type: "playlist",
|
||||
type: 'playlist',
|
||||
name: playlist?.name ?? null,
|
||||
index: queueIndex,
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
navigateToMusicDetails({
|
||||
projectId: project.id,
|
||||
songUrl: project?.songUrl,
|
||||
project,
|
||||
});
|
||||
})
|
||||
},
|
||||
[
|
||||
navigateToMusicDetails,
|
||||
playlist?.name,
|
||||
playlistId,
|
||||
playlistQueueItems,
|
||||
setQueue,
|
||||
]
|
||||
);
|
||||
[navigateToMusicDetails, playlist?.name, playlistId, playlistQueueItems, setQueue]
|
||||
)
|
||||
|
||||
const confirmDelete = () => {
|
||||
SheetManager.show("Delete", {
|
||||
SheetManager.show('Delete', {
|
||||
payload: {
|
||||
title: "Supprimer la playlist",
|
||||
message: "Es-tu sûr de vouloir supprimer cette playlist ?",
|
||||
title: 'Supprimer la playlist',
|
||||
message: 'Es-tu sûr de vouloir supprimer cette playlist ?',
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
if (playlistId) {
|
||||
await playlistsRef.doc(playlistId).delete();
|
||||
setTooltip({ type: "success", text: "Playlist supprimée" });
|
||||
await playlistsRef.doc(playlistId).delete()
|
||||
setTooltip({ type: 'success', text: 'Playlist supprimée' })
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("Delete playlist error", e?.message);
|
||||
console.log('Delete playlist error', e?.message)
|
||||
setTooltip({
|
||||
type: "error",
|
||||
text: e?.message || "Suppression impossible",
|
||||
});
|
||||
type: 'error',
|
||||
text: e?.message || 'Suppression impossible',
|
||||
})
|
||||
} finally {
|
||||
goBack();
|
||||
goBack()
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
backgroundImg={background.libraryBG}
|
||||
title={playlist?.name || "Playlist"}
|
||||
title={playlist?.name || 'Playlist'}
|
||||
rightComponent={() => (
|
||||
<Pressable onPress={confirmDelete}>
|
||||
<Image source={icons.trash} style={{ width: 24, height: 24 }} />
|
||||
@@ -161,11 +155,9 @@ const PlaylistDetails = () => {
|
||||
likeTarget={LIKE_TARGET.SONG}
|
||||
onPress={() => handlePlayFromPlaylist(p)}
|
||||
onPressMore={(posTop) => {
|
||||
setSelectedProjectId(p.id);
|
||||
setMenuPosition(posTop);
|
||||
setShowMenu(
|
||||
(prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
|
||||
);
|
||||
setSelectedProjectId(p.id)
|
||||
setMenuPosition(posTop)
|
||||
setShowMenu((prev) => !prev || posTop?.top !== (menuPosition?.top ?? null))
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
@@ -181,7 +173,7 @@ const PlaylistDetails = () => {
|
||||
/>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default PlaylistDetails;
|
||||
export default PlaylistDetails
|
||||
|
||||
Reference in New Issue
Block a user