Bump version

Dutch translation fixes

.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

@@ -0,0 +1,55 @@
+name: Fastlane
+ 
+on: [push]
+ 
+jobs:
+  # build-ios:
+  #   runs-on: macos-latest
+  #   steps:
+  #   - uses: actions/checkout@v1
+  #   - name: Install Node dependencies
+  #     run: npm install
+  #   - name: Install CocoaPods dependencies
+  #     run: pod install --project-directory=./ios
+  #   - name: Run fastlane setup
+  #     env:
+  #       APPLE_ACCOUNT: ${{ secrets.APPLE_ACCOUNT }}
+  #       TEAM_ID: ${{ secrets.TEAM_ID }}
+  #     run: |
+  #       cd ios
+  #       fastlane beta --verbose
+  #   - name: Upload artifact
+  #     uses: actions/upload-artifact@v2
+  #     with:
+  #       name: my-artifact
+  #       path: output/*.ipa
+  build-android:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - name: Set outputs
+      id: vars
+      run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+    - name: Set up Ruby 2.6
+      uses: actions/setup-ruby@v1
+      with:
+        ruby-version: 2.6.x
+    - name: Install fastlane
+      run: |
+        gem install bundler
+        bundle install -j 6
+    - 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
+      with:
+        name: jellyfin-audio-player-android-${{ steps.vars.outputs.sha_short }}.apk
+        path: android/app/build/outputs/**/*.apk

.gitignore

@@ -61,3 +61,11 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+build/
+fastlane/report.xml
+fastlane/Appfile
+certificates/
+
+.env
+sentry.properties

Gemfile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+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

