Release build 15

Polish search engine UX
Add track results to search queries
2021-04-24 23:18:01 +02:00 · 2021-04-24 15:30:07 +02:00 · 2021-04-24 14:50:43 +02:00 · 2021-04-24 12:21:02 +02:00 · 2021-04-24 12:18:56 +02:00 · 2021-04-03 15:19:38 +02:00
73 changed files with 3480 additions and 3492 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,7 +8,7 @@ module.exports = {
        'plugin:react/recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:react-hooks/recommended',
-        // "plugin:@typescript-eslint/recommended"
+        // 'plugin:@typescript-eslint/recommended'
    ],
    globals: {
        Atomics: 'readonly',
@@ -28,14 +28,15 @@ module.exports = {
        'react-hooks'
    ],
    rules: {
-        indent: [
+        indent: 'off',
+        '@typescript-eslint/indent': [
            'error',
            4,
            {
                SwitchCase: 1,
            }
        ],
-        "linebreak-style": [
+        'linebreak-style': [
            'error',
            'unix'
        ],
@@ -47,10 +48,10 @@ module.exports = {
            'error',
            'always'
        ],
-        "no-unused-vars": "off",
-        "react/prop-types": "off",
-        "@typescript-eslint/no-unused-vars": [
-          "error"
+        'no-unused-vars': 'off',
+        'react/prop-types': 'off',
+        '@typescript-eslint/no-unused-vars': [
+            'error'
        ]
    }
 };
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1,3 @@
-*.pbxproj -text
+# Windows files should use crlf line endings
+# https://help.github.com/articles/dealing-with-line-endings/
+*.bat text eol=crlf
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -6,21 +6,21 @@ GEM
      public_suffix (>= 2.0.2, < 5.0)
    artifactory (3.0.15)
    atomos (0.1.3)
-    aws-eventstream (1.1.0)
-    aws-partitions (1.421.0)
-    aws-sdk-core (3.111.2)
+    aws-eventstream (1.1.1)
+    aws-partitions (1.447.0)
+    aws-sdk-core (3.114.0)
      aws-eventstream (~> 1, >= 1.0.2)
      aws-partitions (~> 1, >= 1.239.0)
      aws-sigv4 (~> 1.1)
      jmespath (~> 1.0)
-    aws-sdk-kms (1.41.0)
-      aws-sdk-core (~> 3, >= 3.109.0)
+    aws-sdk-kms (1.43.0)
+      aws-sdk-core (~> 3, >= 3.112.0)
      aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.87.0)
-      aws-sdk-core (~> 3, >= 3.109.0)
+    aws-sdk-s3 (1.93.1)
+      aws-sdk-core (~> 3, >= 3.112.0)
      aws-sdk-kms (~> 1)
      aws-sigv4 (~> 1.1)
-    aws-sigv4 (1.2.2)
+    aws-sigv4 (1.2.3)
      aws-eventstream (~> 1, >= 1.0.2)
    babosa (1.0.4)
    claide (1.0.3)
@@ -29,26 +29,29 @@ GEM
    commander-fastlane (4.4.6)
      highline (~> 1.7.2)
    declarative (0.0.20)
-    declarative-option (0.1.0)
    digest-crc (0.6.3)
      rake (>= 12.0.0, < 14.0.0)
    domain_name (0.5.20190701)
      unf (>= 0.0.5, < 1.0.0)
    dotenv (2.7.6)
-    emoji_regex (3.2.1)
-    excon (0.78.1)
-    faraday (1.3.0)
+    emoji_regex (3.2.2)
+    excon (0.80.1)
+    faraday (1.4.1)
+      faraday-excon (~> 1.1)
      faraday-net_http (~> 1.0)
+      faraday-net_http_persistent (~> 1.1)
      multipart-post (>= 1.2, < 3)
-      ruby2_keywords
+      ruby2_keywords (>= 0.0.4)
    faraday-cookie_jar (0.0.7)
      faraday (>= 0.8.0)
      http-cookie (~> 1.0.0)
+    faraday-excon (1.1.0)
    faraday-net_http (1.0.1)
+    faraday-net_http_persistent (1.1.0)
    faraday_middleware (1.0.0)
      faraday (~> 1.0)
-    fastimage (2.2.1)
-    fastlane (2.172.0)
+    fastimage (2.2.3)
+    fastlane (2.181.0)
      CFPropertyList (>= 2.3, < 4.0.0)
      addressable (>= 2.3, < 3.0.0)
      artifactory (~> 3.0)
@@ -72,6 +75,7 @@ GEM
      jwt (>= 2.1.0, < 3)
      mini_magick (>= 4.9.4, < 5.0.0)
      multipart-post (~> 2.0.0)
+      naturally (~> 2.2)
      plist (>= 3.1.0, < 4.0.0)
      rubyzip (>= 2.0.0, < 3.0.0)
      security (= 0.1.3)
@@ -85,7 +89,7 @@ GEM
      xcodeproj (>= 1.13.0, < 2.0.0)
      xcpretty (~> 0.3.0)
      xcpretty-travis-formatter (>= 0.0.3)
-    fastlane-plugin-sentry (1.8.0)
+    fastlane-plugin-sentry (1.8.1)
    gh_inspector (1.1.3)
    google-api-client (0.38.0)
      addressable (~> 2.5, >= 2.5.1)
@@ -95,7 +99,7 @@ GEM
      representable (~> 3.0)
      retriable (>= 2.0, < 4.0)
      signet (~> 0.12)
-    google-apis-core (0.2.1)
+    google-apis-core (0.3.0)
      addressable (~> 2.5, >= 2.5.1)
      googleauth (~> 0.14)
      httpclient (>= 2.8.1, < 3.0)
@@ -105,17 +109,17 @@ GEM
      rexml
      signet (~> 0.14)
      webrick
-    google-apis-iamcredentials_v1 (0.1.0)
+    google-apis-iamcredentials_v1 (0.3.0)
      google-apis-core (~> 0.1)
-    google-apis-storage_v1 (0.1.0)
+    google-apis-storage_v1 (0.3.0)
      google-apis-core (~> 0.1)
-    google-cloud-core (1.5.0)
+    google-cloud-core (1.6.0)
      google-cloud-env (~> 1.0)
      google-cloud-errors (~> 1.0)
-    google-cloud-env (1.4.0)
+    google-cloud-env (1.5.0)
      faraday (>= 0.17.3, < 2.0)
-    google-cloud-errors (1.0.1)
-    google-cloud-storage (1.30.0)
+    google-cloud-errors (1.1.0)
+    google-cloud-storage (1.31.0)
      addressable (~> 2.5)
      digest-crc (~> 0.4)
      google-apis-iamcredentials_v1 (~> 0.1)
@@ -123,7 +127,7 @@ GEM
      google-cloud-core (~> 1.2)
      googleauth (~> 0.9)
      mini_mime (~> 1.0)
-    googleauth (0.15.0)
+    googleauth (0.16.1)
      faraday (>= 0.17.3, < 2.0)
      jwt (>= 1.4, < 3.0)
      memoist (~> 0.16)
@@ -136,10 +140,10 @@ GEM
    httpclient (2.8.3)
    jmespath (1.4.0)
    json (2.5.1)
-    jwt (2.2.2)
+    jwt (2.2.3)
    memoist (0.16.2)
    mini_magick (4.11.0)
-    mini_mime (1.0.2)
+    mini_mime (1.1.0)
    multi_json (1.15.0)
    multipart-post (2.0.0)
    nanaimo (0.3.0)
@@ -148,17 +152,17 @@ GEM
    plist (3.6.0)
    public_suffix (4.0.6)
    rake (13.0.3)
-    representable (3.0.4)
+    representable (3.1.1)
      declarative (< 0.1.0)
-      declarative-option (< 0.2.0)
+      trailblazer-option (>= 0.1.1, < 0.2.0)
      uber (< 0.2.0)
    retriable (3.1.2)
-    rexml (3.2.4)
+    rexml (3.2.5)
    rouge (2.0.7)
    ruby2_keywords (0.0.4)
    rubyzip (2.3.0)
    security (0.1.3)
-    signet (0.14.1)
+    signet (0.15.0)
      addressable (~> 2.3)
      faraday (>= 0.17.3, < 2.0)
      jwt (>= 1.5, < 3.0)
@@ -170,6 +174,7 @@ GEM
    terminal-notifier (2.0.0)
    terminal-table (1.8.0)
      unicode-display_width (~> 1.1, >= 1.1.1)
+    trailblazer-option (0.1.1)
    tty-cursor (0.7.1)
    tty-screen (0.8.1)
    tty-spinner (0.9.3)
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -123,6 +123,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 def enableHermes = project.ext.react.get("enableHermes", false);

 android {
+    ndkVersion rootProject.ext.ndkVersion
+
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
@@ -172,11 +174,12 @@ android {
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
--- a/android/app/src/debug/AndroidManifest.xml
+++ b/android/app/src/debug/AndroidManifest.xml
@@ -4,5 +4,10 @@

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -22,7 +22,5 @@
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
-
 </manifest>
--- a/android/app/src/main/java/com/jellyfinaudioplayer/MainActivity.java
+++ b/android/app/src/main/java/com/jellyfinaudioplayer/MainActivity.java
@@ -1,6 +1,7 @@
 package com.jellyfinaudioplayer;

 import com.facebook.react.ReactActivity;
+import android.os.Bundle;

 public class MainActivity extends ReactActivity {

@@ -12,4 +13,9 @@ public class MainActivity extends ReactActivity {
  protected String getMainComponentName() {
    return "JellyfinAudioPlayer";
  }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
 }
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -2,17 +2,18 @@

 buildscript {
    ext {
-        buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
-        compileSdkVersion = 28
-        targetSdkVersion = 28
+        buildToolsVersion = "29.0.3"
+        minSdkVersion = 21
+        compileSdkVersion = 29
+        targetSdkVersion = 29
+        ndkVersion = "20.1.5948944"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
-        classpath("com.android.tools.build:gradle:3.5.2")
+        classpath("com.android.tools.build:gradle:4.1.0")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -25,4 +25,4 @@ android.useAndroidX=true
 android.enableJetifier=true

 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.54.0
+FLIPPER_VERSION=0.75.1
--- a/android/gradlew
+++ b/android/gradlew
@@ -82,6 +82,7 @@ esac

 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar

+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -129,6 +130,7 @@ fi
 if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
    JAVACMD=`cygpath --unix "$JAVACMD"`

    # We build the pattern for arguments to be converted via cygpath
--- a/index.js
+++ b/index.js
@@ -4,14 +4,10 @@ import TrackPlayer from 'react-native-track-player';
 import App from './src/components/App';
 import { name as appName } from './app.json';
 import PlaybackService from './src/utility/PlaybackService';
-import * as Sentry from '@sentry/react-native';
-import { SENTRY_DSN } from '@env';
-
-if (SENTRY_DSN) {
-    Sentry.init({
-        dsn: SENTRY_DSN
-    });
-}
+import { setupSentry } from 'utility/Sentry';
+import { enableScreens } from 'react-native-screens';

+setupSentry();
+enableScreens();
 AppRegistry.registerComponent(appName, () => App);
 TrackPlayer.registerPlaybackService(() => PlaybackService);
--- a/ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj
+++ b/ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj
@@ -179,6 +179,7 @@
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
 				BDE784ECF29EF861DBFF49D7 /* [CP] Copy Pods Resources */,
+				476A07969B11CA4E09819AC0 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -202,6 +203,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				B9FB8FC65CEFF9AFAC71127E /* [CP] Copy Pods Resources */,
 				1DC46C84C90B4D84A18AC142 /* Upload Debug Symbols to Sentry */,
+				E8FF56077B675D4D92D5CC25 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -303,6 +305,24 @@
 			shellPath = /bin/sh;
 			shellScript = "export SENTRY_PROPERTIES=sentry.properties\n../node_modules/@sentry/cli/bin/sentry-cli upload-dsym";
 		};
+		476A07969B11CA4E09819AC0 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		B9FB8FC65CEFF9AFAC71127E /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -383,6 +403,24 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		E8FF56077B675D4D92D5CC25 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -504,7 +542,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 7;
+				CURRENT_PROJECT_VERSION = 15;
 				DEVELOPMENT_TEAM = 238P3C58WC;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -535,7 +573,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 7;
+				CURRENT_PROJECT_VERSION = 15;
 				DEVELOPMENT_TEAM = 238P3C58WC;
 				INFOPLIST_FILE = JellyfinAudioPlayer/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
--- a/ios/JellyfinAudioPlayer/Info.plist
+++ b/ios/JellyfinAudioPlayer/Info.plist
@@ -21,13 +21,11 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>7</string>
+	<string>15</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-		<key>NSAllowsArbitraryLoads</key>
-		<true/>
 		<key>NSExceptionDomains</key>
 		<dict>
 			<key>localhost</key>
--- a/ios/JellyfinAudioPlayerTests/Info.plist
+++ b/ios/JellyfinAudioPlayerTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>7</string>
+	<string>15</string>
 </dict>
 </plist>
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1,72 +1,63 @@
 PODS:
  - boost-for-react-native (1.63.0)
-  - CocoaAsyncSocket (7.6.4)
-  - CocoaLibEvent (1.0.0)
+  - CocoaAsyncSocket (7.6.5)
  - DoubleConversion (1.1.6)
-  - FBLazyVector (0.63.4)
-  - FBReactNativeSpec (0.63.4):
-    - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.4)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - Flipper (0.54.0):
-    - Flipper-Folly (~> 2.2)
-    - Flipper-RSocket (~> 1.1)
+  - FBLazyVector (0.64.0)
+  - FBReactNativeSpec (0.64.0):
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.64.0)
+    - RCTTypeSafety (= 0.64.0)
+    - React-Core (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - Flipper (0.75.1):
+    - Flipper-Folly (~> 2.5)
+    - Flipper-RSocket (~> 1.3)
  - Flipper-DoubleConversion (1.1.7)
-  - Flipper-Folly (2.3.0):
+  - Flipper-Folly (2.5.1):
    - boost-for-react-native
-    - CocoaLibEvent (~> 1.0)
    - Flipper-DoubleConversion
    - Flipper-Glog
-    - OpenSSL-Universal (= 1.0.2.20)
+    - libevent (~> 2.1.12)
+    - OpenSSL-Universal (= 1.1.180)
  - Flipper-Glog (0.3.6)
  - Flipper-PeerTalk (0.0.4)
-  - Flipper-RSocket (1.1.0):
-    - Flipper-Folly (~> 2.2)
-  - FlipperKit (0.54.0):
-    - FlipperKit/Core (= 0.54.0)
-  - FlipperKit/Core (0.54.0):
-    - Flipper (~> 0.54.0)
+  - Flipper-RSocket (1.3.0):
+    - Flipper-Folly (~> 2.5)
+  - FlipperKit (0.75.1):
+    - FlipperKit/Core (= 0.75.1)
+  - FlipperKit/Core (0.75.1):
+    - Flipper (~> 0.75.1)
    - FlipperKit/CppBridge
    - FlipperKit/FBCxxFollyDynamicConvert
    - FlipperKit/FBDefines
    - FlipperKit/FKPortForwarding
-  - FlipperKit/CppBridge (0.54.0):
-    - Flipper (~> 0.54.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (0.54.0):
-    - Flipper-Folly (~> 2.2)
-  - FlipperKit/FBDefines (0.54.0)
-  - FlipperKit/FKPortForwarding (0.54.0):
+  - FlipperKit/CppBridge (0.75.1):
+    - Flipper (~> 0.75.1)
+  - FlipperKit/FBCxxFollyDynamicConvert (0.75.1):
+    - Flipper-Folly (~> 2.5)
+  - FlipperKit/FBDefines (0.75.1)
+  - FlipperKit/FKPortForwarding (0.75.1):
    - CocoaAsyncSocket (~> 7.6)
    - Flipper-PeerTalk (~> 0.0.4)
-  - FlipperKit/FlipperKitHighlightOverlay (0.54.0)
-  - FlipperKit/FlipperKitLayoutPlugin (0.54.0):
+  - FlipperKit/FlipperKitHighlightOverlay (0.75.1)
+  - FlipperKit/FlipperKitLayoutPlugin (0.75.1):
    - FlipperKit/Core
    - FlipperKit/FlipperKitHighlightOverlay
    - FlipperKit/FlipperKitLayoutTextSearchable
    - YogaKit (~> 1.18)
-  - FlipperKit/FlipperKitLayoutTextSearchable (0.54.0)
-  - FlipperKit/FlipperKitNetworkPlugin (0.54.0):
+  - FlipperKit/FlipperKitLayoutTextSearchable (0.75.1)
+  - FlipperKit/FlipperKitNetworkPlugin (0.75.1):
    - FlipperKit/Core
-  - FlipperKit/FlipperKitReactPlugin (0.54.0):
+  - FlipperKit/FlipperKitReactPlugin (0.75.1):
    - FlipperKit/Core
-  - FlipperKit/FlipperKitUserDefaultsPlugin (0.54.0):
+  - FlipperKit/FlipperKitUserDefaultsPlugin (0.75.1):
    - FlipperKit/Core
-  - FlipperKit/SKIOSNetworkPlugin (0.54.0):
+  - FlipperKit/SKIOSNetworkPlugin (0.75.1):
    - FlipperKit/Core
    - FlipperKit/FlipperKitNetworkPlugin
-  - Folly (2020.01.13.00):
-    - boost-for-react-native
-    - DoubleConversion
-    - Folly/Default (= 2020.01.13.00)
-    - glog
-  - Folly/Default (2020.01.13.00):
-    - boost-for-react-native
-    - DoubleConversion
-    - glog
  - glog (0.3.5)
+  - libevent (2.1.12)
  - libwebp (1.1.0):
    - libwebp/demux (= 1.1.0)
    - libwebp/mux (= 1.1.0)
@@ -76,245 +67,274 @@ PODS:
  - libwebp/mux (1.1.0):
    - libwebp/demux
  - libwebp/webp (1.1.0)
-  - OpenSSL-Universal (1.0.2.20):
-    - OpenSSL-Universal/Static (= 1.0.2.20)
-  - OpenSSL-Universal/Static (1.0.2.20)
-  - RCTRequired (0.63.4)
-  - RCTTypeSafety (0.63.4):
-    - FBLazyVector (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.4)
-    - React-Core (= 0.63.4)
-  - React (0.63.4):
-    - React-Core (= 0.63.4)
-    - React-Core/DevSupport (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-RCTActionSheet (= 0.63.4)
-    - React-RCTAnimation (= 0.63.4)
-    - React-RCTBlob (= 0.63.4)
-    - React-RCTImage (= 0.63.4)
-    - React-RCTLinking (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - React-RCTSettings (= 0.63.4)
-    - React-RCTText (= 0.63.4)
-    - React-RCTVibration (= 0.63.4)
-  - React-callinvoker (0.63.4)
-  - React-Core (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - OpenSSL-Universal (1.1.180)
+  - RCT-Folly (2020.01.13.00):
+    - boost-for-react-native
+    - DoubleConversion
    - glog
-    - React-Core/Default (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - RCT-Folly/Default (= 2020.01.13.00)
+  - RCT-Folly/Default (2020.01.13.00):
+    - boost-for-react-native
+    - DoubleConversion
+    - glog
+  - RCTRequired (0.64.0)
+  - RCTTypeSafety (0.64.0):
+    - FBLazyVector (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.64.0)
+    - React-Core (= 0.64.0)
+  - React (0.64.0):
+    - React-Core (= 0.64.0)
+    - React-Core/DevSupport (= 0.64.0)
+    - React-Core/RCTWebSocket (= 0.64.0)
+    - React-RCTActionSheet (= 0.64.0)
+    - React-RCTAnimation (= 0.64.0)
+    - React-RCTBlob (= 0.64.0)
+    - React-RCTImage (= 0.64.0)
+    - React-RCTLinking (= 0.64.0)
+    - React-RCTNetwork (= 0.64.0)
+    - React-RCTSettings (= 0.64.0)
+    - React-RCTText (= 0.64.0)
+    - React-RCTVibration (= 0.64.0)
+  - React-callinvoker (0.64.0)
+  - React-Core (0.64.0):
+    - glog
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/Default (= 0.64.0)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/CoreModulesHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/CoreModulesHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/Default (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/Default (0.64.0):
    - glog
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/DevSupport (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/DevSupport (0.64.0):
    - glog
-    - React-Core/Default (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
-    - React-jsinspector (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/Default (= 0.64.0)
+    - React-Core/RCTWebSocket (= 0.64.0)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-jsinspector (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTActionSheetHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTActionSheetHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTAnimationHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTAnimationHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTBlobHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTBlobHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTImageHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTImageHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTLinkingHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTLinkingHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTNetworkHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTNetworkHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTSettingsHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTSettingsHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTTextHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTTextHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTVibrationHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTVibrationHeaders (0.64.0):
    - glog
+    - RCT-Folly (= 2020.01.13.00)
    - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-Core/RCTWebSocket (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTWebSocket (0.64.0):
    - glog
-    - React-Core/Default (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/Default (= 0.64.0)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsiexecutor (= 0.64.0)
+    - React-perflogger (= 0.64.0)
    - Yoga
-  - React-CoreModules (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/CoreModulesHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTImage (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-cxxreact (0.63.4):
+  - React-CoreModules (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.0)
+    - React-Core/CoreModulesHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-RCTImage (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-cxxreact (0.64.0):
    - boost-for-react-native (= 1.63.0)
    - DoubleConversion
-    - Folly (= 2020.01.13.00)
    - glog
-    - React-callinvoker (= 0.63.4)
-    - React-jsinspector (= 0.63.4)
-  - React-jsi (0.63.4):
+    - RCT-Folly (= 2020.01.13.00)
+    - React-callinvoker (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-jsinspector (= 0.64.0)
+    - React-perflogger (= 0.64.0)
+    - React-runtimeexecutor (= 0.64.0)
+  - React-jsi (0.64.0):
    - boost-for-react-native (= 1.63.0)
    - DoubleConversion
-    - Folly (= 2020.01.13.00)
    - glog
-    - React-jsi/Default (= 0.63.4)
-  - React-jsi/Default (0.63.4):
+    - RCT-Folly (= 2020.01.13.00)
+    - React-jsi/Default (= 0.64.0)
+  - React-jsi/Default (0.64.0):
    - boost-for-react-native (= 1.63.0)
    - DoubleConversion
-    - Folly (= 2020.01.13.00)
    - glog
-  - React-jsiexecutor (0.63.4):
+    - RCT-Folly (= 2020.01.13.00)
+  - React-jsiexecutor (0.64.0):
    - DoubleConversion
-    - Folly (= 2020.01.13.00)
    - glog
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-  - React-jsinspector (0.63.4)
-  - react-native-appearance (0.3.4):
-    - React
-  - react-native-safe-area-context (3.1.9):
+    - RCT-Folly (= 2020.01.13.00)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-perflogger (= 0.64.0)
+  - React-jsinspector (0.64.0)
+  - react-native-airplay-button (1.0.4):
+    - React-Core
+  - react-native-safe-area-context (3.2.0):
    - React-Core
  - react-native-slider (3.0.3):
    - React
-  - react-native-track-player (1.2.3):
-    - React
-  - react-native-webview (11.2.1):
+  - react-native-track-player (1.2.7):
    - React-Core
-  - React-RCTActionSheet (0.63.4):
-    - React-Core/RCTActionSheetHeaders (= 0.63.4)
-  - React-RCTAnimation (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTAnimationHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTBlob (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - React-Core/RCTBlobHeaders (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTImage (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTImageHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTLinking (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - React-Core/RCTLinkingHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTNetwork (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTNetworkHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTSettings (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTSettingsHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTText (0.63.4):
-    - React-Core/RCTTextHeaders (= 0.63.4)
-  - React-RCTVibration (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - React-Core/RCTVibrationHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - ReactCommon/turbomodule/core (0.63.4):
+  - react-native-webview (11.4.2):
+    - React-Core
+  - React-perflogger (0.64.0)
+  - React-RCTActionSheet (0.64.0):
+    - React-Core/RCTActionSheetHeaders (= 0.64.0)
+  - React-RCTAnimation (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.0)
+    - React-Core/RCTAnimationHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-RCTBlob (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/RCTBlobHeaders (= 0.64.0)
+    - React-Core/RCTWebSocket (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-RCTNetwork (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-RCTImage (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.0)
+    - React-Core/RCTImageHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-RCTNetwork (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-RCTLinking (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - React-Core/RCTLinkingHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-RCTNetwork (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.0)
+    - React-Core/RCTNetworkHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-RCTSettings (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.0)
+    - React-Core/RCTSettingsHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-RCTText (0.64.0):
+    - React-Core/RCTTextHeaders (= 0.64.0)
+  - React-RCTVibration (0.64.0):
+    - FBReactNativeSpec (= 0.64.0)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/RCTVibrationHeaders (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - ReactCommon/turbomodule/core (= 0.64.0)
+  - React-runtimeexecutor (0.64.0):
+    - React-jsi (= 0.64.0)
+  - ReactCommon/turbomodule/core (0.64.0):
    - DoubleConversion
-    - Folly (= 2020.01.13.00)
    - glog
-    - React-callinvoker (= 0.63.4)
-    - React-Core (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-callinvoker (= 0.64.0)
+    - React-Core (= 0.64.0)
+    - React-cxxreact (= 0.64.0)
+    - React-jsi (= 0.64.0)
+    - React-perflogger (= 0.64.0)
  - RNCAsyncStorage (1.12.1):
    - React-Core
  - RNCMaskedView (0.1.10):
@@ -325,18 +345,45 @@ PODS:
    - React-Core
    - SDWebImage (~> 5.8)
    - SDWebImageWebPCoder (~> 0.6.1)
-  - RNGestureHandler (1.9.0):
+  - RNGestureHandler (1.10.3):
    - React-Core
-  - RNLocalize (2.0.1):
+  - RNLocalize (2.0.3):
    - React-Core
-  - RNReanimated (1.13.2):
+  - RNReanimated (2.1.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
    - React-Core
-  - RNScreens (2.17.1):
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - React-RCTVibration
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNScreens (3.1.1):
    - React-Core
-  - RNSentry (2.2.0):
+  - RNSentry (2.4.1):
    - React-Core
    - Sentry (= 6.1.4)
-  - RNSVG (12.1.0):
+  - RNSVG (12.1.1):
    - React
  - SDWebImage (5.10.4):
    - SDWebImage/Core (= 5.10.4)
@@ -354,28 +401,28 @@ PODS:
 DEPENDENCIES:
  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
-  - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
-  - Flipper (~> 0.54.0)
+  - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
+  - Flipper (~> 0.75.1)
  - Flipper-DoubleConversion (= 1.1.7)
-  - Flipper-Folly (~> 2.2)
+  - Flipper-Folly (~> 2.5)
  - Flipper-Glog (= 0.3.6)
  - Flipper-PeerTalk (~> 0.0.4)
-  - Flipper-RSocket (~> 1.1)
-  - FlipperKit (~> 0.54.0)
-  - FlipperKit/Core (~> 0.54.0)
-  - FlipperKit/CppBridge (~> 0.54.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (~> 0.54.0)
-  - FlipperKit/FBDefines (~> 0.54.0)
-  - FlipperKit/FKPortForwarding (~> 0.54.0)
-  - FlipperKit/FlipperKitHighlightOverlay (~> 0.54.0)
-  - FlipperKit/FlipperKitLayoutPlugin (~> 0.54.0)
-  - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.54.0)
-  - FlipperKit/FlipperKitNetworkPlugin (~> 0.54.0)
-  - FlipperKit/FlipperKitReactPlugin (~> 0.54.0)
-  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.54.0)
-  - FlipperKit/SKIOSNetworkPlugin (~> 0.54.0)
-  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - Flipper-RSocket (~> 1.3)
+  - FlipperKit (~> 0.75.1)
+  - FlipperKit/Core (~> 0.75.1)
+  - FlipperKit/CppBridge (~> 0.75.1)
+  - FlipperKit/FBCxxFollyDynamicConvert (~> 0.75.1)
+  - FlipperKit/FBDefines (~> 0.75.1)
+  - FlipperKit/FKPortForwarding (~> 0.75.1)
+  - FlipperKit/FlipperKitHighlightOverlay (~> 0.75.1)
+  - FlipperKit/FlipperKitLayoutPlugin (~> 0.75.1)
+  - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.75.1)
+  - FlipperKit/FlipperKitNetworkPlugin (~> 0.75.1)
+  - FlipperKit/FlipperKitReactPlugin (~> 0.75.1)
+  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.75.1)
+  - FlipperKit/SKIOSNetworkPlugin (~> 0.75.1)
  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
  - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
  - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
  - React (from `../node_modules/react-native/`)
@@ -388,11 +435,12 @@ DEPENDENCIES:
  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
-  - react-native-appearance (from `../node_modules/react-native-appearance`)
+  - react-native-airplay-button (from `../node_modules/react-native-airplay-button`)
  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
  - react-native-track-player (from `../node_modules/react-native-track-player`)
  - react-native-webview (from `../node_modules/react-native-webview`)
+  - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -402,6 +450,7 @@ DEPENDENCIES:
  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
+  - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
@@ -419,7 +468,6 @@ SPEC REPOS:
  trunk:
    - boost-for-react-native
    - CocoaAsyncSocket
-    - CocoaLibEvent
    - Flipper
    - Flipper-DoubleConversion
    - Flipper-Folly
@@ -427,6 +475,7 @@ SPEC REPOS:
    - Flipper-PeerTalk
    - Flipper-RSocket
    - FlipperKit
+    - libevent
    - libwebp
    - OpenSSL-Universal
    - SDWebImage
@@ -440,11 +489,11 @@ EXTERNAL SOURCES:
  FBLazyVector:
    :path: "../node_modules/react-native/Libraries/FBLazyVector"
  FBReactNativeSpec:
-    :path: "../node_modules/react-native/Libraries/FBReactNativeSpec"
-  Folly:
-    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
+    :path: "../node_modules/react-native/React/FBReactNativeSpec"
  glog:
    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  RCT-Folly:
+    :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
  RCTRequired:
    :path: "../node_modules/react-native/Libraries/RCTRequired"
  RCTTypeSafety:
@@ -465,8 +514,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
  React-jsinspector:
    :path: "../node_modules/react-native/ReactCommon/jsinspector"
-  react-native-appearance:
-    :path: "../node_modules/react-native-appearance"
+  react-native-airplay-button:
+    :path: "../node_modules/react-native-airplay-button"
  react-native-safe-area-context:
    :path: "../node_modules/react-native-safe-area-context"
  react-native-slider:
@@ -475,6 +524,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-track-player"
  react-native-webview:
    :path: "../node_modules/react-native-webview"
+  React-perflogger:
+    :path: "../node_modules/react-native/ReactCommon/reactperflogger"
  React-RCTActionSheet:
    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
  React-RCTAnimation:
@@ -493,6 +544,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/Libraries/Text"
  React-RCTVibration:
    :path: "../node_modules/react-native/Libraries/Vibration"
+  React-runtimeexecutor:
+    :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
  ReactCommon:
    :path: "../node_modules/react-native/ReactCommon"
  RNCAsyncStorage:
@@ -520,61 +573,63 @@ EXTERNAL SOURCES:

 SPEC CHECKSUMS:
  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
-  CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
-  FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
-  FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
-  Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365
+  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
+  FBReactNativeSpec: a9de79cf8f9e07689882cfd8d40269cf531a82e9
+  Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
  Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
-  Flipper-Folly: e4493b013c02d9347d5e0cb4d128680239f6c78a
+  Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489
  Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
  Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
-  Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
-  FlipperKit: ab353d41aea8aae2ea6daaf813e67496642f3d7d
-  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  Flipper-RSocket: 602921fee03edacf18f5d6f3d3594ba477f456e5
+  FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
  libwebp: 946cb3063cea9236285f7e9a8505d806d30e07f3
-  OpenSSL-Universal: ff34003318d5e1163e9529b08470708e389ffcdd
-  RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
-  RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
-  React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
-  React-callinvoker: c3f44dd3cb195b6aa46621fff95ded79d59043fe
-  React-Core: d3b2a1ac9a2c13c3bcde712d9281fc1c8a5b315b
-  React-CoreModules: 0581ff36cb797da0943d424f69e7098e43e9be60
-  React-cxxreact: c1480d4fda5720086c90df537ee7d285d4c57ac3
-  React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
-  React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
-  React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
-  react-native-appearance: fc2014516054585d531e07aa0b40ab0de1d2be85
-  react-native-safe-area-context: 86612d2c9a9e94e288319262d10b5f93f0b395f5
+  OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
+  RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
+  RCTRequired: 2f8cb5b7533219bf4218a045f92768129cf7050a
+  RCTTypeSafety: 512728b73549e72ad7330b92f3d42936f2a4de5b
+  React: 98eac01574128a790f0bbbafe2d1a8607291ac24
+  React-callinvoker: def3f7fae16192df68d9b69fd4bbb59092ee36bc
+  React-Core: 70a52aa5dbe9b83befae82038451a7df9fd54c5a
+  React-CoreModules: 052edef46117862e2570eb3a0f06d81c61d2c4b8
+  React-cxxreact: c1dc71b30653cfb4770efdafcbdc0ad6d388baab
+  React-jsi: 74341196d9547cbcbcfa4b3bbbf03af56431d5a1
+  React-jsiexecutor: 06a9c77b56902ae7ffcdd7a4905f664adc5d237b
+  React-jsinspector: 0ae35a37b20d5e031eb020a69cc5afdbd6406301
+  react-native-airplay-button: 6899e488bff6b4d87b33c1def54c919dad2e3803
+  react-native-safe-area-context: e471852c5ed67eea4b10c5d9d43c1cebae3b231d
  react-native-slider: b733e17fdd31186707146debf1f04b5d94aa1a93
-  react-native-track-player: ba2416753b58f3cdf9db5a07daa65876d659f925
-  react-native-webview: dbe6c1ad149740f0e2d84a963f1d3c3e77f2d99c
-  React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
-  React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
-  React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
-  React-RCTImage: c1b1f2d3f43a4a528c8946d6092384b5c880d2f0
-  React-RCTLinking: 35ae4ab9dc0410d1fcbdce4d7623194a27214fb2
-  React-RCTNetwork: 29ec2696f8d8cfff7331fac83d3e893c95ef43ae
-  React-RCTSettings: 60f0691bba2074ef394f95d4c2265ec284e0a46a
-  React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
-  React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
-  ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
+  react-native-track-player: 878d6c66e4ae3a69f6a534c57c6c34a42e9b033f
+  react-native-webview: 90ccc4add19f940dfe6c89d30659aed8134f234d
+  React-perflogger: 9c547d8f06b9bf00cb447f2b75e8d7f19b7e02af
+  React-RCTActionSheet: 3080b6e12e0e1a5b313c8c0050699b5c794a1b11
+  React-RCTAnimation: 3f96f21a497ae7dabf4d2f150ee43f906aaf516f
+  React-RCTBlob: 283b8e5025e7f954176bc48164f846909002f3ed
+  React-RCTImage: 5088a484faac78f2d877e1b79125d3bb1ea94a16
+  React-RCTLinking: 5e8fbb3e9a8bc2e4e3eb15b1eb8bda5fcac27b8c
+  React-RCTNetwork: 38ec277217b1e841d5e6a1fa78da65b9212ccb28
+  React-RCTSettings: 242d6e692108c3de4f3bb74b7586a8799e9ab070
+  React-RCTText: 8746736ac8eb5a4a74719aa695b7a236a93a83d2
+  React-RCTVibration: 0fd6b21751a33cb72fce1a4a33ab9678416d307a
+  React-runtimeexecutor: cad74a1eaa53ee6e7a3620231939d8fe2c6afcf0
+  ReactCommon: cfe2b7fd20e0dbd2d1185cd7d8f99633fbc5ff05
  RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9
  RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
  RNCPicker: 914b557e20b3b8317b084aca9ff4b4edb95f61e4
  RNFastImage: d4870d58f5936111c56218dbd7fcfc18e65b58ff
-  RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
-  RNLocalize: dcf0fdb332b37b0d24178e876a7ce4dbbc9c838d
-  RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
-  RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
-  RNSentry: 6aeba1adc242fd22a6826acae92f430697b47a9c
-  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
+  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNLocalize: 29e84ea169d3bca6c3b83584536c7f586a07fb98
+  RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad
+  RNScreens: bd1523c3bde7069b8e958e5a16e1fc7722ad0bdd
+  RNSentry: 824a6a0ec885428163fe6827aa08014f9962f223
+  RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
  SDWebImage: c666b97e1fa9c64b4909816a903322018f0a9c84
  SDWebImageWebPCoder: d0dac55073088d24b2ac1b191a71a8f8d0adac21
  Sentry: 9d055e2de30a77685e86b219acf02e59b82091fc
-  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
+  Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

 PODFILE CHECKSUM: d99c1202f98b3f7477b6a86c9226010b36143469
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,57 +16,60 @@
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/picker": "^1.8.1",
    "@react-native-community/slider": "^3.0.3",
-    "@react-navigation/bottom-tabs": "^5.11.7",
-    "@react-navigation/native": "^5.9.2",
-    "@react-navigation/stack": "^5.14.2",
-    "@reduxjs/toolkit": "^1.5.0",
-    "@sentry/react-native": "^2.2.0",
+    "@react-navigation/bottom-tabs": "^5.11.10",
+    "@react-navigation/native": "^5.9.4",
+    "@react-navigation/stack": "^5.14.4",
+    "@reduxjs/toolkit": "^1.5.1",
+    "@sentry/react-native": "^2.4.1",
    "@types/lodash": "^4.14.168",
-    "@types/redux-logger": "^3.0.8",
-    "@types/styled-components": "^5.1.7",
-    "date-fns": "^2.17.0",
+    "date-fns": "^2.21.1",
    "fuse.js": "^6.4.6",
    "i18n-js": "^3.8.0",
-    "lodash": "^4.17.20",
-    "react": "^17.0.1",
-    "react-native": "^0.63.4",
-    "react-native-appearance": "^0.3.4",
-    "react-native-dotenv": "^2.5.1",
+    "lodash": "^4.17.21",
+    "react": "17.0.1",
+    "react-native": "0.64.0",
+    "react-native-airplay-button": "^1.0.4",
+    "react-native-collapsible": "^1.5.3",
+    "react-native-dotenv": "^2.5.5",
    "react-native-fast-image": "^8.3.4",
-    "react-native-gesture-handler": "^1.9.0",
-    "react-native-localize": "^2.0.1",
-    "react-native-reanimated": "^1.13.2",
-    "react-native-safe-area-context": "^3.1.9",
-    "react-native-screens": "^2.17.1",
-    "react-native-svg": "^12.1.0",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-localize": "^2.0.3",
+    "react-native-reanimated": "^2.1.0",
+    "react-native-safe-area-context": "^3.2.0",
+    "react-native-screens": "^3.1.1",
+    "react-native-svg": "^12.1.1",
    "react-native-svg-transformer": "^0.14.3",
-    "react-native-track-player": "github:leinelissen/react-native-track-player",
-    "react-native-webview": "^11.2.1",
-    "react-redux": "^7.2.2",
+    "react-native-track-player": "^1.2.7",
+    "react-native-webview": "^11.4.2",
+    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.2.3"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/runtime": "^7.12.13",
+    "@babel/core": "^7.13.16",
+    "@babel/runtime": "^7.13.17",
    "@react-native-community/eslint-config": "^2.0.0",
+    "@sentry/cli": "^1.64.1",
    "@types/i18n-js": "^3.8.0",
-    "@types/jest": "^26.0.20",
-    "@types/react-native": "^0.63.48",
+    "@types/jest": "^26.0.22",
+    "@types/react-native": "^0.64.4",
    "@types/react-redux": "^7.1.16",
-    "@types/react-test-renderer": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.2",
-    "@typescript-eslint/parser": "^4.14.2",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/redux-logger": "^3.0.8",
+    "@types/styled-components": "^5.1.9",
+    "@types/styled-components-react-native": "^5.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^7.19.0",
+    "eslint": "^7.25.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.65.0",
-    "react-test-renderer": "^17.0.1",
-    "typescript": "^4.1.3"
+    "metro-react-native-babel-preset": "^0.65.2",
+    "react-test-renderer": "^17.0.2",
+    "typescript": "^4.2.4"
  },
  "jest": {
    "preset": "react-native",
--- a/src/assets/queue-append.svg
+++ b/src/assets/queue-append.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.39 84.08"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Regular-M"><path d="M3.66,0A3.62,3.62,0,0,0,0,3.66,3.67,3.67,0,0,0,3.66,7.37h91a3.75,3.75,0,0,0,3.76-3.71A3.71,3.71,0,0,0,94.63,0Zm0,25.54A3.67,3.67,0,0,0,0,29.25a3.62,3.62,0,0,0,3.66,3.66h91a3.71,3.71,0,0,0,3.76-3.66,3.75,3.75,0,0,0-3.76-3.71ZM.05,50.68v11c0,6.93,4.88,11.18,11.77,11.18h14.4V78c0,4,3.76,5.47,6.84,3l13.23-10.6a3.71,3.71,0,0,0,0-6L33.06,53.86c-3-2.35-6.84-.88-6.84,3v4.88H12.89A1.51,1.51,0,0,1,11.23,60V50.68c0-4-2.05-6.44-5.61-6.44S.05,46.73.05,50.68Zm61.18.44a3.69,3.69,0,0,0,0,7.38h33.4a3.69,3.69,0,1,0,0-7.38Zm0,25.59a3.69,3.69,0,0,0,0,7.37h33.4a3.69,3.69,0,1,0,0-7.37Z"/></g></g></g></svg>
--- a/src/assets/queue-prepend.svg
+++ b/src/assets/queue-prepend.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.39 84.08"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Regular-M"><path d="M61.23,7.37h33.4a3.72,3.72,0,0,0,3.76-3.71A3.71,3.71,0,0,0,94.63,0H61.23a3.62,3.62,0,0,0-3.66,3.66A3.64,3.64,0,0,0,61.23,7.37ZM.05,33.4c0,4,2,6.44,5.57,6.44s5.61-2.49,5.61-6.44V24.07a1.51,1.51,0,0,1,1.66-1.71H26.22v4.89c0,3.85,3.86,5.32,6.84,3L46.29,19.68a3.71,3.71,0,0,0,0-6L33.06,3.12c-3.08-2.49-6.84-1-6.84,3v5.08H11.82C4.93,11.18.05,15.43.05,22.36ZM61.23,33h33.4a3.69,3.69,0,1,0,0-7.37H61.23a3.69,3.69,0,0,0,0,7.37ZM3.66,58.54h91a3.75,3.75,0,0,0,3.76-3.71,3.71,3.71,0,0,0-3.76-3.66h-91A3.62,3.62,0,0,0,0,54.83,3.67,3.67,0,0,0,3.66,58.54Zm0,25.54h91a3.71,3.71,0,0,0,3.76-3.66,3.75,3.75,0,0,0-3.76-3.71h-91A3.67,3.67,0,0,0,0,80.42,3.62,3.62,0,0,0,3.66,84.08Z"/></g></g></g></svg>
--- a/src/assets/queue.svg
+++ b/src/assets/queue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.39 74.76"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Regular-M"><path d="M4,15.17,12.65,10a2.45,2.45,0,0,0,0-4.11L4,.62C2-.6,0,0,0,2.33V13.46C0,15.71,2.05,16.29,4,15.17ZM31.3,11.75H94.43a3.93,3.93,0,1,0,0-7.86H31.3a3.88,3.88,0,0,0-4,4A3.87,3.87,0,0,0,31.3,11.75ZM4,44.61l8.69-5.17a2.44,2.44,0,0,0,0-4.1L4,30.06c-2-1.17-4-.58-4,1.71V42.91C0,45.15,2.05,45.74,4,44.61ZM31.3,41.29H94.43a3.93,3.93,0,1,0,0-7.86H31.3a3.93,3.93,0,1,0,0,7.86ZM4,74.2,12.65,69a2.44,2.44,0,0,0,0-4.1L4,59.65C2,58.48,0,59,0,61.36V72.5C0,74.74,2.05,75.33,4,74.2ZM31.3,70.79H94.43a3.93,3.93,0,1,0,0-7.86H31.3a3.93,3.93,0,1,0,0,7.86Z"/></g></g></g></svg>
--- a/src/components/AlphabetScroller.tsx
+++ b/src/components/AlphabetScroller.tsx
@@ -9,10 +9,10 @@ import {
    TapGestureHandlerGestureEvent 
 } from 'react-native-gesture-handler';

-interface LetterContainerProps {
-    onPress: (letter: string) => void;
-    letter: string;
-}
+// interface LetterContainerProps {
+//     onPress: (letter: string) => void;
+//     letter: string;
+// }

 const Container = styled.View`
    position: absolute;
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import TrackPlayer from 'react-native-track-player';
 import { PersistGate } from 'redux-persist/integration/react';
-import { AppearanceProvider, Appearance, AppearanceListener } from 'react-native-appearance';
 import Routes from '../screens';
 import store, { persistedStore } from 'store';
 import {
@@ -10,60 +9,43 @@ import {
    DefaultTheme,
    DarkTheme,
 } from '@react-navigation/native';
+import { useColorScheme } from 'react-native';
+import { ColorSchemeContext, themes } from './Colors';
+// import ErrorReportingAlert from 'utility/ErrorReportingAlert';
+import PlayerStateUpdater from './PlayerStateUpdater';

-interface State {
-    isReady: boolean;
-    colorScheme?: string;
-}
+export default function App(): JSX.Element {
+    const colorScheme = useColorScheme();
+    // const colorScheme = 'dark';
+    const theme = themes[colorScheme || 'light'];

-export default class App extends Component<{}, State> {
-    state: State = {
-        isReady: false,
-    };
-
-    subscription = null;
-
-    async componentDidMount() {
-        await TrackPlayer.setupPlayer();
-        await TrackPlayer.updateOptions({
-            capabilities: [
-                TrackPlayer.CAPABILITY_PLAY,
-                TrackPlayer.CAPABILITY_PAUSE,
-                TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
-                TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
-                TrackPlayer.CAPABILITY_STOP,
-                TrackPlayer.CAPABILITY_SEEK_TO,
-            ]
-        });
-        this.subscription = Appearance.addChangeListener(this.setScheme);
-        this.setState({ isReady: true, colorScheme: Appearance.getColorScheme() });
-    }
-    
-    componentWillUnmount() {
-        this.subscription?.remove();
-    }
-
-    setScheme: AppearanceListener = ({ colorScheme }) => {
-        this.setState({ colorScheme });
-    }
-    
-    render() {
-        const { isReady, colorScheme } = this.state;
-
-        if (!isReady) {
-            return null;
+    useEffect(() => {
+        async function setupTrackPlayer() {
+            await TrackPlayer.setupPlayer();
+            await TrackPlayer.updateOptions({
+                capabilities: [
+                    TrackPlayer.CAPABILITY_PLAY,
+                    TrackPlayer.CAPABILITY_PAUSE,
+                    TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
+                    TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
+                    TrackPlayer.CAPABILITY_STOP,
+                    TrackPlayer.CAPABILITY_SEEK_TO,
+                ]
+            });
        }
+        setupTrackPlayer();
+    }, []);

-        return (
-            <Provider store={store}>
-                <PersistGate loading={null} persistor={persistedStore}>
-                    <AppearanceProvider>
-                        <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-                            <Routes />
-                        </NavigationContainer>
-                    </AppearanceProvider>
-                </PersistGate>
-            </Provider>
-        );
-    }
+    return (
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistedStore}>
+                <ColorSchemeContext.Provider value={theme}>
+                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+                        <Routes />
+                        <PlayerStateUpdater />
+                    </NavigationContainer>
+                </ColorSchemeContext.Provider>
+            </PersistGate>
+        </Provider>
+    );
 }
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -0,0 +1,65 @@
+import React, { useCallback, useState }  from 'react';
+import { SvgProps } from 'react-native-svg';
+import { 
+    PressableProps, ViewProps, 
+} from 'react-native';
+import { THEME_COLOR } from 'CONSTANTS';
+import styled, { css } from 'styled-components/native';
+import useDefaultStyles from './Colors';
+
+interface ButtonProps extends PressableProps {
+    icon?: React.FC<SvgProps>;
+    title: string;
+    style?: ViewProps['style'];
+}
+
+
+const BaseButton = styled.Pressable`
+    padding: 16px;
+    border-radius: 8px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+`;
+
+const ButtonText = styled.Text<{ active?: boolean }>`
+    color: ${THEME_COLOR};
+    font-weight: 600;
+
+    ${props => props.active && css`
+        color: white;
+    `}
+`;
+
+export default function Button(props: ButtonProps) {
+    const { icon: Icon, title, ...rest } = props;
+    const defaultStyles = useDefaultStyles();
+    const [isPressed, setPressed] = useState(false);
+    const handlePressIn = useCallback(() => setPressed(true), []);
+    const handlePressOut = useCallback(() => setPressed(false), []);
+
+    return (
+        <BaseButton
+            {...rest}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            style={[ 
+                props.style, 
+                { backgroundColor: isPressed ? THEME_COLOR : defaultStyles.button.backgroundColor } 
+            ]}    
+        >
+            {Icon && 
+                <Icon
+                    width={12}
+                    height={12}
+                    fill={isPressed ? '#fff' : THEME_COLOR}
+                    style={{ 
+                        marginRight: 8,
+                    }} 
+                />
+            }
+            <ButtonText active={isPressed}>{title}</ButtonText>
+        </BaseButton>
+    );
+}
--- a/src/components/Colors.android.tsx
+++ b/src/components/Colors.android.tsx
@@ -1,26 +0,0 @@
-import { StyleSheet, PlatformColor } from 'react-native';
-import { THEME_COLOR } from 'CONSTANTS';
-
-export const colors = StyleSheet.create({
-    text: {
-        color: PlatformColor('?attr/colorOnBackground'),
-    },
-    view: {
-        backgroundColor: PlatformColor('?android:colorBackground'),
-    },
-    border: {
-        borderColor: '#88888844'
-    },
-    activeBackground: {
-        backgroundColor: `${THEME_COLOR}44`,
-    },
-    imageBackground: {
-        backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
-    },
-    modal: {
-        backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
-    },
-    input: {
-        backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
-    }
-});
--- a/src/components/Colors.ios.tsx
+++ b/src/components/Colors.ios.tsx
@@ -1,27 +0,0 @@
-import { StyleSheet, PlatformColor, DynamicColorIOS } from 'react-native';
-import { THEME_COLOR } from 'CONSTANTS';
-
-export const colors = StyleSheet.create({
-    text: {
-        color: PlatformColor('label'),
-    },
-    view: {
-        backgroundColor: PlatformColor('systemBackground'),
-    },
-    border: {
-        borderColor: PlatformColor('systemGray5Color'),
-    },
-    activeBackground: {
-        backgroundColor: DynamicColorIOS({ light: `${THEME_COLOR}16`, dark: `${THEME_COLOR}66` })
-    },
-    imageBackground: {
-        backgroundColor: PlatformColor('systemGray5Color')
-    },
-    modal: {
-        backgroundColor: DynamicColorIOS({ light: '#eeeeeeee', dark: '#222222ee' })
-    },
-    input: {
-        backgroundColor: PlatformColor('systemGray5Color'),
-        color: PlatformColor('label'),
-    }
-});
--- a/src/components/Colors.ts
+++ b/src/components/Colors.ts
@@ -0,0 +1,80 @@
+import { THEME_COLOR } from 'CONSTANTS';
+import React from 'react';
+import { useContext } from 'react';
+import { ColorSchemeName, StyleSheet } from 'react-native';
+
+/**
+ * Function for generating both the dark and light stylesheets, so that they
+ * don't have to be generate on every individual component render
+ */
+function generateStyles(scheme: ColorSchemeName) {
+    return StyleSheet.create({
+        text: {
+            color: scheme === 'dark' ? '#fff' : '#000',
+        },
+        textHalfOpacity: {
+            color: scheme === 'dark' ? '#ffffff88' : '#00000088',
+        },
+        view: {
+            backgroundColor: scheme === 'dark' ? '#111' : '#f6f6f6',
+        },
+        border: {
+            borderColor: scheme === 'dark' ? '#262626' : '#ddd',
+        },
+        activeBackground: {
+            backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '66' : '16'}`,
+        },
+        imageBackground: {
+            backgroundColor: scheme === 'dark' ? '#333' : '#ddd',
+        },
+        modal: {
+            backgroundColor: scheme === 'dark' ? '#222222ee' : '#eeeeeeee',
+        },
+        modalInner: {
+            backgroundColor: scheme === 'dark' ? '#000' : '#fff',
+        },
+        button: {
+            backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
+        },
+        input: {
+            backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
+            color: scheme === 'dark' ? '#fff' : '#000',
+        },
+        sectionHeading: {
+            backgroundColor: scheme === 'dark' ? '#111' : '#eee',
+            borderColor: scheme === 'dark' ? '#333' : '#ddd',
+        },
+        stackHeader: {
+            color: scheme === 'dark' ? 'white' : 'black'
+        }
+    });
+}
+
+// Prerender both stylesheets
+export const themes: Record<'dark' | 'light', ReturnType<typeof generateStyles>> = {
+    'dark': generateStyles('dark'),
+    'light': generateStyles('light'),
+};
+
+// Create context for supplying the theming information
+export const ColorSchemeContext = React.createContext(themes.dark);
+
+/**
+ * Retrieves the default styles object in hook form 
+ */
+export default function useDefaultStyles() {
+    return useContext(ColorSchemeContext);
+}
+
+interface DefaultStylesProviderProps {
+    children: (defaultStyles: ReturnType<typeof useDefaultStyles>) => JSX.Element;
+}
+
+/**
+ * A render props component to supply the defaultStyles object.
+ */
+export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
+    const defaultStyles = useDefaultStyles();
+
+    return props.children(defaultStyles);
+}
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components/native';

 const Input = styled.TextInput`
    margin: 10px 0;
-    border-radius: 5px;
+    border-radius: 8px;
    padding: 15px;
 `;

--- a/src/components/ListButton.tsx
+++ b/src/components/ListButton.tsx
@@ -1,24 +1,48 @@
-import React from 'react';
-import { TouchableOpacityProps, Text } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { TouchableOpacityProps } from 'react-native';
 import ChevronRight from 'assets/chevron-right.svg';
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { THEME_COLOR } from 'CONSTANTS';
-import { colors } from './Colors';
+import useDefaultStyles from './Colors';

 const BUTTON_SIZE = 14;

-const Container = styled.TouchableOpacity`
-    padding: 18px 0;
+const Container = styled.Pressable<{ active?: boolean }>`
+    padding: 18px 20px;
    border-bottom-width: 1px;
    flex-direction: row;
    justify-content: space-between;
+
+    ${props => props.active && css`
+        background-color: ${THEME_COLOR};
+    `}
+`;
+
+const Label = styled.Text<{ active?: boolean }>`
+    color: ${THEME_COLOR};
+    font-size: 16px;
+
+    ${props => props.active && css`
+        color: white;
+    `}
 `;

 const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
+    const defaultStyles = useDefaultStyles();
+    const [isPressed, setPressed] = useState(false);
+    const handlePressIn = useCallback(() => setPressed(true), []);
+    const handlePressOut = useCallback(() => setPressed(false), []);
+
    return (
-        <Container {...props} style={colors.border}>
-            <Text style={{ color: THEME_COLOR, fontSize: 16 }}>{children}</Text>
-            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={THEME_COLOR} />
+        <Container
+            {...props}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            style={defaultStyles.border}
+            active={isPressed}
+        >
+            <Label active={isPressed}>{children}</Label>
+            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={isPressed ? '#fff' : THEME_COLOR} />
        </Container>
    );
 };
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components/native';
 import { SafeAreaView, Pressable } from 'react-native';
-import { colors } from './Colors';
 import { useNavigation, StackActions } from '@react-navigation/native';
+import useDefaultStyles from './Colors';

 interface Props {
    fullSize?: boolean;
@@ -24,15 +24,16 @@ const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
 `;

 const Modal: React.FC<Props> = ({ children, fullSize = true }) => {
+    const defaultStyles = useDefaultStyles();
    const navigation = useNavigation();
    const closeModal = useCallback(() => {
        navigation.dispatch(StackActions.popToTop());    
    }, [navigation]);

    return (
-        <Background style={colors.modal} onPress={closeModal}>
+        <Background style={defaultStyles.modal} onPress={closeModal}>
            <SafeAreaView style={{ flex: 1 }}>
-                <Container style={colors.view} fullSize={fullSize}>
+                <Container style={defaultStyles.modalInner} fullSize={fullSize}>
                    {children}
                </Container>
            </SafeAreaView>
--- a/src/components/PlayerStateUpdater.ts
+++ b/src/components/PlayerStateUpdater.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect } from 'react';
+import TrackPlayer, { TrackPlayerEvents } from 'react-native-track-player';
+import { shallowEqual, useDispatch } from 'react-redux';
+import { useTypedSelector } from 'store';
+import player from 'store/player';
+
+function PlayerStateUpdater() {
+    const dispatch = useDispatch();
+    const trackId = useTypedSelector(state => state.player.currentTrack?.id, shallowEqual);
+
+    const handleUpdate = useCallback(async () => {
+        const currentTrackId = await TrackPlayer.getCurrentTrack();
+
+        // GUARD: Only retrieve new track if it is different from the one we
+        // have currently in state.
+        if (currentTrackId === trackId){
+            return;
+        }
+                
+        // GUARD: Only fetch current track if there is a current track
+        if (!currentTrackId) {
+            dispatch(player.actions.setCurrentTrack(undefined));
+        }
+
+        // If it is different, retrieve the track and save it
+        try {
+            const currentTrack = await TrackPlayer.getTrack(currentTrackId);
+            dispatch(player.actions.setCurrentTrack(currentTrack));
+        } catch {
+            // Due to the async nature, a track might be removed at the
+            // point when we try to retrieve it. If this happens, we'll just
+            // smother the error and wait for a new track update to
+            // finish.
+        }
+    }, [trackId, dispatch]);
+
+    useEffect(() => {
+        function handler() {
+            handleUpdate();
+        }
+
+        handler();
+
+        const subscription = TrackPlayer.addEventListener(TrackPlayerEvents.PLAYBACK_TRACK_CHANGED, handler);
+        
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+
+    return null;
+}
+
+export default PlayerStateUpdater;
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+import { Text as BaseText, TextProps } from 'react-native';
+import useDefaultStyles from './Colors';
+
+export default function Text(props: PropsWithChildren<TextProps>) {
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <BaseText {...props} style={[defaultStyles.text, props.style]} />
+    );
+}
--- a/src/components/Typography.ts
+++ b/src/components/Typography.ts
@@ -1,12 +1,13 @@
 import styled from 'styled-components/native';
+import Text from './Text';

-export const Header = styled.Text`
+export const Header = styled(Text)`
    margin: 24px 0 12px 0;
    font-size: 36px;
    font-weight: bold;
 `;

-export const SubHeader = styled.Text`
+export const SubHeader = styled(Text)`
    font-size: 24px;
    margin: 12px 0;
 `;
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -2,4 +2,8 @@ declare module '*.svg' {
    import { SvgProps } from 'react-native-svg';
    const content: React.FC<SvgProps>;
    export default content;
+}
+
+declare module '@env' {
+    export const SENTRY_DSN: string;
 }
--- a/src/localisation/index.ts
+++ b/src/localisation/index.ts
@@ -8,14 +8,20 @@ const localeGetters: Record<string, () => object> = {
    fr: () => require('./lang/fr/locale.json'),
    nl: () => require('./lang/nl/locale.json'),
    es: () => require('./lang/es/locale.json'),
+    zh: () => require('./lang/zh/locale.json'),
 };

 // Have RNLocalize pick the best locale from the languages on offer
-const locale = findBestAvailableLanguage(Object.keys(localeGetters));
+let locale = findBestAvailableLanguage(Object.keys(localeGetters));

 // Check if the locale is correctly picked
 if (!locale || !locale.languageTag) {
-    throw new Error('Invalid locale selected');
+    // Some users might not list English as a fallback language, and hence might not
+    // be assigned a locale. In this case, we'll just default to English.
+    locale = {
+        languageTag: 'en',
+        isRTL: false,
+    };
 }

 // Set the key-value pairs for the different languages you want to support.
--- a/src/localisation/lang/en/locale.json
+++ b/src/localisation/lang/en/locale.json
@@ -24,5 +24,20 @@
    "setting-cache": "Cache",
    "setting-cache-description": "If you have updated your Jellyfin library, but the app is holding on to cached assets, you can forcefully clear the cache using this button. This will force the app to fetch the library from scratch.",
    "reset-cache": "Reset Cache",
-    "recent-albums": "Recent Albums"
+    "recent-albums": "Recent Albums",
+    "error-reporting": "Error Reporting",
+    "error-reporting-description": "During use of this app, you may encounter errors. Reporting these errors helps in creating a more secure and stable app experience.",
+    "error-reporting-rationale": "When you enable error reporting, every time an error occurs, a report is automatically created and sent to a server, along with helpful debugging information such as devices, versions and the specific error.",
+    "why-use-tracking": "Why use tracking?",
+    "why-use-tracking-description": "Tracking helps speed up development for this app by reporting weird edge cases and oversights. This helps make the app more stable and robust, thus increasing the app experience for everyone.",
+    "what-data-is-gathered": "What data is gathered?",
+    "what-data-is-gathered-description": "We log the error, device type, OS version, app version and device id. No application state is sent in any error reporting. The device id is a unique hash that can be reset in your device settings, and we cannot deduce any personal information from this identifier.",
+    "where-is-data-stored": "Where is data stored?",
+    "where-is-data-stored-description": "The Sentry backend is self-hosted on our own infrastructure. No-one but us has access to the servers, databases, application and data logs, least of all any Sentry staff. The infrastructure is hosted in the European Union.",
+    "enable-error-reporting": "Do you want to enable error reporting?",
+    "enable-error-reporting-description": "This helps improve the app experience by sending crash and error reports to us.",
+    "enable": "Enable",
+    "disable": "Disable",
+    "more-info": "More Info",
+    "track": "Track"
 }
--- a/src/localisation/lang/nl/locale.json
+++ b/src/localisation/lang/nl/locale.json
@@ -24,5 +24,19 @@
    "setting-cache": "Cache",
    "setting-cache-description": "Als je Jellyfin bibliotheek geüpdatet hebt, maar de app nog aan elementen uit de cache vasthoudt, kun je de cache geforceerd leegmaken met deze knop. Dit forceert de app om de bibliotheek weer vanaf het begin op te bouwen.",
    "reset-cache": "Leeg Cache",
-    "recent-albums": "Recente Albums"
+    "recent-albums": "Recente Albums",
+    "error-reporting": "Foutmeldingen Rapporteren",
+    "error-reporting-description": "Gedurende het gebruik van deze app kun je tegen fouten aanlopen. Het rapporteren van deze foutmeldingen helpt om een veiligere en stabielere app-ervaring te maken.",
+    "error-reporting-rationale": "Wanneer je foutmeldingen aanzet, wordt er elke keer als je een foutmelding krijgt een automatisch rapport gegenereerd en naar onze server gestuurd. Deze bevat behulpzame informatie, zoals apparaat, versies en de specifieke foutmelding.",
+    "why-use-tracking": "Waarom tracking gebruiken?",
+    "why-use-tracking-description": "Tracking helpt het versnellen van het ontwikkeltempo doordat we beter inzicht hebben op rare gevallen en dingen die we gemist hebben. Dit helpt met het stabieler en veiliger maken van de voor iedereen.",
+    "what-data-is-gathered": "Welke data wordt er verzameld?",
+    "what-data-is-gathered-description": "We loggen de foutmeldingen, je apparaattype, versienummers en een device id. Geen applicatiestaat wordt gedeeld in de rapportage. Het device id is een unieke hash die gereset kan worden in de instellingen van je apparaat. Wij kunnen geen verdere informatie afleiden van deze identifier.",
+    "where-is-data-stored": "Waar wordt de data opgeslagen?",
+    "where-is-data-stored-description": "De Sentry backend wordt door onszelf gehost op onze eigen infrastructuur. Niemand behalve wij heeft toegang tot de servers, databases, applicaties en data logs, en zeker geen Sentry-werknemers. De infrastructuur wordt gehost in de Europese Unie.",
+    "enable-error-reporting": "Wil je foutmeldingen rapporteren?",
+    "enable-error-reporting-description": "Dit helpt de appervaring te verbeteren door ons rapportages te sturen van crashes en andere foutmeldingen.",
+    "enable": "Zet aan",
+    "disable": "Zet uit",
+    "more-info": "Meer informatie"
 }
--- a/src/localisation/lang/zh/locale.json
+++ b/src/localisation/lang/zh/locale.json
@@ -0,0 +1,42 @@
+{
+    "play-next": "播放下一首",
+    "play-album": "播放专辑",
+    "queue": "歌曲队列",
+    "add-to-queue": "加入队列",
+    "clear-queue": "清除队列",
+    "no-results": "无匹配记录",
+    "album": "专辑",
+    "albums": "专辑",
+    "all-albums": "所有专辑",
+    "search": "搜索",
+    "music": "歌曲",
+    "now-playing": "正在播放",
+    "onboarding-welcome": "欢迎",
+    "onboarding-intro": "Jellyfin Audio Player will allow you to stream your music library from anywhere, with full support for background audio and casting.",
+    "onboarding-cta": "In order to get started, you need a Jellyfin server. Click the button below to enter your Jellyfin server address and login to it.",
+    "set-jellyfin-server": "设置Jellyfin服务器",
+    "set-jellyfin-server-instruction": "设置Jellyfin服务器的完整网址，包括HTTP/HTTS和端口。",
+    "settings": "设置",
+    "jellyfin-library": "Jellyfin库",
+    "jellyfin-server-url": "Jellyfin服务器网址",
+    "jellyfin-access-token": "Jellyfin Access Token",
+    "jellyfin-user-id": "Jellyfin用户ID",
+    "setting-cache": "缓存",
+    "setting-cache-description": "If you have updated your Jellyfin library, but the app is holding on to cached assets, you can forcefully clear the cache using this button. This will force the app to fetch the library from scratch.",
+    "reset-cache": "清除缓存",
+    "recent-albums": "最近专辑",
+    "error-reporting": "Error Reporting",
+    "error-reporting-description": "During use of this app, you may encounter errors. Reporting these errors helps in creating a more secure and stable app experience.",
+    "error-reporting-rationale": "When you enable error reporting, every time an error occurs, a report is automatically created and sent to a server, along with helpful debugging information such as devices, versions and the specific error.",
+    "why-use-tracking": "Why use tracking?",
+    "why-use-tracking-description": "Tracking helps speed up development for this app by reporting weird edge cases and oversights. This helps make the app more stable and robust, thus increasing the app experience for everyone.",
+    "what-data-is-gathered": "What data is gathered?",
+    "what-data-is-gathered-description": "We log the error, device type, OS version, app version and device id. No application state is sent in any error reporting. The device id is a unique hash that can be reset in your device settings, and we cannot deduce any personal information from this identifier.",
+    "where-is-data-stored": "Where is data stored?",
+    "where-is-data-stored-description": "The Sentry backend is self-hosted on our own infrastructure. No-one but us has access to the servers, databases, application and data logs, least of all any Sentry staff. The infrastructure is hosted in the European Union.",
+    "enable-error-reporting": "Do you want to enable error reporting?",
+    "enable-error-reporting-description": "This helps improve the app experience by sending crash and error reports to us.",
+    "enable": "启用",
+    "disable": "禁用",
+    "more-info": "更多信息"
+}
--- a/src/localisation/types.ts
+++ b/src/localisation/types.ts
@@ -1,26 +1,41 @@
 export type LocaleKeys = 'play-next'
-    | 'play-album'
-    | 'queue'
-    | 'add-to-queue'
-    | 'clear-queue'
-    | 'no-results'
-    | 'album'
-    | 'albums'
-    | 'all-albums'
-    | 'search'
-    | 'music'
-    | 'now-playing'
-    | 'onboarding-welcome'
-    | 'onboarding-intro'
-    | 'onboarding-cta'
-    | 'set-jellyfin-server'
-    | 'set-jellyfin-server-instruction'
-    | 'settings'
-    | 'jellyfin-library'
-    | 'jellyfin-server-url'
-    | 'jellyfin-access-token'
-    | 'jellyfin-user-id'
-    | 'setting-cache'
-    | 'setting-cache-description'
-    | 'reset-cache'
-    | 'recent-albums'
+| 'play-album'
+| 'queue'
+| 'add-to-queue'
+| 'clear-queue'
+| 'no-results'
+| 'album'
+| 'albums'
+| 'all-albums'
+| 'search'
+| 'music'
+| 'now-playing'
+| 'onboarding-welcome'
+| 'onboarding-intro'
+| 'onboarding-cta'
+| 'set-jellyfin-server'
+| 'set-jellyfin-server-instruction'
+| 'settings'
+| 'jellyfin-library'
+| 'jellyfin-server-url'
+| 'jellyfin-access-token'
+| 'jellyfin-user-id'
+| 'setting-cache'
+| 'setting-cache-description'
+| 'reset-cache'
+| 'recent-albums'
+| 'error-reporting'
+| 'error-reporting-description'
+| 'error-reporting-rationale'
+| 'why-use-tracking'
+| 'why-use-tracking-description'
+| 'what-data-is-gathered'
+| 'what-data-is-gathered-description'
+| 'where-is-data-stored'
+| 'where-is-data-stored-description'
+| 'enable-error-reporting'
+| 'enable-error-reporting-description'
+| 'enable'
+| 'disable'
+| 'more-info'
+| 'track'
--- a/src/screens/Music/index.tsx
+++ b/src/screens/Music/index.tsx
@@ -7,17 +7,18 @@ import RecentAlbums from './stacks/RecentAlbums';
 import Search from './stacks/Search';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';

 const Stack = createStackNavigator<StackParams>();

-const navigationOptions = {
-    headerTintColor: THEME_COLOR,
-    headerTitleStyle: { color: 'black' }
-};
-
 function MusicStack() {
+    const defaultStyles = useDefaultStyles();
+
    return (
-        <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={navigationOptions}>
+        <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
            <Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
            <Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />
            <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
--- a/src/screens/Music/stacks/Album.tsx
+++ b/src/screens/Music/stacks/Album.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { StackParams } from '../types';
-import { Text, ScrollView, Dimensions, Button, RefreshControl, StyleSheet } from 'react-native';
+import { Text, ScrollView, Dimensions, RefreshControl, StyleSheet, View } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
 import styled, { css } from 'styled-components/native';
 import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
@@ -13,9 +13,11 @@ import { ALBUM_CACHE_AMOUNT_OF_DAYS, THEME_COLOR } from 'CONSTANTS';
 import usePlayAlbum from 'utility/usePlayAlbum';
 import TouchableHandler from 'components/TouchableHandler';
 import useCurrentTrack from 'utility/useCurrentTrack';
-import { colors } from 'components/Colors';
 import TrackPlayer from 'react-native-track-player';
 import { t } from '@localisation';
+import Button from 'components/Button';
+import Play from 'assets/play.svg';
+import useDefaultStyles from 'components/Colors';

 type Route = RouteProp<StackParams, 'Album'>;

@@ -23,18 +25,15 @@ const Screen = Dimensions.get('screen');

 const styles = StyleSheet.create({
    name: {
-        ...colors.text,
        fontSize: 36, 
        fontWeight: 'bold'
    },
    artist: {
-        ...colors.text,
        fontSize: 24,
        opacity: 0.5,
        marginBottom: 24
    },
    index: {
-        ...colors.text,
        width: 20,
        opacity: 0.5,
        marginRight: 5
@@ -61,6 +60,8 @@ const TrackContainer = styled.View<{isPlaying: boolean}>`
 `;

 const Album: React.FC = () => {
+    const defaultStyles = useDefaultStyles();
+
    // Retrieve state
    const { params: { id } } = useRoute<Route>();
    const tracks = useTypedSelector((state) => state.music.tracks.entities);
@@ -79,7 +80,7 @@ const Album: React.FC = () => {
    const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id, dispatch]);
    const selectTrack = useCallback(async (trackId) => {
        const tracks = await playAlbum(id, false);
-        
+
        if (tracks) {
            const track = tracks.find((t) => t.id.startsWith(trackId));

@@ -112,25 +113,27 @@ const Album: React.FC = () => {
                <RefreshControl refreshing={isLoading} onRefresh={refresh} />
            }
        >
-            <AlbumImage source={{ uri: getImage(album?.Id) }} style={colors.imageBackground} />
-            <Text style={styles.name} >{album?.Name}</Text>
-            <Text style={styles.artist}>{album?.AlbumArtist}</Text>
-            <Button title={t('play-album')} onPress={selectAlbum} color={THEME_COLOR} />
-            {album?.Tracks?.length ? album.Tracks.map((trackId) =>
-                <TouchableHandler
-                    key={trackId}
-                    id={trackId}
-                    onPress={selectTrack}
-                    onLongPress={longPressTrack}
-                >
-                    <TrackContainer isPlaying={currentTrack?.id.startsWith(trackId) || false} style={colors.border}>
-                        <Text style={styles.index}>
-                            {tracks[trackId]?.IndexNumber}
-                        </Text>
-                        <Text style={colors.text}>{tracks[trackId]?.Name}</Text>
-                    </TrackContainer>
-                </TouchableHandler>
-            ) : undefined}
+            <AlbumImage source={{ uri: getImage(album?.Id) }} style={defaultStyles.imageBackground} />
+            <Text style={[ defaultStyles.text, styles.name ]} >{album?.Name}</Text>
+            <Text style={[ defaultStyles.text, styles.artist ]}>{album?.AlbumArtist}</Text>
+            <Button title={t('play-album')} icon={Play} onPress={selectAlbum} />
+            <View style={{ marginTop: 15 }}>
+                {album?.Tracks?.length ? album.Tracks.map((trackId) =>
+                    <TouchableHandler
+                        key={trackId}
+                        id={trackId}
+                        onPress={selectTrack}
+                        onLongPress={longPressTrack}
+                    >
+                        <TrackContainer isPlaying={currentTrack?.id.startsWith(trackId) || false} style={defaultStyles.border}>
+                            <Text style={[ defaultStyles.text, styles.index ]}>
+                                {tracks[trackId]?.IndexNumber}
+                            </Text>
+                            <Text style={defaultStyles.text}>{tracks[trackId]?.Name}</Text>
+                        </TrackContainer>
+                    </TouchableHandler>
+                ) : undefined}
+            </View>
        </ScrollView>
    );
 };
--- a/src/screens/Music/stacks/Albums.tsx
+++ b/src/screens/Music/stacks/Albums.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, PureComponent, ReactText } from 'react';
+import React, { useCallback, useEffect, useRef, ReactText } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
 import { Album, NavigationProp } from '../types';
 import { Text, SafeAreaView, SectionList, View } from 'react-native';
@@ -9,13 +9,12 @@ import { useTypedSelector } from 'store';
 import { fetchAllAlbums } from 'store/music/actions';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import TouchableHandler from 'components/TouchableHandler';
-import ListContainer from './components/ListContainer';
 import AlbumImage, { AlbumItem } from './components/AlbumImage';
 import { selectAlbumsByAlphabet, SectionedId } from 'store/music/selectors';
 import AlphabetScroller from 'components/AlphabetScroller';
 import { EntityId } from '@reduxjs/toolkit';
 import styled from 'styled-components/native';
-import { colors } from 'components/Colors';
+import useDefaultStyles from 'components/Colors';

 interface VirtualizedItemInfo {
    section: SectionedId,
@@ -51,19 +50,16 @@ const SectionText = styled.Text`
    font-weight: bold;
 `;

-const sectionStyles = { ...colors.view, ...colors.border };
+const SectionHeading = React.memo(function SectionHeading(props: { label: string }) {
+    const defaultStyles = useDefaultStyles();
+    const { label } = props;

-class SectionHeading extends PureComponent<{ label: string }> {    
-    render() {
-        const { label } = this.props;
-
-        return (
-            <SectionContainer style={sectionStyles}>
-                <SectionText style={colors.text}>{label}</SectionText>
-            </SectionContainer>
-        );
-    }
-}
+    return (
+        <SectionContainer style={defaultStyles.sectionHeading}>
+            <SectionText style={defaultStyles.text}>{label}</SectionText>
+        </SectionContainer>
+    );
+});

 interface GeneratedAlbumItemProps {
    id: ReactText;
@@ -77,21 +73,20 @@ const HalfOpacity = styled.Text`
    opacity: 0.5;
 `;

-class GeneratedAlbumItem extends PureComponent<GeneratedAlbumItemProps> {
-    render() {
-        const { id, imageUrl, name, artist, onPress } = this.props;
+const GeneratedAlbumItem = React.memo(function GeneratedAlbumItem(props: GeneratedAlbumItemProps) {
+    const defaultStyles = useDefaultStyles();
+    const { id, imageUrl, name, artist, onPress } = props;

-        return (
-            <TouchableHandler id={id as string} onPress={onPress}>
-                <AlbumItem>
-                    <AlbumImage source={{ uri: imageUrl }} style={colors.imageBackground} />
-                    <Text numberOfLines={1} style={colors.text}>{name}</Text>
-                    <HalfOpacity style={colors.text} numberOfLines={1}>{artist}</HalfOpacity>
-                </AlbumItem>
-            </TouchableHandler>
-        );
-    }
-}
+    return (
+        <TouchableHandler id={id as string} onPress={onPress}>
+            <AlbumItem>
+                <AlbumImage source={{ uri: imageUrl }} style={defaultStyles.imageBackground} />
+                <Text numberOfLines={1} style={defaultStyles.text}>{name}</Text>
+                <HalfOpacity style={defaultStyles.text} numberOfLines={1}>{artist}</HalfOpacity>
+            </AlbumItem>
+        </TouchableHandler>
+    );
+});

 const Albums: React.FC = () => {
    // Retrieve data from store
--- a/src/screens/Music/stacks/RecentAlbums.tsx
+++ b/src/screens/Music/stacks/RecentAlbums.tsx
@@ -12,31 +12,36 @@ import AlbumImage, { AlbumItem } from './components/AlbumImage';
 import { useRecentAlbums } from 'store/music/selectors';
 import { Header } from 'components/Typography';
 import ListButton from 'components/ListButton';
-import { colors } from 'components/Colors';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';

 const styles = StyleSheet.create({
-    artist: {
-        ...colors.text,
-        opacity: 0.5,
+    columnWrapper: {
+        paddingLeft: 10,
+        paddingRight: 10
    }
 });

 const NavigationHeader: React.FC = () => {
    const navigation = useNavigation();
+    const defaultStyles = useDefaultStyles();
    const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]);
    const handleSearchClick = useCallback(() => { navigation.navigate('Search'); }, [navigation]);
    
    return (
-        <ListContainer>
+        <>
            <ListButton onPress={handleAllAlbumsClick}>{t('all-albums')}</ListButton>
            <ListButton onPress={handleSearchClick}>{t('search')}</ListButton>
-            <Header style={colors.text}>{t('recent-albums')}</Header>
-        </ListContainer>
+            <ListContainer>
+                <Header style={defaultStyles.text}>{t('recent-albums')}</Header>
+            </ListContainer>
+        </>
    );
 };

 const RecentAlbums: React.FC = () => {
+    const defaultStyles = useDefaultStyles();
+
    // Retrieve data from store
    const { entities: albums } = useTypedSelector((state) => state.music.albums);
    const recentAlbums = useRecentAlbums(24);
@@ -56,25 +61,24 @@ const RecentAlbums: React.FC = () => {
    
    return (
        <SafeAreaView>
-            <ListContainer>
-                <FlatList
-                    data={recentAlbums as string[]} 
-                    refreshing={isLoading}
-                    onRefresh={retrieveData}
-                    numColumns={2}
-                    keyExtractor={d => d}
-                    ListHeaderComponent={NavigationHeader}
-                    renderItem={({ item }) => (
-                        <TouchableHandler id={item} onPress={selectAlbum}>
-                            <AlbumItem>
-                                <AlbumImage source={{ uri: getImage(item) }} style={colors.imageBackground} />
-                                <Text style={colors.text} numberOfLines={1}>{albums[item]?.Name}</Text>
-                                <Text style={styles.artist} numberOfLines={1}>{albums[item]?.AlbumArtist}</Text>
-                            </AlbumItem>
-                        </TouchableHandler>
-                    )}
-                />
-            </ListContainer>
+            <FlatList
+                data={recentAlbums as string[]} 
+                refreshing={isLoading}
+                onRefresh={retrieveData}
+                numColumns={2}
+                keyExtractor={d => d}
+                columnWrapperStyle={styles.columnWrapper}
+                ListHeaderComponent={NavigationHeader}
+                renderItem={({ item }) => (
+                    <TouchableHandler id={item} onPress={selectAlbum}>
+                        <AlbumItem>
+                            <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
+                            <Text style={defaultStyles.text} numberOfLines={1}>{albums[item]?.Name}</Text>
+                            <Text style={defaultStyles.textHalfOpacity} numberOfLines={1}>{albums[item]?.AlbumArtist}</Text>
+                        </AlbumItem>
+                    </TouchableHandler>
+                )}
+            />
        </SafeAreaView>
    );
 };
--- a/src/screens/Music/stacks/Search.tsx
+++ b/src/screens/Music/stacks/Search.tsx
@@ -1,21 +1,33 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Input from 'components/Input';
-import { Text, View } from 'react-native';
+import { ActivityIndicator, Text, View } from 'react-native';
 import styled from 'styled-components/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import Fuse from 'fuse.js';
-import { Album } from 'store/music/types';
+import { Album, AlbumTrack } from 'store/music/types';
 import { FlatList } from 'react-native-gesture-handler';
 import TouchableHandler from 'components/TouchableHandler';
 import { useNavigation } from '@react-navigation/native';
 import { useGetImage } from 'utility/JellyfinApi';
 import { NavigationProp } from '../types';
 import FastImage from 'react-native-fast-image';
-import { colors } from 'components/Colors';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
+import { searchAndFetchAlbums } from 'store/music/actions';
+import { debounce } from 'lodash';

 const Container = styled.View`
    padding: 0 20px;
+    position: relative;
+`;
+
+const Loading = styled.View`
+    position: absolute;
+    right: 32px;
+    top: 0;
+    height: 100%;
+    flex: 1;
+    justify-content: center;
 `;

 const AlbumImage = styled(FastImage)`
@@ -46,16 +58,38 @@ const fuseOptions = {
    includeScore: true,
 };

+type AudioResult = {
+    type: 'Audio',
+    id: string;
+    album: string;
+    name: string;
+};
+
+type AlbumResult = {
+    type: 'AlbumArtist',
+    id: string;
+    album: undefined;
+    name: undefined;
+}
+
+type CombinedResults = (AudioResult | AlbumResult)[];
+
 export default function Search() {
+    const defaultStyles = useDefaultStyles();
+
    // Prepare state
    const [searchTerm, setSearchTerm] = useState('');
    const albums = useTypedSelector(state => state.music.albums.entities);
-    const [results, setResults] = useState<Fuse.FuseResult<Album>[]>([]);
-    const fuse = useRef<Fuse<Album, typeof fuseOptions>>();
+    const [fuseResults, setFuseResults] = useState<CombinedResults>([]);
+    const [jellyfinResults, setJellyfinResults] = useState<CombinedResults>([]);
+
+    const [isLoading, setLoading] = useState(false);
+    const fuse = useRef<Fuse<Album>>();

    // Prepare helpers
    const navigation = useNavigation<NavigationProp>();
    const getImage = useGetImage();
+    const dispatch = useAppDispatch();

    /**
     * Since it is impractical to have a global fuse variable, we need to
@@ -68,19 +102,86 @@ export default function Search() {
        fuse.current = new Fuse(Object.values(albums) as Album[], fuseOptions);
    }, [albums]);

+    /**
+     * This function retrieves search results from Jellyfin. It is a seperate
+     * callback, so that we can make sure it is properly debounced and doesn't
+     * cause execessive jank in the interface.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const fetchJellyfinResults = useCallback(debounce(async (searchTerm: string, currentResults: CombinedResults) => {
+        // First, query the Jellyfin API
+        const { payload } = await dispatch(searchAndFetchAlbums({ term: searchTerm }));
+
+        // Convert the current results to album ids
+        const albumIds = currentResults.map(item => item.id);
+
+        // Parse the result in correct typescript form
+        const results = (payload as { results: (Album | AlbumTrack)[] }).results;
+
+        // Filter any results that are already displayed
+        const items = results.filter(item => (
+            !(item.Type === 'MusicAlbum' && albumIds.includes(item.Id))
+        // Then convert the results to proper result form
+        )).map((item) => ({
+            type: item.Type,
+            id: item.Id,
+            album: item.Type === 'Audio'
+                ? item.AlbumId
+                : undefined,
+            name: item.Type === 'Audio'
+                ? item.Name
+                : undefined,
+        }));
+
+        // Lastly, we'll merge the two and assign them to the state
+        setJellyfinResults([...items] as CombinedResults);
+
+        // Loading is now complete
+        setLoading(false);
+    }, 50), [dispatch, setJellyfinResults]);
+
    /**
     * Whenever the search term changes, we gather results from Fuse and assign
     * them to state
     */
    useEffect(() => {
-        // GUARD: In some extraordinary cases, Fuse might not be presented since
-        // it is assigned via refs. In this case, we can't handle any searching.
-        if (!fuse.current) {
+        if (!searchTerm) {
            return;
        }

-        setResults(fuse.current.search(searchTerm));
-    }, [searchTerm, setResults, fuse]);
+        const retrieveResults = async () => {
+            // GUARD: In some extraordinary cases, Fuse might not be presented since
+            // it is assigned via refs. In this case, we can't handle any searching.
+            if (!fuse.current) {
+                return;
+            }
+
+            // First set the immediate results from fuse
+            const fuseResults = fuse.current.search(searchTerm);
+            const albums: AlbumResult[] = fuseResults
+                .map(({ item }) => ({ 
+                    id: item.Id,
+                    type: 'AlbumArtist',
+                    album: undefined,
+                    name: undefined,
+                }));
+            
+            // Assign the preliminary results
+            setFuseResults(albums);
+            setLoading(true);
+            try {
+                // Wrap the call in a try/catch block so that we catch any
+                // network issues in search and just use local search if the
+                // network is unavailable
+                fetchJellyfinResults(searchTerm, albums);
+            } catch {
+                // Reset the loading indicator if the network fails
+                setLoading(false);
+            }
+        };
+
+        retrieveResults();
+    }, [searchTerm, setFuseResults, setLoading, fuse, fetchJellyfinResults]);

    // Handlers
    const selectAlbum = useCallback((id: string) => 
@@ -89,10 +190,18 @@ export default function Search() {

    const HeaderComponent = React.useMemo(() => (
        <Container>
-            <Input value={searchTerm} onChangeText={setSearchTerm} style={colors.input} placeholder={t('search') + '...'} />
-            {(searchTerm.length && !results.length) ? <Text>{t('no-results')}</Text> : null}
+            <Input value={searchTerm} onChangeText={setSearchTerm} style={defaultStyles.input} placeholder={t('search') + '...'} />
+            {isLoading && <Loading><ActivityIndicator /></Loading>}
        </Container>
-    ), [searchTerm, results, setSearchTerm]);
+    ), [searchTerm, setSearchTerm, defaultStyles, isLoading]);
+
+    const FooterComponent = React.useMemo(() => (
+        <Container>
+            {(searchTerm.length && !jellyfinResults.length && !fuseResults.length && !isLoading)
+                ? <Text style={{ textAlign: 'center' }}>{t('no-results')}</Text> 
+                : null}
+        </Container>
+    ), [searchTerm, jellyfinResults, fuseResults, isLoading]);

    // GUARD: We cannot search for stuff unless Fuse is loaded with results.
    // Therefore we delay rendering to when we are certain it's there.
@@ -101,24 +210,40 @@ export default function Search() {
    }

    return (
-        <FlatList
-            data={results}
-            renderItem={({ item: { item: album } }) =>(
-                <TouchableHandler id={album.Id} onPress={selectAlbum}>
-                    <SearchResult style={colors.border}>
-                        <AlbumImage source={{ uri: getImage(album.Id) }} />
-                        <View>
-                            <Text numberOfLines={1} ellipsizeMode="tail" style={colors.text}>
-                                {album.Name} - {album.AlbumArtist}
-                            </Text>
-                            <HalfOpacity style={colors.text}>{t('album')}</HalfOpacity>
-                        </View>
-                    </SearchResult>
-                </TouchableHandler>
-            )}
-            keyExtractor={(item) => item.refIndex.toString()}
-            ListHeaderComponent={HeaderComponent}
-            extraData={searchTerm}
-        />
+        <>
+            <FlatList
+                style={{ flex: 1 }}
+                data={[...jellyfinResults, ...fuseResults]}
+                renderItem={({ item: { id, type, album: trackAlbum, name: trackName } }: { item: AlbumResult | AudioResult }) => {
+                    const album = albums[trackAlbum || id];
+
+                    // GUARD: If the album cannot be found in the store, we
+                    // cannot display it.
+                    if (!album) {
+                        return null;
+                    }
+
+                    return (
+                        <TouchableHandler id={album.Id} onPress={selectAlbum}>
+                            <SearchResult style={defaultStyles.border}>
+                                <AlbumImage source={{ uri: getImage(album.Id) }} />
+                                <View>
+                                    <Text numberOfLines={1} ellipsizeMode="tail" style={defaultStyles.text}>
+                                        {trackName || album.Name} - {album.AlbumArtist}
+                                    </Text>
+                                    <HalfOpacity style={defaultStyles.text}>
+                                        {type === 'AlbumArtist' ? t('album'): t('track')}
+                                    </HalfOpacity>
+                                </View>
+                            </SearchResult>
+                        </TouchableHandler>
+                    );
+                }}
+                keyExtractor={(item) => item.id}
+                ListHeaderComponent={HeaderComponent}
+                ListFooterComponent={FooterComponent}
+                extraData={[searchTerm, albums]}
+            />
+        </>
    );
 }
--- a/src/screens/Music/types.ts
+++ b/src/screens/Music/types.ts
@@ -1,75 +1,11 @@
 import { StackNavigationProp } from '@react-navigation/stack';
-
-export interface UserData {
-    PlaybackPositionTicks: number;
-    PlayCount: number;
-    IsFavorite: boolean;
-    Played: boolean;
-    Key: string;
-}
-
-export interface ArtistItem {
-    Name: string;
-    Id: string;
-}
-
-export interface AlbumArtist {
-    Name: string;
-    Id: string;
-}
-
-export interface ImageTags {
-    Primary: string;
-}
-
-export interface Album {
-    Name: string;
-    ServerId: string;
-    Id: string;
-    SortName: string;
-    RunTimeTicks: number;
-    ProductionYear: number;
-    IsFolder: boolean;
-    Type: string;
-    UserData: UserData;
-    PrimaryImageAspectRatio: number;
-    Artists: string[];
-    ArtistItems: ArtistItem[];
-    AlbumArtist: string;
-    AlbumArtists: AlbumArtist[];
-    ImageTags: ImageTags;
-    BackdropImageTags: any[];
-    LocationType: string;
-    DateCreated: string;
-}
-
-export interface AlbumTrack {
-    Name: string;
-    ServerId: string;
-    Id: string;
-    RunTimeTicks: number;
-    ProductionYear: number;
-    IndexNumber: number;
-    IsFolder: boolean;
-    Type: string;
-    UserData: UserData;
-    Artists: string[];
-    ArtistItems: ArtistItem[];
-    Album: string;
-    AlbumId: string;
-    AlbumPrimaryImageTag: string;
-    AlbumArtist: string;
-    AlbumArtists: AlbumArtist[];
-    ImageTags: ImageTags;
-    BackdropImageTags: any[];
-    LocationType: string;
-    MediaType: string;
-}
+import { Album } from 'store/music/types';

 export type StackParams = {
    Albums: undefined;
    Album: { id: string, album: Album };
    RecentAlbums: undefined;
+    Search: undefined;
 };

 export type NavigationProp = StackNavigationProp<StackParams>; 
--- a/src/screens/Player/components/Casting.android.tsx
+++ b/src/screens/Player/components/Casting.android.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const Button = styled.View`
+    margin: 20px 40px;
+`;
+
+function Casting() {
+    return (
+        <Button />
+    );
+}
+
+export default Casting;
--- a/src/screens/Player/components/Casting.d.ts
+++ b/src/screens/Player/components/Casting.d.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface CastingProps {
+    fill?: string;
+}
+
+declare const CastingComponent: React.FC<CastingProps>;
+
+export default CastingComponent;
--- a/src/screens/Player/components/Casting.ios.tsx
+++ b/src/screens/Player/components/Casting.ios.tsx
@@ -0,0 +1,25 @@
+import { THEME_COLOR } from 'CONSTANTS';
+import React from 'react';
+import AirPlayButton from 'react-native-airplay-button';
+import styled from 'styled-components/native';
+import { CastingProps } from './Casting';
+
+const Button = styled.View`
+    margin: 20px 40px;
+`;
+
+function Casting({ fill }: CastingProps) {
+    return (
+        <>
+            <Button>
+                <AirPlayButton 
+                    activeTintColor={THEME_COLOR}
+                    tintColor={fill}
+                    style={{ width: 40, height: 40 }}
+                />
+            </Button>
+        </>
+    );
+}
+
+export default Casting;
--- a/src/screens/Player/components/MediaControls.tsx
+++ b/src/screens/Player/components/MediaControls.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import TrackPlayer, { usePlaybackState, STATE_PLAYING, STATE_PAUSED } from 'react-native-track-player';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, useColorScheme } from 'react-native';
 import styled from 'styled-components/native';
 import { useHasQueue } from 'utility/useQueue';
 import ForwardIcon from 'assets/forwards.svg';
@@ -9,8 +9,8 @@ import PlayIcon from 'assets/play.svg';
 import PauseIcon from 'assets/pause.svg';
 import RepeatIcon from 'assets/repeat.svg';
 // import ShuffleIcon from 'assets/shuffle.svg';
-import { useColorScheme } from 'react-native-appearance';
 import { THEME_COLOR } from 'CONSTANTS';
+import Casting from './Casting';

 const BUTTON_SIZE = 40;
 const BUTTON_SIZE_SMALL = 25;
@@ -55,9 +55,7 @@ export default function MediaControls() {
                <Button>
                    <RepeatButton fill={fill} />
                </Button>
-                <Button>
-                    {/* <ShuffleButton fill={fill} /> */}
-                </Button>
+                <Casting fill={fill} />
            </Buttons>
        </Container>
    );
--- a/src/screens/Player/components/NowPlaying.tsx
+++ b/src/screens/Player/components/NowPlaying.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Text, Dimensions, View, StyleSheet } from 'react-native';
+import { Dimensions, View, StyleSheet } from 'react-native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import styled from 'styled-components/native';
 import FastImage from 'react-native-fast-image';
-import { colors } from 'components/Colors';
+import useDefaultStyles from 'components/Colors';
+import Text from 'components/Text';

 const Screen = Dimensions.get('screen');

@@ -16,13 +17,11 @@ const Artwork = styled(FastImage)`

 const styles = StyleSheet.create({
    artist: {
-        ...colors.text,
        fontWeight: 'bold',
        fontSize: 24,
        marginBottom: 12,
    },
    title: {
-        ...colors.text,
        fontSize: 18,
        marginBottom: 12,
        textAlign: 'center',
@@ -34,17 +33,18 @@ const styles = StyleSheet.create({

 export default function NowPlaying() {
    const track = useCurrentTrack();
+    const defaultStyles = useDefaultStyles();

    return (
        <View style={{ alignItems: 'center' }}>
            <Artwork
-                style={colors.imageBackground}
+                style={defaultStyles.imageBackground}
                source={{ 
                    uri: track?.artwork,
                    priority: FastImage.priority.high,
                }} 
            />
-            <Text style={styles.artist} >{track?.artist}</Text>
+            <Text style={styles.artist}>{track?.artist}</Text>
            <Text style={styles.title}>{track?.title}</Text>
        </View>
    );
--- a/src/screens/Player/components/ProgressBar.tsx
+++ b/src/screens/Player/components/ProgressBar.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components/native';
 import { Text, Platform } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { THEME_COLOR } from 'CONSTANTS';
-import { colors } from 'components/Colors';
+import { DefaultStylesProvider } from 'components/Colors';

 const NumberBar = styled.View`
    flex-direction: row;
@@ -65,24 +65,29 @@ export default class ProgressBar extends Component<{}, State> {

    render() {
        const { position, duration, gesture } = this.state;
-
+        
        return (
-            <>
-                <Slider
-                    value={gesture || position}
-                    minimumValue={0}
-                    maximumValue={duration || 0}
-                    onValueChange={this.handleGesture}
-                    onSlidingComplete={this.handleEndOfGesture}
-                    minimumTrackTintColor={THEME_COLOR}
-                    thumbTintColor={Platform.OS === 'android' ? THEME_COLOR : undefined}
-                    disabled={!duration}
-                />
-                <NumberBar>
-                    <Text style={colors.text}>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
-                    <Text style={colors.text}>{getMinutes(duration)}:{getSeconds(duration)}</Text>
-                </NumberBar>
-            </>
+            <DefaultStylesProvider>
+                {defaultStyle => (
+                    <>
+                        <Slider
+                            value={gesture || position}
+                            minimumValue={0}
+                            maximumValue={duration || 0}
+                            onValueChange={this.handleGesture}
+                            onSlidingComplete={this.handleEndOfGesture}
+                            minimumTrackTintColor={THEME_COLOR}
+                            thumbTintColor={Platform.OS === 'android' ? THEME_COLOR : undefined}
+                            disabled={!duration}
+                        />
+                        <NumberBar>
+                            <Text style={defaultStyle.text}>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
+                            <Text style={defaultStyle.text}>{getMinutes(duration)}:{getSeconds(duration)}</Text>
+                        </NumberBar>
+                    </>
+                )
+                }
+            </DefaultStylesProvider>
        );
    }
 }
--- a/src/screens/Player/components/Queue.tsx
+++ b/src/screens/Player/components/Queue.tsx
@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react';
 import useQueue from 'utility/useQueue';
-import { View, Text, StyleSheet, Button } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import TouchableHandler from 'components/TouchableHandler';
 import TrackPlayer from 'react-native-track-player';
-import { THEME_COLOR } from 'CONSTANTS';
-import { colors } from 'components/Colors';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
+import Text from 'components/Text';
+import Button from 'components/Button';

 const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean, isDark?: boolean }>`
    padding: 10px;
@@ -29,17 +30,13 @@ const ClearQueue = styled.View`
 `;

 const styles = StyleSheet.create({
-    title: {
-        ...colors.text,
-        marginBottom: 2,
-    },
-    artist: {
-        ...colors.text,
-        opacity: 0.5,
+    trackTitle: {
+        marginBottom: 2
    }
 });

 export default function Queue() {
+    const defaultStyles = useDefaultStyles();
    const queue = useQueue();
    const currentTrack = useCurrentTrack();
    const currentIndex = queue.findIndex(d => d.id === currentTrack?.id);
@@ -60,18 +57,18 @@ export default function Queue() {
                        active={currentTrack?.id === track.id}
                        key={i}
                        alreadyPlayed={i < currentIndex}
-                        style={{
-                            ...colors.border,
-                            ...currentTrack?.id === track.id ? colors.activeBackground : {},
-                        }}
+                        style={[
+                            defaultStyles.border,
+                            currentTrack?.id === track.id ? defaultStyles.activeBackground : {},
+                        ]}
                    >
-                        <Text style={styles.title}>{track.title}</Text>
-                        <Text style={styles.artist}>{track.artist}</Text>
+                        <Text style={styles.trackTitle}>{track.title}</Text>
+                        <Text style={defaultStyles.textHalfOpacity}>{track.artist}</Text>
                    </QueueItem>
                </TouchableHandler>
            ))}
            <ClearQueue>
-                <Button title={t('clear-queue')} color={THEME_COLOR} onPress={clearQueue} />
+                <Button title={t('clear-queue')} onPress={clearQueue} />
            </ClearQueue>
        </View>
    );
--- a/src/screens/Player/index.tsx
+++ b/src/screens/Player/index.tsx
@@ -4,18 +4,19 @@ import MediaControls from './components/MediaControls';
 import ProgressBar from './components/ProgressBar';
 import NowPlaying from './components/NowPlaying';
 import Queue from './components/Queue';
-import { colors } from 'components/Colors';
+import useDefaultStyles from 'components/Colors';

 const styles = StyleSheet.create({
-    outer: colors.view,
    inner: {
        padding: 25,
    }
 });

 export default function Player() {
+    const defaultStyles = useDefaultStyles();
+    
    return (
-        <ScrollView contentContainerStyle={styles.inner} style={styles.outer}>
+        <ScrollView contentContainerStyle={styles.inner} style={defaultStyles.view}>
            <NowPlaying />
            <MediaControls />
            <ProgressBar />
--- a/src/screens/Settings/components/Cache.tsx
+++ b/src/screens/Settings/components/Cache.tsx
@@ -1,11 +1,19 @@
 import React, { useCallback } from 'react';
 import TrackPlayer from 'react-native-track-player';
-import { SubHeader } from 'components/Typography';
-import { Text, Button } from 'react-native';
-import { THEME_COLOR } from 'CONSTANTS';
 import { useDispatch } from 'react-redux';
 import music from 'store/music';
 import { t } from '@localisation';
+import Button from 'components/Button';
+import styled from 'styled-components/native';
+import Text from 'components/Text';
+
+const ClearCache = styled(Button)`
+    margin-top: 16px;
+`;
+
+const Container = styled.ScrollView`
+    padding: 24px;
+`;

 export default function CacheSettings() {
    const dispatch = useDispatch();
@@ -18,10 +26,9 @@ export default function CacheSettings() {
    }, [dispatch]);

    return (
-        <>
-            <SubHeader>{t('setting-cache')}</SubHeader>
+        <Container>
            <Text>{t('setting-cache-description')}</Text>
-            <Button title={t('reset-cache')} onPress={handleClearCache} color={THEME_COLOR} />
-        </>
+            <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
+        </Container>
    );
 }
--- a/src/screens/Settings/components/Library.tsx
+++ b/src/screens/Settings/components/Library.tsx
@@ -1,13 +1,12 @@
 import styled from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback } from 'react';
-import { Text, Button } from 'react-native';
-import { THEME_COLOR } from 'CONSTANTS';
-import { SubHeader } from 'components/Typography';
-import { colors } from 'components/Colors';
+import useDefaultStyles from 'components/Colors';
 import { NavigationProp } from '../..';
 import { useTypedSelector } from 'store';
 import { t } from '@localisation';
+import Button from 'components/Button';
+import Text from 'components/Text';

 const InputContainer = styled.View`
    margin: 10px 0;
@@ -19,27 +18,31 @@ const Input = styled.TextInput`
    border-radius: 5px;
 `;

+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function LibrarySettings() {
+    const defaultStyles = useDefaultStyles();
    const { jellyfin } = useTypedSelector(state => state.settings);
    const navigation = useNavigation<NavigationProp>();
    const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);

    return (
-        <>
-            <SubHeader>{t('jellyfin-library')}</SubHeader>
+        <Container>
            <InputContainer>
-                <Text style={colors.text}>{t('jellyfin-server-url')}</Text>
-                <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={colors.input} />
+                <Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
+                <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />
            </InputContainer>
            <InputContainer>
-                <Text style={colors.text}>{t('jellyfin-access-token')}</Text>
-                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={colors.input} />
+                <Text style={defaultStyles.text}>{t('jellyfin-access-token')}</Text>
+                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={defaultStyles.input} />
            </InputContainer>
            <InputContainer>
-                <Text style={colors.text}>{t('jellyfin-user-id')}</Text>
-                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={colors.input} />
+                <Text style={defaultStyles.text}>{t('jellyfin-user-id')}</Text>
+                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={defaultStyles.input} />
            </InputContainer>
-            <Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} color={THEME_COLOR} />
-        </>
+            <Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} />
+        </Container>
    );
 }
--- a/src/screens/Settings/components/Sentry.tsx
+++ b/src/screens/Settings/components/Sentry.tsx
@@ -0,0 +1,124 @@
+import Text from 'components/Text';
+import React, { useEffect, useState } from 'react';
+import { Switch } from 'react-native-gesture-handler';
+import styled, { css } from 'styled-components/native';
+import { isSentryEnabled, setSentryStatus } from 'utility/Sentry';
+import Accordion from 'react-native-collapsible/Accordion';
+import ChevronIcon from 'assets/chevron-right.svg';
+import { THEME_COLOR } from 'CONSTANTS';
+import useDefaultStyles, { DefaultStylesProvider } from 'components/Colors';
+import { t } from '@localisation';
+
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
+const SwitchContainer = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+`;
+
+const HeaderContainer = styled.View<{ isActive?: boolean }>`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0 4px 0;
+
+    ${props => props.isActive && css`
+        background-color: ${THEME_COLOR};
+    `}
+`;
+
+const HeaderText = styled(Text)`
+    font-size: 16px;
+`;
+
+const ContentContainer = styled.View`
+    margin-top: 8px;
+`;
+
+const Label = styled(Text)`
+    font-size: 16px;
+`;
+
+const Chevron = styled(ChevronIcon)<{ isActive?: boolean }>`
+    width: 14px;
+    height: 14px;
+    transform: rotate(-90deg);
+
+    ${props => props.isActive && css`
+        transform: rotate(90deg);
+    `}
+`;
+
+type Question = { title: string, content: string };
+
+const questions: Question[] = [
+    {
+        title: t('why-use-tracking'),
+        content: t('why-use-tracking-description')
+    },
+    {
+        title: t('what-data-is-gathered'),
+        content: t('what-data-is-gathered-description')
+    },
+    {
+        title: t('where-is-data-stored'),
+        content: t('where-is-data-stored-description')
+    }
+];
+
+function renderHeader(question: Question, index: number, isActive: boolean) {
+    return (
+        <HeaderContainer>
+            <HeaderText>{question.title}</HeaderText>
+            <DefaultStylesProvider>
+                {styles =>
+                    <Chevron fill={styles.text.color} isActive={isActive} />
+                }
+            </DefaultStylesProvider>
+        </HeaderContainer>
+    );
+}
+
+function renderContent(question: Question) {
+    return (
+        <ContentContainer>
+            <Text>{question.content}</Text>
+        </ContentContainer>
+    );
+}
+
+export default function Sentry() {
+    const defaultStyles = useDefaultStyles();
+    const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
+    const [activeSections, setActiveSections] = useState<number[]>([]);
+
+    const toggleSwitch = () => setReporting(previousState => !previousState);
+
+    useEffect(() => {
+        setSentryStatus(isReportingEnabled);
+    });
+
+    return (
+        <Container>
+            <Text>{t('error-reporting-description')}</Text>
+            <Text />
+            <Text>{t('error-reporting-rationale')}</Text>
+            <SwitchContainer>
+                <Label>{t('error-reporting')}</Label>
+                <Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
+            </SwitchContainer>
+            <Accordion
+                sections={questions}
+                renderHeader={renderHeader}
+                renderContent={renderContent}
+                activeSections={activeSections}
+                onChange={setActiveSections}
+                underlayColor={defaultStyles.activeBackground.backgroundColor}
+            />
+        </Container>
+    );
+}
--- a/src/screens/Settings/index.tsx
+++ b/src/screens/Settings/index.tsx
@@ -1,21 +1,46 @@
-import React from 'react';
-import { View, SafeAreaView, ScrollView } from 'react-native';
-import { Header } from 'components/Typography';
-import { colors } from 'components/Colors';
+import React, { useCallback } from 'react';
+import { SafeAreaView, ScrollView } from 'react-native';
 import Library from './components/Library';
 import Cache from './components/Cache';
+import useDefaultStyles from 'components/Colors';
 import { t } from '@localisation';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import ListButton from 'components/ListButton';
+import { THEME_COLOR } from 'CONSTANTS';
+import Sentry from './components/Sentry';
+
+export function SettingsList() {
+    const navigation = useNavigation();
+    const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
+    const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
+    const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);

-export default function Settings() {
    return (
        <ScrollView>
            <SafeAreaView>
-                <View style={{ padding: 20 }}>
-                    <Header style={colors.text}>{t('settings')}</Header>
-                    <Library />
-                    <Cache />
-                </View>
+                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
+                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
+                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
            </SafeAreaView>
        </ScrollView>
    );
+}
+
+const Stack = createStackNavigator();
+
+export default function Settings() {    
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <Stack.Navigator initialRouteName="SettingList"  screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
+            <Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
+            <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />
+            <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
+            <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
+        </Stack.Navigator>
+    );
 }
--- a/src/screens/index.tsx
+++ b/src/screens/index.tsx
@@ -15,6 +15,8 @@ import Onboarding from './Onboarding';
 import TrackPopupMenu from './modals/TrackPopupMenu';
 import { ModalStackParams } from './types';
 import { t } from '@localisation';
+import ErrorReportingAlert from 'utility/ErrorReportingAlert';
+import ErrorReportingPopup from './modals/ErrorReportingPopup';

 const Stack = createStackNavigator<ModalStackParams>();
 const Tab = createBottomTabNavigator();
@@ -48,27 +50,30 @@ function Screens() {
    }

    return (
-        <Tab.Navigator
-            screenOptions={({ route }) => ({
-                tabBarIcon: function TabBarIcon({ color, size }) {
-                    const Icon = getIcon(route.name);
+        <>
+            <ErrorReportingAlert />
+            <Tab.Navigator
+                screenOptions={({ route }) => ({
+                    tabBarIcon: function TabBarIcon({ color, size }) {
+                        const Icon = getIcon(route.name);

-                    if (!Icon) {
-                        return null;
+                        if (!Icon) {
+                            return null;
+                        }
+
+                        return <Icon fill={color} width={size} height={size} />;
                    }
-
-                    return <Icon fill={color} width={size} height={size} />;
-                }
-            })}
-            tabBarOptions={{
-                activeTintColor: THEME_COLOR,
-                inactiveTintColor: 'gray',
-            }}
-        >
-            <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
-            <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
-            <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
-        </Tab.Navigator>
+                })}
+                tabBarOptions={{
+                    activeTintColor: THEME_COLOR,
+                    inactiveTintColor: 'gray',
+                }}
+            >
+                <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
+                <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
+                <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
+            </Tab.Navigator>
+        </>
    );
 }

@@ -88,11 +93,12 @@ export default function Routes() {
            <Stack.Screen name="Screens" component={Screens} />
            <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
            <Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} />
+            <Stack.Screen name="ErrorReporting" component={ErrorReportingPopup} />
        </Stack.Navigator>
    );
 }

 export type NavigationProp = CompositeNavigationProp<
-    StackNavigationProp<Routes>,
-    BottomTabNavigationProp<Screens>
+StackNavigationProp<Routes>,
+BottomTabNavigationProp<Screens>
 >;
--- a/src/screens/modals/ErrorReportingPopup.tsx
+++ b/src/screens/modals/ErrorReportingPopup.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import Sentry from 'screens/Settings/components/Sentry';
+
+export default function ErrorReportingPopup() {
+    return (
+        <Modal fullSize={false}>
+            <Sentry />
+        </Modal>
+    );
+}
--- a/src/screens/modals/SetJellyfinServer/index.tsx
+++ b/src/screens/modals/SetJellyfinServer/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Text, Button, View } from 'react-native';
+import { Button, View } from 'react-native';
 import Modal from 'components/Modal';
 import Input from 'components/Input';
 import { setJellyfinCredentials } from 'store/settings/actions';
@@ -7,10 +7,12 @@ import { useDispatch } from 'react-redux';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import CredentialGenerator from './components/CredentialGenerator';
 import { THEME_COLOR } from 'CONSTANTS';
-import { colors } from 'components/Colors';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
+import Text from 'components/Text';

 export default function SetJellyfinServer() {
+    const defaultStyles = useDefaultStyles();
    // State for first screen
    const [serverUrl, setServerUrl] = useState<string>();
    const [isLogginIn, setIsLogginIn] = useState<boolean>(false);
@@ -34,7 +36,7 @@ export default function SetJellyfinServer() {
                />
            ) : (
                <View style={{ padding: 20, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                    <Text style={colors.text}>
+                    <Text>
                        {t('set-jellyfin-server-instruction')}
                    </Text>
                    <Input
@@ -44,7 +46,7 @@ export default function SetJellyfinServer() {
                        keyboardType="url"
                        autoCapitalize="none"
                        autoCorrect={false}
-                        style={{ ...colors.input, width: '100%' }}
+                        style={[ defaultStyles.input, { width: '100%' } ]}
                    />
                    <Button
                        title={t('set-jellyfin-server')}
--- a/src/screens/modals/TrackPopupMenu.tsx
+++ b/src/screens/modals/TrackPopupMenu.tsx
@@ -1,14 +1,16 @@
 import React, { useCallback } from 'react';
 import Modal from 'components/Modal';
-import { Text, Button } from 'react-native';
 import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
 import { ModalStackParams } from 'screens/types';
 import { useTypedSelector } from 'store';
-import { THEME_COLOR } from 'CONSTANTS';
 import { SubHeader } from 'components/Typography';
 import styled from 'styled-components/native';
 import usePlayTrack from 'utility/usePlayTrack';
 import { t } from '@localisation';
+import Button from 'components/Button';
+import PlayIcon from 'assets/play.svg';
+import QueueAppendIcon from 'assets/queue-append.svg';
+import Text from 'components/Text';

 type Route = RouteProp<ModalStackParams, 'TrackPopupMenu'>;

@@ -19,7 +21,11 @@ const Container = styled.View`
 const Buttons = styled.View`
    margin-top: 20px;
    flex-direction: row;
-    justify-content: space-around;
+    /* justify-content: space-around; */
+`;
+
+const ButtonSpacing = styled.View`
+    width: 8px;
 `;

 function TrackPopupMenu() {
@@ -49,8 +55,9 @@ function TrackPopupMenu() {
                <SubHeader>{track?.Name}</SubHeader>
                <Text>{track?.Album} - {track?.AlbumArtist}</Text>
                <Buttons>
-                    <Button title={t('play-next')} color={THEME_COLOR} onPress={handlePlayNext} />
-                    <Button title={t('add-to-queue')} color={THEME_COLOR} onPress={handleAddToQueue} />
+                    <Button title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
+                    <ButtonSpacing />
+                    <Button title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
                </Buttons>
            </Container>
        </Modal>
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,5 @@
 import { configureStore, getDefaultMiddleware, combineReducers } from '@reduxjs/toolkit';
-import { useSelector, TypedUseSelectorHook } from 'react-redux';
+import { useSelector, TypedUseSelectorHook, useDispatch } from 'react-redux';
 import AsyncStorage from '@react-native-community/async-storage';
 import { persistStore, persistReducer, PersistConfig } from 'redux-persist';
 import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2';
@@ -34,6 +34,7 @@ export type AppState = ReturnType<typeof reducers>;
 export type AppDispatch = typeof store.dispatch;
 export type AsyncThunkAPI = { state: AppState, dispatch: AppDispatch };
 export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;
+export const useAppDispatch = () => useDispatch<AppDispatch>();

 export const persistedStore = persistStore(store);

--- a/src/store/music/actions.ts
+++ b/src/store/music/actions.ts
@@ -1,7 +1,7 @@
 import { createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
 import { Album, AlbumTrack } from './types';
 import { AsyncThunkAPI } from '..';
-import { retrieveAlbums, retrieveAlbumTracks, retrieveRecentAlbums } from 'utility/JellyfinApi';
+import { retrieveAllAlbums, retrieveAlbumTracks, retrieveRecentAlbums, searchItem, retrieveAlbum } from 'utility/JellyfinApi';

 export const albumAdapter = createEntityAdapter<Album>({
    selectId: album => album.Id,
@@ -15,7 +15,7 @@ export const fetchAllAlbums = createAsyncThunk<Album[], undefined, AsyncThunkAPI
    '/albums/all',
    async (empty, thunkAPI) => {
        const credentials = thunkAPI.getState().settings.jellyfin;
-        return retrieveAlbums(credentials) as Promise<Album[]>;
+        return retrieveAllAlbums(credentials) as Promise<Album[]>;
    }
 );

@@ -44,4 +44,36 @@ export const fetchTracksByAlbum = createAsyncThunk<AlbumTrack[], string, AsyncTh
        const credentials = thunkAPI.getState().settings.jellyfin;
        return retrieveAlbumTracks(ItemId, credentials) as Promise<AlbumTrack[]>;
    }
+);
+
+type SearchAndFetchResults = {
+    albums: Album[];
+    results: (Album | AlbumTrack)[]; 
+};
+
+export const searchAndFetchAlbums = createAsyncThunk<
+SearchAndFetchResults,
+{ term: string, limit?: number },
+AsyncThunkAPI
+>(
+    '/search',
+    async ({ term, limit = 24 }, thunkAPI) => {
+        const state = thunkAPI.getState();
+        const results = await searchItem(state.settings.jellyfin, term, limit);
+
+        const albums = await Promise.all(results.filter((item) => (
+            !state.music.albums.ids.includes(item.Type === 'MusicAlbum' ? item.Id : item.AlbumId)
+        )).map(async (item) => {
+            if (item.Type === 'MusicAlbum') {
+                return item;
+            }
+
+            return retrieveAlbum(state.settings.jellyfin, item.AlbumId);
+        }));
+
+        return {
+            albums,
+            results
+        };
+    }
 );
--- a/src/store/music/index.ts
+++ b/src/store/music/index.ts
@@ -1,4 +1,4 @@
-import { fetchAllAlbums, albumAdapter, fetchTracksByAlbum, trackAdapter, fetchRecentAlbums } from './actions';
+import { fetchAllAlbums, albumAdapter, fetchTracksByAlbum, trackAdapter, fetchRecentAlbums, searchAndFetchAlbums } from './actions';
 import { createSlice, Dictionary, EntityId } from '@reduxjs/toolkit';
 import { Album, AlbumTrack } from './types';
 import { setJellyfinCredentials } from 'store/settings/actions';
@@ -60,6 +60,10 @@ const music = createSlice({
         * Fetch tracks by album
         */
        builder.addCase(fetchTracksByAlbum.fulfilled, (state, { payload }) => {
+            if (!payload.length) {
+                return;
+            }
+
            trackAdapter.upsertMany(state.tracks, payload);

            // Also store all the track ids in the album
@@ -73,6 +77,12 @@ const music = createSlice({
        builder.addCase(fetchTracksByAlbum.pending, (state) => { state.tracks.isLoading = true; });
        builder.addCase(fetchTracksByAlbum.rejected, (state) => { state.tracks.isLoading = false; });
        
+        builder.addCase(searchAndFetchAlbums.pending, (state) => { state.albums.isLoading = true; });
+        builder.addCase(searchAndFetchAlbums.fulfilled, (state, { payload }) => {
+            albumAdapter.upsertMany(state.albums, payload.albums);
+            state.albums.isLoading = false;
+        });
+        
        // Reset any caches we have when a new server is set
        builder.addCase(setJellyfinCredentials, () => initialState);
    }
--- a/src/store/music/types.ts
+++ b/src/store/music/types.ts
@@ -30,7 +30,7 @@ export interface Album {
    RunTimeTicks: number;
    ProductionYear: number;
    IsFolder: boolean;
-    Type: string;
+    Type: 'MusicAlbum';
    UserData: UserData;
    PrimaryImageAspectRatio: number;
    Artists: string[];
@@ -53,7 +53,7 @@ export interface AlbumTrack {
    ProductionYear: number;
    IndexNumber: number;
    IsFolder: boolean;
-    Type: string;
+    Type: 'Audio';
    UserData: UserData;
    Artists: string[];
    ArtistItems: ArtistItem[];
--- a/src/store/player/index.ts
+++ b/src/store/player/index.ts
@@ -1,10 +1,26 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Track } from 'react-native-track-player';
+
+interface State {
+    addedTrackCount: number,
+    currentTrack: Track | undefined,   
+}
+
+const initialState: State = {
+    addedTrackCount: 0,
+    currentTrack: undefined,
+};

 const player = createSlice({
    name: 'player',
-    initialState: 0,
+    initialState,
    reducers: {
-        addNewTrackToPlayer: (state) => state + 1,
+        addNewTrackToPlayer: (state) => {
+            state.addedTrackCount += 1;
+        },
+        setCurrentTrack: (state, action: PayloadAction<Track | undefined>) => {
+            state.currentTrack = action.payload;
+        },
    }
 });

--- a/src/store/settings/actions.ts
+++ b/src/store/settings/actions.ts
@@ -2,4 +2,5 @@ import { createAction } from '@reduxjs/toolkit';

 export const setJellyfinCredentials = createAction<{ access_token: string, user_id: string, uri: string, deviced_id: string; }>('SET_JELLYFIN_CREDENTIALS');
 export const setBitrate = createAction<number>('SET_BITRATE');
-export const setOnboardingStatus = createAction<boolean>('SET_ONBOARDING_STATUS');
+export const setOnboardingStatus = createAction<boolean>('SET_ONBOARDING_STATUS');
+export const setReceivedErrorReportingAlert = createAction<void>('SET_RECEIVED_ERROR_REPORTING_ALERT');
--- a/src/store/settings/index.ts
+++ b/src/store/settings/index.ts
@@ -1,5 +1,5 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { setBitrate, setJellyfinCredentials, setOnboardingStatus } from './actions';
+import { setReceivedErrorReportingAlert, setBitrate, setJellyfinCredentials, setOnboardingStatus } from './actions';

 interface State {
    jellyfin?: {
@@ -10,11 +10,13 @@ interface State {
    }
    bitrate: number;
    isOnboardingComplete: boolean;
+    hasReceivedErrorReportingAlert: boolean;
 }

 const initialState: State = {
    bitrate: 140000000,
    isOnboardingComplete: false,
+    hasReceivedErrorReportingAlert: false,
 };

 const settings = createReducer(initialState, {
@@ -29,6 +31,10 @@ const settings = createReducer(initialState, {
    [setOnboardingStatus.type]: (state, action) => ({
        ...state,
        isOnboardingComplete: action.payload,
+    }),
+    [setReceivedErrorReportingAlert.type]: (state) => ({
+        ...state,
+        hasReceivedErrorReportingAlert: true,
    })
 });

--- a/src/utility/ErrorReportingAlert.ts
+++ b/src/utility/ErrorReportingAlert.ts
@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import { Alert } from 'react-native';
+import { useTypedSelector } from 'store';
+import { t } from '@localisation';
+import { setReceivedErrorReportingAlert } from 'store/settings/actions';
+import { setSentryStatus } from './Sentry';
+import { useNavigation } from '@react-navigation/native';
+import { useDispatch } from 'react-redux';
+
+/**
+ * This will send out an alert message asking the user if they want to enable
+ * error reporting.
+ */
+export default function ErrorReportingAlert() {
+    const { hasReceivedErrorReportingAlert } = useTypedSelector(state => state.settings);
+    const navigation = useNavigation();
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        // Only send out alert if we haven't done so ever
+        if (!hasReceivedErrorReportingAlert) {
+            // Generate the alert
+            Alert.alert(
+                t('enable-error-reporting'),
+                t('enable-error-reporting-description'),
+                [
+                    {
+                        text: t('enable'),
+                        style: 'default',
+                        onPress: () => {
+                            setSentryStatus(true);
+                        }
+                    },
+                    {
+                        text: t('disable'),
+                        style: 'destructive',
+                        onPress: () => {
+                            setSentryStatus(false);
+                        }
+                    },
+                    {
+                        text: t('more-info'),
+                        style: 'cancel',
+                        onPress: () => {
+                            navigation.navigate('ErrorReporting');
+                        }
+                    }
+                ]
+            );
+
+            // Store the flag that we have sent out the alert, so that we don't
+            // have to do so anymore in the future.
+            dispatch(setReceivedErrorReportingAlert());
+        }
+        
+    }, []);
+
+    return null;
+}
--- a/src/utility/JellyfinApi.ts
+++ b/src/utility/JellyfinApi.ts
@@ -1,6 +1,6 @@
 import { Track } from 'react-native-track-player';
 import { AppState, useTypedSelector } from 'store';
-import { AlbumTrack } from 'store/music/types';
+import { Album, AlbumTrack } from 'store/music/types';

 type Credentials = AppState['settings']['jellyfin'];

@@ -22,11 +22,7 @@ const baseTrackOptions: Record<string, string> = {
    // This must be set to support client seeking
    TranscodingProtocol: 'hls',
    TranscodingContainer: 'ts',
-    // NOTE: We cannot send a comma-delimited list yet due to an issue with
-    // react-native-track-player. This is set to be merged and released very
-    // soon: https://github.com/react-native-kit/react-native-track-player/pull/950
-    // Container: 'mp3',
-    Container: 'mp3,aac,m4a,m4b|aac,alac,m4a,m4b|alac,flac',
+    Container: 'mp3,aac,m4a,m4b|aac,alac,m4a,m4b|alac,flac|ogg',
    AudioCodec: 'aac',
    static: 'true',
 };
@@ -53,7 +49,9 @@ export function generateTrack(track: AlbumTrack, credentials: Credentials): Trac
        title: track.Name,
        artist: track.Artists.join(', '),
        album: track.Album,
-        artwork: getImage(track.Id, credentials),
+        artwork: track.AlbumId
+            ? getImage(track.AlbumId, credentials)
+            : getImage(track.Id, credentials),
    };
 }

@@ -72,7 +70,7 @@ const albumParams = new URLSearchParams(albumOptions).toString();
 /**
 * Retrieve all albums that are available on the Jellyfin server
 */
-export async function retrieveAlbums(credentials: Credentials) {
+export async function retrieveAllAlbums(credentials: Credentials) {
    const config = generateConfig(credentials);
    const albums = await fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items?${albumParams}`, config)
        .then(response => response.json());
@@ -80,6 +78,15 @@ export async function retrieveAlbums(credentials: Credentials) {
    return albums.Items;
 }

+/**
+ * Retrieve a single album
+ */
+export async function retrieveAlbum(credentials: Credentials, id: string): Promise<Album> {
+    const config = generateConfig(credentials);
+    return fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items/${id}`, config)
+        .then(response => response.json());
+}
+
 const latestAlbumsOptions = {
    IncludeItemTypes: 'MusicAlbum',
    Fields: 'DateCreated',
@@ -124,11 +131,66 @@ export async function retrieveAlbumTracks(ItemId: string, credentials: Credentia
    return album.Items;
 }

+/**
+ * Retrieve an image URL for a given ItemId
+ */
 export function getImage(ItemId: string, credentials: Credentials): string {
    return encodeURI(`${credentials?.uri}/Items/${ItemId}/Images/Primary?format=jpeg`);
 }

+/**
+ * Create a hook that can convert ItemIds to image URLs
+ */
 export function useGetImage() {
    const credentials = useTypedSelector((state) => state.settings.jellyfin);
    return (ItemId: string) => getImage(ItemId, credentials);
-}
+}
+
+const trackParams = {
+    SortBy: 'AlbumArtist,SortName',
+    SortOrder: 'Ascending',
+    IncludeItemTypes: 'Audio',
+    Recursive: 'true',
+    Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo,DateCreated',
+};
+
+/**
+ * Retrieve all possible tracks that can be found in Jellyfin
+ */
+export async function retrieveAllTracks(credentials: Credentials) {
+    const config = generateConfig(credentials);
+    const tracks = await fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items?${trackParams}`, config)
+        .then(response => response.json());
+
+    return tracks.Items;
+}
+
+const searchParams = {
+    IncludeItemTypes: 'Audio,MusicAlbum',
+    SortBy: 'Album,SortName',
+    SortOrder: 'Ascending',
+    Recursive: 'true',
+};
+
+/**
+ * Remotely search the Jellyfin library for a particular search term
+ */
+export async function searchItem(
+    credentials: Credentials,
+    term: string, limit = 24
+): Promise<(Album | AlbumTrack)[]> {
+    const config = generateConfig(credentials);
+
+    const params = new URLSearchParams({
+        ...searchParams,
+        SearchTerm: term,
+        Limit: limit.toString(),
+    }).toString();
+
+    const results = await fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items?${params}`, config)
+        .then(response => response.json());
+
+    return results.Items;
+}
+
+
--- a/src/utility/Sentry.ts
+++ b/src/utility/Sentry.ts
@@ -0,0 +1,50 @@
+import { SENTRY_DSN } from '@env';
+import AsyncStorage from '@react-native-community/async-storage';
+import * as Sentry from '@sentry/react-native';
+
+const SENTRY_ASYNC__ITEM_STRING = 'sentry_enabled';
+export let isSentryEnabled = false;
+
+/**
+ * Setup Sentry based on what value is stored in AsyncStorage. 
+ */
+export async function setupSentry(): Promise<void> {
+    // First, we'll retrieve the user settings. This delays Sentry being active
+    // slightly, at the bonus of acutally being able to send off reports for
+    // start-up stuff.
+    isSentryEnabled = (await AsyncStorage.getItem(SENTRY_ASYNC__ITEM_STRING)) === 'true';
+
+    // Make sure the DSN is actually set, in order to prevent weird erros.
+    if (SENTRY_DSN) {
+        Sentry.init({
+            dsn: SENTRY_DSN,
+            // Before we send any event, check whether the Sentry SDK should be
+            // enabled based on user settings.
+            beforeSend(event) {
+                // If so, pass off the event to the back-end
+                if (isSentryEnabled) {
+                    return event;
+                }
+
+                // If not, don't sent a thing
+                return null;
+            }
+        });
+    }
+}
+
+/**
+ * Helper function to enable or disable the Sentry SDK for this app.
+ */
+export async function setSentryStatus(isEnabled: boolean): Promise<void> {
+    // GUARD: If nothing's changed, change nothing
+    if (isEnabled === isSentryEnabled) {
+        return;
+    }
+
+    // First, store the value in Async Storage
+    await AsyncStorage.setItem(SENTRY_ASYNC__ITEM_STRING, isEnabled.toString());
+
+    // Then, assign it to the variable
+    isSentryEnabled = isEnabled;
+}
--- a/src/utility/useCurrentTrack.ts
+++ b/src/utility/useCurrentTrack.ts
@@ -1,35 +1,15 @@
-import { useEffect, useState } from 'react';
-import TrackPlayer, { usePlaybackState, Track } from 'react-native-track-player';
+import { Track } from 'react-native-track-player';
+import { useTypedSelector } from 'store';
+
+const idEqual = (left: Track | undefined, right: Track | undefined) => {
+    return left?.id === right?.id;
+};

 /**
 * This hook retrieves the current playing track from TrackPlayer
 */
 export default function useCurrentTrack(): Track | undefined {
-    const state = usePlaybackState();
-    const [track, setTrack] = useState<Track>();
-
-    useEffect(() => {
-        const fetchTrack = async () => {
-            const currentTrackId = await TrackPlayer.getCurrentTrack();
-        
-            // GUARD: Only fetch current track if there is a current track
-            if (!currentTrackId) {
-                setTrack(undefined);
-            }
-
-            // GUARD: Only retrieve new track if it is different from the one we
-            // have currently in state.
-            if (currentTrackId === track?.id){
-                return;
-            }
-
-            // If it is different, retrieve the track and save it
-            const currentTrack = await TrackPlayer.getTrack(currentTrackId);
-            setTrack(currentTrack);
-        };
-
-        fetchTrack();
-    }, [state, track, setTrack]);
-
+    const track = useTypedSelector(state => state.player.currentTrack, idEqual);
+    
    return track;
 }
--- a/src/utility/useQueue.ts
+++ b/src/utility/useQueue.ts
@@ -8,7 +8,7 @@ import { useTypedSelector } from 'store';
 export default function useQueue(): Track[] {
    const state = usePlaybackState();
    const [queue, setQueue] = useState<Track[]>([]);
-    const addedTrackCount = useTypedSelector(state => state.player);
+    const addedTrackCount = useTypedSelector(state => state.player.addedTrackCount);

    useEffect(() => {
        TrackPlayer.getQueue().then(setQueue);
Author	SHA1	Message	Date
Lei Nelissen	fa05935017	Release build 15	2021-04-24 23:18:01 +02:00
Lei Nelissen	2de5cc8e6c	Polish search engine UX	2021-04-24 15:30:07 +02:00
Lei Nelissen	24d484ca25	Add track results to search queries	2021-04-24 14:50:43 +02:00
Lei Nelissen	a7b24cf4eb	Fix XMLDom issue	2021-04-24 12:21:02 +02:00
Lei Nelissen	eaa1402173	Update packages	2021-04-24 12:18:56 +02:00
Lei Nelissen	1edeb00631	Fix active button color on Android	2021-04-03 15:19:38 +02:00
Lei Nelissen	d422c1ff1e	Pull current track from Redux store Fixes #40	2021-04-03 14:49:49 +02:00
Lei Nelissen	28b330ad4c	Update all dependencies	2021-04-03 14:49:01 +02:00
Lei Nelissen	a867513212	Update Fastlane Sentry plugin	2021-03-22 09:49:33 +01:00
Lei Nelissen	14a6341fae	Release build 13	2021-03-22 09:24:36 +01:00
Lei Nelissen	645f1307f3	Add OGG Support Fixes #12	2021-03-21 23:01:07 +01:00
Lei Nelissen	3f16bd6465	Show Album art instead of Track art if an AlbumId is available Fixes #13	2021-03-21 22:55:35 +01:00
Lei Nelissen	5c15d730b3	Add AirPlay casting button	2021-03-21 22:42:04 +01:00
Lei Nelissen	603bf10154	Switch back to regular react-native-track-player version as patch was merged	2021-03-21 22:12:36 +01:00
Lei Nelissen	57f9e0e08e	Upgrade Android build for React Native 0.64	2021-03-21 21:50:35 +01:00
Lei Nelissen	597a348eab	Release build 12	2021-03-21 21:50:15 +01:00
Lei Nelissen	8860581450	Upgrade to React Native 0.64	2021-03-21 20:16:26 +01:00
Lei Nelissen	a92ff581ae	Merge pull request #38 from yisiliang/master add Chinese language support	2021-03-21 18:51:04 +01:00
YiSiliang	cd2e333caa	add Chinese language support	2021-03-14 21:07:50 +08:00
Lei Nelissen	4ba83b8efc	Release build 11	2021-03-09 22:42:34 +01:00
Lei Nelissen	e4daccfe5e	Update packages	2021-03-09 22:25:43 +01:00
Lei Nelissen	76c45623a0	Fix launch crash on devices without fallback languages	2021-03-09 22:21:41 +01:00
Lei Nelissen	e4b93ec8c8	Release build 10	2021-02-13 22:16:04 +01:00
Lei Nelissen	4635266273	Add screens for opting into Sentry error tracking	2021-02-13 15:34:43 +01:00
Lei Nelissen	8dc287e56a	Make theming somewhat more performant	2021-02-13 12:14:57 +01:00
Lei Nelissen	6cfa8f7624	Attempt fix for JELLYFIN-AUDIO-PLAYER-M	2021-02-11 23:55:49 +01:00
Lei Nelissen	6cf5b8167b	Release build 9	2021-02-11 23:47:42 +01:00
Lei Nelissen	dc76ea27d3	Double-check whether an album has tracks	2021-02-11 23:46:03 +01:00
Lei Nelissen	7adc96ba12	Fancy new buttons and more consistent colors	2021-02-11 23:43:21 +01:00
Lei Nelissen	42eb7a169b	Release build number 8	2021-02-09 23:33:34 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.39 84.08"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Regular-M"><path d="M3.66,0A3.62,3.62,0,0,0,0,3.66,3.67,3.67,0,0,0,3.66,7.37h91a3.75,3.75,0,0,0,3.76-3.71A3.71,3.71,0,0,0,94.63,0Zm0,25.54A3.67,3.67,0,0,0,0,29.25a3.62,3.62,0,0,0,3.66,3.66h91a3.71,3.71,0,0,0,3.76-3.66,3.75,3.75,0,0,0-3.76-3.71ZM.05,50.68v11c0,6.93,4.88,11.18,11.77,11.18h14.4V78c0,4,3.76,5.47,6.84,3l13.23-10.6a3.71,3.71,0,0,0,0-6L33.06,53.86c-3-2.35-6.84-.88-6.84,3v4.88H12.89A1.51,1.51,0,0,1,11.23,60V50.68c0-4-2.05-6.44-5.61-6.44S.05,46.73.05,50.68Zm61.18.44a3.69,3.69,0,0,0,0,7.38h33.4a3.69,3.69,0,1,0,0-7.38Zm0,25.59a3.69,3.69,0,0,0,0,7.37h33.4a3.69,3.69,0,1,0,0-7.37Z"/></g></g></g></svg>