Fix active button color on Android

Fixes #40

.editorconfig

@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf

.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'
         ]
     }
 };

.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

.github/workflows/fastlane.yml

@@ -41,6 +41,12 @@ jobs:
     - name: Install Node dependencies
       run: npm install
     - name: Generate APK
+      env:
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+        SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+        SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+        SENTRY_URL: ${{ secrets.SENTRY_URL }}
       run: fastlane android beta
     - name: Upload artifact
       uses: actions/upload-artifact@v2

.gitignore

@@ -65,4 +65,7 @@ buck-out/
 build/
 fastlane/report.xml
 fastlane/Appfile
-certificates/
+certificates/
+
+.env
+sentry.properties

Gemfile

@@ -7,3 +7,6 @@ git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
 # gem "rails"
 
 gem "fastlane", "~> 2.153"
+
+plugins_path = File.join(File.dirname(__FILE__), 'fastlane', 'Pluginfile')
+eval_gemfile(plugins_path) if File.exist?(plugins_path)

Gemfile.lock

@@ -1,27 +1,28 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.2)
+    CFPropertyList (3.0.3)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
+    artifactory (3.0.15)
     atomos (0.1.3)
-    aws-eventstream (1.1.0)
-    aws-partitions (1.355.0)
-    aws-sdk-core (3.104.3)
+    aws-eventstream (1.1.1)
+    aws-partitions (1.434.0)
+    aws-sdk-core (3.113.0)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.239.0)
       aws-sigv4 (~> 1.1)
       jmespath (~> 1.0)
-    aws-sdk-kms (1.36.0)
-      aws-sdk-core (~> 3, >= 3.99.0)
+    aws-sdk-kms (1.43.0)
+      aws-sdk-core (~> 3, >= 3.112.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.78.0)
-      aws-sdk-core (~> 3, >= 3.104.3)
+    aws-sdk-s3 (1.92.0)
+      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.3)
+    babosa (1.0.4)
     claide (1.0.3)
     colored (1.2)
     colored2 (3.1.2)
@@ -29,24 +30,28 @@ GEM
       highline (~> 1.7.2)
     declarative (0.0.20)
     declarative-option (0.1.0)
-    digest-crc (0.6.1)
-      rake (~> 13.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.0.0)
-    excon (0.76.0)
-    faraday (1.0.1)
+    emoji_regex (3.2.2)
+    excon (0.79.0)
+    faraday (1.3.0)
+      faraday-net_http (~> 1.0)
       multipart-post (>= 1.2, < 3)
-    faraday-cookie_jar (0.0.6)
-      faraday (>= 0.7.4)
+      ruby2_keywords
+    faraday-cookie_jar (0.0.7)
+      faraday (>= 0.8.0)
       http-cookie (~> 1.0.0)
+    faraday-net_http (1.0.1)
     faraday_middleware (1.0.0)
       faraday (~> 1.0)
-    fastimage (2.2.0)
-    fastlane (2.156.1)
+    fastimage (2.2.3)
+    fastlane (2.178.0)
       CFPropertyList (>= 2.3, < 4.0.0)
       addressable (>= 2.3, < 3.0.0)
+      artifactory (~> 3.0)
       aws-sdk-s3 (~> 1.0)
       babosa (>= 1.0.3, < 2.0.0)
       bundler (>= 1.12.0, < 3.0.0)
@@ -67,6 +72,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)
@@ -80,6 +86,7 @@ GEM
       xcodeproj (>= 1.13.0, < 2.0.0)
       xcpretty (~> 0.3.0)
       xcpretty-travis-formatter (>= 0.0.3)
+    fastlane-plugin-sentry (1.8.1)
     gh_inspector (1.1.3)
     google-api-client (0.38.0)
       addressable (~> 2.5, >= 2.5.1)
@@ -89,20 +96,35 @@ GEM
       representable (~> 3.0)
       retriable (>= 2.0, < 4.0)
       signet (~> 0.12)
-    google-cloud-core (1.5.0)
+    google-apis-core (0.3.0)
+      addressable (~> 2.5, >= 2.5.1)
+      googleauth (~> 0.14)
+      httpclient (>= 2.8.1, < 3.0)
+      mini_mime (~> 1.0)
+      representable (~> 3.0)
+      retriable (>= 2.0, < 4.0)
+      rexml
+      signet (~> 0.14)
+      webrick
+    google-apis-iamcredentials_v1 (0.2.0)
+      google-apis-core (~> 0.1)
+    google-apis-storage_v1 (0.3.0)
+      google-apis-core (~> 0.1)
+    google-cloud-core (1.6.0)
       google-cloud-env (~> 1.0)
       google-cloud-errors (~> 1.0)
-    google-cloud-env (1.3.3)
+    google-cloud-env (1.5.0)
       faraday (>= 0.17.3, < 2.0)
-    google-cloud-errors (1.0.1)
-    google-cloud-storage (1.27.0)
+    google-cloud-errors (1.1.0)
+    google-cloud-storage (1.31.0)
       addressable (~> 2.5)
       digest-crc (~> 0.4)
-      google-api-client (~> 0.33)
+      google-apis-iamcredentials_v1 (~> 0.1)
+      google-apis-storage_v1 (~> 0.1)
       google-cloud-core (~> 1.2)
       googleauth (~> 0.9)
       mini_mime (~> 1.0)
-    googleauth (0.13.1)
+    googleauth (0.16.0)
       faraday (>= 0.17.3, < 2.0)
       jwt (>= 1.4, < 3.0)
       memoist (~> 0.16)
@@ -114,28 +136,30 @@ GEM
       domain_name (~> 0.5)
     httpclient (2.8.3)
     jmespath (1.4.0)
-    json (2.3.1)
-    jwt (2.2.1)
+    json (2.5.1)
+    jwt (2.2.2)
     memoist (0.16.2)
-    mini_magick (4.10.1)
+    mini_magick (4.11.0)
     mini_mime (1.0.2)
     multi_json (1.15.0)
     multipart-post (2.0.0)
     nanaimo (0.3.0)
-    naturally (2.2.0)
+    naturally (2.2.1)
     os (1.1.1)
-    plist (3.5.0)
-    public_suffix (4.0.5)
-    rake (13.0.1)
+    plist (3.6.0)
+    public_suffix (4.0.6)
+    rake (13.0.3)
     representable (3.0.4)
       declarative (< 0.1.0)
       declarative-option (< 0.2.0)
       uber (< 0.2.0)
     retriable (3.1.2)
+    rexml (3.2.4)
     rouge (2.0.7)
+    ruby2_keywords (0.0.4)
     rubyzip (2.3.0)
     security (0.1.3)
-    signet (0.14.0)
+    signet (0.15.0)
       addressable (~> 2.3)
       faraday (>= 0.17.3, < 2.0)
       jwt (>= 1.5, < 3.0)
@@ -156,8 +180,9 @@ GEM
       unf_ext
     unf_ext (0.0.7.7)
     unicode-display_width (1.7.0)
+    webrick (1.7.0)
     word_wrap (1.0.0)