@@ -0,0 +1,213 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.3)
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    artifactory (3.0.15)
+    atomos (0.1.3)
+    aws-eventstream (1.1.1)
+    aws-partitions (1.488.0)
+    aws-sdk-core (3.119.0)
+      aws-eventstream (~> 1, >= 1.0.2)
+      aws-partitions (~> 1, >= 1.239.0)
+      aws-sigv4 (~> 1.1)
+      jmespath (~> 1.0)
+    aws-sdk-kms (1.46.0)
+      aws-sdk-core (~> 3, >= 3.119.0)
+      aws-sigv4 (~> 1.1)
+    aws-sdk-s3 (1.99.0)
+      aws-sdk-core (~> 3, >= 3.119.0)
+      aws-sdk-kms (~> 1)
+      aws-sigv4 (~> 1.1)
+    aws-sigv4 (1.2.4)
+      aws-eventstream (~> 1, >= 1.0.2)
+    babosa (1.0.4)
+    claide (1.0.3)
+    colored (1.2)
+    colored2 (3.1.2)
+    commander (4.6.0)
+      highline (~> 2.0.0)
+    declarative (0.0.20)
+    digest-crc (0.6.4)
+      rake (>= 12.0.0, < 14.0.0)
+    domain_name (0.5.20190701)
+      unf (>= 0.0.5, < 1.0.0)
+    dotenv (2.7.6)
+    emoji_regex (3.2.2)
+    excon (0.85.0)
+    faraday (1.7.0)
+      faraday-em_http (~> 1.0)
+      faraday-em_synchrony (~> 1.0)
+      faraday-excon (~> 1.1)
+      faraday-httpclient (~> 1.0.1)
+      faraday-net_http (~> 1.0)
+      faraday-net_http_persistent (~> 1.1)
+      faraday-patron (~> 1.0)
+      faraday-rack (~> 1.0)
+      multipart-post (>= 1.2, < 3)
+      ruby2_keywords (>= 0.0.4)
+    faraday-cookie_jar (0.0.7)
+      faraday (>= 0.8.0)
+      http-cookie (~> 1.0.0)
+    faraday-em_http (1.0.0)
+    faraday-em_synchrony (1.0.0)
+    faraday-excon (1.1.0)
+    faraday-httpclient (1.0.1)
+    faraday-net_http (1.0.1)
+    faraday-net_http_persistent (1.2.0)
+    faraday-patron (1.0.0)
+    faraday-rack (1.0.0)
+    faraday_middleware (1.1.0)
+      faraday (~> 1.0)
+    fastimage (2.2.5)
+    fastlane (2.191.0)
+      CFPropertyList (>= 2.3, < 4.0.0)
+      addressable (>= 2.8, < 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)
+      colored
+      commander (~> 4.6)
+      dotenv (>= 2.1.1, < 3.0.0)
+      emoji_regex (>= 0.1, < 4.0)
+      excon (>= 0.71.0, < 1.0.0)
+      faraday (~> 1.0)
+      faraday-cookie_jar (~> 0.0.6)
+      faraday_middleware (~> 1.0)
+      fastimage (>= 2.1.0, < 3.0.0)
+      gh_inspector (>= 1.1.2, < 2.0.0)
+      google-apis-androidpublisher_v3 (~> 0.3)
+      google-apis-playcustomapp_v1 (~> 0.1)
+      google-cloud-storage (~> 1.31)
+      highline (~> 2.0)
+      json (< 3.0.0)
+      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)
+      simctl (~> 1.6.3)
+      terminal-notifier (>= 2.0.0, < 3.0.0)
+      terminal-table (>= 1.4.5, < 2.0.0)
+      tty-screen (>= 0.6.3, < 1.0.0)
+      tty-spinner (>= 0.8.0, < 1.0.0)
+      word_wrap (~> 1.0.0)
+      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-apis-androidpublisher_v3 (0.10.0)
+      google-apis-core (>= 0.4, < 2.a)
+    google-apis-core (0.4.1)
+      addressable (~> 2.5, >= 2.5.1)
+      googleauth (>= 0.16.2, < 2.a)
+      httpclient (>= 2.8.1, < 3.a)
+      mini_mime (~> 1.0)
+      representable (~> 3.0)
+      retriable (>= 2.0, < 4.a)
+      rexml
+      webrick
+    google-apis-iamcredentials_v1 (0.6.0)
+      google-apis-core (>= 0.4, < 2.a)
+    google-apis-playcustomapp_v1 (0.5.0)
+      google-apis-core (>= 0.4, < 2.a)
+    google-apis-storage_v1 (0.6.0)
+      google-apis-core (>= 0.4, < 2.a)
+    google-cloud-core (1.6.0)
+      google-cloud-env (~> 1.0)
+      google-cloud-errors (~> 1.0)
+    google-cloud-env (1.5.0)
+      faraday (>= 0.17.3, < 2.0)
+    google-cloud-errors (1.1.0)
+    google-cloud-storage (1.34.1)
+      addressable (~> 2.5)
+      digest-crc (~> 0.4)
+      google-apis-iamcredentials_v1 (~> 0.1)
+      google-apis-storage_v1 (~> 0.1)
+      google-cloud-core (~> 1.6)
+      googleauth (>= 0.16.2, < 2.a)
+      mini_mime (~> 1.0)
+    googleauth (0.17.0)
+      faraday (>= 0.17.3, < 2.0)
+      jwt (>= 1.4, < 3.0)
+      memoist (~> 0.16)
+      multi_json (~> 1.11)
+      os (>= 0.9, < 2.0)
+      signet (~> 0.14)
+    highline (2.0.3)
+    http-cookie (1.0.4)
+      domain_name (~> 0.5)
+    httpclient (2.8.3)
+    jmespath (1.4.0)
+    json (2.5.1)
+    jwt (2.2.3)
+    memoist (0.16.2)
+    mini_magick (4.11.0)
+    mini_mime (1.1.0)
+    multi_json (1.15.0)
+    multipart-post (2.0.0)
+    nanaimo (0.3.0)
+    naturally (2.2.1)
+    os (1.1.1)
+    plist (3.6.0)
+    public_suffix (4.0.6)
+    rake (13.0.6)
+    representable (3.1.1)
+      declarative (< 0.1.0)
+      trailblazer-option (>= 0.1.1, < 0.2.0)
+      uber (< 0.2.0)
+    retriable (3.1.2)
+    rexml (3.2.5)
+    rouge (2.0.7)
+    ruby2_keywords (0.0.5)
+    rubyzip (2.3.2)
+    security (0.1.3)
+    signet (0.15.0)
+      addressable (~> 2.3)
+      faraday (>= 0.17.3, < 2.0)
+      jwt (>= 1.5, < 3.0)
+      multi_json (~> 1.10)
+    simctl (1.6.8)
+      CFPropertyList
+      naturally
+    terminal-notifier (2.0.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    trailblazer-option (0.1.1)
+    tty-cursor (0.7.1)
+    tty-screen (0.8.1)
+    tty-spinner (0.9.3)
+      tty-cursor (~> 0.7)
+    uber (0.1.0)
+    unf (0.1.4)
+      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.21.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    xcpretty (0.3.0)
+      rouge (~> 2.0.7)
+    xcpretty-travis-formatter (1.0.1)
+      xcpretty (~> 0.2, >= 0.0.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  fastlane (~> 2.153)
+  fastlane-plugin-sentry
+
+BUNDLED WITH
+   1.17.2

README.md

@@ -1,25 +1,69 @@
 # Jellyfin Audio Player
-This is a React Native-based audio streaming app for Jellyfin.
+![Fastlane](https://github.com/leinelissen/jellyfin-audio-player/workflows/Fastlane/badge.svg)
+![MIT License](https://img.shields.io/github/license/leinelissen/jellyfin-audio-player)
+
+This is a [React Native](https://reactnative.dev/)-based audio streaming app for [Jellyfin](https://jellyfin.org/). Jellyfin is a community-based piece of software that allows you to stream your media library over the internet. By means of React Native, Jellyfin Audio Player allows you to stream your Jellyfin Music library, with full support for background audio and casting (ie. Airplay and Chromecast).
+
+## ❗️Now open for beta testing on iOS
+Please follow this link to enroll for the TestFlight beta release of Jellyfin Audio Player: https://testflight.apple.com/join/cf2AMDpx.
 
 |![](./docs/images/now-playing.png)|![](./docs/images/recent-albums.png)|![](./docs/images/album-list.png)|![](./docs/images/search.png)|
 |-|-|-|-|
 
+## Features
+* Sorting by recent albums
+* Browsing through all available albums
+* Searching based on album and artist names
+* Queuing tracks and albums
+* AirPlay and Chromecast support
+* Background audio
+* Native Dark Mode
+
+### Features being considered
+* Downloading music for offline playback
+* Searching based on track names
+* Looping and shuffling queue
+
 ## Getting Started
-What you want get started on depends on your intentions. As there is no build for general availability yet, you will need to build this project yourself.
+This piece of software is in alpha. I am working on getting this app in ~~TestFlight and~~ Google Play Developer Console, but this is contingent on keys being available. In the meantime, IPAs and APK are intermittenly released on the [Releases page](https://github.com/leinelissen/jellyfin-audio-player/releases). Alternatively, you can build this app from source using the build instructions.
 
 ### Using the app
-You will need to setup your Jellyfin account for the application to be able to pull in all your audio. To do this, go over to the "Settings" tab and click the "Set Jellyfin server"-button. A modal will pop up in which you will enter your Jellyfin server url, after which you enter your credentials in the provided browser view. When the app detects your credentials, they will automatically be remembered by the app.
+You will need to setup your Jellyfin account for the application to be able to pull in all your audio. To do this, go over to the "Settings" tab and click the "Set Jellyfin server"-button. A modal will pop up in which you will enter your Jellyfin server url, after which you enter your credentials in the provided browser view. When the app detects your credentials, they will automatically be remembered for the future.
+
+## Building from source
+### Prerequisites
+This project is built on React Native, and first of all requires [NodeJS](https://nodejs.org/en/) to be installed. After installing it and cloning this repository, don't forget ton run `npm install` on your command line, so that all Node dependencies are installed.
+
+#### iOS Prerequisites
+[XCode](https://developer.apple.com/download/) is required to build the iOS application. It also comes bundles with iOS simulators which make development exceedingly easy. This does mean that iOS development is limited to macs.
+
+#### Android prerequisites
+[Android Studio](https://developer.android.com/studio/install) is recommended for development as it includes the Android SDK as well as Android Simulators for devleopment. At the very least, installing the Android SDK is neccessary for building any version of the app.
 
 ### Development Build
-This app has been mainly developed for iOS, but should mostly function on Android as well. To get started, do the following:
-1. Clone this repository
-2. Install [NodeJS](https://nodejs.org/en/) and [XCode](https://developer.apple.com/download/)
-3. `npm install`
-4. `npm run ios`
+As soon as all prerequisites are covered, you can start development in either iOS or Android simulators by running the following
+```
+npm run ios
+npm run android
+```
 
 ### Production Build
-Follow step 1-3 from the development build, then do the following:
+This project is configured using [Fastlane](https://docs.fastlane.tools/), which allows for easy IPA and APK generation. To get started with this, make sure you install Fastlane first either using bundler (see below), or alternatively via e.g. Homebrew ([see supported methods](https://docs.fastlane.tools/getting-started/ios/setup/)).
 ```
-npm run build:ios
+gem install bundler
+bundle install -j 6
 ```
-Then open `ios/JellyfinAudioPlayer.xcworkspace` and build the project in XCode.
+When fastlane is setup, you can run either commands for generating IPA (iOS) or APK (Android) bundles.
+```
+fastlane ios beta
+fastlane android beta
+```
+
+## Licensing and Credits
+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

@@ -79,9 +79,11 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     enableHermes: false,  // clean and rebuild if changing
+    entryFile: 'index.js'
 ]
 
 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:
@@ -120,13 +122,15 @@ def jscFlavor = 'org.webkit:android-jsc:+'
  */
 def enableHermes = project.ext.react.get("enableHermes", false);
 
-android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
+/**
+ * Architectures to build native code for in debug.
+ */
+def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
 
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    compileSdkVersion rootProject.ext.compileSdkVersion
 
     defaultConfig {
         applicationId "com.jellyfinaudioplayer"
@@ -134,6 +138,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        multiDexEnabled true
     }
     splits {
         abi {
@@ -154,6 +159,11 @@ android {
     buildTypes {
         debug {
             signingConfig signingConfigs.debug
+            if (nativeArchitectures) {
+                ndk {
+                    abiFilters nativeArchitectures.split(',')
+                }
+            }
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
@@ -164,23 +174,17 @@ android {
         }
     }
 
-    packagingOptions {
-        pickFirst "lib/armeabi-v7a/libc++_shared.so"
-        pickFirst "lib/arm64-v8a/libc++_shared.so"
-        pickFirst "lib/x86/libc++_shared.so"
-        pickFirst "lib/x86_64/libc++_shared.so"
-    }
-
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         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)
             }
 
         }
@@ -218,7 +222,7 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.compile
+    from configurations.implementation
     into 'libs'
 }
 

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/app/src/main/java/com/jellyfinaudioplayer/MainActivity.java

@@ -1,6 +1,7 @@
 package com.jellyfinaudioplayer;
 
 import com.facebook.react.ReactActivity;
+import android.os.Bundle;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +13,9 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "JellyfinAudioPlayer";
   }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
 }

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,30 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="85.84757"
+                android:endY="92.4963"
+                android:startX="42.9492"
+                android:startY="49.59793"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
+        android:strokeWidth="1"
+        android:strokeColor="#00000000" />
+</vector>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

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

@@ -1,9 +1,8 @@
 <resources>
 
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:textColor">#000000</item>
+        <!-- <item name="android:textColor">#000000</item> -->
     </style>
 
 </resources>

android/build.gradle

@@ -2,17 +2,18 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
-        compileSdkVersion = 28
-        targetSdkVersion = 28
+        buildToolsVersion = "30.0.2"
+        minSdkVersion = 21
+        compileSdkVersion = 30
+        targetSdkVersion = 30
+        ndkVersion = "21.4.7075529"
     }
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.2")
+        classpath("com.android.tools.build:gradle:4.2.2")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -21,6 +22,7 @@ buildscript {
 
 allprojects {
     repositories {
+        mavenCentral()
         mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

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.99.0

android/gradle/wrapper/gradle-wrapper.properties

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

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

@@ -0,0 +1,4 @@
+package_name("nl.moeilijkedingen.jellyfinaudioplayer")
+app_identifier("nl.moeilijkedingen.jellyfinaudioplayer")
+apple_id("lei@moeilijkedingen.nl")
+team_id("238P3C58WC")

fastlane/Fastfile

@@ -0,0 +1,86 @@
+default_platform(:ios)
+
+platform :ios do
+    lane :alpha do
+        get_certificates(
+            development: true,
+            output_path: 'certificates/'
+        )
+        build_app(
+            scheme: "Jellyfin Player",
+            export_method: "development",
+            output_directory: "build",
+            workspace: "ios/JellyfinAudioPlayer.xcworkspace"
+        )
+    end
+    lane :beta do 
+        get_certificates(
+            output_path: 'certificates/'
+        )
+        get_provisioning_profile(
+            output_path: 'certificates/',
+            filename: "provisioning.mobileprovision",
+            fail_on_name_taken: true,
+        )
+        update_code_signing_settings(
+            use_automatic_signing: true,
+            path: "ios/JellyfinAudioPlayer.xcodeproj"
+        )
+        increment_build_number(
+            xcodeproj: "ios/JellyfinAudioPlayer.xcodeproj"
+        )
+        build_app(
+            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
+
+platform :android do
+    desc "Generate beta build"
+    lane :beta do
+        gradle(
+            task: "clean assembleRelease",
+            project_dir: "android"
+        )
+    end
+end

fastlane/Pluginfile

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

fastlane/README.md

@@ -0,0 +1,43 @@
+fastlane documentation
+================
+# Installation
+
+Make sure you have the latest version of the Xcode command line tools installed:
+
+```
+xcode-select --install
+```
+
+Install _fastlane_ using
+```
+[sudo] gem install fastlane -NV
+```
+or alternatively using `brew install fastlane`
+
+# Available Actions
+## iOS
+### ios alpha
+```
+fastlane ios alpha
+```
+
+### ios beta
+```
+fastlane ios beta
+```
+
+
+----
+
+## Android
+### android beta
+```
+fastlane android beta
+```
+Generate beta build
+
+----
+
+This README.md is auto-generated and will be re-generated every time [_fastlane_](https://fastlane.tools) is run.
+More information about fastlane can be found on [fastlane.tools](https://fastlane.tools).
+The documentation of fastlane can be found on [docs.fastlane.tools](https://docs.fastlane.tools).

index.js

@@ -1,18 +1,13 @@
-// 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';
+import { enableScreens } from 'react-native-screens';
 
+setupSentry();
+enableScreens();
 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

@@ -12,15 +12,9 @@
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
-		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		2DCD954D1E0B4F2C00145EB5 /* JellyfinAudioPlayerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* JellyfinAudioPlayerTests.m */; };
 		463612208457EBB4B723000A /* libPods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 842AB597D56E84A4ACDC4735 /* libPods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.a */; };
-		4F46F441249A56FF00308470 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; };
-		9C3FCC29E5AD02738E8E3F28 /* libPods-JellyfinAudioPlayer-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7D43C7610851B9666193E3F6 /* libPods-JellyfinAudioPlayer-tvOSTests.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 */; };
-		A9112B4690DCDB63E46B6C30 /* libPods-JellyfinAudioPlayer-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E35451F7979C52C1692C4C9F /* libPods-JellyfinAudioPlayer-tvOS.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -31,17 +25,9 @@
 			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
 			remoteInfo = JellyfinAudioPlayer;
 		};
-		2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
-			proxyType = 1;
-			remoteGlobalIDString = 2D02E47A1E0B4A5D006451C7;
-			remoteInfo = "JellyfinAudioPlayer-tvOS";
-		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
 		00E356EE1AD99517003FC87E /* JellyfinAudioPlayerTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = JellyfinAudioPlayerTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* JellyfinAudioPlayerTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = JellyfinAudioPlayerTests.m; sourceTree = "<group>"; };
@@ -53,9 +39,9 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = JellyfinAudioPlayer/Info.plist; sourceTree = "<group>"; };
 		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>"; };
-		2D02E47B1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "JellyfinAudioPlayer-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
-		2D02E4901E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "JellyfinAudioPlayer-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		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; };
@@ -87,22 +73,6 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		2D02E4781E0B4A5D006451C7 /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				A9112B4690DCDB63E46B6C30 /* libPods-JellyfinAudioPlayer-tvOS.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48D1E0B4A5D006451C7 /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				9C3FCC29E5AD02738E8E3F28 /* libPods-JellyfinAudioPlayer-tvOSTests.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
@@ -126,13 +96,14 @@
 		13B07FAE1A68108700A75B9A /* JellyfinAudioPlayer */ = {
 			isa = PBXGroup;
 			children = (
-				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				4FA1B23C2550A94C007A035E /* File.swift */,
+				4FA1B23B2550A94B007A035E /* JellyfinAudioPlayer-Bridging-Header.h */,
 			);
 			name = JellyfinAudioPlayer;
 			sourceTree = "<group>";
@@ -192,8 +163,6 @@
 			children = (
 				13B07F961A680F5B00A75B9A /* Jellyfin Player.app */,
 				00E356EE1AD99517003FC87E /* JellyfinAudioPlayerTests.xctest */,
-				2D02E47B1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOS.app */,
-				2D02E4901E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOSTests.xctest */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -209,6 +178,8 @@
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
+				BDE784ECF29EF861DBFF49D7 /* [CP] Copy Pods Resources */,
+				476A07969B11CA4E09819AC0 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -230,6 +201,9 @@
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				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 = (
 			);
@@ -240,45 +214,6 @@
 			productReference = 13B07F961A680F5B00A75B9A /* Jellyfin Player.app */;
 			productType = "com.apple.product-type.application";
 		};
-		2D02E47A1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOS */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "JellyfinAudioPlayer-tvOS" */;
-			buildPhases = (
-				05D2621E5320B14963E6BA49 /* [CP] Check Pods Manifest.lock */,
-				FD10A7F122414F3F0027D42C /* Start Packager */,
-				2D02E4771E0B4A5D006451C7 /* Sources */,
-				2D02E4781E0B4A5D006451C7 /* Frameworks */,
-				2D02E4791E0B4A5D006451C7 /* Resources */,
-				2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-			);
-			name = "JellyfinAudioPlayer-tvOS";
-			productName = "JellyfinAudioPlayer-tvOS";
-			productReference = 2D02E47B1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOS.app */;
-			productType = "com.apple.product-type.application";
-		};
-		2D02E48F1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOSTests */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "JellyfinAudioPlayer-tvOSTests" */;
-			buildPhases = (
-				BFD53620BC35198B520DBD0A /* [CP] Check Pods Manifest.lock */,
-				2D02E48C1E0B4A5D006451C7 /* Sources */,
-				2D02E48D1E0B4A5D006451C7 /* Frameworks */,
-				2D02E48E1E0B4A5D006451C7 /* Resources */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-				2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */,
-			);
-			name = "JellyfinAudioPlayer-tvOSTests";
-			productName = "JellyfinAudioPlayer-tvOSTests";
-			productReference = 2D02E4901E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOSTests.xctest */;
-			productType = "com.apple.product-type.bundle.unit-test";
-		};
 /* End PBXNativeTarget section */
 
 /* Begin PBXProject section */
@@ -289,24 +224,15 @@
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
 						CreatedOnToolsVersion = 6.2;
-						DevelopmentTeam = HD2D35G9Y4;
+						DevelopmentTeam = 238P3C58WC;
+						ProvisioningStyle = Automatic;
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
-						DevelopmentTeam = HD2D35G9Y4;
-						LastSwiftMigration = 1120;
-					};
-					2D02E47A1E0B4A5D006451C7 = {
-						CreatedOnToolsVersion = 8.2.1;
-						DevelopmentTeam = HD2D35G9Y4;
+						DevelopmentTeam = 238P3C58WC;
+						LastSwiftMigration = 1210;
 						ProvisioningStyle = Automatic;
 					};
-					2D02E48F1E0B4A5D006451C7 = {
-						CreatedOnToolsVersion = 8.2.1;
-						DevelopmentTeam = HD2D35G9Y4;
-						ProvisioningStyle = Automatic;
-						TestTargetID = 2D02E47A1E0B4A5D006451C7;
-					};
 				};
 			};
 			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "JellyfinAudioPlayer" */;
@@ -324,8 +250,6 @@
 			targets = (
 				13B07F861A680F5B00A75B9A /* JellyfinAudioPlayer */,
 				00E356ED1AD99517003FC87E /* JellyfinAudioPlayerTests */,
-				2D02E47A1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOS */,
-				2D02E48F1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOSTests */,
 			);
 		};
 /* End PBXProject section */
@@ -342,27 +266,11 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				4F46F441249A56FF00308470 /* main.jsbundle in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		2D02E4791E0B4A5D006451C7 /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48E1E0B4A5D006451C7 /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 /* End PBXResourcesBuildPhase section */
 
 /* Begin PBXShellScriptBuildPhase section */
@@ -371,50 +279,69 @@
 			buildActionMask = 2147483647;
 			files = (
 			);
+			inputFileListPaths = (
+			);
 			inputPaths = (
 			);
 			name = "Bundle React Native code and images";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/main.jsbundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=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";
 		};
-		05D2621E5320B14963E6BA49 /* [CP] Check Pods Manifest.lock */ = {
+		1DC46C84C90B4D84A18AC142 /* Upload Debug Symbols to Sentry */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
-			inputFileListPaths = (
-			);
 			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
 			);
+			name = "Upload Debug Symbols to Sentry";
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-JellyfinAudioPlayer-tvOS-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			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";
+			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}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/double-conversion.framework",
+				"${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;
 		};
-		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
+		B9FB8FC65CEFF9AFAC71127E /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
-			name = "Bundle React Native Code And Images";
+			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer-resources.sh\"\n";
+			showEnvVarsInLog = 0;
 		};
 		BBD71961640F29097BE9932A /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -438,26 +365,22 @@
 			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;
 		};
