playlist tab/view

app/screens/LibraryAlbums.tsx

@@ -74,6 +74,7 @@ const AlbumsList = () => {
   return (
     <View style={styles.container}>
       <GradientFlatList
+        contentContainerStyle={styles.listContent}
         data={albumsList}
         renderItem={AlbumListRenderItem}
         keyExtractor={item => item.album.id}
@@ -99,6 +100,9 @@ const AlbumsTab = () => (
 )
 
 const styles = StyleSheet.create({
+  listContent: {
+    minHeight: '100%',
+  },
   container: {
     flex: 1,
   },

app/screens/LibraryArtists.tsx

@@ -10,24 +10,20 @@ import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet, Text } from 'react-native'
 
-const ArtistItem: React.FC<{ item: Artist }> = ({ item }) => {
+const ArtistItem = React.memo<{ item: Artist }>(({ item }) => {
   const navigation = useNavigation()
 
   return (
     <PressableOpacity
       style={styles.item}
       onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}>
-      <ArtistArt id={item.id} width={70} height={70} />
+      <ArtistArt id={item.id} width={styles.art.width} height={styles.art.height} />
       <Text style={styles.title}>{item.name}</Text>
     </PressableOpacity>
   )
-}
+})
 
-const ArtistItemLoader: React.FC<{ item: Artist }> = props => (
-  <React.Suspense fallback={<Text>Loading...</Text>}>
-    <ArtistItem {...props} />
-  </React.Suspense>
-)
+const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItem item={item} />
 
 const ArtistsList = () => {
   const artists = useAtomValue(artistsAtom)
@@ -40,12 +36,11 @@ const ArtistsList = () => {
     }
   })
 
-  const renderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItemLoader item={item} />
-
   return (
     <GradientFlatList
+      contentContainerStyle={styles.listContent}
       data={artists}
-      renderItem={renderItem}
+      renderItem={ArtistRenderItem}
       keyExtractor={item => item.id}
       onRefresh={updateArtists}
       refreshing={updating}
@@ -54,9 +49,10 @@ const ArtistsList = () => {
   )
 }
 
-const ArtistsTab = () => <ArtistsList />
-
 const styles = StyleSheet.create({
+  listContent: {
+    minHeight: '100%',
+  },
   item: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -68,8 +64,12 @@ const styles = StyleSheet.create({
     fontFamily: font.semiBold,
     fontSize: 16,
     color: colors.text.primary,
-    marginLeft: 14,
+    marginLeft: 10,
+  },
+  art: {
+    height: 70,
+    width: 70,
   },
 })
 
-export default ArtistsTab
+export default ArtistsList

app/screens/LibraryPlaylists.tsx

@@ -1,6 +1,93 @@
-import React from 'react'
-import GradientBackground from '@app/components/GradientBackground'
+import CoverArt from '@app/components/CoverArt'
+import GradientFlatList from '@app/components/GradientFlatList'
+import PressableOpacity from '@app/components/PressableOpacity'
+import { PlaylistListItem } from '@app/models/music'
+import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } from '@app/state/music'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
+import { useAtomValue } from 'jotai/utils'
+import React, { useEffect } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
 
-const PlaylistsTab = () => <GradientBackground />
+const PlaylistItem = React.memo<{ item: PlaylistListItem }>(({ item }) => {
+  const navigation = useNavigation()
 
-export default PlaylistsTab
+  return (
+    <PressableOpacity
+      style={styles.item}
+      onPress={() => navigation.navigate('PlaylistView', { id: item.id, title: item.name })}>
+      <CoverArt coverArtUri={item.coverArtThumbUri} style={styles.art} />
+      <View style={styles.text}>
+        <Text style={styles.title} numberOfLines={1}>
+          {item.name}
+        </Text>
+        {item.comment ? (
+          <Text style={styles.subtitle} numberOfLines={1}>
+            {item.comment}
+          </Text>
+        ) : (
+          <></>
+        )}
+      </View>
+    </PressableOpacity>
+  )
+})
+
+const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => <PlaylistItem item={item} />
+
+const PlaylistsList = () => {
+  const playlists = useAtomValue(playlistsAtom)
+  const updating = useAtomValue(playlistsUpdatingAtom)
+  const updatePlaylists = useUpdatePlaylists()
+
+  useEffect(() => {
+    if (playlists.length === 0) {
+      updatePlaylists()
+    }
+  })
+
+  return (
+    <GradientFlatList
+      contentContainerStyle={styles.listContent}
+      data={playlists}
+      renderItem={PlaylistRenderItem}
+      keyExtractor={item => item.id}
+      onRefresh={updatePlaylists}
+      refreshing={updating}
+      overScrollMode="never"
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  listContent: {
+    minHeight: '100%',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginVertical: 6,
+    marginLeft: 10,
+  },
+  text: {
+    marginLeft: 10,
+  },
+  title: {
+    fontFamily: font.semiBold,
+    fontSize: 16,
+    color: colors.text.primary,
+  },
+  subtitle: {
+    fontFamily: font.regular,
+    fontSize: 14,
+    color: colors.text.secondary,
+  },
+  art: {
+    height: 70,
+    width: 70,
+  },
+})
+
+export default PlaylistsList

app/screens/PlaylistView.tsx

@@ -0,0 +1,117 @@
+import Button from '@app/components/Button'
+import CoverArt from '@app/components/CoverArt'
+import GradientBackground from '@app/components/GradientBackground'
+import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
+import SongItem from '@app/components/SongItem'
+import { playlistAtomFamily } from '@app/state/music'
+import { useSetQueue } from '@app/state/trackplayer'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
+import { useAtomValue } from 'jotai/utils'
+import React, { useEffect } from 'react'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+
+const PlaylistDetails: React.FC<{
+  id: string
+}> = ({ id }) => {
+  const playlist = useAtomValue(playlistAtomFamily(id))
+  const setQueue = useSetQueue()
+
+  if (!playlist) {
+    return <></>
+  }
+
+  return (
+    <ImageGradientScrollView
+      imageUri={playlist.coverArtThumbUri}
+      imageKey={`${playlist.id}${playlist.name}`}
+      style={styles.container}>
+      <View style={styles.content}>
+        <CoverArt coverArtUri={playlist.coverArtUri} style={styles.cover} />
+        <Text style={styles.title}>{playlist.name}</Text>
+        {playlist.comment ? <Text style={styles.subtitle}>{playlist.comment}</Text> : <></>}
+        <View style={styles.controls}>
+          <Button title="Play Playlist" onPress={() => setQueue(playlist.songs, playlist.name, playlist.songs[0].id)} />
+        </View>
+        <View style={styles.songs}>
+          {playlist.songs.map((s, index) => (
+            <SongItem
+              key={index}
+              song={s}
+              showArt={true}
+              onPress={() => setQueue(playlist.songs, playlist.name, s.id)}
+            />
+          ))}
+        </View>
+      </View>
+    </ImageGradientScrollView>
+  )
+}
+
+const PlaylistViewFallback = () => (
+  <GradientBackground style={styles.fallback}>
+    <ActivityIndicator size="large" color={colors.accent} />
+  </GradientBackground>
+)
+
+const PlaylistView: React.FC<{
+  id: string
+  title: string
+}> = ({ id, title }) => {
+  const navigation = useNavigation()
+
+  useEffect(() => {
+    navigation.setOptions({ title })
+  })
+
+  return (
+    <React.Suspense fallback={<PlaylistViewFallback />}>
+      <PlaylistDetails id={id} />
+    </React.Suspense>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingHorizontal: 10,
+  },
+  title: {
+    fontSize: 24,
+    fontFamily: font.bold,
+    color: colors.text.primary,
+    marginTop: 12,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontFamily: font.regular,
+    color: colors.text.secondary,
+    fontSize: 14,
+    marginTop: 4,
+    textAlign: 'center',
+  },
+  cover: {
+    height: 160,
+    width: 160,
+  },
+  controls: {
+    marginTop: 18,
+    flexDirection: 'row',
+  },
+  songs: {
+    marginTop: 26,
+    marginBottom: 30,
+    width: '100%',
+  },
+  fallback: {
+    alignItems: 'center',
+    paddingTop: 100,
+  },
+})
+
+export default React.memo(PlaylistView)