-    xcodeproj (1.18.0)
+    xcodeproj (1.19.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
@@ -165,7 +190,7 @@ GEM
       nanaimo (~> 0.3.0)
     xcpretty (0.3.0)
       rouge (~> 2.0.7)
-    xcpretty-travis-formatter (1.0.0)
+    xcpretty-travis-formatter (1.0.1)
       xcpretty (~> 0.2, >= 0.0.7)
 
 PLATFORMS
@@ -173,6 +198,7 @@ PLATFORMS
 
 DEPENDENCIES
   fastlane (~> 2.153)
+  fastlane-plugin-sentry
 
 BUNDLED WITH
    1.17.2

README.md

@@ -60,4 +60,10 @@ fastlane android beta
 ```
 
 ## Licensing and Credits
-This work is licensed under the MIT license and was built by Lei Nelissen.
+This work is licensed under the MIT license and was built by Lei Nelissen.
+
+<a href="https://bmd.studio">
+    <img src="./docs/images/bmd-logo-icon.png" alt="BMD Studio" width="150" height="150" />
+</a>
+
+An Apple Developer license, as well as various forms of support are graciously provided for by [BMD Studio](https://bmd.studio), experts in finding creative solutions for difficult problems.

android/app/build.gradle

@@ -83,6 +83,7 @@ project.ext.react = [
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
+apply from: "../../node_modules/@sentry/react-native/sentry.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -122,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 {
@@ -171,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)
             }
 
         }

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>

android/app/src/main/AndroidManifest.xml

@@ -9,6 +9,7 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+      android:usesCleartextTraffic="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"
@@ -21,7 +22,5 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
-
 </manifest>

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

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.33.1
+FLIPPER_VERSION=0.75.1

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

app.json

@@ -1,4 +1,4 @@
 {
   "name": "JellyfinAudioPlayer",
-  "displayName": "Audio Player"
+  "displayName": "Jellyfin Player"
 }

babel.config.js

@@ -1,19 +1,36 @@
 module.exports = {
-    presets: ['module:metro-react-native-babel-preset'],
+    presets: [
+        'module:metro-react-native-babel-preset',
+    ],
     plugins: [
         [
             'module-resolver',
             {
-                // root: ['./src'],
+                root: ['.'],
+                extensions: [
+                    '.ios.ts',
+                    '.android.ts',
+                    '.ts',
+                    '.ios.tsx',
+                    '.android.tsx',
+                    '.tsx',
+                    '.jsx',
+                    '.js',
+                    '.json',
+                ],
                 alias: {
                     store: './src/store',
                     components: './src/components',
                     utility: './src/utility',
                     screens: './src/screens',
                     assets: './src/assets',
+                    '@localisation': './src/localisation',
                     CONSTANTS: './src/CONSTANTS',
                 }
             }
+        ],
+        [
+            'module:react-native-dotenv'
         ]
     ]
 };

fastlane/Fastfile

@@ -7,7 +7,7 @@ platform :ios do
             output_path: 'certificates/'
         )
         build_app(
-            scheme: "JellyfinAudioPlayer",
+            scheme: "Jellyfin Player",
             export_method: "development",
             output_directory: "build",
             workspace: "ios/JellyfinAudioPlayer.xcworkspace"
@@ -30,12 +30,48 @@ platform :ios do
             xcodeproj: "ios/JellyfinAudioPlayer.xcodeproj"
         )
         build_app(
-            scheme: "JellyfinAudioPlayer",
+            scheme: "Jellyfin Player",
             output_directory: "build",
             workspace: "ios/JellyfinAudioPlayer.xcworkspace",
             export_method: "app-store",
         )
         upload_to_testflight
+        build_number = get_build_number(
+            xcodeproj: "ios/JellyfinAudioPlayer.xcodeproj"
+        )
+        Dir.chdir("..") do
+            sh(
+                "npx", "react-native", "bundle", 
+                "--dev", "false",
+                "--platform", "ios",
+                "--entry-file", "index.js",
+                "--bundle-output", "build/index.ios.bundle",
+                "--sourcemap-output", "build/index.ios.bundle.map"
+            )
+        end
+
+        sentry_create_release(
+            version: "1.0+#{build_number}",
+            app_identifier: 'nl.moeilijkedingen.jellyfinaudioplayer',
+            finalize: true
+        )
+        sentry_upload_dsym(
+            dsym_path: 'build/Jellyfin Player.app.dSYM.zip',
+            info_plist: 'ios/JellyfinAudioPlayer/Info.plist',
+        )
+        sentry_upload_file(
+            version: "1.0+#{build_number}",
+            app_identifier: 'nl.moeilijkedingen.jellyfinaudioplayer',
+            dist: build_number,
+            file: 'build/index.ios.bundle',
+        )
+        sentry_upload_sourcemap(
+            version: "1.0+#{build_number}",
+            app_identifier: 'nl.moeilijkedingen.jellyfinaudioplayer',
+            dist: build_number,
+            sourcemap: 'build/index.ios.bundle.map',
+            rewrite: true
+        )
     end
 end
 

fastlane/Pluginfile

@@ -0,0 +1,5 @@
+# Autogenerated by fastlane
+#
+# Ensure this file is checked in to source control!
+
+gem 'fastlane-plugin-sentry'

index.js

@@ -1,18 +1,11 @@
-// import React from 'react';
- 
-// // if (process.env.NODE_ENV === 'development') {
-// //     const whyDidYouRender = require('@welldone-software/why-did-you-render');
-// //     whyDidYouRender(React, {
-// //         trackAllPureComponents: true,
-// //     });
-// // }
-
 import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 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 { setupSentry } from 'utility/Sentry';
 
+setupSentry();
 AppRegistry.registerComponent(appName, () => App);
 TrackPlayer.registerPlaybackService(() => PlaybackService);

ios/File.swift

@@ -0,0 +1,8 @@
+//
+//  File.swift
+//  JellyfinAudioPlayer
+//
+//  Created by Lei Nelissen on 02/11/2020.
+//
+
+import Foundation

ios/JellyfinAudioPlayer-Bridging-Header.h

@@ -0,0 +1,4 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//
+

ios/JellyfinAudioPlayer-tvOS/Info.plist

@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>NSAppTransportSecurity</key>
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-</dict>
-</plist>

ios/JellyfinAudioPlayer-tvOSTests/Info.plist

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>BNDL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-</dict>
-</plist>

ios/JellyfinAudioPlayer.xcodeproj/project.pbxproj

@@ -13,6 +13,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		463612208457EBB4B723000A /* libPods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 842AB597D56E84A4ACDC4735 /* libPods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.a */; };
+		4FA1B23D2550A94C007A035E /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4FA1B23C2550A94C007A035E /* File.swift */; };
 		A807E2BB233D6F9347D8A95C /* libPods-JellyfinAudioPlayer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 71370E61E2CC6BD9372ADCF3 /* libPods-JellyfinAudioPlayer.a */; };
 /* End PBXBuildFile section */
 
@@ -39,6 +40,8 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = JellyfinAudioPlayer/main.m; sourceTree = "<group>"; };
 		2710519FCC41B05FDE6738DF /* Pods-JellyfinAudioPlayer.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JellyfinAudioPlayer.release.xcconfig"; path = "Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer.release.xcconfig"; sourceTree = "<group>"; };
 		39572B38534BBDBB596C8C95 /* Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.release.xcconfig"; path = "Target Support Files/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.release.xcconfig"; sourceTree = "<group>"; };
+		4FA1B23B2550A94B007A035E /* JellyfinAudioPlayer-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "JellyfinAudioPlayer-Bridging-Header.h"; sourceTree = "<group>"; };
+		4FA1B23C2550A94C007A035E /* File.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = File.swift; sourceTree = "<group>"; };
 		590BEA7DE65819C5B5FDAD06 /* Pods-JellyfinAudioPlayer-tvOSTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JellyfinAudioPlayer-tvOSTests.release.xcconfig"; path = "Target Support Files/Pods-JellyfinAudioPlayer-tvOSTests/Pods-JellyfinAudioPlayer-tvOSTests.release.xcconfig"; sourceTree = "<group>"; };
 		71370E61E2CC6BD9372ADCF3 /* libPods-JellyfinAudioPlayer.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-JellyfinAudioPlayer.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		7D43C7610851B9666193E3F6 /* libPods-JellyfinAudioPlayer-tvOSTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-JellyfinAudioPlayer-tvOSTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -99,6 +102,8 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				4FA1B23C2550A94C007A035E /* File.swift */,
+				4FA1B23B2550A94B007A035E /* JellyfinAudioPlayer-Bridging-Header.h */,
 			);
 			name = JellyfinAudioPlayer;
 			sourceTree = "<group>";
@@ -174,6 +179,7 @@
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
 				BDE784ECF29EF861DBFF49D7 /* [CP] Copy Pods Resources */,
+				476A07969B11CA4E09819AC0 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -196,6 +202,8 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				B9FB8FC65CEFF9AFAC71127E /* [CP] Copy Pods Resources */,
+				1DC46C84C90B4D84A18AC142 /* Upload Debug Symbols to Sentry */,
+				E8FF56077B675D4D92D5CC25 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -222,7 +230,7 @@
 					};
 					13B07F861A680F5B00A75B9A = {
 						DevelopmentTeam = 238P3C58WC;
-						LastSwiftMigration = 1120;
+						LastSwiftMigration = 1210;
 						ProvisioningStyle = Automatic;
 					};
 				};
@@ -281,7 +289,39 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=$(which node)\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
+			shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nexport NODE_BINARY=$(which node)\n../node_modules/@sentry/cli/bin/sentry-cli react-native xcode ../node_modules/react-native/scripts/react-native-xcode.sh\n";
+		};
+		1DC46C84C90B4D84A18AC142 /* Upload Debug Symbols to Sentry */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Upload Debug Symbols to Sentry";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			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;
@@ -363,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;
@@ -398,6 +456,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
+				4FA1B23D2550A94C007A035E /* File.swift in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -429,6 +488,7 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 8DAD3DCD6450C4255A20940E /* Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.debug.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = 238P3C58WC;
@@ -454,6 +514,7 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 39572B38534BBDBB596C8C95 /* Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.release.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				CODE_SIGN_STYLE = Automatic;
 				COPY_PHASE_STRIP = NO;
@@ -481,7 +542,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3;
+				CURRENT_PROJECT_VERSION = 13;
 				DEVELOPMENT_TEAM = 238P3C58WC;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -498,6 +559,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = nl.moeilijkedingen.jellyfinaudioplayer;
 				PRODUCT_NAME = "Jellyfin Player";
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				SWIFT_OBJC_BRIDGING_HEADER = "JellyfinAudioPlayer-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
@@ -511,7 +573,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3;
+				CURRENT_PROJECT_VERSION = 13;
 				DEVELOPMENT_TEAM = 238P3C58WC;
 				INFOPLIST_FILE = JellyfinAudioPlayer/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -524,6 +586,7 @@
 				PRODUCT_NAME = "Jellyfin Player";
 				PROVISIONING_PROFILE = "915c5213-22f6-4f9d-8065-2a06300f9bfb";
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				SWIFT_OBJC_BRIDGING_HEADER = "JellyfinAudioPlayer-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
@@ -562,6 +625,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -577,7 +641,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
@@ -586,6 +650,7 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				PRODUCT_NAME = "Jellyfin Player";
 				SDKROOT = iphoneos;
 			};
 			name = Debug;
@@ -623,6 +688,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -631,7 +697,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
@@ -639,6 +705,7 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				PRODUCT_NAME = "Jellyfin Player";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
 			};

ios/JellyfinAudioPlayer.xcodeproj/xcshareddata/xcschemes/JellyfinAudioPlayer-tvOS.xcscheme

@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Scheme
-   LastUpgradeVersion = "1130"
-   version = "1.3">
-   <BuildAction
-      parallelizeBuildables = "YES"
-      buildImplicitDependencies = "YES">
-      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-               BuildableName = "JellyfinAudioPlayer-tvOS.app"
-               BlueprintName = "JellyfinAudioPlayer-tvOS"
-               ReferencedContainer = "container:JellyfinAudioPlayer.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-      </BuildActionEntries>
-   </BuildAction>
-   <TestAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-         <TestableReference
-            skipped = "NO">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "2D02E48F1E0B4A5D006451C7"
-               BuildableName = "JellyfinAudioPlayer-tvOSTests.xctest"
-               BlueprintName = "JellyfinAudioPlayer-tvOSTests"
-               ReferencedContainer = "container:JellyfinAudioPlayer.xcodeproj">
-            </BuildableReference>
-         </TestableReference>
-      </Testables>
-   </TestAction>
-   <LaunchAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      launchStyle = "0"
-      useCustomWorkingDirectory = "NO"
-      ignoresPersistentStateOnLaunch = "NO"
-      debugDocumentVersioning = "YES"
-      debugServiceExtension = "internal"
-      allowLocationSimulation = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-            BuildableName = "JellyfinAudioPlayer-tvOS.app"
-            BlueprintName = "JellyfinAudioPlayer-tvOS"
-            ReferencedContainer = "container:JellyfinAudioPlayer.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-   </LaunchAction>
-   <ProfileAction
-      buildConfiguration = "Release"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      savedToolIdentifier = ""
-      useCustomWorkingDirectory = "NO"
-      debugDocumentVersioning = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
-            BuildableName = "JellyfinAudioPlayer-tvOS.app"
-            BlueprintName = "JellyfinAudioPlayer-tvOS"
-            ReferencedContainer = "container:JellyfinAudioPlayer.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-   </ProfileAction>
-   <AnalyzeAction
-      buildConfiguration = "Debug">
-   </AnalyzeAction>
-   <ArchiveAction
-      buildConfiguration = "Release"
-      revealArchiveInOrganizer = "YES">
-   </ArchiveAction>
-</Scheme>

ios/JellyfinAudioPlayer.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>PreviewsEnabled</key>
+	<false/>
+</dict>
+</plist>

ios/JellyfinAudioPlayer/Info.plist

@@ -21,13 +21,11 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>3</string>
+	<string>13</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-		<key>NSAllowsArbitraryLoads</key>
-		<true/>
 		<key>NSExceptionDomains</key>
 		<dict>
 			<key>localhost</key>

ios/JellyfinAudioPlayerTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>3</string>
+	<string>13</string>
 </dict>
 </plist>

ios/Podfile

@@ -17,5 +17,8 @@ target 'JellyfinAudioPlayer' do
   use_flipper!
   post_install do |installer|
     flipper_post_install(installer)
+    installer.pods_project.build_configurations.each do |config|
+      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
+    end
   end
 end

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.2)
-  - FBReactNativeSpec (0.63.2):
-    - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.2)
-    - RCTTypeSafety (= 0.63.2)
-    - React-Core (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - Flipper (0.41.5):
-    - 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.2.0):
+  - Flipper-Folly (2.5.1):
     - boost-for-react-native
-    - CocoaLibEvent (~> 1.0)
     - Flipper-DoubleConversion
     - Flipper-Glog
-    - OpenSSL-Universal (= 1.0.2.19)
+    - 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.41.5):
-    - FlipperKit/Core (= 0.41.5)
-  - FlipperKit/Core (0.41.5):
-    - Flipper (~> 0.41.5)
+  - 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.41.5):
-    - Flipper (~> 0.41.5)
-  - FlipperKit/FBCxxFollyDynamicConvert (0.41.5):
-    - Flipper-Folly (~> 2.2)
-  - FlipperKit/FBDefines (0.41.5)
-  - FlipperKit/FKPortForwarding (0.41.5):
+  - 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.41.5)
-  - FlipperKit/FlipperKitLayoutPlugin (0.41.5):
+  - FlipperKit/FlipperKitHighlightOverlay (0.75.1)
+  - FlipperKit/FlipperKitLayoutPlugin (0.75.1):
     - FlipperKit/Core
     - FlipperKit/FlipperKitHighlightOverlay
     - FlipperKit/FlipperKitLayoutTextSearchable
     - YogaKit (~> 1.18)
-  - FlipperKit/FlipperKitLayoutTextSearchable (0.41.5)
-  - FlipperKit/FlipperKitNetworkPlugin (0.41.5):
+  - FlipperKit/FlipperKitLayoutTextSearchable (0.75.1)
+  - FlipperKit/FlipperKitNetworkPlugin (0.75.1):
     - FlipperKit/Core
-  - FlipperKit/FlipperKitReactPlugin (0.41.5):
+  - FlipperKit/FlipperKitReactPlugin (0.75.1):
     - FlipperKit/Core
-  - FlipperKit/FlipperKitUserDefaultsPlugin (0.41.5):
+  - FlipperKit/FlipperKitUserDefaultsPlugin (0.75.1):
     - FlipperKit/Core
-  - FlipperKit/SKIOSNetworkPlugin (0.41.5):
+  - 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,269 +67,333 @@ PODS:
   - libwebp/mux (1.1.0):
     - libwebp/demux
   - libwebp/webp (1.1.0)
-  - OpenSSL-Universal (1.0.2.19):
-    - OpenSSL-Universal/Static (= 1.0.2.19)
-  - OpenSSL-Universal/Static (1.0.2.19)
-  - RCTRequired (0.63.2)
-  - RCTTypeSafety (0.63.2):
-    - FBLazyVector (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.2)
-    - React-Core (= 0.63.2)
-  - React (0.63.2):
-    - React-Core (= 0.63.2)
-    - React-Core/DevSupport (= 0.63.2)
-    - React-Core/RCTWebSocket (= 0.63.2)
-    - React-RCTActionSheet (= 0.63.2)
-    - React-RCTAnimation (= 0.63.2)
-    - React-RCTBlob (= 0.63.2)
-    - React-RCTImage (= 0.63.2)
-    - React-RCTLinking (= 0.63.2)
-    - React-RCTNetwork (= 0.63.2)
-    - React-RCTSettings (= 0.63.2)
-    - React-RCTText (= 0.63.2)
-    - React-RCTVibration (= 0.63.2)
-  - React-callinvoker (0.63.2)
-  - React-Core (0.63.2):
-    - 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.2)
-    - React-cxxreact (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - Folly (= 2020.01.13.00)
+  - React-Core/Default (0.64.0):
     - glog
-    - React-cxxreact (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - Folly (= 2020.01.13.00)
+  - React-Core/DevSupport (0.64.0):
     - glog
-    - React-Core/Default (= 0.63.2)
-    - React-Core/RCTWebSocket (= 0.63.2)
-    - React-cxxreact (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
-    - React-jsinspector (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - 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.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTWebSocket (0.64.0):
     - glog
-    - React-Core/Default (= 0.63.2)
-    - React-cxxreact (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-jsiexecutor (= 0.63.2)
+    - 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.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.2)
-    - React-Core/CoreModulesHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-RCTImage (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-cxxreact (0.63.2):
+  - 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.2)
-    - React-jsinspector (= 0.63.2)
-  - React-jsi (0.63.2):
+    - 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.2)
-  - React-jsi/Default (0.63.2):
+    - 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.2):
+    - RCT-Folly (= 2020.01.13.00)
+  - React-jsiexecutor (0.64.0):
     - DoubleConversion
-    - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.63.2)
-    - React-jsi (= 0.63.2)
-  - React-jsinspector (0.63.2)
-  - react-native-appearance (0.3.4):
-    - React
-  - react-native-safe-area-context (3.1.1):
-    - React
+    - 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-native-track-player (1.2.6):
     - React
-  - react-native-webview (10.3.2):
-    - React
-  - React-RCTActionSheet (0.63.2):
-    - React-Core/RCTActionSheetHeaders (= 0.63.2)
-  - React-RCTAnimation (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.2)
-    - React-Core/RCTAnimationHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-RCTBlob (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - React-Core/RCTBlobHeaders (= 0.63.2)
-    - React-Core/RCTWebSocket (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-RCTNetwork (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-RCTImage (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.2)
-    - React-Core/RCTImageHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - React-RCTNetwork (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-RCTLinking (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - React-Core/RCTLinkingHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-RCTNetwork (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.2)
-    - React-Core/RCTNetworkHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-RCTSettings (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.2)
-    - React-Core/RCTSettingsHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - React-RCTText (0.63.2):
-    - React-Core/RCTTextHeaders (= 0.63.2)
-  - React-RCTVibration (0.63.2):
-    - FBReactNativeSpec (= 0.63.2)
-    - Folly (= 2020.01.13.00)
-    - React-Core/RCTVibrationHeaders (= 0.63.2)
-    - React-jsi (= 0.63.2)
-    - ReactCommon/turbomodule/core (= 0.63.2)
-  - ReactCommon/turbomodule/core (0.63.2):
+  - react-native-webview (11.3.1):
+    - 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.2)
-    - React-Core (= 0.63.2)
-    - React-cxxreact (= 0.63.2)
-    - React-jsi (= 0.63.2)
-  - RNCAsyncStorage (1.11.0):
-    - React
+    - 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):
     - React
-  - RNCPicker (1.6.5):
-    - React
-  - RNFastImage (8.3.2):
-    - React
+  - RNCPicker (1.8.1):
+    - React-Core
+  - RNFastImage (8.3.4):
+    - React-Core
     - SDWebImage (~> 5.8)
     - SDWebImageWebPCoder (~> 0.6.1)
-  - RNGestureHandler (1.7.0):
-    - React
-  - RNReanimated (1.10.1):
-    - React
-  - RNScreens (2.9.0):
+  - RNGestureHandler (1.10.3):
+    - React-Core
+  - RNLocalize (2.0.2):
+    - React-Core
+  - RNReanimated (2.0.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
     - React
+    - React-callinvoker
+    - React-Core
+    - 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 (2.18.1):
+    - React-Core
+  - RNSentry (2.3.0):
+    - React-Core
+    - Sentry (= 6.1.4)
   - RNSVG (12.1.0):
     - React
-  - SDWebImage (5.8.1):
-    - SDWebImage/Core (= 5.8.1)
-  - SDWebImage/Core (5.8.1)
+  - SDWebImage (5.10.4):
+    - SDWebImage/Core (= 5.10.4)
+  - SDWebImage/Core (5.10.4)
   - SDWebImageWebPCoder (0.6.1):
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.7)
+  - Sentry (6.1.4):
+    - Sentry/Core (= 6.1.4)
+  - Sentry/Core (6.1.4)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -346,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.41.1)
+  - 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.41.1)
-  - FlipperKit/Core (~> 0.41.1)
-  - FlipperKit/CppBridge (~> 0.41.1)
-  - FlipperKit/FBCxxFollyDynamicConvert (~> 0.41.1)
-  - FlipperKit/FBDefines (~> 0.41.1)
-  - FlipperKit/FKPortForwarding (~> 0.41.1)
-  - FlipperKit/FlipperKitHighlightOverlay (~> 0.41.1)
-  - FlipperKit/FlipperKitLayoutPlugin (~> 0.41.1)
-  - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.41.1)
-  - FlipperKit/FlipperKitNetworkPlugin (~> 0.41.1)
-  - FlipperKit/FlipperKitReactPlugin (~> 0.41.1)
-  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.41.1)
-  - FlipperKit/SKIOSNetworkPlugin (~> 0.41.1)
-  - 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/`)
@@ -380,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`)
@@ -394,14 +450,17 @@ 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`)"
   - "RNCPicker (from `../node_modules/@react-native-community/picker`)"
   - RNFastImage (from `../node_modules/react-native-fast-image`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNLocalize (from `../node_modules/react-native-localize`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -409,7 +468,6 @@ SPEC REPOS:
   trunk:
     - boost-for-react-native
     - CocoaAsyncSocket
-    - CocoaLibEvent
     - Flipper
     - Flipper-DoubleConversion
     - Flipper-Folly
@@ -417,10 +475,12 @@ SPEC REPOS:
     - Flipper-PeerTalk
     - Flipper-RSocket
     - FlipperKit
+    - libevent
     - libwebp
     - OpenSSL-Universal
     - SDWebImage
     - SDWebImageWebPCoder
+    - Sentry
     - YogaKit
 
 EXTERNAL SOURCES:
@@ -429,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:
@@ -454,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:
@@ -464,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:
@@ -482,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:
@@ -494,10 +558,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-fast-image"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSentry:
+    :path: "../node_modules/@sentry/react-native"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   Yoga:
@@ -505,60 +573,65 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
-  CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
-  FBLazyVector: 3ef4a7f62e7db01092f9d517d2ebc0d0677c4a37
-  FBReactNativeSpec: dc7fa9088f0f2a998503a352b0554d69a4391c5a
-  Flipper: 33585e2d9810fe5528346be33bcf71b37bb7ae13
+  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
+  FBReactNativeSpec: a9de79cf8f9e07689882cfd8d40269cf531a82e9
+  Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
-  Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3
+  Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489
   Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
-  Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
-  FlipperKit: bc68102cd4952a258a23c9c1b316c7bec1fecf83
-  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  Flipper-RSocket: 602921fee03edacf18f5d6f3d3594ba477f456e5
+  FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: 946cb3063cea9236285f7e9a8505d806d30e07f3
-  OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
-  RCTRequired: f13f25e7b12f925f1f6a6a8c69d929a03c0129fe
-  RCTTypeSafety: 44982c5c8e43ff4141eb519a8ddc88059acd1f3a
-  React: e1c65dd41cb9db13b99f24608e47dd595f28ca9a
-  React-callinvoker: 552a6a6bc8b3bb794cf108ad59e5a9e2e3b4fc98
-  React-Core: 9d341e725dc9cd2f49e4c49ad1fc4e8776aa2639
-  React-CoreModules: 5335e168165da7f7083ce7147768d36d3e292318
-  React-cxxreact: d3261ec5f7d11743fbf21e263a34ea51d1f13ebc
-  React-jsi: 54245e1d5f4b690dec614a73a3795964eeef13a8
-  React-jsiexecutor: 8ca588cc921e70590820ce72b8789b02c67cce38
-  React-jsinspector: b14e62ebe7a66e9231e9581279909f2fc3db6606
-  react-native-appearance: fc2014516054585d531e07aa0b40ab0de1d2be85
-  react-native-safe-area-context: 4c3249e4840225c61fcd215b136af0a737bccb79
+  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: e2c0bce9a1a7c7edd4eb30f0c3016fce216245ce
-  React-RCTActionSheet: 910163b6b09685a35c4ebbc52b66d1bfbbe39fc5
-  React-RCTAnimation: 9a883bbe1e9d2e158d4fb53765ed64c8dc2200c6
-  React-RCTBlob: 39cf0ece1927996c4466510e25d2105f67010e13
-  React-RCTImage: de355d738727b09ad3692f2a979affbd54b5f378
-  React-RCTLinking: 8122f221d395a63364b2c0078ce284214bd04575
-  React-RCTNetwork: 8f96c7b49ea6a0f28f98258f347b6ad218bc0830
-  React-RCTSettings: 8a49622aff9c1925f5455fa340b6fe4853d64ab6
-  React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
-  React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
-  ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
-  RNCAsyncStorage: db711e29e5e0500d9bd21aa0c2e397efa45302b1
+  react-native-track-player: 92eaa90aeb24ce1a7149f983c75128075004e7a2
+  react-native-webview: 30f048378c6cee522ed9bbbedbc34acb21e58188
+  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: 55b9b4240d0a9eba8733d02616775d4040de2e7d
-  RNFastImage: e19ba191922e7dab9d932a4d59d62d76660aa222
-  RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
-  RNReanimated: c2bb7438b57a3d987bb2e4e6e4bca94787e30b02
-  RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
+  RNCPicker: 914b557e20b3b8317b084aca9ff4b4edb95f61e4
+  RNFastImage: d4870d58f5936111c56218dbd7fcfc18e65b58ff
+  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNLocalize: 47e22ef8c36df1d572e42a87c8ae22e3fcf551dd
+  RNReanimated: 64f6c5789f82818c07ba3c71864b73619cb23c76
+  RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNSentry: 4f6907f9a4a41058988ebaa17666e9a402b50ff2
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
-  SDWebImage: e3eae2eda88578db0685a0c88597fdadd9433f05
+  SDWebImage: c666b97e1fa9c64b4909816a903322018f0a9c84
   SDWebImageWebPCoder: d0dac55073088d24b2ac1b191a71a8f8d0adac21
-  Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
+  Sentry: 9d055e2de30a77685e86b219acf02e59b82091fc
+  Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 2d28e638928312f9630682b819df0581e381449e
+PODFILE CHECKSUM: d99c1202f98b3f7477b6a86c9226010b36143469
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.10.1

package.json

@@ -5,63 +5,71 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
-    "ios": "react-native run-ios",
+    "ios": "react-native run-ios --scheme \"Jellyfin Player\"",
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "build:ios": "react-native bundle --entry-file='index.ts' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
   },
   "dependencies": {
-    "@react-native-community/async-storage": "^1.11.0",
+    "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-native-community/picker": "^1.6.5",
+    "@react-native-community/picker": "^1.8.1",
     "@react-native-community/slider": "^3.0.3",
-    "@react-navigation/bottom-tabs": "^5.7.2",
-    "@react-navigation/native": "^5.7.1",
-    "@react-navigation/stack": "^5.7.1",
-    "@reduxjs/toolkit": "^1.4.0",
-    "@types/lodash": "^4.14.158",
-    "@types/redux-logger": "^3.0.8",
-    "@types/styled-components": "^5.1.1",
-    "date-fns": "^2.15.0",
-    "fuse.js": "^6.4.0",
-    "lodash": "^4.17.19",
-    "react": "^16.13.1",
-    "react-native": "^0.63.2",
-    "react-native-appearance": "^0.3.4",
-    "react-native-fast-image": "^8.3.2",
-    "react-native-gesture-handler": "^1.7.0",
-    "react-native-reanimated": "^1.10.1",
-    "react-native-safe-area-context": "^3.1.1",
-    "react-native-screens": "^2.9.0",
+    "@react-navigation/bottom-tabs": "^5.11.8",
+    "@react-navigation/native": "^5.9.3",
+    "@react-navigation/stack": "^5.14.3",
+    "@reduxjs/toolkit": "^1.5.1",
+    "@sentry/react-native": "^2.4.0",
+    "@types/lodash": "^4.14.168",
+    "date-fns": "^2.19.0",
+    "fuse.js": "^6.4.6",
+    "i18n-js": "^3.8.0",
+    "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.1",
+    "react-native-fast-image": "^8.3.4",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-localize": "^2.0.2",
+    "react-native-reanimated": "^2.1.0",
+    "react-native-safe-area-context": "^3.2.0",
+    "react-native-screens": "^2.18.1",
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",
-    "react-native-track-player": "github:leinelissen/react-native-track-player",
-    "react-native-webview": "^10.3.2",
-    "react-redux": "^7.2.1",
+    "react-native-track-player": "^1.2.7",
+    "react-native-webview": "^11.3.2",
+    "react-redux": "^7.2.3",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@babel/runtime": "^7.10.5",
+    "@babel/core": "^7.13.14",
+    "@babel/runtime": "^7.13.10",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/jest": "^26.0.7",
-    "@types/react-native": "^0.63.2",
-    "@types/react-redux": "^7.1.9",
-    "@types/react-test-renderer": "16.9.2",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
-    "babel-jest": "^26.1.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "eslint": "^7.5.0",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "jest": "^26.1.0",
-    "metro-react-native-babel-preset": "^0.61.0",
-    "react-test-renderer": "^16.13.1",
-    "typescript": "^3.9.7"
+    "@sentry/cli": "^1.63.2",
+    "@types/i18n-js": "^3.8.0",
+    "@types/jest": "^26.0.22",
+    "@types/react-native": "^0.64.2",
+    "@types/react-redux": "^7.1.16",
+    "@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.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^7.23.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.65.2",
+    "react-test-renderer": "^17.0.2",
+    "typescript": "^4.2.3"
   },
   "jest": {
     "preset": "react-native",

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>

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>

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>

src/assets/repeat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106.69 89.45"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Regular-M"><path d="M0,41.16a5.37,5.37,0,0,0,10.74,0V37.94c0-7.76,5.37-12.89,13.38-12.89H60.94v10.2a4.05,4.05,0,0,0,4.39,4.3,5.27,5.27,0,0,0,3.32-1.22L87.11,23.1a4.1,4.1,0,0,0,0-6.55L68.65,1.22A5.57,5.57,0,0,0,65.33,0a4.09,4.09,0,0,0-4.39,4.35v10.1H25.15C9.77,14.45,0,23.29,0,37.16ZM45.75,54.25A4,4,0,0,0,41.36,50a5.25,5.25,0,0,0-3.27,1.17L19.63,66.36a4,4,0,0,0,0,6.54L38.09,88.23a5,5,0,0,0,3.27,1.22,4,4,0,0,0,4.39-4.29V75H81.54c15.38,0,25.15-8.89,25.15-22.7v-4a5.37,5.37,0,1,0-10.74,0v3.22c0,7.72-5.37,12.9-13.38,12.9H45.75Z"/></g></g></g></svg>

src/assets/shuffle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.69 90.97"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Symbols"><g id="Regular-M"><path d="M0,70.51c0,3.12,2.29,5.27,5.76,5.27H16.85c8.44,0,13.47-2.44,19.58-9.52L47.36,53.47l11,12.79c6,7.08,11.08,9.57,19.58,9.57h9V86.67A4,4,0,0,0,91.26,91a5.27,5.27,0,0,0,3.32-1.22L113,74.51A4.08,4.08,0,0,0,113,68L94.58,52.64a5.27,5.27,0,0,0-3.32-1.22,4,4,0,0,0-4.35,4.29v9.48H78.22c-5.08,0-8.2-1.62-12.16-6.25L54.39,45.31,66.06,31.74c4-4.69,7.08-6.3,12.16-6.3h8.69v9.81a4,4,0,0,0,4.35,4.3,5.27,5.27,0,0,0,3.32-1.22L113,23.1a4.09,4.09,0,0,0,0-6.55L94.58,1.22A5.27,5.27,0,0,0,91.26,0a4,4,0,0,0-4.35,4.3V14.84h-9c-8.5,0-13.57,2.49-19.58,9.57l-11,12.8L36.43,24.41c-6.11-7.08-11.14-9.57-19.58-9.57H5.76C2.29,14.84,0,17,0,20.17s2.34,5.32,5.76,5.32H17.09c4.69,0,7.67,1.61,11.67,6.25L40.43,45.31,28.76,58.94c-4.05,4.63-7,6.25-11.67,6.25H5.76C2.34,65.19,0,67.38,0,70.51Z"/></g></g></g></g></svg>

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;

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>
+    );
 }

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>
+    );
+}

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'),
-    }
-});

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'),
-    }
-});

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);
+}

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;
 `;
 

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>
     );
 };

src/components/Modal.tsx

@@ -1,23 +1,39 @@
-import React from 'react';
-import styled from 'styled-components/native';
-import { SafeAreaView } from 'react-native';
-import { colors } from './Colors';
+import React, { useCallback } from 'react';
+import styled, { css } from 'styled-components/native';
+import { SafeAreaView, Pressable } from 'react-native';
+import { useNavigation, StackActions } from '@react-navigation/native';
+import useDefaultStyles from './Colors';
 
-const Background = styled.View`
+interface Props {
+    fullSize?: boolean;
+}
+
+const Background = styled(Pressable)`
     padding: 100px 25px;
     flex: 1;
+    justify-content: center;
 `;
 
