fix favicon, playlist subscription only

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,