1.3.0 changelog

Currently translated at 59.7% (40 of 67 strings)

Added translation using Weblate (Danish)

Co-authored-by: jazzyjabroni <lordcarmack@tuta.io>
Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/da/
Translation: Subtracks/subtracks

.bundle/config

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

.eslintrc.js

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

.gitattributes

@@ -3,4 +3,4 @@
 *.bat text eol=crlf
 
 # ignore these paths for GitHub language percentages
-android/app/src/main/assets/licenses/* linguist-vendored=true
+android/app/src/main/assets/** linguist-vendored=true

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: austinried

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. Pixel 4]
+ - OS: [e.g. Android 12]
+ - Subtracks version [e.g. 1.2.0]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/release.yml

@@ -0,0 +1,17 @@
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+      - dependencies
+    authors:
+      - weblate
+  categories:
+    - title: New
+      labels:
+        - enhancement
+    - title: Fixed
+      labels:
+        - bug
+    - title: Other Changes
+      labels:
+        - "*"

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

@@ -4,35 +4,58 @@ on:
   push:
     paths-ignore:
       - assets/**
+      - .vscode/**
+      - .eslintrc.js
+      - .prettierrc.js
+      - BUILDING.md
       - README.md
       - LICENSE
     branches:
-      - master
+      - main
       - release/*
   pull_request:
     paths-ignore:
       - assets/**
+      - .vscode/**
+      - android/app/src/main/assets/custom/i18n/**
+      - .eslintrc.js
+      - .prettierrc.js
+      - BUILDING.md
       - README.md
       - LICENSE
     branches:
-      - master
+      - main
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+        with:
+          submodules: recursive
+
+      - run: |
+          rm submodules/ExoPlayer/gradle/wrapper/gradle-wrapper.jar
+
+      - uses: gradle/wrapper-validation-action@v1
+
       - uses: actions/setup-node@v2
         with:
           node-version: '14'
           cache: 'yarn'
+
       - run: |
-          yarn install
+          yarn install --network-concurrency 1
+
       - run: |
           yarn lint --max-warnings 0
+
       - run: |
           yarn license
-      - uses: gradle/wrapper-validation-action@v1
+
+      - run: |
+          yarn prepare-build
+
       - uses: gradle/gradle-build-action@v1
         with:
           distributions-cache-enabled: true
@@ -40,11 +63,14 @@ jobs:
           configuration-cache-enabled: true
           build-root-directory: android
           arguments: assembleRelease -PsignReleaseWithDebug=true
+
       - run: |
           mkdir bin
+
       - run: >
           mv android/app/build/outputs/apk/release/app-release.apk
           bin/subtracks-${GITHUB_SHA}.apk
+
       - uses: actions/upload-artifact@v2
         with:
           name: subtracks-testing

.github/workflows/build-release.yml

@@ -10,23 +10,38 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+        with:
+          submodules: recursive
+
+      - run: |
+          rm submodules/ExoPlayer/gradle/wrapper/gradle-wrapper.jar
+
+      - uses: gradle/wrapper-validation-action@v1
+
       - uses: actions/setup-node@v2
         with:
           node-version: '14'
           cache: 'yarn'
+
       - name: Get subtracks version
         run: |
           echo "SUBTRACKS_VERSION=$(node -e "console.log(require('./package.json').version);")" >> $GITHUB_ENV
+
       - run: |
-          yarn install
+          yarn install --network-concurrency 1
+
       - run: |
           yarn license
-      - uses: gradle/wrapper-validation-action@v1
+
+      - run: |
+          yarn prepare-build
+
       - 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 }}
@@ -38,11 +53,14 @@ jobs:
           -PSUBTRACKS_UPLOAD_KEY_ALIAS=subtracks
           -PSUBTRACKS_UPLOAD_KEY_PASSWORD="$SUBTRACKS_UPLOAD_KEY_PASSWORD"
           -PSUBTRACKS_UPLOAD_STORE_PASSWORD="$SUBTRACKS_UPLOAD_STORE_PASSWORD"
+
       - run: |
           mkdir bin
+
       - run: >
           mv android/app/build/outputs/apk/release/app-release.apk
           bin/subtracks-${SUBTRACKS_VERSION}.apk
+
       - name: Build release AAB
         env:
           SUBTRACKS_UPLOAD_KEY_PASSWORD: ${{ secrets.SUBTRACKS_UPLOAD_KEY_PASSWORD }}
@@ -54,9 +72,11 @@ jobs:
           -PSUBTRACKS_UPLOAD_KEY_ALIAS=subtracks
           -PSUBTRACKS_UPLOAD_KEY_PASSWORD="$SUBTRACKS_UPLOAD_KEY_PASSWORD"
           -PSUBTRACKS_UPLOAD_STORE_PASSWORD="$SUBTRACKS_UPLOAD_STORE_PASSWORD"
+
       - run: >
           mv android/app/build/outputs/bundle/release/app-release.aab
           bin/subtracks-${SUBTRACKS_VERSION}.aab
+
       - uses: actions/upload-artifact@v2
         with:
           name: subtracks-release

.gitignore

@@ -28,6 +28,7 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
 
 # node.js
 #
@@ -57,3 +58,6 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# ffmpeg build
+/ndk

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "submodules/ExoPlayer"]
+	path = submodules/ExoPlayer
+	url = https://github.com/google/ExoPlayer.git

.nvmrc

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

.prettierrc.js

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

.vscode/settings.json

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

.watchmanconfig

@@ -1 +1,3 @@
-{}
+{
+    "ignore_dirs": ["ndk"]
+}

BUILDING.md

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

README.md

@@ -3,6 +3,8 @@
 # 
 Subtracks is an Android open source music streaming app for [Subsonic-API-compatible](http://www.subsonic.org/pages/api.jsp) servers ([Subsonic](http://www.subsonic.org/pages/index.jsp), [Navidrome](https://www.navidrome.org/), [Airsonic](https://airsonic.github.io/), and more).  It's designed to give you clean and convenient access to your music in the style of modern media players.
 
+[![Translation status](https://hosted.weblate.org/widgets/subtracks/-/subtracks/svg-badge.svg)](https://hosted.weblate.org/engage/subtracks/) ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/austinried/subtracks/build-release-debugsign/main) ![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/austinried/subtracks?label=github) ![F-Droid](https://img.shields.io/f-droid/v/com.subtracks)
+
 # Screenshots
 <p float="left">
   <img src="metadata/en-US/images/phoneScreenshots/01_home.png" alt="home" width="200"/>
@@ -14,6 +16,7 @@ Subtracks is an Android open source music streaming app for [Subsonic-API-compat
 # Download
 <p float="left">
   <a href="https://play.google.com/store/apps/details?id=com.subtracks"><img src="assets/google-play-badge.png" width="250"/></a>
+  <a href="https://f-droid.org/en/packages/com.subtracks/"><img src="assets/f-droid-badge.png" width="250"></a>
   <a href="https://github.com/austinried/subtracks/releases/latest"><img src="assets/github-badge.png" width="250"/></a>
 </p>
 
@@ -41,3 +44,13 @@ 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).
+
+# Translations
+Want to see Subtracks in your language? Visit the project on [Weblate](https://hosted.weblate.org/engage/subtracks/) to help!
+
+<a href="https://hosted.weblate.org/engage/subtracks/">
+<img src="https://hosted.weblate.org/widgets/subtracks/-/subtracks/multi-auto.svg" alt="Translation status" />
+</a>

android/app/build.gradle

@@ -134,8 +134,8 @@ android {
         applicationId "com.subtracks"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3
-        versionName '1.0.1'
+        versionCode 9
+        versionName '1.3.0'
     }
     splits {
         abi {
@@ -220,6 +220,15 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    implementation(project(":react-native-track-player")) {
+        exclude group:'com.google.android.exoplayer'
+    }
+    implementation project(':exoplayer-library-core')
+    implementation project(':exoplayer-extension-ffmpeg')
+    compileOnly project(':exoplayer-library-dash')
+    compileOnly project(':exoplayer-library-hls')
+    compileOnly project(':exoplayer-library-smoothstreaming')
 }
 
 // Run this once to be able to run the application with BUCK

android/app/proguard-rules.pro

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

android/app/src/main/AndroidManifest.xml

@@ -2,7 +2,8 @@
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
   <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
+  <uses-permission tools:node="remove" android:name="com.android.vending.CHECK_LICENSE"/>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:usesCleartextTraffic="true" android:networkSecurityConfig="@xml/network_security_config">
     <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustPan">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>

android/app/src/main/assets/custom/i18n/ca.json

@@ -0,0 +1,152 @@
+{
+    "resources": {
+        "album": {
+            "lists": {
+                "newest": "Afegit recentment",
+                "sort": "Ordenar els àlbums",
+                "random": "Aleatori",
+                "byGenre": "Per gènere",
+                "alphabeticalByName": "Pel nom",
+                "alphabeticalByArtist": "Per artista",
+                "byYear": "Per any",
+                "frequent": "Escoltat freqüentment",
+                "recent": "Reproduït recentment",
+                "starred": "Favorits"
+            },
+            "actions": {
+                "play": "Reproduir l'àlbum",
+                "view": "Veure l'àlbum"
+            },
+            "name": "Àlbum",
+            "name_plural": "Àlbums"
+        },
+        "artist": {
+            "lists": {
+                "sort": "Ordenar els artistes",
+                "starred": "Preferits",
+                "alphabeticalByName": "Pel nom",
+                "random": "Aleatori"
+            },
+            "name": "Artista",
+            "name_plural": "Artistes",
+            "actions": {
+                "view": "Veure l'artista"
+            }
+        },
+        "queue": {
+            "name": "Cua",
+            "name_plural": "Cues"
+        },
+        "song": {
+            "name": "Cançó",
+            "name_plural": "Cançons",
+            "lists": {
+                "artistTopSongs": "Millors cançons"
+            }
+        },
+        "playlist": {
+            "actions": {
+                "play": "Reproduir la llista de reproducció"
+            },
+            "name": "Playlist",
+            "name_plural": "Playlists"
+        }
+    },
+    "context": {
+        "actions": {
+            "unstar": "Eliminar dels preferits",
+            "star": "Afegir als favorits"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "Inici",
+            "search": "Cercar",
+            "library": "Biblioteca",
+            "settings": "Paràmetres"
+        }
+    },
+    "messages": {
+        "nothingHere": "Aquí no hi ha res…"
+    },
+    "settings": {
+        "servers": {
+            "fields": {
+                "username": "Nom d’usuari",
+                "password": "Contrasenya",
+                "address": "Adreça"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "Forçar la contrasenya de text sense format",
+                    "descriptionOn": "Enviar la contrasenya en text sense format (llegat, assegura't que la teva connexió sigui segura!)",
+                    "descriptionOff": "Enviar la contrasenya com a fitxa + sal"
+                }
+            },
+            "actions": {
+                "add": "Afegir un servidor",
+                "testConnection": "Comprovar la connexió",
+                "save": "Desar",
+                "edit": "Editar el servidor",
+                "delete": "Esborrar"
+            },
+            "messages": {
+                "connectionOk": "Connexió a {{address}} OK!",
+                "connectionFailed": "La connexió a {{address}} ha fallat, comprova la configuració o el servidor"
+            },
+            "name": "Servidors"
+        },
+        "network": {
+            "name": "Xarxa",
+            "values": {
+                "seconds": "{{value}} segons",
+                "kbps": "{{value}}kbit/s",
+                "unlimitedKbps": "Il·limitat"
+            },
+            "options": {
+                "maxBuffer": {
+                    "title": "Temps màxim de buffer"
+                },
+                "maxBitrateWifi": {
+                    "title": "Taxa de bits màxima (Wi-Fi)"
+                },
+                "maxBitrateMobile": {
+                    "title": "Taxa de bits màxima (mòbil)"
+                },
+                "minBuffer": {
+                    "title": "Temps mínim de buffer"
+                }
+            }
+        },
+        "music": {
+            "options": {
+                "scrobble": {
+                    "title": "Capturar la lectura",
+                    "descriptionOn": "Capturar l'historial de reproduccions",
+                    "descriptionOff": "No capturar l'historial de reproducció"
+                }
+            },
+            "name": "Música"
+        },
+        "reset": {
+            "name": "Reinicialitzar",
+            "actions": {
+                "clearImageCache": "Esborrar la memòria cau d'imatges"
+            }
+        },
+        "about": {
+            "name": "Quant a",
+            "version": "versió {{version}}",
+            "actions": {
+                "projectHomepage": "Pàgina d'inici del projecte",
+                "licenses": "Llicències"
+            }
+        }
+    },
+    "search": {
+        "nowPlayingContext": "Resultats de la cerca",
+        "inputPlaceholder": "Cercar",
+        "moreResults": "Més…",
+        "headerTitle": "Cercar: {{query}}"
+    }
+}

android/app/src/main/assets/custom/i18n/da.json

@@ -0,0 +1,92 @@
+{
+    "resources": {
+        "album": {
+            "lists": {
+                "byGenre": "Efter genre",
+                "alphabeticalByName": "Efter navn",
+                "alphabeticalByArtist": "Efter kunstner",
+                "byYear": "Efter år",
+                "sort": "Sortér albums"
+            },
+            "actions": {
+                "play": "Afspil album",
+                "view": "Se album"
+            }
+        },
+        "artist": {
+            "name": "Kunstner",
+            "name_plural": "Kunstnere",
+            "lists": {
+                "sort": "Sortér kunstnere",
+                "alphabeticalByName": "Efter navn"
+            },
+            "actions": {
+                "view": "Se kunstnere"
+            }
+        },
+        "song": {
+            "lists": {
+                "artistTopSongs": "Top sange"
+            },
+            "name": "Sang",
+            "name_plural": "Sange"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "library": "Bibliotek",
+            "search": "Søg",
+            "settings": "Indstillinger"
+        }
+    },
+    "search": {
+        "inputPlaceholder": "Søg",
+        "headerTitle": "Søg: {{query}}",
+        "nowPlayingContext": "Søgeresultater",
+        "moreResults": "Mere…"
+    },
+    "settings": {
+        "servers": {
+            "name": "Servere",
+            "fields": {
+                "address": "Adresse",
+                "username": "Brugernavn",
+                "password": "Adgangskode"
+            },
+            "actions": {
+                "add": "Tilføj server",
+                "edit": "Redigér server",
+                "testConnection": "Test forbindelse",
+                "delete": "Slet",
+                "save": "Gem"
+            },
+            "messages": {
+                "connectionOk": "Forbindelse til {{address}} OK!"
+            }
+        },
+        "network": {
+            "name": "Netværk",
+            "values": {
+                "kbps": "{{value}}kbps",
+                "unlimitedKbps": "Ubegrænset",
+                "seconds": "{{value}} sekunder"
+            }
+        },
+        "music": {
+            "name": "Musik"
+        },
+        "reset": {
+            "name": "Nulstil",
+            "actions": {
+                "clearImageCache": "Ryd billede cache"
+            }
+        },
+        "about": {
+            "name": "Omkring",
+            "version": "version {{version}}",
+            "actions": {
+                "licenses": "Licenser"
+            }
+        }
+    }
+}

android/app/src/main/assets/custom/i18n/de.json

@@ -0,0 +1,152 @@
+{
+    "resources": {
+        "song": {
+            "lists": {
+                "artistTopSongs": "Top Lieder"
+            },
+            "name": "Lied",
+            "name_plural": "Lieder"
+        },
+        "album": {
+            "name": "Album",
+            "name_plural": "Alben",
+            "lists": {
+                "sort": "Alben sortieren",
+                "random": "Zufällig",
+                "frequent": "Häufig abgespielt",
+                "recent": "Kürzlich abgespielt",
+                "starred": "Favoriten",
+                "byYear": "Nach Jahr",
+                "byGenre": "Nach Genre",
+                "alphabeticalByName": "Nach Name",
+                "newest": "Kürzlich hinzugefügt",
+                "alphabeticalByArtist": "Nach Interpreten"
+            },
+            "actions": {
+                "play": "Album abspielen",
+                "view": "Album anzeigen"
+            }
+        },
+        "artist": {
+            "name": "Interpret",
+            "name_plural": "Interpreten",
+            "lists": {
+                "sort": "Interpreten sortieren",
+                "random": "Zufällig",
+                "alphabeticalByName": "Nach Name",
+                "starred": "Favoriten"
+            },
+            "actions": {
+                "view": "Interpret anzeigen"
+            }
+        },
+        "playlist": {
+            "name": "Wiedergabeliste",
+            "name_plural": "Wiedergabelisten",
+            "actions": {
+                "play": "Wiedergabeliste abspielen"
+            }
+        },
+        "queue": {
+            "name": "Warteschlange",
+            "name_plural": "Warteschlangen"
+        }
+    },
+    "context": {
+        "actions": {
+            "star": "Markieren",
+            "unstar": "Markierung entfernen"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "Startseite",
+            "library": "Bibliothek",
+            "search": "Suche",
+            "settings": "Einstellungen"
+        }
+    },
+    "search": {
+        "inputPlaceholder": "Suche",
+        "headerTitle": "Suche: {{query}}",
+        "nowPlayingContext": "Suchergebnis",
+        "moreResults": "Mehr…"
+    },
+    "settings": {
+        "servers": {
+            "fields": {
+                "address": "Adresse",
+                "password": "Passwort",
+                "username": "Nutzername"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "Erzwinge Klartextpasswort",
+                    "descriptionOn": "Passwort als Klartext senden (Veraltet, stellen Sie sicher, dass Ihre Verbindung sicher ist!)",
+                    "descriptionOff": "Sende Passwort als Token + Salt"
+                }
+            },
+            "actions": {
+                "add": "Server hinzufügen",
+                "edit": "Server bearbeiten",
+                "testConnection": "Verbindung testen",
+                "delete": "Löschen",
+                "save": "Speichern"
+            },
+            "messages": {
+                "connectionOk": "Verbindung zu {{address}} ist OK!",
+                "connectionFailed": "Verbindung zu {{address}} fehlgeschlagen, überprüfe Einstellungen oder Server"
+            },
+            "name": "Server"
+        },
+        "network": {
+            "name": "Netzwerk",
+            "values": {
+                "kbps": "{{value}}kbps",
+                "unlimitedKbps": "Unbegrenzt",
+                "seconds": "{{value}} Sekunden"
+            },
+            "options": {
+                "maxBitrateWifi": {
+                    "title": "Maximale Bitrate (WLAN)"
+                },
+                "maxBuffer": {
+                    "title": "Maxilmale Pufferzeit"
+                },
+                "minBuffer": {
+                    "title": "Minimale Pufferzeit"
+                },
+                "maxBitrateMobile": {
+                    "title": "Maximale Bitrate (Mobil)"
+                }
+            }
+        },
+        "music": {
+            "name": "Musik",
+            "options": {
+                "scrobble": {
+                    "descriptionOn": "Scrobble Wiedergabeverlauf",
+                    "descriptionOff": "Kein Scrobble für Wiedergabeverlauf",
+                    "title": "Scrobble Wiedergabe"
+                }
+            }
+        },
+        "reset": {
+            "name": "Zurücksetzen",
+            "actions": {
+                "clearImageCache": "Bildzwischenspeicher löschen"
+            }
+        },
+        "about": {
+            "name": "Über",
+            "actions": {
+                "projectHomepage": "Projektseite",
+                "licenses": "Lizenzen"
+            },
+            "version": "Version {{version}}"
+        }
+    },
+    "messages": {
+        "nothingHere": "Hier ist nichts…"
+    }
+}

android/app/src/main/assets/custom/i18n/en.json

@@ -0,0 +1,152 @@
+{
+    "resources": {
+        "song": {
+            "name": "Song",
+            "name_plural": "Songs",
+            "lists": {
+                "artistTopSongs": "Top Songs"
+            }
+        },
+        "album": {
+            "name": "Album",
+            "name_plural": "Albums",
+            "lists": {
+                "sort": "Sort Albums",
+                "random": "Random",
+                "newest": "Recently Added",
+                "frequent": "Frequently Played",
+                "recent": "Recently Played",
+                "starred": "Starred",
+                "alphabeticalByName": "By Name",
+                "alphabeticalByArtist": "By Artist",
+                "byYear": "By Year",
+                "byGenre": "By Genre"
+            },
+            "actions": {
+                "play": "Play Album",
+                "view": "View Album"
+            }
+        },
+        "artist": {
+            "name": "Artist",
+            "name_plural": "Artists",
+            "lists": {
+                "sort": "Sort Artists",
+                "random": "Random",
+                "starred": "Starred",
+                "alphabeticalByName": "By Name"
+            },
+            "actions": {
+                "view": "View Artist"
+            }
+        },
+        "playlist": {
+            "name": "Playlist",
+            "name_plural": "Playlists",
+            "actions": {
+                "play": "Play Playlist"
+            }
+        },
+        "queue": {
+            "name": "Queue",
+            "name_plural": "Queues"
+        }
+    },
+    "context": {
+        "actions": {
+            "star": "Star",
+            "unstar": "Unstar"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "Home",
+            "library": "Library",
+            "search": "Search",
+            "settings": "Settings"
+        }
+    },
+    "messages": {
+        "nothingHere": "Nothing here…"
+    },
+    "search": {
+        "inputPlaceholder": "Search",
+        "headerTitle": "Search: {{query}}",
+        "moreResults": "More…",
+        "nowPlayingContext": "Search Results"
+    },
+    "settings": {
+        "servers": {
+            "name": "Servers",
+            "fields": {
+                "address": "Address",
+                "username": "Username",
+                "password": "Password"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "Force plaintext password",
+                    "descriptionOn": "Send password in plaintext (legacy, make sure your connection is secure!)",
+                    "descriptionOff": "Send password as token + salt"
+                }
+            },
+            "actions": {
+                "add": "Add Server",
+                "edit": "Edit Server",
+                "testConnection": "Test Connection",
+                "delete": "Delete",
+                "save": "Save"
+            },
+            "messages": {
+                "connectionOk": "Connection to {{address}} OK!",
+                "connectionFailed": "Connection to {{address}} failed, check settings or server"
+            }
+        },
+        "network": {
+            "name": "Network",
+            "values": {
+                "kbps": "{{value}}kbps",
+                "unlimitedKbps": "Unlimited",
+                "seconds": "{{value}} seconds"
+            },
+            "options": {
+                "maxBitrateWifi": {
+                    "title": "Maximum bitrate (Wi-Fi)"
+                },
+                "maxBitrateMobile": {
+                    "title": "Maximum bitrate (mobile)"
+                },
+                "minBuffer": {
+                    "title": "Minimum buffer time"
+                },
+                "maxBuffer": {
+                    "title": "Maximum buffer time"
+                }
+            }
+        },
+        "music": {
+            "name": "Music",
+            "options": {
+                "scrobble": {
+                    "title": "Scrobble plays",
+                    "descriptionOn": "Scrobble play history",
+                    "descriptionOff": "Don't scrobble play history"
+                }
+            }
+        },
+        "reset": {
+            "name": "Reset",
+            "actions": {
+                "clearImageCache": "Clear Image Cache"
+            }
+        },
+        "about": {
+            "name": "About",
+            "version": "version {{version}}",
+            "actions": {
+                "projectHomepage": "Project Homepage",
+                "licenses": "Licenses"
+            }
+        }
+    }
+}

android/app/src/main/assets/custom/i18n/fr.json

@@ -0,0 +1,152 @@
+{
+    "resources": {
+        "album": {
+            "name": "Album",
+            "name_plural": "Albums",
+            "lists": {
+                "random": "Aléatoire",
+                "newest": "Récemment Ajouté",
+                "frequent": "Fréquemment Joué",
+                "recent": "Récemment Joué",
+                "alphabeticalByName": "Par Nom",
+                "byYear": "Par Année",
+                "alphabeticalByArtist": "Par Artiste",
+                "byGenre": "Par Genre",
+                "starred": "Favoris",
+                "sort": "Trier les albums"
+            },
+            "actions": {
+                "play": "Jouer l'album",
+                "view": "Voir l'album"
+            }
+        },
+        "song": {
+            "name": "Chanson",
+            "name_plural": "Chansons",
+            "lists": {
+                "artistTopSongs": "Meilleures Chansons"
+            }
+        },
+        "artist": {
+            "name": "Artiste",
+            "name_plural": "Artistes",
+            "lists": {
+                "random": "Aléatoire",
+                "starred": "Favoris",
+                "alphabeticalByName": "Par Nom",
+                "sort": "Trier les artistes"
+            },
+            "actions": {
+                "view": "Voir l'artiste"
+            }
+        },
+        "playlist": {
+            "actions": {
+                "play": "Lire la playlist"
+            },
+            "name": "Playlist",
+            "name_plural": "Playlists"
+        },
+        "queue": {
+            "name": "File d'attente",
+            "name_plural": "Files d'attente"
+        }
+    },
+    "settings": {
+        "network": {
+            "values": {
+                "seconds": "{{value}} secondes",
+                "unlimitedKbps": "Illimité",
+                "kbps": "{{value}}kbit/s"
+            },
+            "options": {
+                "maxBitrateWifi": {
+                    "title": "Débit binaire maximum (Wi-Fi)"
+                },
+                "maxBitrateMobile": {
+                    "title": "Débit binaire maximum (mobile)"
+                },
+                "maxBuffer": {
+                    "title": "Temps maximum en mémoire tampon"
+                },
+                "minBuffer": {
+                    "title": "Temps minimum en mémoire tampon"
+                }
+            },
+            "name": "Réseau"
+        },
+        "servers": {
+            "fields": {
+                "username": "Nom d'utilisateur",
+                "address": "Adresse",
+                "password": "Mot de passe"
+            },
+            "actions": {
+                "testConnection": "Tester la connexion",
+                "add": "Ajouter un serveur",
+                "delete": "Supprimer",
+                "save": "Sauvegarder",
+                "edit": "Modifier le serveur"
+            },
+            "name": "Serveurs",
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "Forcer le mot de passe en texte clair",
+                    "descriptionOn": "Envoyer le mot de passe en test clair (héritage, assurez-vous que la connexion est sécurisée !)",
+                    "descriptionOff": "Envoyer le mot de passe sous forme de jeton + salage"
+                }
+            },
+            "messages": {
+                "connectionOk": "Connexion à {{address}} OK !",
+                "connectionFailed": "Échec de la connexion à {{address}}, vérifiez les paramètres ou le serveur"
+            }
+        },
+        "music": {
+            "name": "Musique",
+            "options": {
+                "scrobble": {
+                    "descriptionOff": "Ne pas scrobbler l'historique de lecture",
+                    "descriptionOn": "Scrobbler l'historique de lecture",
+                    "title": "Scrobbler la lecture"
+                }
+            }
+        },
+        "about": {
+            "version": "version {{version}}",
+            "name": "À propos",
+            "actions": {
+                "licenses": "Licenses",
+                "projectHomepage": "Page d'accueil du projet"
+            }
+        },
+        "reset": {
+            "actions": {
+                "clearImageCache": "Vider le cache d'images"
+            },
+            "name": "Réinitialiser"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "library": "Bibliothèque",
+            "home": "Accueil",
+            "search": "Recherche",
+            "settings": "Paramètres"
+        }
+    },
+    "search": {
+        "headerTitle": "Recherche : {{query}}",
+        "inputPlaceholder": "Recherche",
+        "moreResults": "Plus…",
+        "nowPlayingContext": "Résultats de recherche"
+    },
+    "context": {
+        "actions": {
+            "star": "Mettre en favoris",
+            "unstar": "Enlever des favoris"
+        }
+    },
+    "messages": {
+        "nothingHere": "Rien ici…"
+    }
+}

android/app/src/main/assets/custom/i18n/it.json

@@ -0,0 +1,152 @@
+{
+    "resources": {
+        "artist": {
+            "name": "Artista",
+            "name_plural": "Artisti",
+            "actions": {
+                "view": "Vedi artista"
+            },
+            "lists": {
+                "random": "Casuale",
+                "starred": "Preferiti",
+                "sort": "Ordina artisti",
+                "alphabeticalByName": "Per nome"
+            }
+        },
+        "song": {
+            "lists": {
+                "artistTopSongs": "Brani più popolari"
+            },
+            "name": "Brano",
+            "name_plural": "Brani"
+        },
+        "album": {
+            "name": "Album",
+            "name_plural": "Album",
+            "lists": {
+                "random": "Casuale",
+                "newest": "Aggiunti di recente",
+                "recent": "Ascoltati di recente",
+                "alphabeticalByName": "Per nome",
+                "alphabeticalByArtist": "Per artista",
+                "byYear": "Per anno",
+                "byGenre": "Per genere",
+                "sort": "Ordina album",
+                "frequent": "Ascoltati frequentemente",
+                "starred": "Preferiti"
+            },
+            "actions": {
+                "play": "Riproduci album",
+                "view": "Vedi album"
+            }
+        },
+        "playlist": {
+            "name": "Playlist",
+            "name_plural": "Playlist",
+            "actions": {
+                "play": "Riproduci playlist"
+            }
+        },
+        "queue": {
+            "name": "Coda",
+            "name_plural": "Code"
+        }
+    },
+    "settings": {
+        "servers": {
+            "fields": {
+                "password": "Password",
+                "address": "Indirizzo",
+                "username": "Nome utente"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "Forza password in chiaro",
+                    "descriptionOn": "Invia password in chiaro (deprecato, assicurati che la tua connessione sia sicura!)",
+                    "descriptionOff": "Invia la password come token + salt"
+                }
+            },
+            "actions": {
+                "delete": "Rimuovi",
+                "edit": "Modifica server",
+                "add": "Aggiungi server",
+                "save": "Salva",
+                "testConnection": "Prova connessione"
+            },
+            "name": "Server",
+            "messages": {
+                "connectionOk": "Connesso a {{address}} con successo!",
+                "connectionFailed": "Connessione a {{address}} fallita, controlla le impostazioni o il server"
+            }
+        },
+        "network": {
+            "name": "Rete",
+            "values": {
+                "kbps": "{{value}}kbps",
+                "unlimitedKbps": "Illimitato",
+                "seconds": "{{value}} secondi"
+            },
+            "options": {
+                "maxBitrateWifi": {
+                    "title": "Bitrate massimo (Wi-Fi)"
+                },
+                "maxBitrateMobile": {
+                    "title": "Bitrate massimo (rete dati)"
+                },
+                "minBuffer": {
+                    "title": "Tempo di buffer minimo"
+                },
+                "maxBuffer": {
+                    "title": "Tempo di buffer massimo"
+                }
+            }
+        },
+        "music": {
+            "name": "Musica",
+            "options": {
+                "scrobble": {
+                    "title": "Scrobbling delle riproduzioni",
+                    "descriptionOn": "Scrobbling della cronologia di ascolto",
+                    "descriptionOff": "Non eseguire lo scrobbling della cronologia d'ascolto"
+                }
+            }
+        },
+        "reset": {
+            "name": "Reimposta",
+            "actions": {
+                "clearImageCache": "Pulisci la cache delle immagini"
+            }
+        },
+        "about": {
+            "name": "Informazioni",
+            "version": "versione {{version}}",
+            "actions": {
+                "projectHomepage": "Pagina principale del progetto",
+                "licenses": "Licenze"
+            }
+        }
+    },
+    "context": {
+        "actions": {
+            "star": "Aggiungi ai preferiti",
+            "unstar": "Rimuovi dai preferiti"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "Home",
+            "library": "Libreria",
+            "search": "Cerca",
+            "settings": "Impostazioni"
+        }
+    },
+    "messages": {
+        "nothingHere": "Non c'è niente qui…"
+    },
+    "search": {
+        "inputPlaceholder": "Ricerca",
+        "headerTitle": "Ricerca: {{query}}",
+        "moreResults": "Mostra di più…",
+        "nowPlayingContext": "Risultati della ricerca"
+    }
+}

android/app/src/main/assets/custom/i18n/ja.json

@@ -0,0 +1,55 @@
+{
+    "resources": {
+        "album": {
+            "lists": {
+                "random": "ランダムアルバム",
+                "frequent": "よく聴くアルバム",
+                "recent": "最近再生した",
+                "starred": "星付きアルバム"
+            },
+            "name": "アルバム"
+        },
+        "song": {
+            "name": "歌",
+            "lists": {
+                "artistTopSongs": "人気曲"
+            }
+        },
+        "artist": {
+            "name": "アーティスト"
+        },
+        "playlist": {
+            "name": "プレイリスト"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "ホーム",
+            "library": "ライブラリ",
+            "search": "検索",
+            "settings": "設定"
+        }
+    },
+    "search": {
+        "inputPlaceholder": "検索"
+    },
+    "settings": {
+        "servers": {
+            "name": "サーバ"
+        },
+        "network": {
+            "name": "ネット"
+        },
+        "music": {
+            "name": "音楽"
+        },
+        "reset": {
+            "name": "リセット"
+        },
+        "about": {
+            "actions": {
+                "projectHomepage": "ホームページ"
+            }
+        }
+    }
+}

android/app/src/main/assets/custom/i18n/nb-NO.json

@@ -0,0 +1,152 @@
+{
+    "resources": {
+        "artist": {
+            "name": "Artist",
+            "name_plural": "Artister",
+            "lists": {
+                "sort": "Sorter artister",
+                "random": "Tilfeldig",
+                "starred": "Stjernemerket",
+                "alphabeticalByName": "Etter navn"
+            },
+            "actions": {
+                "view": "Vis artist"
+            }
+        },
+        "playlist": {
+            "name": "Spilleliste",
+            "name_plural": "Spillelister",
+            "actions": {
+                "play": "Spill av spilleliste"
+            }
+        },
+        "song": {
+            "lists": {
+                "artistTopSongs": "Toppspor"
+            },
+            "name": "Spor",
+            "name_plural": "Spor"
+        },
+        "album": {
+            "name": "Album",
+            "name_plural": "Album",
+            "lists": {
+                "sort": "Sorter album",
+                "random": "Tilfeldig",
+                "newest": "Nylig tillagt",
+                "frequent": "Ofte spilt",
+                "recent": "Nylig spilt",
+                "starred": "Stjernemerket",
+                "alphabeticalByName": "Etter navn",
+                "alphabeticalByArtist": "Etter artist",
+                "byYear": "Etter år",
+                "byGenre": "Etter sjanger"
+            },
+            "actions": {
+                "play": "Spill album",
+                "view": "Vis album"
+            }
+        },
+        "queue": {
+            "name": "Kø",
+            "name_plural": "Køer"
+        }
+    },
+    "settings": {
+        "servers": {
+            "actions": {
+                "add": "Legg til tjener",
+                "testConnection": "Test tilkobling",
+                "delete": "Slett",
+                "save": "Lagre",
+                "edit": "Rediger tjener"
+            },
+            "messages": {
+                "connectionOk": "Tilkobling til {{address}} OK.",
+                "connectionFailed": "Tilkobling til {{address}} mislyktes. Sjekk innstillingene eller tjeneren."
+            },
+            "name": "Tjenere",
+            "fields": {
+                "address": "Adresse",
+                "username": "Brukernavn",
+                "password": "Passord"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "Påtving klartekstspassord",
+                    "descriptionOn": "Send passord i klartekst (Foreldet. Forsikre deg om at tilkoblingen er sikker.)",
+                    "descriptionOff": "Send passord som symbol + salt"
+                }
+            }
+        },
+        "network": {
+            "name": "Nettverk",
+            "values": {
+                "kbps": "{{value}} kbps",
+                "unlimitedKbps": "Ubegrenset",
+                "seconds": "{{value}} sekunder"
+            },
+            "options": {
+                "maxBitrateWifi": {
+                    "title": "Maksimal bitrate (Wi-Fi)"
+                },
+                "maxBitrateMobile": {
+                    "title": "Maksimal bitrate (mobil)"
+                },
+                "minBuffer": {
+                    "title": "Minimal mellomlagringstid"
+                },
+                "maxBuffer": {
+                    "title": "Maksimal mellomlagringstid"
+                }
+            }
+        },
+        "music": {
+            "name": "Musikk",
+            "options": {
+                "scrobble": {
+                    "title": "Sporinfodelingsavspillinger",
+                    "descriptionOn": "Sporinfodelings-avspillinghistorikk",
+                    "descriptionOff": "Ikke utfør sporinfodeling av avspillingshistorikk"
+                }
+            }
+        },
+        "reset": {
+            "name": "Tilbakestill",
+            "actions": {
+                "clearImageCache": "Tøm bildehurtiglager"
+            }
+        },
+        "about": {
+            "name": "Om",
+            "version": "versjon {{version}}",
+            "actions": {
+                "projectHomepage": "Prosjekthjemmeside",
+                "licenses": "Lisenser"
+            }
+        }
+    },
+    "context": {
+        "actions": {
+            "star": "Stjernemerk",
+            "unstar": "Fjern stjernemerking"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "Hjem",
+            "library": "Bibliotek",
+            "search": "Søk",
+            "settings": "Innstillinger"
+        }
+    },
+    "search": {
+        "inputPlaceholder": "Søk",
+        "headerTitle": "Søk: {{query}}",
+        "moreResults": "Mer …",
+        "nowPlayingContext": "Søkeresultater"
+    },
+    "messages": {
+        "nothingHere": "Ingenting her …"
+    }
+}

android/app/src/main/assets/custom/i18n/ru.json

@@ -0,0 +1,157 @@
+{
+    "settings": {
+        "servers": {
+            "actions": {
+                "delete": "Удалить",
+                "add": "Добавить сервер",
+                "edit": "Редактировать сервер",
+                "testConnection": "Проверить подключение",
+                "save": "Сохранить"
+            },
+            "name": "Серверы",
+            "fields": {
+                "address": "Адрес",
+                "username": "Имя пользователя",
+                "password": "Пароль"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "descriptionOn": "Отправить пароль в виде текста (устарело, убедитесь, что ваше соединение безопасно!)",
+                    "descriptionOff": "Отправить пароль в виде токена",
+                    "title": "Принудительный текстовый пароль"
+                }
+            },
+            "messages": {
+                "connectionOk": "Подключение к {{address}} установлено!",
+                "connectionFailed": "Не удалось подключиться к {{address}}, проверьте настройки или сервер"
+            }
+        },
+        "network": {
+            "name": "Сеть",
+            "values": {
+                "kbps": "{{value}} кбит/с",
+                "unlimitedKbps": "Без ограничений",
+                "seconds": "{{value}} секунд"
+            },
+            "options": {
+                "maxBitrateWifi": {
+                    "title": "Максимальный битрейт (Wi-Fi)"
+                },
+                "maxBitrateMobile": {
+                    "title": "Максимальный битрейт (мобильный интернет)"
+                },
+                "minBuffer": {
+                    "title": "Минимальное время буферизации"
+                },
+                "maxBuffer": {
+                    "title": "Максимальное время буферизации"
+                }
+            }
+        },
+        "music": {
+            "name": "Музыка",
+            "options": {
+                "scrobble": {
+                    "title": "Синхронизация воспроизведения",
+                    "descriptionOff": "Не синхронизировать историю воспроизведений",
+                    "descriptionOn": "Синхронизация истории воспроизведения"
+                }
+            }
+        },
+        "reset": {
+            "name": "Сброс",
+            "actions": {
+                "clearImageCache": "Очистить кэш изображения"
+            }
+        },
+        "about": {
+            "name": "О Subtracks",
+            "version": "версия {{version}}",
+            "actions": {
+                "projectHomepage": "Сайт проекта",
+                "licenses": "Лицензии"
+            }
+        }
+    },
+    "resources": {
+        "album": {
+            "name_0": "Альбом",
+            "name_1": "Альбома",
+            "name_2": "Альбомов",
+            "lists": {
+                "sort": "Сортировка альбомов",
+                "random": "Случайно",
+                "newest": "Недавно добавленные",
+                "frequent": "Часто проигрываемые",
+                "recent": "Недавно проигранные",
+                "starred": "Избранные",
+                "alphabeticalByName": "По имени",
+                "alphabeticalByArtist": "По исполнителю",
+                "byYear": "По году",
+                "byGenre": "По жанру"
+            },
+            "actions": {
+                "play": "Воспроизвести альбом",
+                "view": "Посмотреть альбом"
+            }
+        },
+        "song": {
+            "name_0": "Трек",
+            "name_1": "Трека",
+            "name_2": "Треков",
+            "lists": {
+                "artistTopSongs": "Лучшие треки"
+            }
+        },
+        "artist": {
+            "name_0": "Исполнитель",
+            "name_1": "Исполнителя",
+            "name_2": "Исполнителей",
+            "lists": {
+                "sort": "Сортировать исполнителей",
+                "random": "Случайно",
+                "starred": "Избранные",
+                "alphabeticalByName": "По имени"
+            },
+            "actions": {
+                "view": "Посмотреть исполнителя"
+            }
+        },
+        "playlist": {
+            "name_0": "Плейлист",
+            "name_1": "Плейлиста",
+            "name_2": "Плейлистов",
+            "actions": {
+                "play": "Воспроизвести плейлист"
+            }
+        },
+        "queue": {
+            "name_0": "Очередь",
+            "name_1": "Очереди",
+            "name_2": "Очередей"
+        }
+    },
+    "context": {
+        "actions": {
+            "star": "Избранное",
+            "unstar": "Убрать из избранного"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "library": "Библиотека",
+            "search": "Поиск",
+            "settings": "Настройки",
+            "home": "Главная"
+        }
+    },
+    "messages": {
+        "nothingHere": "Здесь ничего нет…"
+    },
+    "search": {
+        "inputPlaceholder": "Поиск",
+        "headerTitle": "Поиск: {{query}}",
+        "moreResults": "Больше…",
+        "nowPlayingContext": "Результаты поиска"
+    }
+}

android/app/src/main/assets/custom/i18n/zh-Hans.json

@@ -0,0 +1,147 @@
+{
+    "context": {
+        "actions": {
+            "unstar": "移除收藏",
+            "star": "收藏"
+        }
+    },
+    "settings": {
+        "servers": {
+            "name": "服务器",
+            "messages": {
+                "connectionFailed": "连接到 {{address}} 失败，检查设置或服务器",
+                "connectionOk": "连接到 {{address}} 正常！"
+            },
+            "options": {
+                "forcePlaintextPassword": {
+                    "title": "强制使用明文密码",
+                    "descriptionOn": "密码以明文发送（不推荐，注意链接安全！）",
+                    "descriptionOff": "密码以 token + salt 加密发送"
+                }
+            },
+            "actions": {
+                "add": "添加服务器",
+                "testConnection": "测试连接",
+                "save": "保存",
+                "edit": "编辑服务器",
+                "delete": "删除"
+            },
+            "fields": {
+                "password": "密码",
+                "username": "用户名",
+                "address": "地址"
+            }
+        },
+        "network": {
+            "name": "网络",
+            "values": {
+                "seconds": "{{value}} 秒",
+                "kbps": "{{value}}kbps",
+                "unlimitedKbps": "不限制"
+            },
+            "options": {
+                "maxBitrateMobile": {
+                    "title": "最大比特率 (3G/4G/5G)"
+                },
+                "minBuffer": {
+                    "title": "最小缓冲时间"
+                },
+                "maxBuffer": {
+                    "title": "最大缓冲时间"
+                },
+                "maxBitrateWifi": {
+                    "title": "最大比特率 (Wi-Fi)"
+                }
+            }
+        },
+        "music": {
+            "name": "音乐",
+            "options": {
+                "scrobble": {
+                    "title": "Scrobble模式",
+                    "descriptionOn": "Scrobble播放历史",
+                    "descriptionOff": "不记录scrobble历史"
+                }
+            }
+        },
+        "reset": {
+            "name": "重置",
+            "actions": {
+                "clearImageCache": "清除图片缓存"
+            }
+        },
+        "about": {
+            "name": "关于",
+            "version": "版本 {{version}}",
+            "actions": {
+                "projectHomepage": "项目地址",
+                "licenses": "许可"
+            }
+        }
+    },
+    "resources": {
+        "album": {
+            "actions": {
+                "view": "查看专辑",
+                "play": "播放专辑"
+            },
+            "name": "专辑",
+            "lists": {
+                "newest": "最近添加",
+                "frequent": "播放最多",
+                "alphabeticalByName": "根据名称",
+                "alphabeticalByArtist": "根据歌手",
+                "byYear": "根据年份",
+                "random": "随机",
+                "sort": "专辑排序",
+                "recent": "最近播放",
+                "byGenre": "根据类型",
+                "starred": "已收藏"
+            }
+        },
+        "playlist": {
+            "actions": {
+                "play": "全部播放"
+            },
+            "name": "播放列表"
+        },
+        "song": {
+            "name": "歌曲",
+            "lists": {
+                "artistTopSongs": "热门歌曲"
+            }
+        },
+        "artist": {
+            "name": "歌手",
+            "lists": {
+                "starred": "已收藏",
+                "sort": "歌手排序",
+                "random": "随机",
+                "alphabeticalByName": "根据名称"
+            },
+            "actions": {
+                "view": "查看歌手"
+            }
+        },
+        "queue": {
+            "name": "队列"
+        }
+    },
+    "navigation": {
+        "tabs": {
+            "home": "首页",
+            "library": "所有",
+            "search": "搜索",
+            "settings": "设置"
+        }
+    },
+    "search": {
+        "inputPlaceholder": "搜索",
+        "headerTitle": "搜索： {{query}}",
+        "moreResults": "更多…",
+        "nowPlayingContext": "搜索结果"
+    },
+    "messages": {
+        "nothingHere": "什么都没有…"
+    }
+}

android/app/src/main/assets/licenses/ffmpeg.txt

@@ -0,0 +1,504 @@
+This software uses code of <a href="http://ffmpeg.org">FFmpeg</a> licensed under the <a href="http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html">LGPLv2.1</a> and its source can be downloaded <a href="http://ffmpeg.org/download.html#get-sources">here</a>.
+
+                  GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 2.1, February 1999
+
+ Copyright (C) 1991, 1999 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+[This is the first released version of the Lesser GPL.  It also counts
+ as the successor of the GNU Library Public License, version 2, hence
+ the version number 2.1.]
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+Licenses are intended to guarantee your freedom to share and change
+free software--to make sure the software is free for all its users.
+
+  This license, the Lesser General Public License, applies to some
+specially designated software packages--typically libraries--of the
+Free Software Foundation and other authors who decide to use it.  You
+can use it too, but we suggest you first think carefully about whether
+this license or the ordinary General Public License is the better
+strategy to use in any particular case, based on the explanations below.
+
+  When we speak of free software, we are referring to freedom of use,
+not price.  Our General Public Licenses are designed to make sure that
+you have the freedom to distribute copies of free software (and charge
+for this service if you wish); that you receive source code or can get
+it if you want it; that you can change the software and use pieces of
+it in new free programs; and that you are informed that you can do
+these things.
+
+  To protect your rights, we need to make restrictions that forbid
+distributors to deny you these rights or to ask you to surrender these
+rights.  These restrictions translate to certain responsibilities for
+you if you distribute copies of the library or if you modify it.
+
+  For example, if you distribute copies of the library, whether gratis
+or for a fee, you must give the recipients all the rights that we gave
+you.  You must make sure that they, too, receive or can get the source
+code.  If you link other code with the library, you must provide
+complete object files to the recipients, so that they can relink them
+with the library after making changes to the library and recompiling
+it.  And you must show them these terms so they know their rights.
+
+  We protect your rights with a two-step method: (1) we copyright the
+library, and (2) we offer you this license, which gives you legal
+permission to copy, distribute and/or modify the library.
+
+  To protect each distributor, we want to make it very clear that
+there is no warranty for the free library.  Also, if the library is
+modified by someone else and passed on, the recipients should know
+that what they have is not the original version, so that the original
+author's reputation will not be affected by problems that might be
+introduced by others.
+
+  Finally, software patents pose a constant threat to the existence of
+any free program.  We wish to make sure that a company cannot
+effectively restrict the users of a free program by obtaining a
+restrictive license from a patent holder.  Therefore, we insist that
+any patent license obtained for a version of the library must be
+consistent with the full freedom of use specified in this license.
+
+  Most GNU software, including some libraries, is covered by the
+ordinary GNU General Public License.  This license, the GNU Lesser
+General Public License, applies to certain designated libraries, and
+is quite different from the ordinary General Public License.  We use
+this license for certain libraries in order to permit linking those
+libraries into non-free programs.
+
+  When a program is linked with a library, whether statically or using
+a shared library, the combination of the two is legally speaking a
+combined work, a derivative of the original library.  The ordinary
+General Public License therefore permits such linking only if the
+entire combination fits its criteria of freedom.  The Lesser General
+Public License permits more lax criteria for linking other code with
+the library.
+
+  We call this license the "Lesser" General Public License because it
+does Less to protect the user's freedom than the ordinary General
+Public License.  It also provides other free software developers Less
+of an advantage over competing non-free programs.  These disadvantages
+are the reason we use the ordinary General Public License for many
+libraries.  However, the Lesser license provides advantages in certain
+special circumstances.
+
+  For example, on rare occasions, there may be a special need to
+encourage the widest possible use of a certain library, so that it becomes
+a de-facto standard.  To achieve this, non-free programs must be
+allowed to use the library.  A more frequent case is that a free
+library does the same job as widely used non-free libraries.  In this
+case, there is little to gain by limiting the free library to free
+software only, so we use the Lesser General Public License.
+
+  In other cases, permission to use a particular library in non-free
+programs enables a greater number of people to use a large body of
+free software.  For example, permission to use the GNU C Library in
+non-free programs enables many more people to use the whole GNU
+operating system, as well as its variant, the GNU/Linux operating
+system.
+
+  Although the Lesser General Public License is Less protective of the
+users' freedom, it does ensure that the user of a program that is
+linked with the Library has the freedom and the wherewithal to run
+that program using a modified version of the Library.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.  Pay close attention to the difference between a
+"work based on the library" and a "work that uses the library".  The
+former contains code derived from the library, whereas the latter must
+be combined with the library in order to run.
+
+                  GNU LESSER GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License Agreement applies to any software library or other
+program which contains a notice placed by the copyright holder or
+other authorized party saying it may be distributed under the terms of
+this Lesser General Public License (also called "this License").
+Each licensee is addressed as "you".
+
+  A "library" means a collection of software functions and/or data
+prepared so as to be conveniently linked with application programs
+(which use some of those functions and data) to form executables.
+
+  The "Library", below, refers to any such software library or work
+which has been distributed under these terms.  A "work based on the
+Library" means either the Library or any derivative work under
+copyright law: that is to say, a work containing the Library or a
+portion of it, either verbatim or with modifications and/or translated
+straightforwardly into another language.  (Hereinafter, translation is
+included without limitation in the term "modification".)
+
+  "Source code" for a work means the preferred form of the work for
+making modifications to it.  For a library, complete source code means
+all the source code for all modules it contains, plus any associated
+interface definition files, plus the scripts used to control compilation
+and installation of the library.
+
+  Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running a program using the Library is not restricted, and output from
+such a program is covered only if its contents constitute a work based
+on the Library (independent of the use of the Library in a tool for
+writing it).  Whether that is true depends on what the Library does
+and what the program that uses the Library does.
+
+  1. You may copy and distribute verbatim copies of the Library's
+complete source code as you receive it, in any medium, provided that
+you conspicuously and appropriately publish on each copy an
+appropriate copyright notice and disclaimer of warranty; keep intact
+all the notices that refer to this License and to the absence of any
+warranty; and distribute a copy of this License along with the
+Library.
+
+  You may charge a fee for the physical act of transferring a copy,
+and you may at your option offer warranty protection in exchange for a
+fee.
+
+  2. You may modify your copy or copies of the Library or any portion
+of it, thus forming a work based on the Library, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) The modified work must itself be a software library.
+
+    b) You must cause the files modified to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    c) You must cause the whole of the work to be licensed at no
+    charge to all third parties under the terms of this License.
+
+    d) If a facility in the modified Library refers to a function or a
+    table of data to be supplied by an application program that uses
+    the facility, other than as an argument passed when the facility
+    is invoked, then you must make a good faith effort to ensure that,
+    in the event an application does not supply such function or
+    table, the facility still operates, and performs whatever part of
+    its purpose remains meaningful.
+
+    (For example, a function in a library to compute square roots has
+    a purpose that is entirely well-defined independent of the
+    application.  Therefore, Subsection 2d requires that any
+    application-supplied function or table used by this function must
+    be optional: if the application does not supply it, the square
+    root function must still compute square roots.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Library,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Library, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote
+it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Library.
+
+In addition, mere aggregation of another work not based on the Library
+with the Library (or with a work based on the Library) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may opt to apply the terms of the ordinary GNU General Public
+License instead of this License to a given copy of the Library.  To do
+this, you must alter all the notices that refer to this License, so
+that they refer to the ordinary GNU General Public License, version 2,
+instead of to this License.  (If a newer version than version 2 of the
+ordinary GNU General Public License has appeared, then you can specify
+that version instead if you wish.)  Do not make any other change in
+these notices.
+
+  Once this change is made in a given copy, it is irreversible for
+that copy, so the ordinary GNU General Public License applies to all
+subsequent copies and derivative works made from that copy.
+
+  This option is useful when you wish to copy part of the code of
+the Library into a program that is not a library.
+
+  4. You may copy and distribute the Library (or a portion or
+derivative of it, under Section 2) in object code or executable form
+under the terms of Sections 1 and 2 above provided that you accompany
+it with the complete corresponding machine-readable source code, which
+must be distributed under the terms of Sections 1 and 2 above on a
+medium customarily used for software interchange.
+
+  If distribution of object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the
+source code from the same place satisfies the requirement to
+distribute the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  5. A program that contains no derivative of any portion of the
+Library, but is designed to work with the Library by being compiled or
+linked with it, is called a "work that uses the Library".  Such a
+work, in isolation, is not a derivative work of the Library, and
+therefore falls outside the scope of this License.
+
+  However, linking a "work that uses the Library" with the Library
+creates an executable that is a derivative of the Library (because it
+contains portions of the Library), rather than a "work that uses the
+library".  The executable is therefore covered by this License.
+Section 6 states terms for distribution of such executables.
+
+  When a "work that uses the Library" uses material from a header file
+that is part of the Library, the object code for the work may be a
+derivative work of the Library even though the source code is not.
+Whether this is true is especially significant if the work can be
+linked without the Library, or if the work is itself a library.  The
+threshold for this to be true is not precisely defined by law.
+
+  If such an object file uses only numerical parameters, data
+structure layouts and accessors, and small macros and small inline
+functions (ten lines or less in length), then the use of the object
+file is unrestricted, regardless of whether it is legally a derivative
+work.  (Executables containing this object code plus portions of the
+Library will still fall under Section 6.)
+
+  Otherwise, if the work is a derivative of the Library, you may
+distribute the object code for the work under the terms of Section 6.
+Any executables containing that work also fall under Section 6,
+whether or not they are linked directly with the Library itself.
+
+  6. As an exception to the Sections above, you may also combine or
+link a "work that uses the Library" with the Library to produce a
+work containing portions of the Library, and distribute that work
+under terms of your choice, provided that the terms permit
+modification of the work for the customer's own use and reverse
+engineering for debugging such modifications.
+
+  You must give prominent notice with each copy of the work that the
+Library is used in it and that the Library and its use are covered by
+this License.  You must supply a copy of this License.  If the work
+during execution displays copyright notices, you must include the
+copyright notice for the Library among them, as well as a reference
+directing the user to the copy of this License.  Also, you must do one
+of these things:
+
+    a) Accompany the work with the complete corresponding
+    machine-readable source code for the Library including whatever
+    changes were used in the work (which must be distributed under
+    Sections 1 and 2 above); and, if the work is an executable linked
+    with the Library, with the complete machine-readable "work that
+    uses the Library", as object code and/or source code, so that the
+    user can modify the Library and then relink to produce a modified
+    executable containing the modified Library.  (It is understood
+    that the user who changes the contents of definitions files in the
+    Library will not necessarily be able to recompile the application
+    to use the modified definitions.)
+
+    b) Use a suitable shared library mechanism for linking with the
+    Library.  A suitable mechanism is one that (1) uses at run time a
+    copy of the library already present on the user's computer system,
+    rather than copying library functions into the executable, and (2)
+    will operate properly with a modified version of the library, if
+    the user installs one, as long as the modified version is
+    interface-compatible with the version that the work was made with.
+
+    c) Accompany the work with a written offer, valid for at
+    least three years, to give the same user the materials
+    specified in Subsection 6a, above, for a charge no more
+    than the cost of performing this distribution.
+
+    d) If distribution of the work is made by offering access to copy
+    from a designated place, offer equivalent access to copy the above
+    specified materials from the same place.
+
+    e) Verify that the user has already received a copy of these
+    materials or that you have already sent this user a copy.
+
+  For an executable, the required form of the "work that uses the
+Library" must include any data and utility programs needed for
+reproducing the executable from it.  However, as a special exception,
+the materials to be distributed need not include anything that is
+normally distributed (in either source or binary form) with the major
+components (compiler, kernel, and so on) of the operating system on
+which the executable runs, unless that component itself accompanies
+the executable.
+
+  It may happen that this requirement contradicts the license
+restrictions of other proprietary libraries that do not normally
+accompany the operating system.  Such a contradiction means you cannot
+use both them and the Library together in an executable that you
+distribute.
+
+  7. You may place library facilities that are a work based on the
+Library side-by-side in a single library together with other library
+facilities not covered by this License, and distribute such a combined
+library, provided that the separate distribution of the work based on
+the Library and of the other library facilities is otherwise
+permitted, and provided that you do these two things:
+
+    a) Accompany the combined library with a copy of the same work
+    based on the Library, uncombined with any other library
+    facilities.  This must be distributed under the terms of the
+    Sections above.
+
+    b) Give prominent notice with the combined library of the fact
+    that part of it is a work based on the Library, and explaining
+    where to find the accompanying uncombined form of the same work.
+
+  8. You may not copy, modify, sublicense, link with, or distribute
+the Library except as expressly provided under this License.  Any
+attempt otherwise to copy, modify, sublicense, link with, or
+distribute the Library is void, and will automatically terminate your
+rights under this License.  However, parties who have received copies,
+or rights, from you under this License will not have their licenses
+terminated so long as such parties remain in full compliance.
+
+  9. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Library or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Library (or any work based on the
+Library), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Library or works based on it.
+
+  10. Each time you redistribute the Library (or any work based on the
+Library), the recipient automatically receives a license from the
+original licensor to copy, distribute, link with or modify the Library
+subject to these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties with
+this License.
+
+  11. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Library at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Library by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Library.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply,
+and the section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  12. If the distribution and/or use of the Library is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Library under this License may add
+an explicit geographical distribution limitation excluding those countries,
+so that distribution is permitted only in or among countries not thus
+excluded.  In such case, this License incorporates the limitation as if
+written in the body of this License.
+
+  13. The Free Software Foundation may publish revised and/or new
+versions of the Lesser General Public License from time to time.
+Such new versions will be similar in spirit to the present version,
+but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Library
+specifies a version number of this License which applies to it and
+"any later version", you have the option of following the terms and
+conditions either of that version or of any later version published by
+the Free Software Foundation.  If the Library does not specify a
+license version number, you may choose any version ever published by
+the Free Software Foundation.
+
+  14. If you wish to incorporate parts of the Library into other free
+programs whose distribution conditions are incompatible with these,
+write to the author to ask for permission.  For software which is
+copyrighted by the Free Software Foundation, write to the Free
+Software Foundation; we sometimes make exceptions for this.  Our
+decision will be guided by the two goals of preserving the free status
+of all derivatives of our free software and of promoting the sharing
+and reuse of software generally.
+
+                            NO WARRANTY
+
+  15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
+WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
+OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
+KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+LIBRARY IS WITH YOU.  SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
+THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
+WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
+AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
+FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
+DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+           How to Apply These Terms to Your New Libraries
+
+  If you develop a new library, and you want it to be of the greatest
+possible use to the public, we recommend making it free software that
+everyone can redistribute and change.  You can do so by permitting
+redistribution under these terms (or, alternatively, under the terms of the
+ordinary General Public License).
+
+  To apply these terms, attach the following notices to the library.  It is
+safest to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the library's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Lesser General Public
+    License as published by the Free Software Foundation; either
+    version 2.1 of the License, or (at your option) any later version.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public
+    License along with this library; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+
+Also add information on how to contact you by electronic and paper mail.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the library, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the
+  library `Frob' (a library for tweaking knobs) written by James Random Hacker.
+
+  <signature of Ty Coon>, 1 April 1990
+  Ty Coon, President of Vice
+
+That's all there is to it!

android/app/src/main/java/com/subtracks/MainActivity.java

@@ -14,6 +14,9 @@ public class MainActivity extends ReactActivity {
     return "subtracks";
   }
 
+  // required by react-native-screens
+  // "This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts."
+  // https://reactnavigation.org/docs/getting-started
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(null);

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

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

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

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

android/app/src/main/res/xml/network_security_config.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <base-config cleartextTrafficPermitted="true">
+        <trust-anchors>
+            <certificates src="system" />
+            <certificates src="user" />
+        </trust-anchors>
+    </base-config>
+</network-security-config>

android/build.gradle

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

android/exoplayer_settings.gradle

@@ -0,0 +1,64 @@
+// Copyright (C) 2017 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.
+def rootDir = gradle.ext.exoplayerRoot
+def modulePrefix = ':'
+if (gradle.ext.has('exoplayerModulePrefix')) {
+    modulePrefix += gradle.ext.exoplayerModulePrefix
+}
+
+// include modulePrefix + 'library'
+include modulePrefix + 'library-core'
+include modulePrefix + 'library-dash'
+include modulePrefix + 'library-hls'
+include modulePrefix + 'library-smoothstreaming'
+// include modulePrefix + 'library-ui'
+include modulePrefix + 'testutils'
+// include modulePrefix + 'extension-av1'
+include modulePrefix + 'extension-ffmpeg'
+// include modulePrefix + 'extension-flac'
+// include modulePrefix + 'extension-gvr'
+// include modulePrefix + 'extension-ima'
+// include modulePrefix + 'extension-cast'
+// include modulePrefix + 'extension-cronet'
+// include modulePrefix + 'extension-mediasession'
+// include modulePrefix + 'extension-okhttp'
+// include modulePrefix + 'extension-opus'
+// include modulePrefix + 'extension-vp9'
+// include modulePrefix + 'extension-rtmp'
+// include modulePrefix + 'extension-leanback'
+// include modulePrefix + 'extension-jobdispatcher'
+// include modulePrefix + 'extension-workmanager'
+
+// project(modulePrefix + 'library').projectDir = new File(rootDir, 'library/all')
+project(modulePrefix + 'library-core').projectDir = new File(rootDir, 'library/core')
+project(modulePrefix + 'library-dash').projectDir = new File(rootDir, 'library/dash')
+project(modulePrefix + 'library-hls').projectDir = new File(rootDir, 'library/hls')
+project(modulePrefix + 'library-smoothstreaming').projectDir = new File(rootDir, 'library/smoothstreaming')
+// project(modulePrefix + 'library-ui').projectDir = new File(rootDir, 'library/ui')
+project(modulePrefix + 'testutils').projectDir = new File(rootDir, 'testutils')
+// project(modulePrefix + 'extension-av1').projectDir = new File(rootDir, 'extensions/av1')
+project(modulePrefix + 'extension-ffmpeg').projectDir = new File(rootDir, 'extensions/ffmpeg')
+// project(modulePrefix + 'extension-flac').projectDir = new File(rootDir, 'extensions/flac')
+// project(modulePrefix + 'extension-gvr').projectDir = new File(rootDir, 'extensions/gvr')
+// project(modulePrefix + 'extension-ima').projectDir = new File(rootDir, 'extensions/ima')
+// project(modulePrefix + 'extension-cast').projectDir = new File(rootDir, 'extensions/cast')
+// project(modulePrefix + 'extension-cronet').projectDir = new File(rootDir, 'extensions/cronet')
+// project(modulePrefix + 'extension-mediasession').projectDir = new File(rootDir, 'extensions/mediasession')
+// project(modulePrefix + 'extension-okhttp').projectDir = new File(rootDir, 'extensions/okhttp')
+// project(modulePrefix + 'extension-opus').projectDir = new File(rootDir, 'extensions/opus')
+// project(modulePrefix + 'extension-vp9').projectDir = new File(rootDir, 'extensions/vp9')
+// project(modulePrefix + 'extension-rtmp').projectDir = new File(rootDir, 'extensions/rtmp')
+// project(modulePrefix + 'extension-leanback').projectDir = new File(rootDir, 'extensions/leanback')
+// project(modulePrefix + 'extension-jobdispatcher').projectDir = new File(rootDir, 'extensions/jobdispatcher')
+// project(modulePrefix + 'extension-workmanager').projectDir = new File(rootDir, 'extensions/workmanager')

android/gradle.properties

@@ -9,8 +9,8 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx10248m -XX:MaxPermSize=256m
-# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+# Default value: -Xmx1024m -XX:MaxPermSize=256m
+org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
@@ -25,8 +25,12 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.75.1
+FLIPPER_VERSION=0.99.0
 
 # react-native-async-storage next
 AsyncStorage_useNextStorage=true
 AsyncStorage_kotlinVersion=1.4.21
+
+# required to override exoplayer used by react-native-track-player, resolves "abstract method" error
+# see: https://github.com/google/ExoPlayer/issues/6801#issuecomment-574089568
+android.enableDexingArtifactTransform=false

android/gradle/wrapper/gradle-wrapper.properties

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

android/licenses.yml

@@ -4,12 +4,18 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: https://developer.android.com/jetpack/androidx
+- artifact: androidx.annotation:annotation-experimental:+
+  name: annotation-experimental
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://developer.android.com/jetpack/androidx/releases/annotation#1.1.0
 - artifact: androidx.annotation:annotation:+
   name: annotation
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: http://developer.android.com/tools/extras/support-library.html
+  url: https://developer.android.com/jetpack/androidx/releases/annotation#1.2.0
 - artifact: androidx.appcompat:appcompat-resources:+
   name: appcompat-resources
   copyrightHolder: Original Author
@@ -40,6 +46,12 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: http://developer.android.com/tools/extras/support-library.html
+- artifact: androidx.autofill:autofill:+
+  name: autofill
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://developer.android.com/jetpack/androidx/releases/autofill#1.1.0
 - artifact: androidx.cardview:cardview:+
   name: cardview
   copyrightHolder: Original Author
@@ -58,6 +70,12 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: https://developer.android.com/jetpack/androidx
+- artifact: androidx.core:core-ktx:+
+  name: core-ktx
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://developer.android.com/jetpack/androidx/releases/core#1.6.0
 - artifact: androidx.core:core:+
   name: core
   copyrightHolder: Original Author
@@ -189,19 +207,19 @@
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://developer.android.com/topic/libraries/architecture/index.html
+  url: https://developer.android.com/jetpack/androidx/releases/room#2.3.0
 - artifact: androidx.room:room-ktx:+
   name: room-ktx
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://developer.android.com/topic/libraries/architecture/index.html
+  url: https://developer.android.com/jetpack/androidx/releases/room#2.3.0
 - artifact: androidx.room:room-runtime:+
   name: room-runtime
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
-  url: https://developer.android.com/topic/libraries/architecture/index.html
+  url: https://developer.android.com/jetpack/androidx/releases/room#2.3.0
 - artifact: androidx.savedstate:savedstate:+
   name: savedstate
   copyrightHolder: Original Author
@@ -232,6 +250,24 @@
   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.test.ext:junit:+
+  name: junit
+  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/testing
+- artifact: androidx.test:core:+
+  name: core
+  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/testing
+- artifact: androidx.test:monitor:+
+  name: monitor
+  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/testing
 - artifact: androidx.transition:transition:+
   name: transition
   copyrightHolder: Original Author
@@ -283,62 +319,104 @@
 - artifact: com.facebook.fresco:drawee:+
   name: drawee
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:fbcore:+
   name: fbcore
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:fresco:+
   name: fresco
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:imagepipeline-base:+
   name: imagepipeline-base
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:imagepipeline-native:+
+  name: imagepipeline-native
+  copyrightHolder: Original Author
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:imagepipeline-okhttp3:+
   name: imagepipeline-okhttp3
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:imagepipeline:+
   name: imagepipeline
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:memory-type-ashmem:+
+  name: memory-type-ashmem
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:memory-type-java:+
+  name: memory-type-java
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:memory-type-native:+
+  name: memory-type-native
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:middleware:+
+  name: middleware
+  copyrightHolder: Original Author
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:nativeimagefilters:+
   name: nativeimagefilters
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.fresco:nativeimagetranscoder:+
   name: nativeimagetranscoder
   copyrightHolder: Original Author
-  license: MIT License
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:soloader:+
+  name: soloader
+  copyrightHolder: Original Author
+  license: MIT
+  licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
+  url: https://github.com/facebook/fresco
+- artifact: com.facebook.fresco:ui-common:+
+  name: ui-common
+  copyrightHolder: Original Author
+  license: MIT
   licenseUrl: https://github.com/facebook/fresco/blob/master/LICENSE
   url: https://github.com/facebook/fresco
 - artifact: com.facebook.infer.annotation:infer-annotation:+
   name: infer-annotation
   copyrightHolder: Original Author
-  license: BSD license
+  license: MIT license
   licenseUrl: https://github.com/facebook/infer/blob/master/LICENSE
   url: http://fbinfer.com/
 - artifact: com.facebook.react:react-native:+
   name: react-native
   copyrightHolder: Original Author
   license: MIT License
-  licenseUrl: https://github.com/facebook/react-native/blob/master/LICENSE
+  licenseUrl: https://github.com/facebook/react-native/blob/HEAD/LICENSE
   url: https://github.com/facebook/react-native
 - artifact: com.facebook.soloader:annotation:+
   name: annotation
@@ -414,12 +492,59 @@
   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: com.google.auto.value:auto-value-annotations:+
+  name: auto-value-annotations
+  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/google/auto
 - artifact: com.google.code.findbugs:jsr305:+
   name: jsr305
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: http://findbugs.sourceforge.net/
+- artifact: com.google.errorprone:error_prone_annotations:+
+  name: error_prone_annotations
+  copyrightHolder: Original Author
+  license: Apache 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+- artifact: com.google.guava:failureaccess:+
+  name: failureaccess
+  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/google/guava
+- artifact: com.google.guava:guava:+
+  name: guava
+  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/google/guava
+- artifact: com.google.guava:listenablefuture:+
+  name: listenablefuture
+  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/google/guava
+- artifact: com.google.j2objc:j2objc-annotations:+
+  name: j2objc-annotations
+  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/google/j2objc/
+- artifact: com.google.truth:truth:+
+  name: truth
+  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/google/truth
+- artifact: com.googlecode.java-diff-utils:diffutils:+
+  name: diffutils
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: http://code.google.com/p/java-diff-utils/
 - artifact: com.parse.bolts:bolts-tasks:+
   name: bolts-tasks
   copyrightHolder: Original Author
@@ -429,33 +554,105 @@
 - artifact: com.squareup.okhttp3:okhttp-urlconnection:+
   name: okhttp-urlconnection
   copyrightHolder: Original Author
-  license: Apache-2.0 License
-  licenseUrl: https://github.com/square/okhttp/blob/master/LICENSE.txt
-  url: https://github.com/square/okhttp
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://square.github.io/okhttp/
 - artifact: com.squareup.okhttp3:okhttp:+
   name: okhttp
   copyrightHolder: Original Author
-  license: Apache-2.0 License
-  licenseUrl: https://github.com/square/okhttp/blob/master/LICENSE.txt
-  url: https://github.com/square/okhttp
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://square.github.io/okhttp/
 - artifact: com.squareup.okio:okio:+
   name: okio
   copyrightHolder: Original Author
-  license: Apache-2.0 License
-  licenseUrl: https://github.com/square/okio/blob/master/LICENSE.txt
-  url: https://github.com/square/okio
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: https://github.com/square/okio/
 - artifact: javax.inject:javax.inject:+
   name: javax.inject
   copyrightHolder: Original Author
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: http://code.google.com/p/atinject/
+- artifact: junit:junit:+
+  name: junit
+  copyrightHolder: Original Author
+  license: Eclipse Public License 1.0
+  licenseUrl: http://www.eclipse.org/legal/epl-v10.html
+  url: http://junit.org
+- artifact: net.bytebuddy:byte-buddy-agent:+
+  name: byte-buddy-agent
+  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/raphw/byte-buddy
+- artifact: net.bytebuddy:byte-buddy:+
+  name: byte-buddy
+  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/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
+  license: GNU General Public License, version 2 (GPL2), with the classpath exception
+  licenseUrl: http://www.gnu.org/software/classpath/license.html
+  url: https://checkerframework.org
+- artifact: org.checkerframework:checker-qual:+
+  name: checker-qual
+  copyrightHolder: Original Author
+  license: The MIT License
+  licenseUrl: http://opensource.org/licenses/MIT
+  url: https://checkerframework.org
+- artifact: org.codehaus.mojo:animal-sniffer-annotations:+
+  name: animal-sniffer-annotations
+  copyrightHolder: Original Author
+  license: The MIT License
+  licenseUrl: http://opensource.org/licenses/MIT
+  url: https://github.com/mojohaus/animal-sniffer
+- artifact: org.hamcrest:hamcrest-core:+
+  name: hamcrest-core
+  copyrightHolder: Original Author
+  license: BSD License
+  licenseUrl: https://raw.githubusercontent.com/hamcrest/JavaHamcrest/master/LICENSE.txt
+  url: https://github.com/hamcrest/JavaHamcrest
+- artifact: org.jetbrains.kotlin:kotlin-annotations-jvm:+
+  name: kotlin-annotations-jvm
+  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-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
@@ -480,3 +677,15 @@
   license: The Apache Software License, Version 2.0
   licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
   url: http://www.jetbrains.org
+- artifact: org.mockito:mockito-core:+
+  name: mockito-core
+  copyrightHolder: Original Author
+  license: The MIT License
+  licenseUrl: https://github.com/mockito/mockito/blob/master/LICENSE
+  url: https://github.com/mockito/mockito
+- artifact: org.objenesis:objenesis:+
+  name: objenesis
+  copyrightHolder: Original Author
+  license: The Apache Software License, Version 2.0
+  licenseUrl: http://www.apache.org/licenses/LICENSE-2.0.txt
+  url: http://objenesis.org

android/settings.gradle

@@ -7,3 +7,6 @@ include ':react-native-fs'
 project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+gradle.ext.exoplayerRoot = '../submodules/ExoPlayer'
+gradle.ext.exoplayerModulePrefix = 'exoplayer-'
+apply from: file("exoplayer_settings.gradle")

app/App.tsx

@@ -2,30 +2,40 @@ import RootNavigator from '@app/navigation/RootNavigator'
 import SplashPage from '@app/screens/SplashPage'
 import colors from '@app/styles/colors'
 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 { StatusBar, StyleSheet, View } from 'react-native'
 import { MenuProvider } from 'react-native-popup-menu'
+import { QueryClientProvider } from 'react-query'
+import ProgressHook from './components/ProgressHook'
+import queryClient from './queryClient'
+import { useStore } from './state/store'
 
 const Debug = () => {
-  const currentTrack = useStore(selectTrackPlayer.currentTrack)
-  console.log(currentTrack?.title)
+  const currentTrackTitle = useStore(store => store.currentTrack?.title)
+  console.log('currentTrackTitle', currentTrackTitle)
   return <></>
 }
 
-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 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 styles = StyleSheet.create({
   appContainer: {

app/components/BackgroundHeaderFlatList.tsx

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

app/components/Button.tsx

@@ -16,7 +16,13 @@ const Button: React.FC<{
       onPress={onPress}
       disabled={disabled}
       style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}, style]}>
-      {title ? <Text style={styles.text}>{title}</Text> : children}
+      {title ? (
+        <Text style={styles.text} numberOfLines={2} adjustsFontSizeToFit={true}>
+          {title}
+        </Text>
+      ) : (
+        children
+      )}
     </PressableOpacity>
   )
 }
@@ -26,6 +32,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.accent,
     paddingHorizontal: 10,
     minHeight: 42,
+    maxHeight: 42,
     justifyContent: 'center',
     borderRadius: 1000,
   },
@@ -43,6 +50,7 @@ const styles = StyleSheet.create({
     fontFamily: font.bold,
     color: colors.text.primary,
     paddingHorizontal: 14,
+    textAlign: 'center',
   },
 })
 

app/components/ContextMenu.tsx

@@ -1,20 +1,19 @@
 import PressableOpacity from '@app/components/PressableOpacity'
-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 { useStar } from '@app/hooks/query'
+import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { ReactComponentLike } from 'prop-types'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 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'
+import { withSuspenseMemo } from './withSuspense'
 
 const { SlideInMenu } = renderers
 
@@ -25,6 +24,7 @@ type ContextMenuProps = {
   triggerTouchableStyle?: StyleProp<ViewStyle>
   onPress?: () => any
   triggerOnLongPress?: boolean
+  disabled?: boolean
 }
 
 type InternalContextMenuProps = ContextMenuProps & {
@@ -42,6 +42,7 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
   menuOptions,
   children,
   triggerOnLongPress,
+  disabled,
 }) => {
   menuStyle = menuStyle || { flex: 1 }
   triggerWrapperStyle = triggerWrapperStyle || { flex: 1 }
@@ -50,11 +51,12 @@ 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 },
+          triggerTouchable: { style: triggerTouchableStyle, disabled },
           TriggerTouchableComponent: PressableOpacity,
         }}
         onAlternativeAction={onPress}>
@@ -106,7 +108,9 @@ const ContextMenuIconTextOption = React.memo<ContextMenuIconTextOptionProps>(
     return (
       <ContextMenuOption onSelect={onSelect}>
         <View style={styles.icon}>{Icon}</View>
-        <Text style={styles.optionText}>{text}</Text>
+        <Text style={styles.optionText} numberOfLines={1} adjustsFontSizeToFit={true} minimumFontScale={0.6}>
+          {text}
+        </Text>
       </ContextMenuOption>
     )
   },
@@ -115,52 +119,90 @@ const ContextMenuIconTextOption = React.memo<ContextMenuIconTextOptionProps>(
 const MenuHeader = React.memo<{
   coverArt?: string
   artistId?: string
+  albumId?: string
   title: string
   subtitle?: string
-}>(({ coverArt, artistId, title, subtitle }) => (
-  <View style={styles.menuHeader}>
-    {artistId ? (
-      <CoverArt type="artist" artistId={artistId} style={styles.coverArt} resizeMode={'cover'} round={true} />
-    ) : (
-      <CoverArt type="cover" coverArt={coverArt} style={styles.coverArt} resizeMode={'cover'} />
-    )}
-    <View style={styles.menuHeaderText}>
-      <Text numberOfLines={1} style={styles.menuTitle}>
-        {title}
-      </Text>
-      {subtitle ? (
-        <Text numberOfLines={1} style={styles.menuSubtitle}>
-          {subtitle}
-        </Text>
-      ) : (
-        <></>
-      )}
-    </View>
-  </View>
-))
+}>(({ coverArt, artistId, albumId, title, subtitle }) => {
+  let CoverArtComponent = <></>
+  if (artistId) {
+    CoverArtComponent = (
+      <CoverArt
+        type="artist"
+        artistId={artistId}
+        style={styles.coverArt}
+        resizeMode="cover"
+        round={true}
+        size="thumbnail"
+        fadeDuration={0}
+      />
+    )
+  } else if (albumId) {
+    CoverArtComponent = (
+      <CoverArt
+        type="album"
+        albumId={albumId}
+        style={styles.coverArt}
+        resizeMode="cover"
+        size="thumbnail"
+        fadeDuration={0}
+      />
+    )
+  } else {
+    CoverArtComponent = (
+      <CoverArt
+        type="cover"
+        coverArt={coverArt}
+        style={styles.coverArt}
+        resizeMode="cover"
+        size="thumbnail"
+        fadeDuration={0}
+      />
+    )
+  }
 
-const OptionStar = React.memo<{
+  return (
+    <View style={styles.menuHeader}>
+      {CoverArtComponent}
+      <View style={styles.menuHeaderText}>
+        <Text numberOfLines={1} style={styles.menuTitle}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text numberOfLines={1} style={styles.menuSubtitle}>
+            {subtitle}
+          </Text>
+        ) : (
+          <></>
+        )}
+      </View>
+    </View>
+  )
+})
+
+const OptionStar = withSuspenseMemo<{
   id: string
   type: StarrableItemType
   additionalText?: string
 }>(({ id, type, additionalText: text }) => {
-  const starred = useStarred(id, type)
-  const setStarred = useStore(selectMusic.starItem)
+  const { query, toggle } = useStar(id, type)
+  const { t } = useTranslation()
 
   return (
     <ContextMenuIconTextOption
-      IconComponentRaw={<Star starred={starred} size={26} />}
-      text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
-      onSelect={() => setStarred(id, type, starred)}
+      IconComponentRaw={<Star starred={!!query.data} size={26} />}
+      text={(query.data ? t('context.actions.unstar') : t('context.actions.star')) + (text ? ` ${text}` : '')}
+      onSelect={() => toggle.mutate()}
     />
   )
 })
 
-const OptionViewArtist = React.memo<{
+const OptionViewArtist = withSuspenseMemo<{
   navigation: NavigationProp<any>
   artist?: string
   artistId?: string
 }>(({ navigation, artist, artistId }) => {
+  const { t } = useTranslation()
+
   if (!artist || !artistId) {
     return <></>
   }
@@ -170,17 +212,19 @@ const OptionViewArtist = React.memo<{
       IconComponent={IconFA}
       name="microphone"
       size={26}
-      text="View Artist"
+      text={t('resources.artist.actions.view')}
       onSelect={() => navigation.navigate('artist', { id: artistId, title: artist })}
     />
   )
 })
 
-const OptionViewAlbum = React.memo<{
+const OptionViewAlbum = withSuspenseMemo<{
   navigation: NavigationProp<any>
   album?: string
   albumId?: string
 }>(({ navigation, album, albumId }) => {
+  const { t } = useTranslation()
+
   if (!album || !albumId) {
     return <></>
   }
@@ -190,7 +234,7 @@ const OptionViewAlbum = React.memo<{
       IconComponent={IconFA5}
       name="compact-disc"
       size={26}
-      text="View Album"
+      text={t('resources.album.actions.view')}
       onSelect={() => navigation.navigate('album', { id: albumId, title: album })}
     />
   )
@@ -203,7 +247,7 @@ const OptionViewAlbum = React.memo<{
 // ))
 
 export type AlbumContextPressableProps = ContextMenuProps & {
-  album: AlbumListItem
+  album: Album
 }
 
 export const AlbumContextPressable: React.FC<AlbumContextPressableProps> = props => {
@@ -237,7 +281,7 @@ export const SongContextPressable: React.FC<SongContextPressableProps> = props =
   return (
     <ContextMenu
       {...props}
-      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} coverArt={song.coverArt} />}
+      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} albumId={song.albumId} />}
       menuOptions={
         <>
           <OptionStar id={song.id} type={song.itemType} />
@@ -284,7 +328,7 @@ export const NowPlayingContextPressable: React.FC<NowPlayingContextPressableProp
   return (
     <ContextMenu
       {...props}
-      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} coverArt={song.coverArt} />}
+      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} albumId={song.albumId} />}
       menuOptions={
         <>
           <OptionStar id={song.id} type={song.itemType} />
@@ -304,6 +348,8 @@ const styles = StyleSheet.create({
   },
   optionsWrapper: {
     // marginBottom: 10,
+    paddingHorizontal: 20,
+    // backgroundColor: 'purple',
   },
   menuHeader: {
     paddingTop: 14,
@@ -334,9 +380,11 @@ const styles = StyleSheet.create({
   },
   option: {
     paddingVertical: 8,
-    paddingHorizontal: 20,
+    // paddingHorizontal: 100,
     flexDirection: 'row',
     alignItems: 'center',
+    // backgroundColor: 'blue',
+    overflow: 'hidden',
   },
   icon: {
     marginRight: 10,

app/components/CoverArt.tsx

@@ -1,5 +1,5 @@
-import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
-import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
+import { useQueryAlbumCoverArtPath, useQueryArtistArtPath, useQueryCoverArtPath } from '@app/hooks/query'
+import { CacheImageSize } from '@app/models/cache'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
 import {
@@ -18,7 +18,8 @@ type BaseProps = {
   imageStyle?: ImageStyle
   resizeMode?: ImageResizeMode
   round?: boolean
-  size?: CacheImageSize
+  size: CacheImageSize
+  fadeDuration?: number
 }
 
 type ArtistCoverArtProps = BaseProps & {
@@ -31,50 +32,68 @@ type CoverArtProps = BaseProps & {
   coverArt?: string
 }
 
-const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
-  ({ cache, style, imageStyle, resizeMode }) => {
+type AlbumIdProps = BaseProps & {
+  type: 'album'
+  albumId?: string
+}
+
+type ImageSourceProps = BaseProps & {
+  data?: string
+  isFetching: boolean
+  isExistingFetching: boolean
+}
+
+const ImageSource = React.memo<ImageSourceProps>(
+  ({ style, imageStyle, resizeMode, data, isFetching, isExistingFetching, fadeDuration }) => {
     const [error, setError] = useState(false)
 
     let source: ImageSourcePropType
-    if (!error && cache?.file && !cache?.request?.promise) {
-      source = { uri: `file://${cache.file.path}`, cache: 'reload' }
+    if (!error && data) {
+      source = { uri: `file://${data}` }
     } else {
       source = require('@res/fallback.png')
     }
 
     return (
       <>
-        <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}
-        />
+        {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} />
+        )}
       </>
     )
   },
 )
 
 const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
-  const cache = useArtistArtFile(props.artistId, props.size)
+  const { data, isFetching, isExistingFetching } = useQueryArtistArtPath(props.artistId, props.size)
 
-  return <ImageSource cache={cache} {...props} imageStyle={{ ...styles.artistImage, ...props.imageStyle }} />
+  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
 })
 
 const CoverArtImage = React.memo<CoverArtProps>(props => {
-  const cache = useCoverArtFile(props.coverArt, props.size)
+  const { data, isFetching, isExistingFetching } = useQueryCoverArtPath(props.coverArt, props.size)
 
-  return <ImageSource cache={cache} {...props} />
+  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
 })
 
-const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {
+const AlbumIdIamge = React.memo<AlbumIdProps>(props => {
+  const { data, isFetching, isExistingFetching } = useQueryAlbumCoverArtPath(props.albumId, props.size)
+
+  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
+})
+
+const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps | AlbumIdProps>(props => {
   const viewStyles = [props.style]
   if (props.round) {
     viewStyles.push(styles.round)
@@ -85,6 +104,9 @@ const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {
     case 'artist':
       imageComponent = <ArtistImage {...(props as ArtistCoverArtProps)} />
       break
+    case 'album':
+      imageComponent = <AlbumIdIamge {...(props as AlbumIdProps)} />
+      break
     default:
       imageComponent = <CoverArtImage {...(props as CoverArtProps)} />
       break

app/components/FilterButton.tsx

@@ -1,10 +1,13 @@
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import React from 'react'
-import { Text, StyleSheet } from 'react-native'
-import { MenuOption, Menu, MenuTrigger, MenuOptions } from 'react-native-popup-menu'
+import { Text, StyleSheet, View } from 'react-native'
+import { MenuOption, Menu, MenuTrigger, MenuOptions, renderers } from 'react-native-popup-menu'
 import PressableOpacity from './PressableOpacity'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { ScrollView } from 'react-native-gesture-handler'
+
+const { SlideInMenu } = renderers
 
 export type OptionData = {
   value: string
@@ -17,12 +20,14 @@ const Option = React.memo<{
   selected?: boolean
 }>(({ text, value, selected }) => (
   <MenuOption style={styles.option} value={value}>
-    <Text style={styles.optionText}>{text}</Text>
     {selected ? (
-      <Icon name="checkbox-marked-circle" size={26} color={colors.accent} />
+      <Icon name="checkbox-marked-circle" size={32} color={colors.accent} style={styles.icon} />
     ) : (
-      <Icon name="checkbox-blank-circle-outline" size={26} color={colors.text.secondary} />
+      <Icon name="checkbox-blank-circle-outline" size={32} color={colors.text.secondary} style={styles.icon} />
     )}
+    <Text style={styles.optionText} numberOfLines={1} adjustsFontSizeToFit={true} minimumFontScale={0.6}>
+      {text}
+    </Text>
   </MenuOption>
 ))
 
@@ -30,9 +35,10 @@ const FilterButton = React.memo<{
   value?: string
   data: OptionData[]
   onSelect?: (selection: string) => void
-}>(({ value, data, onSelect }) => {
+  title: string
+}>(({ value, data, onSelect, title }) => {
   return (
-    <Menu onSelect={onSelect}>
+    <Menu onSelect={onSelect} renderer={SlideInMenu}>
       <MenuTrigger
         customStyles={{
           triggerOuterWrapper: styles.filterOuterWrapper,
@@ -40,16 +46,23 @@ const FilterButton = React.memo<{
           triggerTouchable: { style: styles.filter },
           TriggerTouchableComponent: PressableOpacity,
         }}>
-        <Icon name="filter-variant" color="white" size={30} style={styles.filterIcon} />
+        <Icon name="filter-variant" color="white" size={30} />
       </MenuTrigger>
       <MenuOptions
         customStyles={{
           optionsWrapper: styles.optionsWrapper,
           optionsContainer: styles.optionsContainer,
         }}>
-        {data.map(o => (
-          <Option key={o.value} text={o.text} value={o.value} selected={o.value === value} />
-        ))}
+        <ScrollView style={styles.optionsScroll} overScrollMode="never">
+          <View style={styles.header}>
+            <Text style={styles.headerText} numberOfLines={2} ellipsizeMode="clip">
+              {title}
+            </Text>
+          </View>
+          {data.map(o => (
+            <Option key={o.value} text={o.text} value={o.value} selected={o.value === value} />
+          ))}
+        </ScrollView>
       </MenuOptions>
     </Menu>
   )
@@ -71,28 +84,45 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: colors.accent,
   },
-  filterIcon: {
-    // top: 4,
+  optionsScroll: {
+    maxHeight: 260,
   },
   optionsWrapper: {
-    maxWidth: 145,
+    overflow: 'hidden',
   },
   optionsContainer: {
-    backgroundColor: colors.gradient.high,
-    maxWidth: 145,
+    backgroundColor: 'rgba(45, 45, 45, 0.95)',
+  },
+  header: {
+    paddingHorizontal: 20,
+    // paddingVertical: 10,
+    marginTop: 16,
+    marginBottom: 6,
+  },
+  headerText: {
+    fontFamily: font.bold,
+    fontSize: 20,
+    color: colors.text.primary,
   },
   option: {
-    flexDirection: 'row',
-    paddingHorizontal: 12,
     paddingVertical: 8,
-    justifyContent: 'center',
+    paddingHorizontal: 20,
+    flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-start',
   },
   optionText: {
-    color: colors.text.primary,
     fontFamily: font.semiBold,
     fontSize: 16,
-    flex: 1,
+    color: colors.text.primary,
+  },
+  icon: {
+    marginRight: 14,
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // backgroundColor: 'red',
   },
 })
 

app/components/GradientScrollView.tsx

@@ -4,6 +4,7 @@ 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> & {
@@ -13,8 +14,9 @@ export type GradientScrollViewProps = PropsWithChildren<
 
 const GradientScrollView = React.forwardRef<ScrollView, GradientScrollViewProps>((props, ref) => {
   const layout = useWindowDimensions()
+  const paddingTop = useSafeAreaInsets().top
 
-  const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
+  const minHeight = layout.height - (dimensions.header + paddingTop + dimensions.bottom())
 
   return (
     <Animated.ScrollView

app/components/HeaderBar.tsx

@@ -1,17 +1,18 @@
+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 React, { useCallback } from 'react'
-import { View, StatusBar, Text, StyleSheet, ViewStyle } from 'react-native'
-import Animated from 'react-native-reanimated'
-import PressableOpacity from './PressableOpacity'
-import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { ReactComponentLike } from 'prop-types'
-import { AlbumListItem, Song } from '@app/models/music'
+import React, { useCallback } from 'react'
+import { StyleSheet, Text, View, 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'
 
-export type HeaderContextItem = Song | AlbumListItem
+export type HeaderContextItem = Song | Album
 
 const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
   const moreIcon = <IconMat name="more-vert" color="white" size={25} />
@@ -48,11 +49,12 @@ const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) =
 
 const HeaderBar = React.memo<{
   title?: string
-  headerStyle?: Animated.AnimatedStyleProp<ViewStyle> | Animated.AnimatedStyleProp<ViewStyle>[]
+  headerStyle?: Animated.AnimateStyle<ViewStyle> | Animated.AnimateStyle<ViewStyle>[]
   HeaderCenter?: ReactComponentLike
   contextItem?: HeaderContextItem
 }>(({ title, headerStyle, HeaderCenter, contextItem }) => {
   const navigation = useNavigation()
+  const top = useSafeAreaInsets().top
 
   const back = useCallback(() => {
     navigation.goBack()
@@ -61,7 +63,7 @@ const HeaderBar = React.memo<{
   const _headerStyle = Array.isArray(headerStyle) ? headerStyle : [headerStyle]
 
   return (
-    <Animated.View style={[styles.container, ..._headerStyle]}>
+    <Animated.View style={[styles.container, { paddingTop: top, height: dimensions.header + top }, ..._headerStyle]}>
       <PressableOpacity onPress={back} style={styles.icons}>
         <IconMat name="arrow-back" color="white" size={25} />
       </PressableOpacity>
@@ -81,8 +83,6 @@ const HeaderBar = React.memo<{
 
 const styles = StyleSheet.create({
   container: {
-    height: dimensions.top(),
-    paddingTop: StatusBar.currentHeight,
     backgroundColor: colors.gradient.high,
     width: '100%',
     flexDirection: 'row',

app/components/ImageGradientScrollView.tsx

@@ -3,11 +3,13 @@ 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.top() + dimensions.bottom())
+  const minHeight = layout.height - (dimensions.header + paddingTop + dimensions.bottom())
 
   return (
     <ScrollView

app/components/ListItem.tsx

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

app/components/ListPlayerControls.tsx

@@ -1,23 +1,23 @@
 import Button from '@app/components/Button'
-import { Song } from '@app/models/music'
-import { useStore } from '@app/state/store'
-import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer'
+import { Song } from '@app/models/library'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
+import { withSuspenseMemo } from './withSuspense'
 
-const ListPlayerControls = React.memo<{
+const ListPlayerControls = withSuspenseMemo<{
   songs: Song[]
-  typeName: string
-  queueName: string
-  queueContextType: QueueContextType
-  queueContextId: string
+  listType: 'album' | 'playlist'
   style?: StyleProp<ViewStyle>
-}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
+  play: () => void
+  shuffle: () => void
+  disabled?: boolean
+}>(({ listType, style, play, shuffle, disabled }) => {
   const [downloaded, setDownloaded] = useState(false)
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const { t } = useTranslation()
 
   return (
     <View style={[styles.controls, style]}>
@@ -34,13 +34,10 @@ const ListPlayerControls = React.memo<{
         </Button>
       </View>
       <View style={styles.controlsCenter}>
-        <Button
-          title={`Play ${typeName}`}
-          onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
-        />
+        <Button title={t(`resources.${listType}.actions.play`)} disabled={disabled} onPress={play} />
       </View>
       <View style={styles.controlsSide}>
-        <Button onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
+        <Button disabled={disabled} onPress={shuffle}>
           <Icon name="shuffle" size={26} color="white" />
         </Button>
       </View>
@@ -61,6 +58,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    maxWidth: '65%',
   },
 })
 

app/components/NothingHere.tsx

@@ -1,20 +1,25 @@
 import font from '@app/styles/font'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Text, View, StyleSheet, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { withSuspenseMemo } from './withSuspense'
 
-const NothingHere = React.memo<{
+const NothingHere = withSuspenseMemo<{
   height?: number
   width?: number
   style?: ViewStyle
 }>(({ height, width, style }) => {
+  const { t } = useTranslation()
   height = height || 200
   width = width || 200
 
   return (
     <View style={[styles.container, { height, width }, style]}>
       <Icon name="music-rest-quarter" color={styles.text.color} size={width / 2} />
-      <Text style={[styles.text, { fontSize: width / 8 }]}>Nothing here...</Text>
+      <Text style={[styles.text, { fontSize: width / 8 }]} numberOfLines={3}>
+        {t('messages.nothingHere')}
+      </Text>
     </View>
   )
 })

app/components/NowPlayingBar.tsx

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

app/components/PressableOpacity.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, ViewStyle, StyleSheet } from 'react-native'
+import React, { useCallback, useState } from 'react'
+import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, StyleSheet } from 'react-native'
 
 type PressableOpacityProps = PressableProps & {
   ripple?: boolean
@@ -9,13 +9,8 @@ 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,
@@ -55,7 +50,8 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
   return (
     <Pressable
       {...props}
-      style={[styles.pressable, props.style as any, { opacity }, disabledStyle]}
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={[styles.pressable, props.style as any, { opacity }, props.disabled ? { opacity: 0.3 } : {}]}
       android_ripple={
         props.ripple
           ? {

app/components/ProgressHook.tsx

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

app/components/Star.tsx

@@ -1,8 +1,11 @@
+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'
 
-const Star = React.memo<{
+export const Star = React.memo<{
   starred: boolean
   size: number
 }>(({ starred, size }) => {
@@ -11,4 +14,18 @@ const Star = React.memo<{
   )
 })
 
-export default Star
+export const PressableStar = React.memo<{
+  id: string
+  type: 'album' | 'artist' | 'song'
+  size: number
+  style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
+  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>
+  )
+})

app/components/withSuspense.tsx

@@ -0,0 +1,32 @@
+import React, { ComponentType, FunctionComponent, Suspense, SuspenseProps } from 'react'
+
+export function withSuspense<P extends string | number | object>(
+  WrappedComponent: ComponentType<P>,
+  fallback: SuspenseProps['fallback'] = null,
+): FunctionComponent<P> {
+  function ComponentWithSuspense(props: P) {
+    return (
+      <Suspense fallback={fallback}>
+        <WrappedComponent {...props} />
+      </Suspense>
+    )
+  }
+
+  return ComponentWithSuspense
+}
+
+export function withSuspenseMemo<P extends string | number | object>(
+  WrappedComponent: ComponentType<P>,
+  fallback: SuspenseProps['fallback'] = null,
+  propsAreEqual?: Parameters<typeof React.memo>['1'],
+) {
+  function ComponentWithSuspense(props: P) {
+    return (
+      <Suspense fallback={fallback}>
+        <WrappedComponent {...props} />
+      </Suspense>
+    )
+  }
+
+  return React.memo(ComponentWithSuspense, propsAreEqual)
+}

app/hooks/cache.ts

@@ -1,88 +0,0 @@
-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 }
-}

app/hooks/fetch.ts

@@ -0,0 +1,315 @@
+import { CacheItemTypeKey } from '@app/models/cache'
+import { Album, 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 { SubsonicApiClient } from '@app/subsonic/api'
+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<string | undefined>(qk.albumCoverArt(item.id), 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 async function fetchAlbum(id: string, client: SubsonicApiClient): 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 useFetchAlbum = () => {
+  const client = useClient()
+  return async (id: string) => fetchAlbum(id, client())
+}
+
+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 async function fetchExistingFile(
+  options: FetchExisingFileOptions,
+  serverId: string | undefined,
+): Promise<string | undefined> {
+  const { itemType, itemId } = options
+  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 {}
+}
+
+export const useFetchExistingFile = () => {
+  const serverId = useStore(store => store.settings.activeServerId)
+  return async (options: FetchExisingFileOptions) => fetchExistingFile(options, serverId)
+}
+
+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 async function fetchFile(options: FetchFileOptions, serverId: string | undefined): Promise<string> {
+  let { itemType, itemId, fromUrl, useCacheBuster, expectedContentType, progress } = options
+  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
+}
+
+export const useFetchFile = () => {
+  const serverId = useStore(store => store.settings.activeServerId)
+  return async (options: FetchFileOptions) => fetchFile(options, serverId)
+}

app/hooks/list.ts

@@ -1,77 +0,0 @@
-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 }
-}

app/hooks/music.ts

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

app/hooks/query.ts

@@ -0,0 +1,323 @@
+import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
+import { Album, 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 { useInfiniteQuery, useMutation, useQueries, useQuery } 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 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 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 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 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 }
+}
+
+export const useQueryAlbumCoverArtPath = (albumId?: string, size: CacheImageSize = 'thumbnail') => {
+  const fetchAlbum = useFetchAlbum()
+
+  const query = useQuery(
+    qk.albumCoverArt(albumId || '-1'),
+    async () => (await fetchAlbum(albumId || '-1')).album.coverArt,
+    {
+      enabled: !!albumId,
+      staleTime: Infinity,
+      cacheTime: Infinity,
+    },
+  )
+
+  return useQueryCoverArtPath(query.data, size)
+}

app/hooks/queryKeys.ts

@@ -0,0 +1,52 @@
+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

app/hooks/server.ts

@@ -1,29 +0,0 @@
-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])
-}

app/hooks/settings.ts

@@ -0,0 +1,75 @@
+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)
+  const setDisableMusicTabs = useStore(store => store.setDisableMusicTabs)
+
+  return async () => {
+    setDisableMusicTabs(true)
+
+    try {
+      // 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()
+    } finally {
+      setDisableMusicTabs(false)
+
+      // enable queries
+      await Promise.all([
+        queryClient.refetchQueries(qk.existingFiles(), { active: true }),
+        queryClient.refetchQueries(qk.artistArt(), { active: true }),
+        queryClient.refetchQueries(qk.coverArt(), { active: true }),
+      ])
+    }
+  }
+}

app/hooks/trackplayer.ts

@@ -1,6 +1,12 @@
-import { useStore } from '@app/state/store'
-import { getQueue, selectTrackPlayer, trackPlayerCommands } from '@app/state/trackplayer'
+import { Song } from '@app/models/library'
+import { QueueContextType, TrackExt } from '@app/models/trackplayer'
+import queryClient from '@app/queryClient'
+import queueService from '@app/queueservice'
+import { useStore, useStoreDeep } from '@app/state/store'
+import { getQueue, SetQueueOptions, trackPlayerCommands } from '@app/state/trackplayer'
+import userAgent from '@app/util/userAgent'
 import TrackPlayer from 'react-native-track-player'
+import qk from './queryKeys'
 
 export const usePlay = () => {
   return () => trackPlayerCommands.enqueue(() => TrackPlayer.play())
@@ -57,7 +63,7 @@ export const useSeekTo = () => {
 }
 
 export const useReset = (enqueue = true) => {
-  const resetStore = useStore(selectTrackPlayer.resetTrackPlayerState)
+  const resetStore = useStore(store => store.resetTrackPlayerState)
 
   const reset = async () => {
     await TrackPlayer.reset()
@@ -68,9 +74,9 @@ export const useReset = (enqueue = true) => {
 }
 
 export const useIsPlaying = (contextId: string | undefined, track: number) => {
-  const queueContextId = useStore(selectTrackPlayer.queueContextId)
-  const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx)
-  const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder)
+  const queueContextId = useStore(store => store.queueContextId)
+  const currentTrackIdx = useStore(store => store.currentTrackIdx)
+  const shuffleOrder = useStoreDeep(store => store.shuffleOrder)
 
   if (contextId === undefined) {
     return track === currentTrackIdx
@@ -83,3 +89,51 @@ export const useIsPlaying = (contextId: string | undefined, track: number) => {
 
   return contextId === queueContextId && track === currentTrackIdx
 }
+
+export function mapSongToTrackExt(song: Song): TrackExt {
+  return {
+    id: song.id,
+    title: song.title,
+    artist: song.artist || 'Unknown Artist',
+    album: song.album || 'Unknown Album',
+    url: useStore.getState().buildStreamUri(song.id),
+    artwork: require('@res/fallback.png'),
+    userAgent,
+    duration: song.duration,
+    artistId: song.artistId,
+    albumId: song.albumId,
+    track: song.track,
+    discNumber: song.discNumber,
+  }
+}
+
+export const useSetQueue = (type: QueueContextType, songs?: Song[]) => {
+  const _setQueue = useStore(store => store.setQueue)
+
+  const contextId = `${type}-${songs?.map(s => s.id).join('-')}`
+
+  const setQueue = async (options: SetQueueOptions) => {
+    if (!songs || songs.length === 0) {
+      return
+    }
+
+    const queue = songs.map(mapSongToTrackExt)
+    const first = queue[options.playTrack || 0]
+
+    if (!first.albumId) {
+      first.artwork = require('@res/fallback.png')
+    } else {
+      const albumCoverArt = queryClient.getQueryData<string>(qk.albumCoverArt(first.albumId))
+      const existingFile = queryClient.getQueryData<string>(qk.existingFiles('coverArtThumb', albumCoverArt))
+      const downloadFile = queryClient.getQueryData<string>(qk.coverArt(albumCoverArt, 'thumbnail'))
+      if (existingFile || downloadFile) {
+        first.artwork = `file://${existingFile || downloadFile}`
+      }
+    }
+
+    await _setQueue({ queue, type, contextId, ...options })
+    queueService.emit('set', { queue })
+  }
+
+  return { setQueue, contextId }
+}

app/i18n.ts

@@ -0,0 +1,64 @@
+import { BackendModule, LanguageDetectorAsyncModule } from 'i18next'
+import path from 'path'
+import RNFS from 'react-native-fs'
+import * as RNLocalize from 'react-native-localize'
+import _ from 'lodash'
+
+const I18N_ASSETS_DIR = path.join('custom', 'i18n')
+
+const cache: {
+  [language: string]: {
+    [key: string]: any
+  }
+} = {}
+
+async function loadTranslation(language: string) {
+  const text = await RNFS.readFileAssets(path.join(I18N_ASSETS_DIR, `${language}.json`), 'utf8')
+  return JSON.parse(text)
+}
+
+async function readTranslation(language: string, namespace: string) {
+  if (!cache[language]) {
+    cache[language] = await loadTranslation(language)
+  }
+
+  return namespace === 'translation' ? cache[language] : _.get(cache[language], namespace)
+}
+
+export const backend = {
+  type: 'backend',
+  init: () => {},
+  read: async (language, namespace, callback) => {
+    try {
+      callback(null, await readTranslation(language, namespace))
+    } catch (err) {
+      callback(err as any, null)
+    }
+  },
+} as BackendModule
+
+export const languageDetector = {
+  type: 'languageDetector',
+  async: true,
+  detect: async callback => {
+    try {
+      const languageTags = (await RNFS.readDirAssets(I18N_ASSETS_DIR))
+        .map(f => f.name)
+        .filter(n => n.endsWith('.json'))
+        .map(n => n.slice(0, -5))
+
+      console.log('translations available:', languageTags)
+      console.log(
+        'locales list:',
+        RNLocalize.getLocales().map(l => l.languageTag),
+      )
+      console.log('best language:', RNLocalize.findBestAvailableLanguage(languageTags)?.languageTag)
+
+      callback(RNLocalize.findBestAvailableLanguage(languageTags)?.languageTag)
+    } catch {
+      callback(undefined)
+    }
+  },
+  init: () => {},
+  cacheUserLanguage: () => {},
+} as LanguageDetectorAsyncModule

app/models/cache.ts

@@ -1,11 +1,10 @@
-import { Album, PlaylistListItem, Artist, Song } from './music'
+import { Album, Playlist, Artist, Song } from './library'
 
 export enum CacheItemType {
   coverArt = 'coverArt',
   coverArtThumb = 'coverArtThumb',
   artistArt = 'artistArt',
   artistArtThumb = 'artistArtThumb',
-  song = 'song',
 }
 
 export type CacheItemTypeKey = keyof typeof CacheItemType
@@ -27,7 +26,7 @@ export type DownloadedAlbum = Album & {
   songs: string[]
 }
 
-export type DownloadedPlaylist = PlaylistListItem & {
+export type DownloadedPlaylist = Playlist & {
   songs: string[]
 }
 

app/models/library.ts

@@ -2,43 +2,28 @@ export interface Artist {
   itemType: 'artist'
   id: string
   name: string
-  starred?: Date
+  starred?: number
   coverArt?: string
 }
 
-export interface ArtistInfo extends Artist {
-  albums: Album[]
+export interface ArtistInfo {
+  id: string
   smallImageUrl?: string
   largeImageUrl?: string
-  topSongs: Song[]
 }
 
-export interface AlbumListItem {
+export interface Album {
   itemType: 'album'
   id: string
   name: string
   artist?: string
   artistId?: string
-  starred?: Date
-  coverArt?: string
-}
-
-export interface Album extends AlbumListItem {
+  starred?: number
   coverArt?: string
   year?: number
 }
 
-export interface AlbumWithSongs extends Album {
-  songs: Song[]
-}
-
-export interface SearchResults {
-  artists: Artist[]
-  albums: AlbumListItem[]
-  songs: Song[]
-}
-
-export interface PlaylistListItem {
+export interface Playlist {
   itemType: 'playlist'
   id: string
   name: string
@@ -46,10 +31,6 @@ export interface PlaylistListItem {
   coverArt?: string
 }
 
-export interface PlaylistWithSongs extends PlaylistListItem {
-  songs: Song[]
-}
-
 export interface Song {
   itemType: 'song'
   id: string
@@ -61,14 +42,23 @@ export interface Song {
   track?: number
   discNumber?: number
   duration?: number
-  starred?: Date
-
-  streamUri: string
-  coverArt?: string
+  starred?: number
+  playCount?: number
+  userRating?: number
+  averageRating?: number
 }
 
-export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
+export interface SearchResults {
+  artists: Artist[]
+  albums: Album[]
+  songs: Song[]
+}
 
-export type HomeLists = { [key: string]: AlbumListItem[] }
+export type StarrableItemType = 'album' | 'song' | 'artist'
 
-export type StarrableItemType = 'song' | 'album' | 'artist'
+export type ListableItem = Album | Song | Artist | Playlist
+
+export interface AlbumCoverArt {
+  albumId: string
+  coverArt?: string
+}

app/models/map.ts

@@ -0,0 +1,84 @@
+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,
+    duration: track.duration,
+    artistId: track.artistId,
+    albumId: track.albumId,
+    track: track.track,
+    discNumber: track.discNumber,
+  }
+}

app/models/settings.ts

@@ -1,9 +1,19 @@
 import { GetAlbumList2Type } from '@app/subsonic/params'
 
-export interface Server {
+export type Server = (TokenPassword | PlainPassword) & {
   id: string
   address: string
   username: string
+  usePlainPassword: boolean
+}
+
+interface PlainPassword {
+  usePlainPassword: true
+  plainPassword: string
+}
+
+interface TokenPassword {
+  usePlainPassword: false
   token: string
   salt: string
 }
@@ -20,23 +30,3 @@ export type ArtistFilterType = 'random' | 'starred' | 'alphabeticalByName'
 export interface ArtistFilterSettings {
   type: ArtistFilterType
 }
-
-export interface AppSettings {
-  servers: Server[]
-  screens: {
-    home: {
-      lists: string[]
-    }
-    library: {
-      albums: AlbumFilterSettings
-      artists: ArtistFilterSettings
-    }
-  }
-  activeServer?: string
-  scrobble: boolean
-  estimateContentLength: boolean
-  maxBitrateWifi: number
-  maxBitrateMobile: number
-  minBuffer: number
-  maxBuffer: number
-}

app/models/state.ts

@@ -0,0 +1,19 @@
+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[]
+}

app/models/trackplayer.ts

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

app/navigation/BottomTabBar.tsx

@@ -1,7 +1,6 @@
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import PressableOpacity from '@app/components/PressableOpacity'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
+import { useFirstRun } from '@app/hooks/settings'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
@@ -10,7 +9,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
 import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
 import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native'
+import { Image, ImageStyle, StyleSheet, Text, View } from 'react-native'
 
 const BottomTabButton = React.memo<{
   routeKey: string
@@ -19,10 +18,11 @@ const BottomTabButton = React.memo<{
   isFocused: boolean
   icon: OutlineFillIcon
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
-}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
-  const firstRun = useStore(selectSettings.firstRun)
+  disabled?: boolean
+}>(({ routeKey, label, name, isFocused, icon, navigation, disabled }) => {
+  const firstRun = useFirstRun()
 
-  const disabled = firstRun && name !== 'settings'
+  disabled = !!disabled || (firstRun && name !== 'settings')
 
   const onPress = () => {
     const event = navigation.emit({
@@ -48,7 +48,9 @@ const BottomTabButton = React.memo<{
   return (
     <PressableOpacity onPress={onPress} style={styles.button} disabled={disabled}>
       <Image source={imgSource} style={imgStyle} fadeDuration={0} />
-      <Text style={textStyle}>{label}</Text>
+      <Text style={textStyle} numberOfLines={1} ellipsizeMode="clip">
+        {label}
+      </Text>
     </PressableOpacity>
   )
 })
@@ -66,6 +68,13 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
             ? options.title
             : route.name
 
+        let iconKey = route.name
+        let disabled = false
+        if (route.name.endsWith('-disabled')) {
+          iconKey = route.name.split('-')[0]
+          disabled = true
+        }
+
         return (
           <BottomTabButton
             key={route.key}
@@ -73,8 +82,9 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
             label={label}
             name={route.name}
             isFocused={state.index === index}
-            icon={bottomTabIcons[route.name]}
+            icon={bottomTabIcons[iconKey]}
             navigation={navigation}
+            disabled={disabled}
           />
         )
       })}
@@ -93,6 +103,7 @@ const styles = StyleSheet.create({
   },
   button: {
     alignItems: 'center',
+    flexGrow: 1,
     flex: 1,
     height: '100%',
   },

app/navigation/BottomTabNavigator.tsx

@@ -1,3 +1,6 @@
+import { withSuspense } from '@app/components/withSuspense'
+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'
@@ -8,21 +11,21 @@ import ServerView from '@app/screens/ServerView'
 import SettingsView from '@app/screens/Settings'
 import SongListView from '@app/screens/SongListView'
 import WebViewScreen from '@app/screens/WebViewScreen'
-import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { RouteProp, StackActions } from '@react-navigation/native'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'
 
 type TabStackParamList = {
   main: undefined
-  album: { id: string; title: string }
+  album: { id: string; title: string; album?: Album }
   artist: { id: string; title: string }
-  playlist: { id: string; title: string }
+  playlist: { id: string; title: string; playlist?: Playlist }
   results: { query: string; type: 'album' | 'song' | 'artist' }
 }
 
@@ -33,9 +36,7 @@ type AlbumScreenProps = {
   navigation: AlbumScreenNavigationProp
 }
 
-const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
-  <SongListView id={route.params.id} title={route.params.title} type="album" />
-)
+const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => <SongListView {...route.params} type="album" />
 
 type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
 type ArtistScreenRouteProp = RouteProp<TabStackParamList, 'artist'>
@@ -44,9 +45,7 @@ type ArtistScreenProps = {
   navigation: ArtistScreenNavigationProp
 }
 
-const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
-  <ArtistView id={route.params.id} title={route.params.title} />
-)
+const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => <ArtistView {...route.params} />
 
 type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'playlist'>
 type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'playlist'>
@@ -55,9 +54,7 @@ type PlaylistScreenProps = {
   navigation: PlaylistScreenNavigationProp
 }
 
-const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
-  <SongListView id={route.params.id} title={route.params.title} type="playlist" />
-)
+const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => <SongListView {...route.params} type="playlist" />
 
 type ResultsScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'results'>
 type ResultsScreenRouteProp = RouteProp<TabStackParamList, 'results'>
@@ -66,9 +63,7 @@ type ResultsScreenProps = {
   navigation: ResultsScreenNavigationProp
 }
 
-const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => (
-  <SearchResultsView query={route.params.query} type={route.params.type} />
-)
+const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => <SearchResultsView {...route.params} />
 
 const styles = StyleSheet.create({
   stackheaderStyle: {
@@ -122,8 +117,8 @@ const SearchTab = createTabStackNavigator(Search)
 
 type SettingsStackParamList = {
   main: undefined
-  server?: { id?: string }
-  web: { uri: string }
+  server?: { id?: string; title?: string }
+  web: { uri: string; title?: string }
 }
 
 type ServerScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'server'>
@@ -132,7 +127,9 @@ type ServerScreenProps = {
   route: ServerScreenRouteProp
   navigation: ServerScreenNavigationProp
 }
-const ServerScreen: React.FC<ServerScreenProps> = ({ route }) => <ServerView id={route.params?.id} />
+const ServerScreen: React.FC<ServerScreenProps> = ({ route }) => (
+  <ServerView id={route.params?.id} title={route.params?.title} />
+)
 
 type WebScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'web'>
 type WebScreenRouteProp = RouteProp<SettingsStackParamList, 'web'>
@@ -140,7 +137,9 @@ type WebScreenProps = {
   route: WebScreenRouteProp
   navigation: WebScreenNavigationProp
 }
-const WebScreen: React.FC<WebScreenProps> = ({ route }) => <WebViewScreen uri={route.params.uri} />
+const WebScreen: React.FC<WebScreenProps> = ({ route }) => (
+  <WebViewScreen uri={route.params.uri} title={route.params.title} />
+)
 
 const SettingsStack = createNativeStackNavigator()
 
@@ -152,7 +151,6 @@ const SettingsTab = () => {
         name="server"
         component={ServerScreen}
         options={{
-          title: 'Edit Server',
           headerStyle: styles.stackheaderStyle,
           headerHideShadow: true,
           headerTintColor: 'white',
@@ -163,7 +161,6 @@ const SettingsTab = () => {
         name="web"
         component={WebScreen}
         options={{
-          title: 'Web View',
           headerStyle: styles.stackheaderStyle,
           headerHideShadow: true,
           headerTintColor: 'white',
@@ -176,17 +173,37 @@ const SettingsTab = () => {
 
 const Tab = createBottomTabNavigator()
 
-const BottomTabNavigator = () => {
-  const firstRun = useStore(selectSettings.firstRun)
+const BottomTabNavigator = withSuspense(() => {
+  const { t } = useTranslation()
+  const firstRun = useFirstRun()
+  const disableMusicTabs = useStore(store => store.disableMusicTabs)
 
   return (
     <Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>
-      <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' }} />
+      {disableMusicTabs ? (
+        <>
+          <Tab.Screen name="home-disabled" children={() => null} options={{ tabBarLabel: t('navigation.tabs.home') }} />
+          <Tab.Screen
+            name="library-disabled"
+            children={() => null}
+            options={{ tabBarLabel: t('navigation.tabs.library') }}
+          />
+          <Tab.Screen
+            name="search-disabled"
+            children={() => null}
+            options={{ tabBarLabel: t('navigation.tabs.search') }}
+          />
+        </>
+      ) : (
+        <>
+          <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: t('navigation.tabs.home') }} />
+          <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: t('navigation.tabs.library') }} />
+          <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: t('navigation.tabs.search') }} />
+        </>
+      )}
+      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: t('navigation.tabs.settings') }} />
     </Tab.Navigator>
   )
-}
+})
 
 export default BottomTabNavigator

app/navigation/LibraryTopTabNavigator.tsx

@@ -1,3 +1,4 @@
+import { withSuspense } from '@app/components/withSuspense'
 import AlbumsTab from '@app/screens/LibraryAlbums'
 import ArtistsTab from '@app/screens/LibraryArtists'
 import PlaylistsTab from '@app/screens/LibraryPlaylists'
@@ -6,28 +7,46 @@ 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 { StatusBar, StyleSheet } from 'react-native'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const Tab = createMaterialTopTabNavigator()
 
-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 LibraryTopTabNavigator = withSuspense(() => {
+  const { t } = useTranslation()
+  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: t('resources.album.name', { count: 2 }) }}
+      />
+      <Tab.Screen
+        name="artists"
+        component={ArtistsTab}
+        options={{ tabBarLabel: t('resources.artist.name', { count: 2 }) }}
+      />
+      <Tab.Screen
+        name="playlists"
+        component={PlaylistsTab}
+        options={{ tabBarLabel: t('resources.playlist.name', { count: 2 }) }}
+      />
+    </Tab.Navigator>
+  )
+})
 
 const styles = StyleSheet.create({
   tabBar: {
     height: dimensions.header,
-    marginTop: StatusBar.currentHeight,
     backgroundColor: colors.gradient.high,
     elevation: 0,
     justifyContent: 'center',

app/navigation/RootNavigator.tsx

@@ -1,3 +1,4 @@
+import { withSuspense } from '@app/components/withSuspense'
 import BottomTabNavigator from '@app/navigation/BottomTabNavigator'
 import NowPlayingQueue from '@app/screens/NowPlayingQueue'
 import NowPlayingView from '@app/screens/NowPlayingView'
@@ -5,32 +6,37 @@ import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { DarkTheme, NavigationContainer } from '@react-navigation/native'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 
 const NowPlayingStack = createNativeStackNavigator()
 
-const NowPlayingNavigator = () => (
-  <NowPlayingStack.Navigator>
-    <NowPlayingStack.Screen name="main" component={NowPlayingView} options={{ headerShown: false }} />
-    <NowPlayingStack.Screen
-      name="queue"
-      component={NowPlayingQueue}
-      options={{
-        title: 'Queue',
-        headerStyle: {
-          backgroundColor: colors.gradient.high,
-        },
-        headerTitleStyle: {
-          fontSize: 18,
-          fontFamily: font.semiBold,
-          color: colors.text.primary,
-        },
-        headerHideShadow: true,
-        headerTintColor: 'white',
-      }}
-    />
-  </NowPlayingStack.Navigator>
-)
+const NowPlayingNavigator = withSuspense(() => {
+  const { t } = useTranslation()
+
+  return (
+    <NowPlayingStack.Navigator>
+      <NowPlayingStack.Screen name="main" component={NowPlayingView} options={{ headerShown: false }} />
+      <NowPlayingStack.Screen
+        name="queue"
+        component={NowPlayingQueue}
+        options={{
+          title: t('resources.queue.name', { count: 1 }),
+          headerStyle: {
+            backgroundColor: colors.gradient.high,
+          },
+          headerTitleStyle: {
+            fontSize: 18,
+            fontFamily: font.semiBold,
+            color: colors.text.primary,
+          },
+          headerHideShadow: true,
+          headerTintColor: 'white',
+        }}
+      />
+    </NowPlayingStack.Navigator>
+  )
+})
 
 const RootStack = createNativeStackNavigator()
 

app/playbackservice.ts

@@ -1,8 +1,14 @@
-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'
+import { getCurrentTrack, getPlayerState, trackPlayerCommands } from '@app/state/trackplayer'
 import NetInfo, { NetInfoStateType } from '@react-native-community/netinfo'
+import _ from 'lodash'
+import { unstable_batchedUpdates } from 'react-native'
+import TrackPlayer, { Event, State } from 'react-native-track-player'
+import { fetchAlbum, FetchExisingFileOptions, fetchExistingFile, fetchFile, FetchFileOptions } from './hooks/fetch'
+import qk from './hooks/queryKeys'
+import queryClient from './queryClient'
+import queueService from './queueservice'
+import { useStore } from './state/store'
+import { ReturnedPromiseResolvedType } from './util/types'
 
 const reset = () => {
   unstable_batchedUpdates(() => {
@@ -28,23 +34,97 @@ const setNetState = (netState: 'mobile' | 'wifi') => {
   })
 }
 
-const rebuildQueue = () => {
+const rebuildQueue = (forcePlay?: boolean) => {
   unstable_batchedUpdates(() => {
-    useStore.getState().rebuildQueue(useStore.getState().playerState === State.Playing)
+    useStore.getState().rebuildQueue(forcePlay)
   })
 }
 
+const updateQueue = () => {
+  unstable_batchedUpdates(() => {
+    useStore.getState().updateQueue()
+  })
+}
+
+const setDuckPaused = (duckPaused: boolean) => {
+  unstable_batchedUpdates(() => {
+    useStore.getState().setDuckPaused(duckPaused)
+  })
+}
+
+const setQueryDataAlbum = (queryKey: any, data: ReturnedPromiseResolvedType<typeof fetchAlbum>) => {
+  unstable_batchedUpdates(() => {
+    queryClient.setQueryData(queryKey, data)
+  })
+}
+
+const setQueryDataExistingFiles = (queryKey: any, data: ReturnedPromiseResolvedType<typeof fetchExistingFile>) => {
+  unstable_batchedUpdates(() => {
+    queryClient.setQueryData(queryKey, data)
+  })
+}
+
+const setQueryDataCoverArt = (queryKey: any, data: ReturnedPromiseResolvedType<typeof fetchFile>) => {
+  unstable_batchedUpdates(() => {
+    queryClient.setQueryData(queryKey, data)
+  })
+}
+
+function getClient() {
+  const client = useStore.getState().client
+  if (!client) {
+    throw new Error('no client!')
+  }
+
+  return client
+}
+
+async function getAlbum(id: string) {
+  try {
+    const res = await fetchAlbum(id, getClient())
+    setQueryDataAlbum(qk.album(id), res)
+    return res
+  } catch {}
+}
+
+async function getCoverArtThumbExisting(coverArt: string) {
+  const serverId = useStore.getState().settings.activeServerId
+  const options: FetchExisingFileOptions = { itemType: 'coverArtThumb', itemId: coverArt }
+
+  try {
+    const res = await fetchExistingFile(options, serverId)
+    setQueryDataExistingFiles(qk.existingFiles(options.itemType, options.itemId), res)
+    return res
+  } catch {}
+}
+
+async function getCoverArtThumb(coverArt: string) {
+  const serverId = useStore.getState().settings.activeServerId
+  const fromUrl = getClient().getCoverArtUri({ id: coverArt, size: '256' })
+  const options: FetchFileOptions = {
+    itemType: 'coverArtThumb',
+    itemId: coverArt,
+    fromUrl,
+    expectedContentType: 'image',
+  }
+
+  try {
+    const res = await fetchFile(options, serverId)
+    setQueryDataCoverArt(qk.coverArt(coverArt, 'thumbnail'), res)
+    return res
+  } catch {}
+}
+
 let serviceCreated = false
 
 const createService = async () => {
   useStore.subscribe(
-    (currentTrack?: TrackExt) => {
-      if (currentTrack) {
-        useStore.getState().scrobbleTrack(currentTrack.id)
+    state => state.currentTrack?.id,
+    (currentTrackId?: string) => {
+      if (currentTrackId) {
+        useStore.getState().scrobbleTrack(currentTrackId)
       }
     },
-    state => state.currentTrack,
-    (prev, next) => prev?.id === next?.id,
   )
 
   NetInfo.fetch().then(state => {
@@ -81,9 +161,14 @@ const createService = async () => {
     }
 
     if (data.paused) {
-      trackPlayerCommands.enqueue(TrackPlayer.pause)
-    } else {
+      let state = useStore.getState().playerState
+      if (state === State.Playing || state === State.Buffering || state === State.Connecting) {
+        trackPlayerCommands.enqueue(TrackPlayer.pause)
+        setDuckPaused(true)
+      }
+    } else if (useStore.getState().duckPaused) {
       trackPlayerCommands.enqueue(TrackPlayer.play)
+      setDuckPaused(false)
     }
   })
 
@@ -129,9 +214,81 @@ const createService = async () => {
 
     // fix for ExoPlayer aborting playback while esimating content length
     if (code === 'playback-source' && message.includes('416')) {
-      rebuildQueue()
+      rebuildQueue(true)
     }
   })
+
+  queueService.addListener('set', async ({ queue }) => {
+    const contextId = useStore.getState().queueContextId
+    const throwIfQueueChanged = () => {
+      if (contextId !== useStore.getState().queueContextId) {
+        throw 'queue-changed'
+      }
+    }
+
+    const albumIds = _.uniq(queue.map(s => s.albumId)).filter((id): id is string => id !== undefined)
+
+    const albumIdImagePath: { [albumId: string]: string | undefined } = {}
+    for (const albumId of albumIds) {
+      let coverArt = queryClient.getQueryData<string>(qk.albumCoverArt(albumId))
+      if (!coverArt) {
+        throwIfQueueChanged()
+        console.log('no cached coverArt for album', albumId, 'getting album...')
+        coverArt = (await getAlbum(albumId))?.album.coverArt
+        if (!coverArt) {
+          continue
+        }
+      }
+
+      let imagePath =
+        queryClient.getQueryData<string>(qk.existingFiles('coverArtThumb', coverArt)) ||
+        queryClient.getQueryData<string>(qk.coverArt(coverArt, 'thumbnail'))
+      if (!imagePath) {
+        throwIfQueueChanged()
+        console.log('no cached image for', coverArt, 'getting file...')
+        imagePath = (await getCoverArtThumbExisting(coverArt)) || (await getCoverArtThumb(coverArt))
+        if (!imagePath) {
+          continue
+        }
+      }
+
+      albumIdImagePath[albumId] = imagePath
+    }
+
+    for (let i = 0; i < queue.length; i++) {
+      const track = queue[i]
+      if (typeof track.artwork === 'string') {
+        continue
+      }
+
+      if (!track.albumId) {
+        continue
+      }
+
+      let imagePath = albumIdImagePath[track.albumId]
+      if (!imagePath) {
+        continue
+      }
+
+      try {
+        throwIfQueueChanged()
+
+        let trackIdx = i
+        const shuffleOrder = useStore.getState().shuffleOrder
+        if (shuffleOrder) {
+          trackIdx = shuffleOrder.indexOf(i)
+        }
+
+        await TrackPlayer.updateMetadataForTrack(trackIdx, { ...track, artwork: `file://${imagePath}` })
+      } catch {
+        break
+      }
+    }
+
+    await trackPlayerCommands.enqueue(async () => {
+      updateQueue()
+    })
+  })
 }
 
 module.exports = async function () {

app/queryClient.ts

@@ -0,0 +1,5 @@
+import { QueryClient } from 'react-query'
+
+const client = new QueryClient()
+
+export default client

app/queueservice.ts

@@ -0,0 +1,18 @@
+/* eslint-disable no-dupe-class-members */
+import { EmitterSubscription, NativeEventEmitter } from 'react-native'
+import { TrackExt } from './models/trackplayer'
+
+class QueueService extends NativeEventEmitter {
+  addListener(eventType: 'set', listener: (event: { queue: TrackExt[] }) => void): EmitterSubscription
+  addListener(eventType: string, listener: (event: any) => void, context?: Object): EmitterSubscription {
+    return super.addListener(eventType, listener, context)
+  }
+
+  emit(eventType: 'set', event: { queue: TrackExt[] }): void
+  emit(eventType: string, ...params: any[]): void {
+    super.emit(eventType, ...params)
+  }
+}
+
+const queueService = new QueueService()
+export default queueService