-const Container = styled.View`
+const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
     border-radius: 20px;
-    flex: 1;
+    margin: auto 0;
+
+    ${props => props.fullSize && css`
+        flex: 1;
+    `}
 `;
 
-const Modal: React.FC = ({ children }) => {
+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}>
+        <Background style={defaultStyles.modal} onPress={closeModal}>
             <SafeAreaView style={{ flex: 1 }}>
-                <Container style={colors.view}>
+                <Container style={defaultStyles.modalInner} fullSize={fullSize}>
                     {children}
                 </Container>
             </SafeAreaView>

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;

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]} />
+    );
+}

src/components/TouchableHandler.tsx

@@ -1,24 +1,41 @@
 import React, { useCallback } from 'react';
-import { TouchableOpacity } from 'react-native';
+import { Pressable, ViewStyle } from 'react-native';
 
 interface TouchableHandlerProps {
     id: string;
     onPress: (id: string) => void;
+    onLongPress?: (id: string) => void;
+}
+
+function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle {
+    if (pressed) {
+        return { opacity: 0.5 };
+    } else {
+        return { opacity: 1 };
+    }
 }
 
 /**
  * This is a generic handler that accepts id as a prop, and return it when it is
  * pressed. This comes in handy with lists in which albums / tracks need to be selected.
  */
