offset audio after playback and add songs

src/screens/Library/AllMyPlaylist.web.js

@@ -129,6 +129,17 @@ const AllMyPlaylist = ({ route }) => {
     })
   }
 
+  const openAddTracks = useCallback(() => {
+    if (!selectedPlaylistId) return
+
+    SheetManager.show('PlaylistAddTracks', {
+      payload: {
+        playlistId: selectedPlaylistId,
+        existingMusicIds: Array.isArray(playlist?.musics) ? playlist.musics : [],
+      },
+    })
+  }, [playlist?.musics, selectedPlaylistId])
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -141,9 +152,18 @@ const AllMyPlaylist = ({ route }) => {
       rightComponent={() => (
         <>
           {selectedPlaylistId != null && (
-            <Pressable onPress={confirmDelete}>
-              <Image source={icons.trash} style={{ width: 24, height: 24 }} />
-            </Pressable>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+              <Pressable onPress={openAddTracks}>
+                <BlurView intensity={20} tint="dark" style={styles.addTracksButton}>
+                  <Text numberOfLines={1} style={styles.addTracksText}>
+                    Ajouter des morceaux
+                  </Text>
+                </BlurView>
+              </Pressable>
+              <Pressable onPress={confirmDelete}>
+                <Image source={icons.trash} style={{ width: 24, height: 24 }} />
+              </Pressable>
+            </View>
           )}
         </>
       )}
@@ -288,3 +308,18 @@ const AllMyPlaylist = ({ route }) => {
 }
 
 export default AllMyPlaylist
+
+const styles = {
+  addTracksButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    overflow: 'hidden',
+    backgroundColor: Palette.glass,
+  },
+  addTracksText: {
+    color: Palette.white,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+}

src/screens/Library/PlaylistDetails.js

@@ -1,6 +1,7 @@
+import { BlurView } from 'expo-blur'
 import { useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo, useState } from 'react'
-import { Image, Pressable, View } from 'react-native'
+import { Image, Pressable, Text, 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'
@@ -12,7 +13,8 @@ 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 { gutters, Palette } from '../../styles'
+import { FONT_FAMILY } from '../../styles/Fonts'
 import { getProjectLikes, LIKE_TARGET } from '../../utils/likes'
 import MusicCard from './components/MusicCard'
 
@@ -130,15 +132,35 @@ const PlaylistDetails = () => {
     })
   }
 
+  const openAddTracks = useCallback(() => {
+    if (!playlistId) return
+
+    SheetManager.show('PlaylistAddTracks', {
+      payload: {
+        playlistId,
+        existingMusicIds: Array.isArray(playlist?.musics) ? playlist.musics : [],
+      },
+    })
+  }, [playlist?.musics, playlistId])
+
   return (
     <Page
       headerType="NAVIGATION"
       backgroundImg={background.libraryBG}
       title={playlist?.name || 'Playlist'}
       rightComponent={() => (
-        <Pressable onPress={confirmDelete}>
-          <Image source={icons.trash} style={{ width: 24, height: 24 }} />
-        </Pressable>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+          <Pressable onPress={openAddTracks}>
+            <BlurView intensity={20} tint="dark" style={styles.addTracksButton}>
+              <Text numberOfLines={1} style={styles.addTracksText}>
+                Ajouter des morceaux
+              </Text>
+            </BlurView>
+          </Pressable>
+          <Pressable onPress={confirmDelete}>
+            <Image source={icons.trash} style={{ width: 24, height: 24 }} />
+          </Pressable>
+        </View>
       )}
       contentContainerStyle={{ paddingBottom: gutters * 2 }}
     >
@@ -177,3 +199,18 @@ const PlaylistDetails = () => {
 }
 
 export default PlaylistDetails
+
+const styles = {
+  addTracksButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    overflow: 'hidden',
+    backgroundColor: Palette.glass,
+  },
+  addTracksText: {
+    color: Palette.white,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+}

src/screens/Library/Playlists/playlist.js

@@ -1,4 +1,4 @@
-import { playlistsRef } from '../../../config/firebase'
+import { arrayUnion, playlistsRef } from '../../../config/firebase'
 
 export const createPlaylist = async (payload = {}) => {
   try {
@@ -21,3 +21,19 @@ export const createPlaylist = async (payload = {}) => {
     throw error
   }
 }
+
+export const addMusicToPlaylist = async ({ playlistId, projectId }) => {
+  try {
+    if (typeof playlistId !== 'string' || typeof projectId !== 'string') {
+      throw new Error('Identifiants de playlist ou de morceau invalides')
+    }
+
+    await playlistsRef.doc(playlistId).update({
+      musics: arrayUnion(projectId),
+      updatedAt: new Date(),
+    })
+  } catch (error) {
+    console.error('Error adding music to playlist:', error)
+    throw error
+  }
+}