feat: fixes and formatter
This commit is contained in:
@@ -1,37 +1,35 @@
|
||||
import { BlurView } from "expo-blur";
|
||||
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";
|
||||
import { background, icons } from "../../assets";
|
||||
import MoreMenu from "../../components/MoreMenu";
|
||||
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";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { size } from "../../styles/Style";
|
||||
import { getProjectLikes, LIKE_TARGET } from "../../utils/likes";
|
||||
import MusicCard from "./components/MusicCard";
|
||||
import { BlurView } from 'expo-blur'
|
||||
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'
|
||||
import { background, icons } from '../../assets'
|
||||
import MoreMenu from '../../components/MoreMenu'
|
||||
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'
|
||||
import { FONT_FAMILY } from '../../styles/Fonts'
|
||||
import { size } from '../../styles/Style'
|
||||
import { getProjectLikes, LIKE_TARGET } from '../../utils/likes'
|
||||
import MusicCard from './components/MusicCard'
|
||||
|
||||
const AllMyPlaylist = ({ route }) => {
|
||||
const { playListId } = route?.params || {};
|
||||
const [, setTooltip] = useGlobal("_tooltip");
|
||||
const { userPlaylists = [] } = useUser();
|
||||
const [selectedPlaylistId, setSelectedPlaylistId] = useState(
|
||||
playListId || null
|
||||
);
|
||||
const { playListId } = route?.params || {}
|
||||
const [, setTooltip] = useGlobal('_tooltip')
|
||||
const { userPlaylists = [] } = useUser()
|
||||
const [selectedPlaylistId, setSelectedPlaylistId] = useState(playListId || null)
|
||||
const { data: playlist } = useDataFromRef({
|
||||
ref: selectedPlaylistId ? playlistsRef.doc(selectedPlaylistId) : null,
|
||||
simpleRef: true,
|
||||
listener: true,
|
||||
condition: !!selectedPlaylistId,
|
||||
refreshArray: [selectedPlaylistId],
|
||||
});
|
||||
})
|
||||
|
||||
// Fetch projects by ids from playlist.musics
|
||||
const { data: musics } = useDataFromArrayDocId({
|
||||
@@ -39,31 +37,31 @@ const AllMyPlaylist = ({ route }) => {
|
||||
arrayId: Array.isArray(playlist?.musics) ? playlist.musics : [],
|
||||
condition: Array.isArray(playlist?.musics) && playlist.musics.length > 0,
|
||||
refreshArray: [selectedPlaylistId, 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: {
|
||||
@@ -76,73 +74,67 @@ const AllMyPlaylist = ({ route }) => {
|
||||
playlistId: selectedPlaylistId ?? null,
|
||||
playlistName: playlist?.name ?? null,
|
||||
},
|
||||
};
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
}, [musics, playlist?.name, selectedPlaylistId]);
|
||||
.filter(Boolean)
|
||||
}, [musics, playlist?.name, selectedPlaylistId])
|
||||
|
||||
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: selectedPlaylistId,
|
||||
type: "playlist",
|
||||
type: 'playlist',
|
||||
name: playlist?.name ?? null,
|
||||
index: queueIndex,
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
navigateToMusicDetails({
|
||||
projectId: project.id,
|
||||
songUrl: project?.songUrl,
|
||||
project,
|
||||
});
|
||||
})
|
||||
},
|
||||
[
|
||||
navigateToMusicDetails,
|
||||
playlist?.name,
|
||||
playlistQueueItems,
|
||||
selectedPlaylistId,
|
||||
setQueue,
|
||||
]
|
||||
);
|
||||
[navigateToMusicDetails, playlist?.name, playlistQueueItems, selectedPlaylistId, setQueue]
|
||||
)
|
||||
|
||||
// delete playlist
|
||||
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 (selectedPlaylistId) {
|
||||
await playlistsRef.doc(selectedPlaylistId).delete();
|
||||
setTooltip({ type: "success", text: "Playlist supprimée" });
|
||||
await playlistsRef.doc(selectedPlaylistId).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',
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
backgroundImg={background.libraryBG}
|
||||
title="Mes Playlists"
|
||||
width={"80%"}
|
||||
width={'80%'}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
@@ -156,7 +148,7 @@ const AllMyPlaylist = ({ route }) => {
|
||||
</>
|
||||
)}
|
||||
>
|
||||
<View style={{ flexDirection: "row", gap: 20 }}>
|
||||
<View style={{ flexDirection: 'row', gap: 20 }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
@@ -168,67 +160,62 @@ const AllMyPlaylist = ({ route }) => {
|
||||
>
|
||||
<View style={{ flex: 1, gap: 12 }}>
|
||||
<View style={{ gap: 8 }}>
|
||||
{(Array.isArray(userPlaylists) ? userPlaylists : []).map(
|
||||
(item) => {
|
||||
const isSelected = selectedPlaylistId === item?.id;
|
||||
{(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => {
|
||||
const isSelected = selectedPlaylistId === item?.id
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
key={item?.id}
|
||||
onPress={() => setSelectedPlaylistId(item?.id)}
|
||||
return (
|
||||
<Pressable key={item?.id} onPress={() => setSelectedPlaylistId(item?.id)}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: Palette.transparentWhite,
|
||||
transform: [{ scaleX: isSelected ? 1.04 : 1 }],
|
||||
}}
|
||||
>
|
||||
<View
|
||||
<BlurView
|
||||
intensity={30}
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
overflow: "hidden",
|
||||
borderWidth: 1,
|
||||
borderColor: Palette.transparentWhite,
|
||||
transform: [{ scaleX: isSelected ? 1.04 : 1 }],
|
||||
...Style.containerSpaceBetween,
|
||||
minHeight: 59,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
}}
|
||||
>
|
||||
<BlurView
|
||||
intensity={30}
|
||||
<Text
|
||||
style={{
|
||||
...Style.containerSpaceBetween,
|
||||
minHeight: 59,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
flex: 1,
|
||||
fontSize: isSelected ? 18 : 16,
|
||||
color: Palette.white,
|
||||
fontFamily: isSelected
|
||||
? FONT_FAMILY.InterSemiBold
|
||||
: FONT_FAMILY.InterRegular,
|
||||
marginRight: 12,
|
||||
flexShrink: 1,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
{item?.name || 'Sans nom'}
|
||||
</Text>
|
||||
<Pressable>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: isSelected ? 18 : 16,
|
||||
color: Palette.white,
|
||||
fontFamily: isSelected
|
||||
? FONT_FAMILY.InterSemiBold
|
||||
: FONT_FAMILY.InterRegular,
|
||||
marginRight: 12,
|
||||
flexShrink: 1,
|
||||
...size({ size: 15 }),
|
||||
transform: [{ rotate: '-90deg' }],
|
||||
}}
|
||||
>
|
||||
{item?.name || "Sans nom"}
|
||||
</Text>
|
||||
<Pressable>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={{
|
||||
...size({ size: 15 }),
|
||||
transform: [{ rotate: "-90deg" }],
|
||||
}}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
)}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
SheetManager.show("Playlist", {
|
||||
SheetManager.show('Playlist', {
|
||||
payload: { startAtCreate: true },
|
||||
})
|
||||
}
|
||||
@@ -236,7 +223,7 @@ const AllMyPlaylist = ({ route }) => {
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: Palette.transparentWhite,
|
||||
}}
|
||||
@@ -259,11 +246,7 @@ const AllMyPlaylist = ({ route }) => {
|
||||
>
|
||||
Ajouter une playlist
|
||||
</Text>
|
||||
<Image
|
||||
source={icons.add}
|
||||
style={size({ size: 20 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Image source={icons.add} style={size({ size: 20 })} resizeMode="contain" />
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
@@ -282,12 +265,9 @@ const AllMyPlaylist = ({ route }) => {
|
||||
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))
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
@@ -304,7 +284,7 @@ const AllMyPlaylist = ({ route }) => {
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default AllMyPlaylist;
|
||||
export default AllMyPlaylist
|
||||
|
||||
Reference in New Issue
Block a user