-const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, children }) => {
+const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, onLongPress, children }) => {
     const handlePress = useCallback(() => {
         return onPress(id);
     }, [id, onPress]);
 
+    const handleLongPress = useCallback(() => {
+        return onLongPress ? onLongPress(id) : undefined;
+    }, [id, onLongPress]);
+
     return (
-        <TouchableOpacity onPress={handlePress}>
+        <Pressable
+            onPress={handlePress}
+            onLongPress={handleLongPress}
+            style={TouchableStyles}
+        >
             {children}
-        </TouchableOpacity>
+        </Pressable>
     );
 };
 

src/components/Typography.ts

@@ -1,7 +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)`
+    font-size: 24px;
+    margin: 12px 0;
 `;

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;
 }

src/localisation/index.ts

@@ -0,0 +1,51 @@
+import i18n from 'i18n-js';
+import { findBestAvailableLanguage } from 'react-native-localize';
+import { LocaleKeys } from './types';
+
+// Lazy loaders for locale
+const localeGetters: Record<string, () => object> = {
+    en: () => require('./lang/en/locale.json'),
+    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
+let locale = findBestAvailableLanguage(Object.keys(localeGetters));
+
+// Check if the locale is correctly picked
+if (!locale || !locale.languageTag) {
+    // 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.
+i18n.translations = {
+    en: localeGetters.en(),
+};
+
+// If the locale is not english, we add it to the translations key s well
+if (locale.languageTag !== 'en') {
+    i18n.translations[locale.languageTag] = localeGetters[locale.languageTag as string]();
+}
+
+// Set the locale once at the beginning of your app.
+i18n.locale = locale.languageTag;
+
+// Fallback to the default language for missing translation strings
+i18n.fallbacks = true;
+
+/**
+ * An i18n Typescript helper with autocomplete for the key argument
+ * @param key string
+ */
+export function t(key: LocaleKeys) {
+    return i18n.t(key);
+}
+
+export default i18n;

src/localisation/lang/en/locale.json

@@ -0,0 +1,42 @@
+{
+    "play-next": "Play Next",
+    "play-album": "Play Album",
+    "queue": "Queue",
+    "add-to-queue": "Add to Queue",
+    "clear-queue": "Clear Queue",
+    "no-results": "No results...",
+    "album": "Album",
+    "albums": "Albums",
+    "all-albums": "All Albums",
+    "search": "Search",
+    "music": "Music",
+    "now-playing": "Now Playing",
+    "onboarding-welcome": "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": "Set Jellyfin Server",
+    "set-jellyfin-server-instruction": "Please enter your Jellyfin server URL. Make sure to include the protocol and port",
+    "settings": "Settings",
+    "jellyfin-library": "Jellyfin Library",
+    "jellyfin-server-url": "Jellyfin Server URL",
+    "jellyfin-access-token": "Jellyfin Access Token",
+    "jellyfin-user-id": "Jellyfin User ID",
+    "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",
+    "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"
+}

src/localisation/lang/es/locale.json

@@ -0,0 +1,28 @@
+{
+    "play-next": "Reproducir siguente",
+    "play-album": "Reproducir Álbum",
+    "queue": "Cola",
+    "add-to-queue": "Añadir a la cola",
+    "clear-queue": "Limpiar cola",
+    "no-results": "No hay resultados...",
+    "album": "Álbum",
+    "albums": "Álbumes",
+    "all-albums": "Todos los Álbumes",
+    "search": "Buscar",
+    "music": "Música",
+    "now-playing": "Reproduciendo ahora",
+    "onboarding-welcome": "Bienvenido!",
+    "onboarding-intro": "Jellyfin Audio Player te permitirá reproducir tu biblioteca musical desde cualquier sitio, con suporte completo para audio en segundo plano y casteo en otros dispositivos.",
+    "onboarding-cta": "Para empezar necesitas un servidor de Jellyfin. Pulsa el botón de abajo para introducir la dirección del servidor y autentifícate con tus credenciales.",
+    "set-jellyfin-server": "Introduce servidor de Jellyfin",
+    "set-jellyfin-server-instruction": "Por favor introduce la URL de tu servidor de Jellyfin. Acuérdate de incluir protocolo y puerto",
+    "settings": "Configuración",
+    "jellyfin-library": "Biblioteca Jellyfin",
+    "jellyfin-server-url": "Url del servidor Jellyfin",
+    "jellyfin-access-token": "Token de acceso Jellyfin",
+    "jellyfin-user-id": "ID de usuario Jellyfin",
+    "setting-cache": "Caché",
+    "setting-cache-description": "Si has actualizado la biblioteca de Jellyfin pero tu aplicación muestra resultados anteriores, puedes forzar la actualización de la biblioteca pulsando este botón y se volverá a cargar toda información",
+    "reset-cache": "Resetear Caché",
+    "recent-albums": "Álbumes recientes"
+}

src/localisation/lang/fr/locale.json

@@ -0,0 +1,28 @@
+{
+    "play-next": "Lire ensuite",
+    "play-album": "Jouer l'album",
+    "queue": "File d'attente",
+    "add-to-queue": "Ajouter à la file d'attente",
+    "clear-queue": "Vider la file d'attente",
+    "no-results": "Pas de résultats...",
+    "album": "Album",
+    "albums": "Albums",
+    "all-albums": "Tous les Albums",
+    "search": "Rechercher",
+    "music": "Musique",
+    "now-playing": "En cours",
+    "onboarding-welcome": "Bienvenue !",
+    "onboarding-intro": "Jellyfin Audio Player vous permettra de diffuser votre bibliothèque musicale de n'importe où, avec un support de la lecture en arrière plan et la diffusion à distance.",
+    "onboarding-cta": "Pour utiliser Jellyfin Audio Player, vous avez besoin d'un serveur Jellyfin. Cliquez sur le bouton ci-dessous pour entrer l'adresse de votre serveur Jellyfin et vous y connecter.",
+    "set-jellyfin-server": "Configurer le serveur Jellyfin",
+    "set-jellyfin-server-instruction": "Veuillez entrer l'URL de votre serveur Jellyfin. Assurez-vous d'inclure le protocole et le port",
+    "settings": "Réglages",
+    "jellyfin-library": "Bibliothèque Jellyfin",
+    "jellyfin-server-url": "URL du serveur Jellyfin",
+    "jellyfin-access-token": "Jeton d'accès à la Jellyfin",
+    "jellyfin-user-id": "ID utilisateur Jellyfin",
+    "setting-cache": "Cache",
+    "setting-cache-description": "Si vous avez mis à jour votre bibliothèque Jellyfin mais que l'application conserve toujours des ressources en cache, vous pouvez vider le cache en utilisant ce bouton. Cela forcera l'application à récupérer l’intégralité de bibliothèque.",
+    "reset-cache": "Réinitialiser le cache",
+    "recent-albums": "Albums récents"
+}

src/localisation/lang/nl/locale.json

@@ -0,0 +1,42 @@
+{
+    "play-next": "Speel volgende",
+    "play-album": "Speel album",
+    "queue": "Wachtrij",
+    "add-to-queue": "Voeg toe aan wachtrij",
+    "clear-queue": "Wis wachtrij",
+    "no-results": "Geen resultaten...",
+    "album": "Album",
+    "albums": "Albums",
+    "all-albums": "Alle Albums",
+    "search": "Zoeken",
+    "music": "Muziek",
+    "now-playing": "Nu spelend",
+    "onboarding-welcome": "Welkom!",
+    "onboarding-intro": "Jellyfin Audio Player maakt het mogelijk om van waar dan ook je muziek te streamen, met volledige support voor achtegroundaudio en casting.",
+    "onboarding-cta": "Om te starten moet je een Jellyfin server hebben. Klik de onderstaande knop om het adres van je Jellyfin server in te vullen en er in te loggen.",
+    "set-jellyfin-server": "Kies Jellyfin Server in",
+    "set-jellyfin-server-instruction": "Vul alsjeblieft je Jellyfin server URL in. Voeg ook het protocol en de poort toe",
+    "settings": "Instellingen",
+    "jellyfin-library": "Jellyfin Bibliotheek",
+    "jellyfin-server-url": "Jellyfin Server URL",
+    "jellyfin-access-token": "Jellyfin Toegangstoken",
+    "jellyfin-user-id": "Jellyfin Gebruiker ID",
+    "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",
+    "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"
+}

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": "更多信息"
+}

src/localisation/types.ts

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

src/screens/Music/index.tsx

@@ -6,21 +6,23 @@ import Album from './stacks/Album';
 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.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: 'Recent Albums' }} />