app/screens/ArtistView.tsx

@@ -5,16 +5,18 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import HeaderBar from '@app/components/HeaderBar'
 import ListItem from '@app/components/ListItem'
-import { useArtistInfo } from '@app/hooks/music'
-import { Album, Song } from '@app/models/music'
-import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
+import { withSuspenseMemo } from '@app/components/withSuspense'
+import { useQueryArtist, useQueryArtistTopSongs } from '@app/hooks/query'
+import { useSetQueue } from '@app/hooks/trackplayer'
+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 { 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 { useTranslation } from 'react-i18next'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
@@ -32,40 +34,72 @@ const AlbumItem = React.memo<{
   return (
     <AlbumContextPressable
       album={album}
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}
       menuStyle={[styles.albumItem, { width }]}
       triggerOuterWrapperStyle={{ width }}>
-      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode={'cover'} />
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode="cover" size="thumbnail" />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </AlbumContextPressable>
   )
-})
+}, equal)
 
-const TopSongs = React.memo<{
+const TopSongs = withSuspenseMemo<{
   songs: Song[]
   name: string
-  artistId: string
-}>(({ songs, name, artistId }) => {
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+}>(
+  ({ songs, name }) => {
+    const { setQueue, contextId } = useSetQueue('artist', songs)
+    const { t } = useTranslation()
 
-  return (
-    <>
-      <Header>Top Songs</Header>
-      {songs.map((s, i) => (
-        <ListItem
-          key={i}
-          item={s}
-          contextId={artistId}
-          queueId={i}
-          showArt={true}
-          subtitle={s.album}
-          onPress={() => setQueue(songs, name, 'artist', artistId, i)}
-        />
-      ))}
-    </>
-  )
-})
+    return (
+      <>
+        <Header>{t('resources.song.lists.artistTopSongs')}</Header>
+        {songs.slice(0, 5).map((s, i) => (
+          <ListItem
+            key={i}
+            item={s}
+            contextId={contextId}
+            queueId={i}
+            showArt={true}
+            subtitle={s.album}
+            onPress={() => setQueue({ title: name, playTrack: i })}
+          />
+        ))}
+      </>
+    )
+  },
+  null,
+  equal,
+)
+
+const ArtistAlbums = withSuspenseMemo<{
+  albums: Album[]
+}>(
+  ({ albums }) => {
+    const albumsLayout = useLayout()
+    const { t } = useTranslation()
+
+    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>{t('resources.album.name', { count: 2 })}</Header>
+        <View style={styles.albums} onLayout={albumsLayout.onLayout}>
+          {sortedAlbums.map(a => (
+            <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
+          ))}
+        </View>
+      </>
+    )
+  },
+  null,
+  equal,
+)
 
 const ArtistViewFallback = React.memo(() => (
   <GradientBackground style={styles.fallback}>
@@ -74,8 +108,9 @@ const ArtistViewFallback = React.memo(() => (
 ))
 
 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  const artist = useArtistInfo(id)
-  const albumsLayout = useLayout()
+  const { data: artistData } = useQueryArtist(id)
+  const { data: topSongs, isError } = useQueryArtistTopSongs(artistData?.artist?.name)
+
   const coverLayout = useLayout()
   const headerOpacity = useSharedValue(0)
 
@@ -91,15 +126,11 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     }
   })
 
