playlist tab/view

app/models/music.ts

@@ -36,6 +36,18 @@ export interface AlbumWithSongs extends Album {
   songs: Song[]
 }
 
+export interface PlaylistListItem {
+  id: string
+  name: string
+  comment?: string
+  coverArtThumbUri?: string
+}
+
+export interface PlaylistWithSongs extends PlaylistListItem {
+  songs: Song[]
+  coverArtUri?: string
+}
+
 export interface Song {
   id: string
   album?: string

app/navigation/BottomTabNavigator.tsx

@@ -4,6 +4,7 @@ import AlbumView from '@app/screens/AlbumView'
 import ArtistsList from '@app/screens/ArtistsList'
 import ArtistView from '@app/screens/ArtistView'
 import Home from '@app/screens/Home'
+import PlaylistView from '@app/screens/PlaylistView'
 import SettingsView from '@app/screens/Settings'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -17,6 +18,7 @@ type TabStackParamList = {
   TabMain: { toTop?: boolean }
   AlbumView: { id: string; title: string }
   ArtistView: { id: string; title: string }
+  PlaylistView: { id: string; title: string }
 }
 
 type AlbumScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'AlbumView'>
@@ -41,6 +43,17 @@ const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
   <ArtistView id={route.params.id} title={route.params.title} />
 )
 
+type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'PlaylistView'>
+type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'PlaylistView'>
+type PlaylistScreenProps = {
+  route: PlaylistScreenRouteProp
+  navigation: PlaylistScreenNavigationProp
+}
+
+const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
+  <PlaylistView id={route.params.id} title={route.params.title} />
+)
+
 const styles = StyleSheet.create({
   stackheaderStyle: {
     backgroundColor: colors.gradient.high,
@@ -75,6 +88,7 @@ function createTabStackNavigator(Component: React.ComponentType<any>) {
         <Stack.Screen name="TabMain" component={Component} options={{ headerShown: false }} />
         <Stack.Screen name="AlbumView" component={AlbumScreen} options={itemScreenOptions} />
         <Stack.Screen name="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
+        <Stack.Screen name="PlaylistView" component={PlaylistScreen} options={itemScreenOptions} />
       </Stack.Navigator>
     )
   }

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 => (
+const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItem item={item} />
-  <React.Suspense fallback={<Text>Loading...</Text>}>
-    <ArtistItem {...props} />
-  </React.Suspense>
-)
 
 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 CoverArt from '@app/components/CoverArt'
-import GradientBackground from '@app/components/GradientBackground'
+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)

app/state/music.ts

@@ -1,7 +1,24 @@
-import { Album, AlbumListItem, AlbumWithSongs, Artist, ArtistArt, ArtistInfo, Song } from '@app/models/music'
+import {
+  Album,
+  AlbumListItem,
+  AlbumWithSongs,
+  Artist,
+  ArtistArt,
+  ArtistInfo,
+  PlaylistListItem,
+  PlaylistWithSongs,
+  Song,
+} from '@app/models/music'
 import { activeServerAtom, homeListTypesAtom } from '@app/state/settings'
 import { SubsonicApiClient } from '@app/subsonic/api'
-import { AlbumID3Element, ArtistID3Element, ArtistInfo2Element, ChildElement } from '@app/subsonic/elements'
+import {
+  AlbumID3Element,
+  ArtistID3Element,
+  ArtistInfo2Element,
+  ChildElement,
+  PlaylistElement,
+  PlaylistWithSongsElement,
+} from '@app/subsonic/elements'
 import { GetAlbumList2Type } from '@app/subsonic/params'
 import { GetArtistResponse } from '@app/subsonic/responses'
 import { atom, useAtom } from 'jotai'
@@ -80,6 +97,45 @@ export const useUpdateHomeLists = () => {
   }
 }
 
