offset audio after playback and add songs

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,
+  },
+}