-            <Stack.Screen name="Albums" component={Albums} />
-            <Stack.Screen name="Album" component={Album} />
-            <Stack.Screen name="Search" component={Search} />
+        <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') }} />
+            <Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search') }} />
         </Stack.Navigator>
     );
 }

src/screens/Music/stacks/Album.tsx

@@ -1,9 +1,9 @@
 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 } from '@react-navigation/native';
+import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import { useDispatch } from 'react-redux';
 import { differenceInDays } from 'date-fns';
@@ -11,10 +11,13 @@ import { useTypedSelector } from 'store';
 import { fetchTracksByAlbum } from 'store/music/actions';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS, THEME_COLOR } from 'CONSTANTS';
 import usePlayAlbum from 'utility/usePlayAlbum';
-import usePlayTrack from 'utility/usePlayTrack';
 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'>;
 
@@ -22,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
@@ -60,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);
@@ -71,11 +73,26 @@ const Album: React.FC = () => {
     const getImage = useGetImage();
     const playAlbum = usePlayAlbum();
     const currentTrack = useCurrentTrack();
+    const navigation = useNavigation();
 
     // Setup callbacks
     const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum, id]);
-    const selectTrack = usePlayTrack();
     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));
+
+            if (track) {
+                await TrackPlayer.skip(track.id);
+                await TrackPlayer.play();
+            }
+        }
+    }, [playAlbum, id]);
+    const longPressTrack = useCallback((trackId: string) => { 
+        navigation.navigate('TrackPopupMenu', { trackId }); 
+    }, [navigation]);
 
     // Retrieve album tracks on load
     useEffect(() => {
@@ -96,20 +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="Play Album" onPress={selectAlbum} color={THEME_COLOR} />
-            {album?.Tracks?.length ? album.Tracks.map((trackId) =>
-                <TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
-                    <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>
     );
 };

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

src/screens/Music/stacks/RecentAlbums.tsx

@@ -12,30 +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}>All Albums</ListButton>
-            <ListButton onPress={handleSearchClick}>Search</ListButton>
-            <Header style={colors.text}>Recent Albums</Header>
-        </ListContainer>
+        <>
+            <ListButton onPress={handleAllAlbumsClick}>{t('all-albums')}</ListButton>
+            <ListButton onPress={handleSearchClick}>{t('search')}</ListButton>
+            <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);
@@ -55,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>
     );
 };