-		BFD53620BC35198B520DBD0A /* [CP] Check Pods Manifest.lock */ = {
+		BDE784ECF29EF861DBFF49D7 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
-			inputFileListPaths = (
-			);
 			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
+			name = "[CP] Copy Pods Resources";
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-JellyfinAudioPlayer-tvOSTests-checkManifestLockResult.txt",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			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";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests/Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
 		E68FAF43791AC236CF4BF8CB /* [CP] Check Pods Manifest.lock */ = {
@@ -482,26 +405,27 @@
 			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;
 		};
-		FD10A7F022414F080027D42C /* Start Packager */ = {
+		E8FF56077B675D4D92D5CC25 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
-			inputFileListPaths = (
-			);
 			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
-			name = "Start Packager";
-			outputFileListPaths = (
-			);
+			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/double-conversion.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-JellyfinAudioPlayer/Pods-JellyfinAudioPlayer-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		FD10A7F122414F3F0027D42C /* Start Packager */ = {
+		FD10A7F022414F080027D42C /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -536,27 +460,11 @@
 			buildActionMask = 2147483647;
 			files = (
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
+				4FA1B23D2550A94C007A035E /* File.swift in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		2D02E4771E0B4A5D006451C7 /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,
-				2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48C1E0B4A5D006451C7 /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2DCD954D1E0B4F2C00145EB5 /* JellyfinAudioPlayerTests.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 /* End PBXSourcesBuildPhase section */
 
 /* Begin PBXTargetDependency section */
@@ -565,11 +473,6 @@
 			target = 13B07F861A680F5B00A75B9A /* JellyfinAudioPlayer */;
 			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
 		};
-		2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */ = {
-			isa = PBXTargetDependency;
-			target = 2D02E47A1E0B4A5D006451C7 /* JellyfinAudioPlayer-tvOS */;
-			targetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;
-		};
 /* End PBXTargetDependency section */
 
 /* Begin PBXVariantGroup section */
@@ -589,8 +492,10 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 8DAD3DCD6450C4255A20940E /* Pods-JellyfinAudioPlayer-JellyfinAudioPlayerTests.debug.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
+				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = 238P3C58WC;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
@@ -613,9 +518,11 @@
 			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;
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
+				DEVELOPMENT_TEAM = 238P3C58WC;
 				INFOPLIST_FILE = JellyfinAudioPlayerTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -626,6 +533,8 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
+				PROVISIONING_PROFILE = "915c5213-22f6-4f9d-8065-2a06300f9bfb";
+				PROVISIONING_PROFILE_SPECIFIER = "";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/JellyfinAudioPlayer.app/JellyfinAudioPlayer";
 			};
 			name = Release;
@@ -636,8 +545,9 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 19;
+				DEVELOPMENT_TEAM = 238P3C58WC;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"$(inherited)",
@@ -650,8 +560,10 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				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";
@@ -664,8 +576,9 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 19;
+				DEVELOPMENT_TEAM = 238P3C58WC;
 				INFOPLIST_FILE = JellyfinAudioPlayer/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
@@ -673,127 +586,16 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_BUNDLE_IDENTIFIER = nl.moeilijkedingen.jellyfinaudioplayer;
 				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";
 			};
 			name = Release;
 		};
-		2D02E4971E0B4A5E006451C7 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = DEB1E90737138C4BD6E5323D /* Pods-JellyfinAudioPlayer-tvOS.debug.xcconfig */;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
-				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
-				ENABLE_TESTABILITY = YES;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "JellyfinAudioPlayer-tvOS/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.JellyfinAudioPlayer-tvOS";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TARGETED_DEVICE_FAMILY = 3;
-				TVOS_DEPLOYMENT_TARGET = 9.2;
-			};
-			name = Debug;
-		};
-		2D02E4981E0B4A5E006451C7 /* Release */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = B179EFCC51AF0F281E73F0B8 /* Pods-JellyfinAudioPlayer-tvOS.release.xcconfig */;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
-				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "JellyfinAudioPlayer-tvOS/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.JellyfinAudioPlayer-tvOS";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TARGETED_DEVICE_FAMILY = 3;
-				TVOS_DEPLOYMENT_TARGET = 9.2;
-			};
-			name = Release;
-		};
-		2D02E4991E0B4A5E006451C7 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = 86AD8F7165272727927424B9 /* Pods-JellyfinAudioPlayer-tvOSTests.debug.xcconfig */;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
-				ENABLE_TESTABILITY = YES;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "JellyfinAudioPlayer-tvOSTests/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.JellyfinAudioPlayer-tvOSTests";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/JellyfinAudioPlayer-tvOS.app/JellyfinAudioPlayer-tvOS";
-				TVOS_DEPLOYMENT_TARGET = 10.1;
-			};
-			name = Debug;
-		};
-		2D02E49A1E0B4A5E006451C7 /* Release */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = 590BEA7DE65819C5B5FDAD06 /* Pods-JellyfinAudioPlayer-tvOSTests.release.xcconfig */;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				DEVELOPMENT_TEAM = HD2D35G9Y4;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "JellyfinAudioPlayer-tvOSTests/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.JellyfinAudioPlayer-tvOSTests";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/JellyfinAudioPlayer-tvOS.app/JellyfinAudioPlayer-tvOS";
-				TVOS_DEPLOYMENT_TARGET = 10.1;
-			};
-			name = Release;
-		};
 		83CBBA201A601CBA00E9B192 /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
