Library store refactor (#76)

* start of music store refactor

moving stuff into a state cache
better separate it from view logic

* added paginated list/album list

* reworked fetchAlbumList to remove ui state

refactored home screen to use new method
i broke playing songs somehow, JS thread goes into a loop

* don't reset parts manually, do it all at once

* fixed perf issue related to too many rerenders

rerenders were caused by strict equality check on object/array picks
switched artistInfo to new store
updated zustand and fixed deprecation warnings

* update typescript

and use workspace tsc version for vscode

* remove old artistInfo

* switched to new playlist w/songs

removed more unused stuff

* remove unused + (slightly) rework search

* refactor star

* use only original/large imges for covers/artist

fix view artist from context menu
add loading indicators to song list and artist views (show info we have right away)

* set starred/unstar assuming it works

and correct state on error

* reorg, remove old music slice files

* added back fix for song cover art

* sort artists by localCompare name

* update licenses

* fix now playing background grey bar

* update react-native-gesture-handler

for node-fetch security alert

* fix another gradient height grey bar issue

* update licenses again

* remove thumbnail cache

* rename to remove "Library" from methods

* Revert "remove thumbnail cache"

This reverts commit e0db4931f1.

* use ids for lists, pull state later

* Revert "use only original/large imges for covers/artist"

This reverts commit c9aea9065c.

* deep equal ListItem props for now

this needs a bigger refactor

* use immer as middleware

* refactor api client to use string method

hoping to use this for requestKey/deduping next

* use thumbnails in list items

* Revert "refactor api client to use string method"

This reverts commit 234326135b.

* rename/cleanup

* store servers by id

* get rid of settings selectors

* renames for clarity

remove unused estimateContentLength setting

* remove trackplayer selectors

* fix migration for library filter settings

* fixed shuffle order reporting wrong track/queue

* removed the other selectors

* don't actually need es6/react for our state

* fix slow artist sort on star

localeCompare is too slow for large lists

app/subsonic/api.ts

@@ -11,6 +11,7 @@ import {
   GetMusicDirectoryParams,
   GetPlaylistParams,
   GetPlaylistsParams,
+  GetSongParams,
   GetTopSongsParams,
   ScrobbleParams,
   Search3Params,
@@ -29,9 +30,10 @@ import {
   GetMusicDirectoryResponse,
   GetPlaylistResponse,
   GetPlaylistsResponse,
+  GetSongResponse,
   GetTopSongsResponse,
+  NullResponse,
   Search3Response,
-  SubsonicResponse,
 } from '@app/subsonic/responses'
 import toast from '@app/util/toast'
 import userAgent from '@app/util/userAgent'
@@ -131,81 +133,72 @@ export class SubsonicApiClient {
   // System
   //
 
-  async ping(): Promise<SubsonicResponse<null>> {
-    const xml = await this.apiGetXml('ping')
-    return new SubsonicResponse<null>(xml, null)
+  async ping(): Promise<NullResponse> {
+    return new NullResponse(await this.apiGetXml('ping'))
   }
 
   //
   // Browsing
   //
 
-  async getArtists(): Promise<SubsonicResponse<GetArtistsResponse>> {
-    const xml = await this.apiGetXml('getArtists')
-    return new SubsonicResponse<GetArtistsResponse>(xml, new GetArtistsResponse(xml))
+  async getArtists(): Promise<GetArtistsResponse> {
+    return new GetArtistsResponse(await this.apiGetXml('getArtists'))
   }
 
-  async getIndexes(params?: GetIndexesParams): Promise<SubsonicResponse<GetIndexesResponse>> {
-    const xml = await this.apiGetXml('getIndexes', params)
-    return new SubsonicResponse<GetIndexesResponse>(xml, new GetIndexesResponse(xml))
+  async getIndexes(params?: GetIndexesParams): Promise<GetIndexesResponse> {
+    return new GetIndexesResponse(await this.apiGetXml('getIndexes', params))
   }
 
-  async getMusicDirectory(params: GetMusicDirectoryParams): Promise<SubsonicResponse<GetMusicDirectoryResponse>> {
-    const xml = await this.apiGetXml('getMusicDirectory', params)
-    return new SubsonicResponse<GetMusicDirectoryResponse>(xml, new GetMusicDirectoryResponse(xml))
+  async getMusicDirectory(params: GetMusicDirectoryParams): Promise<GetMusicDirectoryResponse> {
+    return new GetMusicDirectoryResponse(await this.apiGetXml('getMusicDirectory', params))
   }
 
-  async getAlbum(params: GetAlbumParams): Promise<SubsonicResponse<GetAlbumResponse>> {
-    const xml = await this.apiGetXml('getAlbum', params)
-    return new SubsonicResponse<GetAlbumResponse>(xml, new GetAlbumResponse(xml))
+  async getAlbum(params: GetAlbumParams): Promise<GetAlbumResponse> {
+    return new GetAlbumResponse(await this.apiGetXml('getAlbum', params))
   }
 
-  async getArtistInfo(params: GetArtistInfoParams): Promise<SubsonicResponse<GetArtistInfoResponse>> {
-    const xml = await this.apiGetXml('getArtistInfo', params)
-    return new SubsonicResponse<GetArtistInfoResponse>(xml, new GetArtistInfoResponse(xml))
+  async getArtistInfo(params: GetArtistInfoParams): Promise<GetArtistInfoResponse> {
+    return new GetArtistInfoResponse(await this.apiGetXml('getArtistInfo', params))
   }
 
-  async getArtistInfo2(params: GetArtistInfo2Params): Promise<SubsonicResponse<GetArtistInfo2Response>> {
-    const xml = await this.apiGetXml('getArtistInfo2', params)
-    return new SubsonicResponse<GetArtistInfo2Response>(xml, new GetArtistInfo2Response(xml))
+  async getArtistInfo2(params: GetArtistInfo2Params): Promise<GetArtistInfo2Response> {
+    return new GetArtistInfo2Response(await this.apiGetXml('getArtistInfo2', params))
   }
 
-  async getArtist(params: GetArtistParams): Promise<SubsonicResponse<GetArtistResponse>> {
-    const xml = await this.apiGetXml('getArtist', params)
-    return new SubsonicResponse<GetArtistResponse>(xml, new GetArtistResponse(xml))
+  async getArtist(params: GetArtistParams): Promise<GetArtistResponse> {
+    return new GetArtistResponse(await this.apiGetXml('getArtist', params))
   }
 
-  async getTopSongs(params: GetTopSongsParams): Promise<SubsonicResponse<GetTopSongsResponse>> {
-    const xml = await this.apiGetXml('getTopSongs', params)
-    return new SubsonicResponse<GetTopSongsResponse>(xml, new GetTopSongsResponse(xml))
+  async getTopSongs(params: GetTopSongsParams): Promise<GetTopSongsResponse> {
+    return new GetTopSongsResponse(await this.apiGetXml('getTopSongs', params))
+  }
+
+  async getSong(params: GetSongParams): Promise<GetSongResponse> {
+    return new GetSongResponse(await this.apiGetXml('getSong', params))
   }
 
   //
   // Album/song lists
   //
 
-  async getAlbumList(params: GetAlbumListParams): Promise<SubsonicResponse<GetAlbumListResponse>> {
-    const xml = await this.apiGetXml('getAlbumList', params)
-    return new SubsonicResponse<GetAlbumListResponse>(xml, new GetAlbumListResponse(xml))
+  async getAlbumList(params: GetAlbumListParams): Promise<GetAlbumListResponse> {
+    return new GetAlbumListResponse(await this.apiGetXml('getAlbumList', params))
   }
 
-  async getAlbumList2(params: GetAlbumList2Params): Promise<SubsonicResponse<GetAlbumList2Response>> {
-    const xml = await this.apiGetXml('getAlbumList2', params)
-    return new SubsonicResponse<GetAlbumList2Response>(xml, new GetAlbumList2Response(xml))
+  async getAlbumList2(params: GetAlbumList2Params): Promise<GetAlbumList2Response> {
+    return new GetAlbumList2Response(await this.apiGetXml('getAlbumList2', params))
   }
 
   //
   // Playlists
   //
 
-  async getPlaylists(params?: GetPlaylistsParams): Promise<SubsonicResponse<GetPlaylistsResponse>> {
-    const xml = await this.apiGetXml('getPlaylists', params)
-    return new SubsonicResponse<GetPlaylistsResponse>(xml, new GetPlaylistsResponse(xml))
+  async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
+    return new GetPlaylistsResponse(await this.apiGetXml('getPlaylists', params))
   }
 
-  async getPlaylist(params: GetPlaylistParams): Promise<SubsonicResponse<GetPlaylistResponse>> {
-    const xml = await this.apiGetXml('getPlaylist', params)
-    return new SubsonicResponse<GetPlaylistResponse>(xml, new GetPlaylistResponse(xml))
+  async getPlaylist(params: GetPlaylistParams): Promise<GetPlaylistResponse> {
+    return new GetPlaylistResponse(await this.apiGetXml('getPlaylist', params))
   }
 
   //
@@ -224,27 +217,23 @@ export class SubsonicApiClient {
   // Media annotation
   //
 
-  async scrobble(params: ScrobbleParams): Promise<SubsonicResponse<undefined>> {
-    const xml = await this.apiGetXml('scrobble', params)
-    return new SubsonicResponse<undefined>(xml, undefined)
+  async scrobble(params: ScrobbleParams): Promise<NullResponse> {
+    return new NullResponse(await this.apiGetXml('scrobble', params))
   }
 
-  async star(params: StarParams): Promise<SubsonicResponse<undefined>> {
-    const xml = await this.apiGetXml('star', params)
-    return new SubsonicResponse<undefined>(xml, undefined)
+  async star(params: StarParams): Promise<NullResponse> {
+    return new NullResponse(await this.apiGetXml('star', params))
   }
 
-  async unstar(params: StarParams): Promise<SubsonicResponse<undefined>> {
-    const xml = await this.apiGetXml('unstar', params)
-    return new SubsonicResponse<undefined>(xml, undefined)
+  async unstar(params: StarParams): Promise<NullResponse> {
+    return new NullResponse(await this.apiGetXml('unstar', params))
   }
 
   //
   // Searching
   //
 
-  async search3(params: Search3Params): Promise<SubsonicResponse<Search3Response>> {
-    const xml = await this.apiGetXml('search3', params)
-    return new SubsonicResponse<Search3Response>(xml, new Search3Response(xml))
+  async search3(params: Search3Params): Promise<Search3Response> {
+    return new Search3Response(await this.apiGetXml('search3', params))
   }
 }

app/subsonic/params.ts

@@ -27,6 +27,10 @@ export type GetArtistParams = {
   id: string
 }
 
+export type GetSongParams = {
+  id: string
+}
+
 export type GetTopSongsParams = {
   artist: string
   count?: number

app/subsonic/responses.ts

@@ -12,119 +12,160 @@ import {
 
 export type ResponseStatus = 'ok' | 'failed'
 
-export class SubsonicResponse<T> {
+export class SubsonicResponse {
   status: ResponseStatus
   version: string
-  data: T
 
-  constructor(xml: Document, data: T) {
-    this.data = data
+  constructor(xml: Document) {
     this.status = xml.documentElement.getAttribute('status') as ResponseStatus
     this.version = xml.documentElement.getAttribute('version') as string
   }
 }
 
+export class NullResponse extends SubsonicResponse {
+  data = null
+}
+
 //
 // Browsing
 //
 
-export class GetArtistsResponse {
-  ignoredArticles: string
-  artists: ArtistID3Element[] = []
+export class GetArtistsResponse extends SubsonicResponse {
+  data: {
+    ignoredArticles: string
+    artists: ArtistID3Element[]
+  }
 
   constructor(xml: Document) {
-    this.ignoredArticles = xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') as string
+    super(xml)
 
-    const artistElements = xml.getElementsByTagName('artist')
-    for (let i = 0; i < artistElements.length; i++) {
-      this.artists.push(new ArtistID3Element(artistElements[i]))
+    this.data = {
+      ignoredArticles: xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') || '',
+      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
     }
   }
 }
 
-export class GetArtistResponse {
-  artist: ArtistID3Element
-  albums: AlbumID3Element[] = []
+export class GetArtistResponse extends SubsonicResponse {
+  data: {
+    artist: ArtistID3Element
+    albums: AlbumID3Element[]
+  }
 
   constructor(xml: Document) {
-    this.artist = new ArtistID3Element(xml.getElementsByTagName('artist')[0])
+    super(xml)
 
-    const albumElements = xml.getElementsByTagName('album')
-    for (let i = 0; i < albumElements.length; i++) {
-      this.albums.push(new AlbumID3Element(albumElements[i]))
+    this.data = {
+      artist: new ArtistID3Element(xml.getElementsByTagName('artist')[0]),
+      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
     }
   }
 }
 
-export class GetIndexesResponse {
-  ignoredArticles: string
-  lastModified: number
-  artists: ArtistElement[] = []
+export class GetIndexesResponse extends SubsonicResponse {
+  data: {
+    ignoredArticles: string
+    lastModified: number
+    artists: ArtistElement[]
+  }
 
   constructor(xml: Document) {
+    super(xml)
+
     const indexesElement = xml.getElementsByTagName('indexes')[0]
 
-    this.ignoredArticles = indexesElement.getAttribute('ignoredArticles') as string
-    this.lastModified = parseInt(indexesElement.getAttribute('lastModified') as string, 10)
-
-    const artistElements = xml.getElementsByTagName('artist')
-    for (let i = 0; i < artistElements.length; i++) {
-      this.artists.push(new ArtistElement(artistElements[i]))
+    this.data = {
+      ignoredArticles: indexesElement.getAttribute('ignoredArticles') || '',
+      lastModified: parseInt(indexesElement.getAttribute('lastModified') || '0', 10),
+      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistElement(i)),
     }
   }
 }
 
-export class GetArtistInfoResponse {
-  artistInfo: ArtistInfoElement
-
-  constructor(xml: Document) {
-    this.artistInfo = new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0])
+export class GetArtistInfoResponse extends SubsonicResponse {
+  data: {
+    artistInfo: ArtistInfoElement
   }
-}
-
-export class GetArtistInfo2Response {
-  artistInfo: ArtistInfo2Element
 
   constructor(xml: Document) {
-    this.artistInfo = new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0])
-  }
-}
+    super(xml)
 
-export class GetMusicDirectoryResponse {
-  directory: DirectoryElement
-  children: ChildElement[] = []
-
-  constructor(xml: Document) {
-    this.directory = new DirectoryElement(xml.getElementsByTagName('directory')[0])
-
-    const childElements = xml.getElementsByTagName('child')
-    for (let i = 0; i < childElements.length; i++) {
-      this.children.push(new ChildElement(childElements[i]))
+    this.data = {
+      artistInfo: new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0]),
     }
   }
 }
 
-export class GetAlbumResponse {
-  album: AlbumID3Element
-  songs: ChildElement[] = []
+export class GetArtistInfo2Response extends SubsonicResponse {
+  data: {
+    artistInfo: ArtistInfo2Element
+  }
 
   constructor(xml: Document) {
-    this.album = new AlbumID3Element(xml.getElementsByTagName('album')[0])
+    super(xml)
 
-    const childElements = xml.getElementsByTagName('song')
-    for (let i = 0; i < childElements.length; i++) {
-      this.songs.push(new ChildElement(childElements[i]))
+    this.data = {
+      artistInfo: new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0]),
     }
   }
 }
 
-export class GetTopSongsResponse {
-  songs: ChildElement[] = []
+export class GetMusicDirectoryResponse extends SubsonicResponse {
+  data: {
+    directory: DirectoryElement
+    children: ChildElement[]
+  }
 
   constructor(xml: Document) {
-    const childElements = xml.getElementsByTagName('song')
-    for (let i = 0; i < childElements.length; i++) {
-      this.songs.push(new ChildElement(childElements[i]))
+    super(xml)
+
+    this.data = {
+      directory: new DirectoryElement(xml.getElementsByTagName('directory')[0]),
+      children: Array.from(xml.getElementsByTagName('child')).map(i => new ChildElement(i)),
+    }
+  }
+}
+
+export class GetAlbumResponse extends SubsonicResponse {
+  data: {
+    album: AlbumID3Element
+    songs: ChildElement[]
+  }
+
+  constructor(xml: Document) {
+    super(xml)
+
+    this.data = {
+      album: new AlbumID3Element(xml.getElementsByTagName('album')[0]),
+      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
+    }
+  }
+}
+
+export class GetTopSongsResponse extends SubsonicResponse {
+  data: {
+    songs: ChildElement[]
+  }
+
+  constructor(xml: Document) {
+    super(xml)
+
+    this.data = {
+      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
+    }
+  }
+}
+
+export class GetSongResponse extends SubsonicResponse {
+  data: {
+    song: ChildElement
+  }
+
+  constructor(xml: Document) {
+    super(xml)
+
+    this.data = {
+      song: new ChildElement(xml.getElementsByTagName('song')[0]),
     }
   }
 }
@@ -133,13 +174,16 @@ export class GetTopSongsResponse {
 // Album/song lists
 //
 
-class BaseGetAlbumListResponse<T> {
-  albums: T[] = []
+class BaseGetAlbumListResponse<T> extends SubsonicResponse {
+  data: {
+    albums: T[]
+  }
 
-  constructor(xml: Document, albumType: new (e: Element) => T) {
-    const albumElements = xml.getElementsByTagName('album')
-    for (let i = 0; i < albumElements.length; i++) {
-      this.albums.push(new albumType(albumElements[i]))
+  constructor(xml: Document, AlbumType: new (e: Element) => T) {
+    super(xml)
+
+    this.data = {
+      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumType(i)),
     }
   }
 }
@@ -160,22 +204,31 @@ export class GetAlbumList2Response extends BaseGetAlbumListResponse<AlbumID3Elem
 // Playlists
 //
 
-export class GetPlaylistsResponse {
-  playlists: PlaylistElement[] = []
+export class GetPlaylistsResponse extends SubsonicResponse {
+  data: {
+    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]))
+    super(xml)
+
+    this.data = {
+      playlists: Array.from(xml.getElementsByTagName('playlist')).map(i => new PlaylistElement(i)),
     }
   }
 }
 
-export class GetPlaylistResponse {
-  playlist: PlaylistWithSongsElement
+export class GetPlaylistResponse extends SubsonicResponse {
+  data: {
+    playlist: PlaylistWithSongsElement
+  }
 
   constructor(xml: Document) {
-    this.playlist = new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0])
+    super(xml)
+
+    this.data = {
+      playlist: new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0]),
+    }
   }
 }
 
@@ -183,25 +236,20 @@ export class GetPlaylistResponse {
 // Searching
 //
 
-export class Search3Response {
-  artists: ArtistID3Element[] = []
-  albums: AlbumID3Element[] = []
-  songs: ChildElement[] = []
+export class Search3Response extends SubsonicResponse {
+  data: {
+    artists: ArtistID3Element[]
+    albums: AlbumID3Element[]
+    songs: ChildElement[]
+  }
 
   constructor(xml: Document) {
-    const artistElements = xml.getElementsByTagName('artist')
-    for (let i = 0; i < artistElements.length; i++) {
-      this.artists.push(new ArtistID3Element(artistElements[i]))
-    }
+    super(xml)
 
-    const albumElements = xml.getElementsByTagName('album')
-    for (let i = 0; i < albumElements.length; i++) {
-      this.albums.push(new AlbumID3Element(albumElements[i]))
-    }
-
-    const songElements = xml.getElementsByTagName('song')
-    for (let i = 0; i < songElements.length; i++) {
-      this.songs.push(new ChildElement(songElements[i]))
+    this.data = {
+      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
+      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
+      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
     }
   }
 }