-  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
-
-  if (!artist) {
+  if (!artistData) {
     return <ArtistViewFallback />
   }
 
-  const _albums = [...artist.albums]
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .sort((a, b) => (b.year || 0) - (a.year || 0))
+  const { artist, albums } = artistData
 
   return (
     <View style={styles.container}>
@@ -110,22 +141,23 @@ 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}>
-          {artist.topSongs.length > 0 ? (
-            <TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
+          {(topSongs || isError) && artist ? (
+            topSongs && topSongs.length > 0 ? (
+              <>
+                <TopSongs songs={topSongs} name={artist.name} />
+                <ArtistAlbums albums={albums} />
+              </>
+            ) : (
+              <ArtistAlbums albums={albums} />
+            )
           ) : (
-            <></>
+            <ActivityIndicator size="large" color={colors.accent} style={styles.loading} />
           )}
-          <Header>Albums</Header>
-          <View style={styles.albums} onLayout={albumsLayout.onLayout}>
-            {_albums.map(a => (
-              <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
-            ))}
-          </View>
         </View>
       </GradientScrollView>
     </View>
@@ -200,6 +232,9 @@ const styles = StyleSheet.create({
     fontFamily: font.regular,
     textAlign: 'center',
   },
+  loading: {
+    marginTop: 30,
+  },
 })
 
 export default ArtistView

app/screens/Home.tsx

@@ -3,27 +3,22 @@ import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
-import { useActiveServerRefresh } from '@app/hooks/server'
-import { AlbumListItem } from '@app/models/music'
-import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
+import { withSuspenseMemo } from '@app/components/withSuspense'
+import { useQueryHomeLists } from '@app/hooks/query'
+import { Album } from '@app/models/library'
+import { useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { GetAlbumListType } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback } from 'react'
-import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
-
-const titles: { [key in GetAlbumListType]?: string } = {
-  recent: 'Recently Played',
-  random: 'Random Albums',
-  frequent: 'Frequently Played',
-  starred: 'Starred Albums',
-}
+import equal from 'fast-deep-equal/es6/react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const AlbumItem = React.memo<{
-  album: AlbumListItem
+  album: Album
 }>(({ album }) => {
   const navigation = useNavigation()
 
@@ -31,12 +26,13 @@ const AlbumItem = React.memo<{
     <AlbumContextPressable
       album={album}
       triggerWrapperStyle={styles.item}
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}>
       <CoverArt
         type="cover"
         coverArt={album.coverArt}
         style={{ height: styles.item.width, width: styles.item.width }}
-        resizeMode={'cover'}
+        resizeMode="cover"
+        size="thumbnail"
       />
       <Text style={styles.title} numberOfLines={1}>
         {album.name}
@@ -46,12 +42,18 @@ const AlbumItem = React.memo<{
       </Text>
     </AlbumContextPressable>
   )
+}, equal)
+
+const CategoryHeader = withSuspenseMemo<{ type: string }>(({ type }) => {
+  const { t } = useTranslation()
+  console.log('type', type, t(`resources.album.lists.${type}`))
+  return <Header style={styles.header}>{t(`resources.album.lists.${type}`)}</Header>
 })
 
 const Category = React.memo<{
-  name?: string
-  data: AlbumListItem[]
-}>(({ name, data }) => {
+  type: string
+  albums: Album[]
+}>(({ type, albums }) => {
   const Albums = () => (
     <ScrollView
       horizontal={true}
@@ -59,8 +61,8 @@ const Category = React.memo<{
       overScrollMode={'never'}
       style={styles.artScroll}
       contentContainerStyle={styles.artScrollContent}>
-      {data.map(album => (
-        <AlbumItem key={album.id} album={album} />
+      {albums.map(a => (
+        <AlbumItem key={a.id} album={a} />
       ))}
     </ScrollView>
   )
@@ -73,42 +75,34 @@ const Category = React.memo<{
 
   return (
     <View style={styles.category}>
-      <Header style={styles.header}>{name}</Header>
-      {data.length > 0 ? <Albums /> : <Nothing />}
+      <CategoryHeader type={type} />
+      {albums.length > 0 ? <Albums /> : <Nothing />}
     </View>
   )
-})
+}, equal)
 
 const Home = () => {
-  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]),
-  )
+  const types = useStoreDeep(store => store.settings.screens.home.listTypes)
+  const listQueries = useQueryHomeLists(types as GetAlbumList2TypeBase[], 20)
+  const paddingTop = useSafeAreaInsets().top
 
   return (
     <GradientScrollView
       style={styles.scroll}
-      contentContainerStyle={styles.scrollContentContainer}
+      contentContainerStyle={{ paddingTop }}
       refreshControl={
         <RefreshControl
-          refreshing={updating}
-          onRefresh={update}
+          refreshing={listQueries.some(q => q.isLoading)}
+          onRefresh={() => listQueries.forEach(q => q.refetch())}
           colors={[colors.accent, colors.accentLow]}
-          progressViewOffset={StatusBar.currentHeight}
+          progressViewOffset={paddingTop}
         />
       }>
       <View style={styles.content}>
-        {types.map(type => (
-          <Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
-        ))}
+        {types.map(type => {
+          const query = listQueries.find(list => list.data?.type === type)
+          return <Category key={type} type={type} albums={query?.data?.albums || []} />
+        })}
       </View>
     </GradientScrollView>
   )
@@ -118,9 +112,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingBottom: 20,
   },

app/screens/LibraryAlbums.tsx

@@ -1,33 +1,44 @@
 import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
-import FilterButton, { OptionData } from '@app/components/FilterButton'
+import FilterButton from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
-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 { withSuspenseMemo } from '@app/components/withSuspense'
+import { useQueryAlbumList } from '@app/hooks/query'
+import { Album } from '@app/models/library'
+import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { GetAlbumList2Type } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import React, { useEffect } from 'react'
+import equal from 'fast-deep-equal/es6/react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 
 const AlbumItem = React.memo<{
-  album: AlbumListItem
+  album: Album
   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 })}>