@@ -822,10 +624,12 @@
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				CODE_SIGN_IDENTITY = "Apple Development";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				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;
@@ -841,7 +645,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 = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
@@ -850,6 +654,7 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				PRODUCT_NAME = "Jellyfin Player";
 				SDKROOT = iphoneos;
 			};
 			name = Debug;
@@ -882,10 +687,12 @@
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				CODE_SIGN_IDENTITY = "Apple Development";
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				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;
@@ -894,7 +701,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 = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
@@ -902,6 +709,7 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				PRODUCT_NAME = "Jellyfin Player";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
 			};
@@ -928,24 +736,6 @@
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;
 		};
-		2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "JellyfinAudioPlayer-tvOS" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				2D02E4971E0B4A5E006451C7 /* Debug */,
-				2D02E4981E0B4A5E006451C7 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "JellyfinAudioPlayer-tvOSTests" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				2D02E4991E0B4A5E006451C7 /* Debug */,
-				2D02E49A1E0B4A5E006451C7 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
 		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "JellyfinAudioPlayer" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (

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/AppDelegate.m

@@ -36,7 +36,11 @@ static void InitializeFlipper(UIApplication *application) {
                                                    moduleName:@"JellyfinAudioPlayer"
                                             initialProperties:nil];
 
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+  if (@available(iOS 13.0, *)) {
+      rootView.backgroundColor = [UIColor systemBackgroundColor];
+  } else {
+      rootView.backgroundColor = [UIColor whiteColor];
+  }
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [UIViewController new];

ios/JellyfinAudioPlayer/Info.plist

@@ -21,28 +21,20 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1</string>
+	<string>19</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
 		<key>NSAllowsArbitraryLoads</key>
 		<true/>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>audio</string>
-		<string>processing</string>
+		<string>fetch</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

ios/JellyfinAudioPlayerTests/Info.plist

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

ios/Podfile

@@ -1,104 +1,24 @@
-platform :ios, '10.0'
+platform :ios, '11.0'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
-
-def add_flipper_pods!(versions = {})
-  versions['Flipper'] ||= '~> 0.33.1'
-  versions['DoubleConversion'] ||= '1.1.7'
-  versions['Flipper-Folly'] ||= '~> 2.1'
-  versions['Flipper-Glog'] ||= '0.3.6'
-  versions['Flipper-PeerTalk'] ||= '~> 0.0.4'
-  versions['Flipper-RSocket'] ||= '~> 1.0'
-
-  pod 'FlipperKit', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configuration => 'Debug'
-
-  # List all transitive dependencies for FlipperKit pods
-  # to avoid them being linked in Release builds
-  pod 'Flipper', versions['Flipper'], :configuration => 'Debug'
-  pod 'Flipper-DoubleConversion', versions['DoubleConversion'], :configuration => 'Debug'
-  pod 'Flipper-Folly', versions['Flipper-Folly'], :configuration => 'Debug'
-  pod 'Flipper-Glog', versions['Flipper-Glog'], :configuration => 'Debug'
-  pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configuration => 'Debug'
-  pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configuration => 'Debug'
-  pod 'FlipperKit/Core', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/CppBridge', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FBDefines', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configuration => 'Debug'
-  pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configuration => 'Debug'
-end
-
-# Post Install processing for Flipper
-def flipper_post_install(installer)
-  installer.pods_project.targets.each do |target|
-    if target.name == 'YogaKit'
-      target.build_configurations.each do |config|
-        config.build_settings['SWIFT_VERSION'] = '4.1'
-      end
-    end
-  end
-end
+require_relative '../node_modules/react-native/scripts/react_native_pods'
 
 target 'JellyfinAudioPlayer' do
-  # Pods for JellyfinAudioPlayer
-  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
-  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
-  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
-  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
-  pod 'React', :path => '../node_modules/react-native/'
-  pod 'React-Core', :path => '../node_modules/react-native/'
-  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
-  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
-  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
-  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
-  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
-  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
-  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
-  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
-  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
-  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
-  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
-  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
-
-  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
-  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
-  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
-  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
-  pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"
-  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
-  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true
-
-  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
-  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  config = use_native_modules!
+  use_react_native!(:path => config["reactNativePath"])
 
   target 'JellyfinAudioPlayerTests' do
     inherit! :complete
     # Pods for testing
   end
-
-  use_native_modules!
-
   # Enables Flipper.
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable these next few lines.
-  add_flipper_pods!
+  use_flipper!
   post_install do |installer|
     flipper_post_install(installer)
-  end
-end
-
-target 'JellyfinAudioPlayer-tvOS' do
-  # Pods for JellyfinAudioPlayer-tvOS
-
-  target 'JellyfinAudioPlayer-tvOSTests' do
-    inherit! :search_paths
-    # Pods for testing
+    installer.pods_project.build_configurations.each do |config|
+      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
+    end
   end
 end

package.json

@@ -1,66 +1,75 @@
 {
   "name": "JellyfinAudioPlayer",
-  "version": "0.0.1",
-  "main": "src/index.ts",
+  "version": "0.1.5",
+  "main": "src/index.js",
   "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/masked-view": "^0.1.10",
-    "@react-native-community/picker": "^1.6.5",
-    "@react-native-community/slider": "^3.0.0",
-    "@react-navigation/bottom-tabs": "^5.6.1",
-    "@react-navigation/native": "^5.6.1",
-    "@react-navigation/stack": "^5.6.2",
-    "@reduxjs/toolkit": "^1.4.0",
-    "@types/lodash": "^4.14.157",
-    "@types/redux-logger": "^3.0.8",
-    "@types/styled-components": "^5.1.0",
-    "date-fns": "^2.14.0",
-    "fuse.js": "^6.4.0",
-    "lodash": "^4.17.15",
-    "react": "16.11.0",
-    "react-native": "0.62.2",
-    "react-native-fast-image": "^8.1.5",
-    "react-native-gesture-handler": "^1.6.1",
-    "react-native-reanimated": "^1.9.0",
-    "react-native-safe-area-context": "^3.0.7",
-    "react-native-screens": "^2.9.0",
-    "react-native-svg": "^12.1.0",
+    "@react-native-community/async-storage": "^1.12.1",
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-community/picker": "^1.8.1",
+    "@react-native-community/slider": "^3.0.3",
+    "@react-navigation/bottom-tabs": "^5.11.15",
+    "@react-navigation/native": "^5.9.8",
+    "@react-navigation/stack": "^5.14.9",
+    "@reduxjs/toolkit": "^1.6.2",
+    "@sentry/react-native": "^2.6.2",
+    "@types/lodash": "^4.14.176",
+    "date-fns": "^2.25.0",
+    "fuse.js": "^6.4.6",
+    "i18n-js": "^3.8.0",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-native": "^0.66.1",
+    "react-native-airplay-button": "^1.1.0",
+    "react-native-collapsible": "^1.6.0",
+    "react-native-dotenv": "^2.6.2",
+    "react-native-fast-image": "^8.5.11",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-localize": "^2.1.5",
+    "react-native-reanimated": "^2.2.3",
+    "react-native-safe-area-context": "^3.3.2",
+    "react-native-screens": "^3.8.0",
+    "react-native-svg": "^12.2.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.0",
-    "redux": "^4.0.5",
+    "react-native-track-player": "^1.2.7",
+    "react-native-webview": "^11.14.1",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/runtime": "^7.10.4",
-    "@react-native-community/eslint-config": "^1.0.0",
-    "@types/jest": "^24.0.24",
-    "@types/react-native": "^0.62.17",
-    "@types/react-redux": "^7.1.9",
-    "@types/react-test-renderer": "16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "babel-jest": "^24.9.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "eslint": "^6.5.1",
-    "eslint-plugin-react-hooks": "^4.0.5",
-    "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.58.0",
-    "react-test-renderer": "16.11.0",
-    "typescript": "^3.9.6"
+    "@babel/core": "^7.15.8",
+    "@babel/runtime": "^7.15.4",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@sentry/cli": "^1.70.1",
+    "@types/i18n-js": "^3.8.2",
+    "@types/jest": "^26.0.24",
+    "@types/react-native": "^0.66.1",
+    "@types/react-redux": "^7.1.20",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/redux-logger": "^3.0.9",
+    "@types/styled-components": "^5.1.15",
+    "@types/styled-components-react-native": "^5.1.2",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.66.2",
+    "react-test-renderer": "^17.0.2",
+    "typescript": "^4.4.4"
   },
   "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,50 +1,51 @@
-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 { NavigationContainer } from '@react-navigation/native';
 import Routes from '../screens';
 import store, { persistedStore } from 'store';
+import {
+    NavigationContainer,
+    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;
-}
+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 = {
-        isReady: false
-    };
-
-    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.setState({ isReady: true });
-    }
-    
-    render() {
-        const { isReady } = 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}>
-                    <NavigationContainer>
+    return (
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistedStore}>
+                <ColorSchemeContext.Provider value={theme}>
+                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                         <Routes />
+                        <PlayerStateUpdater />
                     </NavigationContainer>
