repeat v1.1.2 changelog for google play

* add changelog

* increment version

.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  ignorePatterns: ['submodules/**'],
+  ignorePatterns: ['submodules/**', 'ndk/**'],
   extends: '@react-native-community',
   rules: {
     '@typescript-eslint/no-unused-vars': ['warn'],

.github/workflows/build-release-debugsign.yml

@@ -4,18 +4,26 @@ on:
   push:
     paths-ignore:
       - assets/**
+      - .vscode/**
+      - .eslintrc.js
+      - .prettierrc.js
+      - BUILDING.md
       - README.md
       - LICENSE
     branches:
-      - master
+      - main
       - release/*
   pull_request:
     paths-ignore:
       - assets/**
+      - .vscode/**
+      - .eslintrc.js
+      - .prettierrc.js
+      - BUILDING.md
       - README.md
       - LICENSE
     branches:
-      - master
+      - main
 
 jobs:
   build:
@@ -24,21 +32,29 @@ jobs:
       - uses: actions/checkout@v2
         with:
           submodules: recursive
+
       - run: |
           rm submodules/ExoPlayer/gradle/wrapper/gradle-wrapper.jar
+
+      - uses: gradle/wrapper-validation-action@v1
+
       - uses: actions/setup-node@v2
         with:
           node-version: '14'
           cache: 'yarn'
+
       - run: |
-          yarn install
+          yarn install --network-concurrency 1
+
       - run: |
           yarn lint --max-warnings 0
+
       - run: |
           yarn license
+
       - run: |
-          scripts/prepare-exoplayer-ffmpeg.sh
+          yarn prepare-build
-      - uses: gradle/wrapper-validation-action@v1
+
       - uses: gradle/gradle-build-action@v1
         with:
           distributions-cache-enabled: true
@@ -46,11 +62,14 @@ jobs:
           configuration-cache-enabled: true
           build-root-directory: android
           arguments: assembleRelease -PsignReleaseWithDebug=true
+
       - run: |
           mkdir bin
+
       - run: >
           mv android/app/build/outputs/apk/release/app-release.apk
           bin/subtracks-${GITHUB_SHA}.apk
+
       - uses: actions/upload-artifact@v2
         with:
           name: subtracks-testing

.github/workflows/build-release.yml

@@ -12,27 +12,36 @@ jobs:
       - uses: actions/checkout@v2
         with:
           submodules: recursive
+
       - run: |
           rm submodules/ExoPlayer/gradle/wrapper/gradle-wrapper.jar
+
+      - uses: gradle/wrapper-validation-action@v1
+
       - uses: actions/setup-node@v2
         with:
           node-version: '14'
           cache: 'yarn'
+
       - name: Get subtracks version
         run: |
           echo "SUBTRACKS_VERSION=$(node -e "console.log(require('./package.json').version);")" >> $GITHUB_ENV
+
       - run: |
-          yarn install
+          yarn install --network-concurrency 1
+
       - run: |
           yarn license
+
       - run: |
-          scripts/prepare-exoplayer-ffmpeg.sh
+          yarn prepare-build
-      - uses: gradle/wrapper-validation-action@v1
+
       - name: Retrieve keystore file
         env:
           SUBTRACKS_KEYSTORE_BASE64: ${{ secrets.SUBTRACKS_KEYSTORE_BASE64 }}
         run: |
           echo "$SUBTRACKS_KEYSTORE_BASE64" | base64 --decode > android/app/subtracks.keystore
+
       - name: Build release APK
         env:
           SUBTRACKS_UPLOAD_KEY_PASSWORD: ${{ secrets.SUBTRACKS_UPLOAD_KEY_PASSWORD }}
@@ -44,11 +53,14 @@ jobs:
           -PSUBTRACKS_UPLOAD_KEY_ALIAS=subtracks
           -PSUBTRACKS_UPLOAD_KEY_PASSWORD="$SUBTRACKS_UPLOAD_KEY_PASSWORD"
           -PSUBTRACKS_UPLOAD_STORE_PASSWORD="$SUBTRACKS_UPLOAD_STORE_PASSWORD"
+
       - run: |
           mkdir bin
+
       - run: >
           mv android/app/build/outputs/apk/release/app-release.apk
           bin/subtracks-${SUBTRACKS_VERSION}.apk
+
       - name: Build release AAB
         env:
           SUBTRACKS_UPLOAD_KEY_PASSWORD: ${{ secrets.SUBTRACKS_UPLOAD_KEY_PASSWORD }}
@@ -60,9 +72,11 @@ jobs:
           -PSUBTRACKS_UPLOAD_KEY_ALIAS=subtracks
           -PSUBTRACKS_UPLOAD_KEY_PASSWORD="$SUBTRACKS_UPLOAD_KEY_PASSWORD"
           -PSUBTRACKS_UPLOAD_STORE_PASSWORD="$SUBTRACKS_UPLOAD_STORE_PASSWORD"
+
       - run: >
           mv android/app/build/outputs/bundle/release/app-release.aab
           bin/subtracks-${SUBTRACKS_VERSION}.aab
+
       - uses: actions/upload-artifact@v2
         with:
           name: subtracks-release

.gitignore

@@ -28,6 +28,7 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
 
 # node.js
 #

.nvmrc

@@ -0,0 +1 @@
+14

.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   bracketSpacing: true,
-  jsxBracketSameLine: true,
   singleQuote: true,
+  jsxBracketSameLine: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
   printWidth: 120,

.ruby-version

@@ -0,0 +1 @@
+2.7.4

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

BUILDING.md

@@ -0,0 +1,59 @@
+# Building from source
+Instructions are provided here for Linux, specifically Ubuntu 20.04, but other operating systems should be fine as long as the requirements are met.
+
+## Requirements
+### Base
+- git
+- wget
+- unzip
+- node.js (14.x)
+- yarn (1.x)
+
+### React Native
+Subtracks is a React Native application, which means you need to make sure you are set up for that.  Follow the guide here to set up your development environment (React Native CLI, not Expo): 
+
+https://reactnative.dev/docs/environment-setup
+
+When setting up your environment, make sure to install the following dependency versions:
+- Node 14
+- Java JDK 11 (tested with openjdk-11-jdk)
+
+### ExoPlayer
+We also need the requirements to build ExoPlayer's ffmpeg extension for Android, which should be covered by:
+- build-essential (make, etc.)
+
+More information on building ffmpeg can be found here (this is what the `prepare-build` script does):
+
+https://github.com/google/ExoPlayer/tree/r2.11.4/extensions/ffmpeg
+
+## Building
+Clone the repository, making sure to recurse submodules, and change into the directory:
+```sh
+git clone --recursive https://github.com/austinried/subtracks.git
+cd subtracks
+```
+
+Install the yarn packages and prepare the ExoPlayer ffmpeg extension by running the yarn script:
+```sh
+yarn install
+yarn prepare-build
+```
+
+### Debug
+In a separate terminal start Metro, which will be an ongoing process that serves javascript bundles to the build:
+```sh
+yarn start
+```
+
+Run the android debug build script, which will start the build and also start your default emulator and push the build to it (or push the build to a running emulator/already connected device):
+```sh
+yarn android
+```
+
+### Release
+Similar to the debug build, except we don't need to run Metro first:
+```sh
+yarn android:release
+```
+
+The generated APK will be written to `android/app/build/outputs/apk/release/app-release.apk`

Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '2.7.4'
+
+gem 'cocoapods', '~> 1.11', '>= 1.11.2'

Gemfile.lock

@@ -0,0 +1,100 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.5)
+      rexml
+    activesupport (6.1.4.4)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    claide (1.1.0)
+    cocoapods (1.11.2)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.11.2)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 1.0, < 3.0)
+      xcodeproj (>= 1.21.0, < 2.0)
+    cocoapods-core (1.11.2)
+      activesupport (>= 5.0, < 7)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (1.5.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.1.9)
+    escape (0.0.4)
+    ethon (0.15.0)
+      ffi (>= 1.15.0)
+    ffi (1.15.5)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.8.11)
+      concurrent-ruby (~> 1.0)
+    json (2.6.1)
+    minitest (5.15.0)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    public_suffix (4.0.6)
+    rexml (3.2.5)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.4)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.21.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.5.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  cocoapods (~> 1.11, >= 1.11.2)
+
+RUBY VERSION
+   ruby 2.7.4p191
+
+BUNDLED WITH
+   2.2.27

README.md

@@ -42,3 +42,6 @@ Subtracks is an Android open source music streaming app for [Subsonic-API-compat
 - Multi-select actions
 - Performance & animation improvements
 - More shuffle play modes
+
+# Building
+See [Building from source](BUILDING.md).

android/app/build.gradle

@@ -134,8 +134,8 @@ android {
         applicationId "com.subtracks"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5
+        versionCode 7
-        versionName '1.1.1'
+        versionName '1.1.3'
     }
     splits {
         abi {

android/app/proguard-rules.pro

@@ -10,3 +10,7 @@
 # Add any project specific keep options here:
 
 -keep class com.facebook.react.turbomodule.** { *; }
+
+# react-native-reanimated
+# https://github.com/software-mansion/react-native-reanimated/pull/2725
+-keep class com.swmansion.** {*;}

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+
+    <selector>
+        <!-- 
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

android/app/src/main/res/values/styles.xml

@@ -3,7 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:textColor">#000000</item>
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>
 
 </resources>

android/build.gradle

@@ -2,24 +2,25 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "30.0.3"
+        buildToolsVersion = "30.0.2"
         minSdkVersion = 21
         compileSdkVersion = 30
         targetSdkVersion = 30
-        ndkVersion = "20.1.5948944"
+        ndkVersion = "21.4.7075529"
 
         // react-native-async-storage next
         kotlinVersion = '1.4.21'
     }
     repositories {
         google()
-        jcenter()
+        mavenCentral()
+        // jcenter()
         maven {
             url 'https://plugins.gradle.org/m2/'
         }
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:4.1.0")
+        classpath("com.android.tools.build:gradle:4.2.2")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
 
@@ -45,9 +46,24 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
-
+        mavenCentral {
+            // We don't want to fetch react-native from Maven Central as there are
+            // older versions over there.
+            content {
+                excludeGroup "com.facebook.react"
+            }
+        }
         google()
-        jcenter()
         maven { url 'https://www.jitpack.io' }
+        // remove jcenter once the following workarounds are no longer needed
+        jcenter() {
+            content {
+                // used by react-native-track-player, can remove once they use a newer exoplayer
+                includeGroup("com.linkedin.dexmaker")
+                // used by exoplayer
+                includeGroup("com.linkedin.dexmaker-mockito")
+                includeGroup("com.google.android.exoplayer")
+            }
+        }
     }
 }

android/gradle.properties

@@ -9,7 +9,7 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# Default value: -Xmx1024m -XX:MaxPermSize=256m
 org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
 # When configured, Gradle will run in incubating parallel mode.
@@ -25,7 +25,7 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.75.1
+FLIPPER_VERSION=0.99.0
 
 # react-native-async-storage next
 AsyncStorage_useNextStorage=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/licenses.yml

@@ -4,12 +4,18 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: https://developer.android.com/jetpack/androidx
+- artifact: androidx.annotation:annotation-experimental:+
+  name: annotation-experimental
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://developer.android.com/jetpack/androidx/releases/annotation#1.1.0
 - artifact: androidx.annotation:annotation:+
   name: annotation
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: http://developer.android.com/tools/extras/support-library.html
+  url: https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0
 - artifact: androidx.appcompat:appcompat-resources:+
   name: appcompat-resources
   copyrightHolder: Original Author
@@ -40,6 +46,12 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: http://developer.android.com/tools/extras/support-library.html
+- artifact: androidx.autofill:autofill:+
+  name: autofill
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://developer.android.com/jetpack/androidx/releases/autofill#1.1.0
 - artifact: androidx.cardview:cardview:+
   name: cardview
   copyrightHolder: Original Author
@@ -58,6 +70,12 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: https://developer.android.com/jetpack/androidx
+- artifact: androidx.core:core-ktx:+
+  name: core-ktx
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://developer.android.com/jetpack/androidx/releases/core#1.6.0
 - artifact: androidx.core:core:+
   name: core
   copyrightHolder: Original Author
@@ -189,19 +207,19 @@
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://developer.android.com/topic/libraries/architecture/index.html
+  url: https://developer.android.com/jetpack/androidx/releases/room#2.3.0
 - artifact: androidx.room:room-ktx:+
   name: room-ktx
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://developer.android.com/topic/libraries/architecture/index.html
+  url: https://developer.android.com/jetpack/androidx/releases/room#2.3.0
 - artifact: androidx.room:room-runtime:+
   name: room-runtime
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://developer.android.com/topic/libraries/architecture/index.html
+  url: https://developer.android.com/jetpack/androidx/releases/room#2.3.0
 - artifact: androidx.savedstate:savedstate:+
   name: savedstate
   copyrightHolder: Original Author
@@ -301,62 +319,104 @@
 - artifact: com.facebook.fresco:drawee:+
   name: drawee
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:fbcore:+
   name: fbcore
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:fresco:+
   name: fresco
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:imagepipeline-base:+
   name: imagepipeline-base
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:imagepipeline-native:+
+  name: imagepipeline-native
+  copyrightHolder: Original Author
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:imagepipeline-okhttp3:+
   name: imagepipeline-okhttp3
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:imagepipeline:+
   name: imagepipeline
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:memory-type-ashmem:+
+  name: memory-type-ashmem
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:memory-type-java:+
+  name: memory-type-java
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:memory-type-native:+
+  name: memory-type-native
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:middleware:+
+  name: middleware
+  copyrightHolder: Original Author
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:nativeimagefilters:+
   name: nativeimagefilters
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:nativeimagetranscoder:+
   name: nativeimagetranscoder
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:soloader:+
+  name: soloader
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:ui-common:+
+  name: ui-common
+  copyrightHolder: Original Author
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.infer.annotation:infer-annotation:+
   name: infer-annotation
   copyrightHolder: Original Author
-  license: BSD license
+  license: MIT license
   licenseUrl: https://github.com/facebook/infer/blob/master/LICENSE
   url: http://fbinfer.com/
 - artifact: com.facebook.react:react-native:+
   name: react-native
   copyrightHolder: Original Author
   license: MIT License
-  licenseUrl: https://github.com/facebook/react-native/blob/master/LICENSE
+  licenseUrl: https://github.com/facebook/react-native/blob/HEAD/LICENSE
   url: https://github.com/facebook/react-native
 - artifact: com.facebook.soloader:annotation:+
   name: annotation
@@ -494,21 +554,21 @@
 - artifact: com.squareup.okhttp3:okhttp-urlconnection:+
   name: okhttp-urlconnection
   copyrightHolder: Original Author
-  license: Apache-2.0 License
+  license: The Apache Software License, Version 2.0
-  licenseUrl: https://github.com/square/okhttp/blob/master/LICENSE.txt
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://github.com/square/okhttp
+  url: https://square.github.io/okhttp/
 - artifact: com.squareup.okhttp3:okhttp:+
   name: okhttp
   copyrightHolder: Original Author
-  license: Apache-2.0 License
+  license: The Apache Software License, Version 2.0
-  licenseUrl: https://github.com/square/okhttp/blob/master/LICENSE.txt
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://github.com/square/okhttp
+  url: https://square.github.io/okhttp/
 - artifact: com.squareup.okio:okio:+
   name: okio
   copyrightHolder: Original Author
-  license: Apache-2.0 License
+  license: The Apache Software License, Version 2.0
-  licenseUrl: https://github.com/square/okio/blob/master/LICENSE.txt
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://github.com/square/okio
+  url: https://github.com/square/okio/
 - artifact: javax.inject:javax.inject:+
   name: javax.inject
   copyrightHolder: Original Author
@@ -563,12 +623,30 @@
   license: The Apache License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: https://kotlinlang.org/
+- artifact: org.jetbrains.kotlin:kotlin-reflect:+
+  name: kotlin-reflect
+  copyrightHolder: Original Author
+  license: The Apache License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://kotlinlang.org/
 - artifact: org.jetbrains.kotlin:kotlin-stdlib-common:+
   name: kotlin-stdlib-common
   copyrightHolder: Original Author
   license: The Apache License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: https://kotlinlang.org/
+- artifact: org.jetbrains.kotlin:kotlin-stdlib-jdk7:+
+  name: kotlin-stdlib-jdk7
+  copyrightHolder: Original Author
+  license: The Apache License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://kotlinlang.org/
+- artifact: org.jetbrains.kotlin:kotlin-stdlib-jdk8:+
+  name: kotlin-stdlib-jdk8
+  copyrightHolder: Original Author
+  license: The Apache License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://kotlinlang.org/
 - artifact: org.jetbrains.kotlin:kotlin-stdlib:+
   name: kotlin-stdlib
   copyrightHolder: Original Author

app/App.tsx

@@ -5,12 +5,11 @@ import React from 'react'
 import { StatusBar, View, StyleSheet } from 'react-native'
 import ProgressHook from './components/ProgressHook'
 import { useStore } from './state/store'
-import { selectTrackPlayer } from './state/trackplayer'
 import { MenuProvider } from 'react-native-popup-menu'
 
 const Debug = () => {
-  const currentTrack = useStore(selectTrackPlayer.currentTrack)
+  const currentTrackTitle = useStore(store => store.currentTrack?.title)
-  console.log(currentTrack?.title)
+  console.log('currentTrackTitle', currentTrackTitle)
   return <></>
 }
 

app/components/BackgroundHeaderFlatList.tsx

@@ -37,7 +37,7 @@ function BackgroundHeaderFlatList<ItemT>(props: BackgroundHeaderFlatListProp<Ite
         </props.BackgroundComponent>
       }
       ListHeaderComponentStyle={[headerStyle]}
-      ListEmptyComponent={<NothingHere style={styles.nothing} />}
+      ListEmptyComponent={props.ListEmptyComponent || <NothingHere style={styles.nothing} />}
     />
   )
 }

app/components/ContextMenu.tsx

@@ -1,8 +1,6 @@
 import PressableOpacity from '@app/components/PressableOpacity'
-import { useStarred } from '@app/hooks/music'
+import { useStar } from '@app/hooks/library'
-import { AlbumListItem, Artist, Song, StarrableItemType } from '@app/models/music'
+import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
-import { selectMusic } from '@app/state/music'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
@@ -12,9 +10,8 @@ import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-
 import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
-// import IconMat from 'react-native-vector-icons/MaterialIcons'
 import CoverArt from './CoverArt'
-import Star from './Star'
+import { Star } from './Star'
 
 const { SlideInMenu } = renderers
 
@@ -144,14 +141,13 @@ const OptionStar = React.memo<{
   type: StarrableItemType
   additionalText?: string
 }>(({ id, type, additionalText: text }) => {
-  const starred = useStarred(id, type)
+  const { starred, toggleStar } = useStar(id, type)
-  const setStarred = useStore(selectMusic.starItem)
 
   return (
     <ContextMenuIconTextOption
       IconComponentRaw={<Star starred={starred} size={26} />}
       text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
-      onSelect={() => setStarred(id, type, starred)}
+      onSelect={toggleStar}
     />
   )
 })
@@ -203,7 +199,7 @@ const OptionViewAlbum = React.memo<{
 // ))
 
 export type AlbumContextPressableProps = ContextMenuProps & {
-  album: AlbumListItem
+  album: Album
 }
 
 export const AlbumContextPressable: React.FC<AlbumContextPressableProps> = props => {

app/components/HeaderBar.tsx

@@ -8,10 +8,10 @@ import Animated from 'react-native-reanimated'
 import PressableOpacity from './PressableOpacity'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { ReactComponentLike } from 'prop-types'
-import { AlbumListItem, Song } from '@app/models/music'
 import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu'
+import { Album, Song } from '@app/models/library'
 
-export type HeaderContextItem = Song | AlbumListItem
+export type HeaderContextItem = Song | Album
 
 const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
   const moreIcon = <IconMat name="more-vert" color="white" size={25} />
@@ -48,7 +48,7 @@ const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) =
 
 const HeaderBar = React.memo<{
   title?: string
-  headerStyle?: Animated.AnimatedStyleProp<ViewStyle> | Animated.AnimatedStyleProp<ViewStyle>[]
+  headerStyle?: Animated.AnimateStyle<ViewStyle> | Animated.AnimateStyle<ViewStyle>[]
   HeaderCenter?: ReactComponentLike
   contextItem?: HeaderContextItem
 }>(({ title, headerStyle, HeaderCenter, contextItem }) => {

app/components/ListItem.tsx

@@ -1,8 +1,5 @@
-import { useStarred } from '@app/hooks/music'
 import { useIsPlaying } from '@app/hooks/trackplayer'
-import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music'
+import { Album, Artist, ListableItem, Song } from '@app/models/library'
-import { selectMusic } from '@app/state/music'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -13,7 +10,8 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
 import CoverArt from './CoverArt'
 import PressableOpacity from './PressableOpacity'
-import Star from './Star'
+import { PressableStar } from './Star'
+import equal from 'fast-deep-equal/es6/react'
 
 const TitleTextSong = React.memo<{
   contextId?: string
@@ -58,7 +56,6 @@ const ListItem: React.FC<{
   style?: StyleProp<ViewStyle>
 }> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
   const navigation = useNavigation()
-  const starred = useStarred(item.id, item.itemType)
 
   showStar = showStar === undefined ? true : showStar
   listStyle = listStyle || 'small'
@@ -101,7 +98,7 @@ const ListItem: React.FC<{
   )
   const albumPressable = useCallback(
     ({ children }) => (
-      <AlbumContextPressable album={item as AlbumListItem} onPress={onPress} triggerWrapperStyle={styles.item}>
+      <AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
         {children}
       </AlbumContextPressable>
     ),
@@ -133,13 +130,6 @@ const ListItem: React.FC<{
     PressableComponent = artistPressable
   }
 
-  const starItem = useStore(selectMusic.starItem)
-  const toggleStarred = useCallback(() => {
-    if (item.itemType !== 'playlist') {
-      starItem(item.id, item.itemType, starred)
-    }
-  }, [item.id, item.itemType, starItem, starred])
-
   let title = <></>
   if (item.itemType === 'song' && queueId !== undefined) {
     title = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} />
@@ -151,9 +141,20 @@ const ListItem: React.FC<{
   const resizeMode = 'cover'
   let coverArt = <></>
   if (item.itemType === 'artist') {
-    coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />
+    coverArt = (
+      <CoverArt
+        type="artist"
+        artistId={item.id}
+        round={true}
+        style={artStyle}
+        resizeMode={resizeMode}
+        size="thumbnail"
+      />
+    )
   } else {
-    coverArt = <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} />
+    coverArt = (
+      <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} size="thumbnail" />
+    )
   }
 
   return (
@@ -178,10 +179,8 @@ const ListItem: React.FC<{
         </View>
       </PressableComponent>
       <View style={styles.controls}>
-        {showStar && (
+        {showStar && item.itemType !== 'playlist' && (
-          <PressableOpacity onPress={toggleStarred} style={styles.controlItem}>
+          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
-            <Star size={26} starred={starred} />
-          </PressableOpacity>
         )}
       </View>
     </View>
@@ -259,4 +258,4 @@ const bigStyles = StyleSheet.create({
   },
 })
 
-export default React.memo(ListItem)
+export default React.memo(ListItem, equal)

app/components/ListPlayerControls.tsx

@@ -1,7 +1,7 @@
 import Button from '@app/components/Button'
-import { Song } from '@app/models/music'
+import { Song } from '@app/models/library'
+import { QueueContextType } from '@app/models/trackplayer'
 import { useStore } from '@app/state/store'
-import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
@@ -17,7 +17,7 @@ const ListPlayerControls = React.memo<{
   style?: StyleProp<ViewStyle>
 }>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
   const [downloaded, setDownloaded] = useState(false)
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setQueue = useStore(store => store.setQueue)
 
   return (
     <View style={[styles.controls, style]}>
@@ -36,11 +36,14 @@ const ListPlayerControls = React.memo<{
       <View style={styles.controlsCenter}>
         <Button
           title={`Play ${typeName}`}
+          disabled={songs.length === 0}
           onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
         />
       </View>
       <View style={styles.controlsSide}>
-        <Button onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
+        <Button
+          disabled={songs.length === 0}
+          onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
           <Icon name="shuffle" size={26} color="white" />
         </Button>
       </View>

app/components/NowPlayingBar.tsx

@@ -2,7 +2,6 @@ import CoverArt from '@app/components/CoverArt'
 import PressableOpacity from '@app/components/PressableOpacity'
 import { usePause, usePlay } from '@app/hooks/trackplayer'
 import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -12,7 +11,8 @@ import { State } from 'react-native-track-player'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
 const ProgressBar = React.memo(() => {
-  const { position, duration } = useStore(selectTrackPlayer.progress)
+  const position = useStore(store => store.progress.position)
+  const duration = useStore(store => store.progress.duration)
 
   let progress = 0
   if (duration > 0) {
@@ -41,7 +41,7 @@ const progressStyles = StyleSheet.create({
 })
 
 const Controls = React.memo(() => {
-  const state = useStore(selectTrackPlayer.playerState)
+  const state = useStore(store => store.playerState)
   const play = usePlay()
   const pause = usePause()
 
@@ -78,9 +78,12 @@ const Controls = React.memo(() => {
 
 const NowPlayingBar = React.memo(() => {
   const navigation = useNavigation()
-  const track = useStore(selectTrackPlayer.currentTrack)
+  const currentTrackExists = useStore(store => !!store.currentTrack)
+  const coverArt = useStore(store => store.currentTrack?.coverArt)
+  const title = useStore(store => store.currentTrack?.title)
+  const artist = useStore(store => store.currentTrack?.artist)
 
-  const displayStyle: ViewStyle = { display: track ? 'flex' : 'none' }
+  const displayStyle: ViewStyle = { display: currentTrackExists ? 'flex' : 'none' }
 
   return (
     <Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}>
@@ -89,14 +92,14 @@ const NowPlayingBar = React.memo(() => {
         <CoverArt
           type="cover"
           style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
-          coverArt={track?.coverArt}
+          coverArt={coverArt}
         />
         <View style={styles.detailsContainer}>
           <Text numberOfLines={1} style={styles.detailsTitle}>
-            {track?.title}
+            {title}
           </Text>
           <Text numberOfLines={1} style={styles.detailsAlbum}>
-            {track?.artist}
+            {artist}
           </Text>
         </View>
         <Controls />

app/components/ProgressHook.tsx

@@ -1,11 +1,10 @@
 import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
 import React, { useEffect } from 'react'
 import { State, useProgress } from 'react-native-track-player'
 
 const ProgressHook = () => {
-  const playerState = useStore(selectTrackPlayer.playerState)
+  const playerState = useStore(store => store.playerState)
-  const setProgress = useStore(selectTrackPlayer.setProgress)
+  const setProgress = useStore(store => store.setProgress)
   const progress = useProgress(250)
 
   useEffect(() => {

app/components/Star.tsx

@@ -1,8 +1,11 @@
+import { useStar } from '@app/hooks/library'
 import colors from '@app/styles/colors'
 import React from 'react'
+import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
 import IconFA from 'react-native-vector-icons/FontAwesome'
+import PressableOpacity from './PressableOpacity'
 
-const Star = React.memo<{
+export const Star = React.memo<{
   starred: boolean
   size: number
 }>(({ starred, size }) => {
@@ -11,4 +14,17 @@ const Star = React.memo<{
   )
 })
 
-export default Star
+export const PressableStar = React.memo<{
+  id: string
+  type: 'album' | 'artist' | 'song'
+  size: number
+  style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
+}>(({ id, type, size, style }) => {
+  const { starred, toggleStar } = useStar(id, type)
+
+  return (
+    <PressableOpacity onPress={toggleStar} style={style}>
+      <Star size={size} starred={starred} />
+    </PressableOpacity>
+  )
+})

app/hooks/cache.ts

@@ -1,16 +1,12 @@
 import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
-import { ArtistInfo } from '@app/models/music'
+import { Store, useStore, useStoreDeep } from '@app/state/store'
-import { selectCache } from '@app/state/cache'
-import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
-import { useStore, Store } from '@app/state/store'
 import { useCallback, useEffect } from 'react'
 
 const useFileRequest = (key: CacheItemTypeKey, id: string) => {
   const file = useStore(
     useCallback(
       (store: Store) => {
-        const activeServerId = store.settings.activeServer
+        const activeServerId = store.settings.activeServerId
         if (!activeServerId) {
           return
         }
@@ -23,7 +19,7 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
   const request = useStore(
     useCallback(
       (store: Store) => {
-        const activeServerId = store.settings.activeServer
+        const activeServerId = store.settings.activeServerId
         if (!activeServerId) {
           return
         }
@@ -40,8 +36,8 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
 export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
   const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
   const { file, request } = useFileRequest(type, coverArt)
-  const client = useStore(selectSettings.client)
+  const client = useStore(store => store.client)
-  const cacheItem = useStore(selectCache.cacheItem)
+  const cacheItem = useStore(store => store.cacheItem)
 
   useEffect(() => {
     if (!file && client) {
@@ -61,28 +57,25 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna
 
 export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
   const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
-  const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
+  const fetchArtistInfo = useStore(store => store.fetchArtistInfo)
+  const artistInfo = useStoreDeep(store => store.library.artistInfo[artistId])
   const { file, request } = useFileRequest(type, artistId)
-  const cacheItem = useStore(selectCache.cacheItem)
+  const cacheItem = useStore(store => store.cacheItem)
 
   useEffect(() => {
-    if (!file) {
+    if (!artistInfo) {
+      fetchArtistInfo(artistId)
+      return
+    }
+
+    if (!file && artistInfo) {
       cacheItem(type, artistId, async () => {
-        let artistInfo: ArtistInfo | undefined
-        const cachedArtistInfo = useStore.getState().artistInfo[artistId]
-
-        if (cachedArtistInfo) {
-          artistInfo = cachedArtistInfo
-        } else {
-          artistInfo = await fetchArtistInfo(artistId)
-        }
-
         return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
       })
     }
     // intentionally leaving file out so it doesn't re-render if the request fails
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [artistId, cacheItem, fetchArtistInfo, type])
+  }, [artistId, cacheItem, fetchArtistInfo, type, artistInfo])
 
   return { file, request }
 }

app/hooks/library.ts

@@ -0,0 +1,63 @@
+import { useStore } from '@app/state/store'
+import { StarParams } from '@app/subsonic/params'
+import { useCallback, useEffect } from 'react'
+
+type StarrableItem = 'album' | 'artist' | 'song'
+
+function starParams(id: string, type: StarrableItem): StarParams {
+  const params: StarParams = {}
+  if (type === 'album') {
+    params.albumId = id
+  } else if (type === 'artist') {
+    params.artistId = id
+  } else {
+    params.id = id
+  }
+
+  return params
+}
+
+export const useStar = (id: string, type: StarrableItem) => {
+  const fetchAlbum = useStore(store => store.fetchAlbum)
+  const fetchArtist = useStore(store => store.fetchArtist)
+  const fetchSong = useStore(store => store.fetchSong)
+
+  const _starred = useStore(
+    useCallback(
+      store => {
+        if (type === 'album') {
+          return store.library.albums[id] ? !!store.library.albums[id].starred : null
+        } else if (type === 'artist') {
+          return store.library.artists[id] ? !!store.library.artists[id].starred : null
+        } else {
+          return store.library.songs[id] ? !!store.library.songs[id].starred : null
+        }
+      },
+      [id, type],
+    ),
+  )
+
+  useEffect(() => {
+    if (_starred === null) {
+      if (type === 'album') {
+        fetchAlbum(id)
+      } else if (type === 'artist') {
+        fetchArtist(id)
+      } else {
+        fetchSong(id)
+      }
+    }
+  }, [fetchAlbum, fetchArtist, fetchSong, id, _starred, type])
+
+  const starred = !!_starred
+
+  const _star = useStore(store => store.star)
+  const _unstar = useStore(store => store.unstar)
+
+  const star = useCallback(() => _star(starParams(id, type)), [_star, id, type])
+  const unstar = useCallback(() => _unstar(starParams(id, type)), [_unstar, id, type])
+
+  const toggleStar = useCallback(() => (starred ? unstar() : star()), [star, starred, unstar])
+
+  return { star, unstar, toggleStar, starred }
+}

app/hooks/list.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import { useActiveServerRefresh } from './server'
+import { useActiveServerRefresh } from './settings'
 
 export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
   const [list, setList] = useState<T[]>([])
@@ -28,8 +28,26 @@ export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
   return { list, refreshing, refresh, reset }
 }
 
+export const useFetchList2 = (fetchList: () => Promise<void>) => {
+  const [refreshing, setRefreshing] = useState(false)
+
+  const refresh = useCallback(async () => {
+    setRefreshing(true)
+    await fetchList()
+    setRefreshing(false)
+  }, [fetchList])
+
+  useActiveServerRefresh(
+    useCallback(async () => {
+      await refresh()
+    }, [refresh]),
+  )
+
+  return { refreshing, refresh }
+}
+
 export const useFetchPaginatedList = <T>(
-  fetchList: (size?: number, offset?: number) => Promise<T[]>,
+  fetchList: (size: number, offset: number) => Promise<T[]>,
   pageSize: number,
 ) => {
   const [list, setList] = useState<T[]>([])
@@ -53,8 +71,8 @@ export const useFetchPaginatedList = <T>(
 
   useActiveServerRefresh(
     useCallback(() => {
-      reset()
+      refresh()
-    }, [reset]),
+    }, [refresh]),
   )
 
   const fetchNextPage = useCallback(() => {

app/hooks/music.ts

@@ -1,62 +0,0 @@
-import { selectMusic } from '@app/state/music'
-import { Store, useStore } from '@app/state/store'
-import { useCallback, useEffect } from 'react'
-
-export const useArtistInfo = (id: string) => {
-  const artistInfo = useStore(useCallback((state: Store) => state.artistInfo[id], [id]))
-  const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
-
-  useEffect(() => {
-    if (!artistInfo) {
-      fetchArtistInfo(id)
-    }
-  }, [artistInfo, fetchArtistInfo, id])
-
-  return artistInfo
-}
-
-export const useAlbumWithSongs = (id: string) => {
-  const album = useStore(useCallback((state: Store) => state.albumsWithSongs[id], [id]))
-  const fetchAlbum = useStore(selectMusic.fetchAlbumWithSongs)
-
-  useEffect(() => {
-    if (!album) {
-      fetchAlbum(id)
-    }
-  }, [album, fetchAlbum, id])
-
-  return album
-}
-
-export const usePlaylistWithSongs = (id: string) => {
-  const playlist = useStore(useCallback((state: Store) => state.playlistsWithSongs[id], [id]))
-  const fetchPlaylist = useStore(selectMusic.fetchPlaylistWithSongs)
-
-  useEffect(() => {
-    if (!playlist) {
-      fetchPlaylist(id)
-    }
-  }, [fetchPlaylist, id, playlist])
-
-  return playlist
-}
-
-export const useStarred = (id: string, type: string) => {
-  return useStore(
-    useCallback(
-      (state: Store) => {
-        switch (type) {
-          case 'song':
-            return state.starredSongs[id]
-          case 'album':
-            return state.starredAlbums[id]
-          case 'artist':
-            return state.starredArtists[id]
-          default:
-            return false
-        }
-      },
-      [type, id],
-    ),
-  )
-}

app/hooks/settings.ts

@@ -1,15 +1,14 @@
 import { useReset } from '@app/hooks/trackplayer'
-import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
 import { useEffect } from 'react'
 
 export const useSwitchActiveServer = () => {
-  const activeServer = useStore(selectSettings.activeServer)
+  const activeServerId = useStore(store => store.settings.activeServerId)
-  const setActiveServer = useStore(selectSettings.setActiveServer)
+  const setActiveServer = useStore(store => store.setActiveServer)
   const resetPlayer = useReset()
 
   return async (id: string) => {
-    if (id === activeServer?.id) {
+    if (id === activeServerId) {
       return
     }
 
@@ -19,11 +18,15 @@ export const useSwitchActiveServer = () => {
 }
 
 export const useActiveServerRefresh = (refresh: () => void) => {
-  const activeServer = useStore(selectSettings.activeServer)
+  const activeServerId = useStore(store => store.settings.activeServerId)
 
   useEffect(() => {
-    if (activeServer) {
+    if (activeServerId) {
       refresh()
     }
-  }, [activeServer, refresh])
+  }, [activeServerId, refresh])
+}
+
+export const useFirstRun = () => {
+  return useStore(store => Object.keys(store.settings.servers).length === 0)
 }

app/hooks/trackplayer.ts

@@ -1,5 +1,5 @@
-import { useStore } from '@app/state/store'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { getQueue, selectTrackPlayer, trackPlayerCommands } from '@app/state/trackplayer'
+import { getQueue, trackPlayerCommands } from '@app/state/trackplayer'
 import TrackPlayer from 'react-native-track-player'
 
 export const usePlay = () => {
@@ -57,7 +57,7 @@ export const useSeekTo = () => {
 }
 
 export const useReset = (enqueue = true) => {
-  const resetStore = useStore(selectTrackPlayer.resetTrackPlayerState)
+  const resetStore = useStore(store => store.resetTrackPlayerState)
 
   const reset = async () => {
     await TrackPlayer.reset()
@@ -68,9 +68,9 @@ export const useReset = (enqueue = true) => {
 }
 
 export const useIsPlaying = (contextId: string | undefined, track: number) => {
-  const queueContextId = useStore(selectTrackPlayer.queueContextId)
+  const queueContextId = useStore(store => store.queueContextId)
-  const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx)
+  const currentTrackIdx = useStore(store => store.currentTrackIdx)
-  const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder)
+  const shuffleOrder = useStoreDeep(store => store.shuffleOrder)
 
   if (contextId === undefined) {
     return track === currentTrackIdx

app/models/cache.ts

@@ -1,4 +1,4 @@
-import { Album, PlaylistListItem, Artist, Song } from './music'
+import { Album, Playlist, Artist, Song } from './library'
 
 export enum CacheItemType {
   coverArt = 'coverArt',
@@ -27,7 +27,7 @@ export type DownloadedAlbum = Album & {
   songs: string[]
 }
 
-export type DownloadedPlaylist = PlaylistListItem & {
+export type DownloadedPlaylist = Playlist & {
   songs: string[]
 }
 

app/models/library.ts

@@ -6,14 +6,13 @@ export interface Artist {
   coverArt?: string
 }
 
-export interface ArtistInfo extends Artist {
+export interface ArtistInfo {
-  albums: Album[]
+  id: string
   smallImageUrl?: string
   largeImageUrl?: string
-  topSongs: Song[]
 }
 
-export interface AlbumListItem {
+export interface Album {
   itemType: 'album'
   id: string
   name: string
@@ -21,24 +20,10 @@ export interface AlbumListItem {
   artistId?: string
   starred?: Date
   coverArt?: string
-}
-
-export interface Album extends AlbumListItem {
-  coverArt?: string
   year?: number
 }
 
-export interface AlbumWithSongs extends Album {
+export interface Playlist {
-  songs: Song[]
-}
-
-export interface SearchResults {
-  artists: Artist[]
-  albums: AlbumListItem[]
-  songs: Song[]
-}
-
-export interface PlaylistListItem {
   itemType: 'playlist'
   id: string
   name: string
@@ -46,10 +31,6 @@ export interface PlaylistListItem {
   coverArt?: string
 }
 
-export interface PlaylistWithSongs extends PlaylistListItem {
-  songs: Song[]
-}
-
 export interface Song {
   itemType: 'song'
   id: string
@@ -62,13 +43,15 @@ export interface Song {
   discNumber?: number
   duration?: number
   starred?: Date
-
-  streamUri: string
   coverArt?: string
 }
 
-export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
+export interface SearchResults {
+  artists: string[]
+  albums: string[]
+  songs: string[]
+}
 
-export type HomeLists = { [key: string]: AlbumListItem[] }
+export type StarrableItemType = 'album' | 'song' | 'artist'
 
-export type StarrableItemType = 'song' | 'album' | 'artist'
+export type ListableItem = Album | Song | Artist | Playlist

app/models/settings.ts

@@ -30,23 +30,3 @@ export type ArtistFilterType = 'random' | 'starred' | 'alphabeticalByName'
 export interface ArtistFilterSettings {
   type: ArtistFilterType
 }
-
-export interface AppSettings {
-  servers: Server[]
-  screens: {
-    home: {
-      lists: string[]
-    }
-    library: {
-      albums: AlbumFilterSettings
-      artists: ArtistFilterSettings
-    }
-  }
-  activeServer?: string
-  scrobble: boolean
-  estimateContentLength: boolean
-  maxBitrateWifi: number
-  maxBitrateMobile: number
-  minBuffer: number
-  maxBuffer: number
-}

app/models/state.ts

@@ -0,0 +1,14 @@
+export interface ById<T> {
+  [id: string]: T
+}
+
+export type OneToMany = ById<string[]>
+
+export interface OrderedById<T> {
+  byId: ById<T>
+  allIds: string[]
+}
+
+export interface PaginatedList {
+  [offset: number]: string[]
+}

app/models/trackplayer.ts

@@ -0,0 +1,18 @@
+import { Track } from 'react-native-track-player'
+
+export type TrackExt = Track & {
+  id: string
+  coverArt?: string
+  artistId?: string
+  albumId?: string
+  track?: number
+  discNumber?: number
+}
+
+export type Progress = {
+  position: number
+  duration: number
+  buffered: number
+}
+
+export type QueueContextType = 'album' | 'playlist' | 'song' | 'artist'

app/navigation/BottomTabBar.tsx

@@ -1,7 +1,6 @@
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import PressableOpacity from '@app/components/PressableOpacity'
-import { selectSettings } from '@app/state/settings'
+import { useFirstRun } from '@app/hooks/settings'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
@@ -10,7 +9,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
 import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
 import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native'
+import { Image, ImageStyle, StyleSheet, Text, View } from 'react-native'
 
 const BottomTabButton = React.memo<{
   routeKey: string
@@ -20,7 +19,7 @@ const BottomTabButton = React.memo<{
   icon: OutlineFillIcon
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
 }>(({ routeKey, label, name, isFocused, icon, navigation }) => {
-  const firstRun = useStore(selectSettings.firstRun)
+  const firstRun = useFirstRun()
 
   const disabled = firstRun && name !== 'settings'
 

app/navigation/BottomTabNavigator.tsx

@@ -1,3 +1,4 @@
+import { useFirstRun } from '@app/hooks/settings'
 import BottomTabBar from '@app/navigation/BottomTabBar'
 import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
 import ArtistView from '@app/screens/ArtistView'
@@ -8,8 +9,6 @@ import ServerView from '@app/screens/ServerView'
 import SettingsView from '@app/screens/Settings'
 import SongListView from '@app/screens/SongListView'
 import WebViewScreen from '@app/screens/WebViewScreen'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
@@ -177,7 +176,7 @@ const SettingsTab = () => {
 const Tab = createBottomTabNavigator()
 
 const BottomTabNavigator = () => {
-  const firstRun = useStore(selectSettings.firstRun)
+  const firstRun = useFirstRun()
 
   return (
     <Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>

app/playbackservice.ts

@@ -1,4 +1,4 @@
-import { getCurrentTrack, getPlayerState, TrackExt, trackPlayerCommands } from '@app/state/trackplayer'
+import { getCurrentTrack, getPlayerState, trackPlayerCommands } from '@app/state/trackplayer'
 import TrackPlayer, { Event, State } from 'react-native-track-player'
 import { useStore } from './state/store'
 import { unstable_batchedUpdates } from 'react-native'
@@ -44,13 +44,12 @@ let serviceCreated = false
 
 const createService = async () => {
   useStore.subscribe(
-    (currentTrack?: TrackExt) => {
+    state => state.currentTrack?.id,
-      if (currentTrack) {
+    (currentTrackId?: string) => {
-        useStore.getState().scrobbleTrack(currentTrack.id)
+      if (currentTrackId) {
+        useStore.getState().scrobbleTrack(currentTrackId)
       }
     },
-    state => state.currentTrack,
-    (prev, next) => prev?.id === next?.id,
   )
 
   NetInfo.fetch().then(state => {

app/screens/ArtistView.tsx

@@ -5,16 +5,15 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import HeaderBar from '@app/components/HeaderBar'
 import ListItem from '@app/components/ListItem'
-import { useArtistInfo } from '@app/hooks/music'
+import { Album, Song } from '@app/models/library'
-import { Album, Song } from '@app/models/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
+import { mapById } from '@app/util/state'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
@@ -47,12 +46,12 @@ const TopSongs = React.memo<{
   name: string
   artistId: string
 }>(({ songs, name, artistId }) => {
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setQueue = useStore(store => store.setQueue)
 
   return (
     <>
       <Header>Top Songs</Header>
-      {songs.map((s, i) => (
+      {songs.slice(0, 5).map((s, i) => (
         <ListItem
           key={i}
           item={s}
@@ -67,6 +66,29 @@ const TopSongs = React.memo<{
   )
 })
 
+const ArtistAlbums = React.memo<{
+  albums: Album[]
+}>(({ albums }) => {
+  const albumsLayout = useLayout()
+
+  const sortedAlbums = [...albums]
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => (b.year || 0) - (a.year || 0))
+
+  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
+
+  return (
+    <>
+      <Header>Albums</Header>
+      <View style={styles.albums} onLayout={albumsLayout.onLayout}>
+        {sortedAlbums.map(a => (
+          <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
+        ))}
+      </View>
+    </>
+  )
+})
+
 const ArtistViewFallback = React.memo(() => (
   <GradientBackground style={styles.fallback}>
     <ActivityIndicator size="large" color={colors.accent} />
@@ -74,8 +96,19 @@ const ArtistViewFallback = React.memo(() => (
 ))
 
 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  const artist = useArtistInfo(id)
+  const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id]))
-  const albumsLayout = useLayout()
+  const topSongIds = useStoreDeep(useCallback(store => store.library.artistNameTopSongs[artist?.name], [artist?.name]))
+  const topSongs = useStoreDeep(
+    useCallback(store => (topSongIds ? mapById(store.library.songs, topSongIds) : undefined), [topSongIds]),
+  )
+  const albumIds = useStoreDeep(useCallback(store => store.library.artistAlbums[id], [id]))
+  const albums = useStoreDeep(
+    useCallback(store => (albumIds ? mapById(store.library.albums, albumIds) : undefined), [albumIds]),
+  )
+
+  const fetchArtist = useStore(store => store.fetchArtist)
+  const fetchTopSongs = useStore(store => store.fetchArtistTopSongs)
+
   const coverLayout = useLayout()
   const headerOpacity = useSharedValue(0)
 
@@ -91,16 +124,22 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     }
   })
 
-  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
+  useEffect(() => {
+    if (!artist || !albumIds) {
+      fetchArtist(id)
+    }
+  }, [artist, albumIds, fetchArtist, id])
+
+  useEffect(() => {
+    if (artist && !topSongIds) {
+      fetchTopSongs(artist.name)
+    }
+  }, [artist, fetchTopSongs, topSongIds])
 
   if (!artist) {
     return <ArtistViewFallback />
   }
 
-  const _albums = [...artist.albums]
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .sort((a, b) => (b.year || 0) - (a.year || 0))
-
   return (
     <View style={styles.container}>
       <HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@@ -115,17 +154,18 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
           <Text style={styles.title}>{artist.name}</Text>
         </View>
         <View style={styles.contentContainer}>
-          {artist.topSongs.length > 0 ? (
+          {topSongs && albums ? (
-            <TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
+            topSongs.length > 0 ? (
+              <>
+                <TopSongs songs={topSongs} name={artist.name} artistId={artist.id} />
+                <ArtistAlbums albums={albums} />
+              </>
+            ) : (
+              <ArtistAlbums albums={albums} />
+            )
           ) : (
-            <></>
+            <ActivityIndicator size="large" color={colors.accent} style={styles.loading} />
           )}
-          <Header>Albums</Header>
-          <View style={styles.albums} onLayout={albumsLayout.onLayout}>
-            {_albums.map(a => (
-              <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
-            ))}
-          </View>
         </View>
       </GradientScrollView>
     </View>
@@ -200,6 +240,9 @@ const styles = StyleSheet.create({
     fontFamily: font.regular,
     textAlign: 'center',
   },
+  loading: {
+    marginTop: 30,
+  },
 })
 
 export default ArtistView

app/screens/Home.tsx

@@ -3,17 +3,17 @@ import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
-import { useActiveServerRefresh } from '@app/hooks/server'
+import { useActiveServerRefresh } from '@app/hooks/settings'
-import { AlbumListItem } from '@app/models/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { GetAlbumListType } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback } from 'react'
+import equal from 'fast-deep-equal/es6/react'
+import produce from 'immer'
+import React, { useCallback, useState } from 'react'
 import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
+import create, { StateSelector } from 'zustand'
 
 const titles: { [key in GetAlbumListType]?: string } = {
   recent: 'Recently Played',
@@ -23,9 +23,14 @@ const titles: { [key in GetAlbumListType]?: string } = {
 }
 
 const AlbumItem = React.memo<{
-  album: AlbumListItem
+  id: string
-}>(({ album }) => {
+}>(({ id }) => {
   const navigation = useNavigation()
+  const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
+
+  if (!album) {
+    return <></>
+  }
 
   return (
     <AlbumContextPressable
@@ -49,9 +54,10 @@ const AlbumItem = React.memo<{
 })
 
 const Category = React.memo<{
-  name?: string
+  type: string
-  data: AlbumListItem[]
+}>(({ type }) => {
-}>(({ name, data }) => {
+  const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
+
   const Albums = () => (
     <ScrollView
       horizontal={true}
@@ -59,8 +65,8 @@ const Category = React.memo<{
       overScrollMode={'never'}
       style={styles.artScroll}
       contentContainerStyle={styles.artScrollContent}>
-      {data.map(album => (
+      {list.map(id => (
-        <AlbumItem key={album.id} album={album} />
+        <AlbumItem key={id} id={id} />
       ))}
     </ScrollView>
   )
@@ -73,24 +79,57 @@ const Category = React.memo<{
 
   return (
     <View style={styles.category}>
-      <Header style={styles.header}>{name}</Header>
+      <Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
-      {data.length > 0 ? <Albums /> : <Nothing />}
+      {list.length > 0 ? <Albums /> : <Nothing />}
     </View>
   )
 })
 
+interface HomeState {
+  lists: { [type: string]: string[] }
+  setList: (type: string, list: string[]) => void
+}
+
+const useHomeStore = create<HomeState>(set => ({
+  lists: {},
+
+  setList: (type, list) => {
+    set(
+      produce<HomeState>(state => {
+        state.lists[type] = list
+      }),
+    )
+  },
+}))
+
+function useHomeStoreDeep<U>(stateSelector: StateSelector<HomeState, U>) {
+  return useHomeStore(stateSelector, equal)
+}
+
 const Home = () => {
-  const types = useStore(selectSettings.homeLists)
+  const [refreshing, setRefreshing] = useState(false)
-  const lists = useStore(selectMusic.homeLists)
+  const types = useStoreDeep(store => store.settings.screens.home.listTypes)
-  const updating = useStore(selectMusic.homeListsUpdating)
+  const fetchAlbumList = useStore(store => store.fetchAlbumList)
-  const update = useStore(selectMusic.fetchHomeLists)
+  const setList = useHomeStore(store => store.setList)
-  const clear = useStore(selectMusic.clearHomeLists)
+
+  const refresh = useCallback(async () => {
+    setRefreshing(true)
+
+    await Promise.all(
+      types.map(async type => {
+        const ids = await fetchAlbumList({ type: type as GetAlbumList2TypeBase, size: 20, offset: 0 })
+        setList(type, ids)
+      }),
+    )
+
+    setRefreshing(false)
+  }, [fetchAlbumList, setList, types])
 
   useActiveServerRefresh(
     useCallback(() => {
-      clear()
+      types.forEach(type => setList(type, []))
-      update()
+      refresh()
-    }, [clear, update]),
+    }, [refresh, setList, types]),
   )
 
   return (
@@ -99,15 +138,15 @@ const Home = () => {
       contentContainerStyle={styles.scrollContentContainer}
       refreshControl={
         <RefreshControl
-          refreshing={updating}
+          refreshing={refreshing}
-          onRefresh={update}
+          onRefresh={refresh}
           colors={[colors.accent, colors.accentLow]}
           progressViewOffset={StatusBar.currentHeight}
         />
       }>
       <View style={styles.content}>
         {types.map(type => (
-          <Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
+          <Category key={type} type={type} />
         ))}
       </View>
     </GradientScrollView>

app/screens/LibraryAlbums.tsx

@@ -3,24 +3,26 @@ import CoverArt from '@app/components/CoverArt'
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import { useFetchPaginatedList } from '@app/hooks/list'
-import { Album, AlbumListItem } from '@app/models/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { GetAlbumList2Type } from '@app/subsonic/params'
+import { GetAlbumList2Params, GetAlbumList2Type } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import React, { useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 
 const AlbumItem = React.memo<{
-  album: AlbumListItem
+  id: string
   size: number
   height: number
-}>(({ album, size, height }) => {
+}>(({ id, size, height }) => {
+  const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
   const navigation = useNavigation()
 
+  if (!album) {
+    return <></>
+  }
+
   return (
     <AlbumContextPressable
       album={album}
@@ -41,8 +43,8 @@ const AlbumItem = React.memo<{
 })
 
 const AlbumListRenderItem: React.FC<{
-  item: { album: Album; size: number; height: number }
+  item: { id: string; size: number; height: number }
-}> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
+}> = ({ item }) => <AlbumItem id={item.id} size={item.size} height={item.height} />
 
 const filterOptions: OptionData[] = [
   { text: 'By Name', value: 'alphabeticalByName' },
@@ -57,24 +59,57 @@ const filterOptions: OptionData[] = [
 ]
 
 const AlbumsList = () => {
-  const fetchAlbums = useStore(selectMusic.fetchAlbums)
+  const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
-  const { list, refreshing, refresh, reset, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300)
+  const setFilter = useStore(store => store.setLibraryAlbumFilter)
-  const filter = useStore(selectSettings.libraryAlbumFilter)
+
-  const setFilter = useStore(selectSettings.setLibraryAlbumFilter)
+  const fetchAlbumList = useStore(store => store.fetchAlbumList)
+  const fetchPage = useCallback(
+    (size: number, offset: number) => {
+      let params: GetAlbumList2Params
+      switch (filter.type) {
+        case 'byYear':
+          params = {
+            size,
+            offset,
+            type: filter.type,
+            fromYear: filter.fromYear,
+            toYear: filter.toYear,
+          }
+          break
+        case 'byGenre':
+          params = {
+            size,
+            offset,
+            type: filter.type,
+            genre: filter.genre,
+          }
+          break
+        default:
+          params = {
+            size,
+            offset,
+            type: filter.type,
+          }
+          break
+      }
+      return fetchAlbumList(params)
+    },
+    [fetchAlbumList, filter.fromYear, filter.genre, filter.toYear, filter.type],
+  )
+
+  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchPage, 300)
 
   const layout = useWindowDimensions()
 
   const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2
   const height = size + 36
 
-  useEffect(() => reset(), [reset, filter])
-
   return (
     <View style={styles.container}>
       <GradientFlatList
-        data={list.map(album => ({ album, size, height }))}
+        data={list.map(id => ({ id, size, height }))}
         renderItem={AlbumListRenderItem}
-        keyExtractor={item => item.album.id}
+        keyExtractor={item => item.id}
         numColumns={3}
         removeClippedSubviews={true}
         refreshing={refreshing}

app/screens/LibraryArtists.tsx

@@ -1,12 +1,10 @@
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchList } from '@app/hooks/list'
+import { useFetchList2 } from '@app/hooks/list'
-import { Artist } from '@app/models/music'
+import { Artist } from '@app/models/library'
 import { ArtistFilterType } from '@app/models/settings'
-import { selectMusic } from '@app/state/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
 import React, { useEffect, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
@@ -21,13 +19,17 @@ const filterOptions: OptionData[] = [
 ]
 
 const ArtistsList = () => {
-  const fetchArtists = useStore(selectMusic.fetchArtists)
+  const fetchArtists = useStore(store => store.fetchArtists)
-  const { list, refreshing, refresh } = useFetchList(fetchArtists)
+  const { refreshing, refresh } = useFetchList2(fetchArtists)
-  const filter = useStore(selectSettings.libraryArtistFilter)
+  const artists = useStoreDeep(store => store.library.artists)
-  const setFilter = useStore(selectSettings.setLibraryArtistFiler)
+  const artistOrder = useStoreDeep(store => store.library.artistOrder)
+
+  const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
+  const setFilter = useStore(store => store.setLibraryArtistFiler)
   const [sortedList, setSortedList] = useState<Artist[]>([])
 
   useEffect(() => {
+    const list = Object.values(artists)
     switch (filter.type) {
       case 'random':
         setSortedList([...list].sort(() => Math.random() - 0.5))
@@ -35,11 +37,14 @@ const ArtistsList = () => {
       case 'starred':
         setSortedList([...list].filter(a => a.starred))
         break
+      case 'alphabeticalByName':
+        setSortedList(artistOrder.map(id => artists[id]))
+        break
       default:
         setSortedList([...list])
         break
     }
-  }, [list, filter])
+  }, [filter.type, artists, artistOrder])
 
   return (
     <View style={styles.container}>

app/screens/LibraryPlaylists.tsx

@@ -1,23 +1,23 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchList } from '@app/hooks/list'
+import { useFetchList2 } from '@app/hooks/list'
-import { PlaylistListItem } from '@app/models/music'
+import { Playlist } from '@app/models/library'
-import { selectMusic } from '@app/state/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { useStore } from '@app/state/store'
 import React from 'react'
 import { StyleSheet } from 'react-native'
 
-const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
+const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => (
   <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )
 
 const PlaylistsList = () => {
-  const fetchPlaylists = useStore(selectMusic.fetchPlaylists)
+  const fetchPlaylists = useStore(store => store.fetchPlaylists)
-  const { list, refreshing, refresh } = useFetchList(fetchPlaylists)
+  const { refreshing, refresh } = useFetchList2(fetchPlaylists)
+  const playlists = useStoreDeep(store => store.library.playlists)
 
   return (
     <GradientFlatList
-      data={list}
+      data={Object.values(playlists)}
       renderItem={PlaylistRenderItem}
       keyExtractor={item => item.id}
       onRefresh={refresh}

app/screens/NowPlayingQueue.tsx

@@ -2,10 +2,8 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import { useSkipTo } from '@app/hooks/trackplayer'
-import { Song } from '@app/models/music'
+import { Song } from '@app/models/library'
-import { useStore } from '@app/state/store'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
-import { selectTrackPlayerMap } from '@app/state/trackplayermap'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
@@ -27,8 +25,8 @@ const SongRenderItem: React.FC<{
 )
 
 const NowPlayingQueue = React.memo<{}>(() => {
-  const queue = useStore(selectTrackPlayer.queue)
+  const queue = useStoreDeep(store => store.queue)
-  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
+  const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
   const skipTo = useSkipTo()
 
   return (

app/screens/NowPlayingView.tsx

@@ -2,13 +2,10 @@ import CoverArt from '@app/components/CoverArt'
 import HeaderBar from '@app/components/HeaderBar'
 import ImageGradientBackground from '@app/components/ImageGradientBackground'
 import PressableOpacity from '@app/components/PressableOpacity'
-import Star from '@app/components/Star'
+import { PressableStar } from '@app/components/Star'
-import { useStarred } from '@app/hooks/music'
 import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
-import { selectMusic } from '@app/state/music'
+import { QueueContextType, TrackExt } from '@app/models/trackplayer'
-import { useStore } from '@app/state/store'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { QueueContextType, selectTrackPlayer, TrackExt } from '@app/state/trackplayer'
-import { selectTrackPlayerMap } from '@app/state/trackplayermap'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import formatDuration from '@app/util/formatDuration'
@@ -41,9 +38,9 @@ function getContextName(type?: QueueContextType) {
 const NowPlayingHeader = React.memo<{
   track?: TrackExt
 }>(({ track }) => {
-  const queueName = useStore(selectTrackPlayer.queueName)
+  const queueName = useStore(store => store.queueName)
-  const queueContextType = useStore(selectTrackPlayer.queueContextType)
+  const queueContextType = useStore(store => store.queueContextType)
-  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
+  const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
 
   if (!track) {
     return <></>
@@ -94,11 +91,11 @@ const headerStyles = StyleSheet.create({
 })
 
 const SongCoverArt = () => {
-  const track = useStore(selectTrackPlayer.currentTrack)
+  const coverArt = useStore(store => store.currentTrack?.coverArt)
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
+      <CoverArt type="cover" size="original" coverArt={coverArt} style={coverArtStyles.image} />
     </View>
   )
 }
@@ -117,26 +114,22 @@ const coverArtStyles = StyleSheet.create({
 })
 
 const SongInfo = () => {
-  const track = useStore(selectTrackPlayer.currentTrack)
+  const id = useStore(store => store.currentTrack?.id)
-  const id = track?.id || '-1'
+  const artist = useStore(store => store.currentTrack?.artist)
-  const type = 'song'
+  const title = useStore(store => store.currentTrack?.title)
-  const starred = useStarred(id, type)
-  const setStarred = useStore(selectMusic.starItem)
 
   return (
     <View style={infoStyles.container}>
       <View style={infoStyles.details}>
         <Text numberOfLines={1} style={infoStyles.title}>
-          {track?.title}
+          {title}
         </Text>
         <Text numberOfLines={1} style={infoStyles.artist}>
-          {track?.artist}
+          {artist}
         </Text>
       </View>
       <View style={infoStyles.controls}>
-        <PressableOpacity onPress={() => setStarred(id, type, starred)}>
+        <PressableStar id={id || '-1'} type={'song'} size={32} />
-          <Star size={32} starred={starred} />
-        </PressableOpacity>
       </View>
     </View>
   )
@@ -170,7 +163,8 @@ const infoStyles = StyleSheet.create({
 })
 
 const SeekBar = () => {
-  const { position, duration } = useStore(selectTrackPlayer.progress)
+  const position = useStore(store => store.progress.position)
+  const duration = useStore(store => store.progress.duration)
   const seekTo = useSeekTo()
   const [value, setValue] = useState(0)
   const [sliding, setSliding] = useState(false)
@@ -262,15 +256,15 @@ const seekStyles = StyleSheet.create({
 })
 
 const PlayerControls = () => {
-  const state = useStore(selectTrackPlayer.playerState)
+  const state = useStore(store => store.playerState)
   const play = usePlay()
   const pause = usePause()
   const next = useNext()
   const previous = usePrevious()
-  const shuffled = useStore(selectTrackPlayer.shuffled)
+  const shuffled = useStore(store => !!store.shuffleOrder)
-  const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle)
+  const toggleShuffle = useStore(store => store.toggleShuffle)
-  const repeatMode = useStore(selectTrackPlayer.repeatMode)
+  const repeatMode = useStore(store => store.repeatMode)
-  const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode)
+  const toggleRepeat = useStore(store => store.toggleRepeatMode)
   const navigation = useNavigation()
 
   let playPauseIcon: string
@@ -392,7 +386,7 @@ type RootStackParamList = {
 type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'>
 
 const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
-  const track = useStore(selectTrackPlayer.currentTrack)
+  const track = useStoreDeep(store => store.currentTrack)
 
   useEffect(() => {
     if (!track) {
@@ -404,7 +398,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
 
   return (
     <View style={styles.container}>
-      <ImageGradientBackground imagePath={imagePath} />
+      <ImageGradientBackground imagePath={imagePath} height={'100%'} />
       <NowPlayingHeader track={track} />
       <View style={styles.content}>
         <SongCoverArt />

app/screens/Search.tsx

@@ -4,13 +4,12 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import TextInput from '@app/components/TextInput'
-import { useActiveServerRefresh } from '@app/hooks/server'
+import { useActiveServerRefresh } from '@app/hooks/settings'
-import { ListableItem, SearchResults, Song } from '@app/models/music'
+import { Song, Album, Artist, SearchResults } from '@app/models/library'
-import { selectMusic } from '@app/state/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { mapById } from '@app/util/state'
 import { useFocusEffect, useNavigation } from '@react-navigation/native'
 import debounce from 'lodash.debounce'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
@@ -25,7 +24,7 @@ import {
 } from 'react-native'
 
 const SongItem = React.memo<{ item: Song }>(({ item }) => {
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setQueue = useStore(store => store.setQueue)
 
   return (
     <ListItem
@@ -42,8 +41,27 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
 const ResultsCategory = React.memo<{
   name: string
   query: string
-  items: ListableItem[]
+  ids: string[]
-}>(({ name, query, items }) => {
+  type: 'artist' | 'album' | 'song'
+}>(({ name, query, type, ids }) => {
+  const items: (Album | Artist | Song)[] = useStoreDeep(
+    useCallback(
+      store => {
+        switch (type) {
+          case 'album':
+            return mapById(store.library.albums, ids)
+          case 'artist':
+            return mapById(store.library.artists, ids)
+          case 'song':
+            return mapById(store.library.songs, ids)
+          default:
+            return []
+        }
+      },
+      [ids, type],
+    ),
+  )
+
   const navigation = useNavigation()
 
   if (items.length === 0) {
@@ -54,8 +72,8 @@ const ResultsCategory = React.memo<{
     <>
       <Header>{name}</Header>
       {items.map(a =>
-        a.itemType === 'song' ? (
+        type === 'song' ? (
-          <SongItem key={a.id} item={a} />
+          <SongItem key={a.id} item={a as Song} />
         ) : (
           <ListItem key={a.id} item={a} showArt={true} showStar={false} />
         ),
@@ -78,15 +96,15 @@ const Results = React.memo<{
 }>(({ results, query }) => {
   return (
     <>
-      <ResultsCategory name="Artists" query={query} items={results.artists} />
+      <ResultsCategory name="Artists" query={query} type={'artist'} ids={results.artists} />
-      <ResultsCategory name="Albums" query={query} items={results.albums} />
+      <ResultsCategory name="Albums" query={query} type={'album'} ids={results.albums} />
-      <ResultsCategory name="Songs" query={query} items={results.songs} />
+      <ResultsCategory name="Songs" query={query} type={'song'} ids={results.songs} />
     </>
   )
 })
 
 const Search = () => {
-  const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
+  const fetchSearchResults = useStore(store => store.fetchSearchResults)
   const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
   const [refreshing, setRefreshing] = useState(false)
   const [text, setText] = useState('')
@@ -118,7 +136,7 @@ const Search = () => {
     () =>
       debounce(async (query: string) => {
         setRefreshing(true)
-        setResults(await fetchSearchResults(query))
+        setResults(await fetchSearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 }))
         setRefreshing(false)
       }, 400),
     [fetchSearchResults],

app/screens/SearchResultsView.tsx

@@ -1,18 +1,18 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { useFetchPaginatedList } from '@app/hooks/list'
-import { AlbumListItem, Artist, Song } from '@app/models/music'
+import { Album, Artist, Song } from '@app/models/library'
-import { selectMusic } from '@app/state/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { useStore } from '@app/state/store'
+import { Search3Params } from '@app/subsonic/params'
-import { selectTrackPlayer } from '@app/state/trackplayer'
+import { mapById } from '@app/util/state'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback, useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 
-type SearchListItemType = AlbumListItem | Song | Artist
+type SearchListItemType = Album | Song | Artist
 
 const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setQueue = useStore(store => store.setQueue)
 
   let onPress
   if (item.itemType === 'song') {
@@ -40,27 +40,62 @@ const SearchResultsView: React.FC<{
   type: 'album' | 'artist' | 'song'
 }> = ({ query, type }) => {
   const navigation = useNavigation()
-  const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
+  const fetchSearchResults = useStore(store => store.fetchSearchResults)
-  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>(
+  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
     useCallback(
-      (size, offset) =>
+      async (size, offset) => {
-        fetchSearchResults(query, type, size, offset).then(results => {
+        const params: Search3Params = { query }
-          switch (type) {
+        if (type === 'album') {
-            case 'album':
+          params.albumCount = size
-              return results.albums
+          params.albumOffset = offset
-            case 'artist':
+        } else if (type === 'artist') {
-              return results.artists
+          params.artistCount = size
-            case 'song':
+          params.artistOffset = offset
-              return results.songs
+        } else if (type === 'song') {
-            default:
+          params.songCount = size
-              return []
+          params.songOffset = offset
-          }
+        } else {
-        }),
+          params.albumCount = 5
+          params.artistCount = 5
+          params.songCount = 5
+        }
+
+        const results = await fetchSearchResults(params)
+
+        switch (type) {
+          case 'album':
+            return results.albums
+          case 'artist':
+            return results.artists
+          case 'song':
+            return results.songs
+          default:
+            return []
+        }
+      },
       [fetchSearchResults, query, type],
     ),
     100,
   )
 
+  const items: SearchListItemType[] = useStoreDeep(
+    useCallback(
+      store => {
+        switch (type) {
+          case 'album':
+            return mapById(store.library.albums, list)
+          case 'artist':
+            return mapById(store.library.artists, list)
+          case 'song':
+            return mapById(store.library.songs, list)
+          default:
+            return []
+        }
+      },
+      [list, type],
+    ),
+  )
+
   useEffect(() => {
     navigation.setOptions({
       title: `Search: "${query}"`,
@@ -70,7 +105,7 @@ const SearchResultsView: React.FC<{
 
   return (
     <GradientFlatList
-      data={list}
+      data={items}
       renderItem={SearchResultsRenderItem}
       keyExtractor={(item, i) => i.toString()}
       onRefresh={refresh}

app/screens/ServerView.tsx

@@ -1,8 +1,7 @@
 import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
 import { Server } from '@app/models/settings'
-import { selectSettings } from '@app/state/settings'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import toast from '@app/util/toast'
@@ -19,13 +18,13 @@ const ServerView: React.FC<{
   id?: string
 }> = ({ id }) => {
   const navigation = useNavigation()
-  const activeServer = useStore(selectSettings.activeServer)
+  const activeServerId = useStore(store => store.settings.activeServerId)
-  const servers = useStore(selectSettings.servers)
+  const servers = useStoreDeep(store => store.settings.servers)
-  const addServer = useStore(selectSettings.addServer)
+  const addServer = useStore(store => store.addServer)
-  const updateServer = useStore(selectSettings.updateServer)
+  const updateServer = useStore(store => store.updateServer)
-  const removeServer = useStore(selectSettings.removeServer)
+  const removeServer = useStore(store => store.removeServer)
-  const server = id ? servers.find(s => s.id === id) : undefined
+  const server = id ? servers[id] : undefined
-  const pingServer = useStore(selectSettings.pingServer)
+  const pingServer = useStore(store => store.pingServer)
 
   const [address, setAddress] = useState(server?.address || '')
   const [username, setUsername] = useState(server?.username || '')
@@ -44,8 +43,8 @@ const ServerView: React.FC<{
   }, [address, username, password])
 
   const canRemove = useCallback(() => {
-    return id && servers.length > 1 && activeServer?.id !== id
+    return id && Object.keys(servers).length > 1 && activeServerId !== id
-  }, [id, servers, activeServer])
+  }, [id, servers, activeServerId])
 
   const exit = useCallback(() => {
     if (navigation.canGoBack()) {
@@ -194,6 +193,8 @@ const ServerView: React.FC<{
           selectionColor={colors.text.secondary}
           textContentType="URL"
           placeholder="http://demo.navidrome.org"
+          autoCorrect={false}
+          autoCapitalize="none"
           value={address}
           onChangeText={setAddress}
           onBlur={formatAddress}
@@ -204,7 +205,9 @@ const ServerView: React.FC<{
           placeholderTextColor="grey"
           selectionColor={colors.text.secondary}
           textContentType="username"
-          autoCompleteType="username"
+          autoComplete="username"
+          importantForAutofill="yes"
+          autoCapitalize="none"
           placeholder="demo"
           value={username}
           onChangeText={setUsername}
@@ -215,7 +218,9 @@ const ServerView: React.FC<{
           placeholderTextColor="grey"
           selectionColor={colors.text.secondary}
           textContentType="password"
-          autoCompleteType="password"
+          autoComplete="password"
+          autoCapitalize="none"
+          importantForAutofill="yes"
           secureTextEntry={true}
           placeholder="demo"
           value={password}

app/screens/Settings.tsx

@@ -5,11 +5,9 @@ import PressableOpacity from '@app/components/PressableOpacity'
 import SettingsItem from '@app/components/SettingsItem'
 import SettingsSwitch from '@app/components/SettingsSwitch'
 import TextInput from '@app/components/TextInput'
-import { useSwitchActiveServer } from '@app/hooks/server'
+import { useSwitchActiveServer } from '@app/hooks/settings'
 import { Server } from '@app/models/settings'
-import { selectCache } from '@app/state/cache'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/core'
@@ -22,7 +20,7 @@ import { version } from '../../package.json'
 const ServerItem = React.memo<{
   server: Server
 }>(({ server }) => {
-  const activeServer = useStore(selectSettings.activeServer)
+  const activeServerId = useStore(store => store.settings.activeServerId)
   const switchActiveServer = useSwitchActiveServer()
   const navigation = useNavigation()
 
@@ -36,7 +34,7 @@ const ServerItem = React.memo<{
       subtitle={server.username}
       onPress={() => navigation.navigate('server', { id: server.id })}>
       <PressableOpacity style={styles.serverActive} onPress={setActive}>
-        {activeServer && activeServer.id === server.id ? (
+        {activeServerId === server.id ? (
           <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
         ) : (
           <Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
@@ -193,27 +191,22 @@ function secondsUnit(seconds: string): string {
 }
 
 const SettingsContent = React.memo(() => {
-  const servers = useStore(selectSettings.servers)
+  const servers = useStoreDeep(store => store.settings.servers)
-  const scrobble = useStore(selectSettings.scrobble)
+  const scrobble = useStore(store => store.settings.scrobble)
-  const setScrobble = useStore(selectSettings.setScrobble)
+  const setScrobble = useStore(store => store.setScrobble)
 
-  // doesn't seem to ever be a case where we want this off
+  const maxBitrateWifi = useStore(store => store.settings.maxBitrateWifi)
-  // will remove later if there isn't a use case for disabling
+  const setMaxBitrateWifi = useStore(store => store.setMaxBitrateWifi)
-  // const estimateContentLength = useStore(selectSettings.estimateContentLength)
-  // const setEstimateContentLength = useStore(selectSettings.setEstimateContentLength)
 
-  const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi)
+  const maxBitrateMobile = useStore(store => store.settings.maxBitrateMobile)
-  const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi)
+  const setMaxBitrateMobile = useStore(store => store.setMaxBitrateMobile)
 
-  const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile)
+  const minBuffer = useStore(store => store.settings.minBuffer)
-  const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile)
+  const setMinBuffer = useStore(store => store.setMinBuffer)
+  const maxBuffer = useStore(store => store.settings.maxBuffer)
+  const setMaxBuffer = useStore(store => store.setMaxBuffer)
 
-  const minBuffer = useStore(selectSettings.minBuffer)
+  const clearImageCache = useStore(store => store.clearImageCache)
-  const setMinBuffer = useStore(selectSettings.setMinBuffer)
-  const maxBuffer = useStore(selectSettings.maxBuffer)
-  const setMaxBuffer = useStore(selectSettings.setMaxBuffer)
-
-  const clearImageCache = useStore(selectCache.clearImageCache)
   const [clearing, setClearing] = useState(false)
 
   const navigation = useNavigation()
@@ -239,7 +232,7 @@ const SettingsContent = React.memo(() => {
   return (
     <View style={styles.content}>
       <Header>Servers</Header>
-      {servers.map(s => (
+      {Object.values(servers).map(s => (
         <ServerItem key={s.id} server={s} />
       ))}
       <Button
@@ -251,12 +244,6 @@ const SettingsContent = React.memo(() => {
       <Header style={styles.header}>Network</Header>
       <BitrateModal title="Maximum bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} />
       <BitrateModal title="Maximum bitrate (mobile)" bitrate={maxBitrateMobile} setBitrate={setMaxBitrateMobile} />
-      {/* <SettingsSwitch
-        title="Estimate content length"
-        subtitle='Send the "estimateContentLength" flag when streaming. Helps fix issues with seeking when the server is transcoding songs.'
-        value={estimateContentLength}
-        setValue={setEstimateContentLength}
-      /> */}
       <SettingsTextModal
         title="Minimum buffer time"
         value={minBuffer.toString()}