src/screens/Music/stacks/Search.tsx

@@ -11,7 +11,8 @@ 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';
 
 const Container = styled.View`
     padding: 0 20px;
@@ -46,6 +47,8 @@ const fuseOptions = {
 };
 
 export default function Search() {
+    const defaultStyles = useDefaultStyles();
+
     // Prepare state
     const [searchTerm, setSearchTerm] = useState('');
     const albums = useTypedSelector(state => state.music.albums.entities);
@@ -88,10 +91,10 @@ export default function Search() {
 
     const HeaderComponent = React.useMemo(() => (
         <Container>
-            <Input value={searchTerm} onChangeText={setSearchTerm} style={colors.input} placeholder="Search..." />
-            {(searchTerm.length && !results.length) ? <Text>No results...</Text> : null}
+            <Input value={searchTerm} onChangeText={setSearchTerm} style={defaultStyles.input} placeholder={t('search') + '...'} />
+            {(searchTerm.length && !results.length) ? <Text style={{ textAlign: 'center' }}>{t('no-results')}</Text> : null}
         </Container>
-    ), [searchTerm, results, setSearchTerm]);
+    ), [searchTerm, results, setSearchTerm, defaultStyles]);
 
     // GUARD: We cannot search for stuff unless Fuse is loaded with results.
     // Therefore we delay rendering to when we are certain it's there.
@@ -104,13 +107,13 @@ export default function Search() {
             data={results}
             renderItem={({ item: { item: album } }) =>(
                 <TouchableHandler id={album.Id} onPress={selectAlbum}>
-                    <SearchResult style={colors.border}>
+                    <SearchResult style={defaultStyles.border}>
                         <AlbumImage source={{ uri: getImage(album.Id) }} />
                         <View>
-                            <Text numberOfLines={1} ellipsizeMode="tail" style={colors.text}>
+                            <Text numberOfLines={1} ellipsizeMode="tail" style={defaultStyles.text}>
                                 {album.Name} - {album.AlbumArtist}
                             </Text>
-                            <HalfOpacity style={colors.text}>Album</HalfOpacity>
+                            <HalfOpacity style={defaultStyles.text}>{t('album')}</HalfOpacity>
                         </View>
                     </SearchResult>
                 </TouchableHandler>

src/screens/Music/types.ts

@@ -70,6 +70,7 @@ export type StackParams = {
     Albums: undefined;
     Album: { id: string, album: Album };
     RecentAlbums: undefined;
+    Search: undefined;
 };
 
 export type NavigationProp = StackNavigationProp<StackParams>; 

src/screens/Onboarding/index.tsx

@@ -7,6 +7,7 @@ import { NavigationProp } from 'screens';
 import { useTypedSelector } from 'store';
 import { useDispatch } from 'react-redux';
 import { setOnboardingStatus } from 'store/settings/actions';
+import { t } from '@localisation';
 
 const Container = styled.SafeAreaView`
     background-color: ${THEME_COLOR};
@@ -57,16 +58,16 @@ function Onboarding() {
             <TextContainer contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
                 <Logo source={require('../../assets/app-icon-white.png')} />
                 <Text >
-                    Welcome!
+                    {t('onboarding-welcome')}
                 </Text>
                 <Text>
-                    Jellyfin Audio Player will allow you to stream your music library from anywhere, with full support for background audio and casting. 
+                    {t('onboarding-intro')}
                 </Text>
                 <Text>
-                    In order to get started, you need a Jellyfin server. Click the button below to enter your Jellyfin server address and login to it.
+                    {t('onboarding-cta')}
                 </Text>
                 <ButtonContainer>
-                    <Button title="Set Jellyfin Server" color="#ffffff" onPress={handleClick} />
+                    <Button title={t('set-jellyfin-server')} color="#ffffff" onPress={handleClick} />
                 </ButtonContainer>
             </TextContainer>
         </Container>

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;

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;

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;

src/screens/Player/components/MediaControls.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+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';
 import BackwardIcon from 'assets/backwards.svg';
 import PlayIcon from 'assets/play.svg';
 import PauseIcon from 'assets/pause.svg';
-import { useColorScheme } from 'react-native-appearance';
+import RepeatIcon from 'assets/repeat.svg';
+// import ShuffleIcon from 'assets/shuffle.svg';
+import { THEME_COLOR } from 'CONSTANTS';
+import Casting from './Casting';
 
 const BUTTON_SIZE = 40;
+const BUTTON_SIZE_SMALL = 25;
 
 const pause = () => TrackPlayer.pause();
 const play = () => TrackPlayer.play();
@@ -47,6 +51,12 @@ export default function MediaControls() {
                     <NextButton fill={fill} />
                 </Button>
             </Buttons>
+            <Buttons>
+                <Button>
+                    <RepeatButton fill={fill} />
+                </Button>
+                <Casting fill={fill} />
+            </Buttons>
         </Container>
     );
 }