+export const playlistsUpdatingAtom = atom(false)
+export const playlistsAtom = atom<PlaylistListItem[]>([])
+
+export const useUpdatePlaylists = () => {
+  const server = useAtomValue(activeServerAtom)
+  const updateList = useUpdateAtom(playlistsAtom)
+  const [updating, setUpdating] = useAtom(playlistsUpdatingAtom)
+
+  if (!server) {
+    return async () => {}
+  }
+
+  return async () => {
+    if (updating) {
+      return
+    }
+    setUpdating(true)
+
+    const client = new SubsonicApiClient(server)
+    const response = await client.getPlaylists()
+
+    updateList(response.data.playlists.map(a => mapPlaylistListItem(a, client)))
+    setUpdating(false)
+  }
+}
+
+export const playlistAtomFamily = atomFamily((id: string) =>
+  atom<PlaylistWithSongs | undefined>(async get => {
+    const server = get(activeServerAtom)
+    if (!server) {
+      return undefined
+    }
+
+    const client = new SubsonicApiClient(server)
+    const response = await client.getPlaylist({ id })
+    return mapPlaylistWithSongs(response.data.playlist, client)
+  }),
+)
+
 export const albumListUpdatingAtom = atom(false)
 export const albumListAtom = atom<AlbumListItem[]>([])
 
@@ -202,13 +258,15 @@ function mapArtistInfo(
 
 function mapCoverArtUri(item: { coverArt?: string }, client: SubsonicApiClient) {
   return {
-    coverArtUri: item.coverArt ? client.getCoverArtUri({ id: item.coverArt }) : undefined,
+    coverArtUri: item.coverArt ? client.getCoverArtUri({ id: item.coverArt }) : client.getCoverArtUri({ id: '-1' }),
   }
 }
 
 function mapCoverArtThumbUri(item: { coverArt?: string }, client: SubsonicApiClient) {
   return {
-    coverArtThumbUri: item.coverArt ? client.getCoverArtUri({ id: item.coverArt, size: '256' }) : undefined,
+    coverArtThumbUri: item.coverArt
+      ? client.getCoverArtUri({ id: item.coverArt, size: '256' })
+      : client.getCoverArtUri({ id: '-1', size: '256' }),
   }
 }
 
@@ -256,3 +314,20 @@ function mapAlbumID3WithSongstoAlbunWithSongs(
     songs: songs.map(s => mapChildToSong(s, client)),
   }
 }
+
+function mapPlaylistListItem(playlist: PlaylistElement, client: SubsonicApiClient): PlaylistListItem {
+  return {
+    id: playlist.id,
+    name: playlist.name,
+    comment: playlist.comment,
+    ...mapCoverArtThumbUri(playlist, client),
+  }
+}
+
+function mapPlaylistWithSongs(playlist: PlaylistWithSongsElement, client: SubsonicApiClient): PlaylistWithSongs {
+  return {
+    ...mapPlaylistListItem(playlist, client),
+    songs: playlist.songs.map(s => mapChildToSong(s, client)),
+    ...mapCoverArtUri(playlist, client),
+  }
+}

app/subsonic/api.ts

@@ -10,6 +10,8 @@ import {
   GetCoverArtParams,
   GetIndexesParams,
   GetMusicDirectoryParams,
+  GetPlaylistParams,
+  GetPlaylistsParams,
   GetTopSongsParams,
   StreamParams,
 } from '@app/subsonic/params'
@@ -23,6 +25,8 @@ import {
   GetArtistsResponse,
   GetIndexesResponse,
   GetMusicDirectoryResponse,
+  GetPlaylistResponse,
+  GetPlaylistsResponse,
   GetTopSongsResponse,
   SubsonicResponse,
 } from '@app/subsonic/responses'
@@ -75,7 +79,7 @@ export class SubsonicApiClient {
     }
 
     const url = `${this.address}/rest/${method}?${query}`
-    // console.log(url);
+    // console.log(url)
     return url
   }
 