-                </PersistGate>
-            </Provider>
-        );
-    }
+                </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.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,8 +2,7 @@ import styled from 'styled-components/native';
 
 const Input = styled.TextInput`
     margin: 10px 0;
-    background-color: #f6f6f6;
-    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 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;
-    border-bottom-color: #eee;
     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}>
-            <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,24 +1,39 @@
-import React from 'react';
-import styled from 'styled-components/native';
-import { SafeAreaView } from 'react-native';
+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`
-    background-color: #eeeeeeee;
+interface Props {
+    fullSize?: boolean;
+}
+
+const Background = styled(Pressable)`
     padding: 100px 25px;
     flex: 1;
+    justify-content: center;
 `;
 
-const Container = styled.View`
-    background-color: white;
+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>
-            <SafeAreaView style={{ flex: 1}}>
-                <Container>
+        <Background style={defaultStyles.modal} onPress={closeModal}>
+            <SafeAreaView style={{ flex: 1 }}>
+                <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,52 @@
+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'),
+    ja: () => require('./lang/ja/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,43 @@
+{
+    "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",
+    "track": "Track"
+}

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/ja/locale.json

@@ -0,0 +1,43 @@
+{
+    "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 は、どこからでも音楽ライブラリをストリーミングすることができます。バックグラウンド・オーディオやキャスティングを完全にサポートします。",
+    "onboarding-cta": "始めるためには、Jellyfin サーバーが必要です。下のボタンをクリックして、Jellyfin サーバーのアドレスを入力し、ログインしてください。",
+    "set-jellyfin-server": "Jellyfin サーバ を設定",
+    "set-jellyfin-server-instruction": "Jellyfin サーバの URL を入力してください。プロトコルとポートを必ず含めてください。",
+    "settings": "設定",
+    "jellyfin-library": "Jellyfin ライブライ",
+    "jellyfin-server-url": "Jellyfin サーバの URL",
+    "jellyfin-access-token": "Jellyfin アクセストークン",
+    "jellyfin-user-id": "Jellyfin ユーザ ID",
+    "setting-cache": "キャッシュ",
+    "setting-cache-description": "Jellyfinライブラリをアップデートしたにもかかわらず、アプリがキャッシュされたアセットを保持している場合、このボタンを使って強制的にキャッシュをクリアすることができます。これにより、アプリはライブラリを最初から取得するようになります。",
+    "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": "エラー、デバイスタイプ、OSバージョン、アプリバージョン、デバイスIDが記録されます。いかなるエラー報告においても、アプリケーションの状態は送信されません。デバイスIDは、デバイスの設定でリセット可能な一意のハッシュであり、この識別子から個人情報を推測することはできません。",
+    "where-is-data-stored": "データはどこに保存されていますか？",
+    "where-is-data-stored-description": "Sentryサービスは、私たち自身のインフラでセルフホストされています。当社以外の誰も、サーバー、データベース、アプリケーション、データログにアクセスすることはできません。このインフラはEUでホストされています。",
+    "enable-error-reporting": "エラー報告を有効にしますか？",
+    "enable-error-reporting-description": "これは、クラッシュやエラーのレポートを送信することで、アプリを改善に役立ちます。",
+    "enable": "有効する",
+    "disable": "無効する",
+    "more-info": "詳しくは",
+    "track": "追跡"
+}

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 achtergroundaudio 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": "Stel 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,41 @@
+export type LocaleKeys = 'play-next'
+| 'play-album'
+| 'queue'
+| 'add-to-queue'
+| 'clear-queue'
+| 'no-results'
+| 'album'
+| 'albums'
+| 'all-albums'
+| 'search'
+| 'music'
+| 'now-playing'
+| 'onboarding-welcome'
+| 'onboarding-intro'
+| 'onboarding-cta'
+| 'set-jellyfin-server'
+| 'set-jellyfin-server-instruction'
+| 'settings'
+| 'jellyfin-library'
+| 'jellyfin-server-url'
+| 'jellyfin-access-token'
+| 'jellyfin-user-id'
+| 'setting-cache'
+| 'setting-cache-description'
+| 'reset-cache'
+| 'recent-albums'
+| 'error-reporting'
+| 'error-reporting-description'
+| 'error-reporting-rationale'
+| 'why-use-tracking'
+| 'why-use-tracking-description'
+| 'what-data-is-gathered'
+| 'what-data-is-gathered-description'
+| 'where-is-data-stored'
+| 'where-is-data-stored-description'
+| 'enable-error-reporting'
+| 'enable-error-reporting-description'
+| 'enable'
+| 'disable'
+| 'more-info'
+| 'track'

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 } 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,14 +11,35 @@ 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 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'>;
 
 const Screen = Dimensions.get('screen');
 
+const styles = StyleSheet.create({
+    name: {
+        fontSize: 36, 
+        fontWeight: 'bold'
+    },
+    artist: {
+        fontSize: 24,
+        opacity: 0.5,
+        marginBottom: 24
+    },
+    index: {
+        width: 20,
+        opacity: 0.5,
+        marginRight: 5
+    }
+});
+
 const AlbumImage = styled(FastImage)`
     border-radius: 10px;
     width: ${Screen.width * 0.6}px;