@@ -71,6 +81,67 @@ export function NextButton({ fill }: { fill: string }) {
     );
 }
 
+export function RepeatButton({ fill }: { fill: string}) {
+    const [isRepeating, setRepeating] = useState(false);
+    const handlePress = useCallback(() => setRepeating(!isRepeating), [isRepeating, setRepeating]);
+    const listener = useRef<TrackPlayer.EmitterSubscription | null>(null);
+    
+    // The callback that should determine whether we need to repeeat or not
+    const handleEndEvent = useCallback(async () => {
+        if (isRepeating) {
+            // Retrieve all current tracks
+            const tracks = await TrackPlayer.getQueue();
+
+            // Then skip to the first track
+            await TrackPlayer.skip(tracks[0].id);
+
+            // Cautiously reset the seek time, as there might only be a single
+            // item in queue.
+            await TrackPlayer.seekTo(0);
+
+            // Then play the item
+            await TrackPlayer.play();
+        }
+    }, [isRepeating]);
+
+    // Subscribe to ended event handler so that we can restart the queue from
+    // the start if looping is enabled
+    useEffect(() => {
+        // Set the event listener
+        listener.current = TrackPlayer.addEventListener('playback-queue-ended', handleEndEvent);
+        
+        // Then clean up after
+        return function cleanup() {
+            listener?.current?.remove();
+        };
+    }, [handleEndEvent]);
+
+    return (
+        <TouchableOpacity onPress={handlePress} style={{ opacity: isRepeating ? 1 : 0.5 }}>
+            <RepeatIcon
+                width={BUTTON_SIZE_SMALL}
+                height={BUTTON_SIZE_SMALL}
+                fill={isRepeating ? THEME_COLOR : fill}
+            />
+        </TouchableOpacity>
+    );
+}
+
+// export function ShuffleButton({ fill }: { fill: string}) {
+//     const [isShuffling, setShuffling] = useState(false);
+//     const handlePress = useCallback(() => setShuffling(!isShuffling), [isShuffling, setShuffling]);
+
+//     return (
+//         <TouchableOpacity onPress={handlePress} style={{ opacity: isShuffling ? 1 : 0.5 }}>
+//             <ShuffleIcon
+//                 width={BUTTON_SIZE_SMALL}
+//                 height={BUTTON_SIZE_SMALL}
+//                 fill={isShuffling ? THEME_COLOR : fill}
+//             />
+//         </TouchableOpacity>
+//     );
+// }
+
 export function MainButton({ fill }: { fill: string }) {
     const state = usePlaybackState();
 

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');
 
@@ -12,19 +13,15 @@ const Artwork = styled(FastImage)`
     width: ${Screen.width * 0.8}px;
     height: ${Screen.width * 0.8}px;
     margin: 25px auto;
-    display: flex;
-    flex: 1;
 `;
 
 const styles = StyleSheet.create({
     artist: {
-        ...colors.text,
         fontWeight: 'bold',
         fontSize: 24,
         marginBottom: 12,
     },
     title: {
-        ...colors.text,
         fontSize: 18,
         marginBottom: 12,
         textAlign: 'center',
@@ -36,11 +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} source={{ uri: track?.artwork }} />
-            <Text style={styles.artist} >{track?.artist}</Text>
+            <Artwork
+                style={defaultStyles.imageBackground}
+                source={{ 
+                    uri: track?.artwork,
+                    priority: FastImage.priority.high,
+                }} 
+            />
+            <Text style={styles.artist}>{track?.artist}</Text>
             <Text style={styles.title}>{track?.title}</Text>
         </View>
     );

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>
         );
     }
 }

src/screens/Player/components/Queue.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import useQueue from 'utility/useQueue';
-import { View, Text, StyleSheet } 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;
@@ -23,18 +25,18 @@ const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean, isDar
     `}
 `;
 
+const ClearQueue = styled.View`
+    margin: 20px 0;
+`;
+
 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);
@@ -42,26 +44,32 @@ export default function Queue() {
         await TrackPlayer.skip(trackId);
         await TrackPlayer.play();
     }, []);
+    const clearQueue = useCallback(async () => {
+        await TrackPlayer.reset();
+    }, []);
 
     return (
         <View>
-            <Text style={{ marginTop: 20, marginBottom: 20 }}>Queue</Text>
+            <Text style={{ marginTop: 20, marginBottom: 20 }}>{t('queue')}</Text>
             {queue.map((track, i) => (
                 <TouchableHandler id={track.id} onPress={playTrack} key={i}>
                     <QueueItem 
                         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')} onPress={clearQueue} />
+            </ClearQueue>
         </View>
     );
 }

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 />

src/screens/Settings/components/Cache.tsx

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import TrackPlayer from 'react-native-track-player';
+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();
+    const handleClearCache = useCallback(() => {
+        // Dispatch an action to reset the music subreducer state
+        dispatch(music.actions.reset());
+
+        // Also clear the TrackPlayer queue
+        TrackPlayer.reset();
+    }, [dispatch]);
+
+    return (
+        <Container>
+            <Text>{t('setting-cache-description')}</Text>
+            <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
+        </Container>
+    );
+}

src/screens/Settings/components/Library.tsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components/native';
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+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;
+`;
+
+const Input = styled.TextInput`
+    padding: 15px;
+    margin-top: 5px;
+    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 (
+        <Container>
+            <InputContainer>
+                <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={defaultStyles.text}>{t('jellyfin-access-token')}</Text>
+                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={defaultStyles.input} />
+            </InputContainer>
+            <InputContainer>
+                <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} />
+        </Container>
+    );
+}

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>
+    );
+}

src/screens/Settings/index.tsx

@@ -1,57 +1,46 @@
 import React, { useCallback } from 'react';
-import { View, Text, SafeAreaView, Button, StyleSheet } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
-import styled from 'styled-components/native';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store';
+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 { NavigationProp } from '..';
+import ListButton from 'components/ListButton';
 import { THEME_COLOR } from 'CONSTANTS';
-import { Header } from 'components/Typography';
-import { colors } from 'components/Colors';
+import Sentry from './components/Sentry';
 
-const InputContainer = styled.View`
-    margin: 10px 0;
-`;
-
-const Input = styled.TextInput`
-    padding: 15px;
-    margin-top: 5px;
-    border-radius: 5px;
-`;
-
-export default function Settings() {
-    const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
-    const navigation = useNavigation<NavigationProp>();
-    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
+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]);
 
     return (
         <ScrollView>
             <SafeAreaView>
-                <View style={{ padding: 20 }}>
-                    <Header style={colors.text}>Settings</Header>
-                    <InputContainer>
-                        <Text style={colors.text}>Jellyfin Server URL</Text>
-                        <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={colors.input} />
-                    </InputContainer>
-                    <InputContainer>
-                        <Text style={colors.text}>Jellyfin Access Token</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={colors.input} />
-                    </InputContainer>
-                    <InputContainer>
-                        <Text style={colors.text}>Jellyfin User ID</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={colors.input} />
-                    </InputContainer>
-                    <Button title="Set Jellyfin server" onPress={handleClick} color={THEME_COLOR} />
-                    {/* The bitrate setting is hidden for now, since Jellyfin does not appear to support custom bitrates */}
-                    {/* <InputContainer>
-                        <Text style={colors.text}>Bitrate</Text>
-                        <Picker selectedValue={bitrate}>
-                            <Picker.Item label="320kbps" value={140000000} />
-                        </Picker>
-                    </InputContainer> */}
-                </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>
+    );
 }

src/screens/index.tsx

@@ -12,8 +12,13 @@ import GearIcon from 'assets/gear.svg';
 import { THEME_COLOR } from 'CONSTANTS';
 import { useTypedSelector } from 'store';
 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();
+const Stack = createStackNavigator<ModalStackParams>();
 const Tab = createBottomTabNavigator();
 
 type Screens = {
@@ -45,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: 'Now Playing' }} />
-            <Tab.Screen name="Music" component={Music} />
-            <Tab.Screen name="Settings" component={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>
+        </>
     );
 }
 
