fix favicon, playlist subscription only

src/screens/Library/AllMyPlaylist.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { Image, Platform, Pressable, Text, View } from 'react-native'
 import { SheetManager } from 'react-native-actions-sheet'
 import { background, icons } from '../../assets'
+import usePlaylistCreationGuard from '../../hooks/usePlaylistCreationGuard'
 import Page from '../../layouts/Page'
 import { Routes } from '../../navigation'
 import { navigate } from '../../navigation/NavigationService'
@@ -12,15 +13,23 @@ import { FONT_FAMILY } from '../../styles/Fonts'
 import { size } from '../../styles/Style'
 const AllMyPlaylist = () => {
   const { userPlaylists = [] } = useUser()
+  const ensureCanCreatePlaylist = usePlaylistCreationGuard()
+
+  const handleCreatePlaylistPress = () => {
+    if (!ensureCanCreatePlaylist()) {
+      return
+    }
+
+    SheetManager.show('Playlist', { payload: { startAtCreate: true } })
+  }
+
   return (
     <Page
       headerType="NAVIGATION"
       backgroundImg={background.libraryBG}
       title="Mes Playlists"
       rightComponent={() => (
-        <Pressable
-          onPress={() => SheetManager.show('Playlist', { payload: { startAtCreate: true } })}
-        >
+        <Pressable onPress={handleCreatePlaylistPress}>
           <Image source={icons.add} style={size({ size: 20 })} resizeMode="contain" />
         </Pressable>
       )}

src/screens/Library/AllMyPlaylist.web.js

@@ -7,6 +7,7 @@ import { background, icons } from '../../assets'
 import MoreMenu from '../../components/MoreMenu'
 import { playlistsRef, projectsRef } from '../../config/firebase'
 import useDataFromArrayDocId from '../../hooks/useDataFromArrayId'
+import usePlaylistCreationGuard from '../../hooks/usePlaylistCreationGuard'
 import useDataFromRef from '../../hooks/useDataFromRef'
 import useNavigateToMusicDetails from '../../hooks/useNavigateToMusicDetails'
 import usePlayer from '../../hooks/usePlayer'
@@ -22,6 +23,7 @@ const AllMyPlaylist = ({ route }) => {
   const { playListId } = route?.params || {}
   const [, setTooltip] = useGlobal('_tooltip')
   const { userPlaylists = [] } = useUser()
+  const ensureCanCreatePlaylist = usePlaylistCreationGuard()
   const [selectedPlaylistId, setSelectedPlaylistId] = useState(playListId || null)
   const { data: playlist } = useDataFromRef({
     ref: selectedPlaylistId ? playlistsRef.doc(selectedPlaylistId) : null,
@@ -140,6 +142,16 @@ const AllMyPlaylist = ({ route }) => {
     })
   }, [playlist?.musics, selectedPlaylistId])
 
+  const handleCreatePlaylistPress = useCallback(() => {
+    if (!ensureCanCreatePlaylist()) {
+      return
+    }
+
+    SheetManager.show('Playlist', {
+      payload: { startAtCreate: true },
+    })
+  }, [ensureCanCreatePlaylist])
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -233,13 +245,7 @@ const AllMyPlaylist = ({ route }) => {
                 )
               })}
             </View>
-            <Pressable
-              onPress={() =>
-                SheetManager.show('Playlist', {
-                  payload: { startAtCreate: true },
-                })
-              }
-            >
+            <Pressable onPress={handleCreatePlaylistPress}>
               <View
                 style={{
                   borderRadius: 12,

src/screens/Library/Playlists/playlist.js

@@ -1,7 +1,10 @@
 import { arrayUnion, playlistsRef } from '../../../config/firebase'
+import { assertCanCreatePlaylist } from '../../../utils/playlistCreationAccess'
 
-export const createPlaylist = async (payload = {}) => {
+export const createPlaylist = async (payload = {}, options = {}) => {
   try {
+    assertCanCreatePlaylist(options?.hasActiveSubscription)
+
     const createdBy = payload?.createdBy
     const name = payload?.name?.trim?.()
     const musics = Array.isArray(payload?.musics) ? payload.musics : []

src/screens/Library/components/MyPlaylist.js

@@ -5,6 +5,7 @@ import { SheetManager } from 'react-native-actions-sheet'
 import { icons } from '../../../assets'
 import GradientButton from '../../../components/GradientButton'
 import useLayoutType from '../../../hooks/useLayoutType'
+import usePlaylistCreationGuard from '../../../hooks/usePlaylistCreationGuard'
 import { Routes } from '../../../navigation'
 import { navigate } from '../../../navigation/NavigationService'
 import { useUser } from '../../../providers/UserDataProvider'
@@ -16,16 +17,24 @@ const MyPlaylist = () => {
   const { userPlaylists = [] } = useUser()
   const playlists = Array.isArray(userPlaylists) ? userPlaylists.slice(0, 2) : []
   const { isWeb } = useLayoutType()
+  const ensureCanCreatePlaylist = usePlaylistCreationGuard()
   const hasPlaylists = playlists.length > 0
+
+  const handleCreatePlaylistPress = () => {
+    if (!ensureCanCreatePlaylist()) {
+      return
+    }
+
+    SheetManager.show('Playlist', {
+      payload: { startAtCreate: true },
+    })
+  }
+
   return (
     <CardContainer
       label="Mes Playlists"
       onPress={() => navigate(Routes.AllMyPlaylist)}
-      onPressPlus={() =>
-        SheetManager.show('Playlist', {
-          payload: { startAtCreate: true },
-        })
-      }
+      onPressPlus={handleCreatePlaylistPress}
     >
       <View style={{ gap: 8 }}>
         {hasPlaylists ? (
@@ -91,11 +100,7 @@ const MyPlaylist = () => {
             </Text>
             <GradientButton
               containerStyle={{ padding: 2 }}
-              onPress={() =>
-                SheetManager.show('Playlist', {
-                  payload: { startAtCreate: true },
-                })
-              }
+              onPress={handleCreatePlaylistPress}
               title="     Créer une playlist"
             />
           </View>