-      <CoverArt type="cover" coverArt={album.coverArt} style={{ height: size, width: size }} resizeMode={'cover'} />
+      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"
+      />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {album.name}
@@ -38,62 +49,64 @@ const AlbumItem = React.memo<{
       </View>
     </AlbumContextPressable>
   )
-})
+}, equal)
 
 const AlbumListRenderItem: React.FC<{
   item: { album: Album; size: number; height: number }
 }> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
 
-const filterOptions: OptionData[] = [
-  { text: 'By Name', value: 'alphabeticalByName' },
-  { text: 'By Artist', value: 'alphabeticalByArtist' },
-  { text: 'Newest', value: 'newest' },
-  { text: 'Frequent', value: 'frequent' },
-  { text: 'Recent', value: 'recent' },
-  { text: 'Starred', value: 'starred' },
-  { text: 'Random', value: 'random' },
-  // { text: 'By Year...', value: 'byYear' },
-  // { text: 'By Genre...', value: 'byGenre' },
+const filterValues: GetAlbumList2TypeBase[] = [
+  'alphabeticalByName', //
+  'alphabeticalByArtist',
+  'newest',
+  'frequent',
+  'recent',
+  'starred',
+  'random',
 ]
 
+const AlbumFilterButton = withSuspenseMemo(() => {
+  const { t } = useTranslation()
+  const filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
+  const setFilterType = useStore(store => store.setLibraryAlbumFilterType)
+
+  return (
+    <FilterButton
+      data={filterValues.map(value => ({ value, text: t(`resources.album.lists.${value}`) }))}
+      value={filterType}
+      onSelect={selection => {
+        setFilterType(selection as GetAlbumList2TypeBase)
+      }}
+      title={t('resources.album.lists.sort')}
+    />
+  )
+})
+
 const AlbumsList = () => {
-  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 filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
+  const { isLoading, data, fetchNextPage, refetch } = useQueryAlbumList(filterType as GetAlbumList2TypeBase, 300)
 
   const layout = useWindowDimensions()
 
   const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2
   const height = size + 36
 
-  useEffect(() => reset(), [reset, filter])
-
   return (
     <View style={styles.container}>
       <GradientFlatList
-        data={list.map(album => ({ album, size, height }))}
+        data={data ? data.pages.flatMap(albums => albums.map(album => ({ album, size, height }))) : []}
         renderItem={AlbumListRenderItem}
         keyExtractor={item => item.album.id}
         numColumns={3}
         removeClippedSubviews={true}
-        refreshing={refreshing}
-        onRefresh={refresh}
+        refreshing={isLoading}
+        onRefresh={refetch}
         overScrollMode="never"
-        onEndReached={fetchNextPage}
+        onEndReached={() => fetchNextPage()}
         onEndReachedThreshold={6}
         windowSize={5}
       />
-      <FilterButton
-        data={filterOptions}
-        value={filter.type}
-        onSelect={selection => {
-          setFilter({
-            ...filter,
-            type: selection as GetAlbumList2Type,
-          })
-        }}
-      />
+      <AlbumFilterButton />
     </View>
   )
 }

app/screens/LibraryArtists.tsx

@@ -1,45 +1,68 @@
-import FilterButton, { OptionData } from '@app/components/FilterButton'
+import FilterButton from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchList } from '@app/hooks/list'
-import { Artist } from '@app/models/music'
+import { withSuspenseMemo } from '@app/components/withSuspense'
+import { useQueryArtists } from '@app/hooks/query'
+import { Artist } from '@app/models/library'
 import { ArtistFilterType } from '@app/models/settings'