@@ -29,7 +50,6 @@ const AlbumImage = styled(FastImage)`
 const TrackContainer = styled.View<{isPlaying: boolean}>`
     padding: 15px;
     border-bottom-width: 1px;
-    border-bottom-color: #eee;
     flex-direction: row;
 
     ${props => props.isPlaying && css`
@@ -40,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);
@@ -51,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(() => {
@@ -71,25 +108,32 @@ const Album: React.FC = () => {
 
     return (
         <ScrollView
-            style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}
+            contentContainerStyle={{ padding: 20, paddingBottom: 50 }}
             refreshControl={
                 <RefreshControl refreshing={isLoading} onRefresh={refresh} />
             }
         >
-            <AlbumImage source={{ uri: getImage(album?.Id) }} />
-            <Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album?.Name}</Text>
-            <Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{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}>
-                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>
-                            {tracks[trackId]?.IndexNumber}
-                        </Text>
-                        <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,12 +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 useDefaultStyles from 'components/Colors';
 
 interface VirtualizedItemInfo {
     section: SectionedId,
@@ -39,11 +39,10 @@ function generateSection({ section }: { section: SectionedId }) {
 }
 
 const SectionContainer = styled.View`
-    background-color: #f6f6f6;
-    border-bottom-color: #eee;
     border-bottom-width: 1px;
     height: 50px;
     justify-content: center;
+    padding: 0 10px;
 `;
 
 const SectionText = styled.Text`
@@ -51,17 +50,16 @@ const SectionText = styled.Text`
     font-weight: bold;
 `;
 
-class SectionHeading extends PureComponent<{ label: string }> {    
-    render() {
-        const { label } = this.props;
+const SectionHeading = React.memo(function SectionHeading(props: { label: string }) {
+    const defaultStyles = useDefaultStyles();
+    const { label } = props;
 
-        return (
-            <SectionContainer>
-                <SectionText>{label}</SectionText>
-            </SectionContainer>
-        );
-    }
-}
+    return (
+        <SectionContainer style={defaultStyles.sectionHeading}>
+            <SectionText style={defaultStyles.text}>{label}</SectionText>
+        </SectionContainer>
+    );
+});
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
@@ -75,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 }} />
-                    <Text numberOfLines={1}>{name}</Text>
-                    <HalfOpacity 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
@@ -153,7 +150,7 @@ const Albums: React.FC = () => {
         const nextItem = section.data[index + 1];
 
         return (
-            <View style={{ flexDirection: 'row' }} key={item}>
+            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item}>
                 <GeneratedAlbumItem
                     id={item}
                     imageUrl={getImage(item as string)}
@@ -184,19 +181,17 @@ const Albums: React.FC = () => {
     
     return (
         <SafeAreaView>
-            <ListContainer>
-                <AlphabetScroller onSelect={selectLetter} />
-                <SectionList
-                    sections={sections} 
-                    refreshing={isLoading}
-                    onRefresh={retrieveData}
-                    getItemLayout={getItemLayout}
-                    ref={listRef}
-                    keyExtractor={(item, index) => `${item}_${index}`}
-                    renderSectionHeader={generateSection}
-                    renderItem={generateItem}
-                />
-            </ListContainer>
+            <AlphabetScroller onSelect={selectLetter} />
+            <SectionList
+                sections={sections} 
+                refreshing={isLoading}
+                onRefresh={retrieveData}
+                getItemLayout={getItemLayout}
+                ref={listRef}
+                keyExtractor={(item, index) => `${item}_${index}`}
+                renderSectionHeader={generateSection}
+                renderItem={generateItem}
+            />
         </SafeAreaView>
     );
 };

src/screens/Music/stacks/RecentAlbums.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
 import { Album, NavigationProp } from '../types';
-import { Text, SafeAreaView, FlatList } from 'react-native';
+import { Text, SafeAreaView, FlatList, StyleSheet } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { useTypedSelector } from 'store';
@@ -12,22 +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 { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
+
+const styles = StyleSheet.create({
+    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>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);
@@ -47,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) }} />
-                                <Text numberOfLines={1}>{albums[item]?.Name}</Text>
-                                <Text numberOfLines={1} style={{ opacity: 0.5 }}>{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

@@ -1,26 +1,39 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Input from 'components/Input';
-import { Text, View } from 'react-native';
+import { ActivityIndicator, Text, View } from 'react-native';
 import styled from 'styled-components/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import Fuse from 'fuse.js';
-import { Album } from 'store/music/types';
+import { Album, AlbumTrack } from 'store/music/types';
 import { FlatList } from 'react-native-gesture-handler';
 import TouchableHandler from 'components/TouchableHandler';
 import { useNavigation } from '@react-navigation/native';
 import { useGetImage } from 'utility/JellyfinApi';
 import { NavigationProp } from '../types';
 import FastImage from 'react-native-fast-image';
+import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
+import { searchAndFetchAlbums } from 'store/music/actions';
+import { debounce } from 'lodash';
 
 const Container = styled.View`
     padding: 0 20px;
+    position: relative;
+`;
+
+const Loading = styled.View`
+    position: absolute;
+    right: 32px;
+    top: 0;
+    height: 100%;
+    flex: 1;
+    justify-content: center;
 `;
 
 const AlbumImage = styled(FastImage)`
     border-radius: 4px;
     width: 25px;
     height: 25px;
-    background-color: #fefefe;
     margin-right: 10px;
 `;
 
@@ -33,7 +46,6 @@ const HalfOpacity = styled.Text`
 const SearchResult = styled.View`
     flex-direction: row;
     align-items: center;
-    border-bottom-color: #ddd;
     border-bottom-width: 1px;
     margin-left: 15px;
     padding-right: 15px;
@@ -46,16 +58,39 @@ const fuseOptions = {
     includeScore: true,
 };
 
+type AudioResult = {
+    type: 'Audio',
+    id: string;
+    album: string;
+    name: string;
+};
+
+type AlbumResult = {
+    type: 'AlbumArtist',
+    id: string;
+    album: undefined;
+    name: undefined;
+}
+
+type CombinedResults = (AudioResult | AlbumResult)[];
+
 export default function Search() {
+    const defaultStyles = useDefaultStyles();
+
     // Prepare state
+    const [fuseIsReady, setFuseReady] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const albums = useTypedSelector(state => state.music.albums.entities);
-    const [results, setResults] = useState<Fuse.FuseResult<Album>[]>([]);
-    let fuse = useRef<Fuse<Album, typeof fuseOptions>>();
+    const [fuseResults, setFuseResults] = useState<CombinedResults>([]);
+    const [jellyfinResults, setJellyfinResults] = useState<CombinedResults>([]);
+
+    const [isLoading, setLoading] = useState(false);
+    const fuse = useRef<Fuse<Album>>();
 
     // Prepare helpers
     const navigation = useNavigation<NavigationProp>();
     const getImage = useGetImage();
+    const dispatch = useAppDispatch();
 
     /**
      * Since it is impractical to have a global fuse variable, we need to
@@ -66,21 +101,89 @@ export default function Search() {
      */
     useEffect(() => {
         fuse.current = new Fuse(Object.values(albums) as Album[], fuseOptions);
-    }, [albums]);
+        setFuseReady(true);
+    }, [albums, setFuseReady]);
+
+    /**
+     * This function retrieves search results from Jellyfin. It is a seperate
+     * callback, so that we can make sure it is properly debounced and doesn't
+     * cause execessive jank in the interface.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const fetchJellyfinResults = useCallback(debounce(async (searchTerm: string, currentResults: CombinedResults) => {
+        // First, query the Jellyfin API
+        const { payload } = await dispatch(searchAndFetchAlbums({ term: searchTerm }));
+
+        // Convert the current results to album ids
+        const albumIds = currentResults.map(item => item.id);
+
+        // Parse the result in correct typescript form
+        const results = (payload as { results: (Album | AlbumTrack)[] }).results;
+
+        // Filter any results that are already displayed
+        const items = results.filter(item => (
+            !(item.Type === 'MusicAlbum' && albumIds.includes(item.Id))
+        // Then convert the results to proper result form
+        )).map((item) => ({
+            type: item.Type,
+            id: item.Id,
+            album: item.Type === 'Audio'
+                ? item.AlbumId
+                : undefined,
+            name: item.Type === 'Audio'
+                ? item.Name
+                : undefined,
+        }));
+
+        // Lastly, we'll merge the two and assign them to the state
+        setJellyfinResults([...items] as CombinedResults);
+
+        // Loading is now complete
+        setLoading(false);
+    }, 50), [dispatch, setJellyfinResults]);
 
     /**
      * Whenever the search term changes, we gather results from Fuse and assign
      * them to state
      */
     useEffect(() => {
-        // GUARD: In some extraordinary cases, Fuse might not be presented since
-        // it is assigned via refs. In this case, we can't handle any searching.
-        if (!fuse.current) {
+        if (!searchTerm) {
             return;
         }
 
-        setResults(fuse.current.search(searchTerm));
-    }, [searchTerm, setResults, fuse]);
+        const retrieveResults = async () => {
+            // GUARD: In some extraordinary cases, Fuse might not be presented since
+            // it is assigned via refs. In this case, we can't handle any searching.
+            if (!fuse.current) {
+                return;
+            }
+
+            // First set the immediate results from fuse
+            const fuseResults = fuse.current.search(searchTerm);
+            const albums: AlbumResult[] = fuseResults
+                .map(({ item }) => ({ 
+                    id: item.Id,
+                    type: 'AlbumArtist',
+                    album: undefined,
+                    name: undefined,
+                }));
+            
+            // Assign the preliminary results
+            setFuseResults(albums);
+            setLoading(true);
+            try {
+                // Wrap the call in a try/catch block so that we catch any
+                // network issues in search and just use local search if the
+                // network is unavailable
+                fetchJellyfinResults(searchTerm, albums);
+            } catch {
+                // Reset the loading indicator if the network fails
+                setLoading(false);
+            }
+        };
+
+        retrieveResults();
+    }, [searchTerm, setFuseResults, setLoading, fuse, fetchJellyfinResults]);
 
     // Handlers
     const selectAlbum = useCallback((id: string) => 
@@ -89,36 +192,60 @@ export default function Search() {
 
     const HeaderComponent = React.useMemo(() => (
         <Container>
-            <Input value={searchTerm} onChangeText={setSearchTerm} placeholder="Search..." />
-            {(searchTerm.length && !results.length) ? <Text>No results...</Text> : null}
+            <Input value={searchTerm} onChangeText={setSearchTerm} style={defaultStyles.input} placeholder={t('search') + '...'} />
+            {isLoading && <Loading><ActivityIndicator /></Loading>}
         </Container>
-    ), [searchTerm, results, setSearchTerm]);
+    ), [searchTerm, setSearchTerm, defaultStyles, isLoading]);
+
+    const FooterComponent = React.useMemo(() => (
+        <Container>
+            {(searchTerm.length && !jellyfinResults.length && !fuseResults.length && !isLoading)
+                ? <Text style={{ textAlign: 'center' }}>{t('no-results')}</Text> 
+                : null}
+        </Container>
+    ), [searchTerm, jellyfinResults, fuseResults, isLoading]);
 
     // GUARD: We cannot search for stuff unless Fuse is loaded with results.
     // Therefore we delay rendering to when we are certain it's there.