@@ -95,7 +99,7 @@ export class SubsonicApiClient {
     const response = await fetch(this.buildUrl(method, params))
     const text = await response.text()
 
-    // console.log(text);
+    // console.log(text)
 
     const xml = new DOMParser().parseFromString(text)
     if (xml.documentElement.getAttribute('status') !== 'ok') {
@@ -186,6 +190,20 @@ export class SubsonicApiClient {
     return new SubsonicResponse<GetAlbumList2Response>(xml, new GetAlbumList2Response(xml))
   }
 
+  //
+  // Playlists
+  //
+
+  async getPlaylists(params?: GetPlaylistsParams): Promise<SubsonicResponse<GetPlaylistsResponse>> {
+    const xml = await this.apiGetXml('getPlaylists', params)
+    return new SubsonicResponse<GetPlaylistsResponse>(xml, new GetPlaylistsResponse(xml))
+  }
+
+  async getPlaylist(params: GetPlaylistParams): Promise<SubsonicResponse<GetPlaylistResponse>> {
+    const xml = await this.apiGetXml('getPlaylist', params)
+    return new SubsonicResponse<GetPlaylistResponse>(xml, new GetPlaylistResponse(xml))
+  }
+
   //
   // Media retrieval
   //
@@ -195,7 +213,7 @@ export class SubsonicApiClient {
     return await this.apiDownload('getCoverArt', path, params)
   }
 
-  getCoverArtUri(params: GetCoverArtParams): string {
+  getCoverArtUri(params?: GetCoverArtParams): string {
     return this.buildUrl('getCoverArt', params)
   }
 

app/subsonic/elements.ts

@@ -235,3 +235,46 @@ export class AlbumID3Element {
     this.genre = optionalString(e, 'genre')
   }
 }
+
+export class PlaylistElement {
+  allowedUser: string[] = []
+  id: string
+  name: string
+  comment?: string
+  owner?: string
+  public?: boolean
+  songCount: number
+  duration: number
+  created: Date
+  changed: Date
+  coverArt?: string
+
+  constructor(e: Element) {
+    for (let i = 0; i < e.getElementsByTagName('allowedUser').length; i++) {
+      this.allowedUser.push(e.getElementsByTagName('allowedUser')[i].textContent as string)
+    }
+
+    this.id = requiredString(e, 'id')
+    this.name = requiredString(e, 'name')
+    this.comment = optionalString(e, 'comment')
+    this.owner = optionalString(e, 'owner')
+    this.public = optionalBoolean(e, 'public')
+    this.songCount = requiredInt(e, 'songCount')
+    this.duration = requiredInt(e, 'duration')
+    this.created = requiredDate(e, 'created')
+    this.changed = requiredDate(e, 'changed')
+    this.coverArt = optionalString(e, 'coverArt')
+  }
+}
+
+export class PlaylistWithSongsElement extends PlaylistElement {
+  songs: ChildElement[] = []
+
+  constructor(e: Element) {
+    super(e)
+
+    for (let i = 0; i < e.getElementsByTagName('entry').length; i++) {
+      this.songs.push(new ChildElement(e.getElementsByTagName('entry')[i]))
+    }
+  }
+}

app/subsonic/params.ts

@@ -72,6 +72,18 @@ export type GetAlbumList2Params =
 
 export type GetAlbumListParams = GetAlbumList2Params
 
+//
+// Playlists
+//
+
+export type GetPlaylistsParams = {
+  username?: string
+}
+
+export type GetPlaylistParams = {
+  id: string
+}
+
 //
 // Media retrieval
 //

app/subsonic/responses.ts

@@ -6,6 +6,8 @@ import {
   ArtistInfoElement,
   ChildElement,
   DirectoryElement,
+  PlaylistElement,
+  PlaylistWithSongsElement,
 } from '@app/subsonic/elements'
 
 export type ResponseStatus = 'ok' | 'failed'
@@ -153,3 +155,26 @@ export class GetAlbumList2Response extends BaseGetAlbumListResponse<AlbumID3Elem
     super(xml, AlbumID3Element)
   }
 }
+
+//
+// Playlists
+//
+
+export class GetPlaylistsResponse {
+  playlists: PlaylistElement[] = []
+
+  constructor(xml: Document) {
+    const playlistElements = xml.getElementsByTagName('playlist')
+    for (let i = 0; i < playlistElements.length; i++) {
+      this.playlists.push(new PlaylistElement(playlistElements[i]))
+    }
+  }
+}
+
+export class GetPlaylistResponse {
+  playlist: PlaylistWithSongsElement
+
+  constructor(xml: Document) {
+    this.playlist = new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0])
+  }
+}