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

.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

@@ -17,6 +17,7 @@ on:
     paths-ignore:
       - assets/**
       - .vscode/**
+      - android/app/src/main/assets/custom/i18n/**
       - .eslintrc.js
       - .prettierrc.js
       - BUILDING.md

.ruby-version

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

Gemfile

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

Gemfile.lock

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

README.md

@@ -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"/>
@@ -45,3 +47,10 @@ Subtracks is an Android open source music streaming app for [Subsonic-API-compat
 
 # 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 7
-        versionName '1.1.3'
+        versionCode 9
+        versionName '1.3.0'
     }
     splits {
         abi {

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
   <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"/>
+  <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>

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/npm.txt

@@ -1469,6 +1469,32 @@ THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: broadcast-channel. A copy of the source code may be downloaded from git+https://github.com/pubkey/broadcast-channel.git. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2018 Daniel Meyer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: browserslist. A copy of the source code may be downloaded from https://github.com/browserslist/browserslist.git. This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -2546,6 +2572,33 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: content-disposition, depd, vary. A copy of the source code may be downloaded from https://github.com/jshttp/content-disposition.git (content-disposition), https://github.com/dougwilson/nodejs-depd.git (depd), https://github.com/jshttp/vary.git (vary). This software contains the following license and notice below:
+
+(The MIT License)
+
+Copyright (c) 2014-2017 Douglas Christopher Wilson
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----
+
 The following software may be included in this product: convert-source-map. A copy of the source code may be downloaded from git://github.com/thlorenz/convert-source-map.git. This software contains the following license and notice below:
 
 Copyright 2013 Thorsten Lorenz. 
@@ -2927,33 +2980,6 @@ THE SOFTWARE.
 
 -----
 
-The following software may be included in this product: depd, vary. A copy of the source code may be downloaded from https://github.com/dougwilson/nodejs-depd.git (depd), https://github.com/jshttp/vary.git (vary). This software contains the following license and notice below:
-
-(The MIT License)
-
-Copyright (c) 2014-2017 Douglas Christopher Wilson
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
------
-
 The following software may be included in this product: destroy, ee-first, mime-db. A copy of the source code may be downloaded from https://github.com/stream-utils/destroy.git (destroy), https://github.com/jonathanong/ee-first.git (ee-first), https://github.com/jshttp/mime-db.git (mime-db). This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -2980,6 +3006,32 @@ THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: detect-node. A copy of the source code may be downloaded from https://github.com/iliakan/detect-node. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2017 Ilya Kantor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: electron-to-chromium. A copy of the source code may be downloaded from https://github.com/kilian/electron-to-chromium/. This software contains the following license and notice below:
 
 Copyright 2018 Kilian Valkhof
@@ -3811,6 +3863,30 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 -----
 
+The following software may be included in this product: html-escaper. A copy of the source code may be downloaded from https://github.com/WebReflection/html-escaper.git. This software contains the following license and notice below:
+
+Copyright (C) 2017-present by Andrea Giammarchi - @WebReflection
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----
+
 The following software may be included in this product: http-errors. A copy of the source code may be downloaded from https://github.com/jshttp/http-errors.git. This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -3838,6 +3914,32 @@ THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: i18next. A copy of the source code may be downloaded from https://github.com/i18next/i18next.git. This software contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2022 i18next
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: ieee754. A copy of the source code may be downloaded from git://github.com/feross/ieee754.git. This software contains the following license and notice below:
 
 Copyright 2008 Fair Oaks Labs, Inc.
@@ -4180,6 +4282,31 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 -----
 
+The following software may be included in this product: js-sha3. A copy of the source code may be downloaded from https://github.com/emn178/js-sha3.git. This software contains the following license and notice below:
+
+Copyright 2015-2018 Chen, Yi-Cyuan
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----
+
 The following software may be included in this product: js-tokens. A copy of the source code may be downloaded from https://github.com/lydell/js-tokens.git. This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -4393,7 +4520,7 @@ OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----
 
-The following software may be included in this product: lodash, lodash.merge, lodash.template, lodash.templatesettings. A copy of the source code may be downloaded from https://github.com/lodash/lodash.git (lodash), https://github.com/lodash/lodash.git (lodash.merge), https://github.com/lodash/lodash.git (lodash.template), https://github.com/lodash/lodash.git (lodash.templatesettings). This software contains the following license and notice below:
+The following software may be included in this product: lodash, lodash.template, lodash.templatesettings. A copy of the source code may be downloaded from https://github.com/lodash/lodash.git (lodash), https://github.com/lodash/lodash.git (lodash.template), https://github.com/lodash/lodash.git (lodash.templatesettings). This software contains the following license and notice below:
 
 Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
 
@@ -4740,6 +4867,31 @@ THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: match-sorter. A copy of the source code may be downloaded from https://github.com/kentcdodds/match-sorter. This software contains the following license and notice below:
+
+The MIT License (MIT)
+Copyright (c) 2020 Kent C. Dodds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: md5. A copy of the source code may be downloaded from git://github.com/pvorb/node-md5.git. This software contains the following license and notice below:
 
 Copyright © 2011-2012, Paul Vorbach.
@@ -4850,6 +5002,34 @@ THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: mime-db. A copy of the source code may be downloaded from https://github.com/jshttp/mime-db.git. This software contains the following license and notice below:
+
+(The MIT License)
+
+Copyright (c) 2014 Jonathan Ong <me@jongleberry.com>
+Copyright (c) 2015-2022 Douglas Christopher Wilson <doug@somethingdoug.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----
+
 The following software may be included in this product: mkdirp. A copy of the source code may be downloaded from https://github.com/substack/node-mkdirp.git. This software contains the following license and notice below:
 
 Copyright 2010 James Halliday (mail@substack.net)
@@ -5381,6 +5561,32 @@ SOFTWARE.
 
 -----
 
+The following software may be included in this product: oblivious-set. A copy of the source code may be downloaded from https://github.com/pubkey/oblivious-set. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2020 Daniel Meyer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: on-finished. A copy of the source code may be downloaded from https://github.com/jshttp/on-finished.git. This software contains the following license and notice below:
 
 (The MIT License)
@@ -5515,6 +5721,29 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: path, util. A copy of the source code may be downloaded from git://github.com/jinder/path.git (path), git://github.com/defunctzombie/node-util (util). This software contains the following license and notice below:
+
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+-----
+
 The following software may be included in this product: path-parse. A copy of the source code may be downloaded from https://github.com/jbgutierrez/path-parse.git. This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -5905,6 +6134,58 @@ SOFTWARE.
 
 -----
 
+The following software may be included in this product: react-i18next. A copy of the source code may be downloaded from https://github.com/i18next/react-i18next.git. This software contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2022 i18next
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
+The following software may be included in this product: react-native-blob-util. A copy of the source code may be downloaded from https://github.com/RonRadtke/react-native-blob-util. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2017 xeiyan@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: react-native-fs. A copy of the source code may be downloaded from git@github.com:itinance/react-native-fs.git. This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -5957,32 +6238,6 @@ SOFTWARE.
 
 -----
 
-The following software may be included in this product: react-native-get-random-values. A copy of the source code may be downloaded from https://github.com/LinusU/react-native-get-random-values.git. This software contains the following license and notice below:
-
-MIT License
-
-Copyright (c) 2018, 2020 Linus Unnebäck
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
------
-
 The following software may be included in this product: react-native-image-colors. A copy of the source code may be downloaded from https://github.com/osamaqarem/react-native-image-colors. This software contains the following license and notice below:
 
 MIT License
@@ -6061,6 +6316,32 @@ SOFTWARE.
 
 -----
 
+The following software may be included in this product: react-native-localize. A copy of the source code may be downloaded from https://github.com/zoontek/react-native-localize.git. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2017-present, Mathieu Acthernoene
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: react-native-popup-menu. A copy of the source code may be downloaded from git+ssh://git@github.com:instea/react-native-popup-menu.git. This software contains the following license and notice below:
 
 ISC License
@@ -6391,6 +6672,32 @@ Apache License
 
 -----
 
+The following software may be included in this product: react-native-uuid. A copy of the source code may be downloaded from git+https://github.com/eugenehp/react-native-uuid.git. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2016-2021 Eugene Hauptmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: react-native-vector-icons. A copy of the source code may be downloaded from git://github.com/oblador/react-native-vector-icons.git. This software contains the following license and notice below:
 
 The MIT License (MIT)
@@ -6417,6 +6724,32 @@ SOFTWARE.
 
 -----
 
+The following software may be included in this product: react-query. A copy of the source code may be downloaded from https://github.com/tannerlinsley/react-query.git. This software contains the following license and notice below:
+
+MIT License
+
+Copyright (c) 2019 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: readable-stream. A copy of the source code may be downloaded from git://github.com/nodejs/readable-stream. This software contains the following license and notice below:
 
 Node.js is licensed for use as follows:
@@ -6572,6 +6905,32 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 -----
 
+The following software may be included in this product: remove-accents. A copy of the source code may be downloaded from https://github.com/tyxla/remove-accents. This software contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2015 Marin Atanasov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: remove-trailing-separator. A copy of the source code may be downloaded from git+https://github.com/darsain/remove-trailing-separator.git. This software contains the following license and notice below:
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
@@ -7623,6 +7982,212 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: unload. A copy of the source code may be downloaded from git+https://github.com/pubkey/unload.git. This software contains the following license and notice below:
+
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction,
+and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by
+the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all
+other entities that control, are controlled by, or are under common
+control with that entity. For the purposes of this definition,
+"control" means (i) the power, direct or indirect, to cause the
+direction or management of such entity, whether by contract or
+otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity
+exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications,
+including but not limited to software source code, documentation
+source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical
+transformation or translation of a Source form, including but
+not limited to compiled object code, generated documentation,
+and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or
+Object form, made available under the License, as indicated by a
+copyright notice that is included in or attached to the work
+(an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object
+form, that is based on (or derived from) the Work and for which the
+editorial revisions, annotations, elaborations, or other modifications
+represent, as a whole, an original work of authorship. For the purposes
+of this License, Derivative Works shall not include works that remain
+separable from, or merely link (or bind by name) to the interfaces of,
+the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including
+the original version of the Work and any modifications or additions
+to that Work or Derivative Works thereof, that is intentionally
+submitted to Licensor for inclusion in the Work by the copyright owner
+or by an individual or Legal Entity authorized to submit on behalf of
+the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems,
+and issue tracking systems that are managed by, or on behalf of, the
+Licensor for the purpose of discussing and improving the Work, but
+excluding communication that is conspicuously marked or otherwise
+designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity
+on behalf of whom a Contribution has been received by Licensor and
+subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the
+Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+(except as stated in this section) patent license to make, have made,
+use, offer to sell, sell, import, and otherwise transfer the Work,
+where such license applies only to those patent claims licensable
+by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s)
+with the Work to which such Contribution(s) was submitted. If You
+institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work
+or a Contribution incorporated within the Work constitutes direct
+or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate
+as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+Work or Derivative Works thereof in any medium, with or without
+modifications, and in Source or Object form, provided that You
+meet the following conditions:
+
+(a) You must give any other recipients of the Work or
+Derivative Works a copy of this License; and
+
+(b) You must cause any modified files to carry prominent notices
+stating that You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works
+that You distribute, all copyright, patent, trademark, and
+attribution notices from the Source form of the Work,
+excluding those notices that do not pertain to any part of
+the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its
+distribution, then any Derivative Works that You distribute must
+include a readable copy of the attribution notices contained
+within such NOTICE file, excluding those notices that do not
+pertain to any part of the Derivative Works, in at least one
+of the following places: within a NOTICE text file distributed
+as part of the Derivative Works; within the Source form or
+documentation, if provided along with the Derivative Works; or,
+within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents
+of the NOTICE file are for informational purposes only and
+do not modify the License. You may add Your own attribution
+notices within Derivative Works that You distribute, alongside
+or as an addendum to the NOTICE text from the Work, provided
+that such additional attribution notices cannot be construed
+as modifying the License.
+
+You may add Your own copyright statement to Your modifications and
+may provide additional or different license terms and conditions
+for use, reproduction, or distribution of Your modifications, or
+for any such Derivative Works as a whole, provided Your use,
+reproduction, and distribution of the Work otherwise complies with
+the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+any Contribution intentionally submitted for inclusion in the Work
+by You to the Licensor shall be under the terms and conditions of
+this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify
+the terms of any separate license agreement you may have executed
+with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+names, trademarks, service marks, or product names of the Licensor,
+except as required for reasonable and customary use in describing the
+origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+agreed to in writing, Licensor provides the Work (and each
+Contributor provides its Contributions) on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied, including, without limitation, any warranties or conditions
+of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any
+risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+whether in tort (including negligence), contract, or otherwise,
+unless required by applicable law (such as deliberate and grossly
+negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special,
+incidental, or consequential damages of any character arising as a
+result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all
+other commercial damages or losses), even if such Contributor
+has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+the Work or Derivative Works thereof, You may choose to offer,
+and charge a fee for, acceptance of support, warranty, indemnity,
+or other liability obligations and/or rights consistent with this
+License. However, in accepting such obligations, You may act only
+on Your own behalf and on Your sole responsibility, not on behalf
+of any other Contributor, and only if You agree to indemnify,
+defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason
+of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+To apply the Apache License to your work, attach the following
+boilerplate notice, with the fields enclosed by brackets "[]"
+replaced with your own identifying information. (Don't include
+the brackets!)  The text should be enclosed in the appropriate
+comment syntax for the file format. We also recommend that a
+file or class name and description of purpose be included on the
+same "printed page" as the copyright notice for easier
+identification within third-party archives.
+
+Copyright 2015-2016 Netflix, Inc., Microsoft Corp. and contributors
+
+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.
+
+-----
+
 The following software may be included in this product: unpipe. A copy of the source code may be downloaded from https://github.com/stream-utils/unpipe.git. This software contains the following license and notice below:
 
 (The MIT License)
@@ -7782,20 +8347,6 @@ SOFTWARE.
 
 -----
 
-The following software may be included in this product: uuid. A copy of the source code may be downloaded from https://github.com/uuidjs/uuid.git. This software contains the following license and notice below:
-
-The MIT License (MIT)
-
-Copyright (c) 2010-2020 Robert Kieffer and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
------
-
 The following software may be included in this product: vlq. A copy of the source code may be downloaded from https://github.com/Rich-Harris/vlq. This software contains the following license and notice below:
 
 Copyright (c) 2017 [these people](https://github.com/Rich-Harris/vlq/graphs/contributors)
@@ -7808,6 +8359,33 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 -----
 
+The following software may be included in this product: void-elements. A copy of the source code may be downloaded from https://github.com/pugjs/void-elements.git. This software contains the following license and notice below:
+
+(The MIT License)
+
+Copyright (c) 2014 hemanth
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----
+
 The following software may be included in this product: walker. A copy of the source code may be downloaded from https://github.com/daaku/nodejs-walker. This software contains the following license and notice below:
 
 Copyright 2013 Naitik Shah

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/licenses.yml

@@ -593,6 +593,12 @@
   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

app/App.tsx

@@ -2,10 +2,12 @@ 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 { 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 currentTrackTitle = useStore(store => store.currentTrack?.title)
@@ -13,18 +15,27 @@ const Debug = () => {
   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/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,17 +1,19 @@
 import PressableOpacity from '@app/components/PressableOpacity'
-import { useStar } from '@app/hooks/library'
+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 CoverArt from './CoverArt'
 import { Star } from './Star'
+import { withSuspenseMemo } from './withSuspense'
 
 const { SlideInMenu } = renderers
 
@@ -22,6 +24,7 @@ type ContextMenuProps = {
   triggerTouchableStyle?: StyleProp<ViewStyle>
   onPress?: () => any
   triggerOnLongPress?: boolean
+  disabled?: boolean
 }
 
 type InternalContextMenuProps = ContextMenuProps & {
@@ -39,6 +42,7 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
   menuOptions,
   children,
   triggerOnLongPress,
+  disabled,
 }) => {
   menuStyle = menuStyle || { flex: 1 }
   triggerWrapperStyle = triggerWrapperStyle || { flex: 1 }
@@ -47,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}>
@@ -103,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>
     )
   },
@@ -112,51 +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, toggleStar } = useStar(id, type)
+  const { query, toggle } = useStar(id, type)
+  const { t } = useTranslation()
 
   return (
     <ContextMenuIconTextOption
-      IconComponentRaw={<Star starred={starred} size={26} />}
-      text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
-      onSelect={toggleStar}
+      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 <></>
   }
@@ -166,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 <></>
   }
@@ -186,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 })}
     />
   )
@@ -233,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} />
@@ -280,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} />
@@ -300,6 +348,8 @@ const styles = StyleSheet.create({
   },
   optionsWrapper: {
     // marginBottom: 10,
+    paddingHorizontal: 20,
+    // backgroundColor: 'purple',
   },
   menuHeader: {
     paddingTop: 14,
@@ -330,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,15 +1,16 @@
+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 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 { Album, Song } from '@app/models/library'
+import PressableOpacity from './PressableOpacity'
 
 export type HeaderContextItem = Song | Album
 
@@ -53,6 +54,7 @@ const HeaderBar = React.memo<{
   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

@@ -54,7 +54,8 @@ 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()
 
   showStar = showStar === undefined ? true : showStar
@@ -65,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
     }
   }
@@ -90,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 Album} 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
@@ -151,6 +160,10 @@ const ListItem: React.FC<{
         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} size="thumbnail" />
@@ -180,7 +193,7 @@ const ListItem: React.FC<{
       </PressableComponent>
       <View style={styles.controls}>
         {showStar && item.itemType !== 'playlist' && (
-          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
+          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} disabled={disabled} />
         )}
       </View>
     </View>

app/components/ListPlayerControls.tsx

@@ -1,23 +1,23 @@
 import Button from '@app/components/Button'
 import { Song } from '@app/models/library'
-import { QueueContextType } from '@app/models/trackplayer'
-import { useStore } from '@app/state/store'
 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(store => store.setQueue)
+  const { t } = useTranslation()
 
   return (
     <View style={[styles.controls, style]}>
@@ -34,16 +34,10 @@ const ListPlayerControls = React.memo<{
         </Button>
       </View>
       <View style={styles.controlsCenter}>
-        <Button
-          title={`Play ${typeName}`}
-          disabled={songs.length === 0}
-          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
-          disabled={songs.length === 0}
-          onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
+        <Button disabled={disabled} onPress={shuffle}>
           <Icon name="shuffle" size={26} color="white" />
         </Button>
       </View>
@@ -64,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

@@ -79,7 +79,7 @@ const Controls = React.memo(() => {
 const NowPlayingBar = React.memo(() => {
   const navigation = useNavigation()
   const currentTrackExists = useStore(store => !!store.currentTrack)
-  const coverArt = useStore(store => store.currentTrack?.coverArt)
+  const albumId = useStore(store => store.currentTrack?.albumId)
   const title = useStore(store => store.currentTrack?.title)
   const artist = useStore(store => store.currentTrack?.artist)
 
@@ -90,9 +90,11 @@ const NowPlayingBar = React.memo(() => {
       <ProgressBar />
       <View style={styles.subContainer}>
         <CoverArt
-          type="cover"
+          type="album"
           style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
-          coverArt={coverArt}
+          albumId={albumId}
+          size="thumbnail"
+          fadeDuration={0}
         />
         <View style={styles.detailsContainer}>
           <Text numberOfLines={1} style={styles.detailsTitle}>

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/Star.tsx

@@ -1,4 +1,4 @@
-import { useStar } from '@app/hooks/library'
+import { useStar } from '@app/hooks/query'
 import colors from '@app/styles/colors'
 import React from 'react'
 import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
@@ -19,12 +19,13 @@ export const PressableStar = React.memo<{
   type: 'album' | 'artist' | 'song'
   size: number
   style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
-}>(({ id, type, size, style }) => {
-  const { starred, toggleStar } = useStar(id, type)
+  disabled?: boolean
+}>(({ id, type, size, style, disabled }) => {
+  const { query, toggle } = useStar(id, type)
 
   return (
-    <PressableOpacity onPress={toggleStar} style={style}>
-      <Star size={size} starred={starred} />
+    <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,81 +0,0 @@
-import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
-import { Store, useStore, useStoreDeep } 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.activeServerId
-        if (!activeServerId) {
-          return
-        }
-
-        return store.cacheFiles[activeServerId][key][id]
-      },
-      [key, id],
-    ),
-  )
-  const request = useStore(
-    useCallback(
-      (store: Store) => {
-        const activeServerId = store.settings.activeServerId
-        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(store => store.client)
-  const cacheItem = useStore(store => store.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(store => store.fetchArtistInfo)
-  const artistInfo = useStoreDeep(store => store.library.artistInfo[artistId])
-  const { file, request } = useFileRequest(type, artistId)
-  const cacheItem = useStore(store => store.cacheItem)
-
-  useEffect(() => {
-    if (!artistInfo) {
-      fetchArtistInfo(artistId)
-      return
-    }
-
-    if (!file && artistInfo) {
-      cacheItem(type, artistId, async () => {
-        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, artistInfo])
-
-  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/library.ts

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

app/hooks/list.ts

@@ -1,95 +0,0 @@
-import { useState, useCallback } from 'react'
-import { useActiveServerRefresh } from './settings'
-
-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 useFetchList2 = (fetchList: () => Promise<void>) => {
-  const [refreshing, setRefreshing] = useState(false)
-
-  const refresh = useCallback(async () => {
-    setRefreshing(true)
-    await fetchList()
-    setRefreshing(false)
-  }, [fetchList])
-
-  useActiveServerRefresh(
-    useCallback(async () => {
-      await refresh()
-    }, [refresh]),
-  )
-
-  return { refreshing, refresh }
-}
-
-export const useFetchPaginatedList = <T>(
-  fetchList: (size: number, offset: number) => Promise<T[]>,
-  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(() => {
-      refresh()
-    }, [refresh]),
-  )
-
-  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/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/settings.ts

@@ -1,6 +1,10 @@
 import { useReset } from '@app/hooks/trackplayer'
-import { useStore } from '@app/state/store'
-import { useEffect } from 'react'
+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)
@@ -12,21 +16,60 @@ export const useSwitchActiveServer = () => {
       return
     }
 
+    await queryClient.cancelQueries(undefined, { active: true })
     await resetPlayer()
+    queryClient.removeQueries()
     setActiveServer(id)
   }
 }
 
-export const useActiveServerRefresh = (refresh: () => void) => {
-  const activeServerId = useStore(store => store.settings.activeServerId)
-
-  useEffect(() => {
-    if (activeServerId) {
-      refresh()
-    }
-  }, [activeServerId, refresh])
-}
-
 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 { 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, trackPlayerCommands } from '@app/state/trackplayer'
+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())
@@ -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

@@ -5,7 +5,6 @@ export enum CacheItemType {
   coverArtThumb = 'coverArtThumb',
   artistArt = 'artistArt',
   artistArtThumb = 'artistArtThumb',
-  song = 'song',
 }
 
 export type CacheItemTypeKey = keyof typeof CacheItemType

app/models/library.ts

@@ -2,7 +2,7 @@ export interface Artist {
   itemType: 'artist'
   id: string
   name: string
-  starred?: Date
+  starred?: number
   coverArt?: string
 }
 
@@ -18,7 +18,7 @@ export interface Album {
   name: string
   artist?: string
   artistId?: string
-  starred?: Date
+  starred?: number
   coverArt?: string
   year?: number
 }
@@ -42,16 +42,23 @@ export interface Song {
   track?: number
   discNumber?: number
   duration?: number
-  starred?: Date
-  coverArt?: string
+  starred?: number
+  playCount?: number
+  userRating?: number
+  averageRating?: number
 }
 
 export interface SearchResults {
-  artists: string[]
-  albums: string[]
-  songs: string[]
+  artists: Artist[]
+  albums: Album[]
+  songs: Song[]
 }
 
 export type StarrableItemType = 'album' | 'song' | '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/state.ts

@@ -12,3 +12,8 @@ export interface OrderedById<T> {
 export interface PaginatedList {
   [offset: number]: string[]
 }
+
+export interface CollectionById<T extends { id: string }> {
+  byId: ById<T>
+  allIds: string[]
+}

app/navigation/BottomTabBar.tsx

@@ -18,10 +18,11 @@ const BottomTabButton = React.memo<{
   isFocused: boolean
   icon: OutlineFillIcon
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
-}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
+  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({
@@ -47,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>
   )
 })
@@ -65,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}
@@ -72,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}
           />
         )
       })}
@@ -92,6 +103,7 @@ const styles = StyleSheet.create({
   },
   button: {
     alignItems: 'center',
+    flexGrow: 1,
     flex: 1,
     height: '100%',
   },

app/navigation/BottomTabNavigator.tsx

@@ -1,4 +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'
@@ -9,19 +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 { 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' }
 }
 
@@ -32,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'>
@@ -43,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'>
@@ -54,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'>
@@ -65,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: {
@@ -121,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'>
@@ -131,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'>
@@ -139,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()
 
@@ -151,7 +151,6 @@ const SettingsTab = () => {
         name="server"
         component={ServerScreen}
         options={{
-          title: 'Edit Server',
           headerStyle: styles.stackheaderStyle,
           headerHideShadow: true,
           headerTintColor: 'white',
@@ -162,7 +161,6 @@ const SettingsTab = () => {
         name="web"
         component={WebScreen}
         options={{
-          title: 'Web View',
           headerStyle: styles.stackheaderStyle,
           headerHideShadow: true,
           headerTintColor: 'white',
@@ -175,17 +173,37 @@ const SettingsTab = () => {
 
 const Tab = createBottomTabNavigator()
 
-const BottomTabNavigator = () => {
+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, 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 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,9 +34,15 @@ 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()
   })
 }
 
@@ -40,6 +52,69 @@ const setDuckPaused = (duckPaused: boolean) => {
   })
 }
 
+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 () => {
@@ -139,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,15 +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 { 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 { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
-import { mapById } from '@app/util/state'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect } from 'react'
+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'
 
@@ -31,63 +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(store => store.setQueue)
+}>(
+  ({ songs, name }) => {
+    const { setQueue, contextId } = useSetQueue('artist', songs)
+    const { t } = useTranslation()
 
-  return (
-    <>
-      <Header>Top Songs</Header>
-      {songs.slice(0, 5).map((s, i) => (
-        <ListItem
-          key={i}
-          item={s}
-          contextId={artistId}
-          queueId={i}
-          showArt={true}
-          subtitle={s.album}
-          onPress={() => setQueue(songs, name, 'artist', artistId, i)}
-        />
-      ))}
-    </>
-  )
-})
-
-const ArtistAlbums = React.memo<{
-  albums: Album[]
-}>(({ albums }) => {
-  const albumsLayout = useLayout()
-
-  const sortedAlbums = [...albums]
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .sort((a, b) => (b.year || 0) - (a.year || 0))
-
-  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
-
-  return (
-    <>
-      <Header>Albums</Header>
-      <View style={styles.albums} onLayout={albumsLayout.onLayout}>
-        {sortedAlbums.map(a => (
-          <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
+    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 })}
+          />
         ))}
-      </View>
-    </>
-  )
-})
+      </>
+    )
+  },
+  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}>
@@ -96,18 +108,8 @@ const ArtistViewFallback = React.memo(() => (
 ))
 
 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id]))
-  const topSongIds = useStoreDeep(useCallback(store => store.library.artistNameTopSongs[artist?.name], [artist?.name]))
-  const topSongs = useStoreDeep(
-    useCallback(store => (topSongIds ? mapById(store.library.songs, topSongIds) : undefined), [topSongIds]),
-  )
-  const albumIds = useStoreDeep(useCallback(store => store.library.artistAlbums[id], [id]))
-  const albums = useStoreDeep(
-    useCallback(store => (albumIds ? mapById(store.library.albums, albumIds) : undefined), [albumIds]),
-  )
-
-  const fetchArtist = useStore(store => store.fetchArtist)
-  const fetchTopSongs = useStore(store => store.fetchArtistTopSongs)
+  const { data: artistData } = useQueryArtist(id)
+  const { data: topSongs, isError } = useQueryArtistTopSongs(artistData?.artist?.name)
 
   const coverLayout = useLayout()
   const headerOpacity = useSharedValue(0)
@@ -124,22 +126,12 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     }
   })
 
-  useEffect(() => {
-    if (!artist || !albumIds) {
-      fetchArtist(id)
-    }
-  }, [artist, albumIds, fetchArtist, id])
-
-  useEffect(() => {
-    if (artist && !topSongIds) {
-      fetchTopSongs(artist.name)
-    }
-  }, [artist, fetchTopSongs, topSongIds])
-
-  if (!artist) {
+  if (!artistData) {
     return <ArtistViewFallback />
   }
 
+  const { artist, albums } = artistData
+
   return (
     <View style={styles.container}>
       <HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@@ -149,15 +141,15 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}
         onScroll={onScroll}>
-        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
+        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode="cover" />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>
         </View>
         <View style={styles.contentContainer}>
-          {topSongs && albums ? (
-            topSongs.length > 0 ? (
+          {(topSongs || isError) && artist ? (
+            topSongs && topSongs.length > 0 ? (
               <>
-                <TopSongs songs={topSongs} name={artist.name} artistId={artist.id} />
+                <TopSongs songs={topSongs} name={artist.name} />
                 <ArtistAlbums albums={albums} />
               </>
             ) : (

app/screens/Home.tsx

@@ -3,45 +3,36 @@ 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/settings'
-import { useStore, useStoreDeep } 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 { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
-import produce from 'immer'
-import React, { useCallback, useState } from 'react'
-import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
-import create, { StateSelector } from 'zustand'
-
-const titles: { [key in GetAlbumListType]?: string } = {
-  recent: 'Recently Played',
-  random: 'Random Albums',
-  frequent: 'Frequently Played',
-  starred: 'Starred Albums',
-}
+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<{
-  id: string
-}>(({ id }) => {
+  album: Album
+}>(({ album }) => {
   const navigation = useNavigation()
-  const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
-
-  if (!album) {
-    return <></>
-  }
 
   return (
     <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}
@@ -51,13 +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<{
   type: string
-}>(({ type }) => {
-  const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
-
+  albums: Album[]
+}>(({ type, albums }) => {
   const Albums = () => (
     <ScrollView
       horizontal={true}
@@ -65,8 +61,8 @@ const Category = React.memo<{
       overScrollMode={'never'}
       style={styles.artScroll}
       contentContainerStyle={styles.artScrollContent}>
-      {list.map(id => (
-        <AlbumItem key={id} id={id} />
+      {albums.map(a => (
+        <AlbumItem key={a.id} album={a} />
       ))}
     </ScrollView>
   )
@@ -79,75 +75,34 @@ const Category = React.memo<{
 
   return (
     <View style={styles.category}>
-      <Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
-      {list.length > 0 ? <Albums /> : <Nothing />}
+      <CategoryHeader type={type} />
+      {albums.length > 0 ? <Albums /> : <Nothing />}
     </View>
   )
-})
-
-interface HomeState {
-  lists: { [type: string]: string[] }
-  setList: (type: string, list: string[]) => void
-}
-
-const useHomeStore = create<HomeState>(set => ({
-  lists: {},
-
-  setList: (type, list) => {
-    set(
-      produce<HomeState>(state => {
-        state.lists[type] = list
-      }),
-    )
-  },
-}))
-
-function useHomeStoreDeep<U>(stateSelector: StateSelector<HomeState, U>) {
-  return useHomeStore(stateSelector, equal)
-}
+}, equal)
 
 const Home = () => {
-  const [refreshing, setRefreshing] = useState(false)
   const types = useStoreDeep(store => store.settings.screens.home.listTypes)
-  const fetchAlbumList = useStore(store => store.fetchAlbumList)
-  const setList = useHomeStore(store => store.setList)
-
-  const refresh = useCallback(async () => {
-    setRefreshing(true)
-
-    await Promise.all(
-      types.map(async type => {
-        const ids = await fetchAlbumList({ type: type as GetAlbumList2TypeBase, size: 20, offset: 0 })
-        setList(type, ids)
-      }),
-    )
-
-    setRefreshing(false)
-  }, [fetchAlbumList, setList, types])
-
-  useActiveServerRefresh(
-    useCallback(() => {
-      types.forEach(type => setList(type, []))
-      refresh()
-    }, [refresh, setList, types]),
-  )
+  const listQueries = useQueryHomeLists(types as GetAlbumList2TypeBase[], 20)
+  const paddingTop = useSafeAreaInsets().top
 
   return (
     <GradientScrollView
       style={styles.scroll}
-      contentContainerStyle={styles.scrollContentContainer}
+      contentContainerStyle={{ paddingTop }}
       refreshControl={
         <RefreshControl
-          refreshing={refreshing}
-          onRefresh={refresh}
+          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} type={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>
   )
@@ -157,9 +112,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingBottom: 20,
   },

app/screens/LibraryAlbums.tsx

@@ -1,22 +1,25 @@
 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 { 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 { GetAlbumList2Params, GetAlbumList2Type } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback } 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<{
-  id: string
+  album: Album
   size: number
   height: number
-}>(({ id, size, height }) => {
-  const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
+}>(({ album, size, height }) => {
   const navigation = useNavigation()
 
   if (!album) {
@@ -28,8 +31,14 @@ const AlbumItem = React.memo<{
       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}
@@ -40,64 +49,42 @@ const AlbumItem = React.memo<{
       </View>
     </AlbumContextPressable>
   )
-})
+}, equal)
 
 const AlbumListRenderItem: React.FC<{
-  item: { id: string; size: number; height: number }
-}> = ({ item }) => <AlbumItem id={item.id} size={item.size} height={item.height} />
+  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 AlbumsList = () => {
-  const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
-  const setFilter = useStore(store => store.setLibraryAlbumFilter)
+const AlbumFilterButton = withSuspenseMemo(() => {
+  const { t } = useTranslation()
+  const filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
+  const setFilterType = useStore(store => store.setLibraryAlbumFilterType)
 
-  const fetchAlbumList = useStore(store => store.fetchAlbumList)
-  const fetchPage = useCallback(
-    (size: number, offset: number) => {
-      let params: GetAlbumList2Params
-      switch (filter.type) {
-        case 'byYear':
-          params = {
-            size,
-            offset,
-            type: filter.type,
-            fromYear: filter.fromYear,
-            toYear: filter.toYear,
-          }
-          break
-        case 'byGenre':
-          params = {
-            size,
-            offset,
-            type: filter.type,
-            genre: filter.genre,
-          }
-          break
-        default:
-          params = {
-            size,
-            offset,
-            type: filter.type,
-          }
-          break
-      }
-      return fetchAlbumList(params)
-    },
-    [fetchAlbumList, filter.fromYear, filter.genre, filter.toYear, filter.type],
+  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 { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchPage, 300)
+const AlbumsList = () => {
+  const filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
+  const { isLoading, data, fetchNextPage, refetch } = useQueryAlbumList(filterType as GetAlbumList2TypeBase, 300)
 
   const layout = useWindowDimensions()
 
@@ -107,28 +94,19 @@ const AlbumsList = () => {
   return (
     <View style={styles.container}>
       <GradientFlatList
-        data={list.map(id => ({ id, size, height }))}
+        data={data ? data.pages.flatMap(albums => albums.map(album => ({ album, size, height }))) : []}
         renderItem={AlbumListRenderItem}
-        keyExtractor={item => item.id}
+        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,36 +1,54 @@
-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 { useFetchList2 } from '@app/hooks/list'
+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 { 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 ArtistsList = () => {
-  const fetchArtists = useStore(store => store.fetchArtists)
-  const { refreshing, refresh } = useFetchList2(fetchArtists)
-  const artists = useStoreDeep(store => store.library.artists)
-  const artistOrder = useStoreDeep(store => store.library.artistOrder)
+const ArtistFilterButton = withSuspenseMemo(() => {
+  const { t } = useTranslation()
+  const filterType = useStoreDeep(store => store.settings.screens.library.artistsFilter.type)
+  const setFilterType = useStore(store => store.setLibraryArtistFilterType)
 
-  const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
-  const setFilter = useStore(store => store.setLibraryArtistFiler)
+  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 filterType = useStore(store => store.settings.screens.library.artistsFilter.type)
+
+  const { isLoading, data, refetch } = useQueryArtists()
   const [sortedList, setSortedList] = useState<Artist[]>([])
 
   useEffect(() => {
-    const list = Object.values(artists)
-    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
@@ -38,13 +56,13 @@ const ArtistsList = () => {
         setSortedList([...list].filter(a => a.starred))
         break
       case 'alphabeticalByName':
-        setSortedList(artistOrder.map(id => artists[id]))
+        setSortedList(data.allIds.map(id => data.byId[id]))
         break
       default:
         setSortedList([...list])
         break
     }
-  }, [filter.type, artists, artistOrder])
+  }, [filterType, data])
 
   return (
     <View style={styles.container}>
@@ -52,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,8 +1,8 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchList2 } from '@app/hooks/list'
+import { useQueryPlaylists } from '@app/hooks/query'
 import { Playlist } from '@app/models/library'
-import { useStore, useStoreDeep } from '@app/state/store'
+import { mapById } from '@app/util/state'
 import React from 'react'
 import { StyleSheet } from 'react-native'
 
@@ -11,17 +11,15 @@ const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => (
 )
 
 const PlaylistsList = () => {
-  const fetchPlaylists = useStore(store => store.fetchPlaylists)
-  const { refreshing, refresh } = useFetchList2(fetchPlaylists)
-  const playlists = useStoreDeep(store => store.library.playlists)
+  const { isLoading, data, refetch } = useQueryPlaylists()
 
   return (
     <GradientFlatList
-      data={Object.values(playlists)}
+      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

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

app/screens/NowPlayingView.tsx

@@ -3,8 +3,10 @@ import HeaderBar from '@app/components/HeaderBar'
 import ImageGradientBackground from '@app/components/ImageGradientBackground'
 import PressableOpacity from '@app/components/PressableOpacity'
 import { PressableStar } from '@app/components/Star'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
-import { QueueContextType, TrackExt } from '@app/models/trackplayer'
+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'
@@ -12,6 +14,7 @@ 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'
@@ -20,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(store => store.queueName)
   const queueContextType = useStore(store => store.queueContextType)
-  const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
+  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
@@ -91,11 +90,11 @@ const headerStyles = StyleSheet.create({
 })
 
 const SongCoverArt = () => {
-  const coverArt = useStore(store => store.currentTrack?.coverArt)
+  const albumId = useStore(store => store.currentTrack?.albumId)
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt type="cover" size="original" coverArt={coverArt} style={coverArtStyles.image} />
+      <CoverArt type="album" size="original" albumId={albumId} style={coverArtStyles.image} />
     </View>
   )
 }

app/screens/Search.tsx

@@ -4,185 +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/settings'
-import { Song, Album, Artist, SearchResults } from '@app/models/library'
-import { useStore, useStoreDeep } from '@app/state/store'
+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 { mapById } from '@app/util/state'
 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(store => store.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
-  ids: string[]
+  items: (Artist | Album | Song)[]
   type: 'artist' | 'album' | 'song'
-}>(({ name, query, type, ids }) => {
-  const items: (Album | Artist | Song)[] = useStoreDeep(
-    useCallback(
-      store => {
-        switch (type) {
-          case 'album':
-            return mapById(store.library.albums, ids)
-          case 'artist':
-            return mapById(store.library.artists, ids)
-          case 'song':
-            return mapById(store.library.songs, ids)
-          default:
-            return []
-        }
-      },
-      [ids, type],
-    ),
-  )
+}>(
+  ({ name, query, type, items }) => {
+    const navigation = useNavigation()
+    const { t } = useTranslation()
 
-  const navigation = useNavigation()
+    if (items.length === 0) {
+      return <></>
+    }
 
-  if (items.length === 0) {
-    return <></>
-  }
+    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,
+)
 
-  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="More..."
-          buttonStyle="hollow"
-          style={styles.more}
-          onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
-        />
-      )}
-    </>
-  )
-})
-
-const Results = React.memo<{
+const Results = withSuspenseMemo<{
   results: SearchResults
   query: string
-}>(({ results, query }) => {
-  return (
-    <>
-      <ResultsCategory name="Artists" query={query} type={'artist'} ids={results.artists} />
-      <ResultsCategory name="Albums" query={query} type={'album'} ids={results.albums} />
-      <ResultsCategory name="Songs" query={query} type={'song'} ids={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(store => store.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, albumCount: 5, artistCount: 5, songCount: 5 }))
-        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 { 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 { useStore, useStoreDeep } from '@app/state/store'
 import { Search3Params } from '@app/subsonic/params'
-import { mapById } from '@app/util/state'
 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 = Album | Song | Artist
 
-const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
-  const setQueue = useStore(store => store.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,78 +38,53 @@ 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(store => store.fetchSearchResults)
-  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
-    useCallback(
-      async (size, offset) => {
-        const params: Search3Params = { query }
-        if (type === 'album') {
-          params.albumCount = size
-          params.albumOffset = offset
-        } else if (type === 'artist') {
-          params.artistCount = size
-          params.artistOffset = offset
-        } else if (type === 'song') {
-          params.songCount = size
-          params.songOffset = offset
-        } else {
-          params.albumCount = 5
-          params.artistCount = 5
-          params.songCount = 5
-        }
+  const { t } = useTranslation()
 
-        const results = await fetchSearchResults(params)
+  const size = 100
+  const params: Search3Params = { query }
 
-        switch (type) {
-          case 'album':
-            return results.albums
-          case 'artist':
-            return results.artists
-          case 'song':
-            return results.songs
-          default:
-            return []
-        }
-      },
-      [fetchSearchResults, query, type],
-    ),
-    100,
-  )
+  if (type === 'album') {
+    params.albumCount = size
+  } else if (type === 'artist') {
+    params.artistCount = size
+  } else {
+    params.songCount = size
+  }
 
-  const items: SearchListItemType[] = useStoreDeep(
-    useCallback(
-      store => {
-        switch (type) {
-          case 'album':
-            return mapById(store.library.albums, list)
-          case 'artist':
-            return mapById(store.library.artists, list)
-          case 'song':
-            return mapById(store.library.songs, list)
-          default:
-            return []
-        }
-      },
-      [list, type],
-    ),
-  )
+  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
   }, [])
@@ -108,17 +94,17 @@ const SearchResultsView: React.FC<{
       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,5 +1,7 @@
 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 { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -7,16 +9,18 @@ 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 SettingsSwitch from '@app/components/SettingsSwitch'
+import uuid from 'react-native-uuid'
 
 const PASSWORD_PLACEHOLDER = 'PASSWORD_PLACEHOLDER'
 
-const ServerView: React.FC<{
+const ServerView = withSuspense<{
   id?: string
-}> = ({ id }) => {
+  title?: string
+}>(({ id, title }) => {
+  const { t } = useTranslation()
   const navigation = useNavigation()
   const activeServerId = useStore(store => store.settings.activeServerId)
   const servers = useStoreDeep(store => store.settings.servers)
@@ -35,8 +39,10 @@ const ServerView: React.FC<{
   )
 
   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
@@ -57,7 +63,7 @@ const ServerView: React.FC<{
   const createServer = useCallback<() => Server>(() => {
     if (usePlainPassword) {
       return {
-        id: server?.id || uuidv4(),
+        id: server?.id || '',
         usePlainPassword,
         plainPassword: password,
         address,
@@ -72,12 +78,12 @@ const ServerView: React.FC<{
       salt = server.salt
       token = server.token
     } else {
-      salt = uuidv4()
+      salt = uuid.v4() as string
       token = md5(password + salt)
     }
 
     return {
-      id: server?.id || uuidv4(),
+      id: server?.id || '',
       address,
       username,
       usePlainPassword,
@@ -91,22 +97,15 @@ const ServerView: React.FC<{
       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(() => {
@@ -114,16 +113,8 @@ 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(
@@ -151,19 +142,20 @@ const ServerView: React.FC<{
 
     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()
@@ -184,9 +176,9 @@ 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"
@@ -199,7 +191,7 @@ const ServerView: React.FC<{
           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"
@@ -212,7 +204,7 @@ const ServerView: React.FC<{
           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"
@@ -227,11 +219,11 @@ const ServerView: React.FC<{
           onChangeText={setPassword}
         />
         <SettingsSwitch
-          title="Force plain text password"
+          title={t('settings.servers.options.forcePlaintextPassword.title')}
           subtitle={
             usePlainPassword
-              ? 'Send password in plain text (legacy, make sure your connection is secure!)'
-              : 'Send password as token + salt'
+              ? t('settings.servers.options.forcePlaintextPassword.descriptionOn')
+              : t('settings.servers.options.forcePlaintextPassword.descriptionOff')
           }
           value={usePlainPassword}
           setValue={togglePlainPassword}
@@ -239,29 +231,31 @@ const ServerView: React.FC<{
         <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,24 +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/settings'
+import { withSuspenseMemo } from '@app/components/withSuspense'
+import { useResetImageCache, useSwitchActiveServer } from '@app/hooks/settings'
 import { Server } from '@app/models/settings'
 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 activeServerId = useStore(store => store.settings.activeServerId)
   const switchActiveServer = useSwitchActiveServer()
   const navigation = useNavigation()
+  const { t } = useTranslation()
 
   const setActive = useCallback(() => {
     switchActiveServer(server.id)
@@ -32,7 +36,7 @@ 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}>
         {activeServerId === server.id ? (
           <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
@@ -72,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}
@@ -98,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}>
@@ -134,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)
 
@@ -147,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}>
@@ -182,15 +181,9 @@ 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 = useStoreDeep(store => store.settings.servers)
   const scrobble = useStore(store => store.settings.scrobble)
   const setScrobble = useStore(store => store.setScrobble)
@@ -206,89 +199,99 @@ const SettingsContent = React.memo(() => {
   const maxBuffer = useStore(store => store.settings.maxBuffer)
   const setMaxBuffer = useStore(store => store.setMaxBuffer)
 
-  const clearImageCache = useStore(store => store.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>
+      <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} />
+      <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"
-        onPress={() => navigation.navigate('web', { uri: 'file:///android_asset/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>
@@ -296,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>
   )
@@ -307,9 +312,6 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
-  scrollContentContainer: {
-    paddingTop: StatusBar.currentHeight,
-  },
   content: {
     paddingHorizontal: 20,
     paddingBottom: 40,

app/screens/SongListView.tsx

@@ -5,12 +5,13 @@ import ImageGradientFlatList from '@app/components/ImageGradientFlatList'
 import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
 import NothingHere from '@app/components/NothingHere'
-import { useCoverArtFile } from '@app/hooks/cache'
-import { Song, Album, Playlist } from '@app/models/library'
-import { useStore, useStoreDeep } from '@app/state/store'
+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 React, { useCallback, useEffect, useState } from 'react'
+import equal from 'fast-deep-equal/es6/react'
+import React, { useState } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 
 type SongListType = 'album' | 'playlist'
@@ -29,6 +30,7 @@ const SongRenderItem: React.FC<{
     subtitle?: string
     onPress?: () => void
     showArt?: boolean
+    disabled?: boolean
   }
 }> = ({ item }) => (
   <ListItem
@@ -39,6 +41,7 @@ const SongRenderItem: React.FC<{
     onPress={item.onPress}
     showArt={item.showArt}
     style={styles.listItem}
+    disabled={item.disabled}
   />
 )
 
@@ -49,19 +52,12 @@ const SongListDetails = React.memo<{
   songs?: Song[]
   subtitle?: string
 }>(({ title, songList, songs, subtitle, type }) => {
-  const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
+  const { data: coverArtPath } = useQueryCoverArtPath(songList?.coverArt, 'thumbnail')
   const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
-  const setQueue = useStore(store => store.setQueue)
-
-  if (!songList) {
-    return <SongListDetailsFallback />
-  }
 
   const _songs = [...(songs || [])]
-  let typeName = ''
 
   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,16 +89,17 @@ 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,
         }}
@@ -116,87 +121,67 @@ const SongListDetails = React.memo<{
             <ListPlayerControls
               style={styles.controls}
               songs={_songs}
-              typeName={typeName}
-              queueName={songList.name}
-              queueContextId={songList.id}
-              queueContextType={type}
+              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 = useStoreDeep(useCallback(store => store.library.playlists[id], [id]))
-  const songs = useStoreDeep(
-    useCallback(
-      store => {
-        const ids = store.library.playlistSongs[id]
-        return ids ? ids.map(i => store.library.songs[i]) : undefined
-      },
-      [id],
-    ),
-  )
-
-  const fetchPlaylist = useStore(store => store.fetchPlaylist)
-
-  useEffect(() => {
-    if (!playlist || !songs) {
-      fetchPlaylist(id)
-    }
-  }, [playlist, fetchPlaylist, id, songs])
-
-  return (
-    <SongListDetails title={title} songList={playlist} songs={songs} subtitle={playlist?.comment} type="playlist" />
-  )
-})
-
-const AlbumView = React.memo<{
-  id: string
-  title: string
-}>(({ id, title }) => {
-  const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
-  const songs = useStoreDeep(
-    useCallback(
-      store => {
-        const ids = store.library.albumSongs[id]
-        return ids ? ids.map(i => store.library.songs[i]) : undefined
-      },
-      [id],
-    ),
-  )
-
-  const fetchAlbum = useStore(store => store.fetchAlbum)
-
-  useEffect(() => {
-    if (!album || !songs) {
-      fetchAlbum(id)
-    }
-  }, [album, fetchAlbum, id, songs])
+  playlist?: Playlist
+}>(({ id, title, playlist }) => {
+  const query = useQueryPlaylist(id, playlist)
 
   return (
     <SongListDetails
       title={title}
-      songList={album}
-      songs={songs}
-      subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
+      songList={query.data?.playlist}
+      songs={query.data?.songs}
+      subtitle={query.data?.playlist?.comment}
+      type="playlist"
+    />
+  )
+}, equal)
+
+const AlbumView = React.memo<{
+  id: string
+  title: string
+  album?: Album
+}>(({ id, title, album }) => {
+  const query = useQueryAlbum(id, album)
+
+  return (
+    <SongListDetails
+      title={title}
+      songList={query.data?.album}
+      songs={query.data?.songs}
+      subtitle={(query.data?.album?.artist || '') + (query.data?.album?.year ? ' • ' + query.data?.album?.year : '')}
       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: {

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,259 +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 RNFS from 'react-native-fs'
-import { GetStore, SetStore } 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 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 createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
-  // cache: {},
-  cacheDirs: {},
-  cacheFiles: {},
-  cacheRequests: {},
-
-  cacheItem: async (key, itemId, url) => {
-    const client = get().client
-    if (!client) {
-      return
-    }
-
-    const activeServerId = get().settings.activeServerId
-    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(state => {
-          state.cacheRequests[activeServerId][key][itemId].progress = 1
-          delete state.cacheRequests[activeServerId][key][itemId].promise
-        })
-      } catch {
-        set(state => {
-          delete state.cacheFiles[activeServerId][key][itemId]
-          delete state.cacheRequests[activeServerId][key][itemId]
-        })
-      }
-    })
-    set(state => {
-      state.cacheFiles[activeServerId][key][itemId] = {
-        path,
-        date: Date.now(),
-        permanent: false,
-      }
-      state.cacheRequests[activeServerId][key][itemId] = {
-        progress: 0,
-        promise,
-      }
-    })
-    return await promise
-  },
-
-  fetchCoverArtFilePath: async (coverArt, size = 'thumbnail') => {
-    const client = get().client
-    if (!client) {
-      return
-    }
-
-    const activeServerId = get().settings.activeServerId
-    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(state => {
-      state.cacheFiles[serverId] = {
-        song: {},
-        coverArt: {},
-        coverArtThumb: {},
-        artistArt: {},
-        artistArtThumb: {},
-      }
-    })
-
-    get().prepareCache(serverId)
-  },
-
-  prepareCache: serverId => {
-    set(state => {
-      if (!state.cacheDirs[serverId]) {
-        state.cacheDirs[serverId] = {
-          song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
-          coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
-          coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
-          artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
-          artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
-        }
-      }
-      if (!state.cacheRequests[serverId]) {
-        state.cacheRequests[serverId] = {
-          song: {},
-          coverArt: {},
-          coverArtThumb: {},
-          artistArt: {},
-          artistArtThumb: {},
-        }
-      }
-    })
-  },
-
-  pendingRemoval: {},
-
-  removeCache: async serverId => {
-    set(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(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(state => {
-        state.cacheFiles[serverId].coverArt = {}
-        state.cacheFiles[serverId].coverArtThumb = {}
-        state.cacheFiles[serverId].artistArt = {}
-        state.cacheFiles[serverId].artistArtThumb = {}
-      })
-    }
-  },
-})

app/state/library.ts

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

app/state/migrations.ts

@@ -1,15 +1,20 @@
 import { Server } from '@app/models/settings'
 import { ById } from '@app/models/state'
+import { newCacheBuster } from './settings'
+import RNFS from 'react-native-fs'
 
-const migrations: Array<(state: any) => any> = [
-  state => {
+const migrations: Array<(state: any) => Promise<any>> = [
+  // 1
+  async state => {
     for (let server of state.settings.servers) {
       server.usePlainPassword = false
     }
 
     return state
   },
-  state => {
+
+  // 2
+  async state => {
     state.settings.servers = state.settings.servers.reduce((acc: ById<Server>, server: Server) => {
       acc[server.id] = server
       return acc
@@ -31,6 +36,34 @@ const migrations: Array<(state: any) => any> = [
 
     return state
   },
+
+  // 3
+  async state => {
+    state.settings.cacheBuster = newCacheBuster()
+
+    state.settings.servers = Object.values(state.settings.servers as Record<string, Server>).reduce(
+      (acc, server, i) => {
+        const newId = i.toString()
+
+        if (server.id === state.settings.activeServerId) {
+          state.settings.activeServerId = newId
+        }
+
+        server.id = newId
+        acc[newId] = server
+        return acc
+      },
+      {} as Record<string, Server>,
+    )
+
+    try {
+      await RNFS.unlink(`${RNFS.DocumentDirectoryPath}/servers`)
+    } catch (err) {
+      console.error(err)
+    }
+
+    return state
+  },
 ]
 
 export default migrations

app/state/settings.ts

@@ -1,7 +1,9 @@
-import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/settings'
+import { AlbumFilterSettings, ArtistFilterSettings, ArtistFilterType, Server } from '@app/models/settings'
 import { ById } from '@app/models/state'
 import { GetStore, SetStore } from '@app/state/store'
 import { SubsonicApiClient } from '@app/subsonic/api'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
+import uuid from 'react-native-uuid'
 
 export type SettingsSlice = {
   settings: {
@@ -21,13 +23,19 @@ export type SettingsSlice = {
     maxBitrateMobile: number
     minBuffer: number
     maxBuffer: number
+    cacheBuster: string
   }
 
   client?: SubsonicApiClient
 
+  disableMusicTabs: boolean
+  setDisableMusicTabs: (value: boolean) => void
+
+  changeCacheBuster: () => void
+
   setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
-  addServer: (server: Server) => Promise<void>
-  removeServer: (id: string) => Promise<void>
+  addServer: (server: Server) => void
+  removeServer: (id: string) => void
   updateServer: (server: Server) => void
 
   setScrobble: (scrobble: boolean) => void
@@ -38,8 +46,12 @@ export type SettingsSlice = {
 
   pingServer: (server?: Server) => Promise<boolean>
 
-  setLibraryAlbumFilter: (filter: AlbumFilterSettings) => void
-  setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
+  setLibraryAlbumFilterType: (type: GetAlbumList2TypeBase) => void
+  setLibraryArtistFilterType: (type: ArtistFilterType) => void
+}
+
+export function newCacheBuster(): string {
+  return (uuid.v4() as string).split('-')[0]
 }
 
 export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice => ({
@@ -66,6 +78,20 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
     maxBitrateMobile: 192,
     minBuffer: 6,
     maxBuffer: 60,
+    cacheBuster: newCacheBuster(),
+  },
+
+  disableMusicTabs: false,
+  setDisableMusicTabs: value => {
+    set(store => {
+      store.disableMusicTabs = value
+    })
+  },
+
+  changeCacheBuster: () => {
+    set(store => {
+      store.settings.cacheBuster = newCacheBuster()
+    })
   },
 
   setActiveServer: async (id, force) => {
@@ -84,17 +110,24 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
       return
     }
 
-    get().prepareCache(newActiveServer.id)
+    set(state => {
+      state.disableMusicTabs = true
+    })
 
     set(state => {
       state.settings.activeServerId = newActiveServer.id
       state.client = new SubsonicApiClient(newActiveServer)
-      get().resetLibrary(state)
+    })
+
+    set(state => {
+      state.disableMusicTabs = false
     })
   },
 
-  addServer: async server => {
-    await get().createCache(server.id)
+  addServer: server => {
+    const serverIds = Object.keys(get().settings.servers)
+    server.id =
+      serverIds.length === 0 ? '0' : (serverIds.map(i => parseInt(i, 10)).sort((a, b) => b - a)[0] + 1).toString()
 
     set(state => {
       state.settings.servers[server.id] = server
@@ -105,9 +138,7 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
     }
   },
 
-  removeServer: async id => {
-    await get().removeCache(id)
-
+  removeServer: id => {
     set(state => {
       delete state.settings.servers[id]
     })
@@ -193,15 +224,15 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
     }
   },
 
-  setLibraryAlbumFilter: filter => {
+  setLibraryAlbumFilterType: type => {
     set(state => {
-      state.settings.screens.library.albumsFilter = filter
+      state.settings.screens.library.albumsFilter.type = type
     })
   },
 
-  setLibraryArtistFiler: filter => {
+  setLibraryArtistFilterType: type => {
     set(state => {
-      state.settings.screens.library.artistsFilter = filter
+      state.settings.screens.library.artistsFilter.type = type
     })
   },
 })

app/state/store.ts

@@ -3,21 +3,15 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import equal from 'fast-deep-equal'
 import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
 import { persist, subscribeWithSelector } from 'zustand/middleware'
-import { CacheSlice, createCacheSlice } from './cache'
-import { createLibrarySlice, LibrarySlice } from './library'
 import migrations from './migrations'
 import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
-import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
 import produce, { Draft } from 'immer'
 import { WritableDraft } from 'immer/dist/internal'
 
 const DB_VERSION = migrations.length
 
 export type Store = SettingsSlice &
-  LibrarySlice &
-  TrackPlayerSlice &
-  TrackPlayerMapSlice &
-  CacheSlice & {
+  TrackPlayerSlice & {
     hydrated: boolean
     setHydrated: (hydrated: boolean) => void
   }
@@ -63,10 +57,7 @@ export const useStore = create<
     persist(
       immer((set, get) => ({
         ...createSettingsSlice(set, get),
-        ...createLibrarySlice(set, get),
         ...createTrackPlayerSlice(set, get),
-        ...createTrackPlayerMapSlice(set, get),
-        ...createCacheSlice(set, get),
 
         hydrated: false,
         setHydrated: hydrated =>
@@ -78,20 +69,20 @@ export const useStore = create<
         name: '@appStore',
         version: DB_VERSION,
         getStorage: () => AsyncStorage,
-        partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
+        partialize: state => ({ settings: state.settings }),
         onRehydrateStorage: _preState => {
           return async (postState, _error) => {
             await postState?.setActiveServer(postState.settings.activeServerId, true)
             postState?.setHydrated(true)
           }
         },
-        migrate: (persistedState, version) => {
+        migrate: async (persistedState, version) => {
           if (version > DB_VERSION) {
             throw new Error('cannot migrate db on a downgrade, delete all data first')
           }
 
           for (let i = version; i < DB_VERSION; i++) {
-            persistedState = migrations[i](persistedState)
+            persistedState = await migrations[i](persistedState)
           }
 
           return persistedState

app/state/trackplayer.ts

@@ -1,11 +1,22 @@
 import { NoClientError } from '@app/models/error'
-import { Song } from '@app/models/library'
 import { Progress, QueueContextType, TrackExt } from '@app/models/trackplayer'
 import PromiseQueue from '@app/util/PromiseQueue'
 import produce from 'immer'
 import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
 import { GetStore, SetStore } from './store'
 
+export type SetQueueOptions = {
+  title: string
+  playTrack?: number
+  shuffle?: boolean
+}
+
+export type SetQueueOptionsInternal = SetQueueOptions & {
+  queue: TrackExt[]
+  contextId: string
+  type: QueueContextType
+}
+
 export type TrackPlayerSlice = {
   queueName?: string
   setQueueName: (name?: string) => void
@@ -33,14 +44,7 @@ export type TrackPlayerSlice = {
   setCurrentTrackIdx: (idx?: number) => void
 
   queue: TrackExt[]
-  setQueue: (
-    songs: Song[],
-    name: string,
-    contextType: QueueContextType,
-    contextId: string,
-    playTrack?: number,
-    shuffle?: boolean,
-  ) => Promise<void>
+  setQueue: (options: SetQueueOptionsInternal) => Promise<void>
 
   progress: Progress
   setProgress: (progress: Progress) => void
@@ -51,6 +55,7 @@ export type TrackPlayerSlice = {
   setNetState: (netState: 'mobile' | 'wifi') => Promise<void>
 
   rebuildQueue: (forcePlay?: boolean) => Promise<void>
+  updateQueue: () => Promise<void>
   buildStreamUri: (id: string) => string
   resetTrackPlayerState: () => void
 
@@ -175,19 +180,17 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
     }),
 
   queue: [],
-  setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
+  setQueue: async ({ queue, title, type, contextId, playTrack, shuffle }) => {
     return trackPlayerCommands.enqueue(async () => {
       const shuffled = shuffle !== undefined ? shuffle : !!get().shuffleOrder
 
       await TrackPlayer.setupPlayer(get().getPlayerOptions())
       await TrackPlayer.reset()
 
-      if (songs.length === 0) {
+      if (queue.length === 0) {
         return
       }
 
-      let queue = await get().mapSongstoTrackExts(songs)
-
       if (shuffled) {
         const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
         set(state => {
@@ -206,8 +209,8 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
       try {
         set(state => {
           state.queue = queue
-          state.queueName = name
-          state.queueContextType = contextType
+          state.queueName = title
+          state.queueContextType = type
           state.queueContextId = contextId
         })
         get().setCurrentTrackIdx(playTrack)
@@ -272,6 +275,7 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
       const currentTrack = await getCurrentTrack()
       const playerState = await getPlayerState()
       const position = (await TrackPlayer.getPosition()) || 0
+      const repeatMode = await getRepeatMode()
 
       const queueName = get().queueName
       const queueContextId = get().queueContextId
@@ -302,6 +306,7 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
         await TrackPlayer.skip(currentTrack)
       }
 
+      await TrackPlayer.setRepeatMode(repeatMode)
       await TrackPlayer.seekTo(position)
 
       if (playerState === State.Playing || forcePlay) {
@@ -310,6 +315,17 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
     })
   },
 
+  updateQueue: async () => {
+    const newQueue = await getQueue()
+    const currentTrack = await getCurrentTrack()
+    set(state => {
+      state.queue = newQueue
+      if (currentTrack !== undefined) {
+        state.currentTrack = newQueue[currentTrack]
+      }
+    })
+  },
+
   buildStreamUri: id => {
     const client = get().client
     if (!client) {

app/state/trackplayermap.ts

@@ -1,59 +0,0 @@
-import { Song } from '@app/models/library'
-import { TrackExt } from '@app/models/trackplayer'
-import userAgent from '@app/util/userAgent'
-import { GetStore, SetStore } from '@app/state/store'
-
-export type TrackPlayerMapSlice = {
-  mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
-  mapSongstoTrackExts: (songs: Song[]) => Promise<TrackExt[]>
-  mapTrackExtToSong: (song: TrackExt) => Song
-}
-
-export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
-  mapSongtoTrackExt: async song => {
-    let artwork = require('@res/fallback.png')
-    if (song.coverArt) {
-      const filePath = await get().fetchCoverArtFilePath(song.coverArt)
-      if (filePath) {
-        artwork = filePath
-      }
-    }
-
-    return {
-      id: song.id,
-      title: song.title,
-      artist: song.artist || 'Unknown Artist',
-      album: song.album || 'Unknown Album',
-      url: get().buildStreamUri(song.id),
-      userAgent,
-      artwork,
-      coverArt: song.coverArt,
-      duration: song.duration,
-      artistId: song.artistId,
-      albumId: song.albumId,
-      track: song.track,
-      discNumber: song.discNumber,
-    }
-  },
-
-  mapSongstoTrackExts: async songs => {
-    return await Promise.all(songs.map(get().mapSongtoTrackExt))
-  },
-
-  mapTrackExtToSong: track => {
-    return {
-      itemType: 'song',
-      id: track.id,
-      title: track.title as string,
-      artist: track.artist,
-      album: track.album,
-      streamUri: track.url as string,
-      coverArt: track.coverArt,
-      duration: track.duration,
-      artistId: track.artistId,
-      albumId: track.albumId,
-      track: track.track,
-      discNumber: track.discNumber,
-    }
-  },
-})

app/styles/dimensions.ts

@@ -1,14 +1,10 @@
-import { StatusBar } from 'react-native'
-
 const header = 56
 const tabBar = 54
 
-const top = () => header + (StatusBar.currentHeight || 0)
 const bottom = () => tabBar
 
 export default {
   header,
   tabBar,
-  top,
   bottom,
 }

app/subsonic/elements.ts

@@ -101,10 +101,7 @@ export class BaseArtistInfoElement<T> {
       this.largeImageUrl = e.getElementsByTagName('largeImageUrl')[0].textContent as string
     }
 
-    const similarArtistElements = e.getElementsByTagName('similarArtist')
-    for (let i = 0; i < similarArtistElements.length; i++) {
-      this.similarArtists.push(new artistType(similarArtistElements[i]))
-    }
+    this.similarArtists = Array.from(e.getElementsByTagName('similarArtist')).map(i => new artistType(i))
   }
 }
 
@@ -250,9 +247,7 @@ export class PlaylistElement {
   coverArt?: string
 
   constructor(e: Element) {
-    for (let i = 0; i < e.getElementsByTagName('allowedUser').length; i++) {
-      this.allowedUser.push(e.getElementsByTagName('allowedUser')[i].textContent as string)
-    }
+    this.allowedUser = Array.from(e.getElementsByTagName('allowedUser')).map(i => i.textContent as string)
 
     this.id = requiredString(e, 'id')
     this.name = requiredString(e, 'name')
@@ -273,8 +268,6 @@ export class PlaylistWithSongsElement extends PlaylistElement {
   constructor(e: Element) {
     super(e)
 
-    for (let i = 0; i < e.getElementsByTagName('entry').length; i++) {
-      this.songs.push(new ChildElement(e.getElementsByTagName('entry')[i]))
-    }
+    this.songs = Array.from(e.getElementsByTagName('entry')).map(i => new ChildElement(i))
   }
 }

app/util/fs.ts

@@ -1,19 +1,15 @@
 import RNFS from 'react-native-fs'
+import path from 'path'
+import { CacheItemTypeKey } from '@app/models/cache'
 
-export async function mkdir(path: string): Promise<void> {
-  const exists = await RNFS.exists(path)
-  if (exists) {
-    const isDir = (await RNFS.stat(path)).isDirectory()
-    if (!isDir) {
-      throw new Error(`path exists and is not a directory: ${path}`)
-    } else {
-      return
-    }
-  }
+const serversCacheDir = path.join(RNFS.ExternalDirectoryPath, 's')
 
-  return await RNFS.mkdir(path)
-}
-
-export async function rmdir(path: string): Promise<void> {
-  return RNFS.unlink(path)
+export function cacheDir(serverId?: string, itemType?: CacheItemTypeKey, itemId?: string): string {
+  const segments: string[] = []
+
+  serverId && segments.push(serverId)
+  serverId && itemType && segments.push(itemType)
+  serverId && itemType && itemId && segments.push(itemId)
+
+  return path.join(serversCacheDir, ...segments)
 }

app/util/state.ts

@@ -1,5 +1,5 @@
-import { ById } from '@app/models/state'
-import merge from 'lodash.merge'
+import { ById, CollectionById } from '@app/models/state'
+import _ from 'lodash'
 
 export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
   return collection.reduce((acc, value) => {
@@ -9,7 +9,7 @@ export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
 }
 
 export function mergeById<T extends { [id: string]: unknown }>(object: T, source: T): void {
-  merge(object, source)
+  _.merge(object, source)
 }
 
 export function mapById<T>(object: ById<T>, ids: string[]): T[] {
@@ -19,3 +19,14 @@ export function mapById<T>(object: ById<T>, ids: string[]): T[] {
 export function mapId(entities: { id: string }[]): string[] {
   return entities.map(e => e.id)
 }
+
+export function mapCollectionById<T, U extends { id: string }>(
+  collection: T[],
+  map: (item: T) => U,
+): CollectionById<U> {
+  const mapped = collection.map(map)
+  return {
+    byId: reduceById(mapped),
+    allIds: mapId(mapped),
+  }
+}

app/util/types.ts

@@ -0,0 +1,2 @@
+export type PromiseResolvedType<T> = T extends Promise<infer R> ? R : never
+export type ReturnedPromiseResolvedType<T extends (...args: any) => any> = PromiseResolvedType<ReturnType<T>>

index.js

@@ -1,5 +1,4 @@
 import 'react-native-gesture-handler'
-import 'react-native-get-random-values'
 
 import { enableScreens } from 'react-native-screens'
 enableScreens()
@@ -12,6 +11,21 @@ LogBox.ignoreLogs([
   "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!",
 ])
 
+import i18next from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import { backend, languageDetector } from '@app/i18n'
+import * as RNLocalize from 'react-native-localize'
+
+i18next.use(backend).use(languageDetector).use(initReactI18next).init({
+  compatibilityJSON: 'v3',
+  fallbackLng: 'en',
+  debug: true,
+})
+
+RNLocalize.addEventListener('change', () => {
+  languageDetector.detect(lng => i18next.changeLanguage(lng))
+})
+
 import { AppRegistry } from 'react-native'
 import App from '@app/App'
 import { name as appName } from '@app/app.json'

metadata/en-US/changelogs/8.txt

@@ -0,0 +1,12 @@
+## New
+
+* Top Songs in the Artist view now tries to fallback to searching for songs by the artist and sorting by play count/rating if the server doesn't support the getTopSongs endpoint
+* Images are now downloaded in the background via the Android DownloadManager and won't be corrupted if the app is closed
+  * Note: the cache file structure has been changed, so all images will be erased on update and new images will be downloaded as normal
+
+## Fixed
+
+* Fixed some screens displaying under the status bar on certain devices (#83)
+* Fixed occasional pausing after playing a few tracks (#66)
+* Fixed repeat mode not being persisted after skipping tracks (#56)
+* Search no longer clears the query when going back from the "more" results screen

metadata/en-US/changelogs/9.txt

@@ -0,0 +1,10 @@
+**Full Changelog**: https://github.com/austinried/subtracks/compare/v1.2.0...v1.3.0
+
+## What's Changed
+### New
+* Localization support by @austinried in https://github.com/austinried/subtracks/pull/99
+  * 9 new languages: Catalan, Chinese (Simplified), Danish, French, German, Italian, Japanese, Norwegian Bokmål, Russian
+  * Thanks to @comradekingu, @clyhtsuriva, @nortio, @retiolus, @hillwah, @shoddysheep and more users from @weblate!
+### Fixed
+* Remove unused CHECK_LICENSE permission by @austinried in https://github.com/austinried/subtracks/pull/109
+* Fix performance issue/crash with large playlists by @austinried in https://github.com/austinried/subtracks/pull/111

package.json

@@ -1,6 +1,6 @@
 {
   "name": "subtracks",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {
@@ -19,7 +19,7 @@
     "version:major": "yarn version --major --no-git-tag-version && ./android/gradlew -p android bumpMajorVersion"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.15.5",
+    "@react-native-async-storage/async-storage": "1.16",
     "@react-native-community/hooks": "^2.6.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-community/netinfo": "^6.0.0",
@@ -29,42 +29,46 @@
     "@react-navigation/native": "^5.9.4",
     "@types/react": "^17",
     "@xmldom/xmldom": "^0.7.0",
+    "content-disposition": "^0.5.4",
     "fast-deep-equal": "^3.1.3",
+    "i18next": "^21.6.16",
     "immer": "^9.0.6",
-    "lodash.debounce": "^4.0.8",
-    "lodash.merge": "^4.6.2",
-    "lodash.pick": "^4.4.0",
+    "lodash": "^4.17.21",
     "md5": "^2.3.0",
+    "mime-types": "^2.1.35",
+    "path": "^0.12.7",
     "react": "17.0.2",
-    "react-native": "0.67.1",
+    "react-i18next": "^11.16.6",
+    "react-native": "0.67.4",
+    "react-native-blob-util": "https://github.com/austinried/react-native-blob-util.git#android-downloadmanager-progress",
     "react-native-fs": "^2.18.0",
     "react-native-gesture-handler": "^2.3.2",
-    "react-native-get-random-values": "^1.7.0",
     "react-native-image-colors": "^1.3.0",
     "react-native-linear-gradient": "^2.5.6",
+    "react-native-localize": "^2.2.1",
     "react-native-popup-menu": "^0.15.11",
     "react-native-reanimated": "^2.3.1",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.0",
     "react-native-tab-view": "^2.16.0",
-    "react-native-track-player": "https://github.com/austinried/react-native-track-player",
+    "react-native-track-player": "https://github.com/austinried/react-native-track-player#render-extensions",
+    "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^8.1.0",
     "react-native-webview": "^11.13.0",
-    "uuid": "^8.3.2",
+    "react-query": "^3.34.19",
     "zustand": "^3.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@types/content-disposition": "^0.5.4",
     "@types/jest": "^26.0.23",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.merge": "^4.6.6",
-    "@types/lodash.pick": "^4.4.6",
+    "@types/lodash": "^4.14.181",
     "@types/md5": "^2.3.0",
+    "@types/mime-types": "^2.1.1",
     "@types/react-native-vector-icons": "^6.4.7",
     "@types/react-test-renderer": "^16.9.2",
-    "@types/uuid": "^8.3.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.14.0",

yarn.lock

@@ -719,6 +719,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.14.5", "@babel/runtime@^7.17.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2":
+  version "7.17.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
+  integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.0.0", "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1117,10 +1131,10 @@
     "@babel/runtime" "^7.7.2"
     regenerator-runtime "^0.13.3"
 
-"@react-native-async-storage/async-storage@^1.15.5":
-  version "1.15.15"
-  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.15.15.tgz#33f930aaebc602199a3294a9b1eafff7b56df409"
-  integrity sha512-Ss2FqWP9HC5AhCyP6ydRERSwWb8QMTLknETB8cp2+tbEUhu7Q/S5+e0QIrF0D2Z/YZTUvQ2MP7uXzt9FLG9OYQ==
+"@react-native-async-storage/async-storage@1.16":
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.16.3.tgz#f52dc48469c3384d870d581d169e5486c2295701"
+  integrity sha512-yTjoTKTwI7yMi2IIlzauA7t1zoPLatEGqkvEtf4Z5p91qYp4o3M5Rdb9NiyQz7pwlTw8FqWawYPUz8nlQ2z06Q==
   dependencies:
     merge-options "^3.0.4"
 
@@ -1431,6 +1445,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/content-disposition@^0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@types/content-disposition/-/content-disposition-0.5.4.tgz#de48cf01c79c9f1560bcfd8ae43217ab028657f8"
+  integrity sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -1485,28 +1504,12 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
-"@types/lodash.debounce@^4.0.6":
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
-  integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
-  dependencies:
-    "@types/lodash" "*"
+"@types/lodash@^4.14.181":
+  version "4.14.181"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.181.tgz#d1d3740c379fda17ab175165ba04e2d03389385d"
+  integrity sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==
 
-"@types/lodash.merge@^4.6.6":
-  version "4.6.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.merge/-/lodash.merge-4.6.6.tgz#b84b403c1d31bc42d51772d1cd5557fa008cd3d6"
-  integrity sha512-IB90krzMf7YpfgP3u/EvZEdXVvm4e3gJbUvh5ieuI+o+XqiNEt6fCzqNRaiLlPVScLI59RxIGZMQ3+Ko/DJ8vQ==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash.pick@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.pick/-/lodash.pick-4.4.6.tgz#ae4e8f109e982786313bb6aac4b1a73aefa6e9be"
-  integrity sha512-u8bzA16qQ+8dY280z3aK7PoWb3fzX5ATJ0rJB6F+uqchOX2VYF02Aqa+8aYiHiHgPzQiITqCgeimlyKFy4OA6g==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*", "@types/lodash@^4.14.53":
+"@types/lodash@^4.14.53":
   version "4.14.178"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
   integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
@@ -1518,6 +1521,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/mime-types@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.1.tgz#d9ba43490fa3a3df958759adf69396c3532cf2c1"
+  integrity sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==
+
 "@types/node@*":
   version "17.0.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab"
@@ -1584,11 +1592,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/uuid@^8.3.0":
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
-  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
-
 "@types/yargs-parser@*":
   version "20.2.1"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
@@ -1924,9 +1927,9 @@ async-limiter@~1.0.0:
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
 async@^2.4.0:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -2103,7 +2106,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base-64@^0.1.0:
+base-64@0.1.0, base-64@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
   integrity sha1-eAqZyE59YAJgNhURxId2E78k9rs=
@@ -2126,7 +2129,7 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
-big-integer@1.6.x:
+big-integer@1.6.x, big-integer@^1.6.16:
   version "1.6.51"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
@@ -2181,6 +2184,20 @@ braces@^3.0.1:
   dependencies:
     fill-range "^7.0.1"
 
+broadcast-channel@^3.4.1:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
+  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    detect-node "^2.1.0"
+    js-sha3 "0.8.0"
+    microseconds "0.2.0"
+    nano-time "1.0.0"
+    oblivious-set "1.0.0"
+    rimraf "3.0.2"
+    unload "2.2.0"
+
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -2522,6 +2539,13 @@ connect@^3.6.5:
     parseurl "~1.3.3"
     utils-merge "1.0.1"
 
+content-disposition@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
 convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -2723,6 +2747,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node@^2.0.4, detect-node@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
@@ -3185,11 +3214,6 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-fast-base64-decode@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz#b434a0dd7d92b12b43f26819300d2dafb83ee418"
-  integrity sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q==
-
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -3597,11 +3621,18 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
-html-escaper@^2.0.0:
+html-escaper@^2.0.0, html-escaper@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 http-errors@1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
@@ -3635,6 +3666,13 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+i18next@^21.6.16:
+  version "21.6.16"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.6.16.tgz#8cff8c3ba2ffaf8438a8c83fe284083f15cf3941"
+  integrity sha512-xJlzrVxG9CyAGsbMP1aKuiNr1Ed2m36KiTB7hjGMG2Zo4idfw3p9THUEu+GjBwIgEZ7F11ZbCzJcfv4uyfKNuw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -3714,6 +3752,11 @@ inherits@2, inherits@2.0.4, inherits@~2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -4466,6 +4509,11 @@ jpeg-js@0.4.2:
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
   integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -4841,6 +4889,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-sorter@^6.0.2:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
+  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 md5@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
@@ -5200,11 +5256,21 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+microseconds@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
+  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
+
 mime-db@1.51.0, "mime-db@>= 1.43.0 < 2":
   version "1.51.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
   integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
 mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.24:
   version "2.1.34"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
@@ -5212,6 +5278,13 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.24:
   dependencies:
     mime-db "1.51.0"
 
+mime-types@^2.1.35:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mime@1.6.0, mime@^1.3.4:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -5286,6 +5359,13 @@ ms@2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+nano-time@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
+  integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=
+  dependencies:
+    big-integer "^1.6.16"
+
 nanoid@^3.1.15:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
@@ -5521,6 +5601,11 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+oblivious-set@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
+  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
+
 omggif@^1.0.10, omggif@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
@@ -5746,6 +5831,14 @@ path-parse@^1.0.6, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 phin@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
@@ -5854,7 +5947,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -5944,6 +6037,15 @@ react-freeze@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.0.tgz#b21c65fe1783743007c8c9a2952b1c8879a77354"
   integrity sha512-yQaiOqDmoKqks56LN9MTgY06O0qQHgV4FUrikH357DydArSZHQhl0BJFqGKIZoTqi8JizF9Dxhuk1FIZD6qCaw==
 
+react-i18next@^11.16.6:
+  version "11.16.6"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.16.6.tgz#e8a07802c391a55e1528673201a2727994787641"
+  integrity sha512-qa76GnvAPafNSxKNN/XMhdCkVN/9Lm+BpzW5+6FE2ctYUemhbglP7oklGmYiJXlG24p9itqzlJDbCi3SNd3jzA==
+  dependencies:
+    "@babel/runtime" "^7.14.5"
+    html-escaper "^2.0.2"
+    html-parse-stringify "^3.0.1"
+
 "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -5954,6 +6056,13 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+"react-native-blob-util@https://github.com/austinried/react-native-blob-util.git#android-downloadmanager-progress":
+  version "0.15.0"
+  resolved "https://github.com/austinried/react-native-blob-util.git#aa7a1a2b9653272914d0c8ce8ee2f38428ae3948"
+  dependencies:
+    base-64 "0.1.0"
+    glob "^7.1.6"
+
 react-native-codegen@^0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.8.tgz#b7796a54074139d956fff2862cf1285db43c891b"
@@ -5964,9 +6073,9 @@ react-native-codegen@^0.0.8:
     nullthrows "^1.1.1"
 
 react-native-fs@^2.18.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.18.0.tgz#987b99cc90518ef26663a8d60e62104694b41c21"
-  integrity sha512-9iQhkUNnN2JNED0in06JwZy88YEVyIGKWz4KLlQYxa5Y2U0U2AZh9FUHtA04oWj+xt2LlHh0LFPCzhmNsAsUDg==
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.19.0.tgz#5747eb52a5a3d2b31c8fb76f5f8044d0a855122c"
+  integrity sha512-Yl09IbETkV5UJcBtVtBLttyTmiAhJIHpGA/LvredI5dYiw3MXMMVu42bzELiuH2Bwj7F+qd0fMNvgfBDiDxd2A==
   dependencies:
     base-64 "^0.1.0"
     utf8 "^3.0.0"
@@ -5982,13 +6091,6 @@ react-native-gesture-handler@^2.3.2:
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
-react-native-get-random-values@^1.7.0:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.7.2.tgz#60a9b6497d22e713779b71139f016a5fcec7ac04"
-  integrity sha512-28KRYGpIG/upV8+k/qFA+TwGW+yGjmtOHaCduJHpOQK1QUTyhiA6E2IgL4UvvU2dybeCTYFmUi9wcEQ0GiWe5g==
-  dependencies:
-    fast-base64-decode "^1.0.0"
-
 react-native-image-colors@^1.3.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/react-native-image-colors/-/react-native-image-colors-1.5.0.tgz#42af81feb1c0654c8e4bad0d03bd9315c0b6a128"
@@ -6006,6 +6108,11 @@ react-native-linear-gradient@^2.5.6:
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
   integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==
 
+react-native-localize@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-2.2.1.tgz#6fe646833691c6ee8a474df3c8b069402cb1dba8"
+  integrity sha512-BuPaQWvxLZG1NrCDGqgAnecDrNQu3LED9/Pyl4H2LwTMHcEngXpE5PfVntW2GiLumdr6nUOkWmMnh8PynZqrsw==
+
 react-native-popup-menu@^0.15.11:
   version "0.15.12"
   resolved "https://registry.yarnpkg.com/react-native-popup-menu/-/react-native-popup-menu-0.15.12.tgz#386852f4245f8d661a5003776989b9b55c9ce381"
@@ -6042,9 +6149,14 @@ react-native-tab-view@^2.16.0:
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
   integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
 
-"react-native-track-player@https://github.com/austinried/react-native-track-player":
-  version "2.0.3"
-  resolved "https://github.com/austinried/react-native-track-player#24cbbb4a4065ade9a38d2bcdeffa5b6a2f5c3d13"
+"react-native-track-player@https://github.com/austinried/react-native-track-player#render-extensions":
+  version "2.1.3"
+  resolved "https://github.com/austinried/react-native-track-player#46d2025d98b5e80ce8a3c5c3a4adee39fdd358c7"
+
+react-native-uuid@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-uuid/-/react-native-uuid-2.0.1.tgz#ed4e2dfb1683eddb66967eb5dca140dfe1abddb9"
+  integrity sha512-cptnoIbL53GTCrWlb/+jrDC6tvb7ypIyzbXNJcpR3Vab0mkeaaVd5qnB3f0whXYzS+SMoSQLcUUB0gEWqkPC0g==
 
 react-native-vector-icons@^8.1.0:
   version "8.1.0"
@@ -6068,10 +6180,10 @@ react-native-webview@^11.13.0:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"
 
-react-native@0.67.1:
-  version "0.67.1"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.67.1.tgz#a9cc13f1a691e9bb23f146f001e11fc0157af51c"
-  integrity sha512-doKN9qhtjilF+6p8603OVzqGKL4fq8EDAH5u00KPmZbL5ampHDQX9y8/uwlUvJggvHwZXlnvhW63u8Y1LA8rxw==
+react-native@0.67.4:
+  version "0.67.4"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.67.4.tgz#57a1503daa81f66a61f521ff67b259f126d87f9c"
+  integrity sha512-NA9d9lNJu9TViEJu2uZxWXUP+QNUilGGA5tdMbVFedNroOH1lnQ3n/FAVoGK1gqGarCgNTtheBxUpEa979Cu8w==
   dependencies:
     "@jest/create-cache-key-function" "^27.0.1"
     "@react-native-community/cli" "^6.0.0"
@@ -6104,6 +6216,15 @@ react-native@0.67.1:
     whatwg-fetch "^3.0.0"
     ws "^6.1.4"
 
+react-query@^3.34.19:
+  version "3.34.19"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.19.tgz#0ff049b6e0d2ed148e9abfdd346625d0e88dc229"
+  integrity sha512-JO0Ymi58WKmvnhgg6bGIrYIeKb64KsKaPWo8JcGnmK2jJxAs2XmMBzlP75ZepSU7CHzcsWtIIyhMrLbX3pb/3w==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    broadcast-channel "^3.4.1"
+    match-sorter "^6.0.2"
+
 react-refresh@^0.4.0:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
@@ -6251,6 +6372,11 @@ regjsparser@^0.7.0:
   dependencies:
     jsesc "~0.5.0"
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6343,6 +6469,13 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^2.5.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -6350,13 +6483,6 @@ rimraf@^2.5.4:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@~2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
@@ -6379,6 +6505,11 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -7168,6 +7299,14 @@ universalify@^0.1.0, universalify@^0.1.2:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+unload@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
+  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "^2.0.4"
+
 unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -7235,6 +7374,13 @@ util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -7245,7 +7391,7 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0, uuid@^8.3.2:
+uuid@^8.3.0:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
@@ -7282,6 +7428,11 @@ vlq@^1.0.0:
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468"
   integrity sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==
 
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"