-    if (!fuse.current) {
+    if (!fuseIsReady) {
         return null;
     }
 
     return (
-        <FlatList
-            data={results}
-            renderItem={({ item: { item: album } }) =>(
-                <TouchableHandler id={album.Id} onPress={selectAlbum}>
-                    <SearchResult>
-                        <AlbumImage source={{ uri: getImage(album.Id) }} />
-                        <View>
-                            <Text numberOfLines={1} ellipsizeMode="tail">
-                                {album.Name} - {album.AlbumArtist}
-                            </Text>
-                            <HalfOpacity>Album</HalfOpacity>
-                        </View>
-                    </SearchResult>
-                </TouchableHandler>
-            )}
-            keyExtractor={(item) => item.refIndex.toString()}
-            ListHeaderComponent={HeaderComponent}
-            extraData={searchTerm}
-        />
+        <>
+            <FlatList
+                style={{ flex: 1 }}
+                data={[...jellyfinResults, ...fuseResults]}
+                renderItem={({ item: { id, type, album: trackAlbum, name: trackName } }: { item: AlbumResult | AudioResult }) => {
+                    const album = albums[trackAlbum || id];
+
+                    // GUARD: If the album cannot be found in the store, we
+                    // cannot display it.
+                    if (!album) {
+                        return null;
+                    }
+
+                    return (
+                        <TouchableHandler id={album.Id} onPress={selectAlbum}>
+                            <SearchResult style={defaultStyles.border}>
+                                <AlbumImage source={{ uri: getImage(album.Id) }} />
+                                <View>
+                                    <Text numberOfLines={1} ellipsizeMode="tail" style={defaultStyles.text}>
+                                        {trackName || album.Name} - {album.AlbumArtist}
+                                    </Text>
+                                    <HalfOpacity style={defaultStyles.text}>
+                                        {type === 'AlbumArtist' ? t('album'): t('track')}
+                                    </HalfOpacity>
+                                </View>
+                            </SearchResult>
+                        </TouchableHandler>
+                    );
+                }}
+                keyExtractor={(item) => item.id}
+                ListHeaderComponent={HeaderComponent}
+                ListFooterComponent={FooterComponent}
+                extraData={[searchTerm, albums]}
+            />
+        </>
     );
 }