@@ -84,11 +92,13 @@ 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>
 >;

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>
+    );
+}

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,9 +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);
@@ -33,8 +36,8 @@ export default function SetJellyfinServer() {
                 />
             ) : (
                 <View style={{ padding: 20, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                    <Text style={colors.text}>
-                        Please enter your Jellyfin server URL. Make sure to include the protocol and port
+                    <Text>
+                        {t('set-jellyfin-server-instruction')}
                     </Text>
                     <Input
                         placeholder="https://jellyfin.yourserver.io/"
@@ -43,10 +46,10 @@ export default function SetJellyfinServer() {
                         keyboardType="url"
                         autoCapitalize="none"
                         autoCorrect={false}
-                        style={{ ...colors.input, width: '100%' }}
+                        style={[ defaultStyles.input, { width: '100%' } ]}
                     />
                     <Button
-                        title="Set server"
+                        title={t('set-jellyfin-server')}
                         onPress={() => setIsLogginIn(true)}
                         disabled={!serverUrl?.length} 
                         color={THEME_COLOR}

src/screens/modals/TrackPopupMenu.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import Modal from 'components/Modal';
+import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
+import { ModalStackParams } from 'screens/types';
+import { useTypedSelector } from 'store';
+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'>;
+
+const Container = styled.View`
+    padding: 20px;
+`;
+
+const Buttons = styled.View`
+    margin-top: 20px;
+    flex-direction: row;
+    /* justify-content: space-around; */
+`;
+
+const ButtonSpacing = styled.View`
+    width: 8px;
+`;
+
+function TrackPopupMenu() {
+    // Retrieve helpers
+    const { params: { trackId } } = useRoute<Route>();
+    const navigation = useNavigation();
+    const track = useTypedSelector((state) => state.music.tracks.entities[trackId]);
+    const playTrack = usePlayTrack();
+
+    // Set callback to close the modal
+    const closeModal = useCallback(() => {
+        navigation.dispatch(StackActions.popToTop());    
+    }, [navigation]);
+
+    const handlePlayNext = useCallback(() => {
+        playTrack(trackId, false, false);
+        closeModal();
+    }, [playTrack, closeModal, trackId]);
+    const handleAddToQueue = useCallback(() => {
+        playTrack(trackId, false, true);
+        closeModal();
+    }, [playTrack, closeModal, trackId]);
+
+    return (
+        <Modal fullSize={false}>
+            <Container>
+                <SubHeader>{track?.Name}</SubHeader>
+                <Text>{track?.Album} - {track?.AlbumArtist}</Text>
+                <Buttons>
+                    <Button title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
+                    <ButtonSpacing />
+                    <Button title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
+                </Buttons>
+            </Container>
+        </Modal>
+    );
+}
+
+export default TrackPopupMenu;

src/screens/types.ts

@@ -0,0 +1,4 @@
+export interface ModalStackParams {
+    SetJellyfinServer: undefined;
+    TrackPopupMenu: { trackId: string };
+}

src/store/index.ts

@@ -13,9 +13,11 @@ const persistConfig: PersistConfig<AppState> = {
 
 import settings from './settings';
 import music from './music';
+import player from './player';
 
 const reducers = combineReducers({
     settings,
+    player: player.reducer,
     music: music.reducer,
 });
 

src/store/music/index.ts

@@ -31,7 +31,9 @@ const initialState: State = {
 const music = createSlice({
     name: 'music',
     initialState,
-    reducers: {},
+    reducers: {
+        reset: () => initialState,
+    },
     extraReducers: builder => {
         /**
          * Fetch All albums
@@ -58,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

src/store/player/index.ts

@@ -0,0 +1,27 @@
+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,
+    reducers: {
+        addNewTrackToPlayer: (state) => {
+            state.addedTrackCount += 1;
+        },
+        setCurrentTrack: (state, action: PayloadAction<Track | undefined>) => {
+            state.currentTrack = action.payload;
+        },
+    }
+});
+
+export default player;

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');

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,
     })
 });
 

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;
+}

src/utility/JellyfinApi.ts

@@ -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',
+    Container: 'mp3,aac,m4a,m4b|aac,alac,m4a,m4b|alac,flac|ogg',
     AudioCodec: 'aac',
     static: 'true',
 };
@@ -45,7 +41,7 @@ export function generateTrack(track: AlbumTrack, credentials: Credentials): Trac
         DeviceId: credentials?.device_id || '',
     };
     const trackParams = new URLSearchParams(trackOptions).toString();
-    const url = encodeURI(`${credentials?.uri}/Audio/${track.Id}/universal.mp3?${trackParams}`);
+    const url = encodeURI(`${credentials?.uri}/Audio/${track.Id}/universal?${trackParams}`);
 
     return {
         id: track.Id,
@@ -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),
     };
 }
 

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;
+}

src/utility/useCurrentTrack.ts

@@ -1,28 +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) {
-                return;
-            }
-
-            const currentTrack = await TrackPlayer.getTrack(currentTrackId);
-            setTrack(currentTrack);
-        };
-
-        fetchTrack();
-    }, [state]);
-
+    const track = useTypedSelector(state => state.player.currentTrack, idEqual);
+    
     return track;
 }

src/utility/usePlayAlbum.ts

@@ -2,17 +2,22 @@ import { useTypedSelector } from 'store';
 import { useCallback } from 'react';
 import TrackPlayer, { Track } from 'react-native-track-player';
 import { generateTrack } from './JellyfinApi';
+import useQueue from './useQueue';
+import player from 'store/player';
+import { useDispatch } from 'react-redux';
 
 /**
  * Generate a callback function that starts playing a full album given its
  * supplied id.
  */
 export default function usePlayAlbum() {
+    const dispatch = useDispatch();
     const credentials = useTypedSelector(state => state.settings.jellyfin);
     const albums = useTypedSelector(state => state.music.albums.entities);
     const tracks = useTypedSelector(state => state.music.tracks.entities);
+    const queue = useQueue();
 
-    return useCallback(async function playAlbum(albumId: string) {
+    return useCallback(async function playAlbum(albumId: string, play = true): Promise<TrackPlayer.Track[] | undefined> {
         const album = albums[albumId];
         const trackIds = album?.Tracks;
 
@@ -21,6 +26,29 @@ export default function usePlayAlbum() {
             return;
         }
 
+        // Check if the queue already contains the consecutive track listing
+        // that is described as part of the album
+        const queuedAlbum = queue.reduce<TrackPlayer.Track[]>((sum, track) => {
+            if (track.id.startsWith(trackIds[sum.length])) {
+                sum.push(track);
+            } else {
+                sum = [];
+            }
+
+            return sum;
+        }, []);
+
+        // If the entire album is already in the queue, we can just return those
+        // tracks, rather than adding it to the queue again.
+        if (queuedAlbum.length === trackIds.length) {
+            if (play) {
+                await TrackPlayer.skip(trackIds[0]);
+                await TrackPlayer.play();
+            }
+            
+            return queuedAlbum;
+        }
+
         // Convert all trackIds to the relevant format for react-native-track-player
         const newTracks = trackIds.map((trackId) => {
             const track = tracks[trackId];
@@ -34,7 +62,15 @@ export default function usePlayAlbum() {
         // Clear the queue and add all tracks
         await TrackPlayer.removeUpcomingTracks();
         await TrackPlayer.add(newTracks);
-        await TrackPlayer.skip(trackIds[0]);
-        TrackPlayer.play();
-    }, [credentials, albums, tracks]);
+        
+        // Then, we'll dispatch the added track event
+        dispatch(player.actions.addNewTrackToPlayer());
+
+        if (play) {
+            await TrackPlayer.skip(trackIds[0]);
+            await TrackPlayer.play();
+        }
+
+        return newTracks;
+    }, [credentials, albums, tracks, queue, dispatch]);
 }

src/utility/usePlayTrack.ts

@@ -3,17 +3,20 @@ import TrackPlayer from 'react-native-track-player';
 import { useTypedSelector } from 'store';
 import { generateTrack } from './JellyfinApi';
 import useQueue from './useQueue';
+import { useDispatch } from 'react-redux';
+import player from 'store/player';
 
 /**
  * A hook that generates a callback that can setup and start playing a
  * particular trackId in the player.
  */
 export default function usePlayTrack() {
+    const dispatch = useDispatch();
     const credentials = useTypedSelector(state => state.settings.jellyfin);
     const tracks = useTypedSelector(state => state.music.tracks.entities);
     const queue = useQueue();
 
-    return useCallback(async function playTrack(trackId: string) {
+    return useCallback(async function playTrack(trackId: string, play = true, addToEnd = true) {
         // Get the relevant track
         const track = tracks[trackId];
 
@@ -30,10 +33,35 @@ export default function usePlayTrack() {
             ...(trackInstances.length ? trackInstances[0] : generateTrack(track, credentials)),
             id: `${trackId}_${trackInstances.length}`
         };
-        await TrackPlayer.add([ newTrack ]);
+
+        // Then, we'll need to check where to add the track
+        if (addToEnd) {
+            await TrackPlayer.add([ newTrack ]);
+        } else {
+            // Try and locate the current track
+            const currentTrackId = await TrackPlayer.getCurrentTrack();
+            const currentTrackIndex = queue.findIndex(track => track.id === currentTrackId);
+            
+            // Since the argument is the id to insert the track BEFORE, we need
+            // to get the current track + 1
+            const targetTrack = currentTrackIndex >= 0 && queue.length > 1
+                ? queue[currentTrackIndex + 1].id
+                : undefined;
+            
+            // Depending on whether this track exists, we either add it there,
+            // or at the end of the queue.
+            await TrackPlayer.add([ newTrack ], targetTrack);
+        }
+
+        // Then, we'll dispatch the added track event
+        dispatch(player.actions.addNewTrackToPlayer());
 
         // Then we'll skip to it and play it
-        await TrackPlayer.skip(newTrack.id);
-        TrackPlayer.play();
-    }, [credentials, tracks, queue]);
+        if (play) {
+            await TrackPlayer.skip(newTrack.id);
+            await TrackPlayer.play();
+        }
+
+        return newTrack;
+    }, [credentials, tracks, queue, dispatch]);
 }

src/utility/useQueue.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import TrackPlayer, { usePlaybackState, Track } from 'react-native-track-player';
+import { useTypedSelector } from 'store';
 
 /**
  * This hook retrieves the current playing track from TrackPlayer
@@ -7,10 +8,11 @@ import TrackPlayer, { usePlaybackState, Track } from 'react-native-track-player'
 export default function useQueue(): Track[] {
     const state = usePlaybackState();
     const [queue, setQueue] = useState<Track[]>([]);
+    const addedTrackCount = useTypedSelector(state => state.player.addedTrackCount);
 
     useEffect(() => {
         TrackPlayer.getQueue().then(setQueue);
-    }, [state]);
+    }, [state, addedTrackCount]);
 
     return queue;
 }

tsconfig.json

@@ -38,7 +38,9 @@
     /* Module Resolution Options */
     "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "paths": {
+      "@localisation": ["./localisation"]
+    },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */