changelog for 1.1.1

bump version 1.1.1
check if we paused on duck before playing again (#51 )
2026-11-11 15:29:15 +01:00 · 2021-12-15 14:08:37 +09:00 · 2021-12-15 14:05:51 +09:00 · 2021-12-15 13:59:58 +09:00 · 2021-12-13 09:34:22 +09:00 · 2021-12-06 11:05:18 +09:00
91 changed files with 4382 additions and 9469 deletions
@@ -1,2 +0,0 @@
-BUNDLE_PATH: "vendor/bundle"
-BUNDLE_FORCE_RUBY_PLATFORM: 1
@@ -1,6 +1,6 @@
 module.exports = {
  root: true,
-  ignorePatterns: ['submodules/**', 'ndk/**'],
+  ignorePatterns: ['submodules/**'],
  extends: '@react-native-community',
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn'],
@@ -4,26 +4,18 @@ on:
  push:
    paths-ignore:
      - assets/**
-      - .vscode/**
-      - .eslintrc.js
-      - .prettierrc.js
-      - BUILDING.md
      - README.md
      - LICENSE
    branches:
-      - main
+      - master
      - release/*
  pull_request:
    paths-ignore:
      - assets/**
-      - .vscode/**
-      - .eslintrc.js
-      - .prettierrc.js
-      - BUILDING.md
      - README.md
      - LICENSE
    branches:
-      - main
+      - master

 jobs:
  build:
@@ -32,29 +24,21 @@ 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 --network-concurrency 1
-
+          yarn install
      - run: |
          yarn lint --max-warnings 0
-
      - run: |
          yarn license
-
      - run: |
-          yarn prepare-build
-
+          scripts/prepare-exoplayer-ffmpeg.sh
+      - uses: gradle/wrapper-validation-action@v1
      - uses: gradle/gradle-build-action@v1
        with:
          distributions-cache-enabled: true
@@ -62,14 +46,11 @@ 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
@@ -12,36 +12,27 @@ 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 --network-concurrency 1
-
+          yarn install
      - run: |
          yarn license
-
      - run: |
-          yarn prepare-build
-
+          scripts/prepare-exoplayer-ffmpeg.sh
+      - 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 }}
@@ -53,14 +44,11 @@ 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 }}
@@ -72,11 +60,9 @@ 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
@@ -28,7 +28,6 @@ build/
 .gradle
 local.properties
 *.iml
-*.hprof

 # node.js
 #
@@ -1 +0,0 @@
-14
@@ -1,7 +1,7 @@
 module.exports = {
  bracketSpacing: true,
-  singleQuote: true,
  jsxBracketSameLine: true,
+  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 120,
@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
@@ -1,59 +0,0 @@
-# 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`
@@ -42,6 +42,3 @@ 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).
@@ -134,8 +134,8 @@ android {
        applicationId "com.subtracks"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 8
-        versionName '1.2.0'
+        versionCode 5
+        versionName '1.1.1'
    }
    splits {
        abi {
@@ -10,7 +10,3 @@
 # 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.** {*;}
@@ -1,36 +0,0 @@
-<?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>
@@ -3,7 +3,7 @@
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:textColor">#000000</item>
    </style>

 </resources>
@@ -2,25 +2,24 @@

 buildscript {
    ext {
-        buildToolsVersion = "30.0.2"
+        buildToolsVersion = "30.0.3"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
-        ndkVersion = "21.4.7075529"
+        ndkVersion = "20.1.5948944"

        // react-native-async-storage next
        kotlinVersion = '1.4.21'
    }
    repositories {
        google()
-        mavenCentral()
-        // jcenter()
+        jcenter()
        maven {
            url 'https://plugins.gradle.org/m2/'
        }
    }
    dependencies {
-        classpath("com.android.tools.build:gradle:4.2.2")
+        classpath("com.android.tools.build:gradle:4.1.0")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files

@@ -46,24 +45,9 @@ 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")
-            }
-        }
    }
 }
@@ -9,7 +9,7 @@

 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx1024m -XX:MaxPermSize=256m
+# Default value: -Xmx10248m -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.99.0
+FLIPPER_VERSION=0.75.1

 # react-native-async-storage next
 AsyncStorage_useNextStorage=true
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
@@ -4,18 +4,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.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: https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0
+  url: http://developer.android.com/tools/extras/support-library.html
 - artifact: androidx.appcompat:appcompat-resources:+
  name: appcompat-resources
  copyrightHolder: Original Author
@@ -46,12 +40,6 @@
  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
@@ -70,12 +58,6 @@
  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
@@ -207,19 +189,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/jetpack/androidx/releases/room#2.3.0
+  url: https://developer.android.com/topic/libraries/architecture/index.html
 - 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/jetpack/androidx/releases/room#2.3.0
+  url: https://developer.android.com/topic/libraries/architecture/index.html
 - 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/jetpack/androidx/releases/room#2.3.0
+  url: https://developer.android.com/topic/libraries/architecture/index.html
 - artifact: androidx.savedstate:savedstate:+
  name: savedstate
  copyrightHolder: Original Author
@@ -319,104 +301,62 @@
 - artifact: com.facebook.fresco:drawee:+
  name: drawee
  copyrightHolder: Original Author
-  license: MIT
+  license: MIT License
  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: MIT License
  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: MIT License
  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
-  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
+  license: MIT License
  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: MIT License
  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
-  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
+  license: MIT License
  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: MIT License
  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
-  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
+  license: MIT License
  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: MIT license
+  license: BSD 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/HEAD/LICENSE
+  licenseUrl: https://github.com/facebook/react-native/blob/master/LICENSE
  url: https://github.com/facebook/react-native
 - artifact: com.facebook.soloader:annotation:+
  name: annotation
@@ -554,21 +494,21 @@
 - artifact: com.squareup.okhttp3:okhttp-urlconnection:+
  name: okhttp-urlconnection
  copyrightHolder: Original Author
-  license: The Apache Software License, Version 2.0
-  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://square.github.io/okhttp/
+  license: Apache-2.0 License
+  licenseUrl: https://github.com/square/okhttp/blob/master/LICENSE.txt
+  url: https://github.com/square/okhttp
 - artifact: com.squareup.okhttp3:okhttp:+
  name: okhttp
  copyrightHolder: Original Author
-  license: The Apache Software License, Version 2.0
-  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://square.github.io/okhttp/
+  license: Apache-2.0 License
+  licenseUrl: https://github.com/square/okhttp/blob/master/LICENSE.txt
+  url: https://github.com/square/okhttp
 - artifact: com.squareup.okio:okio:+
  name: okio
  copyrightHolder: Original Author
-  license: The Apache Software License, Version 2.0
-  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://github.com/square/okio/
+  license: Apache-2.0 License
+  licenseUrl: https://github.com/square/okio/blob/master/LICENSE.txt
+  url: https://github.com/square/okio
 - artifact: javax.inject:javax.inject:+
  name: javax.inject
  copyrightHolder: Original Author
@@ -593,12 +533,6 @@
  license: The Apache Software License, Version 2.0
  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
  url: https://github.com/raphw/byte-buddy
- artifact: org.apache.commons:commons-lang3:+
-  name: commons-lang3
-  copyrightHolder: Original Author
-  license: The Apache Software License, Version 2.0
-  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: http://commons.apache.org/lang/
 - artifact: org.checkerframework:checker-compat-qual:+
  name: checker-compat-qual
  copyrightHolder: Original Author
@@ -629,30 +563,12 @@
  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
@@ -5,37 +5,27 @@ 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'
-import { QueryClientProvider } from 'react-query'
-import queryClient from './queryClient'

 const Debug = () => {
-  const currentTrackTitle = useStore(store => store.currentTrack?.title)
-  console.log('currentTrackTitle', currentTrackTitle)
+  const currentTrack = useStore(selectTrackPlayer.currentTrack)
+  console.log(currentTrack?.title)
  return <></>
 }

-const App = () => {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <MenuProvider backHandler={true}>
-        <View style={styles.appContainer}>
-          <StatusBar
-            animated={true}
-            backgroundColor={'rgba(0, 0, 0, 0.3)'}
-            barStyle={'light-content'}
-            translucent={true}
-          />
-          <SplashPage>
-            <ProgressHook />
-            <Debug />
-            <RootNavigator />
-          </SplashPage>
-        </View>
-      </MenuProvider>
-    </QueryClientProvider>
-  )
-}
+const App = () => (
+  <MenuProvider backHandler={true}>
+    <View style={styles.appContainer}>
+      <StatusBar animated={true} backgroundColor={'rgba(0, 0, 0, 0.3)'} barStyle={'light-content'} translucent={true} />
+      <SplashPage>
+        <ProgressHook />
+        <Debug />
+        <RootNavigator />
+      </SplashPage>
+    </View>
+  </MenuProvider>
+)

 const styles = StyleSheet.create({
  appContainer: {
@@ -37,7 +37,7 @@ function BackgroundHeaderFlatList<ItemT>(props: BackgroundHeaderFlatListProp<Ite
        </props.BackgroundComponent>
      }
      ListHeaderComponentStyle={[headerStyle]}
-      ListEmptyComponent={props.ListEmptyComponent || <NothingHere style={styles.nothing} />}
+      ListEmptyComponent={<NothingHere style={styles.nothing} />}
    />
  )
 }
@@ -1,6 +1,8 @@
 import PressableOpacity from '@app/components/PressableOpacity'
-import { useStar } from '@app/hooks/query'
-import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
+import { useStarred } from '@app/hooks/music'
+import { AlbumListItem, Artist, Song, StarrableItemType } from '@app/models/music'
+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'
@@ -10,8 +12,9 @@ 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

@@ -22,7 +25,6 @@ type ContextMenuProps = {
  triggerTouchableStyle?: StyleProp<ViewStyle>
  onPress?: () => any
  triggerOnLongPress?: boolean
-  disabled?: boolean
 }

 type InternalContextMenuProps = ContextMenuProps & {
@@ -40,7 +42,6 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
  menuOptions,
  children,
  triggerOnLongPress,
-  disabled,
 }) => {
  menuStyle = menuStyle || { flex: 1 }
  triggerWrapperStyle = triggerWrapperStyle || { flex: 1 }
@@ -49,12 +50,11 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
  return (
    <Menu renderer={SlideInMenu} style={menuStyle}>
      <MenuTrigger
-        disabled={disabled}
        triggerOnLongPress={triggerOnLongPress === undefined ? true : triggerOnLongPress}
        customStyles={{
          triggerOuterWrapper: triggerOuterWrapperStyle,
          triggerWrapper: triggerWrapperStyle,
-          triggerTouchable: { style: triggerTouchableStyle, disabled },
+          triggerTouchable: { style: triggerTouchableStyle },
          TriggerTouchableComponent: PressableOpacity,
        }}
        onAlternativeAction={onPress}>
@@ -120,24 +120,9 @@ const MenuHeader = React.memo<{
 }>(({ coverArt, artistId, title, subtitle }) => (
  <View style={styles.menuHeader}>
    {artistId ? (
-      <CoverArt
-        type="artist"
-        artistId={artistId}
-        style={styles.coverArt}
-        resizeMode="cover"
-        round={true}
-        size="thumbnail"
-        fadeDuration={0}
-      />
+      <CoverArt type="artist" artistId={artistId} style={styles.coverArt} resizeMode={'cover'} round={true} />
    ) : (
-      <CoverArt
-        type="cover"
-        coverArt={coverArt}
-        style={styles.coverArt}
-        resizeMode="cover"
-        size="thumbnail"
-        fadeDuration={0}
-      />
+      <CoverArt type="cover" coverArt={coverArt} style={styles.coverArt} resizeMode={'cover'} />
    )}
    <View style={styles.menuHeaderText}>
      <Text numberOfLines={1} style={styles.menuTitle}>
@@ -159,13 +144,14 @@ const OptionStar = React.memo<{
  type: StarrableItemType
  additionalText?: string
 }>(({ id, type, additionalText: text }) => {
-  const { query, toggle } = useStar(id, type)
+  const starred = useStarred(id, type)
+  const setStarred = useStore(selectMusic.starItem)

  return (
    <ContextMenuIconTextOption
-      IconComponentRaw={<Star starred={!!query.data} size={26} />}
-      text={(query.data ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
-      onSelect={() => toggle.mutate()}
+      IconComponentRaw={<Star starred={starred} size={26} />}
+      text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
+      onSelect={() => setStarred(id, type, starred)}
    />
  )
 })
@@ -217,7 +203,7 @@ const OptionViewAlbum = React.memo<{
 // ))

 export type AlbumContextPressableProps = ContextMenuProps & {
-  album: Album
+  album: AlbumListItem
 }

 export const AlbumContextPressable: React.FC<AlbumContextPressableProps> = props => {
@@ -1,5 +1,5 @@
-import { useQueryArtistArtPath, useQueryCoverArtPath } from '@app/hooks/query'
-import { CacheImageSize } from '@app/models/cache'
+import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
+import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
 import {
@@ -18,8 +18,7 @@ type BaseProps = {
  imageStyle?: ImageStyle
  resizeMode?: ImageResizeMode
  round?: boolean
-  size: CacheImageSize
-  fadeDuration?: number
+  size?: CacheImageSize
 }

 type ArtistCoverArtProps = BaseProps & {
@@ -32,54 +31,47 @@ type CoverArtProps = BaseProps & {
  coverArt?: string
 }

-type ImageSourceProps = BaseProps & {
-  data?: string
-  isFetching: boolean
-  isExistingFetching: boolean
-}
-
-const ImageSource = React.memo<ImageSourceProps>(
-  ({ style, imageStyle, resizeMode, data, isFetching, isExistingFetching, fadeDuration }) => {
+const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
+  ({ cache, style, imageStyle, resizeMode }) => {
    const [error, setError] = useState(false)

    let source: ImageSourcePropType
-    if (!error && data) {
-      source = { uri: `file://${data}` }
+    if (!error && cache?.file && !cache?.request?.promise) {
+      source = { uri: `file://${cache.file.path}`, cache: 'reload' }
    } else {
      source = require('@res/fallback.png')
    }

    return (
      <>
-        {isExistingFetching ? (
-          <View style={{ height: style?.height, width: style?.width }} />
-        ) : (
-          <Image
-            source={source}
-            fadeDuration={fadeDuration === undefined ? 250 : fadeDuration}
-            resizeMode={resizeMode || 'contain'}
-            style={[{ height: style?.height, width: style?.width }, imageStyle]}
-            onError={() => setError(true)}
-          />
-        )}
-        {isFetching && (
-          <ActivityIndicator animating={true} size="large" color={colors.accent} style={styles.indicator} />
-        )}
+        <Image
+          source={source}
+          fadeDuration={150}
+          resizeMode={resizeMode || 'contain'}
+          style={[{ height: style?.height, width: style?.width }, imageStyle]}
+          onError={() => setError(true)}
+        />
+        <ActivityIndicator
+          animating={!!cache?.request?.promise}
+          size="large"
+          color={colors.accent}
+          style={styles.indicator}
+        />
      </>
    )
  },
 )

 const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
-  const { data, isFetching, isExistingFetching } = useQueryArtistArtPath(props.artistId, props.size)
+  const cache = useArtistArtFile(props.artistId, props.size)

-  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
+  return <ImageSource cache={cache} {...props} imageStyle={{ ...styles.artistImage, ...props.imageStyle }} />
 })

 const CoverArtImage = React.memo<CoverArtProps>(props => {
-  const { data, isFetching, isExistingFetching } = useQueryCoverArtPath(props.coverArt, props.size)
+  const cache = useCoverArtFile(props.coverArt, props.size)

-  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
+  return <ImageSource cache={cache} {...props} />
 })

 const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {
@@ -4,7 +4,6 @@ import dimensions from '@app/styles/dimensions'
 import React, { ForwardedRef, PropsWithChildren } from 'react'
 import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
 import Animated from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'

 export type GradientScrollViewProps = PropsWithChildren<
  Animated.AnimateProps<ScrollViewProps> & {
@@ -14,9 +13,8 @@ export type GradientScrollViewProps = PropsWithChildren<

 const GradientScrollView = React.forwardRef<ScrollView, GradientScrollViewProps>((props, ref) => {
  const layout = useWindowDimensions()
-  const paddingTop = useSafeAreaInsets().top

-  const minHeight = layout.height - (dimensions.header + paddingTop + dimensions.bottom())
+  const minHeight = layout.height - (dimensions.top() + dimensions.bottom())

  return (
    <Animated.ScrollView
@@ -1,18 +1,17 @@
-import { Album, Song } from '@app/models/library'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/core'
-import { ReactComponentLike } from 'prop-types'
 import React, { useCallback } from 'react'
-import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { View, StatusBar, Text, StyleSheet, ViewStyle } from 'react-native'
 import Animated from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import IconMat from 'react-native-vector-icons/MaterialIcons'
-import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu'
 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'

-export type HeaderContextItem = Song | Album
+export type HeaderContextItem = Song | AlbumListItem

 const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
  const moreIcon = <IconMat name="more-vert" color="white" size={25} />
@@ -49,12 +48,11 @@ const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) =

 const HeaderBar = React.memo<{
  title?: string
-  headerStyle?: Animated.AnimateStyle<ViewStyle> | Animated.AnimateStyle<ViewStyle>[]
+  headerStyle?: Animated.AnimatedStyleProp<ViewStyle> | Animated.AnimatedStyleProp<ViewStyle>[]
  HeaderCenter?: ReactComponentLike
  contextItem?: HeaderContextItem
 }>(({ title, headerStyle, HeaderCenter, contextItem }) => {
  const navigation = useNavigation()
-  const top = useSafeAreaInsets().top

  const back = useCallback(() => {
    navigation.goBack()
@@ -63,7 +61,7 @@ const HeaderBar = React.memo<{
  const _headerStyle = Array.isArray(headerStyle) ? headerStyle : [headerStyle]

  return (
-    <Animated.View style={[styles.container, { paddingTop: top, height: dimensions.header + top }, ..._headerStyle]}>
+    <Animated.View style={[styles.container, ..._headerStyle]}>
      <PressableOpacity onPress={back} style={styles.icons}>
        <IconMat name="arrow-back" color="white" size={25} />
      </PressableOpacity>
@@ -83,6 +81,8 @@ const HeaderBar = React.memo<{

 const styles = StyleSheet.create({
  container: {
+    height: dimensions.top(),
+    paddingTop: StatusBar.currentHeight,
    backgroundColor: colors.gradient.high,
    width: '100%',
    flexDirection: 'row',
@@ -3,13 +3,11 @@ import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import React from 'react'
 import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'

 const ImageGradientScrollView: React.FC<ScrollViewProps & ImageGradientBackgroundProps> = props => {
  const layout = useWindowDimensions()
-  const paddingTop = useSafeAreaInsets().top

-  const minHeight = layout.height - (dimensions.header + paddingTop + dimensions.bottom())
+  const minHeight = layout.height - (dimensions.top() + dimensions.bottom())

  return (
    <ScrollView
@@ -1,5 +1,8 @@
+import { useStarred } from '@app/hooks/music'
 import { useIsPlaying } from '@app/hooks/trackplayer'
-import { Album, Artist, ListableItem, Song } from '@app/models/library'
+import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music'
+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'
@@ -10,8 +13,7 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
 import CoverArt from './CoverArt'
 import PressableOpacity from './PressableOpacity'
-import { PressableStar } from './Star'
-import equal from 'fast-deep-equal/es6/react'
+import Star from './Star'

 const TitleTextSong = React.memo<{
  contextId?: string
@@ -54,9 +56,9 @@ const ListItem: React.FC<{
  listStyle?: 'big' | 'small'
  subtitle?: string
  style?: StyleProp<ViewStyle>
-  disabled?: boolean
-}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style, disabled }) => {
+}> = ({ 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'
@@ -66,13 +68,13 @@ const ListItem: React.FC<{
  if (!onPress) {
    switch (item.itemType) {
      case 'album':
-        onPress = () => navigation.navigate('album', { id: item.id, title: item.name, album: item })
+        onPress = () => navigation.navigate('album', { id: item.id, title: item.name })
        break
      case 'artist':
        onPress = () => navigation.navigate('artist', { id: item.id, title: item.name })
        break
      case 'playlist':
-        onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name, playlist: item })
+        onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name })
        break
    }
  }
@@ -91,43 +93,35 @@ const ListItem: React.FC<{

  const itemPressable = useCallback(
    ({ children }) => (
-      <PressableOpacity onPress={onPress} style={styles.item} disabled={disabled}>
+      <PressableOpacity onPress={onPress} style={styles.item}>
        {children}
      </PressableOpacity>
    ),
-    [disabled, onPress],
+    [onPress],
  )
  const albumPressable = useCallback(
    ({ children }) => (
-      <AlbumContextPressable
-        album={item as Album}
-        onPress={onPress}
-        triggerWrapperStyle={styles.item}
-        disabled={disabled}>
+      <AlbumContextPressable album={item as AlbumListItem} onPress={onPress} triggerWrapperStyle={styles.item}>
        {children}
      </AlbumContextPressable>
    ),
-    [disabled, item, onPress],
+    [item, onPress],
  )
  const songPressable = useCallback(
    ({ children }) => (
-      <SongContextPressable song={item as Song} onPress={onPress} triggerWrapperStyle={styles.item} disabled={disabled}>
+      <SongContextPressable song={item as Song} onPress={onPress} triggerWrapperStyle={styles.item}>
        {children}
      </SongContextPressable>
    ),
-    [disabled, item, onPress],
+    [item, onPress],
  )
  const artistPressable = useCallback(
    ({ children }) => (
-      <ArtistContextPressable
-        artist={item as Artist}
-        onPress={onPress}
-        triggerWrapperStyle={styles.item}
-        disabled={disabled}>
+      <ArtistContextPressable artist={item as Artist} onPress={onPress} triggerWrapperStyle={styles.item}>
        {children}
      </ArtistContextPressable>
    ),
-    [disabled, item, onPress],
+    [item, onPress],
  )

  let PressableComponent = itemPressable
@@ -139,6 +133,13 @@ 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} />
@@ -150,20 +151,9 @@ 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}
-        size="thumbnail"
-      />
-    )
+    coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />
  } else {
-    coverArt = (
-      <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} size="thumbnail" />
-    )
+    coverArt = <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} />
  }

  return (
@@ -188,8 +178,10 @@ const ListItem: React.FC<{
        </View>
      </PressableComponent>
      <View style={styles.controls}>
-        {showStar && item.itemType !== 'playlist' && (
-          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} disabled={disabled} />
+        {showStar && (
+          <PressableOpacity onPress={toggleStarred} style={styles.controlItem}>
+            <Star size={26} starred={starred} />
+          </PressableOpacity>
        )}
      </View>
    </View>
@@ -267,4 +259,4 @@ const bigStyles = StyleSheet.create({
  },
 })

-export default React.memo(ListItem, equal)
+export default React.memo(ListItem)
@@ -1,5 +1,7 @@
 import Button from '@app/components/Button'
-import { Song } from '@app/models/library'
+import { Song } from '@app/models/music'
+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'
@@ -9,12 +11,13 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
 const ListPlayerControls = React.memo<{
  songs: Song[]
  typeName: string
+  queueName: string
+  queueContextType: QueueContextType
+  queueContextId: string
  style?: StyleProp<ViewStyle>
-  play: () => void
-  shuffle: () => void
-  disabled?: boolean
-}>(({ typeName, style, play, shuffle, disabled }) => {
+}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
  const [downloaded, setDownloaded] = useState(false)
+  const setQueue = useStore(selectTrackPlayer.setQueue)

  return (
    <View style={[styles.controls, style]}>
@@ -31,10 +34,13 @@ const ListPlayerControls = React.memo<{
        </Button>
      </View>
      <View style={styles.controlsCenter}>
-        <Button title={`Play ${typeName}`} disabled={disabled} onPress={play} />
+        <Button
+          title={`Play ${typeName}`}
+          onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
+        />
      </View>
      <View style={styles.controlsSide}>
-        <Button disabled={disabled} onPress={shuffle}>
+        <Button onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
          <Icon name="shuffle" size={26} color="white" />
        </Button>
      </View>
@@ -2,6 +2,7 @@ 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'
@@ -11,8 +12,7 @@ import { State } from 'react-native-track-player'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'

 const ProgressBar = React.memo(() => {
-  const position = useStore(store => store.progress.position)
-  const duration = useStore(store => store.progress.duration)
+  const { position, duration } = useStore(selectTrackPlayer.progress)

  let progress = 0
  if (duration > 0) {
@@ -41,7 +41,7 @@ const progressStyles = StyleSheet.create({
 })

 const Controls = React.memo(() => {
-  const state = useStore(store => store.playerState)
+  const state = useStore(selectTrackPlayer.playerState)
  const play = usePlay()
  const pause = usePause()

@@ -78,12 +78,9 @@ const Controls = React.memo(() => {

 const NowPlayingBar = React.memo(() => {
  const navigation = useNavigation()
-  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 track = useStore(selectTrackPlayer.currentTrack)

-  const displayStyle: ViewStyle = { display: currentTrackExists ? 'flex' : 'none' }
+  const displayStyle: ViewStyle = { display: track ? 'flex' : 'none' }

  return (
    <Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}>
@@ -92,16 +89,14 @@ const NowPlayingBar = React.memo(() => {
        <CoverArt
          type="cover"
          style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
-          coverArt={coverArt}
-          size="thumbnail"
-          fadeDuration={0}
+          coverArt={track?.coverArt}
        />
        <View style={styles.detailsContainer}>
          <Text numberOfLines={1} style={styles.detailsTitle}>
-            {title}
+            {track?.title}
          </Text>
          <Text numberOfLines={1} style={styles.detailsAlbum}>
-            {artist}
+            {track?.artist}
          </Text>
        </View>
        <Controls />
@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react'
-import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, StyleSheet } from 'react-native'
+import React, { useCallback, useEffect, useState } from 'react'
+import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, ViewStyle, StyleSheet } from 'react-native'

 type PressableOpacityProps = PressableProps & {
  ripple?: boolean
@@ -9,8 +9,13 @@ type PressableOpacityProps = PressableProps & {

 const PressableOpacity: React.FC<PressableOpacityProps> = props => {
  const [opacity, setOpacity] = useState(1)
+  const [disabledStyle, setDisabledStyle] = useState<ViewStyle>({})
  const [dimensions, setDimensions] = useState<LayoutRectangle | undefined>(undefined)

+  useEffect(() => {
+    props.disabled === true ? setDisabledStyle({ opacity: 0.3 }) : setDisabledStyle({})
+  }, [props.disabled])
+
  props = {
    ...props,
    unstable_pressDelay: props.unstable_pressDelay === undefined ? 60 : props.unstable_pressDelay,
@@ -50,8 +55,7 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
  return (
    <Pressable
      {...props}
-      // eslint-disable-next-line react-native/no-inline-styles
-      style={[styles.pressable, props.style as any, { opacity }, props.disabled ? { opacity: 0.3 } : {}]}
+      style={[styles.pressable, props.style as any, { opacity }, disabledStyle]}
      android_ripple={
        props.ripple
          ? {
@@ -1,10 +1,11 @@
 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(store => store.playerState)
-  const setProgress = useStore(store => store.setProgress)
+  const playerState = useStore(selectTrackPlayer.playerState)
+  const setProgress = useStore(selectTrackPlayer.setProgress)
  const progress = useProgress(250)

  useEffect(() => {
@@ -1,11 +1,8 @@
-import { useStar } from '@app/hooks/query'
 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'

-export const Star = React.memo<{
+const Star = React.memo<{
  starred: boolean
  size: number
 }>(({ starred, size }) => {
@@ -14,18 +11,4 @@ export const Star = React.memo<{
  )
 })

-export const PressableStar = React.memo<{
-  id: string
-  type: 'album' | 'artist' | 'song'
-  size: number
-  style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
-  disabled?: boolean
-}>(({ id, type, size, style, disabled }) => {
-  const { query, toggle } = useStar(id, type)
-
-  return (
-    <PressableOpacity onPress={() => toggle.mutate()} style={style} disabled={disabled}>
-      <Star size={size} starred={!!query.data} />
-    </PressableOpacity>
-  )
-})
+export default Star
@@ -0,0 +1,88 @@
+import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
+import { ArtistInfo } from '@app/models/music'
+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
+        if (!activeServerId) {
+          return
+        }
+
+        return store.cacheFiles[activeServerId][key][id]
+      },
+      [key, id],
+    ),
+  )
+  const request = useStore(
+    useCallback(
+      (store: Store) => {
+        const activeServerId = store.settings.activeServer
+        if (!activeServerId) {
+          return
+        }
+
+        return store.cacheRequests[activeServerId][key][id]
+      },
+      [key, id],
+    ),
+  )
+
+  return { file, request }
+}
+
+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 cacheItem = useStore(selectCache.cacheItem)
+
+  useEffect(() => {
+    if (!file && client) {
+      cacheItem(type, coverArt, () =>
+        client.getCoverArtUri({
+          id: coverArt,
+          size: type === 'coverArtThumb' ? '256' : undefined,
+        }),
+      )
+    }
+    // intentionally leaving file out so it doesn't re-render if the request fails
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cacheItem, client, coverArt, type])
+
+  return { file, request }
+}
+
+export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
+  const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
+  const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
+  const { file, request } = useFileRequest(type, artistId)
+  const cacheItem = useStore(selectCache.cacheItem)
+
+  useEffect(() => {
+    if (!file) {
+      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])
+
+  return { file, request }
+}
@@ -1,305 +0,0 @@
-import { CacheItemTypeKey } from '@app/models/cache'
-import { Album, AlbumCoverArt, Playlist, Song } from '@app/models/library'
-import { mapAlbum, mapArtist, mapArtistInfo, mapPlaylist, mapSong } from '@app/models/map'
-import queryClient from '@app/queryClient'
-import { useStore } from '@app/state/store'
-import { GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
-import { cacheDir } from '@app/util/fs'
-import { mapCollectionById } from '@app/util/state'
-import userAgent from '@app/util/userAgent'
-import cd from 'content-disposition'
-import mime from 'mime-types'
-import path from 'path'
-import ReactNativeBlobUtil, { FetchBlobResponse } from 'react-native-blob-util'
-import RNFS from 'react-native-fs'
-import qk from './queryKeys'
-
-export const useClient = () => {
-  const client = useStore(store => store.client)
-
-  return () => {
-    if (!client) {
-      throw new Error('no client!')
-    }
-
-    return client
-  }
-}
-
-function cacheStarredData<T extends { id: string; starred?: undefined | any }>(item: T) {
-  queryClient.setQueryData<boolean>(qk.starredItems(item.id), !!item.starred)
-}
-
-function cacheAlbumCoverArtData<T extends { id: string; coverArt?: string }>(item: T) {
-  queryClient.setQueryData<AlbumCoverArt>(qk.albumCoverArt(item.id), { albumId: item.id, coverArt: item.coverArt })
-}
-
-export const useFetchArtists = () => {
-  const client = useClient()
-
-  return async () => {
-    const res = await client().getArtists()
-
-    res.data.artists.forEach(cacheStarredData)
-
-    return mapCollectionById(res.data.artists, mapArtist)
-  }
-}
-
-export const useFetchArtist = () => {
-  const client = useClient()
-
-  return async (id: string) => {
-    const res = await client().getArtist({ id })
-
-    cacheStarredData(res.data.artist)
-    res.data.albums.forEach(cacheStarredData)
-
-    res.data.albums.forEach(cacheAlbumCoverArtData)
-
-    return {
-      artist: mapArtist(res.data.artist),
-      albums: res.data.albums.map(mapAlbum),
-    }
-  }
-}
-
-export const useFetchArtistInfo = () => {
-  const client = useClient()
-
-  return async (id: string) => {
-    const res = await client().getArtistInfo2({ id })
-    return mapArtistInfo(id, res.data.artistInfo)
-  }
-}
-
-export const useFetchArtistTopSongs = () => {
-  const client = useClient()
-
-  return async (artistName: string) => {
-    const res = await client().getTopSongs({ artist: artistName })
-
-    res.data.songs.forEach(cacheStarredData)
-
-    return res.data.songs.map(mapSong)
-  }
-}
-
-export const useFetchPlaylists = () => {
-  const client = useClient()
-
-  return async () => {
-    const res = await client().getPlaylists()
-    return mapCollectionById(res.data.playlists, mapPlaylist)
-  }
-}
-
-export const useFetchPlaylist = () => {
-  const client = useClient()
-
-  return async (id: string): Promise<{ playlist: Playlist; songs?: Song[] }> => {
-    const res = await client().getPlaylist({ id })
-
-    res.data.playlist.songs.forEach(cacheStarredData)
-
-    return {
-      playlist: mapPlaylist(res.data.playlist),
-      songs: res.data.playlist.songs.map(mapSong),
-    }
-  }
-}
-
-export const useFetchAlbum = () => {
-  const client = useClient()
-
-  return async (id: string): Promise<{ album: Album; songs?: Song[] }> => {
-    const res = await client().getAlbum({ id })
-
-    cacheStarredData(res.data.album)
-    res.data.songs.forEach(cacheStarredData)
-
-    cacheAlbumCoverArtData(res.data.album)
-
-    return {
-      album: mapAlbum(res.data.album),
-      songs: res.data.songs.map(mapSong),
-    }
-  }
-}
-
-export const useFetchAlbumList = () => {
-  const client = useClient()
-
-  return async (size: number, offset: number, type: GetAlbumList2TypeBase) => {
-    const res = await client().getAlbumList2({ size, offset, type })
-
-    res.data.albums.forEach(cacheStarredData)
-
-    res.data.albums.forEach(cacheAlbumCoverArtData)
-
-    return res.data.albums.map(mapAlbum)
-  }
-}
-
-export const useFetchSong = () => {
-  const client = useClient()
-
-  return async (id: string) => {
-    const res = await client().getSong({ id })
-
-    cacheStarredData(res.data.song)
-
-    return mapSong(res.data.song)
-  }
-}
-
-export const useFetchSearchResults = () => {
-  const client = useClient()
-
-  return async (params: Search3Params) => {
-    const res = await client().search3(params)
-
-    res.data.artists.forEach(cacheStarredData)
-    res.data.albums.forEach(cacheStarredData)
-    res.data.songs.forEach(cacheStarredData)
-
-    res.data.albums.forEach(cacheAlbumCoverArtData)
-
-    return {
-      artists: res.data.artists.map(mapArtist),
-      albums: res.data.albums.map(mapAlbum),
-      songs: res.data.songs.map(mapSong),
-    }
-  }
-}
-
-export const useFetchStar = () => {
-  const client = useClient()
-
-  return async (params: StarParams) => {
-    await client().star(params)
-    return
-  }
-}
-
-export const useFetchUnstar = () => {
-  const client = useClient()
-
-  return async (params: StarParams) => {
-    await client().unstar(params)
-    return
-  }
-}
-
-export type FetchExisingFileOptions = {
-  itemType: CacheItemTypeKey
-  itemId: string
-}
-
-export const useFetchExistingFile: () => (options: FetchExisingFileOptions) => Promise<string | undefined> = () => {
-  const serverId = useStore(store => store.settings.activeServerId)
-
-  return async ({ itemType, itemId }) => {
-    const fileDir = cacheDir(serverId, itemType, itemId)
-    try {
-      const dir = await RNFS.readDir(fileDir)
-      console.log('existing file:', dir[0].path)
-      return dir[0].path
-    } catch {}
-  }
-}
-
-function assertMimeType(expected?: string, actual?: string) {
-  expected = expected?.toLowerCase()
-  actual = actual?.toLowerCase()
-
-  if (!expected || expected === actual) {
-    return
-  }
-
-  if (!expected.includes(';')) {
-    actual = actual?.split(';')[0]
-  }
-
-  if (!expected.includes('/')) {
-    actual = actual?.split('/')[0]
-  }
-
-  if (expected !== actual) {
-    throw new Error(`Request does not satisfy expected content type. Expected: ${expected} Actual: ${actual}`)
-  }
-}
-
-export type FetchFileOptions = FetchExisingFileOptions & {
-  fromUrl: string
-  useCacheBuster?: boolean
-  expectedContentType?: string
-  progress?: (received: number, total: number) => void
-}
-
-export const useFetchFile: () => (options: FetchFileOptions) => Promise<string> = () => {
-  const serverId = useStore(store => store.settings.activeServerId)
-
-  return async ({ itemType, itemId, fromUrl, useCacheBuster, expectedContentType, progress }) => {
-    useCacheBuster = useCacheBuster === undefined ? true : useCacheBuster
-
-    const fileDir = cacheDir(serverId, itemType, itemId)
-    const filePathNoExt = path.join(fileDir, useCacheBuster ? useStore.getState().settings.cacheBuster : itemType)
-
-    try {
-      await RNFS.unlink(fileDir)
-    } catch {}
-
-    const headers = { 'User-Agent': userAgent }
-
-    // we send a HEAD first for two reasons:
-    // 1. to follow any redirects and get the actual URL (DownloadManager does not support redirects)
-    // 2. to obtain the mime-type up front so we can use it for the file extension/validation
-    const headRes = await fetch(fromUrl, { method: 'HEAD', headers })
-
-    if (headRes.status > 399) {
-      throw new Error(`HTTP status error ${headRes.status}. File: ${itemType} ID: ${itemId}`)
-    }
-
-    const contentType = headRes.headers.get('content-type') || undefined
-    assertMimeType(expectedContentType, contentType)
-
-    const contentDisposition = headRes.headers.get('content-disposition') || undefined
-    const filename = contentDisposition ? cd.parse(contentDisposition).parameters.filename : undefined
-
-    let extension: string | undefined
-    if (filename) {
-      extension = path.extname(filename) || undefined
-      if (extension) {
-        extension = extension.substring(1)
-      }
-    } else if (contentType) {
-      extension = mime.extension(contentType) || undefined
-    }
-
-    const config = ReactNativeBlobUtil.config({
-      addAndroidDownloads: {
-        useDownloadManager: true,
-        notification: false,
-        mime: contentType,
-        description: 'subtracks',
-        path: extension ? `${filePathNoExt}.${extension}` : filePathNoExt,
-      },
-    })
-
-    const fetchParams: Parameters<typeof config['fetch']> = ['GET', headRes.url, headers]
-
-    let res: FetchBlobResponse
-    if (progress) {
-      res = await config.fetch(...fetchParams).progress(progress)
-    } else {
-      res = await config.fetch(...fetchParams)
-    }
-
-    const downloadPath = res.path()
-    queryClient.setQueryData<string>(qk.existingFiles(itemType, itemId), downloadPath)
-
-    console.log('downloaded file:', downloadPath)
-    return downloadPath
-  }
-}
@@ -0,0 +1,77 @@
+import { useState, useCallback } from 'react'
+import { useActiveServerRefresh } from './server'
+
+export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
+  const [list, setList] = useState<T[]>([])
+  const [refreshing, setRefreshing] = useState(false)
+
+  const refresh = useCallback(() => {
+    setRefreshing(true)
+
+    fetchList().then(items => {
+      setList(items)
+      setRefreshing(false)
+    })
+  }, [fetchList])
+
+  const reset = useCallback(() => {
+    setList([])
+    refresh()
+  }, [refresh])
+
+  useActiveServerRefresh(
+    useCallback(() => {
+      reset()
+    }, [reset]),
+  )
+
+  return { list, refreshing, refresh, reset }
+}
+
+export const useFetchPaginatedList = <T>(
+  fetchList: (size?: number, offset?: number) => Promise<T[]>,
+  pageSize: number,
+) => {
+  const [list, setList] = useState<T[]>([])
+  const [refreshing, setRefreshing] = useState(false)
+  const [offset, setOffset] = useState(0)
+
+  const refresh = useCallback(() => {
+    setOffset(0)
+    setRefreshing(true)
+
+    fetchList(pageSize, 0).then(firstPage => {
+      setList(firstPage)
+      setRefreshing(false)
+    })
+  }, [fetchList, pageSize])
+
+  const reset = useCallback(() => {
+    setList([])
+    refresh()
+  }, [refresh])
+
+  useActiveServerRefresh(
+    useCallback(() => {
+      reset()
+    }, [reset]),
+  )
+
+  const fetchNextPage = useCallback(() => {
+    const newOffset = offset + pageSize
+    setRefreshing(true)
+
+    fetchList(pageSize, newOffset).then(nextPage => {
+      setRefreshing(false)
+
+      if (nextPage.length === 0) {
+        return
+      }
+
+      setList([...list, ...nextPage])
+      setOffset(newOffset)
+    })
+  }, [offset, pageSize, fetchList, list])
+
+  return { list, refreshing, refresh, reset, fetchNextPage }
+}
@@ -0,0 +1,62 @@
+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],
+    ),
+  )
+}
@@ -1,406 +0,0 @@
-import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
-import { Album, AlbumCoverArt, Artist, Playlist, Song, StarrableItemType } from '@app/models/library'
-import { CollectionById } from '@app/models/state'
-import queryClient from '@app/queryClient'
-import { useStore } from '@app/state/store'
-import { GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
-import _ from 'lodash'
-import {
-  InfiniteData,
-  useInfiniteQuery,
-  UseInfiniteQueryResult,
-  useMutation,
-  useQueries,
-  useQuery,
-  UseQueryResult,
-} from 'react-query'
-import {
-  useFetchAlbum,
-  useFetchAlbumList,
-  useFetchArtist,
-  useFetchArtistInfo,
-  useFetchArtists,
-  useFetchArtistTopSongs,
-  useFetchExistingFile,
-  useFetchFile,
-  useFetchPlaylist,
-  useFetchPlaylists,
-  useFetchSearchResults,
-  useFetchSong,
-  useFetchStar,
-  useFetchUnstar,
-} from './fetch'
-import qk from './queryKeys'
-
-export const useQueryArtists = () => useQuery(qk.artists, useFetchArtists())
-
-export const useQueryArtist = (id: string) => {
-  const fetchArtist = useFetchArtist()
-
-  return useQuery(qk.artist(id), () => fetchArtist(id), {
-    placeholderData: () => {
-      const artist = queryClient.getQueryData<CollectionById<Artist>>(qk.artists)?.byId[id]
-      if (artist) {
-        return { artist, albums: [] }
-      }
-    },
-  })
-}
-
-export const useQueryArtistInfo = (id: string) => {
-  const fetchArtistInfo = useFetchArtistInfo()
-  return useQuery(qk.artistInfo(id), () => fetchArtistInfo(id))
-}
-
-export const useQueryArtistTopSongs = (artistName?: string) => {
-  const fetchArtistTopSongs = useFetchArtistTopSongs()
-  const query = useQuery(qk.artistTopSongs(artistName || ''), () => fetchArtistTopSongs(artistName as string), {
-    enabled: !!artistName,
-    retry: false,
-    staleTime: Infinity,
-    cacheTime: Infinity,
-    notifyOnChangeProps: ['data', 'isError', 'isFetched', 'isSuccess', 'isFetching'],
-  })
-
-  const querySuccess = query.isFetched && query.isSuccess && query.data && query.data.length > 0
-
-  const fetchSearchResults = useFetchSearchResults()
-  const [artistCount, albumCount, songCount] = [0, 0, 300]
-  const backupQuery = useQuery(
-    qk.search(artistName || '', artistCount, albumCount, songCount),
-    () => fetchSearchResults({ query: artistName as string, artistCount, albumCount, songCount }),
-    {
-      select: data => {
-        const artistNameLower = artistName?.toLowerCase()
-        const songs = data.songs.filter(s => s.artist?.toLowerCase() === artistNameLower)
-
-        // sortBy is a stable sort, so that this doesn't change order arbitrarily and re-render
-        return _.sortBy(songs, [
-          s => -(s.playCount || 0),
-          s => -(s.averageRating || 0),
-          s => -(s.userRating || 0),
-        ]).slice(0, 50)
-      },
-      enabled: !!artistName && !query.isFetching && !querySuccess,
-      staleTime: Infinity,
-      cacheTime: Infinity,
-      notifyOnChangeProps: ['data', 'isError'],
-    },
-  )
-
-  return useFixCoverArt(querySuccess ? query : backupQuery)
-}
-
-export const useQueryPlaylists = () => useQuery(qk.playlists, useFetchPlaylists())
-
-export const useQueryPlaylist = (id: string, placeholderPlaylist?: Playlist) => {
-  const fetchPlaylist = useFetchPlaylist()
-
-  const query = useQuery(qk.playlist(id), () => fetchPlaylist(id), {
-    placeholderData: () => {
-      if (placeholderPlaylist) {
-        return { playlist: placeholderPlaylist }
-      }
-
-      const playlist = queryClient.getQueryData<CollectionById<Playlist>>(qk.playlists)?.byId[id]
-      if (playlist) {
-        return { playlist, songs: [] }
-      }
-    },
-  })
-
-  return useFixCoverArt(query)
-}
-
-export const useQueryAlbum = (id: string, placeholderAlbum?: Album) => {
-  const fetchAlbum = useFetchAlbum()
-
-  const query = useQuery(qk.album(id), () => fetchAlbum(id), {
-    placeholderData: (): { album: Album; songs?: Song[] } | undefined =>
-      placeholderAlbum ? { album: placeholderAlbum } : undefined,
-  })
-
-  return useFixCoverArt(query)
-}
-
-export const useQueryAlbumList = (type: GetAlbumList2TypeBase, size: number) => {
-  const fetchAlbumList = useFetchAlbumList()
-
-  return useInfiniteQuery(
-    qk.albumList(type, size),
-    async context => {
-      return await fetchAlbumList(size, context.pageParam || 0, type)
-    },
-    {
-      getNextPageParam: (lastPage, allPages) => {
-        if (lastPage.length === 0) {
-          return
-        }
-        return allPages.length * size
-      },
-      cacheTime: 0,
-    },
-  )
-}
-
-export const useQuerySearchResults = (params: Search3Params) => {
-  const fetchSearchResults = useFetchSearchResults()
-
-  const query = useInfiniteQuery(
-    qk.search(params.query, params.artistCount, params.albumCount, params.songCount),
-    async context => {
-      return await fetchSearchResults({
-        ...params,
-        artistOffset: context.pageParam?.artistOffset || 0,
-        albumOffset: context.pageParam?.albumOffset || 0,
-        songOffset: context.pageParam?.songOffset || 0,
-      })
-    },
-    {
-      getNextPageParam: (lastPage, allPages) => {
-        if (lastPage.albums.length + lastPage.artists.length + lastPage.songs.length === 0) {
-          return
-        }
-        return {
-          artistOffset: allPages.reduce((acc, val) => (acc += val.artists.length), 0),
-          albumOffset: allPages.reduce((acc, val) => (acc += val.albums.length), 0),
-          songOffset: allPages.reduce((acc, val) => (acc += val.songs.length), 0),
-        }
-      },
-      cacheTime: 1000 * 60,
-      enabled: !!params.query && params.query.length > 1,
-    },
-  )
-
-  return useFixCoverArt(query)
-}
-
-export const useQueryHomeLists = (types: GetAlbumList2TypeBase[], size: number) => {
-  const fetchAlbumList = useFetchAlbumList()
-
-  const listQueries = useQueries(
-    types.map(type => {
-      return {
-        queryKey: qk.albumList(type, size),
-        queryFn: async () => {
-          const albums = await fetchAlbumList(size, 0, type as GetAlbumList2TypeBase)
-          return { type, albums }
-        },
-      }
-    }),
-  )
-
-  return listQueries
-}
-
-export const useStar = (id: string, type: StarrableItemType) => {
-  const fetchStar = useFetchStar()
-  const fetchUnstar = useFetchUnstar()
-  const fetchSong = useFetchSong()
-  const fetchAlbum = useFetchAlbum()
-  const fetchArtist = useFetchArtist()
-
-  const query = useQuery(
-    qk.starredItems(id),
-    async () => {
-      switch (type) {
-        case 'album':
-          console.log('fetch album starred', id)
-          return !!(await fetchAlbum(id)).album.starred
-        case 'artist':
-          console.log('fetch artist starred', id)
-          return !!(await fetchArtist(id)).artist.starred
-        default:
-          console.log('fetch song starred', id)
-          return !!(await fetchSong(id)).starred
-      }
-    },
-    {
-      cacheTime: Infinity,
-      staleTime: Infinity,
-    },
-  )
-
-  const toggle = useMutation(
-    () => {
-      const params: StarParams = {
-        id: type === 'song' ? id : undefined,
-        albumId: type === 'album' ? id : undefined,
-        artistId: type === 'artist' ? id : undefined,
-      }
-      return !query.data ? fetchStar(params) : fetchUnstar(params)
-    },
-    {
-      onMutate: () => {
-        queryClient.setQueryData<boolean>(qk.starredItems(id), !query.data)
-      },
-      onSuccess: () => {
-        if (type === 'album') {
-          queryClient.invalidateQueries(qk.albumList('starred'))
-        }
-      },
-    },
-  )
-
-  return { query, toggle }
-}
-
-export const useQueryExistingFile = (itemType: CacheItemTypeKey, itemId: string) => {
-  const fetchExistingFile = useFetchExistingFile()
-
-  return useQuery(qk.existingFiles(itemType, itemId), () => fetchExistingFile({ itemType, itemId }), {
-    staleTime: Infinity,
-    cacheTime: Infinity,
-    notifyOnChangeProps: ['data', 'isFetched'],
-  })
-}
-
-export const useQueryCoverArtPath = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
-  const fetchFile = useFetchFile()
-  const client = useStore(store => store.client)
-
-  const itemType: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
-  const existing = useQueryExistingFile(itemType, coverArt)
-
-  const query = useQuery(
-    qk.coverArt(coverArt, size),
-    async () => {
-      if (!client) {
-        return
-      }
-
-      const fromUrl = client.getCoverArtUri({ id: coverArt, size: itemType === 'coverArtThumb' ? '256' : undefined })
-      return await fetchFile({ itemType, itemId: coverArt, fromUrl, expectedContentType: 'image' })
-    },
-    {
-      enabled: existing.isFetched && !existing.data && !!client,
-      staleTime: Infinity,
-      cacheTime: Infinity,
-    },
-  )
-
-  return { ...query, data: existing.data || query.data, isExistingFetching: existing.isFetching }
-}
-
-export const useQueryArtistArtPath = (artistId: string, size: CacheImageSize = 'thumbnail') => {
-  const fetchFile = useFetchFile()
-  const client = useStore(store => store.client)
-  const { data: artistInfo } = useQueryArtistInfo(artistId)
-
-  const itemType: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
-  const existing = useQueryExistingFile(itemType, artistId)
-
-  const query = useQuery(
-    qk.artistArt(artistId, size),
-    async () => {
-      if (!client || !artistInfo?.smallImageUrl || !artistInfo?.largeImageUrl) {
-        return
-      }
-
-      const fromUrl = itemType === 'artistArtThumb' ? artistInfo.smallImageUrl : artistInfo.largeImageUrl
-      return await fetchFile({ itemType, itemId: artistId, fromUrl, expectedContentType: 'image' })
-    },
-    {
-      enabled:
-        existing.isFetched &&
-        !existing.data &&
-        !!client &&
-        (!!artistInfo?.smallImageUrl || !!artistInfo?.largeImageUrl),
-      staleTime: Infinity,
-      cacheTime: Infinity,
-    },
-  )
-
-  return { ...query, data: existing.data || query.data, isExistingFetching: existing.isFetching }
-}
-
-type WithSongs = Song[] | { songs?: Song[] }
-type InfiniteWithSongs = { songs: Song[] }
-type AnyDataWithSongs = WithSongs | InfiniteData<InfiniteWithSongs>
-type AnyQueryWithSongs = UseQueryResult<WithSongs> | UseInfiniteQueryResult<{ songs: Song[] }>
-
-function getSongs<T extends AnyDataWithSongs>(data: T | undefined): Song[] {
-  if (!data) {
-    return []
-  }
-
-  if (Array.isArray(data)) {
-    return data
-  }
-
-  if ('pages' in data) {
-    return data.pages.flatMap(p => p.songs)
-  }
-
-  return data.songs || []
-}
-
-function setSongCoverArt<T extends AnyQueryWithSongs>(query: T, coverArts: UseQueryResult<AlbumCoverArt>[]): T {
-  if (!query.data) {
-    return query
-  }
-
-  const mapSongCoverArt = (song: Song) => ({
-    ...song,
-    coverArt: coverArts.find(c => c.data?.albumId === song.albumId)?.data?.coverArt,
-  })
-
-  if (Array.isArray(query.data)) {
-    return {
-      ...query,
-      data: query.data.map(mapSongCoverArt),
-    }
-  }
-
-  if ('pages' in query.data) {
-    return {
-      ...query,
-      data: {
-        pages: query.data.pages.map(p => ({
-          ...p,
-          songs: p.songs.map(mapSongCoverArt),
-        })),
-      },
-    }
-  }
-
-  if (query.data.songs) {
-    return {
-      ...query,
-      data: {
-        ...query.data,
-        songs: query.data.songs.map(mapSongCoverArt),
-      },
-    }
-  }
-
-  return query
-}
-
-// 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
-const useFixCoverArt = <T extends AnyQueryWithSongs>(query: T) => {
-  const fetchAlbum = useFetchAlbum()
-
-  const songs = getSongs(query.data)
-  const albumIds = _.uniq((songs || []).map(s => s.albumId).filter((id): id is string => id !== undefined))
-
-  const coverArts = useQueries(
-    albumIds.map(id => ({
-      queryKey: qk.albumCoverArt(id),
-      queryFn: async (): Promise<AlbumCoverArt> => {
-        const res = await fetchAlbum(id)
-        return { albumId: res.album.id, coverArt: res.album.coverArt }
-      },
-      staleTime: Infinity,
-      cacheTime: Infinity,
-      notifyOnChangeProps: ['data', 'isFetched'] as any,
-    })),
-  )
-
-  if (coverArts.every(c => c.isFetched)) {
-    return setSongCoverArt(query, coverArts)
-  }
-
-  return query
-}
@@ -1,52 +0,0 @@
-import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
-import { GetAlbumList2TypeBase } from '@app/subsonic/params'
-
-const qk = {
-  starredItems: (id: string) => ['starredItems', id],
-  albumCoverArt: (id: string) => ['albumCoverArt', id],
-
-  artists: 'artists',
-  artist: (id: string) => ['artist', id],
-  artistInfo: (id: string) => ['artistInfo', id],
-  artistTopSongs: (artistName: string) => ['artistTopSongs', artistName],
-
-  playlists: 'playlists',
-  playlist: (id: string) => ['playlist', id],
-
-  album: (id: string) => ['album', id],
-  albumList: (type: GetAlbumList2TypeBase, size?: number) => {
-    const key: (string | number)[] = ['albumList', type]
-    size !== undefined && key.push(size)
-    return key
-  },
-
-  search: (query: string, artistCount?: number, albumCount?: number, songCount?: number) => [
-    'search',
-    query,
-    artistCount,
-    albumCount,
-    songCount,
-  ],
-
-  coverArt: (coverArt?: string, size?: CacheImageSize) => {
-    const key: string[] = ['coverArt']
-    coverArt !== undefined && key.push(coverArt)
-    size !== undefined && key.push(size)
-    return key
-  },
-  artistArt: (artistId?: string, size?: CacheImageSize) => {
-    const key: string[] = ['artistArt']
-    artistId !== undefined && key.push(artistId)
-    size !== undefined && key.push(size)
-    return key
-  },
-
-  existingFiles: (type?: CacheItemTypeKey, itemId?: string) => {
-    const key: string[] = ['existingFiles']
-    type !== undefined && key.push(type)
-    itemId !== undefined && key.push(itemId)
-    return key
-  },
-}
-
-export default qk
@@ -0,0 +1,29 @@
+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 setActiveServer = useStore(selectSettings.setActiveServer)
+  const resetPlayer = useReset()
+
+  return async (id: string) => {
+    if (id === activeServer?.id) {
+      return
+    }
+
+    await resetPlayer()
+    setActiveServer(id)
+  }
+}
+
+export const useActiveServerRefresh = (refresh: () => void) => {
+  const activeServer = useStore(selectSettings.activeServer)
+
+  useEffect(() => {
+    if (activeServer) {
+      refresh()
+    }
+  }, [activeServer, refresh])
+}
@@ -1,68 +0,0 @@
-import { useReset } from '@app/hooks/trackplayer'
-import { CacheItemTypeKey } from '@app/models/cache'
-import queryClient from '@app/queryClient'
-import { useStore, useStoreDeep } from '@app/state/store'
-import { cacheDir } from '@app/util/fs'
-import RNFS from 'react-native-fs'
-import qk from './queryKeys'
-
-export const useSwitchActiveServer = () => {
-  const activeServerId = useStore(store => store.settings.activeServerId)
-  const setActiveServer = useStore(store => store.setActiveServer)
-  const resetPlayer = useReset()
-
-  return async (id: string) => {
-    if (id === activeServerId) {
-      return
-    }
-
-    await queryClient.cancelQueries(undefined, { active: true })
-    await resetPlayer()
-    queryClient.removeQueries()
-    setActiveServer(id)
-  }
-}
-
-export const useFirstRun = () => {
-  return useStore(store => Object.keys(store.settings.servers).length === 0)
-}
-
-export const useResetImageCache = () => {
-  const serverIds = useStoreDeep(store => Object.keys(store.settings.servers))
-  const changeCacheBuster = useStore(store => store.changeCacheBuster)
-
-  return async () => {
-    // disable/invalidate queries
-    await Promise.all([
-      queryClient.cancelQueries(qk.artistArt(), { active: true }),
-      queryClient.cancelQueries(qk.coverArt(), { active: true }),
-      queryClient.cancelQueries(qk.existingFiles(), { active: true }),
-      queryClient.invalidateQueries(qk.artistArt(), { refetchActive: false }),
-      queryClient.invalidateQueries(qk.coverArt(), { refetchActive: false }),
-      queryClient.invalidateQueries(qk.existingFiles(), { refetchActive: false }),
-    ])
-
-    // delete all images
-    const itemTypes: CacheItemTypeKey[] = ['artistArt', 'artistArtThumb', 'coverArt', 'coverArtThumb']
-    await Promise.all(
-      serverIds.flatMap(id =>
-        itemTypes.map(async type => {
-          const dir = cacheDir(id, type)
-          try {
-            await RNFS.unlink(dir)
-          } catch {}
-        }),
-      ),
-    )
-
-    // change cacheBuster
-    changeCacheBuster()
-
-    // enable queries
-    await Promise.all([
-      queryClient.refetchQueries(qk.existingFiles(), { active: true }),
-      queryClient.refetchQueries(qk.artistArt(), { active: true }),
-      queryClient.refetchQueries(qk.coverArt(), { active: true }),
-    ])
-  }
-}
@@ -1,14 +1,6 @@
-import { Song } from '@app/models/library'
-import { QueueContextType, TrackExt } from '@app/models/trackplayer'
-import queryClient from '@app/queryClient'
-import { useStore, useStoreDeep } from '@app/state/store'
-import { getQueue, SetQueueOptions, trackPlayerCommands } from '@app/state/trackplayer'
-import userAgent from '@app/util/userAgent'
-import _ from 'lodash'
+import { useStore } from '@app/state/store'
+import { getQueue, selectTrackPlayer, trackPlayerCommands } from '@app/state/trackplayer'
 import TrackPlayer from 'react-native-track-player'
-import { useQueries } from 'react-query'
-import { useFetchExistingFile, useFetchFile } from './fetch'
-import qk from './queryKeys'

 export const usePlay = () => {
  return () => trackPlayerCommands.enqueue(() => TrackPlayer.play())
@@ -65,7 +57,7 @@ export const useSeekTo = () => {
 }

 export const useReset = (enqueue = true) => {
-  const resetStore = useStore(store => store.resetTrackPlayerState)
+  const resetStore = useStore(selectTrackPlayer.resetTrackPlayerState)

  const reset = async () => {
    await TrackPlayer.reset()
@@ -76,9 +68,9 @@ export const useReset = (enqueue = true) => {
 }

 export const useIsPlaying = (contextId: string | undefined, track: number) => {
-  const queueContextId = useStore(store => store.queueContextId)
-  const currentTrackIdx = useStore(store => store.currentTrackIdx)
-  const shuffleOrder = useStoreDeep(store => store.shuffleOrder)
+  const queueContextId = useStore(selectTrackPlayer.queueContextId)
+  const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx)
+  const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder)

  if (contextId === undefined) {
    return track === currentTrackIdx
@@ -91,88 +83,3 @@ export const useIsPlaying = (contextId: string | undefined, track: number) => {

  return contextId === queueContextId && track === currentTrackIdx
 }
-
-export const useSetQueue = (type: QueueContextType, songs?: Song[]) => {
-  const _setQueue = useStore(store => store.setQueue)
-  const client = useStore(store => store.client)
-  const buildStreamUri = useStore(store => store.buildStreamUri)
-  const fetchFile = useFetchFile()
-  const fetchExistingFile = useFetchExistingFile()
-
-  const songCoverArt = _.uniq((songs || []).map(s => s.coverArt)).filter((c): c is string => c !== undefined)
-
-  const coverArtPaths = useQueries(
-    songCoverArt.map(coverArt => ({
-      queryKey: qk.coverArt(coverArt, 'thumbnail'),
-      queryFn: async () => {
-        if (!client) {
-          return
-        }
-
-        const itemType = 'coverArtThumb'
-
-        const existingCache = queryClient.getQueryData<string | undefined>(qk.existingFiles(itemType, coverArt))
-        if (existingCache) {
-          return existingCache
-        }
-
-        const existingDisk = await fetchExistingFile({ itemId: coverArt, itemType })
-        if (existingDisk) {
-          return existingDisk
-        }
-
-        const fromUrl = client.getCoverArtUri({ id: coverArt, size: '256' })
-        return await fetchFile({
-          itemType,
-          itemId: coverArt,
-          fromUrl,
-          expectedContentType: 'image',
-        })
-      },
-      enabled: !!client && !!songs,
-      staleTime: Infinity,
-      cacheTime: Infinity,
-      notifyOnChangeProps: ['data', 'isFetched'] as any,
-    })),
-  )
-
-  const songCoverArtToPath = _.zipObject(
-    songCoverArt,
-    coverArtPaths.map(c => c.data),
-  )
-
-  const mapSongToTrackExt = (s: Song): TrackExt => {
-    let artwork = require('@res/fallback.png')
-    if (s.coverArt) {
-      const filePath = songCoverArtToPath[s.coverArt]
-      if (filePath) {
-        artwork = `file://${filePath}`
-      }
-    }
-
-    return {
-      id: s.id,
-      title: s.title,
-      artist: s.artist || 'Unknown Artist',
-      album: s.album || 'Unknown Album',
-      url: buildStreamUri(s.id),
-      userAgent,
-      artwork,
-      coverArt: s.coverArt,
-      duration: s.duration,
-      artistId: s.artistId,
-      albumId: s.albumId,
-      track: s.track,
-      discNumber: s.discNumber,
-    }
-  }
-
-  const contextId = `${type}-${songs?.map(s => s.id).join('-')}`
-
-  const setQueue = async (options: SetQueueOptions) => {
-    const queue = (songs || []).map(mapSongToTrackExt)
-    return await _setQueue({ queue, type, contextId, ...options })
-  }
-
-  return { setQueue, contextId, isReady: coverArtPaths.every(c => c.isFetched) }
-}
@@ -1,10 +1,11 @@
-import { Album, Playlist, Artist, Song } from './library'
+import { Album, PlaylistListItem, Artist, Song } from './music'

 export enum CacheItemType {
  coverArt = 'coverArt',
  coverArtThumb = 'coverArtThumb',
  artistArt = 'artistArt',
  artistArtThumb = 'artistArtThumb',
+  song = 'song',
 }

 export type CacheItemTypeKey = keyof typeof CacheItemType
@@ -26,7 +27,7 @@ export type DownloadedAlbum = Album & {
  songs: string[]
 }

-export type DownloadedPlaylist = Playlist & {
+export type DownloadedPlaylist = PlaylistListItem & {
  songs: string[]
 }

@@ -1,85 +0,0 @@
-import {
-  AlbumID3Element,
-  ArtistID3Element,
-  ArtistInfo2Element,
-  ChildElement,
-  PlaylistElement,
-} from '@app/subsonic/elements'
-import { Album, Artist, ArtistInfo, Playlist, Song } from './library'
-import { TrackExt } from './trackplayer'
-
-export function mapArtist(artist: ArtistID3Element): Artist {
-  return {
-    itemType: 'artist',
-    id: artist.id,
-    name: artist.name,
-    starred: artist.starred?.getTime(),
-    coverArt: artist.coverArt,
-  }
-}
-
-export function mapArtistInfo(id: string, info: ArtistInfo2Element): ArtistInfo {
-  return {
-    id,
-    smallImageUrl: info.smallImageUrl,
-    largeImageUrl: info.largeImageUrl,
-  }
-}
-
-export function mapAlbum(album: AlbumID3Element): Album {
-  return {
-    itemType: 'album',
-    id: album.id,
-    name: album.name,
-    artist: album.artist,
-    artistId: album.artistId,
-    starred: album.starred?.getTime(),
-    coverArt: album.coverArt,
-    year: album.year,
-  }
-}
-
-export function mapPlaylist(playlist: PlaylistElement): Playlist {
-  return {
-    itemType: 'playlist',
-    id: playlist.id,
-    name: playlist.name,
-    comment: playlist.comment,
-    coverArt: playlist.coverArt,
-  }
-}
-
-export 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?.getTime(),
-    playCount: song.playCount,
-    averageRating: song.averageRating,
-    userRating: song.userRating,
-  }
-}
-
-export function mapTrackExtToSong(track: TrackExt): Song {
-  return {
-    itemType: 'song',
-    id: track.id,
-    title: track.title as string,
-    artist: track.artist,
-    album: track.album,
-    coverArt: track.coverArt,
-    duration: track.duration,
-    artistId: track.artistId,
-    albumId: track.albumId,
-    track: track.track,
-    discNumber: track.discNumber,
-  }
-}
@@ -2,28 +2,43 @@ export interface Artist {
  itemType: 'artist'
  id: string
  name: string
-  starred?: number
+  starred?: Date
  coverArt?: string
 }

-export interface ArtistInfo {
-  id: string
+export interface ArtistInfo extends Artist {
+  albums: Album[]
  smallImageUrl?: string
  largeImageUrl?: string
+  topSongs: Song[]
 }

-export interface Album {
+export interface AlbumListItem {
  itemType: 'album'
  id: string
  name: string
  artist?: string
  artistId?: string
-  starred?: number
+  starred?: Date
+  coverArt?: string
+}
+
+export interface Album extends AlbumListItem {
  coverArt?: string
  year?: number
 }

-export interface Playlist {
+export interface AlbumWithSongs extends Album {
+  songs: Song[]
+}
+
+export interface SearchResults {
+  artists: Artist[]
+  albums: AlbumListItem[]
+  songs: Song[]
+}
+
+export interface PlaylistListItem {
  itemType: 'playlist'
  id: string
  name: string
@@ -31,6 +46,10 @@ export interface Playlist {
  coverArt?: string
 }

+export interface PlaylistWithSongs extends PlaylistListItem {
+  songs: Song[]
+}
+
 export interface Song {
  itemType: 'song'
  id: string
@@ -42,24 +61,14 @@ export interface Song {
  track?: number
  discNumber?: number
  duration?: number
-  starred?: number
-  coverArt?: string
-  playCount?: number
-  userRating?: number
-  averageRating?: number
-}
+  starred?: Date

-export interface SearchResults {
-  artists: Artist[]
-  albums: Album[]
-  songs: Song[]
-}
-
-export type StarrableItemType = 'album' | 'song' | 'artist'
-
-export type ListableItem = Album | Song | Artist | Playlist
-
-export interface AlbumCoverArt {
-  albumId: string
+  streamUri: string
  coverArt?: string
 }
+
+export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
+
+export type HomeLists = { [key: string]: AlbumListItem[] }
+
+export type StarrableItemType = 'song' | 'album' | 'artist'
@@ -30,3 +30,23 @@ 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
+}
@@ -1,19 +0,0 @@
-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[]
-}
-
-export interface CollectionById<T extends { id: string }> {
-  byId: ById<T>
-  allIds: string[]
-}
@@ -1,18 +0,0 @@
-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'
@@ -1,6 +1,7 @@
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import PressableOpacity from '@app/components/PressableOpacity'
-import { useFirstRun } from '@app/hooks/settings'
+import { selectSettings } from '@app/state/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'
@@ -9,7 +10,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 { Image, ImageStyle, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native'

 const BottomTabButton = React.memo<{
  routeKey: string
@@ -19,7 +20,7 @@ const BottomTabButton = React.memo<{
  icon: OutlineFillIcon
  navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
 }>(({ routeKey, label, name, isFocused, icon, navigation }) => {
-  const firstRun = useFirstRun()
+  const firstRun = useStore(selectSettings.firstRun)

  const disabled = firstRun && name !== 'settings'

@@ -1,5 +1,3 @@
-import { useFirstRun } from '@app/hooks/settings'
-import { Album, Playlist } from '@app/models/library'
 import BottomTabBar from '@app/navigation/BottomTabBar'
 import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
 import ArtistView from '@app/screens/ArtistView'
@@ -10,6 +8,7 @@ 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'
@@ -21,9 +20,9 @@ import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-nat

 type TabStackParamList = {
  main: undefined
-  album: { id: string; title: string; album?: Album }
+  album: { id: string; title: string }
  artist: { id: string; title: string }
-  playlist: { id: string; title: string; playlist?: Playlist }
+  playlist: { id: string; title: string }
  results: { query: string; type: 'album' | 'song' | 'artist' }
 }

@@ -34,7 +33,9 @@ type AlbumScreenProps = {
  navigation: AlbumScreenNavigationProp
 }

-const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => <SongListView {...route.params} type="album" />
+const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
+  <SongListView id={route.params.id} title={route.params.title} type="album" />
+)

 type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
 type ArtistScreenRouteProp = RouteProp<TabStackParamList, 'artist'>
@@ -43,7 +44,9 @@ type ArtistScreenProps = {
  navigation: ArtistScreenNavigationProp
 }

-const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => <ArtistView {...route.params} />
+const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
+  <ArtistView id={route.params.id} title={route.params.title} />
+)

 type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'playlist'>
 type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'playlist'>
@@ -52,7 +55,9 @@ type PlaylistScreenProps = {
  navigation: PlaylistScreenNavigationProp
 }

-const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => <SongListView {...route.params} type="playlist" />
+const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
+  <SongListView id={route.params.id} title={route.params.title} type="playlist" />
+)

 type ResultsScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'results'>
 type ResultsScreenRouteProp = RouteProp<TabStackParamList, 'results'>
@@ -61,7 +66,9 @@ type ResultsScreenProps = {
  navigation: ResultsScreenNavigationProp
 }

-const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => <SearchResultsView {...route.params} />
+const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => (
+  <SearchResultsView query={route.params.query} type={route.params.type} />
+)

 const styles = StyleSheet.create({
  stackheaderStyle: {
@@ -170,20 +177,13 @@ const SettingsTab = () => {
 const Tab = createBottomTabNavigator()

 const BottomTabNavigator = () => {
-  const firstRun = useFirstRun()
-  const resetServer = useStore(store => store.resetServer)
+  const firstRun = useStore(selectSettings.firstRun)

  return (
    <Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>
-      {resetServer ? (
-        <></>
-      ) : (
-        <>
-          <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
-          <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
-          <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
-        </>
-      )}
+      <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
+      <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
+      <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: 'Settings' }} />
    </Tab.Navigator>
  )
@@ -6,32 +6,28 @@ import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import React from 'react'
-import { StyleSheet } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { StatusBar, StyleSheet } from 'react-native'

 const Tab = createMaterialTopTabNavigator()

-const LibraryTopTabNavigator = () => {
-  const marginTop = useSafeAreaInsets().top
-
-  return (
-    <Tab.Navigator
-      tabBarOptions={{
-        style: [styles.tabBar, { marginTop }],
-        labelStyle: styles.tablabelStyle,
-        indicatorStyle: styles.tabindicatorStyle,
-      }}
-      initialRouteName="albums">
-      <Tab.Screen name="albums" component={AlbumsTab} options={{ tabBarLabel: 'Albums' }} />
-      <Tab.Screen name="artists" component={ArtistsTab} options={{ tabBarLabel: 'Artists' }} />
-      <Tab.Screen name="playlists" component={PlaylistsTab} options={{ tabBarLabel: 'Playlists' }} />
-    </Tab.Navigator>
-  )
-}
+const LibraryTopTabNavigator = () => (
+  <Tab.Navigator
+    tabBarOptions={{
+      style: styles.tabBar,
+      labelStyle: styles.tablabelStyle,
+      indicatorStyle: styles.tabindicatorStyle,
+    }}
+    initialRouteName="albums">
+    <Tab.Screen name="albums" component={AlbumsTab} options={{ tabBarLabel: 'Albums' }} />
+    <Tab.Screen name="artists" component={ArtistsTab} options={{ tabBarLabel: 'Artists' }} />
+    <Tab.Screen name="playlists" component={PlaylistsTab} options={{ tabBarLabel: 'Playlists' }} />
+  </Tab.Navigator>
+)

 const styles = StyleSheet.create({
  tabBar: {
    height: dimensions.header,
+    marginTop: StatusBar.currentHeight,
    backgroundColor: colors.gradient.high,
    elevation: 0,
    justifyContent: 'center',
@@ -1,4 +1,4 @@
-import { getCurrentTrack, getPlayerState, trackPlayerCommands } from '@app/state/trackplayer'
+import { getCurrentTrack, getPlayerState, TrackExt, 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'
@@ -28,9 +28,9 @@ const setNetState = (netState: 'mobile' | 'wifi') => {
  })
 }

-const rebuildQueue = (forcePlay?: boolean) => {
+const rebuildQueue = () => {
  unstable_batchedUpdates(() => {
-    useStore.getState().rebuildQueue(forcePlay)
+    useStore.getState().rebuildQueue(useStore.getState().playerState === State.Playing)
  })
 }

@@ -44,12 +44,13 @@ let serviceCreated = false

 const createService = async () => {
  useStore.subscribe(
-    state => state.currentTrack?.id,
-    (currentTrackId?: string) => {
-      if (currentTrackId) {
-        useStore.getState().scrobbleTrack(currentTrackId)
+    (currentTrack?: TrackExt) => {
+      if (currentTrack) {
+        useStore.getState().scrobbleTrack(currentTrack.id)
      }
    },
+    state => state.currentTrack,
+    (prev, next) => prev?.id === next?.id,
  )

  NetInfo.fetch().then(state => {
@@ -139,7 +140,7 @@ const createService = async () => {

    // fix for ExoPlayer aborting playback while esimating content length
    if (code === 'playback-source' && message.includes('416')) {
-      rebuildQueue(true)
+      rebuildQueue()
    }
  })
 }
@@ -1,5 +0,0 @@
-import { QueryClient } from 'react-query'
-
-const client = new QueryClient()
-
-export default client
@@ -5,15 +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 { useQueryArtist, useQueryArtistTopSongs } from '@app/hooks/query'
-import { useSetQueue } from '@app/hooks/trackplayer'
-import { Album, Song } from '@app/models/library'
+import { useArtistInfo } from '@app/hooks/music'
+import { Album, Song } from '@app/models/music'
+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 { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
-import equal from 'fast-deep-equal/es6/react'
 import React from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
@@ -32,63 +32,40 @@ const AlbumItem = React.memo<{
  return (
    <AlbumContextPressable
      album={album}
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
      menuStyle={[styles.albumItem, { width }]}
      triggerOuterWrapperStyle={{ width }}>
-      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode="cover" size="thumbnail" />
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode={'cover'} />
      <Text style={styles.albumTitle}>{album.name}</Text>
      <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
    </AlbumContextPressable>
  )
-}, equal)
+})

 const TopSongs = React.memo<{
  songs: Song[]
  name: string
-}>(({ songs, name }) => {
-  const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
+  artistId: string
+}>(({ songs, name, artistId }) => {
+  const setQueue = useStore(selectTrackPlayer.setQueue)

  return (
    <>
      <Header>Top Songs</Header>
-      {songs.slice(0, 5).map((s, i) => (
+      {songs.map((s, i) => (
        <ListItem
          key={i}
          item={s}
-          contextId={contextId}
+          contextId={artistId}
          queueId={i}
          showArt={true}
          subtitle={s.album}
-          onPress={() => setQueue({ title: name, playTrack: i })}
-          disabled={!isReady}
+          onPress={() => setQueue(songs, name, 'artist', artistId, i)}
        />
      ))}
    </>
  )
-}, equal)
-
-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>
-    </>
-  )
-}, equal)
+})

 const ArtistViewFallback = React.memo(() => (
  <GradientBackground style={styles.fallback}>
@@ -97,9 +74,8 @@ const ArtistViewFallback = React.memo(() => (
 ))

 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  const { data: artistData } = useQueryArtist(id)
-  const { data: topSongs, isError } = useQueryArtistTopSongs(artistData?.artist?.name)
-
+  const artist = useArtistInfo(id)
+  const albumsLayout = useLayout()
  const coverLayout = useLayout()
  const headerOpacity = useSharedValue(0)

@@ -115,11 +91,15 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
    }
  })

-  if (!artistData) {
+  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
+
+  if (!artist) {
    return <ArtistViewFallback />
  }

-  const { artist, albums } = artistData
+  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}>
@@ -130,23 +110,22 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
        style={styles.scroll}
        contentContainerStyle={styles.scrollContent}
        onScroll={onScroll}>
-        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode="cover" />
+        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
        <View style={styles.titleContainer}>
          <Text style={styles.title}>{artist.name}</Text>
        </View>
        <View style={styles.contentContainer}>
-          {(topSongs || isError) && artist ? (
-            topSongs && topSongs.length > 0 ? (
-              <>
-                <TopSongs songs={topSongs} name={artist.name} />
-                <ArtistAlbums albums={albums} />
-              </>
-            ) : (
-              <ArtistAlbums albums={albums} />
-            )
+          {artist.topSongs.length > 0 ? (
+            <TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
          ) : (
-            <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>
@@ -221,9 +200,6 @@ const styles = StyleSheet.create({
    fontFamily: font.regular,
    textAlign: 'center',
  },
-  loading: {
-    marginTop: 30,
-  },
 })

 export default ArtistView
@@ -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 { useQueryHomeLists } from '@app/hooks/query'
-import { Album } from '@app/models/library'
-import { useStoreDeep } from '@app/state/store'
+import { useActiveServerRefresh } from '@app/hooks/server'
+import { AlbumListItem } from '@app/models/music'
+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 { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
+import { GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import equal from 'fast-deep-equal/es6/react'
-import React from 'react'
-import { RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import React, { useCallback } from 'react'
+import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'

 const titles: { [key in GetAlbumListType]?: string } = {
  recent: 'Recently Played',
@@ -23,7 +23,7 @@ const titles: { [key in GetAlbumListType]?: string } = {
 }

 const AlbumItem = React.memo<{
-  album: Album
+  album: AlbumListItem
 }>(({ album }) => {
  const navigation = useNavigation()

@@ -31,13 +31,12 @@ const AlbumItem = React.memo<{
    <AlbumContextPressable
      album={album}
      triggerWrapperStyle={styles.item}
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}>
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
      <CoverArt
        type="cover"
        coverArt={album.coverArt}
        style={{ height: styles.item.width, width: styles.item.width }}
-        resizeMode="cover"
-        size="thumbnail"
+        resizeMode={'cover'}
      />
      <Text style={styles.title} numberOfLines={1}>
        {album.name}
@@ -47,12 +46,12 @@ const AlbumItem = React.memo<{
      </Text>
    </AlbumContextPressable>
  )
-}, equal)
+})

 const Category = React.memo<{
-  type: string
-  albums: Album[]
-}>(({ type, albums }) => {
+  name?: string
+  data: AlbumListItem[]
+}>(({ name, data }) => {
  const Albums = () => (
    <ScrollView
      horizontal={true}
@@ -60,8 +59,8 @@ const Category = React.memo<{
      overScrollMode={'never'}
      style={styles.artScroll}
      contentContainerStyle={styles.artScrollContent}>
-      {albums.map(a => (
-        <AlbumItem key={a.id} album={a} />
+      {data.map(album => (
+        <AlbumItem key={album.id} album={album} />
      ))}
    </ScrollView>
  )
@@ -74,34 +73,42 @@ const Category = React.memo<{

  return (
    <View style={styles.category}>
-      <Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
-      {albums.length > 0 ? <Albums /> : <Nothing />}
+      <Header style={styles.header}>{name}</Header>
+      {data.length > 0 ? <Albums /> : <Nothing />}
    </View>
  )
-}, equal)
+})

 const Home = () => {
-  const types = useStoreDeep(store => store.settings.screens.home.listTypes)
-  const listQueries = useQueryHomeLists(types as GetAlbumList2TypeBase[], 20)
-  const paddingTop = useSafeAreaInsets().top
+  const types = useStore(selectSettings.homeLists)
+  const lists = useStore(selectMusic.homeLists)
+  const updating = useStore(selectMusic.homeListsUpdating)
+  const update = useStore(selectMusic.fetchHomeLists)
+  const clear = useStore(selectMusic.clearHomeLists)
+
+  useActiveServerRefresh(
+    useCallback(() => {
+      clear()
+      update()
+    }, [clear, update]),
+  )

  return (
    <GradientScrollView
      style={styles.scroll}
-      contentContainerStyle={{ paddingTop }}
+      contentContainerStyle={styles.scrollContentContainer}
      refreshControl={
        <RefreshControl
-          refreshing={listQueries.some(q => q.isLoading)}
-          onRefresh={() => listQueries.forEach(q => q.refetch())}
+          refreshing={updating}
+          onRefresh={update}
          colors={[colors.accent, colors.accentLow]}
-          progressViewOffset={paddingTop}
+          progressViewOffset={StatusBar.currentHeight}
        />
      }>
      <View style={styles.content}>
-        {types.map(type => {
-          const query = listQueries.find(list => list.data?.type === type)
-          return <Category key={type} type={type} albums={query?.data?.albums || []} />
-        })}
+        {types.map(type => (
+          <Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
+        ))}
      </View>
    </GradientScrollView>
  )
@@ -111,6 +118,9 @@ const styles = StyleSheet.create({
  scroll: {
    flex: 1,
  },
+  scrollContentContainer: {
+    paddingTop: StatusBar.currentHeight,
+  },
  content: {
    paddingBottom: 20,
  },
@@ -2,41 +2,32 @@ import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
-import { useQueryAlbumList } from '@app/hooks/query'
-import { Album } from '@app/models/library'
-import { useStore, useStoreDeep } from '@app/state/store'
+import { useFetchPaginatedList } from '@app/hooks/list'
+import { Album, AlbumListItem } from '@app/models/music'
+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, GetAlbumList2TypeBase } from '@app/subsonic/params'
+import { GetAlbumList2Type } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import equal from 'fast-deep-equal/es6/react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'

 const AlbumItem = React.memo<{
-  album: Album
+  album: AlbumListItem
  size: number
  height: number
 }>(({ album, size, height }) => {
  const navigation = useNavigation()

-  if (!album) {
-    return <></>
-  }
-
  return (
    <AlbumContextPressable
      album={album}
      menuStyle={[styles.itemMenu, { width: size }]}
      triggerWrapperStyle={[styles.itemWrapper, { height }]}
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}>
-      <CoverArt
-        type="cover"
-        coverArt={album.coverArt}
-        style={{ height: size, width: size }}
-        resizeMode="cover"
-        size="thumbnail"
-      />
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height: size, width: size }} resizeMode={'cover'} />
      <View style={styles.itemDetails}>
        <Text style={styles.title} numberOfLines={1}>
          {album.name}
@@ -47,7 +38,7 @@ const AlbumItem = React.memo<{
      </View>
    </AlbumContextPressable>
  )
-}, equal)
+})

 const AlbumListRenderItem: React.FC<{
  item: { album: Album; size: number; height: number }
@@ -66,28 +57,30 @@ const filterOptions: OptionData[] = [
 ]

 const AlbumsList = () => {
-  const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
-  const setFilter = useStore(store => store.setLibraryAlbumFilter)
-
-  const { isLoading, data, fetchNextPage, refetch } = useQueryAlbumList(filter.type as GetAlbumList2TypeBase, 300)
+  const fetchAlbums = useStore(selectMusic.fetchAlbums)
+  const { list, refreshing, refresh, reset, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300)
+  const filter = useStore(selectSettings.libraryAlbumFilter)
+  const setFilter = useStore(selectSettings.setLibraryAlbumFilter)

  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={data ? data.pages.flatMap(albums => albums.map(album => ({ album, size, height }))) : []}
+        data={list.map(album => ({ album, size, height }))}
        renderItem={AlbumListRenderItem}
        keyExtractor={item => item.album.id}
        numColumns={3}
        removeClippedSubviews={true}
-        refreshing={isLoading}
-        onRefresh={refetch}
+        refreshing={refreshing}
+        onRefresh={refresh}
        overScrollMode="never"
-        onEndReached={() => fetchNextPage()}
+        onEndReached={fetchNextPage}
        onEndReachedThreshold={6}
        windowSize={5}
      />
@@ -1,10 +1,12 @@
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useQueryArtists } from '@app/hooks/query'
-import { Artist } from '@app/models/library'
+import { useFetchList } from '@app/hooks/list'
+import { Artist } from '@app/models/music'
 import { ArtistFilterType } from '@app/models/settings'
-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 React, { useEffect, useState } from 'react'
 import { StyleSheet, View } from 'react-native'

@@ -19,19 +21,13 @@ const filterOptions: OptionData[] = [
 ]

 const ArtistsList = () => {
-  const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
-  const setFilter = useStore(store => store.setLibraryArtistFiler)
-
-  const { isLoading, data, refetch } = useQueryArtists()
+  const fetchArtists = useStore(selectMusic.fetchArtists)
+  const { list, refreshing, refresh } = useFetchList(fetchArtists)
+  const filter = useStore(selectSettings.libraryArtistFilter)
+  const setFilter = useStore(selectSettings.setLibraryArtistFiler)
  const [sortedList, setSortedList] = useState<Artist[]>([])

  useEffect(() => {
-    if (!data) {
-      setSortedList([])
-      return
-    }
-
-    const list = Object.values(data.byId)
    switch (filter.type) {
      case 'random':
        setSortedList([...list].sort(() => Math.random() - 0.5))
@@ -39,14 +35,11 @@ const ArtistsList = () => {
      case 'starred':
        setSortedList([...list].filter(a => a.starred))
        break
-      case 'alphabeticalByName':
-        setSortedList(data.allIds.map(id => data.byId[id]))
-        break
      default:
        setSortedList([...list])
        break
    }
-  }, [filter.type, data])
+  }, [list, filter])

  return (
    <View style={styles.container}>
@@ -54,8 +47,8 @@ const ArtistsList = () => {
        data={sortedList}
        renderItem={ArtistRenderItem}
        keyExtractor={item => item.id}
-        onRefresh={refetch}
-        refreshing={isLoading}
+        onRefresh={refresh}
+        refreshing={refreshing}
        overScrollMode="never"
        windowSize={3}
        contentMarginTop={6}
@@ -1,25 +1,27 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useQueryPlaylists } from '@app/hooks/query'
-import { Playlist } from '@app/models/library'
-import { mapById } from '@app/util/state'
+import { useFetchList } from '@app/hooks/list'
+import { PlaylistListItem } from '@app/models/music'
+import { selectMusic } from '@app/state/music'
+import { useStore } from '@app/state/store'
 import React from 'react'
 import { StyleSheet } from 'react-native'

-const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => (
+const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
  <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )

 const PlaylistsList = () => {
-  const { isLoading, data, refetch } = useQueryPlaylists()
+  const fetchPlaylists = useStore(selectMusic.fetchPlaylists)
+  const { list, refreshing, refresh } = useFetchList(fetchPlaylists)

  return (
    <GradientFlatList
-      data={data ? mapById(data?.byId, data?.allIds) : []}
+      data={list}
      renderItem={PlaylistRenderItem}
      keyExtractor={item => item.id}
-      onRefresh={refetch}
-      refreshing={isLoading}
+      onRefresh={refresh}
+      refreshing={refreshing}
      overScrollMode="never"
      windowSize={5}
      contentMarginTop={6}
@@ -2,9 +2,10 @@ 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/library'
-import { mapTrackExtToSong } from '@app/models/map'
-import { useStoreDeep } from '@app/state/store'
+import { Song } from '@app/models/music'
+import { useStore } 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'

@@ -26,7 +27,8 @@ const SongRenderItem: React.FC<{
 )

 const NowPlayingQueue = React.memo<{}>(() => {
-  const queue = useStoreDeep(store => store.queue)
+  const queue = useStore(selectTrackPlayer.queue)
+  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
  const skipTo = useSkipTo()

  return (
@@ -2,11 +2,13 @@ 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 { PressableStar } from '@app/components/Star'
+import Star from '@app/components/Star'
+import { useStarred } from '@app/hooks/music'
 import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
-import { mapTrackExtToSong } from '@app/models/map'
-import { QueueContextType, TrackExt } from '@app/models/trackplayer'
-import { useStore, useStoreDeep } from '@app/state/store'
+import { selectMusic } from '@app/state/music'
+import { useStore } 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'
@@ -39,8 +41,9 @@ function getContextName(type?: QueueContextType) {
 const NowPlayingHeader = React.memo<{
  track?: TrackExt
 }>(({ track }) => {
-  const queueName = useStore(store => store.queueName)
-  const queueContextType = useStore(store => store.queueContextType)
+  const queueName = useStore(selectTrackPlayer.queueName)
+  const queueContextType = useStore(selectTrackPlayer.queueContextType)
+  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)

  if (!track) {
    return <></>
@@ -91,11 +94,11 @@ const headerStyles = StyleSheet.create({
 })

 const SongCoverArt = () => {
-  const coverArt = useStore(store => store.currentTrack?.coverArt)
+  const track = useStore(selectTrackPlayer.currentTrack)

  return (
    <View style={coverArtStyles.container}>
-      <CoverArt type="cover" size="original" coverArt={coverArt} style={coverArtStyles.image} />
+      <CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
    </View>
  )
 }
@@ -114,22 +117,26 @@ const coverArtStyles = StyleSheet.create({
 })

 const SongInfo = () => {
-  const id = useStore(store => store.currentTrack?.id)
-  const artist = useStore(store => store.currentTrack?.artist)
-  const title = useStore(store => store.currentTrack?.title)
+  const track = useStore(selectTrackPlayer.currentTrack)
+  const id = track?.id || '-1'
+  const type = 'song'
+  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}>
-          {title}
+          {track?.title}
        </Text>
        <Text numberOfLines={1} style={infoStyles.artist}>
-          {artist}
+          {track?.artist}
        </Text>
      </View>
      <View style={infoStyles.controls}>
-        <PressableStar id={id || '-1'} type={'song'} size={32} />
+        <PressableOpacity onPress={() => setStarred(id, type, starred)}>
+          <Star size={32} starred={starred} />
+        </PressableOpacity>
      </View>
    </View>
  )
@@ -163,8 +170,7 @@ const infoStyles = StyleSheet.create({
 })

 const SeekBar = () => {
-  const position = useStore(store => store.progress.position)
-  const duration = useStore(store => store.progress.duration)
+  const { position, duration } = useStore(selectTrackPlayer.progress)
  const seekTo = useSeekTo()
  const [value, setValue] = useState(0)
  const [sliding, setSliding] = useState(false)
@@ -256,15 +262,15 @@ const seekStyles = StyleSheet.create({
 })

 const PlayerControls = () => {
-  const state = useStore(store => store.playerState)
+  const state = useStore(selectTrackPlayer.playerState)
  const play = usePlay()
  const pause = usePause()
  const next = useNext()
  const previous = usePrevious()
-  const shuffled = useStore(store => !!store.shuffleOrder)
-  const toggleShuffle = useStore(store => store.toggleShuffle)
-  const repeatMode = useStore(store => store.repeatMode)
-  const toggleRepeat = useStore(store => store.toggleRepeatMode)
+  const shuffled = useStore(selectTrackPlayer.shuffled)
+  const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle)
+  const repeatMode = useStore(selectTrackPlayer.repeatMode)
+  const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode)
  const navigation = useNavigation()

  let playPauseIcon: string
@@ -386,7 +392,7 @@ type RootStackParamList = {
 type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'>

 const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
-  const track = useStoreDeep(store => store.currentTrack)
+  const track = useStore(selectTrackPlayer.currentTrack)

  useEffect(() => {
    if (!track) {
@@ -398,7 +404,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {

  return (
    <View style={styles.container}>
-      <ImageGradientBackground imagePath={imagePath} height={'100%'} />
+      <ImageGradientBackground imagePath={imagePath} />
      <NowPlayingHeader track={track} />
      <View style={styles.content}>
        <SongCoverArt />
@@ -4,47 +4,46 @@ 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 { useQuerySearchResults } from '@app/hooks/query'
-import { useSetQueue } from '@app/hooks/trackplayer'
-import { Album, Artist, SearchResults, Song } from '@app/models/library'
+import { useActiveServerRefresh } from '@app/hooks/server'
+import { ListableItem, SearchResults, Song } from '@app/models/music'
+import { selectMusic } from '@app/state/music'
+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 { useFocusEffect, useNavigation } from '@react-navigation/native'
-import equal from 'fast-deep-equal/es6/react'
-import _ from 'lodash'
+import debounce from 'lodash.debounce'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
  ActivityIndicator,
  InteractionManager,
  ScrollView,
+  StatusBar,
  StyleSheet,
  TextInput as ReactTextInput,
  View,
 } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'

 const SongItem = React.memo<{ item: Song }>(({ item }) => {
-  const { setQueue, isReady, contextId } = useSetQueue('song', [item])
+  const setQueue = useStore(selectTrackPlayer.setQueue)

  return (
    <ListItem
      item={item}
-      contextId={contextId}
+      contextId={item.id}
      queueId={0}
      showArt={true}
      showStar={false}
-      onPress={() => setQueue({ title: item.title, playTrack: 0 })}
-      disabled={!isReady}
+      onPress={() => setQueue([item], item.title, 'song', item.id, 0)}
    />
  )
-}, equal)
+})

 const ResultsCategory = React.memo<{
  name: string
  query: string
-  items: (Artist | Album | Song)[]
-  type: 'artist' | 'album' | 'song'
-}>(({ name, query, type, items }) => {
+  items: ListableItem[]
+}>(({ name, query, items }) => {
  const navigation = useNavigation()

  if (items.length === 0) {
@@ -55,8 +54,8 @@ const ResultsCategory = React.memo<{
    <>
      <Header>{name}</Header>
      {items.map(a =>
-        type === 'song' ? (
-          <SongItem key={a.id} item={a as Song} />
+        a.itemType === 'song' ? (
+          <SongItem key={a.id} item={a} />
        ) : (
          <ListItem key={a.id} item={a} showArt={true} showStar={false} />
        ),
@@ -71,7 +70,7 @@ const ResultsCategory = React.memo<{
      )}
    </>
  )
-}, equal)
+})

 const Results = React.memo<{
  results: SearchResults
@@ -79,62 +78,64 @@ const Results = React.memo<{
 }>(({ results, query }) => {
  return (
    <>
-      <ResultsCategory name="Artists" query={query} type={'artist'} items={results.artists} />
-      <ResultsCategory name="Albums" query={query} type={'album'} items={results.albums} />
-      <ResultsCategory name="Songs" query={query} type={'song'} items={results.songs} />
+      <ResultsCategory name="Artists" query={query} items={results.artists} />
+      <ResultsCategory name="Albums" query={query} items={results.albums} />
+      <ResultsCategory name="Songs" query={query} items={results.songs} />
    </>
  )
-}, equal)
+})

 const Search = () => {
-  const [query, setQuery] = useState('')
-  const { data, isLoading } = useQuerySearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 })
-
+  const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
+  const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
+  const [refreshing, setRefreshing] = useState(false)
  const [text, setText] = useState('')
  const searchBarRef = useRef<ReactTextInput>(null)
  const scrollRef = useRef<ScrollView>(null)
-  const paddingTop = useSafeAreaInsets().top

  useFocusEffect(
    useCallback(() => {
      const task = InteractionManager.runAfterInteractions(() => {
        setTimeout(() => {
-          if (text) {
-            return
-          }
          setText('')
-          setQuery('')
+          setResults({ artists: [], albums: [], songs: [] })
          searchBarRef.current?.focus()
          scrollRef.current?.scrollTo({ y: 0, animated: true })
        }, 50)
      })
      return () => task.cancel()
-    }, [text]),
+    }, [searchBarRef, scrollRef]),
  )

-  const debouncedSetQuery = useMemo(
+  useActiveServerRefresh(
+    useCallback(() => {
+      setText('')
+      setResults({ artists: [], albums: [], songs: [] })
+    }, []),
+  )
+
+  const debouncedonUpdateSearch = useMemo(
    () =>
-      _.debounce((value: string) => {
-        setQuery(value)
+      debounce(async (query: string) => {
+        setRefreshing(true)
+        setResults(await fetchSearchResults(query))
+        setRefreshing(false)
      }, 400),
-    [],
+    [fetchSearchResults],
  )

  const onChangeText = useCallback(
    (value: string) => {
      setText(value)
-      debouncedSetQuery(value)
+      debouncedonUpdateSearch(value)
    },
-    [setText, debouncedSetQuery],
+    [setText, debouncedonUpdateSearch],
  )

-  const resultsCount =
-    (data ? data.pages.reduce((acc, val) => (acc += val.artists.length), 0) : 0) +
-    (data ? data.pages.reduce((acc, val) => (acc += val.albums.length), 0) : 0) +
-    (data ? data.pages.reduce((acc, val) => (acc += val.songs.length), 0) : 0)
+  const resultsCount = results.albums.length + results.artists.length + results.songs.length

  return (
-    <GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={{ paddingTop }}>
+    <GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
      <View style={styles.content}>
        <View style={styles.inputBar}>
          <TextInput
@@ -144,13 +145,14 @@ const Search = () => {
            value={text}
            onChangeText={onChangeText}
          />
-          <ActivityIndicator animating={isLoading} size="small" color={colors.text.secondary} style={styles.activity} />
+          <ActivityIndicator
+            animating={refreshing}
+            size="small"
+            color={colors.text.secondary}
+            style={styles.activity}
+          />
        </View>
-        {data !== undefined && resultsCount > 0 ? (
-          <Results results={data.pages[0]} query={text} />
-        ) : (
-          <NothingHere style={styles.noResults} />
-        )}
+        {resultsCount > 0 ? <Results results={results} query={text} /> : <NothingHere style={styles.noResults} />}
      </View>
    </GradientScrollView>
  )
@@ -160,6 +162,9 @@ const styles = StyleSheet.create({
  scroll: {
    flex: 1,
  },
+  scrollContentContainer: {
+    paddingTop: StatusBar.currentHeight,
+  },
  content: {
    paddingHorizontal: 20,
    paddingBottom: 20,
@@ -1,34 +1,24 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useQuerySearchResults } from '@app/hooks/query'
-import { useSetQueue } from '@app/hooks/trackplayer'
-import { Album, Artist, Song } from '@app/models/library'
-import { Search3Params } from '@app/subsonic/params'
+import { useFetchPaginatedList } from '@app/hooks/list'
+import { AlbumListItem, Artist, Song } from '@app/models/music'
+import { selectMusic } from '@app/state/music'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
 import { useNavigation } from '@react-navigation/native'
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { StyleSheet } from 'react-native'

-type SearchListItemType = Album | Song | Artist
+type SearchListItemType = AlbumListItem | Song | Artist

-const SongResultsListItem: React.FC<{ item: Song }> = ({ item }) => {
-  const { setQueue, isReady, contextId } = useSetQueue('song', [item])
+const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
+  const setQueue = useStore(selectTrackPlayer.setQueue)

-  return (
-    <ListItem
-      item={item}
-      contextId={contextId}
-      queueId={0}
-      showArt={true}
-      showStar={false}
-      listStyle="small"
-      onPress={() => setQueue({ title: item.title, playTrack: 0 })}
-      style={styles.listItem}
-      disabled={!isReady}
-    />
-  )
-}
+  let onPress
+  if (item.itemType === 'song') {
+    onPress = () => setQueue([item], item.title, 'song', item.id, 0)
+  }

-const OtherResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
  return (
    <ListItem
      item={item}
@@ -37,19 +27,12 @@ const OtherResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item })
      showArt={true}
      showStar={false}
      listStyle="small"
+      onPress={onPress}
      style={styles.listItem}
    />
  )
 }

-const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
-  if (item.itemType === 'song') {
-    return <SongResultsListItem item={item} />
-  } else {
-    return <OtherResultsListItem item={item} />
-  }
-}
-
 const SearchResultsRenderItem: React.FC<{ item: SearchListItemType }> = ({ item }) => <ResultsListItem item={item} />

 const SearchResultsView: React.FC<{
@@ -57,28 +40,26 @@ const SearchResultsView: React.FC<{
  type: 'album' | 'artist' | 'song'
 }> = ({ query, type }) => {
  const navigation = useNavigation()
-
-  const size = 100
-  const params: Search3Params = { query }
-
-  if (type === 'album') {
-    params.albumCount = size
-  } else if (type === 'artist') {
-    params.artistCount = size
-  } else {
-    params.songCount = size
-  }
-
-  const { data, isLoading, refetch, fetchNextPage } = useQuerySearchResults(params)
-
-  const items: (Artist | Album | Song)[] = []
-  if (type === 'album') {
-    data && items.push(...data.pages.flatMap(p => p.albums))
-  } else if (type === 'artist') {
-    data && items.push(...data.pages.flatMap(p => p.artists))
-  } else {
-    data && items.push(...data.pages.flatMap(p => p.songs))
-  }
+  const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
+  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>(
+    useCallback(
+      (size, offset) =>
+        fetchSearchResults(query, type, size, offset).then(results => {
+          switch (type) {
+            case 'album':
+              return results.albums
+            case 'artist':
+              return results.artists
+            case 'song':
+              return results.songs
+            default:
+              return []
+          }
+        }),
+      [fetchSearchResults, query, type],
+    ),
+    100,
+  )

  useEffect(() => {
    navigation.setOptions({
@@ -89,13 +70,13 @@ const SearchResultsView: React.FC<{

  return (
    <GradientFlatList
-      data={items}
+      data={list}
      renderItem={SearchResultsRenderItem}
      keyExtractor={(item, i) => i.toString()}
-      onRefresh={refetch}
-      refreshing={isLoading}
+      onRefresh={refresh}
+      refreshing={refreshing}
      overScrollMode="never"
-      onEndReached={() => fetchNextPage}
+      onEndReached={fetchNextPage}
      removeClippedSubviews={true}
      onEndReachedThreshold={2}
      contentMarginTop={6}
@@ -1,7 +1,8 @@
 import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
 import { Server } from '@app/models/settings'
-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 toast from '@app/util/toast'
@@ -9,7 +10,7 @@ import { useNavigation } from '@react-navigation/native'
 import md5 from 'md5'
 import React, { useCallback, useState } from 'react'
 import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
-import uuid from 'react-native-uuid'
+import { v4 as uuidv4 } from 'uuid'
 import SettingsSwitch from '@app/components/SettingsSwitch'

 const PASSWORD_PLACEHOLDER = 'PASSWORD_PLACEHOLDER'
@@ -18,13 +19,13 @@ const ServerView: React.FC<{
  id?: string
 }> = ({ id }) => {
  const navigation = useNavigation()
-  const activeServerId = useStore(store => store.settings.activeServerId)
-  const servers = useStoreDeep(store => store.settings.servers)
-  const addServer = useStore(store => store.addServer)
-  const updateServer = useStore(store => store.updateServer)
-  const removeServer = useStore(store => store.removeServer)
-  const server = id ? servers[id] : undefined
-  const pingServer = useStore(store => store.pingServer)
+  const activeServer = useStore(selectSettings.activeServer)
+  const servers = useStore(selectSettings.servers)
+  const addServer = useStore(selectSettings.addServer)
+  const updateServer = useStore(selectSettings.updateServer)
+  const removeServer = useStore(selectSettings.removeServer)
+  const server = id ? servers.find(s => s.id === id) : undefined
+  const pingServer = useStore(selectSettings.pingServer)

  const [address, setAddress] = useState(server?.address || '')
  const [username, setUsername] = useState(server?.username || '')
@@ -35,14 +36,16 @@ const ServerView: React.FC<{
  )

  const [testing, setTesting] = useState(false)
+  const [removing, setRemoving] = useState(false)
+  const [saving, setSaving] = useState(false)

  const validate = useCallback(() => {
    return !!address && !!username && !!password
  }, [address, username, password])

  const canRemove = useCallback(() => {
-    return id && Object.keys(servers).length > 1 && activeServerId !== id
-  }, [id, servers, activeServerId])
+    return id && servers.length > 1 && activeServer?.id !== id
+  }, [id, servers, activeServer])

  const exit = useCallback(() => {
    if (navigation.canGoBack()) {
@@ -55,7 +58,7 @@ const ServerView: React.FC<{
  const createServer = useCallback<() => Server>(() => {
    if (usePlainPassword) {
      return {
-        id: server?.id || '',
+        id: server?.id || uuidv4(),
        usePlainPassword,
        plainPassword: password,
        address,
@@ -70,12 +73,12 @@ const ServerView: React.FC<{
      salt = server.salt
      token = server.token
    } else {
-      salt = uuid.v4() as string
+      salt = uuidv4()
      token = md5(password + salt)
    }

    return {
-      id: server?.id || '',
+      id: server?.id || uuidv4(),
      address,
      username,
      usePlainPassword,
@@ -89,15 +92,22 @@ const ServerView: React.FC<{
      return
    }

+    setSaving(true)
    const update = createServer()

-    if (id) {
-      updateServer(update)
-    } else {
-      addServer(update)
+    const waitForSave = async () => {
+      try {
+        if (id) {
+          updateServer(update)
+        } else {
+          await addServer(update)
+        }
+        exit()
+      } catch (err) {
+        setSaving(false)
+      }
    }
-
-    exit()
+    waitForSave()
  }, [addServer, createServer, exit, id, updateServer, validate])

  const remove = useCallback(() => {
@@ -105,8 +115,16 @@ const ServerView: React.FC<{
      return
    }

-    removeServer(id as string)
-    exit()
+    setRemoving(true)
+    const waitForRemove = async () => {
+      try {
+        await removeServer(id as string)
+        exit()
+      } catch (err) {
+        setRemoving(false)
+      }
+    }
+    waitForRemove()
  }, [canRemove, exit, id, removeServer])

  const togglePlainPassword = useCallback(
@@ -145,8 +163,8 @@ const ServerView: React.FC<{
  }, [createServer, pingServer])

  const disableControls = useCallback(() => {
-    return !validate() || testing
-  }, [validate, testing])
+    return !validate() || testing || removing || saving
+  }, [validate, testing, removing, saving])

  const formatAddress = useCallback(() => {
    let addressFormatted = address.trim()
@@ -167,7 +185,7 @@ const ServerView: React.FC<{
  }

  return (
-    <GradientScrollView style={styles.scroll}>
+    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
      <View style={styles.content}>
        <Text style={styles.inputTitle}>Address</Text>
        <TextInput
@@ -176,8 +194,6 @@ 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}
@@ -188,9 +204,7 @@ const ServerView: React.FC<{
          placeholderTextColor="grey"
          selectionColor={colors.text.secondary}
          textContentType="username"
-          autoComplete="username"
-          importantForAutofill="yes"
-          autoCapitalize="none"
+          autoCompleteType="username"
          placeholder="demo"
          value={username}
          onChangeText={setUsername}
@@ -201,9 +215,7 @@ const ServerView: React.FC<{
          placeholderTextColor="grey"
          selectionColor={colors.text.secondary}
          textContentType="password"
-          autoComplete="password"
-          autoCapitalize="none"
-          importantForAutofill="yes"
+          autoCompleteType="password"
          secureTextEntry={true}
          placeholder="demo"
          value={password}
@@ -242,6 +254,9 @@ const styles = StyleSheet.create({
  scroll: {
    flex: 1,
  },
+  scrollContentContainer: {
+    // paddingTop: StatusBar.currentHeight,
+  },
  content: {
    paddingHorizontal: 20,
  },
@@ -5,23 +5,24 @@ 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, useResetImageCache } from '@app/hooks/settings'
+import { useSwitchActiveServer } from '@app/hooks/server'
 import { Server } from '@app/models/settings'
-import { useStore, useStoreDeep } from '@app/state/store'
+import { selectCache } from '@app/state/cache'
+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'
 import React, { useCallback, useState } from 'react'
-import { KeyboardTypeOptions, Linking, Modal, Pressable, StyleSheet, Text, View } from 'react-native'
+import { KeyboardTypeOptions, Linking, Modal, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { version } from '../../package.json'

 const ServerItem = React.memo<{
  server: Server
 }>(({ server }) => {
-  const activeServerId = useStore(store => store.settings.activeServerId)
+  const activeServer = useStore(selectSettings.activeServer)
  const switchActiveServer = useSwitchActiveServer()
  const navigation = useNavigation()

@@ -35,7 +36,7 @@ const ServerItem = React.memo<{
      subtitle={server.username}
      onPress={() => navigation.navigate('server', { id: server.id })}>
      <PressableOpacity style={styles.serverActive} onPress={setActive}>
-        {activeServerId === server.id ? (
+        {activeServer && activeServer.id === server.id ? (
          <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
        ) : (
          <Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
@@ -192,31 +193,45 @@ function secondsUnit(seconds: string): string {
 }

 const SettingsContent = React.memo(() => {
-  const servers = useStoreDeep(store => store.settings.servers)
-  const scrobble = useStore(store => store.settings.scrobble)
-  const setScrobble = useStore(store => store.setScrobble)
+  const servers = useStore(selectSettings.servers)
+  const scrobble = useStore(selectSettings.scrobble)
+  const setScrobble = useStore(selectSettings.setScrobble)

-  const maxBitrateWifi = useStore(store => store.settings.maxBitrateWifi)
-  const setMaxBitrateWifi = useStore(store => store.setMaxBitrateWifi)
+  // doesn't seem to ever be a case where we want this off
+  // will remove later if there isn't a use case for disabling
+  // const estimateContentLength = useStore(selectSettings.estimateContentLength)
+  // const setEstimateContentLength = useStore(selectSettings.setEstimateContentLength)

-  const maxBitrateMobile = useStore(store => store.settings.maxBitrateMobile)
-  const setMaxBitrateMobile = useStore(store => store.setMaxBitrateMobile)
+  const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi)
+  const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi)

-  const minBuffer = useStore(store => store.settings.minBuffer)
-  const setMinBuffer = useStore(store => store.setMinBuffer)
-  const maxBuffer = useStore(store => store.settings.maxBuffer)
-  const setMaxBuffer = useStore(store => store.setMaxBuffer)
+  const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile)
+  const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile)

+  const minBuffer = useStore(selectSettings.minBuffer)
+  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 resetImageCache = useResetImageCache()

  const navigation = useNavigation()

-  const clear = useCallback(async () => {
+  const clear = useCallback(() => {
    setClearing(true)
-    await resetImageCache()
-    setClearing(false)
-  }, [resetImageCache])
+
+    const waitForClear = async () => {
+      try {
+        await clearImageCache()
+      } catch (err) {
+        console.log(err)
+      } finally {
+        setClearing(false)
+      }
+    }
+    waitForClear()
+  }, [clearImageCache])

  const setMinBufferText = useCallback((text: string) => setMinBuffer(parseFloat(text)), [setMinBuffer])
  const setMaxBufferText = useCallback((text: string) => setMaxBuffer(parseFloat(text)), [setMaxBuffer])
@@ -224,7 +239,7 @@ const SettingsContent = React.memo(() => {
  return (
    <View style={styles.content}>
      <Header>Servers</Header>
-      {Object.values(servers).map(s => (
+      {servers.map(s => (
        <ServerItem key={s.id} server={s} />
      ))}
      <Button
@@ -236,6 +251,12 @@ 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()}
@@ -288,10 +309,8 @@ const SettingsContent = React.memo(() => {
 })

 const Settings = () => {
-  const paddingTop = useSafeAreaInsets().top
-
  return (
-    <GradientScrollView style={styles.scroll} contentContainerStyle={{ paddingTop }}>
+    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
      <SettingsContent />
    </GradientScrollView>
  )
@@ -301,6 +320,9 @@ const styles = StyleSheet.create({
  scroll: {
    flex: 1,
  },
+  scrollContentContainer: {
+    paddingTop: StatusBar.currentHeight,
+  },
  content: {
    paddingHorizontal: 20,
    paddingBottom: 40,
@@ -4,13 +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 { useQueryAlbum, useQueryCoverArtPath, useQueryPlaylist } from '@app/hooks/query'
-import { useSetQueue } from '@app/hooks/trackplayer'
-import { Album, Playlist, Song } from '@app/models/library'
+import { useCoverArtFile } from '@app/hooks/cache'
+import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
+import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
+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 equal from 'fast-deep-equal/es6/react'
 import React, { useState } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'

@@ -30,7 +30,6 @@ const SongRenderItem: React.FC<{
    subtitle?: string
    onPress?: () => void
    showArt?: boolean
-    disabled?: boolean
  }
 }> = ({ item }) => (
  <ListItem
@@ -41,21 +40,24 @@ const SongRenderItem: React.FC<{
    onPress={item.onPress}
    showArt={item.showArt}
    style={styles.listItem}
-    disabled={item.disabled}
  />
 )

 const SongListDetails = React.memo<{
  title: string
  type: SongListType
-  songList?: Album | Playlist
-  songs?: Song[]
+  songList?: AlbumWithSongs | PlaylistWithSongs
  subtitle?: string
-}>(({ title, songList, songs, subtitle, type }) => {
-  const { data: coverArtPath } = useQueryCoverArtPath(songList?.coverArt, 'thumbnail')
+}>(({ title, songList, subtitle, type }) => {
+  const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
  const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
+  const setQueue = useStore(selectTrackPlayer.setQueue)

-  const _songs = [...(songs || [])]
+  if (!songList) {
+    return <SongListDetailsFallback />
+  }
+
+  const _songs = [...songList.songs]
  let typeName = ''

  if (type === 'album') {
@@ -73,16 +75,6 @@ const SongListDetails = React.memo<{
    typeName = 'Playlist'
  }

-  const { setQueue, isReady, contextId } = useSetQueue(type, _songs)
-
-  if (!songList) {
-    return <SongListDetailsFallback />
-  }
-
-  const disabled = !isReady || _songs.length === 0
-  const play = (track?: number, shuffle?: boolean) => () =>
-    setQueue({ title: songList.name, playTrack: track, shuffle })
-
  return (
    <View style={styles.container}>
      <HeaderBar
@@ -93,99 +85,74 @@ const SongListDetails = React.memo<{
      <ImageGradientFlatList
        data={_songs.map((s, i) => ({
          song: s,
-          contextId,
+          contextId: songList.id,
          queueId: i,
          subtitle: s.artist,
-          onPress: play(i),
+          onPress: () => setQueue(_songs, songList.name, type, songList.id, i),
          showArt: songList.itemType === 'playlist',
-          disabled: disabled,
        }))}
        renderItem={SongRenderItem}
        keyExtractor={(item, i) => i.toString()}
        backgroundProps={{
-          imagePath: coverArtPath,
+          imagePath: coverArtFile?.file?.path,
          style: styles.container,
          onGetColor: setHeaderColor,
        }}
        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> : <></>}
-            <ListPlayerControls
-              style={styles.controls}
-              songs={_songs}
-              typeName={typeName}
-              play={play(undefined, false)}
-              shuffle={play(undefined, true)}
-              disabled={disabled}
-            />
+            {songList.songs.length > 0 && (
+              <ListPlayerControls
+                style={styles.controls}
+                songs={_songs}
+                typeName={typeName}
+                queueName={songList.name}
+                queueContextId={songList.id}
+                queueContextType={type}
+              />
+            )}
          </View>
        }
      />
    </View>
  )
-}, equal)
+})

 const PlaylistView = React.memo<{
  id: string
  title: string
-  playlist?: Playlist
-}>(({ id, title, playlist }) => {
-  const query = useQueryPlaylist(id, playlist)
-
-  return (
-    <SongListDetails
-      title={title}
-      songList={query.data?.playlist}
-      songs={query.data?.songs}
-      subtitle={query.data?.playlist?.comment}
-      type="playlist"
-    />
-  )
-}, equal)
+}>(({ id, title }) => {
+  const playlist = usePlaylistWithSongs(id)
+  return <SongListDetails title={title} songList={playlist} subtitle={playlist?.comment} type="playlist" />
+})

 const AlbumView = React.memo<{
  id: string
  title: string
-  album?: Album
-}>(({ id, title, album }) => {
-  const query = useQueryAlbum(id, album)
-
+}>(({ id, title }) => {
+  const album = useAlbumWithSongs(id)
  return (
    <SongListDetails
      title={title}
-      songList={query.data?.album}
-      songs={query.data?.songs}
-      subtitle={(query.data?.album?.artist || '') + (query.data?.album?.year ? ' • ' + query.data?.album?.year : '')}
+      songList={album}
+      subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
      type="album"
    />
  )
-}, equal)
+})

 const SongListView = React.memo<{
  id: string
  title: string
  type: SongListType
-  album?: Album
-  playlist?: Playlist
-}>(({ id, title, type, album, playlist }) => {
-  return type === 'album' ? (
-    <AlbumView id={id} title={title} album={album} />
-  ) : (
-    <PlaylistView id={id} title={title} playlist={playlist} />
-  )
-}, equal)
+}>(({ id, title, type }) => {
+  return type === 'album' ? <AlbumView id={id} title={title} /> : <PlaylistView id={id} title={title} />
+})

 const styles = StyleSheet.create({
  container: {
@@ -229,12 +196,6 @@ const styles = StyleSheet.create({
  listItem: {
    paddingHorizontal: 20,
  },
-  nothing: {
-    width: '100%',
-  },
-  listLoading: {
-    marginTop: 10,
-  },
 })

 export default SongListView
@@ -45,7 +45,7 @@ const SplashPage: React.FC<{}> = ({ children }) => {

  const splash = (
    <Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
-      <GradientBackground style={styles.background} height="100%">
+      <GradientBackground style={styles.background}>
        <View style={styles.logoContainer}>
          <Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
          <Text style={styles.text}>subtracks</Text>
@@ -0,0 +1,293 @@
+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 { Store } from './store'
+
+const queues: Record<CacheItemTypeKey, PromiseQueue> = {
+  coverArt: new PromiseQueue(5),
+  coverArtThumb: new PromiseQueue(50),
+  artistArt: new PromiseQueue(5),
+  artistArtThumb: new PromiseQueue(50),
+  song: new PromiseQueue(1),
+}
+
+export type CacheDownload = CacheFile & CacheRequest
+
+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,
+    itemId: string,
+    url: string | (() => string | Promise<string | undefined>),
+  ) => Promise<void>
+
+  // cache: DownloadedItemsByServer
+  cacheDirs: CacheDirsByServer
+  cacheFiles: CacheFilesByServer
+  cacheRequests: CacheRequestsByServer
+
+  fetchCoverArtFilePath: (coverArt: string, size?: CacheImageSize) => Promise<string | undefined>
+
+  createCache: (serverId: string) => Promise<void>
+  prepareCache: (serverId: string) => void
+  pendingRemoval: Record<string, boolean>
+  removeCache: (serverId: string) => Promise<void>
+  clearImageCache: () => Promise<void>
+}
+
+export const selectCache = {
+  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: {},
+  cacheRequests: {},
+
+  cacheItem: async (key, itemId, url) => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    const activeServerId = get().settings.activeServer
+    if (!activeServerId) {
+      return
+    }
+
+    if (get().pendingRemoval[activeServerId]) {
+      return
+    }
+
+    const inProgress = get().cacheRequests[activeServerId][key][itemId]
+    if (inProgress && inProgress.promise !== undefined) {
+      return await inProgress.promise
+    }
+
+    const existing = get().cacheFiles[activeServerId][key][itemId]
+    if (existing) {
+      return
+    }
+
+    const path = `${get().cacheDirs[activeServerId][key]}/${itemId}`
+
+    const promise = queues[key].enqueue(async () => {
+      const urlResult = typeof url === 'string' ? url : url()
+      const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult
+
+      try {
+        if (!fromUrl) {
+          throw new Error('cannot resolve url for cache request')
+        }
+
+        await RNFS.downloadFile({
+          fromUrl,
+          toFile: path,
+          // progressInterval: 100,
+          // progress: res => {
+          //   set(
+          //     produce<CacheSlice>(state => {
+          //       state.cacheRequests[activeServerId][key][itemId].progress = Math.max(
+          //         1,
+          //         res.bytesWritten / (res.contentLength || 1),
+          //       )
+          //     }),
+          //   )
+          // },
+        }).promise
+
+        set(
+          produce<CacheSlice>(state => {
+            state.cacheRequests[activeServerId][key][itemId].progress = 1
+            delete state.cacheRequests[activeServerId][key][itemId].promise
+          }),
+        )
+      } catch {
+        set(
+          produce<CacheSlice>(state => {
+            delete state.cacheFiles[activeServerId][key][itemId]
+            delete state.cacheRequests[activeServerId][key][itemId]
+          }),
+        )
+      }
+    })
+    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
+  },
+
+  fetchCoverArtFilePath: async (coverArt, size = 'thumbnail') => {
+    const client = get().client
+    if (!client) {
+      return
+    }
+
+    const activeServerId = get().settings.activeServer
+    if (!activeServerId) {
+      return
+    }
+
+    const key: CacheItemTypeKey = size === 'thumbnail' ? 'coverArtThumb' : 'coverArt'
+
+    const existing = get().cacheFiles[activeServerId][key][coverArt]
+    const inProgress = get().cacheRequests[activeServerId][key][coverArt]
+    if (existing && inProgress) {
+      if (inProgress.promise) {
+        await inProgress.promise
+      }
+      return `file://${existing.path}`
+    }
+
+    await get().cacheItem(key, coverArt, () =>
+      client.getCoverArtUri({
+        id: coverArt,
+        size: size === 'thumbnail' ? '256' : undefined,
+      }),
+    )
+
+    return `file://${get().cacheFiles[activeServerId][key][coverArt].path}`
+  },
+
+  createCache: async serverId => {
+    for (const type in CacheItemType) {
+      await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
+    }
+
+    set(
+      produce<CacheSlice>(state => {
+        state.cacheFiles[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(
+      produce<CacheSlice>(state => {
+        state.pendingRemoval[serverId] = true
+      }),
+    )
+
+    const cacheRequests = get().cacheRequests[serverId]
+    const pendingRequests: Promise<void>[] = []
+
+    for (const type in CacheItemType) {
+      const requests = Object.values(cacheRequests[type as CacheItemTypeKey])
+        .filter(r => r.promise !== undefined)
+        .map(r => r.promise) as Promise<void>[]
+      pendingRequests.push(...requests)
+    }
+
+    await Promise.all(pendingRequests)
+    await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`)
+
+    set(
+      produce<CacheSlice>(state => {
+        delete state.pendingRemoval[serverId]
+
+        if (state.cacheDirs[serverId]) {
+          delete state.cacheDirs[serverId]
+        }
+        if (state.cacheFiles[serverId]) {
+          delete state.cacheFiles[serverId]
+        }
+        if (state.cacheRequests[serverId]) {
+          delete state.cacheRequests[serverId]
+        }
+      }),
+    )
+  },
+
+  clearImageCache: async () => {
+    const cacheRequests = get().cacheRequests
+    for (const serverId in cacheRequests) {
+      const coverArtRequests = cacheRequests[serverId].coverArt
+      const artstArtRequests = cacheRequests[serverId].artistArt
+      const requests = [...Object.values(coverArtRequests), ...Object.values(artstArtRequests)]
+      const pendingRequests = [
+        ...(requests.filter(r => r.promise !== undefined).map(r => r.promise) as Promise<void>[]),
+      ]
+
+      await Promise.all(pendingRequests)
+
+      await rmdir(get().cacheDirs[serverId].coverArt)
+      await mkdir(get().cacheDirs[serverId].coverArt)
+
+      await rmdir(get().cacheDirs[serverId].artistArt)
+      await mkdir(get().cacheDirs[serverId].artistArt)
+
+      set(
+        produce<CacheSlice>(state => {
+          state.cacheFiles[serverId].coverArt = {}
+          state.cacheFiles[serverId].coverArtThumb = {}
+          state.cacheFiles[serverId].artistArt = {}
+          state.cacheFiles[serverId].artistArtThumb = {}
+        }),
+      )
+    }
+  },
+})
@@ -1,69 +1,11 @@
-import { Server } from '@app/models/settings'
-import { ById } from '@app/models/state'
-import { newCacheBuster } from './settings'
-import RNFS from 'react-native-fs'
-
-const migrations: Array<(state: any) => Promise<any>> = [
-  // 1
-  async state => {
+const migrations: Array<(state: any) => any> = [
+  state => {
    for (let server of state.settings.servers) {
      server.usePlainPassword = false
    }

    return state
  },
-
-  // 2
-  async 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
-  },
-
-  // 3
-  async state => {
-    state.settings.cacheBuster = newCacheBuster()
-
-    state.settings.servers = Object.values(state.settings.servers as Record<string, Server>).reduce(
-      (acc, server, i) => {
-        const newId = i.toString()
-
-        if (server.id === state.settings.activeServerId) {
-          state.settings.activeServerId = newId
-        }
-
-        server.id = newId
-        acc[newId] = server
-        return acc
-      },
-      {} as Record<string, Server>,
-    )
-
-    try {
-      await RNFS.unlink(`${RNFS.DocumentDirectoryPath}/servers`)
-    } catch (err) {
-      console.error(err)
-    }
-
-    return state
-  },
 ]

 export default migrations
@@ -0,0 +1,471 @@
+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]
+  },
+})
@@ -0,0 +1,142 @@
+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,
+    }
+  },
+})
@@ -1,41 +1,21 @@
-import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/settings'
-import { ById } from '@app/models/state'
-import { GetStore, SetStore } from '@app/state/store'
+import { AppSettings, ArtistFilterSettings, AlbumFilterSettings, Server } from '@app/models/settings'
+import { Store } from '@app/state/store'
 import { SubsonicApiClient } from '@app/subsonic/api'
-import uuid from 'react-native-uuid'
+import produce from 'immer'
+import { GetState, SetState } from 'zustand'

 export type SettingsSlice = {
-  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
-    cacheBuster: string
-  }
-
+  settings: AppSettings
  client?: SubsonicApiClient
-  resetServer: boolean
-
-  changeCacheBuster: () => void

  setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
-  addServer: (server: Server) => void
-  removeServer: (id: string) => 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
@@ -47,53 +27,80 @@ export type SettingsSlice = {
  setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
 }

-export function newCacheBuster(): string {
-  return (uuid.v4() as string).split('-')[0]
+export const selectSettings = {
+  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: SetStore, get: GetStore): SettingsSlice => ({
+export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>): SettingsSlice => ({
  settings: {
-    servers: {},
+    servers: [],
    screens: {
      home: {
-        listTypes: ['frequent', 'recent', 'starred', 'random'],
+        lists: ['frequent', 'recent', 'starred', 'random'],
      },
      library: {
-        albumsFilter: {
+        albums: {
          type: 'alphabeticalByArtist',
          fromYear: 1,
          toYear: 9999,
          genre: '',
        },
-        artistsFilter: {
+        artists: {
          type: 'alphabeticalByName',
        },
      },
    },
    scrobble: false,
+    estimateContentLength: true,
    maxBitrateWifi: 0,
    maxBitrateMobile: 192,
    minBuffer: 6,
    maxBuffer: 60,
-    cacheBuster: newCacheBuster(),
-  },
-
-  resetServer: false,
-
-  changeCacheBuster: () => {
-    set(store => {
-      store.settings.cacheBuster = newCacheBuster()
-    })
  },

  setActiveServer: async (id, force) => {
    const servers = get().settings.servers
-    const currentActiveServerId = get().settings.activeServerId
-    const newActiveServer = id ? servers[id] : undefined
+    const currentActiveServerId = get().settings.activeServer
+    const newActiveServer = servers.find(s => s.id === id)

    if (!newActiveServer) {
-      set(state => {
-        state.client = undefined
+      set({
+        client: undefined,
      })
      return
    }
@@ -102,60 +109,82 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
      return
    }

-    set(state => {
-      state.resetServer = true
-    })
+    get().prepareCache(newActiveServer.id)

-    set(state => {
-      state.settings.activeServerId = newActiveServer.id
-      state.client = new SubsonicApiClient(newActiveServer)
-    })
-
-    set(state => {
-      state.resetServer = false
-    })
+    set(
+      produce<Store>(state => {
+        state.settings.activeServer = newActiveServer.id
+        state.client = new SubsonicApiClient(newActiveServer)
+      }),
+    )
  },

-  addServer: server => {
-    const serverIds = Object.keys(get().settings.servers)
-    server.id =
-      serverIds.length === 0 ? '0' : (serverIds.map(i => parseInt(i, 10)).sort((a, b) => b - a)[0] + 1).toString()
+  getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),

-    set(state => {
-      state.settings.servers[server.id] = server
-    })
+  addServer: async server => {
+    await get().createCache(server.id)

-    if (Object.keys(get().settings.servers).length === 1) {
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.servers.push(server)
+      }),
+    )
+
+    if (get().settings.servers.length === 1) {
      get().setActiveServer(server.id)
    }
  },

-  removeServer: id => {
-    set(state => {
-      delete state.settings.servers[id]
-    })
+  removeServer: async id => {
+    await get().removeCache(id)
+
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.servers = state.settings.servers.filter(s => s.id !== id)
+      }),
+    )
  },

  updateServer: server => {
-    set(state => {
-      state.settings.servers[server.id] = server
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.servers = replaceIndex(
+          state.settings.servers,
+          state.settings.servers.findIndex(s => s.id === server.id),
+          server,
+        )
+      }),
+    )

-    if (get().settings.activeServerId === server.id) {
+    if (get().settings.activeServer === server.id) {
      get().setActiveServer(server.id, true)
    }
  },

  setScrobble: scrobble => {
-    set(state => {
-      state.settings.scrobble = scrobble
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.scrobble = scrobble
+      }),
+    )
+  },
+
+  setEstimateContentLength: estimateContentLength => {
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.estimateContentLength = estimateContentLength
+      }),
+    )
+
+    get().rebuildQueue()
  },

  setMaxBitrateWifi: maxBitrateWifi => {
-    set(state => {
-      state.settings.maxBitrateWifi = maxBitrateWifi
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.maxBitrateWifi = maxBitrateWifi
+      }),
+    )

    if (get().netState === 'wifi') {
      get().rebuildQueue()
@@ -163,9 +192,11 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
  },

  setMaxBitrateMobile: maxBitrateMobile => {
-    set(state => {
-      state.settings.maxBitrateMobile = maxBitrateMobile
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.maxBitrateMobile = maxBitrateMobile
+      }),
+    )

    if (get().netState === 'mobile') {
      get().rebuildQueue()
@@ -177,9 +208,11 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
      return
    }

-    set(state => {
-      state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
+      }),
+    )

    get().rebuildQueue()
  },
@@ -189,9 +222,11 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
      return
    }

-    set(state => {
-      state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
+      }),
+    )

    get().rebuildQueue()
  },
@@ -217,14 +252,24 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
  },

  setLibraryAlbumFilter: filter => {
-    set(state => {
-      state.settings.screens.library.albumsFilter = filter
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.screens.library.albums = filter
+      }),
+    )
  },

  setLibraryArtistFiler: filter => {
-    set(state => {
-      state.settings.screens.library.artistsFilter = filter
-    })
+    set(
+      produce<SettingsSlice>(state => {
+        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]
+}
@@ -1,95 +1,79 @@
+import { createMusicSlice, MusicSlice } from '@app/state/music'
 import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import equal from 'fast-deep-equal'
-import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
-import { persist, subscribeWithSelector } from 'zustand/middleware'
+import create from 'zustand'
+import { persist, StateStorage } from 'zustand/middleware'
+import { CacheSlice, createCacheSlice } from './cache'
 import migrations from './migrations'
+import { createMusicMapSlice, MusicMapSlice } from './musicmap'
 import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
-import produce, { Draft } from 'immer'
-import { WritableDraft } from 'immer/dist/internal'
+import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'

 const DB_VERSION = migrations.length

 export type Store = SettingsSlice &
-  TrackPlayerSlice & {
+  MusicSlice &
+  MusicMapSlice &
+  TrackPlayerSlice &
+  TrackPlayerMapSlice &
+  CacheSlice & {
    hydrated: boolean
    setHydrated: (hydrated: boolean) => void
  }

-// taken from zustand test examples:
-// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L20
-const immer =
-  <
-    T extends State,
-    CustomSetState extends SetState<T>,
-    CustomGetState extends GetState<T>,
-    CustomStoreApi extends StoreApi<T>,
-  >(
-    config: StateCreator<
-      T,
-      (partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void,
-      CustomGetState,
-      CustomStoreApi
-    >,
-  ): StateCreator<T, CustomSetState, CustomGetState, CustomStoreApi> =>
-  (set, get, api) =>
-    config(
-      (partial, replace) => {
-        const nextState = typeof partial === 'function' ? produce(partial as (state: Draft<T>) => T) : (partial as T)
-        return set(nextState, replace)
+const storage: StateStorage = {
+  getItem: async name => {
+    try {
+      return await AsyncStorage.getItem(name)
+    } catch (err) {
+      console.error(`getItem error (key: ${name})`, err)
+      return null
+    }
+  },
+  setItem: async (name, item) => {
+    try {
+      await AsyncStorage.setItem(name, item)
+    } catch (err) {
+      console.error(`setItem error (key: ${name})`, err)
+    }
+  },
+}
+
+export const useStore = create<Store>(
+  persist(
+    (set, get) => ({
+      ...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)
+        }
      },
-      get,
-      api,
-    )
+      migrate: (persistedState, version) => {
+        if (version > DB_VERSION) {
+          throw new Error('cannot migrate db on a downgrade, delete all data first')
+        }

-export type SetStore = (partial: Store | ((draft: WritableDraft<Store>) => void), replace?: boolean | undefined) => void
-export type GetStore = GetState<Store>
+        for (let i = version; i < DB_VERSION; i++) {
+          persistedState = migrations[i](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),
-        ...createTrackPlayerSlice(set, get),
-
-        hydrated: false,
-        setHydrated: hydrated =>
-          set(state => {
-            state.hydrated = hydrated
-          }),
-      })),
-      {
-        name: '@appStore',
-        version: DB_VERSION,
-        getStorage: () => AsyncStorage,
-        partialize: state => ({ settings: state.settings }),
-        onRehydrateStorage: _preState => {
-          return async (postState, _error) => {
-            await postState?.setActiveServer(postState.settings.activeServerId, true)
-            postState?.setHydrated(true)
-          }
-        },
-        migrate: async (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 = await migrations[i](persistedState)
-          }
-
-          return persistedState
-        },
+        return persistedState
      },
-    ),
+    },
  ),
 )
-
-export const useStoreDeep = <U>(stateSelector: StateSelector<Store, U>) => useStore(stateSelector, equal)
@@ -1,22 +1,28 @@
 import { NoClientError } from '@app/models/error'
-import { Progress, QueueContextType, TrackExt } from '@app/models/trackplayer'
+import { Song } from '@app/models/music'
 import PromiseQueue from '@app/util/PromiseQueue'
 import produce from 'immer'
-import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
-import { GetStore, SetStore } from './store'
+import TrackPlayer, { PlayerOptions, RepeatMode, State, Track } from 'react-native-track-player'
+import { GetState, SetState } from 'zustand'
+import { Store } from './store'

-export type SetQueueOptions = {
-  title: string
-  playTrack?: number
-  shuffle?: boolean
+export type TrackExt = Track & {
+  id: string
+  coverArt?: string
+  artistId?: string
+  albumId?: string
+  track?: number
+  discNumber?: number
 }

-export type SetQueueOptionsInternal = SetQueueOptions & {
-  queue: TrackExt[]
-  contextId: string
-  type: QueueContextType
+export type Progress = {
+  position: number
+  duration: number
+  buffered: number
 }

+export type QueueContextType = 'album' | 'playlist' | 'song' | 'artist'
+
 export type TrackPlayerSlice = {
  queueName?: string
  setQueueName: (name?: string) => void
@@ -44,7 +50,14 @@ export type TrackPlayerSlice = {
  setCurrentTrackIdx: (idx?: number) => void

  queue: TrackExt[]
-  setQueue: (options: SetQueueOptionsInternal) => Promise<void>
+  setQueue: (
+    songs: Song[],
+    name: string,
+    contextType: QueueContextType,
+    contextId: string,
+    playTrack?: number,
+    shuffle?: boolean,
+  ) => Promise<void>

  progress: Progress
  setProgress: (progress: Progress) => void
@@ -61,26 +74,55 @@ 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: SetStore, get: GetStore): TrackPlayerSlice => ({
+export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerSlice => ({
  queueName: undefined,
-  setQueueName: name =>
-    set(state => {
-      state.queueName = name
-    }),
+  setQueueName: name => set({ queueName: name }),

  queueContextType: undefined,
-  setQueueContextType: queueContextType =>
-    set(state => {
-      state.queueContextType = queueContextType
-    }),
+  setQueueContextType: queueContextType => set({ queueContextType }),

  queueContextId: undefined,
-  setQueueContextId: queueContextId =>
-    set(state => {
-      state.queueContextId = queueContextId
-    }),
+  setQueueContextId: queueContextId => set({ queueContextId }),

  shuffleOrder: undefined,
  toggleShuffle: async () => {
@@ -98,9 +140,7 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
        }

        await TrackPlayer.add(tracks)
-        set(state => {
-          state.shuffleOrder = shuffleOrder
-        })
+        set({ shuffleOrder })
      } else {
        const tracks = unshuffleTracks(queue, queueShuffleOrder)

@@ -115,18 +155,11 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
          await TrackPlayer.add(tracks)
        }

-        set(state => {
-          state.shuffleOrder = undefined
-        })
+        set({ shuffleOrder: undefined })
      }

-      const newQueue = await getQueue()
-      const newCurrentTrackIdx = await getCurrentTrack()
-
-      set(state => {
-        state.queue = newQueue
-      })
-      get().setCurrentTrackIdx(newCurrentTrackIdx)
+      set({ queue: await getQueue() })
+      get().setCurrentTrackIdx(await getCurrentTrack())
    })
  },

@@ -149,17 +182,12 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
      }

      await TrackPlayer.setRepeatMode(nextMode)
-      set(state => {
-        state.repeatMode = nextMode
-      })
+      set({ repeatMode: nextMode })
    })
  },

  playerState: State.None,
-  setPlayerState: playerState =>
-    set(state => {
-      state.playerState = playerState
-    }),
+  setPlayerState: playerState => set({ playerState }),

  currentTrack: undefined,
  currentTrackIdx: undefined,
@@ -173,44 +201,47 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
  },

  duckPaused: false,
-  setDuckPaused: duckPaused =>
-    set(state => {
-      state.duckPaused = duckPaused
-    }),
+  setDuckPaused: duckPaused => set({ duckPaused }),

  queue: [],
-  setQueue: async ({ queue, title, type, contextId, playTrack, shuffle }) => {
+  setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
    return trackPlayerCommands.enqueue(async () => {
      const shuffled = shuffle !== undefined ? shuffle : !!get().shuffleOrder

      await TrackPlayer.setupPlayer(get().getPlayerOptions())
      await TrackPlayer.reset()

-      if (queue.length === 0) {
+      if (songs.length === 0) {
+        return
+      }
+
+      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(state => {
-          state.shuffleOrder = shuffleOrder
-        })
+        set({ shuffleOrder })
        queue = tracks
        playTrack = 0
      } else {
-        set(state => {
-          state.shuffleOrder = undefined
-        })
+        set({ shuffleOrder: undefined })
      }

      playTrack = playTrack || 0

      try {
-        set(state => {
-          state.queue = queue
-          state.queueName = title
-          state.queueContextType = type
-          state.queueContextId = contextId
+        set({
+          queue,
+          queueName: name,
+          queueContextType: contextType,
+          queueContextId: contextId,
        })
        get().setCurrentTrackIdx(playTrack)

@@ -233,10 +264,7 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
  },

  progress: { position: 0, duration: 0, buffered: 0 },
-  setProgress: progress =>
-    set(state => {
-      state.progress = progress
-    }),
+  setProgress: progress => set({ progress }),

  scrobbleTrack: async id => {
    const client = get().client
@@ -258,9 +286,7 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
    if (netState === get().netState) {
      return
    }
-    set(state => {
-      state.netState = netState
-    })
+    set({ netState })
    get().rebuildQueue()
  },

@@ -272,9 +298,8 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
      }

      const currentTrack = await getCurrentTrack()
-      const playerState = await getPlayerState()
+      const state = await getPlayerState()
      const position = (await TrackPlayer.getPosition()) || 0
-      const repeatMode = await getRepeatMode()

      const queueName = get().queueName
      const queueContextId = get().queueContextId
@@ -291,11 +316,11 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
        return
      }

-      set(state => {
-        state.queue = queue
-        state.queueName = queueName
-        state.queueContextType = queueContextType
-        state.queueContextId = queueContextId
+      set({
+        queue,
+        queueName,
+        queueContextId,
+        queueContextType,
      })
      get().setCurrentTrackIdx(currentTrack)

@@ -305,10 +330,9 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
        await TrackPlayer.skip(currentTrack)
      }

-      await TrackPlayer.setRepeatMode(repeatMode)
      await TrackPlayer.seekTo(position)

-      if (playerState === State.Playing || forcePlay) {
+      if (state === State.Playing || forcePlay) {
        await TrackPlayer.play()
      }
    })
@@ -322,23 +346,23 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye

    return client.streamUri({
      id,
-      estimateContentLength: true,
+      estimateContentLength: get().settings.estimateContentLength,
      maxBitRate: get().netState === 'mobile' ? get().settings.maxBitrateMobile : get().settings.maxBitrateWifi,
    })
  },

  resetTrackPlayerState: () => {
-    set(state => {
-      state.queueName = undefined
-      state.queueContextType = undefined
-      state.queueContextId = undefined
-      state.shuffleOrder = undefined
-      state.repeatMode = RepeatMode.Off
-      state.playerState = State.None
-      state.currentTrack = undefined
-      state.currentTrackIdx = undefined
-      state.queue = []
-      state.progress = { position: 0, duration: 0, buffered: 0 }
+    set({
+      queueName: undefined,
+      queueContextType: undefined,
+      queueContextId: undefined,
+      shuffleOrder: undefined,
+      repeatMode: RepeatMode.Off,
+      playerState: State.None,
+      currentTrack: undefined,
+      currentTrackIdx: undefined,
+      queue: [],
+      progress: { position: 0, duration: 0, buffered: 0 },
    })
  },

@@ -0,0 +1,64 @@
+import { Song } from '@app/models/music'
+import userAgent from '@app/util/userAgent'
+import { GetState, SetState } from 'zustand'
+import { Store } from './store'
+import { TrackExt } from './trackplayer'
+
+export type TrackPlayerMapSlice = {
+  mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
+  mapSongstoTrackExts: (songs: Song[]) => Promise<TrackExt[]>
+  mapTrackExtToSong: (song: TrackExt) => Song
+}
+
+export const selectTrackPlayerMap = {
+  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) {
+      const filePath = await get().fetchCoverArtFilePath(song.coverArt)
+      if (filePath) {
+        artwork = filePath
+      }
+    }
+
+    return {
+      id: song.id,
+      title: song.title,
+      artist: song.artist || 'Unknown Artist',
+      album: song.album || 'Unknown Album',
+      url: song.streamUri,
+      userAgent,
+      artwork,
+      coverArt: song.coverArt,
+      duration: song.duration,
+      artistId: song.artistId,
+      albumId: song.albumId,
+      track: song.track,
+      discNumber: song.discNumber,
+    }
+  },
+
+  mapSongstoTrackExts: async songs => {
+    return await Promise.all(songs.map(get().mapSongtoTrackExt))
+  },
+
+  mapTrackExtToSong: track => {
+    return {
+      itemType: 'song',
+      id: track.id,
+      title: track.title as string,
+      artist: track.artist,
+      album: track.album,
+      streamUri: track.url as string,
+      coverArt: track.coverArt,
+      duration: track.duration,
+      artistId: track.artistId,
+      albumId: track.albumId,
+      track: track.track,
+      discNumber: track.discNumber,
+    }
+  },
+})
@@ -1,10 +1,14 @@
+import { StatusBar } from 'react-native'
+
 const header = 56
 const tabBar = 54

+const top = () => header + (StatusBar.currentHeight || 0)
 const bottom = () => tabBar

 export default {
  header,
  tabBar,
+  top,
  bottom,
 }
@@ -11,7 +11,6 @@ import {
  GetMusicDirectoryParams,
  GetPlaylistParams,
  GetPlaylistsParams,
-  GetSongParams,
  GetTopSongsParams,
  ScrobbleParams,
  Search3Params,
@@ -30,14 +29,13 @@ 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/xmldom'
+import { DOMParser } from 'xmldom'

 export class SubsonicApiError extends Error {
  method: string
@@ -65,30 +63,30 @@ export class SubsonicApiClient {
    this.username = server.username

    this.params = new URLSearchParams()
-    this.params.append('u', encodeURIComponent(server.username))
+    this.params.append('u', server.username)

    if (server.usePlainPassword) {
-      this.params.append('p', encodeURIComponent(server.plainPassword))
+      this.params.append('p', server.plainPassword)
    } else {
-      this.params.append('t', encodeURIComponent(server.token))
-      this.params.append('s', encodeURIComponent(server.salt))
+      this.params.append('t', server.token)
+      this.params.append('s', server.salt)
    }

-    this.params.append('v', '1.13.0')
+    this.params.append('v', '1.14.0')
    this.params.append('c', 'subtracks')
  }

  private buildUrl(method: string, params?: { [key: string]: any }): string {
-    let urlParams = this.params.toString()
+    let query = this.params.toString()
    if (params) {
-      const methodParams = this.obj2Params(params)
-      if (methodParams) {
-        urlParams += '&' + methodParams.toString()
+      const urlParams = this.obj2Params(params)
+      if (urlParams) {
+        query += '&' + urlParams.toString()
      }
    }

    // *.view was present on all method names in API 1.14.0 and earlier
-    return `${this.address}/rest/${method}.view?${urlParams}`
+    return `${this.address}/rest/${method}.view?${query}`
  }

  private async apiGetXml(method: string, params?: { [key: string]: any }): Promise<Document> {
@@ -123,7 +121,7 @@ export class SubsonicApiClient {
      if (obj[key] === undefined || obj[key] === null) {
        continue
      }
-      params.append(key, encodeURIComponent(String(obj[key])))
+      params.append(key, String(obj[key]))
    }

    return params
@@ -133,72 +131,81 @@ export class SubsonicApiClient {
  // System
  //

-  async ping(): Promise<NullResponse> {
-    return new NullResponse(await this.apiGetXml('ping'))
+  async ping(): Promise<SubsonicResponse<null>> {
+    const xml = await this.apiGetXml('ping')
+    return new SubsonicResponse<null>(xml, null)
  }

  //
  // Browsing
  //

-  async getArtists(): Promise<GetArtistsResponse> {
-    return new GetArtistsResponse(await this.apiGetXml('getArtists'))
+  async getArtists(): Promise<SubsonicResponse<GetArtistsResponse>> {
+    const xml = await this.apiGetXml('getArtists')
+    return new SubsonicResponse<GetArtistsResponse>(xml, new GetArtistsResponse(xml))
  }

-  async getIndexes(params?: GetIndexesParams): Promise<GetIndexesResponse> {
-    return new GetIndexesResponse(await this.apiGetXml('getIndexes', params))
+  async getIndexes(params?: GetIndexesParams): Promise<SubsonicResponse<GetIndexesResponse>> {
+    const xml = await this.apiGetXml('getIndexes', params)
+    return new SubsonicResponse<GetIndexesResponse>(xml, new GetIndexesResponse(xml))
  }

-  async getMusicDirectory(params: GetMusicDirectoryParams): Promise<GetMusicDirectoryResponse> {
-    return new GetMusicDirectoryResponse(await this.apiGetXml('getMusicDirectory', params))
+  async getMusicDirectory(params: GetMusicDirectoryParams): Promise<SubsonicResponse<GetMusicDirectoryResponse>> {
+    const xml = await this.apiGetXml('getMusicDirectory', params)
+    return new SubsonicResponse<GetMusicDirectoryResponse>(xml, new GetMusicDirectoryResponse(xml))
  }

-  async getAlbum(params: GetAlbumParams): Promise<GetAlbumResponse> {
-    return new GetAlbumResponse(await this.apiGetXml('getAlbum', params))
+  async getAlbum(params: GetAlbumParams): Promise<SubsonicResponse<GetAlbumResponse>> {
+    const xml = await this.apiGetXml('getAlbum', params)
+    return new SubsonicResponse<GetAlbumResponse>(xml, new GetAlbumResponse(xml))
  }

-  async getArtistInfo(params: GetArtistInfoParams): Promise<GetArtistInfoResponse> {
-    return new GetArtistInfoResponse(await this.apiGetXml('getArtistInfo', params))
+  async getArtistInfo(params: GetArtistInfoParams): Promise<SubsonicResponse<GetArtistInfoResponse>> {
+    const xml = await this.apiGetXml('getArtistInfo', params)
+    return new SubsonicResponse<GetArtistInfoResponse>(xml, new GetArtistInfoResponse(xml))
  }

-  async getArtistInfo2(params: GetArtistInfo2Params): Promise<GetArtistInfo2Response> {
-    return new GetArtistInfo2Response(await this.apiGetXml('getArtistInfo2', params))
+  async getArtistInfo2(params: GetArtistInfo2Params): Promise<SubsonicResponse<GetArtistInfo2Response>> {
+    const xml = await this.apiGetXml('getArtistInfo2', params)
+    return new SubsonicResponse<GetArtistInfo2Response>(xml, new GetArtistInfo2Response(xml))
  }

-  async getArtist(params: GetArtistParams): Promise<GetArtistResponse> {
-    return new GetArtistResponse(await this.apiGetXml('getArtist', params))
+  async getArtist(params: GetArtistParams): Promise<SubsonicResponse<GetArtistResponse>> {
+    const xml = await this.apiGetXml('getArtist', params)
+    return new SubsonicResponse<GetArtistResponse>(xml, new GetArtistResponse(xml))
  }

-  async getTopSongs(params: GetTopSongsParams): Promise<GetTopSongsResponse> {
-    return new GetTopSongsResponse(await this.apiGetXml('getTopSongs', params))
-  }
-
-  async getSong(params: GetSongParams): Promise<GetSongResponse> {
-    return new GetSongResponse(await this.apiGetXml('getSong', params))
+  async getTopSongs(params: GetTopSongsParams): Promise<SubsonicResponse<GetTopSongsResponse>> {
+    const xml = await this.apiGetXml('getTopSongs', params)
+    return new SubsonicResponse<GetTopSongsResponse>(xml, new GetTopSongsResponse(xml))
  }

  //
  // Album/song lists
  //

-  async getAlbumList(params: GetAlbumListParams): Promise<GetAlbumListResponse> {
-    return new GetAlbumListResponse(await this.apiGetXml('getAlbumList', params))
+  async getAlbumList(params: GetAlbumListParams): Promise<SubsonicResponse<GetAlbumListResponse>> {
+    const xml = await this.apiGetXml('getAlbumList', params)
+    return new SubsonicResponse<GetAlbumListResponse>(xml, new GetAlbumListResponse(xml))
  }

-  async getAlbumList2(params: GetAlbumList2Params): Promise<GetAlbumList2Response> {
-    return new GetAlbumList2Response(await this.apiGetXml('getAlbumList2', params))
+  async getAlbumList2(params: GetAlbumList2Params): Promise<SubsonicResponse<GetAlbumList2Response>> {
+    const xml = await this.apiGetXml('getAlbumList2', params)
+    return new SubsonicResponse<GetAlbumList2Response>(xml, new GetAlbumList2Response(xml))
  }

  //
  // Playlists
  //

-  async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
-    return new GetPlaylistsResponse(await this.apiGetXml('getPlaylists', params))
+  async getPlaylists(params?: GetPlaylistsParams): Promise<SubsonicResponse<GetPlaylistsResponse>> {
+    const xml = await this.apiGetXml('getPlaylists', params)
+    return new SubsonicResponse<GetPlaylistsResponse>(xml, new GetPlaylistsResponse(xml))
  }

-  async getPlaylist(params: GetPlaylistParams): Promise<GetPlaylistResponse> {
-    return new GetPlaylistResponse(await this.apiGetXml('getPlaylist', params))
+  async getPlaylist(params: GetPlaylistParams): Promise<SubsonicResponse<GetPlaylistResponse>> {
+    const xml = await this.apiGetXml('getPlaylist', params)
+    return new SubsonicResponse<GetPlaylistResponse>(xml, new GetPlaylistResponse(xml))
  }

  //
@@ -217,23 +224,27 @@ export class SubsonicApiClient {
  // Media annotation
  //

-  async scrobble(params: ScrobbleParams): Promise<NullResponse> {
-    return new NullResponse(await this.apiGetXml('scrobble', params))
+  async scrobble(params: ScrobbleParams): Promise<SubsonicResponse<undefined>> {
+    const xml = await this.apiGetXml('scrobble', params)
+    return new SubsonicResponse<undefined>(xml, undefined)
  }

-  async star(params: StarParams): Promise<NullResponse> {
-    return new NullResponse(await this.apiGetXml('star', params))
+  async star(params: StarParams): Promise<SubsonicResponse<undefined>> {
+    const xml = await this.apiGetXml('star', params)
+    return new SubsonicResponse<undefined>(xml, undefined)
  }

-  async unstar(params: StarParams): Promise<NullResponse> {
-    return new NullResponse(await this.apiGetXml('unstar', params))
+  async unstar(params: StarParams): Promise<SubsonicResponse<undefined>> {
+    const xml = await this.apiGetXml('unstar', params)
+    return new SubsonicResponse<undefined>(xml, undefined)
  }

  //
  // Searching
  //

-  async search3(params: Search3Params): Promise<Search3Response> {
-    return new Search3Response(await this.apiGetXml('search3', params))
+  async search3(params: Search3Params): Promise<SubsonicResponse<Search3Response>> {
+    const xml = await this.apiGetXml('search3', params)
+    return new SubsonicResponse<Search3Response>(xml, new Search3Response(xml))
  }
 }
@@ -101,7 +101,10 @@ export class BaseArtistInfoElement<T> {
      this.largeImageUrl = e.getElementsByTagName('largeImageUrl')[0].textContent as string
    }

-    this.similarArtists = Array.from(e.getElementsByTagName('similarArtist')).map(i => new artistType(i))
+    const similarArtistElements = e.getElementsByTagName('similarArtist')
+    for (let i = 0; i < similarArtistElements.length; i++) {
+      this.similarArtists.push(new artistType(similarArtistElements[i]))
+    }
  }
 }

@@ -247,7 +250,9 @@ export class PlaylistElement {
  coverArt?: string

  constructor(e: Element) {
-    this.allowedUser = Array.from(e.getElementsByTagName('allowedUser')).map(i => i.textContent as string)
+    for (let i = 0; i < e.getElementsByTagName('allowedUser').length; i++) {
+      this.allowedUser.push(e.getElementsByTagName('allowedUser')[i].textContent as string)
+    }

    this.id = requiredString(e, 'id')
    this.name = requiredString(e, 'name')
@@ -268,6 +273,8 @@ export class PlaylistWithSongsElement extends PlaylistElement {
  constructor(e: Element) {
    super(e)

-    this.songs = Array.from(e.getElementsByTagName('entry')).map(i => new ChildElement(i))
+    for (let i = 0; i < e.getElementsByTagName('entry').length; i++) {
+      this.songs.push(new ChildElement(e.getElementsByTagName('entry')[i]))
+    }
  }
 }
@@ -27,10 +27,6 @@ export type GetArtistParams = {
  id: string
 }

-export type GetSongParams = {
-  id: string
-}
-
 export type GetTopSongsParams = {
  artist: string
  count?: number
@@ -12,160 +12,119 @@ import {

 export type ResponseStatus = 'ok' | 'failed'

-export class SubsonicResponse {
+export class SubsonicResponse<T> {
  status: ResponseStatus
  version: string
+  data: T

-  constructor(xml: Document) {
+  constructor(xml: Document, data: T) {
+    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 extends SubsonicResponse {
-  data: {
-    ignoredArticles: string
-    artists: ArtistID3Element[]
-  }
+export class GetArtistsResponse {
+  ignoredArticles: string
+  artists: ArtistID3Element[] = []

  constructor(xml: Document) {
-    super(xml)
+    this.ignoredArticles = xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') as string

-    this.data = {
-      ignoredArticles: xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') || '',
-      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
+    const artistElements = xml.getElementsByTagName('artist')
+    for (let i = 0; i < artistElements.length; i++) {
+      this.artists.push(new ArtistID3Element(artistElements[i]))
    }
  }
 }

-export class GetArtistResponse extends SubsonicResponse {
-  data: {
-    artist: ArtistID3Element
-    albums: AlbumID3Element[]
-  }
+export class GetArtistResponse {
+  artist: ArtistID3Element
+  albums: AlbumID3Element[] = []

  constructor(xml: Document) {
-    super(xml)
+    this.artist = new ArtistID3Element(xml.getElementsByTagName('artist')[0])

-    this.data = {
-      artist: new ArtistID3Element(xml.getElementsByTagName('artist')[0]),
-      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
+    const albumElements = xml.getElementsByTagName('album')
+    for (let i = 0; i < albumElements.length; i++) {
+      this.albums.push(new AlbumID3Element(albumElements[i]))
    }
  }
 }

-export class GetIndexesResponse extends SubsonicResponse {
-  data: {
-    ignoredArticles: string
-    lastModified: number
-    artists: ArtistElement[]
-  }
+export class GetIndexesResponse {
+  ignoredArticles: string
+  lastModified: number
+  artists: ArtistElement[] = []

  constructor(xml: Document) {
-    super(xml)
-
    const indexesElement = xml.getElementsByTagName('indexes')[0]

-    this.data = {
-      ignoredArticles: indexesElement.getAttribute('ignoredArticles') || '',
-      lastModified: parseInt(indexesElement.getAttribute('lastModified') || '0', 10),
-      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistElement(i)),
+    this.ignoredArticles = indexesElement.getAttribute('ignoredArticles') as string
+    this.lastModified = parseInt(indexesElement.getAttribute('lastModified') as string, 10)
+
+    const artistElements = xml.getElementsByTagName('artist')
+    for (let i = 0; i < artistElements.length; i++) {
+      this.artists.push(new ArtistElement(artistElements[i]))
    }
  }
 }

-export class GetArtistInfoResponse extends SubsonicResponse {
-  data: {
-    artistInfo: ArtistInfoElement
-  }
+export class GetArtistInfoResponse {
+  artistInfo: ArtistInfoElement

  constructor(xml: Document) {
-    super(xml)
+    this.artistInfo = new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0])
+  }
+}

-    this.data = {
-      artistInfo: new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0]),
+export class GetArtistInfo2Response {
+  artistInfo: ArtistInfo2Element
+
+  constructor(xml: Document) {
+    this.artistInfo = new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0])
+  }
+}
+
+export class GetMusicDirectoryResponse {
+  directory: DirectoryElement
+  children: ChildElement[] = []
+
+  constructor(xml: Document) {
+    this.directory = new DirectoryElement(xml.getElementsByTagName('directory')[0])
+
+    const childElements = xml.getElementsByTagName('child')
+    for (let i = 0; i < childElements.length; i++) {
+      this.children.push(new ChildElement(childElements[i]))
    }
  }
 }

-export class GetArtistInfo2Response extends SubsonicResponse {
-  data: {
-    artistInfo: ArtistInfo2Element
-  }
+export class GetAlbumResponse {
+  album: AlbumID3Element
+  songs: ChildElement[] = []

  constructor(xml: Document) {
-    super(xml)
+    this.album = new AlbumID3Element(xml.getElementsByTagName('album')[0])

-    this.data = {
-      artistInfo: new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0]),
+    const childElements = xml.getElementsByTagName('song')
+    for (let i = 0; i < childElements.length; i++) {
+      this.songs.push(new ChildElement(childElements[i]))
    }
  }
 }

-export class GetMusicDirectoryResponse extends SubsonicResponse {
-  data: {
-    directory: DirectoryElement
-    children: ChildElement[]
-  }
+export class GetTopSongsResponse {
+  songs: ChildElement[] = []

  constructor(xml: Document) {
-    super(xml)
-
-    this.data = {
-      directory: new DirectoryElement(xml.getElementsByTagName('directory')[0]),
-      children: Array.from(xml.getElementsByTagName('child')).map(i => new ChildElement(i)),
-    }
-  }
-}
-
-export class GetAlbumResponse extends SubsonicResponse {
-  data: {
-    album: AlbumID3Element
-    songs: ChildElement[]
-  }
-
-  constructor(xml: Document) {
-    super(xml)
-
-    this.data = {
-      album: new AlbumID3Element(xml.getElementsByTagName('album')[0]),
-      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
-    }
-  }
-}
-
-export class GetTopSongsResponse extends SubsonicResponse {
-  data: {
-    songs: ChildElement[]
-  }
-
-  constructor(xml: Document) {
-    super(xml)
-
-    this.data = {
-      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
-    }
-  }
-}
-
-export class GetSongResponse extends SubsonicResponse {
-  data: {
-    song: ChildElement
-  }
-
-  constructor(xml: Document) {
-    super(xml)
-
-    this.data = {
-      song: new ChildElement(xml.getElementsByTagName('song')[0]),
+    const childElements = xml.getElementsByTagName('song')
+    for (let i = 0; i < childElements.length; i++) {
+      this.songs.push(new ChildElement(childElements[i]))
    }
  }
 }
@@ -174,16 +133,13 @@ export class GetSongResponse extends SubsonicResponse {
 // Album/song lists
 //

-class BaseGetAlbumListResponse<T> extends SubsonicResponse {
-  data: {
-    albums: T[]
-  }
+class BaseGetAlbumListResponse<T> {
+  albums: T[] = []

-  constructor(xml: Document, AlbumType: new (e: Element) => T) {
-    super(xml)
-
-    this.data = {
-      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumType(i)),
+  constructor(xml: Document, albumType: new (e: Element) => T) {
+    const albumElements = xml.getElementsByTagName('album')
+    for (let i = 0; i < albumElements.length; i++) {
+      this.albums.push(new albumType(albumElements[i]))
    }
  }
 }
@@ -204,31 +160,22 @@ export class GetAlbumList2Response extends BaseGetAlbumListResponse<AlbumID3Elem
 // Playlists
 //

-export class GetPlaylistsResponse extends SubsonicResponse {
-  data: {
-    playlists: PlaylistElement[]
-  }
+export class GetPlaylistsResponse {
+  playlists: PlaylistElement[] = []

  constructor(xml: Document) {
-    super(xml)
-
-    this.data = {
-      playlists: Array.from(xml.getElementsByTagName('playlist')).map(i => new PlaylistElement(i)),
+    const playlistElements = xml.getElementsByTagName('playlist')
+    for (let i = 0; i < playlistElements.length; i++) {
+      this.playlists.push(new PlaylistElement(playlistElements[i]))
    }
  }
 }

-export class GetPlaylistResponse extends SubsonicResponse {
-  data: {
-    playlist: PlaylistWithSongsElement
-  }
+export class GetPlaylistResponse {
+  playlist: PlaylistWithSongsElement

  constructor(xml: Document) {
-    super(xml)
-
-    this.data = {
-      playlist: new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0]),
-    }
+    this.playlist = new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0])
  }
 }

@@ -236,20 +183,25 @@ export class GetPlaylistResponse extends SubsonicResponse {
 // Searching
 //

-export class Search3Response extends SubsonicResponse {
-  data: {
-    artists: ArtistID3Element[]
-    albums: AlbumID3Element[]
-    songs: ChildElement[]
-  }
+export class Search3Response {
+  artists: ArtistID3Element[] = []
+  albums: AlbumID3Element[] = []
+  songs: ChildElement[] = []

  constructor(xml: Document) {
-    super(xml)
+    const artistElements = xml.getElementsByTagName('artist')
+    for (let i = 0; i < artistElements.length; i++) {
+      this.artists.push(new ArtistID3Element(artistElements[i]))
+    }

-    this.data = {
-      artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
-      albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
-      songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
+    const albumElements = xml.getElementsByTagName('album')
+    for (let i = 0; i < albumElements.length; i++) {
+      this.albums.push(new AlbumID3Element(albumElements[i]))
+    }
+
+    const songElements = xml.getElementsByTagName('song')
+    for (let i = 0; i < songElements.length; i++) {
+      this.songs.push(new ChildElement(songElements[i]))
    }
  }
 }
@@ -1,15 +1,19 @@
 import RNFS from 'react-native-fs'
-import path from 'path'
-import { CacheItemTypeKey } from '@app/models/cache'

-const serversCacheDir = path.join(RNFS.ExternalDirectoryPath, 's')
+export async function mkdir(path: string): Promise<void> {
+  const exists = await RNFS.exists(path)
+  if (exists) {
+    const isDir = (await RNFS.stat(path)).isDirectory()
+    if (!isDir) {
+      throw new Error(`path exists and is not a directory: ${path}`)
+    } else {
+      return
+    }
+  }

-export function cacheDir(serverId?: string, itemType?: CacheItemTypeKey, itemId?: string): string {
-  const segments: string[] = []
+  return await RNFS.mkdir(path)
+}

-  serverId && segments.push(serverId)
-  serverId && itemType && segments.push(itemType)
-  serverId && itemType && itemId && segments.push(itemId)
-
-  return path.join(serversCacheDir, ...segments)
+export async function rmdir(path: string): Promise<void> {
+  return RNFS.unlink(path)
 }
@@ -1,32 +0,0 @@
-import { ById, CollectionById } from '@app/models/state'
-import _ from 'lodash'
-
-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)
-}
-
-export function mapCollectionById<T, U extends { id: string }>(
-  collection: T[],
-  map: (item: T) => U,
-): CollectionById<U> {
-  const mapped = collection.map(map)
-  return {
-    byId: reduceById(mapped),
-    allIds: mapId(mapped),
-  }
-}
@@ -1,15 +1,11 @@
 import 'react-native-gesture-handler'
+import 'react-native-get-random-values'

 import { enableScreens } from 'react-native-screens'
 enableScreens()

 import { LogBox } from 'react-native'
-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!",
-])
+LogBox.ignoreLogs(["The action 'POP_TO_TOP'"])

 import { AppRegistry } from 'react-native'
 import App from '@app/App'
@@ -1,5 +0,0 @@
-## 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)
@@ -1,5 +0,0 @@
-## 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)
@@ -1,12 +0,0 @@
-## New
-
-* Top Songs in the Artist view now tries to fallback to searching for songs by the artist and sorting by play count/rating if the server doesn't support the getTopSongs endpoint
-* Images are now downloaded in the background via the Android DownloadManager and won't be corrupted if the app is closed
-  * Note: the cache file structure has been changed, so all images will be erased on update and new images will be downloaded as normal
-
-## Fixed
-
-* Fixed some screens displaying under the status bar on certain devices (#83)
-* Fixed occasional pausing after playing a few tracks (#66)
-* Fixed repeat mode not being persisted after skipping tracks (#56)
-* Search no longer clears the query when going back from the "more" results screen
@@ -1,13 +1,12 @@
 {
  "name": "subtracks",
-  "version": "1.2.0",
+  "version": "1.1.1",
  "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",
@@ -19,7 +18,7 @@
    "version:major": "yarn version --major --no-git-tag-version && ./android/gradlew -p android bumpMajorVersion"
  },
  "dependencies": {
-    "@react-native-async-storage/async-storage": "1.16",
+    "@react-native-async-storage/async-storage": "^1.15.5",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^6.0.0",
@@ -27,52 +26,47 @@
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/material-top-tabs": "^5.3.15",
    "@react-navigation/native": "^5.9.4",
-    "@types/react": "^17",
-    "@xmldom/xmldom": "^0.7.0",
-    "content-disposition": "^0.5.4",
-    "fast-deep-equal": "^3.1.3",
+    "@xmldom/xmldom": "^0.7.2",
    "immer": "^9.0.6",
-    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
    "md5": "^2.3.0",
-    "mime-types": "^2.1.35",
-    "path": "^0.12.7",
-    "react": "17.0.2",
-    "react-native": "0.67.4",
-    "react-native-blob-util": "https://github.com/austinried/react-native-blob-util.git#android-downloadmanager-progress",
+    "react": "17.0.1",
+    "react-native": "0.64.1",
    "react-native-fs": "^2.18.0",
-    "react-native-gesture-handler": "^2.3.2",
+    "react-native-gesture-handler": "^1.10.3",
+    "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.3.1",
+    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-tab-view": "^2.16.0",
-    "react-native-track-player": "https://github.com/austinried/react-native-track-player#render-extensions",
-    "react-native-uuid": "^2.0.1",
+    "react-native-track-player": "https://github.com/austinried/react-native-track-player",
    "react-native-vector-icons": "^8.1.0",
    "react-native-webview": "^11.13.0",
-    "react-query": "^3.34.19",
-    "zustand": "^3.7.1"
+    "uuid": "^8.3.2",
+    "zustand": "^3.5.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
-    "@types/content-disposition": "^0.5.4",
    "@types/jest": "^26.0.23",
-    "@types/lodash": "^4.14.181",
+    "@types/lodash.debounce": "^4.0.6",
    "@types/md5": "^2.3.0",
-    "@types/mime-types": "^2.1.1",
+    "@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": "^4.6.2",
+    "typescript": "^3.8.3",
    "uri-scheme": "^1.0.91"
  },
  "resolutions": {
@@ -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": true /* Skip type checking of declaration files. */,
+    "skipLibCheck": false /* 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", "submodules", "ndk"]
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
 }
Author	SHA1	Message	Date
austinried	5a955e40cd	changelog for 1.1.1	2021-12-15 14:08:37 +09:00
austinried	bfc4b1f988	bump version 1.1.1	2021-12-15 14:05:51 +09:00
austinried	c2f48db043	check if we paused on duck before playing again (#51 ) prevents music playing after an alarm or call ends if it wasn't paused by that alarm/call in the first place	2021-12-15 13:59:58 +09:00
austinried	f25f66fa41	Create FUNDING.yml	2021-12-13 09:34:22 +09:00
austinried	9a4357829b	Release/v1.1.0 (#47 ) * bump version for 1.1.0 * add changelog for 1.1.0	2021-12-06 11:05:18 +09:00
austinried	052e88fa5d	Trust self-signed user certificates (#46 ) * add network config to trust user certificates * allow clear text traffic again	2021-12-06 10:16:06 +09:00
austinried	c89a94b208	use .view method suffix for 1.14.0 (#45 )	2021-12-06 10:05:59 +09:00
dependabot[bot]	c0a93857ac	Bump tmpl from 1.0.4 to 1.0.5 (#44 ) Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5. - [Release notes](https://github.com/daaku/nodejs-tmpl/releases) - [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5) --- updated-dependencies: - dependency-name: tmpl dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-12-04 15:26:22 +09:00
Theo Salzmannandaustinried	0220e86883	FEATURE: add plain text password toggle to settings (#22 ) * FEATURE: add plain text password toggle to settings * clean up state types, lint, and add migrate Co-authored-by: austinried <4966622+austinried@users.noreply.github.com>	2021-12-03 15:18:05 +09:00
austinried	d1ac2df03a	add f-droid badge to readme	2021-09-11 16:40:32 +09:00
austinried	3e6a20e0e3	use consistent user agent for requests	2021-09-08 15:49:01 +09:00
austinried	ab575548fe	stop saying my project is html pls	2021-09-08 10:13:54 +09:00
aux4	c11f3e41a7	Merge pull request #15 from austinried/exoplayer-extension Build ExoPlayer ffmpeg extension for ALAC playback	2021-09-08 10:06:38 +09:00
austinried	995383df55	add ffmpeg license reworked licenses into a single generated file	2021-09-08 09:32:35 +09:00
austinried	48a5cd454d	too many files in here for watchman	2021-09-07 18:37:19 +09:00
austinried	be0aaf2bc6	quiet down wget and unzip really don't need 5mb of logs every time those run...	2021-09-07 18:32:22 +09:00
austinried	a061a2d093	remove gradle wrapper that fails validation	2021-09-07 16:48:49 +09:00
austinried	af67fb09a5	remove unused exoplayer modules update licenses	2021-09-07 16:36:12 +09:00
austinried	2e3af7bed3	don't lint submodules	2021-09-07 15:44:18 +09:00
austinried	80adf0e249	Revert "regen lockfile" This reverts commit `c0c909dee1`.	2021-09-07 15:38:52 +09:00
austinried	c0c909dee1	regen lockfile	2021-09-07 15:35:10 +09:00
austinried	568bb7caba	Merge branch 'master' into exoplayer-extension	2021-09-07 15:26:04 +09:00
austinried	85aaef4528	enable ffmpeg prep for GH builds	2021-09-07 15:23:57 +09:00
austinried	d92890ce48	bump ram for release builds	2021-09-07 15:23:37 +09:00
austinried	9f22790412	build and use ffmpeg extension pointing at my own repo for RNTP to enable extensions in exoplayer new prepare script needs to be run to build ffmpeg	2021-09-07 14:40:22 +09:00
austinried	01753226e2	pull in/rely on exoplayer locally	2021-09-07 12:20:52 +09:00
aux4	21e0e74b64	Merge pull request #14 from austinried/dependabot/npm_and_yarn/immer-9.0.6 Bump immer from 9.0.5 to 9.0.6	2021-09-04 15:09:13 +09:00
dependabot[bot]	6bc98eeb54	Bump immer from 9.0.5 to 9.0.6 Bumps [immer](https://github.com/immerjs/immer) from 9.0.5 to 9.0.6. - [Release notes](https://github.com/immerjs/immer/releases) - [Commits](https://github.com/immerjs/immer/compare/v9.0.5...v9.0.6) --- updated-dependencies: - dependency-name: immer dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com>	2021-09-04 05:46:58 +00:00
austinried	4f443d9c0e	remove non-working cast button for now	2021-09-04 14:45:08 +09:00
austinried	d83f2d227f	add changelog for 1.0.1	2021-09-02 18:01:58 +09:00
austinried	810d1ee4b5	bump version 1.0.1	2021-09-02 17:23:38 +09:00
austinried	63931e640a	remove unused permissions	2021-09-01 18:23:13 +09:00
austinried	3fd7a2112d	fix text cutting off bottom w/fixed height	2021-09-01 15:11:24 +09:00
austinried	45bd5aa46e	Merge branch 'master' of github.com:austinried/subtracks	2021-09-01 14:53:10 +09:00
aux4	0c117b3113	update readme coming soon	2021-09-01 10:17:38 +09:00
austinried	c479e24dbf	Merge branch 'master' of github.com:austinried/subtracks	2021-08-27 15:42:22 +09:00
aux4	2b2b7f749c	update readme with google play link	2021-08-27 15:41:39 +09:00
austinried	122c686fec	address xmldom security issue https://github.com/advisories/GHSA-6fc8-4gx4-v693	2021-08-27 13:11:03 +09:00
austinried	c864a03ece	bump version 1.0.0 for release	2021-08-27 11:17:58 +09:00
austinried	d7c34db155	add version number to about setion	2021-08-27 09:58:49 +09:00
austinried	32dd0ac0b4	update metadata per google play standards	2021-08-26 16:38:30 +09:00
austinried	30b05feca0	add metadata for stores	2021-08-26 16:10:49 +09:00
austinried	eb0ccd00a3	bump sdk version for google play	2021-08-26 15:19:03 +09:00
austinried	cc77935cd1	let's do some pre-release builds	2021-08-26 14:38:22 +09:00
austinried	de8a484211	Merge branch 'master' of github.com:austinried/subtracks	2021-08-26 13:41:38 +09:00
aux4	49733ae1f1	update readme	2021-08-26 13:41:07 +09:00
austinried	9a8095d02d	add scripts for bumping versions	2021-08-26 13:33:15 +09:00
austinried	409ee3bc86	ignore html for languages	2021-08-26 12:58:35 +09:00
austinried	24e6b1c306	remove bad button style	2021-08-26 12:49:26 +09:00
austinried	2c1dd06230	update header for better dark mode	2021-08-26 12:48:06 +09:00
austinried	ad829ed93a	added licenses and webview for them added link to github page	2021-08-26 12:47:56 +09:00
austinried	0f1b8d6147	update readme	2021-08-26 08:18:29 +09:00
austinried	68b1a467f4	fix net state not being right on startup	2021-08-26 08:17:39 +09:00
austinried	3e3523baa8	lint builds	2021-08-26 08:07:32 +09:00
austinried	5055b0d9e8	fix for search clearing text/not scrolling	2021-08-25 16:32:04 +09:00
austinried	d49c97c2b5	improved large album/playlist performance switched to flatlist for all of those	2021-08-25 16:13:35 +09:00
austinried	f3eac6102a	readme update	2021-08-25 11:26:03 +09:00
austinried	92c58cedd9	settings wording	2021-08-25 10:43:36 +09:00
austinried	02d12fef49	remove UI option to disable estimateContentLength	2021-08-25 10:29:59 +09:00
austinried	2624831e1a	Merge branch 'master' of github.com:austinried/subtracks	2021-08-25 10:25:03 +09:00
austinried	9576f6b4e7	fix player crashing at the end of transcoded track	2021-08-25 10:24:42 +09:00
aux4	5388f17347	specify android app in readme	2021-08-24 16:00:21 +09:00
austinried	c436abc77d	Merge branch 'master' of github.com:austinried/subtracks	2021-08-24 15:58:01 +09:00
austinried	06c533be48	stop building on non-app file changes	2021-08-24 15:57:46 +09:00
aux4	4606a21d46	added download badge to readme	2021-08-24 15:52:34 +09:00
austinried	72c25075a4	added "get it on" badges"	2021-08-24 15:49:41 +09:00
austinried	4bc46489cb	better name/group artifacts	2021-08-24 15:31:22 +09:00
aux4	a87636c1fe	fix readme link, add server examples	2021-08-24 14:46:07 +09:00
aux4	84bc814952	fix readme image formatting	2021-08-24 14:27:27 +09:00
austinried	3142fe7660	add images/features/coming soon to readme	2021-08-24 14:23:00 +09:00
aux4	1ad2e30627	Merge pull request #1 from austinried/github-actions-test Use actions to build and sign PRs/releases	2021-08-24 11:27:12 +09:00