src/screens/Music/stacks/components/AlbumImage.ts

@@ -14,7 +14,6 @@ const AlbumImage = styled(FastImage)`
     border-radius: 10px;
     width: ${Screen.width / 2 - 40}px;
     height: ${Screen.width / 2 - 40}px;
-    background-color: #fefefe;
     margin-bottom: 5px;
 `;
 

src/screens/Music/stacks/components/ListContainer.ts

@@ -2,7 +2,6 @@ import styled from 'styled-components/native';
 
 const ListContainer = styled.View`
     padding: 10px;
-    background-color: #f6f6f6;
 `;
 
 export default ListContainer;

src/screens/Music/types.ts

@@ -1,75 +1,11 @@
 import { StackNavigationProp } from '@react-navigation/stack';
-
-export interface UserData {
-    PlaybackPositionTicks: number;
-    PlayCount: number;
-    IsFavorite: boolean;
-    Played: boolean;
-    Key: string;
-}
-
-export interface ArtistItem {
-    Name: string;
-    Id: string;
-}
-
-export interface AlbumArtist {
-    Name: string;
-    Id: string;
-}
-
-export interface ImageTags {
-    Primary: string;
-}
-
-export interface Album {
-    Name: string;
-    ServerId: string;
-    Id: string;
-    SortName: string;
-    RunTimeTicks: number;
-    ProductionYear: number;
-    IsFolder: boolean;
-    Type: string;
-    UserData: UserData;
-    PrimaryImageAspectRatio: number;
-    Artists: string[];
-    ArtistItems: ArtistItem[];
-    AlbumArtist: string;
-    AlbumArtists: AlbumArtist[];
-    ImageTags: ImageTags;
-    BackdropImageTags: any[];
-    LocationType: string;
-    DateCreated: string;
-}
-
-export interface AlbumTrack {
-    Name: string;
-    ServerId: string;
-    Id: string;
-    RunTimeTicks: number;
-    ProductionYear: number;
-    IndexNumber: number;
-    IsFolder: boolean;
-    Type: string;
-    UserData: UserData;
-    Artists: string[];
-    ArtistItems: ArtistItem[];
-    Album: string;
-    AlbumId: string;
-    AlbumPrimaryImageTag: string;
-    AlbumArtist: string;
-    AlbumArtists: AlbumArtist[];
-    ImageTags: ImageTags;
-    BackdropImageTags: any[];
-    LocationType: string;
-    MediaType: string;
-}
+import { Album } from 'store/music/types';
 
 export type StackParams = {
     Albums: undefined;
     Album: { id: string, album: Album };
     RecentAlbums: undefined;
+    Search: undefined;
 };
 
 export type NavigationProp = StackNavigationProp<StackParams>; 

src/screens/Onboarding/index.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect } from 'react';
+import styled from 'styled-components/native';
+import { THEME_COLOR } from 'CONSTANTS';
+import { Button } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+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};
+    flex: 1;
+    justify-content: center;
+`;
+
+const TextContainer = styled.ScrollView`
+    padding: 25px;
+`;
+
+const Text = styled.Text`
+    text-align: center;
+    color: white;
+    margin-bottom: 10px;
+`;
+
+const ButtonContainer = styled.View`
+    margin-top: 50px;
+`; 
+
+const Logo = styled.Image`
+    width: 150px;
+    height: 150px;
+    margin: 0 auto 50px auto;
+`;
+
+function Onboarding() {
+    // Get account from Redux and dispatcher
+    const account = useTypedSelector(state => state.settings.jellyfin);
+    const dispatch = useDispatch();
+
+    // Also retrieve the navigation handler so that we can open the modal in
+    // which the Jellyfin server is set
+    const navigation = useNavigation<NavigationProp>();
+    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
+    
+    // We'll also respond to any change in the account, setting the onboarding
+    // status to true, so that the app becomes available.
+    useEffect(() => {
+        if (account) {
+            dispatch(setOnboardingStatus(true));
+        }
+    }, [account, dispatch]);
+    
+    return (
+        <Container>
+            <TextContainer contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
+                <Logo source={require('../../assets/app-icon-white.png')} />
+                <Text >
+                    {t('onboarding-welcome')}
+                </Text>
+                <Text>
+                    {t('onboarding-intro')}
+                </Text>
+                <Text>
+                    {t('onboarding-cta')}
+                </Text>
+                <ButtonContainer>
+                    <Button title={t('set-jellyfin-server')} color="#ffffff" onPress={handleClick} />
+                </ButtonContainer>
+            </TextContainer>
+        </Container>
+    );
+}
+
+export default Onboarding;

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,14 +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 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();
@@ -32,61 +37,131 @@ const Button = styled.View`
 `;
 
 export default function MediaControls() {
+    const scheme = useColorScheme();
+    const fill = scheme === 'dark' ? '#ffffff' : '#000000';
+
     return (
         <Container>
             <Buttons>
                 <Button>
-                    <PreviousButton />
+                    <PreviousButton fill={fill} />
                 </Button>
-                <MainButton />
+                <MainButton fill={fill} />
                 <Button>
-                    <NextButton />
+                    <NextButton fill={fill} />
                 </Button>
             </Buttons>
+            <Buttons>
+                <Button>
+                    <RepeatButton fill={fill} />
+                </Button>
+                <Casting fill={fill} />
+            </Buttons>
         </Container>
     );
 }
 
-export function PreviousButton() {
+export function PreviousButton({ fill }: { fill: string }) {
     const hasQueue = useHasQueue();
 
     return (
         <TouchableOpacity onPress={previous} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
-            <BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+            <BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
         </TouchableOpacity>
     );
 }
 
-export function NextButton() {
+export function NextButton({ fill }: { fill: string }) {
     const hasQueue = useHasQueue();
 
     return (
         <TouchableOpacity onPress={next} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
-            <ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+            <ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
         </TouchableOpacity>
     );
 }
 
-export function MainButton() {
+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();
 
     switch (state) {
         case STATE_PLAYING:
             return (
                 <TouchableOpacity onPress={pause}>
-                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
         case STATE_PAUSED:
             return (
                 <TouchableOpacity onPress={play}>
-                    <PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+                    <PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
         default:
             return (
                 <TouchableOpacity onPress={pause} disabled>
-                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
     }

src/screens/Player/components/NowPlaying.tsx

@@ -1,29 +1,51 @@
 import React from 'react';
-import { Text, Dimensions, View } 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 useDefaultStyles from 'components/Colors';
+import Text from 'components/Text';
 
 const Screen = Dimensions.get('screen');
 
 const Artwork = styled(FastImage)`
     border-radius: 10px;
-    background-color: #fbfbfb;
     width: ${Screen.width * 0.8}px;
     height: ${Screen.width * 0.8}px;
     margin: 25px auto;
-    display: flex;
 `;
 
+const styles = StyleSheet.create({
+    artist: {
+        fontWeight: 'bold',
+        fontSize: 24,
+        marginBottom: 12,
+    },
+    title: {
+        fontSize: 18,
+        marginBottom: 12,
+        textAlign: 'center',
+        paddingLeft: 20,
+        paddingRight: 20,
+    }
+});
+
 
 export default function NowPlaying() {
     const track = useCurrentTrack();
+    const defaultStyles = useDefaultStyles();
 
     return (
         <View style={{ alignItems: 'center' }}>
-            <Artwork style={{ flex: 1 }} source={{ uri: track?.artwork }} />
-            <Text style={{ fontWeight: 'bold', fontSize: 24, marginBottom: 12 }} >{track?.artist}</Text>
-            <Text style={{ fontSize: 18, marginBottom: 12, textAlign: 'center', paddingLeft: 20, paddingRight: 20 }}>{track?.title}</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

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import TrackPlayer from 'react-native-track-player';
 import styled from 'styled-components/native';
-import { Text } from 'react-native';
+import { Text, Platform } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { THEME_COLOR } from 'CONSTANTS';
+import { DefaultStylesProvider } from 'components/Colors';
 
 const NumberBar = styled.View`
     flex-direction: row;
@@ -64,23 +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}
-                    disabled={!duration}
-                />
-                <NumberBar>
-                    <Text>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
-                    <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>
         );
     }
 }