-import { selectMusic } from '@app/state/music'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
+import { useStore, useStoreDeep } from '@app/state/store'
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
 
 const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
   <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )
 
-const filterOptions: OptionData[] = [
-  { text: 'By Name', value: 'alphabeticalByName' },
-  { text: 'Starred', value: 'starred' },
-  { text: 'Random', value: 'random' },
+const filterValues: ArtistFilterType[] = [
+  'alphabeticalByName', //
+  'starred',
+  'random',
 ]
 
+const ArtistFilterButton = withSuspenseMemo(() => {
+  const { t } = useTranslation()
+  const filterType = useStoreDeep(store => store.settings.screens.library.artistsFilter.type)
+  const setFilterType = useStore(store => store.setLibraryArtistFilterType)
+
+  return (
+    <FilterButton
+      data={filterValues.map(value => ({ value, text: t(`resources.artist.lists.${value}`) }))}
+      value={filterType}
+      onSelect={selection => setFilterType(selection as ArtistFilterType)}
+      title={t('resources.artist.lists.sort')}
+    />
+  )
+})
+
 const ArtistsList = () => {
-  const fetchArtists = useStore(selectMusic.fetchArtists)
-  const { list, refreshing, refresh } = useFetchList(fetchArtists)
-  const filter = useStore(selectSettings.libraryArtistFilter)
-  const setFilter = useStore(selectSettings.setLibraryArtistFiler)
+  const filterType = useStore(store => store.settings.screens.library.artistsFilter.type)
+
+  const { isLoading, data, refetch } = useQueryArtists()
   const [sortedList, setSortedList] = useState<Artist[]>([])
 
   useEffect(() => {
-    switch (filter.type) {
+    if (!data) {
+      setSortedList([])
+      return
+    }
+
+    const list = Object.values(data.byId)
+    switch (filterType) {
       case 'random':
         setSortedList([...list].sort(() => Math.random() - 0.5))
         break
       case 'starred':
         setSortedList([...list].filter(a => a.starred))
         break
+      case 'alphabeticalByName':
+        setSortedList(data.allIds.map(id => data.byId[id]))
+        break
       default:
         setSortedList([...list])
         break
     }
-  }, [list, filter])
+  }, [filterType, data])
 
   return (
     <View style={styles.container}>
@@ -47,22 +70,13 @@ const ArtistsList = () => {
         data={sortedList}
         renderItem={ArtistRenderItem}
         keyExtractor={item => item.id}
-        onRefresh={refresh}
-        refreshing={refreshing}
+        onRefresh={refetch}
+        refreshing={isLoading}
         overScrollMode="never"
         windowSize={3}
         contentMarginTop={6}
       />
-      <FilterButton
-        data={filterOptions}
-        value={filter.type}
-        onSelect={selection => {
-          setFilter({
-            ...filter,
-            type: selection as ArtistFilterType,
-          })
-        }}
-      />
+      <ArtistFilterButton />
     </View>
   )
 }

app/screens/LibraryPlaylists.tsx

@@ -1,27 +1,25 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-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 { useQueryPlaylists } from '@app/hooks/query'
+import { Playlist } from '@app/models/library'
+import { mapById } from '@app/util/state'
 import React from 'react'
 import { StyleSheet } from 'react-native'
 
-const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
+const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => (
   <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )
 
 const PlaylistsList = () => {
-  const fetchPlaylists = useStore(selectMusic.fetchPlaylists)
-  const { list, refreshing, refresh } = useFetchList(fetchPlaylists)
+  const { isLoading, data, refetch } = useQueryPlaylists()
 
   return (
     <GradientFlatList
-      data={list}
+      data={data ? mapById(data?.byId, data?.allIds) : []}
       renderItem={PlaylistRenderItem}
       keyExtractor={item => item.id}
-      onRefresh={refresh}
-      refreshing={refreshing}
+      onRefresh={refetch}
+      refreshing={isLoading}
       overScrollMode="never"
       windowSize={5}
       contentMarginTop={6}

app/screens/NowPlayingQueue.tsx

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

app/screens/NowPlayingView.tsx

@@ -2,19 +2,19 @@ import CoverArt from '@app/components/CoverArt'
 import HeaderBar from '@app/components/HeaderBar'
 import ImageGradientBackground from '@app/components/ImageGradientBackground'
 import PressableOpacity from '@app/components/PressableOpacity'
-import Star from '@app/components/Star'
-import { useStarred } from '@app/hooks/music'
+import { PressableStar } from '@app/components/Star'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
-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 { mapTrackExtToSong } from '@app/models/map'
+import { TrackExt } from '@app/models/trackplayer'
+import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import formatDuration from '@app/util/formatDuration'
 import Slider from '@react-native-community/slider'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, StyleSheet, Text, TextStyle, View } from 'react-native'
 import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 import { RepeatMode, State } from 'react-native-track-player'
@@ -23,33 +23,29 @@ import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMatCom from 'react-native-vector-icons/MaterialCommunityIcons'
 
-function getContextName(type?: QueueContextType) {
-  switch (type) {
-    case 'album':
-      return 'Album'
-    case 'artist':
-      return 'Top Songs'
-    case 'playlist':
-      return 'Playlist'
-    case 'song':
-      return 'Search Results'
-    default:
-      return undefined
-  }
-}
-
-const NowPlayingHeader = React.memo<{
+const NowPlayingHeader = withSuspenseMemo<{
   track?: TrackExt
 }>(({ track }) => {
-  const queueName = useStore(selectTrackPlayer.queueName)
-  const queueContextType = useStore(selectTrackPlayer.queueContextType)
-  const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
+  const queueName = useStore(store => store.queueName)
+  const queueContextType = useStore(store => store.queueContextType)
+  const { t } = useTranslation()
+
+  console.log(t('resources.album.name', { count: 1 }))
 
   if (!track) {
     return <></>
   }
 
-  let contextName = getContextName(queueContextType)
+  let contextName: string
+  if (queueContextType === 'album') {
+    contextName = t('resources.album.name', { count: 1 })
+  } else if (queueContextType === 'artist') {
+    contextName = t('resources.song.lists.artistTopSongs')
+  } else if (queueContextType === 'playlist') {
+    contextName = t('resources.playlist.name', { count: 1 })
+  } else if (queueContextType === 'song') {
+    contextName = t('search.nowPlayingContext')
+  }
 
   return (
     <HeaderBar
@@ -94,11 +90,11 @@ const headerStyles = StyleSheet.create({
 })
 
 const SongCoverArt = () => {
-  const track = useStore(selectTrackPlayer.currentTrack)
+  const albumId = useStore(store => store.currentTrack?.albumId)
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
+      <CoverArt type="album" size="original" albumId={albumId} style={coverArtStyles.image} />
     </View>
   )
 }
@@ -117,26 +113,22 @@ const coverArtStyles = StyleSheet.create({
 })
 
 const SongInfo = () => {
-  const track = useStore(selectTrackPlayer.currentTrack)
-  const id = track?.id || '-1'
-  const type = 'song'
-  const starred = useStarred(id, type)
-  const setStarred = useStore(selectMusic.starItem)
+  const id = useStore(store => store.currentTrack?.id)
+  const artist = useStore(store => store.currentTrack?.artist)
+  const title = useStore(store => store.currentTrack?.title)
 
   return (
     <View style={infoStyles.container}>
       <View style={infoStyles.details}>
         <Text numberOfLines={1} style={infoStyles.title}>
-          {track?.title}
+          {title}
         </Text>
         <Text numberOfLines={1} style={infoStyles.artist}>
-          {track?.artist}
+          {artist}
         </Text>
       </View>
       <View style={infoStyles.controls}>
-        <PressableOpacity onPress={() => setStarred(id, type, starred)}>
-          <Star size={32} starred={starred} />
-        </PressableOpacity>
+        <PressableStar id={id || '-1'} type={'song'} size={32} />
       </View>
     </View>
   )
@@ -170,7 +162,8 @@ const infoStyles = StyleSheet.create({
 })
 
 const SeekBar = () => {
-  const { position, duration } = useStore(selectTrackPlayer.progress)
+  const position = useStore(store => store.progress.position)
+  const duration = useStore(store => store.progress.duration)
   const seekTo = useSeekTo()
   const [value, setValue] = useState(0)
   const [sliding, setSliding] = useState(false)
@@ -262,15 +255,15 @@ const seekStyles = StyleSheet.create({
 })
 
 const PlayerControls = () => {
-  const state = useStore(selectTrackPlayer.playerState)
+  const state = useStore(store => store.playerState)
   const play = usePlay()
   const pause = usePause()
   const next = useNext()
   const previous = usePrevious()
-  const shuffled = useStore(selectTrackPlayer.shuffled)
-  const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle)
-  const repeatMode = useStore(selectTrackPlayer.repeatMode)
-  const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode)
+  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 navigation = useNavigation()
 
   let playPauseIcon: string
@@ -336,9 +329,9 @@ const PlayerControls = () => {
         </View>
       </View>
       <View style={controlsStyles.bottom}>
-        <PressableOpacity onPress={undefined} disabled={true} hitSlop={16}>
+        {/* <PressableOpacity onPress={undefined} disabled={true} hitSlop={16}>
           <IconMatCom name="cast-audio" size={20} color="white" />
-        </PressableOpacity>
+        </PressableOpacity> */}
         <PressableOpacity onPress={() => navigation.navigate('queue')} disabled={disabled} hitSlop={16}>
           <IconMatCom name="playlist-play" size={24} color="white" />
         </PressableOpacity>
@@ -361,7 +354,7 @@ const controlsStyles = StyleSheet.create({
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-end',
     paddingTop: 10,
     paddingBottom: 40,
   },
@@ -392,7 +385,7 @@ type RootStackParamList = {
 type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'>
 
 const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
-  const track = useStore(selectTrackPlayer.currentTrack)
+  const track = useStoreDeep(store => store.currentTrack)
 
   useEffect(() => {
     if (!track) {
@@ -404,7 +397,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
 
   return (
     <View style={styles.container}>
-      <ImageGradientBackground imagePath={imagePath} />
+      <ImageGradientBackground imagePath={imagePath} height={'100%'} />
       <NowPlayingHeader track={track} />
       <View style={styles.content}>
         <SongCoverArt />

app/screens/Search.tsx

@@ -4,167 +4,190 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import TextInput from '@app/components/TextInput'
-import { useActiveServerRefresh } from '@app/hooks/server'
-import { 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 { withSuspense, withSuspenseMemo } from '@app/components/withSuspense'
+import { useQuerySearchResults } from '@app/hooks/query'
+import { useSetQueue } from '@app/hooks/trackplayer'
+import { Album, Artist, SearchResults, Song } from '@app/models/library'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useFocusEffect, useNavigation } from '@react-navigation/native'
-import debounce from 'lodash.debounce'
+import equal from 'fast-deep-equal/es6/react'
+import _ from 'lodash'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 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 = useStore(selectTrackPlayer.setQueue)
+  const { setQueue, contextId } = useSetQueue('song', [item])
 
   return (
     <ListItem
       item={item}
-      contextId={item.id}
+      contextId={contextId}
       queueId={0}
       showArt={true}
       showStar={false}
-      onPress={() => setQueue([item], item.title, 'song', item.id, 0)}
+      onPress={() => setQueue({ title: item.title, playTrack: 0 })}
     />
   )
-})
+}, equal)
 
-const ResultsCategory = React.memo<{
+const ResultsCategory = withSuspenseMemo<{
   name: string
   query: string
-  items: ListableItem[]
-}>(({ name, query, items }) => {
-  const navigation = useNavigation()
+  items: (Artist | Album | Song)[]
+  type: 'artist' | 'album' | 'song'
+}>(
+  ({ name, query, type, items }) => {
+    const navigation = useNavigation()
+    const { t } = useTranslation()
 
-  if (items.length === 0) {
-    return <></>
-  }
+    if (items.length === 0) {
+      return <></>
+    }
 
-  return (
-    <>
-      <Header>{name}</Header>
-      {items.map(a =>
-        a.itemType === 'song' ? (
-          <SongItem key={a.id} item={a} />
-        ) : (
-          <ListItem key={a.id} item={a} showArt={true} showStar={false} />
-        ),
-      )}
-      {items.length === 5 && (
-        <Button
-          title="More..."
-          buttonStyle="hollow"
-          style={styles.more}
-          onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
-        />
-      )}
-    </>
-  )
-})
+    return (
+      <>
+        <Header>{name}</Header>
+        {items.map(a =>
+          type === 'song' ? (
+            <SongItem key={a.id} item={a as Song} />
+          ) : (
+            <ListItem key={a.id} item={a} showArt={true} showStar={false} />
+          ),
+        )}
+        {items.length === 5 && (
+          <Button
+            title={t('search.moreResults')}
+            buttonStyle="hollow"
+            style={styles.more}
+            onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
+          />
+        )}
+      </>
+    )
+  },
+  null,
+  equal,
+)
 
-const Results = React.memo<{
+const Results = withSuspenseMemo<{
   results: SearchResults
   query: string
-}>(({ results, query }) => {
-  return (
-    <>
-      <ResultsCategory name="Artists" query={query} items={results.artists} />
-      <ResultsCategory name="Albums" query={query} items={results.albums} />
-      <ResultsCategory name="Songs" query={query} items={results.songs} />
-    </>
-  )
-})
+}>(
+  ({ results, query }) => {
+    const { t } = useTranslation()
+
+    return (
+      <>
+        <ResultsCategory
+          name={t('resources.artist.name', { count: 2 })}
+          query={query}
+          type={'artist'}
+          items={results.artists}
+        />
+        <ResultsCategory
+          name={t('resources.album.name', { count: 2 })}
+          query={query}
+          type={'album'}
+          items={results.albums}
+        />
+        <ResultsCategory
+          name={t('resources.song.name', { count: 2 })}
+          query={query}
+          type={'song'}
+          items={results.songs}
+        />
+      </>
+    )
+  },
+  null,
+  equal,
+)
+
+const Search = withSuspense(() => {
+  const [query, setQuery] = useState('')
+  const { data, isLoading } = useQuerySearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 })
+  const { t } = useTranslation()
 
-const Search = () => {
-  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('')
-          setResults({ artists: [], albums: [], songs: [] })
+          setQuery('')
           searchBarRef.current?.focus()
           scrollRef.current?.scrollTo({ y: 0, animated: true })
         }, 50)
       })
       return () => task.cancel()
-    }, [searchBarRef, scrollRef]),
+    }, [text]),
   )
 
-  useActiveServerRefresh(
-    useCallback(() => {
-      setText('')
-      setResults({ artists: [], albums: [], songs: [] })
-    }, []),
-  )
-
-  const debouncedonUpdateSearch = useMemo(
+  const debouncedSetQuery = useMemo(
     () =>
-      debounce(async (query: string) => {
-        setRefreshing(true)
-        setResults(await fetchSearchResults(query))
-        setRefreshing(false)
+      _.debounce((value: string) => {
+        setQuery(value)
       }, 400),
-    [fetchSearchResults],
+    [],
   )
 
   const onChangeText = useCallback(
     (value: string) => {
       setText(value)
-      debouncedonUpdateSearch(value)
+      debouncedSetQuery(value)
     },
-    [setText, debouncedonUpdateSearch],
+    [setText, debouncedSetQuery],
   )
 
-  const resultsCount = results.albums.length + results.artists.length + results.songs.length
+  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)
 
   return (
-    <GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <GradientScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={{ paddingTop }}>
       <View style={styles.content}>
         <View style={styles.inputBar}>
           <TextInput
             ref={searchBarRef}
             style={styles.textInput}
-            placeholder="Search"
+            placeholder={t('search.inputPlaceholder')}
             value={text}
             onChangeText={onChangeText}
           />
-          <ActivityIndicator
-            animating={refreshing}
-            size="small"
-            color={colors.text.secondary}
-            style={styles.activity}
-          />
+          <ActivityIndicator animating={isLoading} size="small" color={colors.text.secondary} style={styles.activity} />
         </View>
-        {resultsCount > 0 ? <Results results={results} query={text} /> : <NothingHere style={styles.noResults} />}
+        {data !== undefined && resultsCount > 0 ? (
+          <Results results={data.pages[0]} query={text} />
+        ) : (
+          <NothingHere style={styles.noResults} />
+        )}
       </View>
     </GradientScrollView>
   )
-}
+})
 
 const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
     paddingBottom: 20,