app/screens/SongListView.tsx

@@ -4,14 +4,13 @@ import HeaderBar from '@app/components/HeaderBar'
 import ImageGradientFlatList from '@app/components/ImageGradientFlatList'
 import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
+import NothingHere from '@app/components/NothingHere'
 import { useCoverArtFile } from '@app/hooks/cache'
-import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
+import { Song, Album, Playlist } from '@app/models/library'
-import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
+import { useStore, useStoreDeep } from '@app/state/store'
-import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import React, { useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 
 type SongListType = 'album' | 'playlist'
@@ -46,18 +45,19 @@ const SongRenderItem: React.FC<{
 const SongListDetails = React.memo<{
   title: string
   type: SongListType
-  songList?: AlbumWithSongs | PlaylistWithSongs
+  songList?: Album | Playlist
+  songs?: Song[]
   subtitle?: string
-}>(({ title, songList, subtitle, type }) => {
+}>(({ title, songList, songs, subtitle, type }) => {
   const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
   const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setQueue = useStore(store => store.setQueue)
 
   if (!songList) {
     return <SongListDetailsFallback />
   }
 
-  const _songs = [...songList.songs]
+  const _songs = [...(songs || [])]
   let typeName = ''
 
   if (type === 'album') {
@@ -101,21 +101,26 @@ const SongListDetails = React.memo<{
         overScrollMode="never"
         windowSize={7}
         contentMarginTop={26}
+        ListEmptyComponent={
+          songs ? (
+            <NothingHere style={styles.nothing} />
+          ) : (
+            <ActivityIndicator size="large" color={colors.accent} style={styles.listLoading} />
+          )
+        }
         ListHeaderComponent={
           <View style={styles.content}>
             <CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
             <Text style={styles.title}>{songList.name}</Text>
             {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
-            {songList.songs.length > 0 && (
+            <ListPlayerControls
-              <ListPlayerControls
+              style={styles.controls}
-                style={styles.controls}
+              songs={_songs}
-                songs={_songs}
+              typeName={typeName}
-                typeName={typeName}
+              queueName={songList.name}
-                queueName={songList.name}
+              queueContextId={songList.id}
-                queueContextId={songList.id}
+              queueContextType={type}
-                queueContextType={type}
+            />
-              />
-            )}
           </View>
         }
       />
@@ -127,19 +132,58 @@ const PlaylistView = React.memo<{
   id: string
   title: string
 }>(({ id, title }) => {
-  const playlist = usePlaylistWithSongs(id)
+  const playlist = useStoreDeep(useCallback(store => store.library.playlists[id], [id]))
-  return <SongListDetails title={title} songList={playlist} subtitle={playlist?.comment} type="playlist" />
+  const songs = useStoreDeep(
+    useCallback(
+      store => {
+        const ids = store.library.playlistSongs[id]
+        return ids ? ids.map(i => store.library.songs[i]) : undefined
+      },
+      [id],
+    ),
+  )
+
+  const fetchPlaylist = useStore(store => store.fetchPlaylist)
+
+  useEffect(() => {
+    if (!playlist || !songs) {
+      fetchPlaylist(id)
+    }
+  }, [playlist, fetchPlaylist, id, songs])
+
+  return (
+    <SongListDetails title={title} songList={playlist} songs={songs} subtitle={playlist?.comment} type="playlist" />
+  )
 })
 
 const AlbumView = React.memo<{
   id: string
   title: string
 }>(({ id, title }) => {
-  const album = useAlbumWithSongs(id)
+  const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
+  const songs = useStoreDeep(
+    useCallback(
+      store => {
+        const ids = store.library.albumSongs[id]
+        return ids ? ids.map(i => store.library.songs[i]) : undefined
+      },
+      [id],
+    ),
+  )
+
+  const fetchAlbum = useStore(store => store.fetchAlbum)
+
+  useEffect(() => {
+    if (!album || !songs) {
+      fetchAlbum(id)
+    }
+  }, [album, fetchAlbum, id, songs])
+
   return (
     <SongListDetails
       title={title}
       songList={album}
+      songs={songs}
       subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
       type="album"
     />
@@ -196,6 +240,12 @@ const styles = StyleSheet.create({
   listItem: {
     paddingHorizontal: 20,
   },
+  nothing: {
+    width: '100%',
+  },
+  listLoading: {
+    marginTop: 10,
+  },
 })
 
 export default SongListView

app/screens/SplashPage.tsx

@@ -45,7 +45,7 @@ const SplashPage: React.FC<{}> = ({ children }) => {
 
   const splash = (
     <Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
-      <GradientBackground style={styles.background}>
+      <GradientBackground style={styles.background} height="100%">
         <View style={styles.logoContainer}>
           <Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
           <Text style={styles.text}>subtracks</Text>

app/state/cache.ts

@@ -1,10 +1,8 @@
 import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
 import { mkdir, rmdir } from '@app/util/fs'
 import PromiseQueue from '@app/util/PromiseQueue'
-import produce from 'immer'
 import RNFS from 'react-native-fs'
-import { GetState, SetState } from 'zustand'
+import { GetStore, SetStore } from './store'
-import { Store } from './store'
 
 const queues: Record<CacheItemTypeKey, PromiseQueue> = {
   coverArt: new PromiseQueue(5),
@@ -20,16 +18,6 @@ export type CacheDirsByServer = Record<string, Record<CacheItemTypeKey, string>>
 export type CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
 export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>>
 
-// export type DownloadedItemsByServer = Record<
-//   string,
-//   {
-//     songs: { [songId: string]: DownloadedSong }
-//     albums: { [albumId: string]: DownloadedAlbum }
-//     artists: { [songId: string]: DownloadedArtist }
-//     playlists: { [playlistId: string]: DownloadedPlaylist }
-//   }
-// >
-
 export type CacheSlice = {
   cacheItem: (
     key: CacheItemTypeKey,
@@ -51,13 +39,7 @@ export type CacheSlice = {
   clearImageCache: () => Promise<void>
 }
 
-export const selectCache = {
+export const createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
-  cacheItem: (store: CacheSlice) => store.cacheItem,
-  fetchCoverArtFilePath: (store: CacheSlice) => store.fetchCoverArtFilePath,
-  clearImageCache: (store: CacheSlice) => store.clearImageCache,
-}
-
-export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): CacheSlice => ({
   // cache: {},
   cacheDirs: {},
   cacheFiles: {},
@@ -69,7 +51,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       return
     }
 
-    const activeServerId = get().settings.activeServer
+    const activeServerId = get().settings.activeServerId
     if (!activeServerId) {
       return
     }
@@ -115,34 +97,28 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
           // },
         }).promise
 
-        set(
+        set(state => {
-          produce<CacheSlice>(state => {
+          state.cacheRequests[activeServerId][key][itemId].progress = 1
-            state.cacheRequests[activeServerId][key][itemId].progress = 1
+          delete state.cacheRequests[activeServerId][key][itemId].promise
-            delete state.cacheRequests[activeServerId][key][itemId].promise
+        })
-          }),
-        )
       } catch {
-        set(
+        set(state => {
-          produce<CacheSlice>(state => {
+          delete state.cacheFiles[activeServerId][key][itemId]
-            delete state.cacheFiles[activeServerId][key][itemId]
+          delete state.cacheRequests[activeServerId][key][itemId]
-            delete state.cacheRequests[activeServerId][key][itemId]
+        })
-          }),
+      }
-        )
+    })
+    set(state => {
+      state.cacheFiles[activeServerId][key][itemId] = {
+        path,
+        date: Date.now(),
+        permanent: false,
+      }
+      state.cacheRequests[activeServerId][key][itemId] = {
+        progress: 0,
+        promise,
       }
     })
-    set(
-      produce<Store>(state => {
-        state.cacheFiles[activeServerId][key][itemId] = {
-          path,
-          date: Date.now(),
-          permanent: false,
-        }
-        state.cacheRequests[activeServerId][key][itemId] = {
-          progress: 0,
-          promise,
-        }
-      }),
-    )
     return await promise
   },
 
@@ -152,7 +128,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       return
     }
 
-    const activeServerId = get().settings.activeServer
+    const activeServerId = get().settings.activeServerId
     if (!activeServerId) {
       return
     }
@@ -183,54 +159,48 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
     }
 
-    set(
+    set(state => {
-      produce<CacheSlice>(state => {
+      state.cacheFiles[serverId] = {
-        state.cacheFiles[serverId] = {
+        song: {},
+        coverArt: {},
+        coverArtThumb: {},
+        artistArt: {},
+        artistArtThumb: {},
+      }
+    })
+
+    get().prepareCache(serverId)
+  },
+
+  prepareCache: serverId => {
+    set(state => {
+      if (!state.cacheDirs[serverId]) {
+        state.cacheDirs[serverId] = {
+          song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
+          coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
+          coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
+          artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
+          artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
+        }
+      }
+      if (!state.cacheRequests[serverId]) {
+        state.cacheRequests[serverId] = {
           song: {},
           coverArt: {},
           coverArtThumb: {},
           artistArt: {},
           artistArtThumb: {},
         }
-      }),
+      }
-    )
+    })
-
-    get().prepareCache(serverId)
-  },
-
-  prepareCache: serverId => {
-    set(
-      produce<CacheSlice>(state => {
-        if (!state.cacheDirs[serverId]) {
-          state.cacheDirs[serverId] = {
-            song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
-            coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
-            coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
-            artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
-            artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
-          }
-        }
-        if (!state.cacheRequests[serverId]) {
-          state.cacheRequests[serverId] = {
-            song: {},
-            coverArt: {},
-            coverArtThumb: {},
-            artistArt: {},
-            artistArtThumb: {},
-          }
-        }
-      }),
-    )
   },
 
   pendingRemoval: {},
 
   removeCache: async serverId => {
-    set(
+    set(state => {
-      produce<CacheSlice>(state => {
+      state.pendingRemoval[serverId] = true
-        state.pendingRemoval[serverId] = true
+    })
-      }),
-    )
 
     const cacheRequests = get().cacheRequests[serverId]
     const pendingRequests: Promise<void>[] = []
@@ -245,21 +215,19 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
     await Promise.all(pendingRequests)
     await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`)
 
-    set(
+    set(state => {
-      produce<CacheSlice>(state => {
+      delete state.pendingRemoval[serverId]
-        delete state.pendingRemoval[serverId]
 
-        if (state.cacheDirs[serverId]) {
+      if (state.cacheDirs[serverId]) {
-          delete state.cacheDirs[serverId]
+        delete state.cacheDirs[serverId]
-        }
+      }
-        if (state.cacheFiles[serverId]) {
+      if (state.cacheFiles[serverId]) {
-          delete state.cacheFiles[serverId]
+        delete state.cacheFiles[serverId]
-        }
+      }
-        if (state.cacheRequests[serverId]) {
+      if (state.cacheRequests[serverId]) {
-          delete state.cacheRequests[serverId]
+        delete state.cacheRequests[serverId]
-        }
+      }
-      }),
+    })
-    )
   },
 
   clearImageCache: async () => {
@@ -280,14 +248,12 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       await rmdir(get().cacheDirs[serverId].artistArt)
       await mkdir(get().cacheDirs[serverId].artistArt)
 
-      set(
+      set(state => {
-        produce<CacheSlice>(state => {
+        state.cacheFiles[serverId].coverArt = {}
-          state.cacheFiles[serverId].coverArt = {}
+        state.cacheFiles[serverId].coverArtThumb = {}
-          state.cacheFiles[serverId].coverArtThumb = {}
+        state.cacheFiles[serverId].artistArt = {}
-          state.cacheFiles[serverId].artistArt = {}
+        state.cacheFiles[serverId].artistArtThumb = {}
-          state.cacheFiles[serverId].artistArtThumb = {}
+      })
-        }),
-      )
     }
   },
 })

app/state/library.ts

@@ -0,0 +1,521 @@
+import { Album, Artist, ArtistInfo, Playlist, SearchResults, Song } from '@app/models/library'
+import { ById, OneToMany } from '@app/models/state'
+import { GetStore, SetStore, Store } from '@app/state/store'
+import {
+  AlbumID3Element,
+  ArtistID3Element,
+  ArtistInfo2Element,
+  ChildElement,
+  PlaylistElement,
+} from '@app/subsonic/elements'
+import { GetAlbumList2Params, Search3Params, StarParams } from '@app/subsonic/params'
+import {
+  GetAlbumList2Response,
+  GetAlbumResponse,
+  GetArtistInfo2Response,
+  GetArtistResponse,
+  GetArtistsResponse,
+  GetPlaylistResponse,
+  GetPlaylistsResponse,
+  GetSongResponse,
+  GetTopSongsResponse,
+  Search3Response,
+} from '@app/subsonic/responses'
+import PromiseQueue from '@app/util/PromiseQueue'
+import { mapId, mergeById, reduceById } from '@app/util/state'
+import { WritableDraft } from 'immer/dist/types/types-external'
+import pick from 'lodash.pick'
+
+const songCoverArtQueue = new PromiseQueue(2)
+
+export type LibrarySlice = {
+  library: {
+    artists: ById<Artist>
+    artistInfo: ById<ArtistInfo>
+    artistAlbums: OneToMany
+    artistNameTopSongs: OneToMany
+    artistOrder: string[]
+
+    albums: ById<Album>
+    albumSongs: OneToMany
+
+    playlists: ById<Playlist>
+    playlistSongs: OneToMany
+
+    songs: ById<Song>
+  }
+
+  resetLibrary: (state?: WritableDraft<Store>) => void
+
+  fetchArtists: () => Promise<void>
+  fetchArtist: (id: string) => Promise<void>
+  fetchArtistInfo: (artistId: string) => Promise<void>
+  fetchArtistTopSongs: (artistName: string) => Promise<void>
+
+  fetchAlbum: (id: string) => Promise<void>
+
+  fetchPlaylists: () => Promise<void>
+  fetchPlaylist: (id: string) => Promise<void>
+
+  fetchSong: (id: string) => Promise<void>
+
+  fetchAlbumList: (params: GetAlbumList2Params) => Promise<string[]>
+  fetchSearchResults: (params: Search3Params) => Promise<SearchResults>
+  star: (params: StarParams) => Promise<void>
+  unstar: (params: StarParams) => Promise<void>
+
+  _fixSongCoverArt: (songs: Song[]) => Promise<void>
+}
+
+const defaultLibrary = () => ({
+  artists: {},
+  artistAlbums: {},
+  artistInfo: {},
+  artistNameTopSongs: {},
+  artistOrder: [],
+
+  albums: {},
+  albumSongs: {},
+
+  playlists: {},
+  playlistSongs: {},
+
+  songs: {},
+})
+
+export const createLibrarySlice = (set: SetStore, get: GetStore): LibrarySlice => ({
+  library: defaultLibrary(),
+
+  resetLibrary: state => {
+    if (state) {
+      state.library = defaultLibrary()
+      return
+    }
+    set(store => {
+      store.library = defaultLibrary()
+    })
+  },
+
+  fetchArtists: async () => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetArtistsResponse
+    try {
+      response = await client.getArtists()
+    } catch {
+      return
+    }
+
+    const artists = response.data.artists.map(mapArtist)
+    const artistsById = reduceById(artists)
+    const artistIds = mapId(artists)
+
+    set(state => {
+      state.library.artists = artistsById
+      state.library.artistAlbums = pick(state.library.artistAlbums, artistIds)
+      state.library.artistOrder = artistIds
+    })
+  },
+
+  fetchArtist: async id => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetArtistResponse
+    try {
+      response = await client.getArtist({ id })
+    } catch {
+      return
+    }
+
+    const artist = mapArtist(response.data.artist)
+    const albums = response.data.albums.map(mapAlbum)
+    const albumsById = reduceById(albums)
+
+    set(state => {
+      state.library.artists[id] = artist
+      state.library.artistAlbums[id] = mapId(albums)
+      mergeById(state.library.albums, albumsById)
+    })
+  },
+
+  fetchArtistInfo: async id => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetArtistInfo2Response
+    try {
+      response = await client.getArtistInfo2({ id })
+    } catch {
+      return
+    }
+
+    const info = mapArtistInfo(id, response.data.artistInfo)
+
+    set(state => {
+      state.library.artistInfo[id] = info
+    })
+  },
+
+  fetchArtistTopSongs: async artistName => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetTopSongsResponse
+    try {
+      response = await client.getTopSongs({ artist: artistName, count: 50 })
+    } catch {
+      return
+    }
+
+    const topSongs = response.data.songs.map(mapSong)
+    const topSongsById = reduceById(topSongs)
+
+    get()._fixSongCoverArt(topSongs)
+
+    set(state => {
+      mergeById(state.library.songs, topSongsById)
+      state.library.artistNameTopSongs[artistName] = mapId(topSongs)
+    })
+  },
+
+  fetchAlbum: async id => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetAlbumResponse
+    try {
+      response = await client.getAlbum({ id })
+    } catch {
+      return
+    }
+
+    const album = mapAlbum(response.data.album)
+    const songs = response.data.songs.map(mapSong)
+    const songsById = reduceById(songs)
+
+    get()._fixSongCoverArt(songs)
+
+    set(state => {
+      state.library.albums[id] = album
+      state.library.albumSongs[id] = mapId(songs)
+      mergeById(state.library.songs, songsById)
+    })
+  },
+
+  fetchPlaylists: async () => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetPlaylistsResponse
+    try {
+      response = await client.getPlaylists()
+    } catch {
+      return
+    }
+
+    const playlists = response.data.playlists.map(mapPlaylist)
+    const playlistsById = reduceById(playlists)
+
+    set(state => {
+      state.library.playlists = playlistsById
+      state.library.playlistSongs = pick(state.library.playlistSongs, mapId(playlists))
+    })
+  },
+
+  fetchPlaylist: async id => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetPlaylistResponse
+    try {
+      response = await client.getPlaylist({ id })
+    } catch {
+      return
+    }
+
+    const playlist = mapPlaylist(response.data.playlist)
+    const songs = response.data.playlist.songs.map(mapSong)
+    const songsById = reduceById(songs)
+
+    get()._fixSongCoverArt(songs)
+
+    set(state => {
+      state.library.playlists[id] = playlist
+      state.library.playlistSongs[id] = mapId(songs)
+      mergeById(state.library.songs, songsById)
+    })
+  },
+
+  fetchSong: async id => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let response: GetSongResponse
+    try {
+      response = await client.getSong({ id })
+    } catch {
+      return
+    }
+
+    const song = mapSong(response.data.song)
+
+    get()._fixSongCoverArt([song])
+
+    set(state => {
+      state.library.songs[id] = song
+    })
+  },
+
+  fetchAlbumList: async params => {
+    const client = get().client
+    if (!client) {
+      return []
+    }
+
+    let response: GetAlbumList2Response
+    try {
+      response = await client.getAlbumList2(params)
+    } catch {
+      return []
+    }
+
+    const albums = response.data.albums.map(mapAlbum)
+    const albumsById = reduceById(albums)
+
+    set(state => {
+      mergeById(state.library.albums, albumsById)
+    })
+
+    return mapId(albums)
+  },
+
+  fetchSearchResults: async params => {
+    const empty = { artists: [], albums: [], songs: [] }
+
+    const client = get().client
+    if (!client) {
+      return empty
+    }
+
+    let response: Search3Response
+    try {
+      response = await client.search3(params)
+    } catch {
+      return empty
+    }
+
+    const artists = response.data.artists.map(mapArtist)
+    const artistsById = reduceById(artists)
+    const albums = response.data.albums.map(mapAlbum)
+    const albumsById = reduceById(albums)
+    const songs = response.data.songs.map(mapSong)
+    const songsById = reduceById(songs)
+
+    get()._fixSongCoverArt(songs)
+
+    set(state => {
+      mergeById(state.library.artists, artistsById)
+      mergeById(state.library.albums, albumsById)
+      mergeById(state.library.songs, songsById)
+    })
+
+    return {
+      artists: mapId(artists),
+      albums: mapId(albums),
+      songs: mapId(songs),
+    }
+  },
+
+  star: async params => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let id = '-1'
+    let entity: 'songs' | 'artists' | 'albums' = 'songs'
+    if (params.id) {
+      id = params.id
+      entity = 'songs'
+    } else if (params.albumId) {
+      id = params.albumId
+      entity = 'albums'
+    } else if (params.artistId) {
+      id = params.artistId
+      entity = 'artists'
+    } else {
+      return
+    }
+
+    const item = get().library[entity][id]
+    const originalValue = item ? item.starred : null
+
+    set(state => {
+      state.library[entity][id].starred = new Date()
+    })
+
+    try {
+      await client.star(params)
+    } catch {
+      set(state => {
+        if (originalValue !== null) {
+          state.library[entity][id].starred = originalValue
+        }
+      })
+    }
+  },
+
+  unstar: async params => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    let id = '-1'
+    let entity: 'songs' | 'artists' | 'albums' = 'songs'
+    if (params.id) {
+      id = params.id
+      entity = 'songs'
+    } else if (params.albumId) {
+      id = params.albumId
+      entity = 'albums'
+    } else if (params.artistId) {
+      id = params.artistId
+      entity = 'artists'
+    } else {
+      return
+    }
+
+    const item = get().library[entity][id]
+    const originalValue = item ? item.starred : null
+
+    set(state => {
+      state.library[entity][id].starred = undefined
+    })
+
+    try {
+      await client.unstar(params)
+    } catch {
+      set(state => {
+        if (originalValue !== null) {
+          state.library[entity][id].starred = originalValue
+        }
+      })
+    }
+  },
+
+  // song cover art comes back from the api as a unique id per song even if it all points to the same
+  // album art, which prevents us from caching it once, so we need to use the album's cover art
+  _fixSongCoverArt: async songs => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    const albumsToGet: ById<Song[]> = {}
+    for (const song of songs) {
+      if (!song.albumId) {
+        continue
+      }
+
+      let album = get().library.albums[song.albumId]
+      if (album) {
+        song.coverArt = album.coverArt
+        continue
+      }
+
+      albumsToGet[song.albumId] = albumsToGet[song.albumId] || []
+      albumsToGet[song.albumId].push(song)
+    }
+
+    for (const id in albumsToGet) {
+      songCoverArtQueue
+        .enqueue(() => client.getAlbum({ id }))
+        .then(res => {
+          const album = mapAlbum(res.data.album)
+
+          set(state => {
+            state.library.albums[album.id] = album
+            for (const song of albumsToGet[album.id]) {
+              state.library.songs[song.id].coverArt = album.coverArt
+            }
+          })
+        })
+    }
+  },
+})
+
+function mapArtist(artist: ArtistID3Element): Artist {
+  return {
+    itemType: 'artist',
+    id: artist.id,
+    name: artist.name,
+    starred: artist.starred,
+    coverArt: artist.coverArt,
+  }
+}
+
+function mapArtistInfo(id: string, info: ArtistInfo2Element): ArtistInfo {
+  return {
+    id,
+    smallImageUrl: info.smallImageUrl,
+    largeImageUrl: info.largeImageUrl,
+  }
+}
+
+function mapAlbum(album: AlbumID3Element): Album {
+  return {
+    itemType: 'album',
+    id: album.id,
+    name: album.name,
+    artist: album.artist,
+    artistId: album.artistId,
+    starred: album.starred,
+    coverArt: album.coverArt,
+    year: album.year,
+  }
+}
+
+function mapPlaylist(playlist: PlaylistElement): Playlist {
+  return {
+    itemType: 'playlist',
+    id: playlist.id,
+    name: playlist.name,
+    comment: playlist.comment,
+    coverArt: playlist.coverArt,
+  }
+}
+
+function mapSong(song: ChildElement): Song {
+  return {
+    itemType: 'song',
+    id: song.id,
+    album: song.album,
+    albumId: song.albumId,
+    artist: song.artist,
+    artistId: song.artistId,
+    title: song.title,
+    track: song.track,
+    discNumber: song.discNumber,
+    duration: song.duration,
+    starred: song.starred,
+  }
+}

app/state/migrations.ts

@@ -1,9 +1,34 @@
+import { Server } from '@app/models/settings'
+import { ById } from '@app/models/state'
+
 const migrations: Array<(state: any) => any> = [
   state => {
     for (let server of state.settings.servers) {
       server.usePlainPassword = false
     }
 
+    return state
+  },
+  state => {
+    state.settings.servers = state.settings.servers.reduce((acc: ById<Server>, server: Server) => {
+      acc[server.id] = server
+      return acc
+    }, {} as ById<Server>)
+
+    state.settings.activeServerId = state.settings.activeServer
+    delete state.settings.activeServer
+
+    state.settings.screens.home.listTypes = [...state.settings.screens.home.lists]
+    delete state.settings.screens.home.lists
+
+    state.settings.screens.library.albumsFilter = { ...state.settings.screens.library.albums }
+    delete state.settings.screens.library.albums
+
+    state.settings.screens.library.artistsFilter = { ...state.settings.screens.library.artists }
+    delete state.settings.screens.library.artists
+
+    delete state.settings.estimateContentLength
+
     return state
   },
 ]

app/state/music.ts

@@ -1,471 +0,0 @@
-import {
-  AlbumListItem,
-  AlbumWithSongs,
-  Artist,
-  ArtistInfo,
-  HomeLists,
-  PlaylistListItem,
-  PlaylistWithSongs,
-  SearchResults,
-  StarrableItemType,
-} from '@app/models/music'
-import { Store } from '@app/state/store'
-import { GetAlbumList2Params, GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
-import produce from 'immer'
-import { GetState, SetState } from 'zustand'
-
-export type MusicSlice = {
-  //
-  // family-style state
-  //
-  artistInfo: { [id: string]: ArtistInfo }
-  fetchArtistInfo: (id: string) => Promise<ArtistInfo | undefined>
-
-  albumsWithSongs: { [id: string]: AlbumWithSongs }
-  fetchAlbumWithSongs: (id: string) => Promise<AlbumWithSongs | undefined>
-
-  playlistsWithSongs: { [id: string]: PlaylistWithSongs }
-  fetchPlaylistWithSongs: (id: string) => Promise<PlaylistWithSongs | undefined>
-
-  //
-  // lists-style state
-  //
-  fetchArtists: (size?: number, offset?: number) => Promise<Artist[]>
-  fetchPlaylists: () => Promise<PlaylistListItem[]>
-  fetchAlbums: () => Promise<AlbumListItem[]>
-  fetchSearchResults: (
-    query: string,
-    type?: 'album' | 'song' | 'artist',
-    size?: number,
-    offset?: number,
-  ) => Promise<SearchResults>
-
-  homeLists: HomeLists
-  homeListsUpdating: boolean
-  fetchHomeLists: () => Promise<void>
-  clearHomeLists: () => void
-
-  //
-  // actions, etc.
-  //
-  starredSongs: { [id: string]: boolean }
-  starredAlbums: { [id: string]: boolean }
-  starredArtists: { [id: string]: boolean }
-  starItem: (id: string, type: StarrableItemType, unstar?: boolean) => Promise<void>
-
-  albumIdCoverArt: { [id: string]: string | undefined }
-  albumIdCoverArtRequests: { [id: string]: Promise<void> }
-  fetchAlbumCoverArt: (id: string) => Promise<void>
-  getAlbumCoverArt: (id: string | undefined) => Promise<string | undefined>
-}
-
-export const selectMusic = {
-  fetchArtistInfo: (state: Store) => state.fetchArtistInfo,
-  fetchAlbumWithSongs: (state: Store) => state.fetchAlbumWithSongs,
-  fetchPlaylistWithSongs: (state: Store) => state.fetchPlaylistWithSongs,
-
-  fetchArtists: (store: MusicSlice) => store.fetchArtists,
-  fetchPlaylists: (store: MusicSlice) => store.fetchPlaylists,
-  fetchAlbums: (store: MusicSlice) => store.fetchAlbums,
-  fetchSearchResults: (store: MusicSlice) => store.fetchSearchResults,
-
-  homeLists: (store: MusicSlice) => store.homeLists,
-  homeListsUpdating: (store: MusicSlice) => store.homeListsUpdating,
-  fetchHomeLists: (store: MusicSlice) => store.fetchHomeLists,
-  clearHomeLists: (store: MusicSlice) => store.clearHomeLists,
-
-  starItem: (store: MusicSlice) => store.starItem,
-}
-
-function reduceStarred(
-  starredType: { [id: string]: boolean },
-  items: { id: string; starred?: Date | boolean }[],
-): { [id: string]: boolean } {
-  return {
-    ...starredType,
-    ...items.reduce((acc, val) => {
-      acc[val.id] = !!val.starred
-      return acc
-    }, {} as { [id: string]: boolean }),
-  }
-}
-
-export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): MusicSlice => ({
-  artistInfo: {},
-
-  fetchArtistInfo: async id => {
-    const client = get().client
-    if (!client) {
-      return undefined
-    }
-
-    try {
-      const [artistResponse, artistInfoResponse] = await Promise.all([
-        client.getArtist({ id }),
-        client.getArtistInfo2({ id }),
-      ])
-      const topSongsResponse = await client.getTopSongs({ artist: artistResponse.data.artist.name, count: 50 })
-      const artistInfo = await get().mapArtistInfo(
-        artistResponse.data,
-        artistInfoResponse.data.artistInfo,
-        topSongsResponse.data.songs,
-      )
-
-      set(
-        produce<MusicSlice>(state => {
-          state.artistInfo[id] = artistInfo
-
-          state.starredSongs = reduceStarred(state.starredSongs, artistInfo.topSongs)
-          state.starredArtists = reduceStarred(state.starredArtists, [artistInfo])
-          state.starredAlbums = reduceStarred(state.starredAlbums, artistInfo.albums)
-        }),
-      )
-      return artistInfo
-    } catch {
-      return undefined
-    }
-  },
-
-  albumsWithSongs: {},
-
-  fetchAlbumWithSongs: async id => {
-    const client = get().client
-    if (!client) {
-      return undefined
-    }
-
-    try {
-      const response = await client.getAlbum({ id })
-      const album = await get().mapAlbumID3WithSongstoAlbumWithSongs(response.data.album, response.data.songs)
-
-      set(
-        produce<MusicSlice>(state => {
-          state.albumsWithSongs[id] = album
-          state.starredSongs = reduceStarred(state.starredSongs, album.songs)
-          state.starredAlbums = reduceStarred(state.starredAlbums, [album])
-        }),
-      )
-      return album
-    } catch {
-      return undefined
-    }
-  },
-
-  playlistsWithSongs: {},
-
-  fetchPlaylistWithSongs: async id => {
-    const client = get().client
-    if (!client) {
-      return undefined
-    }
-
-    try {
-      const response = await client.getPlaylist({ id })
-      const playlist = await get().mapPlaylistWithSongs(response.data.playlist)
-
-      set(
-        produce<MusicSlice>(state => {
-          state.playlistsWithSongs[id] = playlist
-          state.starredSongs = reduceStarred(state.starredSongs, playlist.songs)
-        }),
-      )
-      return playlist
-    } catch {
-      return undefined
-    }
-  },
-
-  fetchArtists: async () => {
-    const client = get().client
-    if (!client) {
-      return []
-    }
-
-    try {
-      const response = await client.getArtists()
-      const artists = response.data.artists.map(get().mapArtistID3toArtist)
-
-      set(
-        produce<MusicSlice>(state => {
-          state.starredArtists = reduceStarred(state.starredArtists, artists)
-        }),
-      )
-
-      return artists
-    } catch {
-      return []
-    }
-  },
-
-  fetchPlaylists: async () => {
-    const client = get().client
-    if (!client) {
-      return []
-    }
-
-    try {
-      const response = await client.getPlaylists()
-      return response.data.playlists.map(get().mapPlaylistListItem)
-    } catch {
-      return []
-    }
-  },
-
-  fetchAlbums: async (size = 500, offset = 0) => {
-    const client = get().client
-    if (!client) {
-      return []
-    }
-
-    try {
-      const filter = get().settings.screens.library.albums
-
-      let params: GetAlbumList2Params
-      switch (filter.type) {
-        case 'byYear':
-          params = {
-            size,
-            offset,
-            type: filter.type,
-            fromYear: filter.fromYear,
-            toYear: filter.toYear,
-          }
-          break
-        case 'byGenre':
-          params = {
-            size,
-            offset,
-            type: filter.type,
-            genre: filter.genre,
-          }
-          break
-        default:
-          params = {
-            size,
-            offset,
-            type: filter.type,
-          }
-          break
-      }
-
-      const response = await client.getAlbumList2(params)
-      const albums = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
-
-      set(
-        produce<MusicSlice>(state => {
-          state.starredAlbums = reduceStarred(state.starredAlbums, albums)
-        }),
-      )
-
-      return albums
-    } catch {
-      return []
-    }
-  },
-
-  fetchSearchResults: async (query, type, size, offset) => {
-    if (query.length < 2) {
-      return { artists: [], albums: [], songs: [] }
-    }
-
-    const client = get().client
-    if (!client) {
-      return { artists: [], albums: [], songs: [] }
-    }
-
-    try {
-      const params: Search3Params = { query }
-      if (type === 'album') {
-        params.albumCount = size
-        params.albumOffset = offset
-      } else if (type === 'artist') {
-        params.artistCount = size
-        params.artistOffset = offset
-      } else if (type === 'song') {
-        params.songCount = size
-        params.songOffset = offset
-      } else {
-        params.albumCount = 5
-        params.artistCount = 5
-        params.songCount = 5
-      }
-
-      const response = await client.search3(params)
-
-      const artists = response.data.artists.map(get().mapArtistID3toArtist)
-      const albums = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
-      const songs = await get().mapChildrenToSongs(response.data.songs)
-
-      set(
-        produce<MusicSlice>(state => {
-          state.starredSongs = reduceStarred(state.starredSongs, songs)
-          state.starredArtists = reduceStarred(state.starredArtists, artists)
-          state.starredAlbums = reduceStarred(state.starredAlbums, albums)
-        }),
-      )
-
-      return { artists, albums, songs }
-    } catch {
-      return { artists: [], albums: [], songs: [] }
-    }
-  },
-
-  homeLists: {},
-  homeListsUpdating: false,
-
-  fetchHomeLists: async () => {
-    const client = get().client
-    if (!client) {
-      return
-    }
-
-    if (get().homeListsUpdating) {
-      return
-    }
-    set({ homeListsUpdating: true })
-
-    const types = get().settings.screens.home.lists
-
-    try {
-      const promises: Promise<any>[] = []
-      for (const type of types) {
-        promises.push(
-          client
-            .getAlbumList2({ type: type as GetAlbumList2TypeBase, size: 20 })
-            .then(response => {
-              const list = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
-              set(
-                produce<MusicSlice>(state => {
-                  state.homeLists[type] = list
-                  state.starredAlbums = reduceStarred(state.starredAlbums, state.homeLists[type])
-                }),
-              )
-            })
-            .catch(() => {}),
-        )
-      }
-      await Promise.all(promises)
-    } finally {
-      set({ homeListsUpdating: false })
-    }
-  },
-
-  clearHomeLists: () => {
-    set({ homeLists: {} })
-  },
-
-  starredSongs: {},
-  starredAlbums: {},
-  starredArtists: {},
-
-  starItem: async (id, type, unstar = false) => {
-    const client = get().client
-    if (!client) {
-      return
-    }
-
-    let params: StarParams
-    let setStarred: (starred: boolean) => void
-
-    switch (type) {
-      case 'song':
-        params = { id }
-        setStarred = starred => {
-          set(
-            produce<MusicSlice>(state => {
-              state.starredSongs = reduceStarred(state.starredSongs, [{ id, starred }])
-            }),
-          )
-        }
-        break
-      case 'album':
-        params = { albumId: id }
-        setStarred = starred => {
-          set(
-            produce<MusicSlice>(state => {
-              state.starredAlbums = reduceStarred(state.starredAlbums, [{ id, starred }])
-            }),
-          )
-        }
-        break
-      case 'artist':
-        params = { artistId: id }
-        setStarred = starred => {
-          set(
-            produce<MusicSlice>(state => {
-              state.starredArtists = reduceStarred(state.starredArtists, [{ id, starred }])
-            }),
-          )
-        }
-        break
-      default:
-        return
-    }
-
-    try {
-      setStarred(!unstar)
-      if (unstar) {
-        await client.unstar(params)
-      } else {
-        await client.star(params)
-      }
-    } catch {
-      setStarred(unstar)
-    }
-  },
-
-  albumIdCoverArt: {},
-  albumIdCoverArtRequests: {},
-
-  fetchAlbumCoverArt: async id => {
-    const client = get().client
-    if (!client) {
-      return
-    }
-
-    const inProgress = get().albumIdCoverArtRequests[id]
-    if (inProgress !== undefined) {
-      return await inProgress
-    }
-
-    const promise = new Promise<void>(async resolve => {
-      try {
-        const response = await client.getAlbum({ id })
-        set(
-          produce<MusicSlice>(state => {
-            state.albumIdCoverArt[id] = response.data.album.coverArt
-          }),
-        )
-      } finally {
-        resolve()
-      }
-    }).then(() => {
-      set(
-        produce<MusicSlice>(state => {
-          delete state.albumIdCoverArtRequests[id]
-        }),
-      )
-    })
-    set(
-      produce<MusicSlice>(state => {
-        state.albumIdCoverArtRequests[id] = promise
-      }),
-    )
-
-    return await promise
-  },
-
-  getAlbumCoverArt: async id => {
-    if (!id) {
-      return
-    }
-
-    const existing = get().albumIdCoverArt[id]
-    if (existing) {
-      return existing
-    }
-
-    await get().fetchAlbumCoverArt(id)
-    return get().albumIdCoverArt[id]
-  },
-})

app/state/musicmap.ts

@@ -1,142 +0,0 @@
-import {
-  AlbumListItem,
-  AlbumWithSongs,
-  Artist,
-  ArtistInfo,
-  PlaylistListItem,
-  PlaylistWithSongs,
-  Song,
-} from '@app/models/music'
-import {
-  AlbumID3Element,
-  ArtistID3Element,
-  ArtistInfo2Element,
-  ChildElement,
-  PlaylistElement,
-  PlaylistWithSongsElement,
-} from '@app/subsonic/elements'
-import { GetArtistResponse } from '@app/subsonic/responses'
-import { GetState, SetState } from 'zustand'
-import { Store } from './store'
-
-export type MusicMapSlice = {
-  mapChildToSong: (child: ChildElement, coverArt?: string) => Promise<Song>
-  mapChildrenToSongs: (children: ChildElement[], coverArt?: string) => Promise<Song[]>
-  mapArtistID3toArtist: (artist: ArtistID3Element) => Artist
-  mapArtistInfo: (
-    artistResponse: GetArtistResponse,
-    info: ArtistInfo2Element,
-    topSongs: ChildElement[],
-  ) => Promise<ArtistInfo>
-  mapAlbumID3toAlbumListItem: (album: AlbumID3Element) => AlbumListItem
-  mapAlbumID3toAlbum: (album: AlbumID3Element) => AlbumListItem
-  mapAlbumID3WithSongstoAlbumWithSongs: (album: AlbumID3Element, songs: ChildElement[]) => Promise<AlbumWithSongs>
-  mapPlaylistListItem: (playlist: PlaylistElement) => PlaylistListItem
-  mapPlaylistWithSongs: (playlist: PlaylistWithSongsElement) => Promise<PlaylistWithSongs>
-}
-
-export const createMusicMapSlice = (set: SetState<Store>, get: GetState<Store>): MusicMapSlice => ({
-  mapChildToSong: async (child, coverArt) => {
-    return {
-      itemType: 'song',
-      id: child.id,
-      album: child.album,
-      albumId: child.albumId,
-      artist: child.artist,
-      artistId: child.artistId,
-      title: child.title,
-      track: child.track,
-      discNumber: child.discNumber,
-      duration: child.duration,
-      starred: child.starred,
-      coverArt: coverArt || (await get().getAlbumCoverArt(child.albumId)),
-      streamUri: get().buildStreamUri(child.id),
-    }
-  },
-
-  mapChildrenToSongs: async (children, coverArt) => {
-    const albumIds = children.reduce((acc, val) => {
-      if (val.albumId && !(val.albumId in acc)) {
-        acc[val.albumId] = get().getAlbumCoverArt(val.albumId)
-      }
-      return acc
-    }, {} as Record<string, Promise<string | undefined>>)
-
-    await Promise.all(Object.values(albumIds))
-
-    const songs: Song[] = []
-    for (const child of children) {
-      songs.push(await get().mapChildToSong(child, coverArt || (await get().getAlbumCoverArt(child.albumId))))
-    }
-    return songs
-  },
-
-  mapArtistID3toArtist: artist => {
-    return {
-      itemType: 'artist',
-      id: artist.id,
-      name: artist.name,
-      starred: artist.starred,
-      coverArt: artist.coverArt,
-    }
-  },
-
-  mapArtistInfo: async (artistResponse, info, topSongs) => {
-    const { artist, albums } = artistResponse
-
-    const mappedAlbums = albums.map(get().mapAlbumID3toAlbum)
-
-    return {
-      ...get().mapArtistID3toArtist(artist),
-      albums: mappedAlbums,
-      smallImageUrl: info.smallImageUrl,
-      largeImageUrl: info.largeImageUrl,
-      topSongs: (await get().mapChildrenToSongs(topSongs)).slice(0, 5),
-    }
-  },
-
-  mapAlbumID3toAlbumListItem: album => {
-    return {
-      itemType: 'album',
-      id: album.id,
-      name: album.name,
-      artist: album.artist,
-      artistId: album.artistId,
-      starred: album.starred,
-      coverArt: album.coverArt,
-    }
-  },
-
-  mapAlbumID3toAlbum: album => {
-    return {
-      ...get().mapAlbumID3toAlbumListItem(album),
-      coverArt: album.coverArt,
-      year: album.year,
-    }
-  },
-
-  mapAlbumID3WithSongstoAlbumWithSongs: async (album, songs) => {
-    return {
-      ...get().mapAlbumID3toAlbum(album),
-      songs: await get().mapChildrenToSongs(songs),
-    }
-  },
-
-  mapPlaylistListItem: playlist => {
-    return {
-      itemType: 'playlist',
-      id: playlist.id,
-      name: playlist.name,
-      comment: playlist.comment,
-      coverArt: playlist.coverArt,
-    }
-  },
-
-  mapPlaylistWithSongs: async playlist => {
-    return {
-      ...get().mapPlaylistListItem(playlist),
-      songs: await get().mapChildrenToSongs(playlist.songs),
-      coverArt: playlist.coverArt,
-    }
-  },
-})

app/state/settings.ts

@@ -1,21 +1,36 @@
-import { AppSettings, ArtistFilterSettings, AlbumFilterSettings, Server } from '@app/models/settings'
+import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/settings'
-import { Store } from '@app/state/store'
+import { ById } from '@app/models/state'
+import { GetStore, SetStore } from '@app/state/store'
 import { SubsonicApiClient } from '@app/subsonic/api'
-import produce from 'immer'
-import { GetState, SetState } from 'zustand'
 
 export type SettingsSlice = {
-  settings: AppSettings
+  settings: {
+    servers: ById<Server>
+    activeServerId?: string
+    screens: {
+      home: {
+        listTypes: string[]
+      }
+      library: {
+        albumsFilter: AlbumFilterSettings
+        artistsFilter: ArtistFilterSettings
+      }
+    }
+    scrobble: boolean
+    maxBitrateWifi: number
+    maxBitrateMobile: number
+    minBuffer: number
+    maxBuffer: number
+  }
+
   client?: SubsonicApiClient
 
   setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
-  getActiveServer: () => Server | undefined
   addServer: (server: Server) => Promise<void>
   removeServer: (id: string) => Promise<void>
   updateServer: (server: Server) => void
 
   setScrobble: (scrobble: boolean) => void
-  setEstimateContentLength: (estimateContentLength: boolean) => void
   setMaxBitrateWifi: (maxBitrateWifi: number) => void
   setMaxBitrateMobile: (maxBitrateMobile: number) => void
   setMinBuffer: (minBuffer: number) => void
@@ -27,66 +42,26 @@ export type SettingsSlice = {
   setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
 }
 
-export const selectSettings = {
+export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice => ({
-  client: (state: SettingsSlice) => state.client,
-
-  firstRun: (state: SettingsSlice) => state.settings.servers.length === 0,
-
-  activeServer: (state: SettingsSlice) => state.settings.servers.find(s => s.id === state.settings.activeServer),
-  setActiveServer: (state: SettingsSlice) => state.setActiveServer,
-
-  servers: (state: SettingsSlice) => state.settings.servers,
-  addServer: (state: SettingsSlice) => state.addServer,
-  removeServer: (state: SettingsSlice) => state.removeServer,
-  updateServer: (state: SettingsSlice) => state.updateServer,
-
-  homeLists: (state: SettingsSlice) => state.settings.screens.home.lists,
-
-  scrobble: (state: SettingsSlice) => state.settings.scrobble,
-  setScrobble: (state: SettingsSlice) => state.setScrobble,
-
-  estimateContentLength: (state: SettingsSlice) => state.settings.estimateContentLength,
-  setEstimateContentLength: (state: SettingsSlice) => state.setEstimateContentLength,
-
-  maxBitrateWifi: (state: SettingsSlice) => state.settings.maxBitrateWifi,
-  setMaxBitrateWifi: (state: SettingsSlice) => state.setMaxBitrateWifi,
-  maxBitrateMobile: (state: SettingsSlice) => state.settings.maxBitrateMobile,
-  setMaxBitrateMobile: (state: SettingsSlice) => state.setMaxBitrateMobile,
-
-  minBuffer: (state: SettingsSlice) => state.settings.minBuffer,
-  setMinBuffer: (state: SettingsSlice) => state.setMinBuffer,
-  maxBuffer: (state: SettingsSlice) => state.settings.maxBuffer,
-  setMaxBuffer: (state: SettingsSlice) => state.setMaxBuffer,
-
-  pingServer: (state: SettingsSlice) => state.pingServer,
-
-  setLibraryAlbumFilter: (state: SettingsSlice) => state.setLibraryAlbumFilter,
-  libraryAlbumFilter: (state: SettingsSlice) => state.settings.screens.library.albums,
-  setLibraryArtistFiler: (state: SettingsSlice) => state.setLibraryArtistFiler,
-  libraryArtistFilter: (state: SettingsSlice) => state.settings.screens.library.artists,
-}
-
-export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>): SettingsSlice => ({
   settings: {
-    servers: [],
+    servers: {},
     screens: {
       home: {
-        lists: ['frequent', 'recent', 'starred', 'random'],
+        listTypes: ['frequent', 'recent', 'starred', 'random'],
       },
       library: {
-        albums: {
+        albumsFilter: {
           type: 'alphabeticalByArtist',
           fromYear: 1,
           toYear: 9999,
           genre: '',
         },
-        artists: {
+        artistsFilter: {
           type: 'alphabeticalByName',
         },
       },
     },
     scrobble: false,
-    estimateContentLength: true,
     maxBitrateWifi: 0,
     maxBitrateMobile: 192,
     minBuffer: 6,
@@ -95,12 +70,12 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
 
   setActiveServer: async (id, force) => {
     const servers = get().settings.servers
-    const currentActiveServerId = get().settings.activeServer
+    const currentActiveServerId = get().settings.activeServerId
-    const newActiveServer = servers.find(s => s.id === id)
+    const newActiveServer = id ? servers[id] : undefined
 
     if (!newActiveServer) {
-      set({
+      set(state => {
-        client: undefined,
+        state.client = undefined
       })
       return
     }
@@ -111,26 +86,21 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
 
     get().prepareCache(newActiveServer.id)
 
-    set(
+    set(state => {
-      produce<Store>(state => {
+      state.settings.activeServerId = newActiveServer.id
-        state.settings.activeServer = newActiveServer.id
+      state.client = new SubsonicApiClient(newActiveServer)
-        state.client = new SubsonicApiClient(newActiveServer)
+      get().resetLibrary(state)
-      }),
+    })
-    )
   },
 
-  getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),
-
   addServer: async server => {
     await get().createCache(server.id)
 
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.servers[server.id] = server
-        state.settings.servers.push(server)
+    })
-      }),
-    )
 
-    if (get().settings.servers.length === 1) {
+    if (Object.keys(get().settings.servers).length === 1) {
       get().setActiveServer(server.id)
     }
   },
@@ -138,53 +108,31 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
   removeServer: async id => {
     await get().removeCache(id)
 
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      delete state.settings.servers[id]
-        state.settings.servers = state.settings.servers.filter(s => s.id !== id)
+    })
-      }),
-    )
   },
 
   updateServer: server => {
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.servers[server.id] = server
-        state.settings.servers = replaceIndex(
+    })
-          state.settings.servers,
-          state.settings.servers.findIndex(s => s.id === server.id),
-          server,
-        )
-      }),
-    )
 
-    if (get().settings.activeServer === server.id) {
+    if (get().settings.activeServerId === server.id) {
       get().setActiveServer(server.id, true)
     }
   },
 
   setScrobble: scrobble => {
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.scrobble = scrobble
-        state.settings.scrobble = scrobble
+    })
-      }),
-    )
-  },
-
-  setEstimateContentLength: estimateContentLength => {
-    set(
-      produce<SettingsSlice>(state => {
-        state.settings.estimateContentLength = estimateContentLength
-      }),
-    )
-
-    get().rebuildQueue()
   },
 
   setMaxBitrateWifi: maxBitrateWifi => {
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.maxBitrateWifi = maxBitrateWifi
-        state.settings.maxBitrateWifi = maxBitrateWifi
+    })
-      }),
-    )
 
     if (get().netState === 'wifi') {
       get().rebuildQueue()
@@ -192,11 +140,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
   },
 
   setMaxBitrateMobile: maxBitrateMobile => {
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.maxBitrateMobile = maxBitrateMobile
-        state.settings.maxBitrateMobile = maxBitrateMobile
+    })
-      }),
-    )
 
     if (get().netState === 'mobile') {
       get().rebuildQueue()
@@ -208,11 +154,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
       return
     }
 
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
-        state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
+    })
-      }),
-    )
 
     get().rebuildQueue()
   },
@@ -222,11 +166,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
       return
     }
 
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
-        state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
+    })
-      }),
-    )
 
     get().rebuildQueue()
   },
@@ -252,24 +194,14 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
   },
 
   setLibraryAlbumFilter: filter => {
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.screens.library.albumsFilter = filter
-        state.settings.screens.library.albums = filter
+    })
-      }),
-    )
   },
 
   setLibraryArtistFiler: filter => {
-    set(
+    set(state => {
-      produce<SettingsSlice>(state => {
+      state.settings.screens.library.artistsFilter = filter
-        state.settings.screens.library.artists = filter
+    })
-      }),
-    )
   },
 })
-
-function replaceIndex<T>(array: T[], index: number, replacement: T): T[] {
-  const start = array.slice(0, index)
-  const end = array.slice(index + 1)
-  return [...start, replacement, ...end]
-}

app/state/store.ts

@@ -1,19 +1,20 @@
-import { createMusicSlice, MusicSlice } from '@app/state/music'
 import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import create from 'zustand'
+import equal from 'fast-deep-equal'
-import { persist, StateStorage } from 'zustand/middleware'
+import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
+import { persist, subscribeWithSelector } from 'zustand/middleware'
 import { CacheSlice, createCacheSlice } from './cache'
+import { createLibrarySlice, LibrarySlice } from './library'
 import migrations from './migrations'
-import { createMusicMapSlice, MusicMapSlice } from './musicmap'
 import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
 import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
+import produce, { Draft } from 'immer'
+import { WritableDraft } from 'immer/dist/internal'
 
 const DB_VERSION = migrations.length
 
 export type Store = SettingsSlice &
-  MusicSlice &
+  LibrarySlice &
-  MusicMapSlice &
   TrackPlayerSlice &
   TrackPlayerMapSlice &
   CacheSlice & {
@@ -21,59 +22,83 @@ export type Store = SettingsSlice &
     setHydrated: (hydrated: boolean) => void
   }
 
-const storage: StateStorage = {
+// taken from zustand test examples:
-  getItem: async name => {
+// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L20
-    try {
+const immer =
-      return await AsyncStorage.getItem(name)
+  <
-    } catch (err) {
+    T extends State,
-      console.error(`getItem error (key: ${name})`, err)
+    CustomSetState extends SetState<T>,
-      return null
+    CustomGetState extends GetState<T>,
-    }
+    CustomStoreApi extends StoreApi<T>,
-  },
+  >(
-  setItem: async (name, item) => {
+    config: StateCreator<
-    try {
+      T,
-      await AsyncStorage.setItem(name, item)
+      (partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void,
-    } catch (err) {
+      CustomGetState,
-      console.error(`setItem error (key: ${name})`, err)
+      CustomStoreApi
-    }
+    >,
-  },
+  ): StateCreator<T, CustomSetState, CustomGetState, CustomStoreApi> =>
-}
+  (set, get, api) =>
-
+    config(
-export const useStore = create<Store>(
+      (partial, replace) => {
-  persist(
+        const nextState = typeof partial === 'function' ? produce(partial as (state: Draft<T>) => T) : (partial as T)
-    (set, get) => ({
+        return set(nextState, replace)
-      ...createSettingsSlice(set, get),
-      ...createMusicSlice(set, get),
-      ...createMusicMapSlice(set, get),
-      ...createTrackPlayerSlice(set, get),
-      ...createTrackPlayerMapSlice(set, get),
-      ...createCacheSlice(set, get),
-
-      hydrated: false,
-      setHydrated: hydrated => set({ hydrated }),
-    }),
-    {
-      name: '@appStore',
-      version: DB_VERSION,
-      getStorage: () => storage,
-      whitelist: ['settings', 'cacheFiles'],
-      onRehydrateStorage: _preState => {
-        return async (postState, _error) => {
-          await postState?.setActiveServer(postState.settings.activeServer, true)
-          postState?.setHydrated(true)
-        }
       },
-      migrate: (persistedState, version) => {
+      get,
-        if (version > DB_VERSION) {
+      api,
-          throw new Error('cannot migrate db on a downgrade, delete all data first')
+    )
-        }
 
-        for (let i = version; i < DB_VERSION; i++) {
+export type SetStore = (partial: Store | ((draft: WritableDraft<Store>) => void), replace?: boolean | undefined) => void
-          persistedState = migrations[i](persistedState)
+export type GetStore = GetState<Store>
-        }
 
-        return persistedState
+// types taken from zustand test examples:
+// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L584
+export const useStore = create<
+  Store,
+  SetState<Store>,
+  GetState<Store>,
+  Mutate<StoreApi<Store>, [['zustand/subscribeWithSelector', never], ['zustand/persist', Partial<Store>]]>
+>(
+  subscribeWithSelector(
+    persist(
+      immer((set, get) => ({
+        ...createSettingsSlice(set, get),
+        ...createLibrarySlice(set, get),
+        ...createTrackPlayerSlice(set, get),
+        ...createTrackPlayerMapSlice(set, get),
+        ...createCacheSlice(set, get),
+
+        hydrated: false,
+        setHydrated: hydrated =>
+          set(state => {
+            state.hydrated = hydrated
+          }),
+      })),
+      {
+        name: '@appStore',
+        version: DB_VERSION,
+        getStorage: () => AsyncStorage,
+        partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
+        onRehydrateStorage: _preState => {
+          return async (postState, _error) => {
+            await postState?.setActiveServer(postState.settings.activeServerId, true)
+            postState?.setHydrated(true)
+          }
+        },
+        migrate: (persistedState, version) => {
+          if (version > DB_VERSION) {
+            throw new Error('cannot migrate db on a downgrade, delete all data first')
+          }
+
+          for (let i = version; i < DB_VERSION; i++) {
+            persistedState = migrations[i](persistedState)
+          }
+
+          return persistedState
+        },
       },
-    },
+    ),
   ),
 )
+
+export const useStoreDeep = <U>(stateSelector: StateSelector<Store, U>) => useStore(stateSelector, equal)

app/state/trackplayer.ts

@@ -1,27 +1,10 @@
 import { NoClientError } from '@app/models/error'
-import { Song } from '@app/models/music'
+import { Song } from '@app/models/library'
+import { Progress, QueueContextType, TrackExt } from '@app/models/trackplayer'
 import PromiseQueue from '@app/util/PromiseQueue'
 import produce from 'immer'
-import TrackPlayer, { PlayerOptions, RepeatMode, State, Track } from 'react-native-track-player'
+import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
-import { GetState, SetState } from 'zustand'
+import { GetStore, SetStore } from './store'
-import { Store } from './store'
-
-export type TrackExt = Track & {
-  id: string
-  coverArt?: string
-  artistId?: string
-  albumId?: string
-  track?: number
-  discNumber?: number
-}
-
-export type Progress = {
-  position: number
-  duration: number
-  buffered: number
-}
-
-export type QueueContextType = 'album' | 'playlist' | 'song' | 'artist'
 
 export type TrackPlayerSlice = {
   queueName?: string
@@ -74,55 +57,26 @@ export type TrackPlayerSlice = {
   getPlayerOptions: () => PlayerOptions
 }
 
-export const selectTrackPlayer = {
-  queueName: (store: TrackPlayerSlice) => store.queueName,
-  setQueueName: (store: TrackPlayerSlice) => store.setQueueName,
-
-  queueContextType: (store: TrackPlayerSlice) => store.queueContextType,
-  setQueueContextType: (store: TrackPlayerSlice) => store.setQueueContextType,
-
-  queueContextId: (store: TrackPlayerSlice) => store.queueContextId,
-  setQueueContextId: (store: TrackPlayerSlice) => store.setQueueContextId,
-
-  shuffleOrder: (store: TrackPlayerSlice) => store.shuffleOrder,
-  shuffled: (store: TrackPlayerSlice) => !!store.shuffleOrder,
-  toggleShuffle: (store: TrackPlayerSlice) => store.toggleShuffle,
-
-  repeatMode: (store: TrackPlayerSlice) => store.repeatMode,
-  toggleRepeatMode: (store: TrackPlayerSlice) => store.toggleRepeatMode,
-
-  playerState: (store: TrackPlayerSlice) => store.playerState,
-  setPlayerState: (store: TrackPlayerSlice) => store.setPlayerState,
-
-  currentTrack: (store: TrackPlayerSlice) => store.currentTrack,
-  currentTrackIdx: (store: TrackPlayerSlice) => store.currentTrackIdx,
-  setCurrentTrackIdx: (store: TrackPlayerSlice) => store.setCurrentTrackIdx,
-
-  queue: (store: TrackPlayerSlice) => store.queue,
-  setQueue: (store: TrackPlayerSlice) => store.setQueue,
-
-  progress: (store: TrackPlayerSlice) => store.progress,
-  setProgress: (store: TrackPlayerSlice) => store.setProgress,
-
-  scrobbleTrack: (store: TrackPlayerSlice) => store.scrobbleTrack,
-
-  setNetState: (store: TrackPlayerSlice) => store.setNetState,
-  buildStreamUri: (store: TrackPlayerSlice) => store.buildStreamUri,
-
-  resetTrackPlayerState: (store: TrackPlayerSlice) => store.resetTrackPlayerState,
-}
-
 export const trackPlayerCommands = new PromiseQueue(1)
 
-export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerSlice => ({
+export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlayerSlice => ({
   queueName: undefined,
-  setQueueName: name => set({ queueName: name }),
+  setQueueName: name =>
+    set(state => {
+      state.queueName = name
+    }),
 
   queueContextType: undefined,
-  setQueueContextType: queueContextType => set({ queueContextType }),
+  setQueueContextType: queueContextType =>
+    set(state => {
+      state.queueContextType = queueContextType
+    }),
 
   queueContextId: undefined,
-  setQueueContextId: queueContextId => set({ queueContextId }),
+  setQueueContextId: queueContextId =>
+    set(state => {
+      state.queueContextId = queueContextId
+    }),
 
   shuffleOrder: undefined,
   toggleShuffle: async () => {
@@ -140,7 +94,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
         }
 
         await TrackPlayer.add(tracks)
-        set({ shuffleOrder })
+        set(state => {
+          state.shuffleOrder = shuffleOrder
+        })
       } else {
         const tracks = unshuffleTracks(queue, queueShuffleOrder)
 
@@ -155,11 +111,18 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
           await TrackPlayer.add(tracks)
         }
 
-        set({ shuffleOrder: undefined })
+        set(state => {
+          state.shuffleOrder = undefined
+        })
       }
 
-      set({ queue: await getQueue() })
+      const newQueue = await getQueue()
-      get().setCurrentTrackIdx(await getCurrentTrack())
+      const newCurrentTrackIdx = await getCurrentTrack()
+
+      set(state => {
+        state.queue = newQueue
+      })
+      get().setCurrentTrackIdx(newCurrentTrackIdx)
     })
   },
 
@@ -182,12 +145,17 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
       }
 
       await TrackPlayer.setRepeatMode(nextMode)
-      set({ repeatMode: nextMode })
+      set(state => {
+        state.repeatMode = nextMode
+      })
     })
   },
 
   playerState: State.None,
-  setPlayerState: playerState => set({ playerState }),
+  setPlayerState: playerState =>
+    set(state => {
+      state.playerState = playerState
+    }),
 
   currentTrack: undefined,
   currentTrackIdx: undefined,
@@ -201,7 +169,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
   },
 
   duckPaused: false,
-  setDuckPaused: duckPaused => set({ duckPaused }),
+  setDuckPaused: duckPaused =>
+    set(state => {
+      state.duckPaused = duckPaused
+    }),
 
   queue: [],
   setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
@@ -217,31 +188,27 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
 
       let queue = await get().mapSongstoTrackExts(songs)
 
-      try {
-        for (const t of queue) {
-          t.url = get().buildStreamUri(t.id)
-        }
-      } catch {
-        return
-      }
-
       if (shuffled) {
         const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
-        set({ shuffleOrder })
+        set(state => {
+          state.shuffleOrder = shuffleOrder
+        })
         queue = tracks
         playTrack = 0
       } else {
-        set({ shuffleOrder: undefined })
+        set(state => {
+          state.shuffleOrder = undefined
+        })
       }
 
       playTrack = playTrack || 0
 
       try {
-        set({
+        set(state => {
-          queue,
+          state.queue = queue
-          queueName: name,
+          state.queueName = name
-          queueContextType: contextType,
+          state.queueContextType = contextType
-          queueContextId: contextId,
+          state.queueContextId = contextId
         })
         get().setCurrentTrackIdx(playTrack)
 
@@ -264,7 +231,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
   },
 
   progress: { position: 0, duration: 0, buffered: 0 },
-  setProgress: progress => set({ progress }),
+  setProgress: progress =>
+    set(state => {
+      state.progress = progress
+    }),
 
   scrobbleTrack: async id => {
     const client = get().client
@@ -286,7 +256,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
     if (netState === get().netState) {
       return
     }
-    set({ netState })
+    set(state => {
+      state.netState = netState
+    })
     get().rebuildQueue()
   },
 
@@ -298,7 +270,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
       }
 
       const currentTrack = await getCurrentTrack()
-      const state = await getPlayerState()
+      const playerState = await getPlayerState()
       const position = (await TrackPlayer.getPosition()) || 0
 
       const queueName = get().queueName
@@ -316,11 +288,11 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
         return
       }
 
-      set({
+      set(state => {
-        queue,
+        state.queue = queue
-        queueName,
+        state.queueName = queueName
-        queueContextId,
+        state.queueContextType = queueContextType
-        queueContextType,
+        state.queueContextId = queueContextId
       })
       get().setCurrentTrackIdx(currentTrack)
 
@@ -332,7 +304,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
 
       await TrackPlayer.seekTo(position)
 
-      if (state === State.Playing || forcePlay) {
+      if (playerState === State.Playing || forcePlay) {
         await TrackPlayer.play()
       }
     })
@@ -346,23 +318,23 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
 
     return client.streamUri({
       id,
-      estimateContentLength: get().settings.estimateContentLength,
+      estimateContentLength: true,
       maxBitRate: get().netState === 'mobile' ? get().settings.maxBitrateMobile : get().settings.maxBitrateWifi,
     })
   },
 
   resetTrackPlayerState: () => {
-    set({
+    set(state => {
-      queueName: undefined,
+      state.queueName = undefined
-      queueContextType: undefined,
+      state.queueContextType = undefined
-      queueContextId: undefined,
+      state.queueContextId = undefined
-      shuffleOrder: undefined,
+      state.shuffleOrder = undefined
-      repeatMode: RepeatMode.Off,
+      state.repeatMode = RepeatMode.Off
-      playerState: State.None,
+      state.playerState = State.None
-      currentTrack: undefined,
+      state.currentTrack = undefined
-      currentTrackIdx: undefined,
+      state.currentTrackIdx = undefined
-      queue: [],
+      state.queue = []
-      progress: { position: 0, duration: 0, buffered: 0 },
+      state.progress = { position: 0, duration: 0, buffered: 0 }
     })
   },
 

app/state/trackplayermap.ts

@@ -1,8 +1,7 @@
-import { Song } from '@app/models/music'
+import { Song } from '@app/models/library'
+import { TrackExt } from '@app/models/trackplayer'
 import userAgent from '@app/util/userAgent'
-import { GetState, SetState } from 'zustand'
+import { GetStore, SetStore } from '@app/state/store'
-import { Store } from './store'
-import { TrackExt } from './trackplayer'
 
 export type TrackPlayerMapSlice = {
   mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
@@ -10,11 +9,7 @@ export type TrackPlayerMapSlice = {
   mapTrackExtToSong: (song: TrackExt) => Song
 }
 
-export const selectTrackPlayerMap = {
+export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
-  mapTrackExtToSong: (store: TrackPlayerMapSlice) => store.mapTrackExtToSong,
-}
-
-export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({
   mapSongtoTrackExt: async song => {
     let artwork = require('@res/fallback.png')
     if (song.coverArt) {
@@ -29,7 +24,7 @@ export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<St
       title: song.title,
       artist: song.artist || 'Unknown Artist',
       album: song.album || 'Unknown Album',
-      url: song.streamUri,
+      url: get().buildStreamUri(song.id),
       userAgent,
       artwork,
       coverArt: song.coverArt,

app/subsonic/api.ts

@@ -11,6 +11,7 @@ import {
   GetMusicDirectoryParams,
   GetPlaylistParams,
   GetPlaylistsParams,
+  GetSongParams,
   GetTopSongsParams,
   ScrobbleParams,
   Search3Params,
@@ -29,13 +30,14 @@ 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'
-import { DOMParser } from 'xmldom'
+import { DOMParser } from '@xmldom/xmldom'
 
 export class SubsonicApiError extends Error {
   method: string
@@ -63,30 +65,30 @@ export class SubsonicApiClient {
     this.username = server.username
 
     this.params = new URLSearchParams()
-    this.params.append('u', server.username)
+    this.params.append('u', encodeURIComponent(server.username))
 
     if (server.usePlainPassword) {
-      this.params.append('p', server.plainPassword)
+      this.params.append('p', encodeURIComponent(server.plainPassword))
     } else {
-      this.params.append('t', server.token)
+      this.params.append('t', encodeURIComponent(server.token))
-      this.params.append('s', server.salt)
+      this.params.append('s', encodeURIComponent(server.salt))
     }
 
-    this.params.append('v', '1.14.0')
+    this.params.append('v', '1.13.0')
     this.params.append('c', 'subtracks')
   }
 
   private buildUrl(method: string, params?: { [key: string]: any }): string {
-    let query = this.params.toString()
+    let urlParams = this.params.toString()
     if (params) {
-      const urlParams = this.obj2Params(params)
+      const methodParams = this.obj2Params(params)
-      if (urlParams) {
+      if (methodParams) {
-        query += '&' + urlParams.toString()
+        urlParams += '&' + methodParams.toString()
       }
     }
 
     // *.view was present on all method names in API 1.14.0 and earlier
-    return `${this.address}/rest/${method}.view?${query}`
+    return `${this.address}/rest/${method}.view?${urlParams}`
   }
 
   private async apiGetXml(method: string, params?: { [key: string]: any }): Promise<Document> {
@@ -121,7 +123,7 @@ export class SubsonicApiClient {
       if (obj[key] === undefined || obj[key] === null) {
         continue
       }
-      params.append(key, String(obj[key]))
+      params.append(key, encodeURIComponent(String(obj[key])))
     }
 
     return params
@@ -131,81 +133,72 @@ export class SubsonicApiClient {
   // System
   //
 
-  async ping(): Promise<SubsonicResponse<null>> {
+  async ping(): Promise<NullResponse> {
-    const xml = await this.apiGetXml('ping')
+    return new NullResponse(await this.apiGetXml('ping'))
-    return new SubsonicResponse<null>(xml, null)
   }
 
   //
   // Browsing
   //
 
-  async getArtists(): Promise<SubsonicResponse<GetArtistsResponse>> {
+  async getArtists(): Promise<GetArtistsResponse> {
-    const xml = await this.apiGetXml('getArtists')
+    return new GetArtistsResponse(await this.apiGetXml('getArtists'))
-    return new SubsonicResponse<GetArtistsResponse>(xml, new GetArtistsResponse(xml))
   }
 
-  async getIndexes(params?: GetIndexesParams): Promise<SubsonicResponse<GetIndexesResponse>> {
+  async getIndexes(params?: GetIndexesParams): Promise<GetIndexesResponse> {
-    const xml = await this.apiGetXml('getIndexes', params)
+    return new GetIndexesResponse(await this.apiGetXml('getIndexes', params))
-    return new SubsonicResponse<GetIndexesResponse>(xml, new GetIndexesResponse(xml))
   }
 
-  async getMusicDirectory(params: GetMusicDirectoryParams): Promise<SubsonicResponse<GetMusicDirectoryResponse>> {
+  async getMusicDirectory(params: GetMusicDirectoryParams): Promise<GetMusicDirectoryResponse> {
-    const xml = await this.apiGetXml('getMusicDirectory', params)
+    return new GetMusicDirectoryResponse(await this.apiGetXml('getMusicDirectory', params))
-    return new SubsonicResponse<GetMusicDirectoryResponse>(xml, new GetMusicDirectoryResponse(xml))
   }
 
-  async getAlbum(params: GetAlbumParams): Promise<SubsonicResponse<GetAlbumResponse>> {
+  async getAlbum(params: GetAlbumParams): Promise<GetAlbumResponse> {
-    const xml = await this.apiGetXml('getAlbum', params)
+    return new GetAlbumResponse(await this.apiGetXml('getAlbum', params))
-    return new SubsonicResponse<GetAlbumResponse>(xml, new GetAlbumResponse(xml))
   }
 
-  async getArtistInfo(params: GetArtistInfoParams): Promise<SubsonicResponse<GetArtistInfoResponse>> {
+  async getArtistInfo(params: GetArtistInfoParams): Promise<GetArtistInfoResponse> {
-    const xml = await this.apiGetXml('getArtistInfo', params)
+    return new GetArtistInfoResponse(await this.apiGetXml('getArtistInfo', params))
-    return new SubsonicResponse<GetArtistInfoResponse>(xml, new GetArtistInfoResponse(xml))
   }
 
-  async getArtistInfo2(params: GetArtistInfo2Params): Promise<SubsonicResponse<GetArtistInfo2Response>> {
+  async getArtistInfo2(params: GetArtistInfo2Params): Promise<GetArtistInfo2Response> {
-    const xml = await this.apiGetXml('getArtistInfo2', params)
+    return new GetArtistInfo2Response(await this.apiGetXml('getArtistInfo2', params))
-    return new SubsonicResponse<GetArtistInfo2Response>(xml, new GetArtistInfo2Response(xml))
   }
 
-  async getArtist(params: GetArtistParams): Promise<SubsonicResponse<GetArtistResponse>> {
+  async getArtist(params: GetArtistParams): Promise<GetArtistResponse> {
-    const xml = await this.apiGetXml('getArtist', params)
+    return new GetArtistResponse(await this.apiGetXml('getArtist', params))
-    return new SubsonicResponse<GetArtistResponse>(xml, new GetArtistResponse(xml))
   }
 
-  async getTopSongs(params: GetTopSongsParams): Promise<SubsonicResponse<GetTopSongsResponse>> {
+  async getTopSongs(params: GetTopSongsParams): Promise<GetTopSongsResponse> {
-    const xml = await this.apiGetXml('getTopSongs', params)
+    return new GetTopSongsResponse(await this.apiGetXml('getTopSongs', params))
-    return new SubsonicResponse<GetTopSongsResponse>(xml, new GetTopSongsResponse(xml))
+  }
+
+  async getSong(params: GetSongParams): Promise<GetSongResponse> {
+    return new GetSongResponse(await this.apiGetXml('getSong', params))
   }
 
   //
   // Album/song lists
   //
 
-  async getAlbumList(params: GetAlbumListParams): Promise<SubsonicResponse<GetAlbumListResponse>> {
+  async getAlbumList(params: GetAlbumListParams): Promise<GetAlbumListResponse> {
-    const xml = await this.apiGetXml('getAlbumList', params)
+    return new GetAlbumListResponse(await this.apiGetXml('getAlbumList', params))
-    return new SubsonicResponse<GetAlbumListResponse>(xml, new GetAlbumListResponse(xml))
   }
 
-  async getAlbumList2(params: GetAlbumList2Params): Promise<SubsonicResponse<GetAlbumList2Response>> {
+  async getAlbumList2(params: GetAlbumList2Params): Promise<GetAlbumList2Response> {
-    const xml = await this.apiGetXml('getAlbumList2', params)
+    return new GetAlbumList2Response(await this.apiGetXml('getAlbumList2', params))
-    return new SubsonicResponse<GetAlbumList2Response>(xml, new GetAlbumList2Response(xml))
   }
 
   //
   // Playlists
   //
 
-  async getPlaylists(params?: GetPlaylistsParams): Promise<SubsonicResponse<GetPlaylistsResponse>> {
+  async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
-    const xml = await this.apiGetXml('getPlaylists', params)
+    return new GetPlaylistsResponse(await this.apiGetXml('getPlaylists', params))
-    return new SubsonicResponse<GetPlaylistsResponse>(xml, new GetPlaylistsResponse(xml))
   }
 
-  async getPlaylist(params: GetPlaylistParams): Promise<SubsonicResponse<GetPlaylistResponse>> {
+  async getPlaylist(params: GetPlaylistParams): Promise<GetPlaylistResponse> {
-    const xml = await this.apiGetXml('getPlaylist', params)
+    return new GetPlaylistResponse(await this.apiGetXml('getPlaylist', params))
-    return new SubsonicResponse<GetPlaylistResponse>(xml, new GetPlaylistResponse(xml))
   }
 
   //
@@ -224,27 +217,23 @@ export class SubsonicApiClient {
   // Media annotation
   //
 
-  async scrobble(params: ScrobbleParams): Promise<SubsonicResponse<undefined>> {
+  async scrobble(params: ScrobbleParams): Promise<NullResponse> {
-    const xml = await this.apiGetXml('scrobble', params)
+    return new NullResponse(await this.apiGetXml('scrobble', params))
-    return new SubsonicResponse<undefined>(xml, undefined)
   }
 
-  async star(params: StarParams): Promise<SubsonicResponse<undefined>> {
+  async star(params: StarParams): Promise<NullResponse> {
-    const xml = await this.apiGetXml('star', params)
+    return new NullResponse(await this.apiGetXml('star', params))
-    return new SubsonicResponse<undefined>(xml, undefined)
   }
 
-  async unstar(params: StarParams): Promise<SubsonicResponse<undefined>> {
+  async unstar(params: StarParams): Promise<NullResponse> {
-    const xml = await this.apiGetXml('unstar', params)
+    return new NullResponse(await this.apiGetXml('unstar', params))
-    return new SubsonicResponse<undefined>(xml, undefined)
   }
 
   //
   // Searching
   //
 
-  async search3(params: Search3Params): Promise<SubsonicResponse<Search3Response>> {
+  async search3(params: Search3Params): Promise<Search3Response> {
-    const xml = await this.apiGetXml('search3', params)
+    return new Search3Response(await this.apiGetXml('search3', params))
-    return new SubsonicResponse<Search3Response>(xml, new Search3Response(xml))
   }
 }

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) {
+  constructor(xml: Document) {
-    this.data = data
     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 {
+export class GetArtistsResponse extends SubsonicResponse {
-  ignoredArticles: string
+  data: {
-  artists: ArtistID3Element[] = []
+    ignoredArticles: string
+    artists: ArtistID3Element[]
+  }
 
   constructor(xml: Document) {
-    this.ignoredArticles = xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') as string
+    super(xml)
 
-    const artistElements = xml.getElementsByTagName('artist')
+    this.data = {
-    for (let i = 0; i < artistElements.length; i++) {
+      ignoredArticles: xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') || '',
-      this.artists.push(new ArtistID3Element(artistElements[i]))
+      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
     }
   }
 }
 
-export class GetArtistResponse {
+export class GetArtistResponse extends SubsonicResponse {
-  artist: ArtistID3Element
+  data: {
-  albums: AlbumID3Element[] = []
+    artist: ArtistID3Element
+    albums: AlbumID3Element[]
+  }
 
   constructor(xml: Document) {
-    this.artist = new ArtistID3Element(xml.getElementsByTagName('artist')[0])
+    super(xml)
 
-    const albumElements = xml.getElementsByTagName('album')
+    this.data = {
-    for (let i = 0; i < albumElements.length; i++) {
+      artist: new ArtistID3Element(xml.getElementsByTagName('artist')[0]),
-      this.albums.push(new AlbumID3Element(albumElements[i]))
+      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
     }
   }
 }
 
-export class GetIndexesResponse {
+export class GetIndexesResponse extends SubsonicResponse {
-  ignoredArticles: string
+  data: {
-  lastModified: number
+    ignoredArticles: string
-  artists: ArtistElement[] = []
+    lastModified: number
+    artists: ArtistElement[]
+  }
 
   constructor(xml: Document) {
+    super(xml)
+
     const indexesElement = xml.getElementsByTagName('indexes')[0]
 
-    this.ignoredArticles = indexesElement.getAttribute('ignoredArticles') as string
+    this.data = {
-    this.lastModified = parseInt(indexesElement.getAttribute('lastModified') as string, 10)
+      ignoredArticles: indexesElement.getAttribute('ignoredArticles') || '',
-
+      lastModified: parseInt(indexesElement.getAttribute('lastModified') || '0', 10),
-    const artistElements = xml.getElementsByTagName('artist')
+      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistElement(i)),
-    for (let i = 0; i < artistElements.length; i++) {
-      this.artists.push(new ArtistElement(artistElements[i]))
     }
   }
 }
 
-export class GetArtistInfoResponse {
+export class GetArtistInfoResponse extends SubsonicResponse {
-  artistInfo: ArtistInfoElement
+  data: {
-
+    artistInfo: ArtistInfoElement
-  constructor(xml: Document) {
-    this.artistInfo = new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0])
   }
-}
-
-export class GetArtistInfo2Response {
-  artistInfo: ArtistInfo2Element
 
   constructor(xml: Document) {
-    this.artistInfo = new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0])
+    super(xml)
-  }
-}
 
-export class GetMusicDirectoryResponse {
+    this.data = {
-  directory: DirectoryElement
+      artistInfo: new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0]),
-  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]))
     }
   }
 }
 
-export class GetAlbumResponse {
+export class GetArtistInfo2Response extends SubsonicResponse {
-  album: AlbumID3Element
+  data: {
-  songs: ChildElement[] = []
+    artistInfo: ArtistInfo2Element
+  }
 
   constructor(xml: Document) {
-    this.album = new AlbumID3Element(xml.getElementsByTagName('album')[0])
+    super(xml)
 
-    const childElements = xml.getElementsByTagName('song')
+    this.data = {
-    for (let i = 0; i < childElements.length; i++) {
+      artistInfo: new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0]),
-      this.songs.push(new ChildElement(childElements[i]))
     }
   }
 }
 
-export class GetTopSongsResponse {
+export class GetMusicDirectoryResponse extends SubsonicResponse {
-  songs: ChildElement[] = []
+  data: {
+    directory: DirectoryElement
+    children: ChildElement[]
+  }
 
   constructor(xml: Document) {
-    const childElements = xml.getElementsByTagName('song')
+    super(xml)
-    for (let i = 0; i < childElements.length; i++) {
+
-      this.songs.push(new ChildElement(childElements[i]))
+    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> {
+class BaseGetAlbumListResponse<T> extends SubsonicResponse {
-  albums: T[] = []
+  data: {
+    albums: T[]
+  }
 
-  constructor(xml: Document, albumType: new (e: Element) => T) {
+  constructor(xml: Document, AlbumType: new (e: Element) => T) {
-    const albumElements = xml.getElementsByTagName('album')
+    super(xml)
-    for (let i = 0; i < albumElements.length; i++) {
+
-      this.albums.push(new albumType(albumElements[i]))
+    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 {
+export class GetPlaylistsResponse extends SubsonicResponse {
-  playlists: PlaylistElement[] = []
+  data: {
+    playlists: PlaylistElement[]
+  }
 
   constructor(xml: Document) {
-    const playlistElements = xml.getElementsByTagName('playlist')
+    super(xml)
-    for (let i = 0; i < playlistElements.length; i++) {
+
-      this.playlists.push(new PlaylistElement(playlistElements[i]))
+    this.data = {
+      playlists: Array.from(xml.getElementsByTagName('playlist')).map(i => new PlaylistElement(i)),
     }
   }
 }
 
-export class GetPlaylistResponse {
+export class GetPlaylistResponse extends SubsonicResponse {
-  playlist: PlaylistWithSongsElement
+  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 {
+export class Search3Response extends SubsonicResponse {
-  artists: ArtistID3Element[] = []
+  data: {
-  albums: AlbumID3Element[] = []
+    artists: ArtistID3Element[]
-  songs: ChildElement[] = []
+    albums: AlbumID3Element[]
+    songs: ChildElement[]
+  }
 
   constructor(xml: Document) {
-    const artistElements = xml.getElementsByTagName('artist')
+    super(xml)
-    for (let i = 0; i < artistElements.length; i++) {
-      this.artists.push(new ArtistID3Element(artistElements[i]))
-    }
 
-    const albumElements = xml.getElementsByTagName('album')
+    this.data = {
-    for (let i = 0; i < albumElements.length; i++) {
+      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
-      this.albums.push(new AlbumID3Element(albumElements[i]))
+      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
-    }
+      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
-
-    const songElements = xml.getElementsByTagName('song')
-    for (let i = 0; i < songElements.length; i++) {
-      this.songs.push(new ChildElement(songElements[i]))
     }
   }
 }

app/util/state.ts

@@ -0,0 +1,21 @@
+import { ById } from '@app/models/state'
+import merge from 'lodash.merge'
+
+export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
+  return collection.reduce((acc, value) => {
+    acc[value.id] = value
+    return acc
+  }, {} as ById<T>)
+}
+
+export function mergeById<T extends { [id: string]: unknown }>(object: T, source: T): void {
+  merge(object, source)
+}
+
+export function mapById<T>(object: ById<T>, ids: string[]): T[] {
+  return ids.map(id => object[id]).filter(a => a !== undefined)
+}
+
+export function mapId(entities: { id: string }[]): string[] {
+  return entities.map(e => e.id)
+}

index.js

@@ -5,7 +5,12 @@ import { enableScreens } from 'react-native-screens'
 enableScreens()
 
 import { LogBox } from 'react-native'
-LogBox.ignoreLogs(["The action 'POP_TO_TOP'"])
+LogBox.ignoreLogs([
+  "The action 'POP_TO_TOP'",
+  '`new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method.',
+  '`new NativeEventEmitter()` was called with a non-null argument without the required `removeListeners` method.',
+  "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!",
+])
 
 import { AppRegistry } from 'react-native'
 import App from '@app/App'

metadata/en-US/changelogs/6.txt

@@ -0,0 +1,5 @@
+## Fixed
+
+- Reduced required version of Subsonic API support from servers to 1.13.0 (#53)
+- Fixed autocorrect/autofill in server settings input (#60)
+- Fixed issues special characters in plain text passwords (and elsewhere) (#81)

metadata/en-US/changelogs/7.txt

@@ -0,0 +1,5 @@
+## Fixed
+
+- Reduced required version of Subsonic API support from servers to 1.13.0 (#53)
+- Fixed autocorrect/autofill in server settings input (#60)
+- Fixed issues special characters in plain text passwords (and elsewhere) (#81)

package.json

@@ -1,12 +1,13 @@
 {
   "name": "subtracks",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {
     "android": "react-native run-android",
     "android:release": "./android/gradlew -p android assembleRelease -PsignReleaseWithDebug=true && adb install -r android/app/build/outputs/apk/release/app-release.apk && adb shell am start -n com.subtracks/.MainActivity",
     "start": "react-native start",
+    "prepare-build": "scripts/prepare-exoplayer-ffmpeg.sh",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "license:npm": "yarn licenses generate-disclaimer --production | grep -v '^info\\s\"\\?fsevents' > android/app/src/main/assets/licenses/npm.txt",
@@ -26,19 +27,23 @@
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/material-top-tabs": "^5.3.15",
     "@react-navigation/native": "^5.9.4",
-    "@xmldom/xmldom": "^0.7.2",
+    "@types/react": "^17",
+    "@xmldom/xmldom": "^0.7.0",
+    "fast-deep-equal": "^3.1.3",
     "immer": "^9.0.6",
     "lodash.debounce": "^4.0.8",
+    "lodash.merge": "^4.6.2",
+    "lodash.pick": "^4.4.0",
     "md5": "^2.3.0",
-    "react": "17.0.1",
+    "react": "17.0.2",
-    "react-native": "0.64.1",
+    "react-native": "0.67.1",
     "react-native-fs": "^2.18.0",
-    "react-native-gesture-handler": "^1.10.3",
+    "react-native-gesture-handler": "^2.3.2",
     "react-native-get-random-values": "^1.7.0",
     "react-native-image-colors": "^1.3.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-popup-menu": "^0.15.11",
-    "react-native-reanimated": "^2.2.0",
+    "react-native-reanimated": "^2.3.1",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.0",
     "react-native-tab-view": "^2.16.0",
@@ -46,7 +51,7 @@
     "react-native-vector-icons": "^8.1.0",
     "react-native-webview": "^11.13.0",
     "uuid": "^8.3.2",
-    "zustand": "^3.5.7"
+    "zustand": "^3.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -54,19 +59,19 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/jest": "^26.0.23",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.pick": "^4.4.6",
     "@types/md5": "^2.3.0",
-    "@types/react-native": "^0.64.5",
     "@types/react-native-vector-icons": "^6.4.7",
     "@types/react-test-renderer": "^16.9.2",
     "@types/uuid": "^8.3.0",
-    "@types/xmldom": "^0.1.31",
     "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.14.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.64.0",
     "react-test-renderer": "17.0.1",
-    "typescript": "^3.8.3",
+    "typescript": "^4.6.2",
     "uri-scheme": "^1.0.91"
   },
   "resolutions": {

tsconfig.json

@@ -46,7 +46,7 @@
     "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    "skipLibCheck": false /* Skip type checking of declaration files. */,
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
 
     /* Source Map Options */
     // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
@@ -59,5 +59,5 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
     "resolveJsonModule": true
   },
-  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js", "submodules", "ndk"]
 }