app/screens/SearchResultsView.tsx

@@ -1,24 +1,35 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchPaginatedList } from '@app/hooks/list'
-import { AlbumListItem, Artist, Song } from '@app/models/music'
-import { selectMusic } from '@app/state/music'
-import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
+import { withSuspense } from '@app/components/withSuspense'
+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 { useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect } from 'react'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 
-type SearchListItemType = AlbumListItem | Song | Artist
+type SearchListItemType = Album | Song | Artist
 
-const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
-  const setQueue = useStore(selectTrackPlayer.setQueue)
+const SongResultsListItem: React.FC<{ item: Song }> = ({ item }) => {
+  const { setQueue, contextId } = useSetQueue('song', [item])
 
-  let onPress
-  if (item.itemType === 'song') {
-    onPress = () => setQueue([item], item.title, 'song', item.id, 0)
-  }
+  return (
+    <ListItem
+      item={item}
+      contextId={contextId}
+      queueId={0}
+      showArt={true}
+      showStar={false}
+      listStyle="small"
+      onPress={() => setQueue({ title: item.title, playTrack: 0 })}
+      style={styles.listItem}
+    />
+  )
+}
 
+const OtherResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
   return (
     <ListItem
       item={item}
@@ -27,63 +38,73 @@ const ResultsListItem: 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<{
+const SearchResultsView = withSuspense<{
   query: string
   type: 'album' | 'artist' | 'song'
-}> = ({ query, type }) => {
+}>(({ query, type }) => {
   const navigation = useNavigation()
-  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,
-  )
+  const { t } = useTranslation()
+
+  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))
+  }
 
   useEffect(() => {
     navigation.setOptions({
-      title: `Search: "${query}"`,
+      title: t('search.headerTitle', { query }),
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
     <GradientFlatList
-      data={list}
+      data={items}
       renderItem={SearchResultsRenderItem}
       keyExtractor={(item, i) => i.toString()}
-      onRefresh={refresh}
-      refreshing={refreshing}
+      onRefresh={refetch}
+      refreshing={isLoading}
       overScrollMode="never"
-      onEndReached={fetchNextPage}
+      onEndReached={() => fetchNextPage}
       removeClippedSubviews={true}
       onEndReachedThreshold={2}
       contentMarginTop={6}
       windowSize={5}
     />
   )
-}
+})
 
 const styles = StyleSheet.create({
   listItem: {

app/screens/ServerView.tsx

@@ -1,43 +1,56 @@
 import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
+import SettingsSwitch from '@app/components/SettingsSwitch'
+import { withSuspense } from '@app/components/withSuspense'
 import { Server } from '@app/models/settings'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
+import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import toast from '@app/util/toast'
 import { useNavigation } from '@react-navigation/native'
 import md5 from 'md5'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
-import { v4 as uuidv4 } from 'uuid'
+import uuid from 'react-native-uuid'
 
-const ServerView: React.FC<{
+const PASSWORD_PLACEHOLDER = 'PASSWORD_PLACEHOLDER'
+
+const ServerView = withSuspense<{
   id?: string
-}> = ({ id }) => {
+  title?: string
+}>(({ id, title }) => {
+  const { t } = useTranslation()
   const navigation = useNavigation()
-  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 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 [address, setAddress] = useState(server?.address || '')
   const [username, setUsername] = useState(server?.username || '')
-  const [password, setPassword] = useState(server?.token ? 'password' : '')
+
+  const [usePlainPassword, setUsePlainPassword] = useState(server?.usePlainPassword ?? false)
+  const [password, setPassword] = useState(
+    server?.usePlainPassword ? server.plainPassword || '' : server?.token ? PASSWORD_PLACEHOLDER : '',
+  )
+
   const [testing, setTesting] = useState(false)
-  const [removing, setRemoving] = useState(false)
-  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    navigation.setOptions({ title })
+  }, [navigation, title])
 
   const validate = useCallback(() => {
     return !!address && !!username && !!password
   }, [address, username, password])
 
   const canRemove = useCallback(() => {
-    return id && servers.length > 1 && activeServer?.id !== id
-  }, [id, servers, activeServer])
+    return id && Object.keys(servers).length > 1 && activeServerId !== id
+  }, [id, servers, activeServerId])
 
   const exit = useCallback(() => {
     if (navigation.canGoBack()) {
@@ -48,44 +61,51 @@ const ServerView: React.FC<{
   }, [navigation])
 
   const createServer = useCallback<() => Server>(() => {
-    const salt = server?.salt || uuidv4()
+    if (usePlainPassword) {
+      return {
+        id: server?.id || '',
+        usePlainPassword,
+        plainPassword: password,
+        address,
+        username,
+      }
+    }
+
     let token: string
-    if (password === 'password' && server?.token) {
+    let salt: string
+
+    if (server && !server.usePlainPassword && password === PASSWORD_PLACEHOLDER) {
+      salt = server.salt
       token = server.token
     } else {
+      salt = uuid.v4() as string
       token = md5(password + salt)
     }
 
     return {
-      id: server?.id || uuidv4(),
+      id: server?.id || '',
       address,
       username,
+      usePlainPassword,
       salt,
       token,
     }
-  }, [address, password, server?.id, server?.salt, server?.token, username])
+  }, [usePlainPassword, server, address, username, password])
 
   const save = useCallback(() => {
     if (!validate()) {
       return
     }
 
-    setSaving(true)
     const update = createServer()
 
-    const waitForSave = async () => {
-      try {
-        if (id) {
-          updateServer(update)
-        } else {
-          await addServer(update)
-        }
-        exit()
-      } catch (err) {
-        setSaving(false)
-      }
+    if (id) {
+      updateServer(update)
+    } else {
+      addServer(update)
     }
-    waitForSave()
+
+    exit()
   }, [addServer, createServer, exit, id, updateServer, validate])
 
   const remove = useCallback(() => {
@@ -93,37 +113,49 @@ const ServerView: React.FC<{
       return
     }
 
-    setRemoving(true)
-    const waitForRemove = async () => {
-      try {
-        await removeServer(id as string)
-        exit()
-      } catch (err) {
-        setRemoving(false)
-      }
-    }
-    waitForRemove()
+    removeServer(id as string)
+    exit()
   }, [canRemove, exit, id, removeServer])
 
+  const togglePlainPassword = useCallback(
+    (value: boolean) => {
+      setUsePlainPassword(value)
+
+      if (value) {
+        if (server && server.usePlainPassword) {
+          setPassword(server.plainPassword)
+        } else if (server) {
+          setPassword('')
+        }
+      } else {
+        if (server && !server.usePlainPassword) {
+          setPassword(PASSWORD_PLACEHOLDER)
+        }
+      }
+    },
+    [server],
+  )
+
   const test = useCallback(() => {
     setTesting(true)
     const potential = createServer()
 
     const ping = async () => {
       const res = await pingServer(potential)
-      if (res) {
-        toast(`Connection to ${potential.address} OK!`)
-      } else {
-        toast(`Connection to ${potential.address} failed, check settings or server`)
-      }
+      toast(
+        t(`settings.servers.messages.${res ? 'connectionOk' : 'connectionFailed'}`, {
+          address: potential.address,
+          interpolation: { escapeValue: false },
+        }),
+      )
       setTesting(false)
     }
     ping()
-  }, [createServer, pingServer])
+  }, [createServer, pingServer, t])
 
   const disableControls = useCallback(() => {
-    return !validate() || testing || removing || saving
-  }, [validate, testing, removing, saving])
+    return !validate() || testing
+  }, [validate, testing])
 
   const formatAddress = useCallback(() => {
     let addressFormatted = address.trim()
@@ -144,68 +176,86 @@ const ServerView: React.FC<{
   }
 
   return (
-    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <GradientScrollView style={styles.scroll}>
       <View style={styles.content}>
-        <Text style={styles.inputTitle}>Address</Text>
+        <Text style={styles.inputTitle}>{t('settings.servers.fields.address')}</Text>
         <TextInput
           style={styles.input}
           placeholderTextColor="grey"
           selectionColor={colors.text.secondary}
           textContentType="URL"
           placeholder="http://demo.navidrome.org"
+          autoCorrect={false}
+          autoCapitalize="none"
           value={address}
           onChangeText={setAddress}
           onBlur={formatAddress}
         />
-        <Text style={styles.inputTitle}>Username</Text>
+        <Text style={styles.inputTitle}>{t('settings.servers.fields.username')}</Text>
         <TextInput
           style={styles.input}
           placeholderTextColor="grey"
           selectionColor={colors.text.secondary}
           textContentType="username"
-          autoCompleteType="username"
+          autoComplete="username"
+          importantForAutofill="yes"
+          autoCapitalize="none"
           placeholder="demo"
           value={username}
           onChangeText={setUsername}
         />
-        <Text style={styles.inputTitle}>Password</Text>
+        <Text style={styles.inputTitle}>{t('settings.servers.fields.password')}</Text>
         <TextInput
           style={styles.input}
           placeholderTextColor="grey"
           selectionColor={colors.text.secondary}
           textContentType="password"
-          autoCompleteType="password"
+          autoComplete="password"
+          autoCapitalize="none"
+          importantForAutofill="yes"
           secureTextEntry={true}
           placeholder="demo"
           value={password}
           onChangeText={setPassword}
         />
+        <SettingsSwitch
+          title={t('settings.servers.options.forcePlaintextPassword.title')}
+          subtitle={
+            usePlainPassword
+              ? t('settings.servers.options.forcePlaintextPassword.descriptionOn')
+              : t('settings.servers.options.forcePlaintextPassword.descriptionOff')
+          }
+          value={usePlainPassword}
+          setValue={togglePlainPassword}
+        />
         <Button
           disabled={disableControls()}
           style={styles.button}
-          title="Test Connection"
+          title={t('settings.servers.actions.testConnection')}
           buttonStyle="hollow"
           onPress={test}
         />
         <Button
           disabled={disableControls()}
           style={[styles.button, styles.delete, deleteStyle]}
-          title="Delete"
+          title={t('settings.servers.actions.delete')}
           onPress={remove}
         />
-        <Button disabled={disableControls()} style={styles.button} title="Save" onPress={save} />
+        <Button
+          disabled={disableControls()}
+          style={styles.button}
+          title={t('settings.servers.actions.save')}
+          onPress={save}
+        />
       </View>
     </GradientScrollView>
   )
-}
+})
 
 const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    // paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
   },

app/screens/Settings.tsx

@@ -5,26 +5,28 @@ import PressableOpacity from '@app/components/PressableOpacity'
 import SettingsItem from '@app/components/SettingsItem'
 import SettingsSwitch from '@app/components/SettingsSwitch'
 import TextInput from '@app/components/TextInput'
-import { useSwitchActiveServer } from '@app/hooks/server'
+import { withSuspenseMemo } from '@app/components/withSuspense'
+import { useResetImageCache, useSwitchActiveServer } from '@app/hooks/settings'
 import { Server } from '@app/models/settings'
-import { selectCache } from '@app/state/cache'
-import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
+import { useStore, useStoreDeep } 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, StatusBar, StyleSheet, Text, View } from 'react-native'
+import { useTranslation } from 'react-i18next'
+import { KeyboardTypeOptions, Linking, Modal, Pressable, 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<{
+const ServerItem = withSuspenseMemo<{
   server: Server
 }>(({ server }) => {
-  const activeServer = useStore(selectSettings.activeServer)
+  const activeServerId = useStore(store => store.settings.activeServerId)
   const switchActiveServer = useSwitchActiveServer()
   const navigation = useNavigation()
+  const { t } = useTranslation()
 
   const setActive = useCallback(() => {
     switchActiveServer(server.id)
@@ -34,9 +36,9 @@ const ServerItem = React.memo<{
     <SettingsItem
       title={server.address}
       subtitle={server.username}
-      onPress={() => navigation.navigate('server', { id: server.id })}>
+      onPress={() => navigation.navigate('server', { id: server.id, title: t('settings.servers.actions.edit') })}>
       <PressableOpacity style={styles.serverActive} onPress={setActive}>
-        {activeServer && activeServer.id === server.id ? (
+        {activeServerId === server.id ? (
           <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
         ) : (
           <Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
@@ -74,25 +76,27 @@ const ModalChoice = React.memo<{
   )
 })
 
-function bitrateString(bitrate: number): string {
-  return bitrate === 0 ? 'Unlimited' : `${bitrate}kbps`
-}
-
-const BitrateModal = React.memo<{
+const BitrateModal = withSuspenseMemo<{
   title: string
   bitrate: number
   setBitrate: (bitrate: number) => void
 }>(({ title, bitrate, setBitrate }) => {
+  const { t } = useTranslation()
   const [visible, setVisible] = useState(false)
 
   const toggleModal = useCallback(() => setVisible(!visible), [visible])
 
+  const bitrateText = useCallback(
+    (value: number) =>
+      value === 0 ? t('settings.network.values.unlimitedKbps') : t('settings.network.values.kbps', { value }),
+    [t],
+  )
+
   const BitrateChoice: React.FC<{ value: number }> = useCallback(
     ({ value }) => {
-      const text = bitrateString(value)
       return (
         <ModalChoice
-          text={text}
+          text={bitrateText(value)}
           value={value}
           setValue={setBitrate}
           closeModal={toggleModal}
@@ -100,12 +104,12 @@ const BitrateModal = React.memo<{
         />
       )
     },
-    [bitrate, toggleModal, setBitrate],
+    [bitrate, toggleModal, setBitrate, bitrateText],
   )
 
   return (
     <>
-      <SettingsItem title={title} subtitle={bitrateString(bitrate)} onPress={toggleModal} />
+      <SettingsItem title={title} subtitle={bitrateText(bitrate)} onPress={toggleModal} />
       <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={toggleModal}>
         <Pressable style={styles.modalBackdrop} onPress={toggleModal}>
           <View style={styles.centeredView}>
@@ -136,9 +140,9 @@ const SettingsTextModal = React.memo<{
   title: string
   value: string
   setValue: (text: string) => void
-  getUnit?: (text: string) => string
+  subtitle: (value: string) => string
   keyboardType?: KeyboardTypeOptions
-}>(({ title, value, setValue, getUnit, keyboardType }) => {
+}>(({ title, value, setValue, subtitle, keyboardType }) => {
   const [visible, setVisible] = useState(false)
   const [inputText, setInputText] = useState(value)
 
@@ -149,16 +153,9 @@ const SettingsTextModal = React.memo<{
     toggleModal()
   }, [inputText, setValue, toggleModal])
 
-  const getSubtitle = useCallback(() => {
-    if (!getUnit) {
-      return value
-    }
-    return value + ' ' + getUnit(value)
-  }, [getUnit, value])
-
   return (
     <>
-      <SettingsItem title={title} subtitle={getSubtitle()} onPress={toggleModal} />
+      <SettingsItem title={title} subtitle={subtitle(value)} onPress={toggleModal} />
       <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={toggleModal}>
         <Pressable style={styles.modalBackdrop} onPress={toggleModal}>
           <View style={styles.centeredView}>
@@ -184,131 +181,117 @@ const SettingsTextModal = React.memo<{
   )
 })
 
-function secondsUnit(seconds: string): string {
-  const numberValue = parseFloat(seconds)
-  if (Math.abs(numberValue) !== 1) {
-    return 'seconds'
-  }
-  return 'second'
-}
+const SettingsContent = withSuspenseMemo(() => {
+  const { t } = useTranslation()
 
-const SettingsContent = React.memo(() => {
-  const servers = useStore(selectSettings.servers)
-  const scrobble = useStore(selectSettings.scrobble)
-  const setScrobble = useStore(selectSettings.setScrobble)
+  const servers = useStoreDeep(store => store.settings.servers)
+  const scrobble = useStore(store => store.settings.scrobble)
+  const setScrobble = useStore(store => store.setScrobble)
 
-  // 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 maxBitrateWifi = useStore(store => store.settings.maxBitrateWifi)
+  const setMaxBitrateWifi = useStore(store => store.setMaxBitrateWifi)
 
-  const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi)
-  const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi)
+  const maxBitrateMobile = useStore(store => store.settings.maxBitrateMobile)
+  const setMaxBitrateMobile = useStore(store => store.setMaxBitrateMobile)
 
-  const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile)
-  const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile)
+  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 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(() => {
+  const clear = useCallback(async () => {
     setClearing(true)
-
-    const waitForClear = async () => {
-      try {
-        await clearImageCache()
-      } catch (err) {
-        console.log(err)
-      } finally {
-        setClearing(false)
-      }
-    }
-    waitForClear()
-  }, [clearImageCache])
+    await resetImageCache()
+    setClearing(false)
+  }, [resetImageCache])
 
   const setMinBufferText = useCallback((text: string) => setMinBuffer(parseFloat(text)), [setMinBuffer])
   const setMaxBufferText = useCallback((text: string) => setMaxBuffer(parseFloat(text)), [setMaxBuffer])
 
+  const secondsText = useCallback((value: string) => t('settings.network.values.seconds', { value }), [t])
+
   return (
     <View style={styles.content}>
-      <Header>Servers</Header>
-      {servers.map(s => (
+      <Header>{t('settings.servers.name')}</Header>
+      {Object.values(servers).map(s => (
         <ServerItem key={s.id} server={s} />
       ))}
       <Button
         style={styles.button}
-        title="Add Server"
-        onPress={() => navigation.navigate('server')}
+        title={t('settings.servers.actions.add')}
+        onPress={() => navigation.navigate('server', { title: t('settings.servers.actions.add') })}
         buttonStyle="hollow"
       />
-      <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}
-      /> */}
+      <Header style={styles.header}>{t('settings.network.name')}</Header>
+      <BitrateModal
+        title={t('settings.network.options.maxBitrateWifi.title')}
+        bitrate={maxBitrateWifi}
+        setBitrate={setMaxBitrateWifi}
+      />
+      <BitrateModal
+        title={t('settings.network.options.maxBitrateMobile.title')}
+        bitrate={maxBitrateMobile}
+        setBitrate={setMaxBitrateMobile}
+      />
       <SettingsTextModal
-        title="Minimum buffer time"
+        title={t('settings.network.options.minBuffer.title')}
         value={minBuffer.toString()}
         setValue={setMinBufferText}
-        getUnit={secondsUnit}
+        subtitle={secondsText}
         keyboardType="numeric"
       />
       <SettingsTextModal
-        title="Maximum buffer time"
+        title={t('settings.network.options.maxBuffer.title')}
         value={maxBuffer.toString()}
         setValue={setMaxBufferText}
-        getUnit={secondsUnit}
+        subtitle={secondsText}
         keyboardType="numeric"
       />
-      <Header style={styles.header}>Music</Header>
+      <Header style={styles.header}>{t('settings.music.name')}</Header>
       <SettingsSwitch
-        title="Scrobble plays"
-        subtitle={scrobble ? 'Scrobble play history' : "Don't scrobble play history"}
+        title={t('settings.music.options.scrobble.title')}
+        subtitle={
+          scrobble
+            ? t('settings.music.options.scrobble.descriptionOn')
+            : t('settings.music.options.scrobble.descriptionOff')
+        }
         value={scrobble}
         setValue={setScrobble}
       />
-      <Header style={styles.header}>Reset</Header>
+      <Header style={styles.header}>{t('settings.reset.name')}</Header>
       <Button
         disabled={clearing}
         style={styles.button}
-        title="Clear Image Cache"
+        title={t('settings.reset.actions.clearImageCache')}
         onPress={clear}
         buttonStyle="hollow"
       />
-      <Header style={styles.header}>About</Header>
+      <Header style={styles.header}>{t('settings.about.name')}</Header>
       <Text style={styles.text}>
-        <Text style={styles.bold}>Subtracks</Text> version {version}
+        <Text style={styles.bold}>Subtracks</Text> {t('settings.about.version', { version })}
       </Text>
       <Button
         disabled={clearing}
         style={styles.button}
-        title="Project Homepage"
+        title={t('settings.about.actions.projectHomepage')}
         onPress={() => Linking.openURL('https://github.com/austinried/subtracks')}
         buttonStyle="hollow"
       />
       <Button
         disabled={clearing}
         style={styles.button}
-        title="Licenses (NPM)"
-        onPress={() => navigation.navigate('web', { uri: 'file:///android_asset/licenses/npm_licenses.txt' })}
-        buttonStyle="hollow"
-      />
-      <Button
-        disabled={clearing}
-        style={styles.button}
-        title="Licenses (Android)"
-        onPress={() => navigation.navigate('web', { uri: 'file:///android_asset/licenses/android_licenses.html' })}
+        title={t('settings.about.actions.licenses')}
+        onPress={() =>
+          navigation.navigate('web', {
+            uri: 'file:///android_asset/licenses.html',
+            title: t('settings.about.actions.licenses'),
+          })
+        }
         buttonStyle="hollow"
       />
     </View>
@@ -316,8 +299,10 @@ const SettingsContent = React.memo(() => {
 })
 
 const Settings = () => {
+  const paddingTop = useSafeAreaInsets().top
+
   return (
-    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+    <GradientScrollView style={styles.scroll} contentContainerStyle={{ paddingTop }}>
       <SettingsContent />
     </GradientScrollView>
   )
@@ -327,9 +312,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
     paddingBottom: 40,

app/screens/SongListView.tsx

@@ -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 { 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 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 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,6 +30,7 @@ const SongRenderItem: React.FC<{
     subtitle?: string
     onPress?: () => void
     showArt?: boolean
+    disabled?: boolean
   }
 }> = ({ item }) => (
   <ListItem
@@ -40,28 +41,23 @@ 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?: AlbumWithSongs | PlaylistWithSongs
+  songList?: Album | Playlist
+  songs?: Song[]
   subtitle?: string
-}>(({ title, songList, subtitle, type }) => {
-  const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
+}>(({ title, songList, songs, subtitle, type }) => {
+  const { data: coverArtPath } = useQueryCoverArtPath(songList?.coverArt, 'thumbnail')
   const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
-  const setQueue = useStore(selectTrackPlayer.setQueue)
 
-  if (!songList) {
-    return <SongListDetailsFallback />
-  }
-
-  const _songs = [...songList.songs]
-  let typeName = ''
+  const _songs = [...(songs || [])]
 
   if (type === 'album') {
-    typeName = 'Album'
     if (_songs.some(s => s.track === undefined)) {
       _songs.sort((a, b) => a.title.localeCompare(b.title))
     } else {
@@ -71,10 +67,18 @@ const SongListDetails = React.memo<{
         return aVal - bVal
       })
     }
-  } else {
-    typeName = 'Playlist'
   }
 
+  const { setQueue, contextId } = useSetQueue(type, _songs)
+
+  if (!songList) {
+    return <SongListDetailsFallback />
+  }
+
+  const disabled = _songs.length === 0
+  const play = (track?: number, shuffle?: boolean) => () =>
+    setQueue({ title: songList.name, playTrack: track, shuffle })
+
   return (
     <View style={styles.container}>
       <HeaderBar
@@ -85,74 +89,99 @@ const SongListDetails = React.memo<{
       <ImageGradientFlatList
         data={_songs.map((s, i) => ({
           song: s,
-          contextId: songList.id,
+          contextId,
           queueId: i,
           subtitle: s.artist,
-          onPress: () => setQueue(_songs, songList.name, type, songList.id, i),
+          onPress: play(i),
           showArt: songList.itemType === 'playlist',
+          disabled: disabled,
         }))}
         renderItem={SongRenderItem}
         keyExtractor={(item, i) => i.toString()}
         backgroundProps={{
-          imagePath: coverArtFile?.file?.path,
+          imagePath: coverArtPath,
           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> : <></>}
-            {songList.songs.length > 0 && (
-              <ListPlayerControls
-                style={styles.controls}
-                songs={_songs}
-                typeName={typeName}
-                queueName={songList.name}
-                queueContextId={songList.id}
-                queueContextType={type}
-              />
-            )}
+            <ListPlayerControls
+              style={styles.controls}
+              songs={_songs}
+              listType={type}
+              play={play(undefined, false)}
+              shuffle={play(undefined, true)}
+              disabled={disabled}
+            />
           </View>
         }
       />
     </View>
   )
-})
+}, equal)
 
 const PlaylistView = React.memo<{
   id: string
   title: string
-}>(({ id, title }) => {
-  const playlist = usePlaylistWithSongs(id)
-  return <SongListDetails title={title} songList={playlist} subtitle={playlist?.comment} type="playlist" />
-})
+  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)
 
 const AlbumView = React.memo<{
   id: string
   title: string
-}>(({ id, title }) => {
-  const album = useAlbumWithSongs(id)
+  album?: Album
+}>(({ id, title, album }) => {
+  const query = useQueryAlbum(id, album)
+
   return (
     <SongListDetails
       title={title}
-      songList={album}
-      subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
+      songList={query.data?.album}
+      songs={query.data?.songs}
+      subtitle={(query.data?.album?.artist || '') + (query.data?.album?.year ? ' • ' + query.data?.album?.year : '')}
       type="album"
     />
   )
-})
+}, equal)
 
 const SongListView = React.memo<{
   id: string
   title: string
   type: SongListType
-}>(({ id, title, type }) => {
-  return type === 'album' ? <AlbumView id={id} title={title} /> : <PlaylistView id={id} title={title} />
-})
+  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)
 
 const styles = StyleSheet.create({
   container: {
@@ -196,6 +225,12 @@ const styles = StyleSheet.create({
   listItem: {
     paddingHorizontal: 20,
   },
+  nothing: {
+    width: '100%',
+  },
+  listLoading: {
+    marginTop: 10,
+  },
 })
 
 export default SongListView

app/screens/SplashPage.tsx

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

app/screens/WebViewScreen.tsx

@@ -1,9 +1,17 @@
-import React from 'react'
+import { useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
 import { WebView } from 'react-native-webview'
 
 const WebViewScreen: React.FC<{
   uri: string
-}> = ({ uri }) => {
+  title?: string
+}> = ({ uri, title }) => {
+  const navigation = useNavigation()
+
+  useEffect(() => {
+    navigation.setOptions({ title })
+  }, [navigation, title])
+
   return <WebView source={{ uri }} />
 }
 

app/state/cache.ts

@@ -1,293 +0,0 @@
-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 = {}
-        }),
-      )
-    }
-  },
-})