init

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,92 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+/resources/

Server.js

@@ -0,0 +1,155 @@
+import { io } from 'socket.io-client'
+import axios from 'axios'
+import EventEmitter from 'events'
+
+class Server extends EventEmitter {
+  constructor(store) {
+    super()
+
+    this.store = store
+
+    this.url = null
+    this.socket = null
+
+    this.user = null
+    this.connected = false
+
+    this.stream = null
+  }
+
+  get token() {
+    return this.user ? this.user.token : null
+  }
+
+  getAxiosConfig() {
+    return { headers: { Authorization: `Bearer ${this.token}` } }
+  }
+
+  getServerUrl(url) {
+    var urlObject = new URL(url)
+    return `${urlObject.protocol}//${urlObject.hostname}:${urlObject.port}`
+  }
+
+  setUser(user) {
+    this.user = user
+    this.store.commit('user/setUser', user)
+    if (user) {
+      localStorage.setItem('userToken', user.token)
+    } else {
+      localStorage.removeItem('userToken')
+    }
+  }
+
+  setServerUrl(url) {
+    this.url = url
+    localStorage.setItem('serverUrl', url)
+    this.store.commit('setServerUrl', url)
+  }
+
+  async connect(url, token) {
+    var serverUrl = this.getServerUrl(url)
+    var res = await this.ping(serverUrl)
+    if (!res || !res.success) {
+      this.url = null
+      return false
+    }
+    var authRes = await this.authorize(serverUrl, token)
+    if (!authRes || !authRes.user) {
+      return false
+    }
+
+    this.setServerUrl(serverUrl)
+    console.warn('Connect setting auth user', authRes)
+    this.setUser(authRes.user)
+    this.connectSocket()
+
+    return true
+  }
+
+  async check(url) {
+    var serverUrl = this.getServerUrl(url)
+    var res = await this.ping(serverUrl)
+    if (!res || !res.success) {
+      return false
+    }
+    return serverUrl
+  }
+
+  async login(url, username, password) {
+    var serverUrl = this.getServerUrl(url)
+    var authUrl = serverUrl + '/login'
+    return axios.post(authUrl, { username, password }).then((res) => {
+      if (!res.data || !res.data.user) {
+        console.error(res.data.error)
+        return {
+          error: res.data.error || 'Unknown Error'
+        }
+      }
+
+      this.setServerUrl(serverUrl)
+      this.setUser(res.data.user)
+      this.connectSocket()
+      return {
+        user: res.data.user
+      }
+    }).catch(error => {
+      console.error('[Server] Server auth failed', error)
+      return {
+        error: 'Request Failed'
+      }
+    })
+  }
+
+  logout() {
+    this.setUser(null)
+  }
+
+  authorize(serverUrl, token) {
+    var authUrl = serverUrl + '/api/authorize'
+    return axios.post(authUrl, null, { headers: { Authorization: `Bearer ${token}` } }).then((res) => {
+      return res.data
+    }).catch(error => {
+      console.error('[Server] Server auth failed', error)
+      return false
+    })
+  }
+
+  ping(url) {
+    var pingUrl = url + '/ping'
+    console.log('[Server] Check server', pingUrl)
+    return axios.get(pingUrl).then((res) => {
+      return res.data
+    }).catch(error => {
+      console.error('Server check failed', error)
+      return false
+    })
+  }
+
+  connectSocket() {
+    console.log('[SERVER] Connect Socket', this.url)
+
+    this.socket = io(this.url)
+    this.socket.on('connect', () => {
+      console.log('[Server] Socket Connected')
+
+      // Authenticate socket with token
+      this.socket.emit('auth', this.token)
+
+      this.connected = true
+      this.emit('connected', true)
+    })
+    this.socket.on('disconnect', () => {
+      console.log('[Server] Socket Disconnected')
+    })
+    this.socket.on('init', (data) => {
+      console.log('[Server] Initial socket data received', data)
+      if (data.stream) {
+        this.stream = data.stream
+        this.store.commit('setStreamAudiobook', data.stream.audiobook)
+        this.emit('initialStream', data.stream)
+      }
+    })
+  }
+}
+
+export default Server

android/.gitignore

@@ -0,0 +1,96 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,89 @@
+//apply plugin: 'com.android.application'
+//apply plugin: 'kotlin-android'
+
+plugins {
+  id 'com.android.application'
+  id 'kotlin-android'
+  id 'kotlin-kapt'
+}
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.audiobookshelf.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+  mavenCentral()
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation project(':capacitor-android')
+
+  implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
+
+  testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+
+  implementation "androidx.core:core-ktx:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$kotlin_coroutines_version"
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$kotlin_coroutines_version"
+
+  implementation "androidx.media:media:$androidx_media_version"
+
+  if (findProject(':exoplayer-library-core') != null) {
+    implementation project(':exoplayer-library-core')
+    implementation project(':exoplayer-library-ui')
+    implementation project(':exoplayer-extension-mediasession')
+    implementation project(':exoplayer-extension-cast')
+    implementation project(':exoplayer-hls')
+  } else {
+    implementation "com.google.android.exoplayer:exoplayer-core:$exoplayer_version"
+    implementation "com.google.android.exoplayer:exoplayer-ui:$exoplayer_version"
+    implementation "com.google.android.exoplayer:extension-mediasession:$exoplayer_version"
+    implementation "com.google.android.exoplayer:extension-cast:$exoplayer_version"
+    implementation "com.google.android.exoplayer:exoplayer-hls:$exoplayer_version"
+  }
+
+
+  implementation "com.github.bumptech.glide:glide:$glide_version"
+  kapt "com.github.bumptech.glide:compiler:$glide_version"
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.warn("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,20 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_1_8
+      targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+    implementation project(':capacitor-dialog')
+    implementation project(':capacitor-toast')
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools"
+  package="com.audiobookshelf.app">
+
+    <!-- Permissions -->
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme"
+        android:usesCleartextTraffic="true">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name="com.audiobookshelf.app.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+          <meta-data
+            android:name="android.support.FILE_PROVIDER_PATHS"
+            android:resource="@xml/file_paths" />
+        </provider>
+
+      <receiver android:name="androidx.media.session.MediaButtonReceiver" >
+        <intent-filter>
+          <action android:name="android.intent.action.MEDIA_BUTTON" />
+        </intent-filter>
+      </receiver>
+
+      <service
+        android:enabled="true"
+        android:name=".PlayerNotificationService">
+      </service>
+
+    </application>
+
+</manifest>

android/app/src/main/assets/capacitor.config.json

@@ -0,0 +1,6 @@
+{
+	"appId": "com.audiobookshelf.app",
+	"appName": "audiobookshelf-app",
+	"webDir": "dist",
+	"bundledWebRuntime": false
+}

android/app/src/main/assets/capacitor.plugins.json

@@ -0,0 +1,10 @@
+[
+	{
+		"pkg": "@capacitor/dialog",
+		"classpath": "com.capacitorjs.plugins.dialog.DialogPlugin"
+	},
+	{
+		"pkg": "@capacitor/toast",
+		"classpath": "com.capacitorjs.plugins.toast.ToastPlugin"
+	}
+]

android/app/src/main/java/com/audiobookshelf/app/Audiobook.kt

@@ -0,0 +1,38 @@
+package com.audiobookshelf.app
+
+import android.net.Uri
+import com.getcapacitor.JSObject
+
+class Audiobook {
+  var id:String = "audiobook"
+  var token:String = ""
+  var playlistUrl:String = ""
+  var title:String = "No Title"
+  var author:String = "Unknown"
+  var series:String = ""
+  var cover:String = ""
+  var playWhenReady:Boolean = false
+  var startTime:Long = 0
+  var duration:Long = 0
+
+  var hasPlayerLoaded:Boolean = false
+
+  val playlistUri:Uri
+  val coverUri:Uri
+
+  constructor(jsondata:JSObject) {
+    id = jsondata.getString("id", "audiobook").toString()
+    title = jsondata.getString("title", "No Title").toString()
+    token = jsondata.getString("token", "").toString()
+    author = jsondata.getString("author", "Unknown").toString()
+    series = jsondata.getString("series", "").toString()
+    cover = jsondata.getString("cover", "").toString()
+    playlistUrl = jsondata.getString("playlistUrl", "").toString()
+    playWhenReady = jsondata.getBoolean("playWhenReady", false) == true
+    startTime = jsondata.getString("startTime", "0")!!.toLong()
+    duration = jsondata.getString("duration", "0")!!.toLong()
+
+    playlistUri = Uri.parse(playlistUrl)
+    coverUri = Uri.parse(cover)
+  }
+}

android/app/src/main/java/com/audiobookshelf/app/MainActivity.kt

@@ -0,0 +1,65 @@
+package com.audiobookshelf.app
+
+import android.content.ComponentName
+import android.content.Context
+import android.content.Intent
+import android.content.ServiceConnection
+import android.os.Bundle
+import android.os.IBinder
+import android.util.Log
+import com.example.myapp.MyNativeAudio
+import com.getcapacitor.BridgeActivity
+
+class MainActivity : BridgeActivity() {
+  private val tag = "MainActivity"
+
+  private var mBounded = false
+  lateinit var foregroundService : PlayerNotificationService
+  private lateinit var mConnection : ServiceConnection
+
+  lateinit var pluginCallback : () -> Unit
+
+  public override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    Log.d(tag, "onCreate")
+    registerPlugin(MyNativeAudio::class.java)
+  }
+
+  override fun onPostCreate(savedInstanceState: Bundle?) {
+    super.onPostCreate(savedInstanceState)
+
+    mConnection = object : ServiceConnection {
+      override fun onServiceDisconnected(name: ComponentName) {
+        Log.w(tag, "Service Disconnected")
+        mBounded = false
+      }
+
+      override fun onServiceConnected(name: ComponentName, service: IBinder) {
+        Log.d(tag, "Service Connected")
+
+
+        mBounded = true
+        val mLocalBinder = service as PlayerNotificationService.LocalBinder
+        foregroundService = mLocalBinder.getService()
+
+        // Let MyNativeAudio know foreground service is ready and setup event listener
+        if (pluginCallback != null) {
+          pluginCallback()
+        }
+      }
+    }
+
+    val startIntent = Intent(this, PlayerNotificationService::class.java)
+    bindService(startIntent, mConnection as ServiceConnection, Context.BIND_AUTO_CREATE);
+  }
+
+
+  fun stopMyService() {
+    if (mBounded) {
+      mConnection?.let { unbindService(it) };
+      mBounded = false;
+    }
+    val stopIntent = Intent(this, PlayerNotificationService::class.java)
+    stopService(stopIntent)
+  }
+}

android/app/src/main/java/com/audiobookshelf/app/MyNativeAudio.kt

@@ -0,0 +1,125 @@
+package com.example.myapp
+
+import android.content.Intent
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import androidx.core.content.ContextCompat
+import com.audiobookshelf.app.Audiobook
+import com.audiobookshelf.app.MainActivity
+import com.audiobookshelf.app.PlayerNotificationService
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+
+@CapacitorPlugin(name = "MyNativeAudio")
+class MyNativeAudio : Plugin() {
+  private val tag = "MyNativeAudio"
+
+  lateinit var mainActivity:MainActivity
+  lateinit var playerNotificationService: PlayerNotificationService
+
+  override fun load() {
+    mainActivity = (activity as MainActivity)
+
+    var foregroundServiceReady : () -> Unit = {
+      playerNotificationService = mainActivity.foregroundService
+
+      playerNotificationService.setCustomObjectListener(object: PlayerNotificationService.MyCustomObjectListener {
+        override fun onPlayingUpdate(isPlaying:Boolean) {
+          emit("onPlayingUpdate", isPlaying)
+        }
+        override fun onMetadata(metadata:JSObject) {
+          notifyListeners("onMetadata", metadata)
+        }
+      })
+    }
+    mainActivity.pluginCallback = foregroundServiceReady
+
+  }
+
+  fun emit(evtName: String, value:Any) {
+    var ret:JSObject = JSObject()
+    ret.put("value", value)
+    notifyListeners(evtName, ret)
+  }
+
+  @PluginMethod
+  fun initPlayer(call: PluginCall) {
+    if (!PlayerNotificationService.isStarted) {
+      Log.w(tag, "Starting foreground service --")
+      Intent(mainActivity, PlayerNotificationService::class.java).also { intent ->
+        ContextCompat.startForegroundService(mainActivity, intent)
+      }
+    } else {
+      Log.w(tag, "Service already started --")
+    }
+
+
+    var audiobook:Audiobook = Audiobook(call.data)
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.initPlayer(audiobook)
+      call.resolve()
+    }
+  }
+
+  @PluginMethod
+  fun getCurrentTime(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      var currentTime = playerNotificationService.getCurrentTime()
+      Log.d(tag, "Get Current Time $currentTime")
+      val ret = JSObject()
+      ret.put("value", currentTime)
+      call.resolve(ret)
+    }
+  }
+
+  @PluginMethod
+  fun pausePlayer(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.pause()
+      call.resolve()
+    }
+  }
+
+  @PluginMethod
+  fun playPlayer(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.play()
+      call.resolve()
+    }
+  }
+
+  @PluginMethod
+  fun seekPlayer(call: PluginCall) {
+    var time:Long = call.getString("timeMs", "0")!!.toLong()
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.seekPlayer(time)
+      call.resolve()
+    }
+  }
+
+  @PluginMethod
+  fun seekForward10(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.seekForward10()
+      call.resolve()
+    }
+  }
+  @PluginMethod
+  fun seekBackward10(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.seekBackward10()
+      call.resolve()
+    }
+  }
+  @PluginMethod
+  fun terminateStream(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.terminateStream()
+      call.resolve()
+    }
+  }
+}

android/app/src/main/java/com/audiobookshelf/app/PlayerNotificationService.kt

@@ -0,0 +1,422 @@
+package com.audiobookshelf.app
+
+import android.app.*
+import android.content.Context
+import android.content.Intent
+import android.graphics.Bitmap
+import android.graphics.Color
+import android.net.Uri
+import android.os.Binder
+import android.os.Build
+import android.os.IBinder
+import android.support.v4.media.MediaDescriptionCompat
+import android.support.v4.media.MediaMetadataCompat
+import android.support.v4.media.session.MediaControllerCompat
+import android.support.v4.media.session.MediaSessionCompat
+import android.util.Log
+import androidx.annotation.RequiresApi
+import androidx.core.app.NotificationCompat
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+import com.bumptech.glide.request.RequestOptions
+import com.getcapacitor.JSObject
+import com.google.android.exoplayer2.*
+import com.google.android.exoplayer2.ext.mediasession.MediaSessionConnector
+import com.google.android.exoplayer2.ext.mediasession.TimelineQueueNavigator
+import com.google.android.exoplayer2.source.hls.HlsMediaSource
+import com.google.android.exoplayer2.ui.PlayerNotificationManager
+import com.google.android.exoplayer2.upstream.*
+import kotlinx.coroutines.*
+
+
+const val NOTIFICATION_LARGE_ICON_SIZE = 144 // px
+
+class PlayerNotificationService : Service()  {
+
+  companion object {
+    var isStarted = false
+  }
+
+  interface MyCustomObjectListener {
+    fun onPlayingUpdate(isPlaying: Boolean)
+    fun onMetadata(metadata: JSObject)
+  }
+
+  private val tag = "PlayerService"
+
+  private lateinit var listener:MyCustomObjectListener
+  private lateinit var ctx:Context
+  private lateinit var mPlayer: SimpleExoPlayer
+  private lateinit var mediaSessionConnector: MediaSessionConnector
+  private lateinit var playerNotificationManager: PlayerNotificationManager
+  private lateinit var mediaSession: MediaSessionCompat
+
+  private val serviceJob = SupervisorJob()
+  private val serviceScope = CoroutineScope(Dispatchers.Main + serviceJob)
+  private val binder = LocalBinder()
+  private val glideOptions = RequestOptions()
+    .fallback(R.drawable.icon)
+    .diskCacheStrategy(DiskCacheStrategy.DATA)
+
+  private var notificationId = 10;
+  private var channelId = "audiobookshelf_channel"
+  private var channelName = "Audiobookshelf Channel"
+
+  private var currentAudiobook:Audiobook? = null
+
+  fun setCustomObjectListener(mylistener: MyCustomObjectListener) {
+    listener = mylistener
+  }
+
+   /*
+      Service related stuff
+   */
+  override fun onBind(intent: Intent?): IBinder? {
+    Log.d(tag, "onBind")
+    return binder
+  }
+
+  inner class LocalBinder : Binder() {
+    // Return this instance of LocalService so clients can call public methods
+    fun getService(): PlayerNotificationService = this@PlayerNotificationService
+  }
+
+  fun stopService(context: Context) {
+    val stopIntent = Intent(context, PlayerNotificationService::class.java)
+    context.stopService(stopIntent)
+  }
+
+  override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
+    Log.d(tag, "onStartCommand $startId")
+    isStarted = true
+
+
+
+    return START_STICKY
+  }
+
+  @RequiresApi(Build.VERSION_CODES.O)
+  private fun createNotificationChannel(channelId: String, channelName: String): String{
+    val chan = NotificationChannel(channelId,
+      channelName, NotificationManager.IMPORTANCE_HIGH)
+    chan.lightColor = Color.DKGRAY
+    chan.lockscreenVisibility = Notification.VISIBILITY_PUBLIC
+    val service = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
+    service.createNotificationChannel(chan)
+    return channelId
+  }
+
+  // detach player
+  override fun onDestroy() {
+    playerNotificationManager.setPlayer(null)
+    mPlayer.release()
+    mediaSession.release()
+    Log.d(tag, "onDestroy")
+    isStarted = false
+
+    super.onDestroy()
+  }
+
+  //removing service when user swipe out our app
+  override fun onTaskRemoved(rootIntent: Intent?) {
+    super.onTaskRemoved(rootIntent)
+    Log.d(tag, "onTaskRemoved")
+    stopSelf()
+  }
+
+
+  override fun onCreate() {
+    super.onCreate()
+    ctx = this
+
+  channelId = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+    createNotificationChannel(channelId, channelName)
+  } else ""
+
+    mPlayer = SimpleExoPlayer.Builder(this).build()
+    setPlayerListeners()
+
+    val sessionActivityPendingIntent =
+      packageManager?.getLaunchIntentForPackage(packageName)?.let { sessionIntent ->
+        PendingIntent.getActivity(this, 0, sessionIntent, 0)
+      }
+    mediaSession = MediaSessionCompat(this, tag)
+      .apply {
+        setSessionActivity(sessionActivityPendingIntent)
+        isActive = true
+      }
+
+    Log.d(tag, "Media Session Set")
+
+    val mediaController = MediaControllerCompat(ctx, mediaSession.sessionToken)
+
+    val builder = PlayerNotificationManager.Builder(
+      ctx,
+      notificationId,
+      channelId)
+
+    builder.setMediaDescriptionAdapter(DescriptionAdapter(mediaController))
+
+    builder.setNotificationListener(object : PlayerNotificationManager.NotificationListener {
+      override fun onNotificationPosted(
+        notificationId: Int,
+        notification: Notification,
+        onGoing: Boolean) {
+
+        // Start foreground service
+        Log.d(tag, "Notification Posted $notificationId - Start Foreground | $notification")
+        startForeground(notificationId, notification)
+      }
+
+      override fun onNotificationCancelled(
+        notificationId: Int,
+        dismissedByUser: Boolean
+      ) {
+        if (dismissedByUser) {
+          Log.d(tag, "onNotificationCancelled dismissed by user")
+          stopSelf()
+        } else {
+          Log.d(tag, "onNotificationCancelled not dismissed by user")
+        }
+      }
+    })
+
+    playerNotificationManager = builder.build()
+
+
+    playerNotificationManager.setMediaSessionToken(mediaSession.sessionToken)
+    playerNotificationManager.setUsePlayPauseActions(true)
+    playerNotificationManager.setUseNextAction(false)
+    playerNotificationManager.setUsePreviousAction(false)
+    playerNotificationManager.setUseChronometer(false)
+    playerNotificationManager.setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
+    playerNotificationManager.setPriority(NotificationCompat.PRIORITY_MAX)
+
+    // Unknown action
+    playerNotificationManager.setBadgeIconType(NotificationCompat.BADGE_ICON_LARGE)
+
+    // Color is set based on the art - cannot override
+//    playerNotificationManager.setColor(Color.RED)
+//    playerNotificationManager.setColorized(true)
+
+    // Icon needs to be black and white
+//    playerNotificationManager.setSmallIcon(R.drawable.icon_32)
+
+    mediaSessionConnector = MediaSessionConnector(mediaSession)
+    val queueNavigator: TimelineQueueNavigator = object : TimelineQueueNavigator(mediaSession) {
+      override fun getMediaDescription(player: Player, windowIndex: Int): MediaDescriptionCompat {
+        return MediaDescriptionCompat.Builder()
+          .setMediaId(currentAudiobook!!.id)
+          .setTitle(currentAudiobook!!.title)
+          .setSubtitle(currentAudiobook!!.author)
+          .setMediaUri(currentAudiobook!!.playlistUri)
+          .setIconUri(currentAudiobook!!.coverUri)
+          .build()
+      }
+    }
+    mediaSessionConnector.setQueueNavigator(queueNavigator)
+    mediaSessionConnector.setPlayer(mPlayer)
+
+    //attach player to playerNotificationManager
+    playerNotificationManager.setPlayer(mPlayer)
+  }
+
+  private inner class DescriptionAdapter(private val controller: MediaControllerCompat) :
+    PlayerNotificationManager.MediaDescriptionAdapter {
+
+    var currentIconUri: Uri? = null
+    var currentBitmap: Bitmap? = null
+
+    override fun createCurrentContentIntent(player: Player): PendingIntent? =
+      controller.sessionActivity
+
+    override fun getCurrentContentText(player: Player) = controller.metadata.description.subtitle.toString()
+
+    override fun getCurrentContentTitle(player: Player) = controller.metadata.description.title.toString()
+
+    override fun getCurrentLargeIcon(
+      player: Player,
+      callback: PlayerNotificationManager.BitmapCallback
+    ): Bitmap? {
+      val albumArtUri = controller.metadata.description.iconUri
+
+      return if (currentIconUri != albumArtUri || currentBitmap == null) {
+        // Cache the bitmap for the current audiobook so that successive calls to
+        // `getCurrentLargeIcon` don't cause the bitmap to be recreated.
+        currentIconUri = albumArtUri
+        serviceScope.launch {
+          currentBitmap = albumArtUri?.let {
+            resolveUriAsBitmap(it)
+          }
+          currentBitmap?.let { callback.onBitmap(it) }
+        }
+        null
+      } else {
+        currentBitmap
+      }
+    }
+
+    private suspend fun resolveUriAsBitmap(uri: Uri): Bitmap? {
+      return withContext(Dispatchers.IO) {
+        // Block on downloading artwork.
+        Glide.with(ctx).applyDefaultRequestOptions(glideOptions)
+          .asBitmap()
+          .load(uri)
+          .submit(NOTIFICATION_LARGE_ICON_SIZE, NOTIFICATION_LARGE_ICON_SIZE)
+          .get()
+      }
+    }
+  }
+
+  private fun setPlayerListeners() {
+    mPlayer.addListener(object : Player.Listener {
+      override fun onPlayerError(error: PlaybackException) {
+        error.message?.let { Log.e(tag, it) }
+        error.localizedMessage?.let { Log.e(tag, it) }
+      }
+
+      override fun onEvents(player: Player, events: Player.Events) {
+        if (events.contains(Player.EVENT_TRACKS_CHANGED)) {
+          Log.d(tag, "EVENT_TRACKS_CHANGED")
+        }
+
+        if (events.contains(Player.EVENT_TIMELINE_CHANGED)) {
+          Log.d(tag, "EVENT_TIMELINE_CHANGED")
+        }
+
+        if (events.contains(Player.EVENT_POSITION_DISCONTINUITY)) {
+          Log.d(tag, "EVENT_POSITION_DISCONTINUITY")
+        }
+
+        if (events.contains(Player.EVENT_IS_LOADING_CHANGED)) {
+          Log.d(tag, "EVENT_IS_LOADING_CHANGED : " + mPlayer.isLoading.toString())
+        }
+
+        if (events.contains(Player.EVENT_PLAYBACK_STATE_CHANGED)) {
+          if (mPlayer.playbackState == Player.STATE_READY) {
+            Log.d(tag, "STATE_READY : " + mPlayer.duration.toString())
+
+            if (!currentAudiobook!!.hasPlayerLoaded && currentAudiobook!!.startTime > 0) {
+              Log.d(tag, "Should seek to ${currentAudiobook!!.startTime}")
+              mPlayer.seekTo(currentAudiobook!!.startTime)
+            }
+
+            currentAudiobook!!.hasPlayerLoaded = true
+            sendClientMetadata("ready")
+          }
+          if (mPlayer.playbackState == Player.STATE_BUFFERING) {
+            Log.d(tag, "STATE_BUFFERING : " + mPlayer.currentPosition.toString())
+            sendClientMetadata("buffering")
+          }
+          if (mPlayer.playbackState == Player.STATE_ENDED) {
+            Log.d(tag, "STATE_ENDED")
+            sendClientMetadata("ended")
+          }
+          if (mPlayer.playbackState == Player.STATE_IDLE) {
+            Log.d(tag, "STATE_IDLE")
+            sendClientMetadata("idle")
+          }
+        }
+
+        if (events.contains(Player.EVENT_MEDIA_METADATA_CHANGED)) {
+          Log.d(tag, "EVENT_MEDIA_METADATA_CHANGED")
+        }
+        if (events.contains(Player.EVENT_PLAYLIST_METADATA_CHANGED)) {
+          Log.d(tag, "EVENT_PLAYLIST_METADATA_CHANGED")
+        }
+        if (events.contains(Player.EVENT_IS_PLAYING_CHANGED)) {
+          Log.d(tag, "EVENT IS PLAYING CHANGED")
+          if (listener != null) listener.onPlayingUpdate(player.isPlaying)
+        }
+      }
+    })
+  }
+
+
+  /*
+    User callable methods
+  */
+
+//  fun initPlayer(token: String, playlistUri: String, playWhenReady: Boolean, currentTime: Long, title: String, artist: String, albumArt: String) {
+  fun initPlayer(audiobook: Audiobook) {
+    currentAudiobook = audiobook
+
+    Log.d(tag, "Init Player Audiobook ${currentAudiobook!!.playlistUrl} | ${currentAudiobook!!.title} | ${currentAudiobook!!.author}")
+
+    if (mPlayer.isPlaying) {
+      Log.d(tag, "Init Player audiobook already playing")
+    }
+
+    val metadata = MediaMetadataCompat.Builder()
+      .putString(MediaMetadataCompat.METADATA_KEY_TITLE, currentAudiobook!!.title)
+      .putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_TITLE, currentAudiobook!!.title)
+      .putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_SUBTITLE, currentAudiobook!!.author)
+      .putString(MediaMetadataCompat.METADATA_KEY_AUTHOR, currentAudiobook!!.author)
+      .putString(MediaMetadataCompat.METADATA_KEY_ARTIST, currentAudiobook!!.author)
+      .putString(MediaMetadataCompat.METADATA_KEY_ALBUM, currentAudiobook!!.series)
+      .putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, currentAudiobook!!.cover)
+      .putString(MediaMetadataCompat.METADATA_KEY_ART_URI, currentAudiobook!!.cover)
+      .putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, currentAudiobook!!.id)
+      .build()
+
+    mediaSession.setMetadata(metadata)
+
+    var mediaMetadata = MediaMetadata.Builder().build()
+    var mediaItem = MediaItem.Builder().setUri(currentAudiobook!!.playlistUri).setMediaMetadata(mediaMetadata).build()
+
+    var dataSourceFactory = DefaultHttpDataSource.Factory()
+    dataSourceFactory.setUserAgent(channelId)
+    dataSourceFactory.setDefaultRequestProperties(hashMapOf("Authorization" to "Bearer ${currentAudiobook!!.token}"))
+
+    var mediaSource = HlsMediaSource.Factory(dataSourceFactory).createMediaSource(mediaItem)
+
+    mPlayer.setMediaSource(mediaSource, true)
+    mPlayer.prepare()
+    mPlayer.playWhenReady = currentAudiobook!!.playWhenReady
+  }
+
+
+  fun getCurrentTime() : Long {
+    return mPlayer.currentPosition
+  }
+
+  fun play() {
+    if (mPlayer.isPlaying) {
+      Log.d(tag, "Already playing")
+      return
+    }
+    mPlayer.play()
+  }
+
+  fun pause() {
+    mPlayer.pause()
+  }
+
+  fun seekPlayer(time: Long) {
+    mPlayer.seekTo(time)
+  }
+
+  fun seekForward10() {
+    mPlayer.seekTo(mPlayer.currentPosition + 10000)
+  }
+
+  fun seekBackward10() {
+    mPlayer.seekTo(mPlayer.currentPosition - 10000)
+  }
+
+  fun terminateStream() {
+    if (mPlayer.playbackState == Player.STATE_READY) {
+      mPlayer.clearMediaItems()
+    }
+  }
+
+  fun sendClientMetadata(stateName: String) {
+    var metadata = JSObject()
+    var duration = mPlayer.duration
+    if (duration < 0) duration = 0
+    metadata.put("duration", duration)
+    metadata.put("currentTime", mPlayer.currentPosition)
+    metadata.put("stateName", stateName)
+    if (listener != null) listener.onMetadata(metadata)
+  }
+}

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

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                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="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

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

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

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/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">AudioBookshelf</string>
+    <string name="title_activity_main">AudioBookshelf</string>
+    <string name="package_name">com.audiobookshelf.app</string>
+    <string name="custom_url_scheme">com.audiobookshelf.app</string>
+</resources>

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

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

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

@@ -0,0 +1,15 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <access origin="*" />
+  
+  <feature name="File">
+    <param name="android-package" value="org.apache.cordova.file.FileUtils"/>
+    <param name="onload" value="true"/>
+  </feature>
+
+  <feature name="Media">
+    <param name="android-package" value="org.apache.cordova.media.AudioHandler"/>
+  </feature>
+
+  
+</widget>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/build.gradle

@@ -0,0 +1,31 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  ext.kotlin_version = '1.5.30'
+
+  repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:4.0.1'
+        classpath 'com.google.gms:google-services:4.3.5'
+      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+
+      // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        jcenter()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,9 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-dialog'
+project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')
+
+include ':capacitor-toast'
+project(':capacitor-toast').projectDir = new File('../node_modules/@capacitor/toast/android')

android/gradle.properties

@@ -0,0 +1,24 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+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
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+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
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,37 @@
+ext {
+    minSdkVersion = 26
+    compileSdkVersion = 30
+    targetSdkVersion = 30
+    androidxActivityVersion = '1.2.0'
+    androidxAppCompatVersion = '1.2.0'
+    androidxCoordinatorLayoutVersion = '1.1.0'
+    androidxCoreVersion = '1.3.2'
+    androidxFragmentVersion = '1.3.0'
+    junitVersion = '4.13.1'
+    androidxJunitVersion = '1.1.2'
+    androidxEspressoCoreVersion = '3.3.0'
+    cordovaAndroidVersion = '7.0.0'
+    androidx_app_compat_version = '1.2.0'
+    androidx_car_version = '1.0.0-alpha7'
+    androidx_core_ktx_version = '1.3.1'
+    androidx_media_version = '1.0.1'
+    androidx_preference_version = '1.1.1'
+    androidx_test_runner_version = '1.3.0'
+    arch_lifecycle_version = '2.2.0'
+    constraint_layout_version = '2.0.1'
+    espresso_version = '3.3.0'
+    exoplayer_version = '2.15.0'
+    fragment_version = '1.2.5'
+    glide_version = '4.11.0'
+    gms_strict_version_matcher_version = '1.0.3'
+    gradle_version = '3.1.4'
+    gson_version = '2.8.5'
+    junit_version = '4.13'
+    kotlin_version = '1.4.32'
+    kotlin_coroutines_version = '1.1.0'
+    multidex_version = '1.0.3'
+    play_services_auth_version = '18.1.0'
+    recycler_view_version = '1.1.0'
+    robolectric_version = '4.2'
+    test_runner_version = '1.1.0'
+}

assets/fastSort.js

@@ -0,0 +1,158 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+      (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['fast-sort'] = {}));
+}(this, (function (exports) {
+  'use strict';
+
+  // >>> INTERFACES <<<
+  // >>> HELPERS <<<
+  var castComparer = function (comparer) { return function (a, b, order) { return comparer(a, b, order) * order; }; };
+  var throwInvalidConfigErrorIfTrue = function (condition, context) {
+    if (condition)
+      throw Error("Invalid sort config: " + context);
+  };
+  var unpackObjectSorter = function (sortByObj) {
+    var _a = sortByObj || {}, asc = _a.asc, desc = _a.desc;
+    var order = asc ? 1 : -1;
+    var sortBy = (asc || desc);
+    // Validate object config
+    throwInvalidConfigErrorIfTrue(!sortBy, 'Expected `asc` or `desc` property');
+    throwInvalidConfigErrorIfTrue(asc && desc, 'Ambiguous object with `asc` and `desc` config properties');
+    var comparer = sortByObj.comparer && castComparer(sortByObj.comparer);
+    return { order: order, sortBy: sortBy, comparer: comparer };
+  };
+  // >>> SORTERS <<<
+  var multiPropertySorterProvider = function (defaultComparer) {
+    return function multiPropertySorter(sortBy, sortByArr, depth, order, comparer, a, b) {
+      var valA;
+      var valB;
+      if (typeof sortBy === 'string') {
+        valA = a[sortBy];
+        valB = b[sortBy];
+      }
+      else if (typeof sortBy === 'function') {
+        valA = sortBy(a);
+        valB = sortBy(b);
+      }
+      else {
+        var objectSorterConfig = unpackObjectSorter(sortBy);
+        return multiPropertySorter(objectSorterConfig.sortBy, sortByArr, depth, objectSorterConfig.order, objectSorterConfig.comparer || defaultComparer, a, b);
+      }
+      var equality = comparer(valA, valB, order);
+      if ((equality === 0 || (valA == null && valB == null)) &&
+        sortByArr.length > depth) {
+        return multiPropertySorter(sortByArr[depth], sortByArr, depth + 1, order, comparer, a, b);
+      }
+      return equality;
+    };
+  };
+  function getSortStrategy(sortBy, comparer, order) {
+    // Flat array sorter
+    if (sortBy === undefined || sortBy === true) {
+      return function (a, b) { return comparer(a, b, order); };
+    }
+    // Sort list of objects by single object key
+    if (typeof sortBy === 'string') {
+      throwInvalidConfigErrorIfTrue(sortBy.includes('.'), 'String syntax not allowed for nested properties.');
+      return function (a, b) { return comparer(a[sortBy], b[sortBy], order); };
+    }
+    // Sort list of objects by single function sorter
+    if (typeof sortBy === 'function') {
+      return function (a, b) { return comparer(sortBy(a), sortBy(b), order); };
+    }
+    // Sort by multiple properties
+    if (Array.isArray(sortBy)) {
+      var multiPropSorter_1 = multiPropertySorterProvider(comparer);
+      return function (a, b) { return multiPropSorter_1(sortBy[0], sortBy, 1, order, comparer, a, b); };
+    }
+    // Unpack object config to get actual sorter strategy
+    var objectSorterConfig = unpackObjectSorter(sortBy);
+    return getSortStrategy(objectSorterConfig.sortBy, objectSorterConfig.comparer || comparer, objectSorterConfig.order);
+  }
+  var sortArray = function (order, ctx, sortBy, comparer) {
+    var _a;
+    if (!Array.isArray(ctx)) {
+      return ctx;
+    }
+    // Unwrap sortBy if array with only 1 value to get faster sort strategy
+    if (Array.isArray(sortBy) && sortBy.length < 2) {
+      _a = sortBy, sortBy = _a[0];
+    }
+    return ctx.sort(getSortStrategy(sortBy, comparer, order));
+  };
+  // >>> Public <<<
+  var createNewSortInstance = function (opts) {
+    var comparer = castComparer(opts.comparer);
+    return function (_ctx) {
+      var ctx = Array.isArray(_ctx) && !opts.inPlaceSorting
+        ? _ctx.slice()
+        : _ctx;
+      return {
+        /**
+         * Sort array in ascending order.
+         * @example
+         * sort([3, 1, 4]).asc();
+         * sort(users).asc(u => u.firstName);
+         * sort(users).asc([
+         *   U => u.firstName
+         *   u => u.lastName,
+         * ]);
+         */
+        asc: function (sortBy) {
+          return sortArray(1, ctx, sortBy, comparer);
+        },
+        /**
+         * Sort array in descending order.
+         * @example
+         * sort([3, 1, 4]).desc();
+         * sort(users).desc(u => u.firstName);
+         * sort(users).desc([
+         *   U => u.firstName
+         *   u => u.lastName,
+         * ]);
+         */
+        desc: function (sortBy) {
+          return sortArray(-1, ctx, sortBy, comparer);
+        },
+        /**
+         * Sort array in ascending or descending order. It allows sorting on multiple props
+         * in different order for each of them.
+         * @example
+         * sort(users).by([
+         *  { asc: u => u.score }
+         *  { desc: u => u.age }
+         * ]);
+         */
+        by: function (sortBy) {
+          return sortArray(1, ctx, sortBy, comparer);
+        },
+      };
+    };
+  };
+  var defaultComparer = function (a, b, order) {
+    if (a == null)
+      return order;
+    if (b == null)
+      return -order;
+    if (a < b)
+      return -1;
+    if (a === b)
+      return 0;
+    return 1;
+  };
+  var sort = createNewSortInstance({
+    comparer: defaultComparer,
+  });
+  var inPlaceSort = createNewSortInstance({
+    comparer: defaultComparer,
+    inPlaceSorting: true,
+  });
+
+  exports.createNewSortInstance = createNewSortInstance;
+  exports.inPlaceSort = inPlaceSort;
+  exports.sort = sort;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

capacitor.config.json

@@ -0,0 +1,6 @@
+{
+  "appId": "com.audiobookshelf.app",
+  "appName": "audiobookshelf-app",
+  "webDir": "dist",
+  "bundledWebRuntime": false
+}

components/AudioPlayerMini.vue

@@ -0,0 +1,269 @@
+<template>
+  <div ref="wrapper" class="w-full pt-2">
+    <div class="relative">
+      <div class="flex mt-2 mb-4">
+        <div class="flex-grow" />
+        <template v-if="!loading">
+          <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-8" @mousedown.prevent @mouseup.prevent @click.stop="restart">
+            <span class="material-icons text-3xl">first_page</span>
+          </div>
+          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="backward10">
+            <span class="material-icons text-3xl">replay_10</span>
+          </div>
+          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
+            <span class="material-icons">{{ seekLoading ? 'autorenew' : isPaused ? 'play_arrow' : 'pause' }}</span>
+          </div>
+          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="forward10">
+            <span class="material-icons text-3xl">forward_10</span>
+          </div>
+          <div class="cursor-pointer flex items-center justify-center text-gray-300 ml-8" @mousedown.prevent @mouseup.prevent>
+            <span class="font-mono text-lg uppercase">1x</span>
+          </div>
+        </template>
+        <template v-else>
+          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
+            <span class="material-icons">autorenew</span>
+          </div>
+        </template>
+        <div class="flex-grow" />
+      </div>
+      <!-- Track -->
+      <div ref="track" class="w-full h-2 bg-gray-700 relative cursor-pointer transform duration-100 hover:scale-y-125" :class="loading ? 'animate-pulse' : ''" @click.stop="clickTrack">
+        <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
+        <div ref="bufferTrack" class="h-full bg-gray-400 absolute top-0 left-0 pointer-events-none" />
+        <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
+        <div ref="trackCursor" class="h-full w-0.5 bg-gray-50 absolute top-0 left-0 opacity-0 pointer-events-none" />
+      </div>
+      <div class="flex items-center py-1 px-0.5">
+        <div>
+          <p ref="currentTimestamp" class="font-mono text-sm">00:00:00</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <p class="font-mono text-sm">{{ totalDurationPretty }}</p>
+        </div>
+      </div>
+    </div>
+    <!-- <audio ref="audio" @progress="progress" @pause="paused" @playing="playing" @timeupdate="timeupdate" @loadeddata="audioLoadedData" /> -->
+  </div>
+</template>
+
+<script>
+import MyNativeAudio from '@/plugins/my-native-audio'
+
+export default {
+  props: {
+    loading: Boolean
+  },
+  data() {
+    return {
+      totalDuration: 0,
+      currentTime: 0,
+      isTerminated: false,
+      initObject: null,
+      stateName: 'idle',
+      playInterval: null,
+      trackWidth: 0,
+      isPaused: true,
+      src: null,
+      volume: 0.5,
+      readyTrackWidth: 0,
+      bufferTrackWidth: 0,
+      playedTrackWidth: 0,
+      seekedTime: 0,
+      seekLoading: false
+    }
+  },
+  computed: {
+    totalDurationPretty() {
+      return this.$secondsToTimestamp(this.totalDuration)
+    }
+  },
+  methods: {
+    restart() {
+      this.seek(0)
+    },
+    backward10() {
+      MyNativeAudio.seekBackward10()
+    },
+    forward10() {
+      MyNativeAudio.seekForward10()
+    },
+    sendStreamUpdate() {
+      this.$emit('updateTime', this.currentTime)
+    },
+    setStreamReady() {
+      this.readyTrackWidth = this.trackWidth
+      this.$refs.readyTrack.style.width = this.trackWidth + 'px'
+    },
+    setChunksReady(chunks, numSegments) {
+      var largestSeg = 0
+      for (let i = 0; i < chunks.length; i++) {
+        var chunk = chunks[i]
+        if (typeof chunk === 'string') {
+          var chunkRange = chunk.split('-').map((c) => Number(c))
+          if (chunkRange.length < 2) continue
+          if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1]
+        } else if (chunk > largestSeg) {
+          largestSeg = chunk
+        }
+      }
+      var percentageReady = largestSeg / numSegments
+      var widthReady = Math.round(this.trackWidth * percentageReady)
+      if (this.readyTrackWidth === widthReady) {
+        return
+      }
+      this.readyTrackWidth = widthReady
+      this.$refs.readyTrack.style.width = widthReady + 'px'
+    },
+    updateTimestamp() {
+      var ts = this.$refs.currentTimestamp
+      if (!ts) {
+        console.error('No timestamp el')
+        return
+      }
+      var currTimeClean = this.$secondsToTimestamp(this.currentTime)
+      ts.innerText = currTimeClean
+    },
+    timeupdate() {
+      if (!this.$refs.playedTrack) {
+        console.error('Invalid no played track ref')
+        return
+      }
+
+      if (this.seekLoading) {
+        this.seekLoading = false
+        if (this.$refs.playedTrack) {
+          this.$refs.playedTrack.classList.remove('bg-yellow-300')
+          this.$refs.playedTrack.classList.add('bg-gray-200')
+        }
+      }
+
+      this.updateTimestamp()
+      this.sendStreamUpdate()
+
+      var perc = this.currentTime / this.totalDuration
+      var ptWidth = Math.round(perc * this.trackWidth)
+      if (this.playedTrackWidth === ptWidth) {
+        return
+      }
+      this.$refs.playedTrack.style.width = ptWidth + 'px'
+      this.playedTrackWidth = ptWidth
+    },
+    seek(time) {
+      if (this.seekLoading) {
+        console.error('Already seek loading', this.seekedTime)
+        return
+      }
+
+      this.seekedTime = time
+      this.seekLoading = true
+      MyNativeAudio.seekPlayer({ timeMs: String(Math.floor(time * 1000)) })
+
+      if (this.$refs.playedTrack) {
+        var perc = time / this.totalDuration
+        var ptWidth = Math.round(perc * this.trackWidth)
+        this.$refs.playedTrack.style.width = ptWidth + 'px'
+        this.playedTrackWidth = ptWidth
+
+        this.$refs.playedTrack.classList.remove('bg-gray-200')
+        this.$refs.playedTrack.classList.add('bg-yellow-300')
+      }
+    },
+    updateVolume(volume) {},
+    clickTrack(e) {
+      var offsetX = e.offsetX
+      var perc = offsetX / this.trackWidth
+      var time = perc * this.totalDuration
+      if (isNaN(time) || time === null) {
+        console.error('Invalid time', perc, time)
+        return
+      }
+      this.seek(time)
+    },
+    playPauseClick() {
+      if (this.isPaused) {
+        console.log('playPause PLAY')
+        this.play()
+      } else {
+        console.log('playPause PAUSE')
+        this.pause()
+      }
+    },
+    set(audiobookStreamData) {
+      this.initObject = { ...audiobookStreamData }
+      MyNativeAudio.initPlayer(this.initObject)
+    },
+    setFromObj() {
+      if (!this.initObject) {
+        console.error('Cannot set from obj')
+        return
+      }
+      MyNativeAudio.initPlayer(this.initObject)
+    },
+    play() {
+      MyNativeAudio.playPlayer()
+      this.startPlayInterval()
+    },
+    pause() {
+      MyNativeAudio.pausePlayer()
+      this.stopPlayInterval()
+    },
+    startPlayInterval() {
+      clearInterval(this.playInterval)
+      this.playInterval = setInterval(async () => {
+        var data = await MyNativeAudio.getCurrentTime()
+        this.currentTime = Number((data.value / 1000).toFixed(2))
+        this.timeupdate()
+      }, 1000)
+    },
+    stopPlayInterval() {
+      clearInterval(this.playInterval)
+    },
+    terminateStream(startTime) {
+      var _time = String(Math.floor(startTime * 1000))
+      if (!this.initObject) {
+        console.error('Terminate stream when no init object is set...')
+        return
+      }
+      this.initObject.currentTime = _time
+      MyNativeAudio.terminateStream()
+    },
+    init() {
+      MyNativeAudio.addListener('onPlayingUpdate', (data) => {
+        this.isPaused = !data.value
+        if (!this.isPaused) {
+          this.startPlayInterval()
+        } else {
+          this.stopPlayInterval()
+        }
+      })
+
+      MyNativeAudio.addListener('onMetadata', (data) => {
+        console.log('Native Audio On Metadata', JSON.stringify(data))
+        this.totalDuration = Number((data.duration / 1000).toFixed(2))
+        this.currentTime = Number((data.currentTime / 1000).toFixed(2))
+        this.stateName = data.stateName
+
+        if (this.stateName === 'ended' && this.isTerminated) {
+          this.setFromObj()
+        }
+
+        this.timeupdate()
+      })
+
+      if (this.$refs.track) {
+        this.trackWidth = this.$refs.track.clientWidth
+      } else {
+        console.error('Track not loaded', this.$refs)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(this.init)
+  },
+  beforeDestroy() {
+    clearInterval(this.playInterval)
+  }
+}
+</script>

components/app/Appbar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="w-full h-16 bg-primary relative">
+    <div id="appbar" class="absolute top-0 left-0 w-full h-full z-30 flex items-center px-2">
+      <nuxt-link v-show="!showBack" to="/" class="mr-4">
+        <img src="/Logo.png" class="h-12 w-12" />
+      </nuxt-link>
+      <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-2 cursor-pointer">
+        <span class="material-icons text-4xl text-white">arrow_back</span>
+      </a>
+      <p class="text-xl font-book">AudioBookshelf</p>
+      <div class="flex-grow" />
+      <ui-menu :label="username" :items="menuItems" @action="menuAction" class="ml-5" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuItems: [
+        {
+          value: 'account',
+          text: 'Account',
+          to: '/account'
+        },
+        {
+          value: 'logout',
+          text: 'Logout'
+        }
+      ]
+    }
+  },
+  computed: {
+    showBack() {
+      return this.$route.name !== 'index'
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    username() {
+      return this.user ? this.user.username : 'err'
+    }
+  },
+  methods: {
+    back() {
+      if (this.$route.name === 'audiobook-id-edit') {
+        this.$router.push(`/audiobook/${this.$route.params.id}`)
+      } else {
+        this.$router.push('/')
+      }
+    },
+    logout() {
+      this.$axios.$post('/logout').catch((error) => {
+        console.error(error)
+      })
+      this.$server.logout()
+      this.$router.push('/connect')
+    },
+    menuAction(action) {
+      if (action === 'logout') {
+        this.logout()
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+#appbar {
+  box-shadow: 0px 5px 5px #11111155;
+}
+</style>

components/app/Bookshelf.vue

@@ -0,0 +1,116 @@
+<template>
+  <div id="bookshelf" ref="wrapper" class="w-full overflow-y-auto">
+    <template v-for="(shelf, index) in groupedBooks">
+      <div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 flex justify-around relative">
+        <template v-for="audiobook in shelf">
+          <div :key="audiobook.id" class="relative px-4">
+            <nuxt-link :to="`/audiobook/${audiobook.id}`">
+              <cards-book-cover :audiobook="audiobook" :width="cardWidth" class="mx-auto -mb-px" />
+            </nuxt-link>
+          </div>
+        </template>
+        <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
+      </div>
+    </template>
+    <div class="w-full py-16 text-center text-xl">
+      <div class="py-4">No Audiobooks</div>
+      <ui-btn v-if="hasFilters" @click="clearFilter">Clear Filter</ui-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currFilterOrderKey: null,
+      groupedBooks: [],
+      pageWidth: 0
+    }
+  },
+  computed: {
+    cardWidth() {
+      return 140
+    },
+    cardHeight() {
+      return this.cardWidth * 2
+    },
+    filterOrderKey() {
+      return this.$store.getters['user/getFilterOrderKey']
+    },
+    hasFilters() {
+      return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
+    }
+  },
+  methods: {
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', {
+        filterBy: 'all'
+      })
+    },
+    playAudiobook(audiobook) {
+      console.log('Play Audiobook', audiobook)
+      this.$store.commit('setStreamAudiobook', audiobook)
+      this.$server.socket.emit('open_stream', audiobook.id)
+    },
+    calcShelves() {
+      var booksPerShelf = Math.floor(this.pageWidth / (this.cardWidth + 32))
+      var groupedBooks = []
+
+      var audiobooksSorted = this.$store.getters['audiobooks/getFilteredAndSorted']()
+      this.currFilterOrderKey = this.filterOrderKey
+
+      var numGroups = Math.ceil(audiobooksSorted.length / booksPerShelf)
+      for (let i = 0; i < numGroups; i++) {
+        var group = audiobooksSorted.slice(i * booksPerShelf, i * booksPerShelf + 2)
+        groupedBooks.push(group)
+      }
+      this.groupedBooks = groupedBooks
+    },
+    audiobooksUpdated() {
+      this.calcShelves()
+    },
+    init() {
+      if (this.$refs.wrapper) {
+        this.pageWidth = this.$refs.wrapper.clientWidth
+        this.calcShelves()
+      }
+    },
+    resize() {
+      this.init()
+    },
+    settingsUpdated() {
+      if (this.currFilterOrderKey !== this.filterOrderKey) {
+        this.calcShelves()
+      }
+    }
+  },
+  mounted() {
+    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
+
+    window.addEventListener('resize', this.resize)
+    this.$store.dispatch('audiobooks/load')
+    this.init()
+  },
+  beforeDestroy() {
+    this.$store.commit('audiobooks/removeListener', 'bookshelf')
+    this.$store.commit('user/removeSettingsListener', 'bookshelf')
+    window.removeEventListener('resize', this.resize)
+  }
+}
+</script>
+
+<style>
+#bookshelf {
+  height: calc(100% - 48px);
+}
+.bookshelfRow {
+  background-image: url(/wood_panels.jpg);
+}
+.bookshelfDivider {
+  background: rgb(149, 119, 90);
+  background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
+  box-shadow: 2px 14px 8px #111111aa;
+}
+</style>

components/app/StreamContainer.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="w-full p-4 pointer-events-none fixed bottom-0 left-0 right-0 z-20">
+    <div v-if="streamAudiobook" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
+      <div class="pl-16 pr-2 flex items-center pb-2">
+        <div>
+          <p class="px-2">{{ title }}</p>
+          <p class="px-2 text-xs text-gray-400">by {{ author }}</p>
+        </div>
+        <div class="flex-grow" />
+        <span class="material-icons" @click="cancelStream">close</span>
+      </div>
+      <div class="absolute left-2 -top-10">
+        <cards-book-cover :audiobook="streamAudiobook" :width="64" />
+      </div>
+      <audio-player-mini ref="audioPlayerMini" :loading="!stream || currStreamAudiobookId !== streamAudiobookId" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Dialog } from '@capacitor/dialog'
+
+export default {
+  data() {
+    return {
+      audioPlayerReady: false,
+      stream: null,
+      lastServerUpdateSentSeconds: 0
+    }
+  },
+  computed: {
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    },
+    streamAudiobookId() {
+      return this.streamAudiobook ? this.streamAudiobook.id : null
+    },
+    currStreamAudiobookId() {
+      return this.stream ? this.stream.audiobook.id : null
+    },
+    book() {
+      return this.streamAudiobook ? this.streamAudiobook.book || {} : {}
+    },
+    title() {
+      return this.book ? this.book.title : ''
+    },
+    author() {
+      return this.book ? this.book.author : ''
+    },
+    cover() {
+      return this.book ? this.book.cover : ''
+    },
+    series() {
+      return this.book ? this.book.series : ''
+    },
+    volumeNumber() {
+      return this.book ? this.book.volumeNumber : ''
+    },
+    seriesTxt() {
+      if (!this.series) return ''
+      if (!this.volumeNumber) return this.series
+      return `${this.series} #${this.volumeNumber}`
+    },
+    duration() {
+      return this.streamAudiobook ? this.streamAudiobook.duration || 0 : 0
+    },
+    coverForNative() {
+      if (!this.cover) {
+        return `${this.$store.state.serverUrl}/Logo.png`
+      }
+      if (this.cover.startsWith('http')) return this.cover
+      var _clean = this.cover.replace(/\\/g, '/')
+      if (_clean.startsWith('/local')) {
+        var _cover = process.env.NODE_ENV !== 'production' && process.env.PROD !== '1' ? _clean.replace('/local', '') : _clean
+        return `${this.$store.state.serverUrl}${_cover}`
+      }
+      return _clean
+    }
+  },
+  methods: {
+    async cancelStream() {
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: 'Cancel this stream?'
+      })
+      if (value) {
+        this.$server.socket.emit('close_stream')
+      }
+    },
+    updateTime(currentTime) {
+      var diff = currentTime - this.lastServerUpdateSentSeconds
+      if (diff > 4 || diff < 0) {
+        this.lastServerUpdateSentSeconds = currentTime
+        var updatePayload = {
+          currentTime,
+          streamId: this.stream.id
+        }
+        this.$server.socket.emit('stream_update', updatePayload)
+      }
+    },
+    closeStream() {},
+    streamClosed(audiobookId) {
+      console.log('Stream Closed')
+
+      if (this.stream.audiobook.id === audiobookId || audiobookId === 'n/a') {
+        this.$store.commit('setStreamAudiobook', null)
+      }
+    },
+    streamProgress(data) {
+      if (!data.numSegments) return
+      var chunks = data.chunks
+      if (this.$refs.audioPlayerMini) {
+        this.$refs.audioPlayerMini.setChunksReady(chunks, data.numSegments)
+      }
+    },
+    streamReady() {
+      console.log('[StreamContainer] Stream Ready')
+      if (this.$refs.audioPlayerMini) {
+        this.$refs.audioPlayerMini.setStreamReady()
+      }
+    },
+    streamReset({ streamId, startTime }) {
+      if (this.$refs.audioPlayerMini) {
+        if (this.stream && this.stream.id === streamId) {
+          this.$refs.audioPlayerMini.terminateStream(startTime)
+        }
+      }
+    },
+    streamOpen(stream) {
+      console.log('[StreamContainer] Stream Open', stream)
+      if (!this.$refs.audioPlayerMini) {
+        console.error('No Audio Player Mini')
+        return
+      }
+
+      if (this.stream && this.stream.id !== stream.id) {
+        console.error('STREAM CHANGED', this.stream.id, stream.id)
+      }
+
+      this.stream = stream
+
+      var playlistUrl = stream.clientPlaylistUri
+      var currentTime = stream.clientCurrentTime || 0
+      var playOnLoad = this.$store.state.playOnLoad
+      if (playOnLoad) this.$store.commit('setPlayOnLoad', false)
+
+      var audiobookStreamData = {
+        title: this.title,
+        author: this.author,
+        playWhenReady: !!playOnLoad,
+        startTime: String(Math.floor(currentTime * 1000)),
+        cover: this.coverForNative,
+        duration: String(Math.floor(this.duration * 1000)),
+        series: this.seriesTxt,
+        playlistUrl: this.$server.url + playlistUrl,
+        token: this.$store.getters['user/getToken']
+      }
+
+      console.log('audiobook stream data', audiobookStreamData.token, JSON.stringify(audiobookStreamData))
+
+      this.$refs.audioPlayerMini.set(audiobookStreamData)
+    },
+    audioPlayerMounted() {
+      console.log('Audio Player Mounted', this.$server.stream)
+      this.audioPlayerReady = true
+      if (this.$server.stream) {
+        this.streamOpen(this.$server.stream)
+      }
+    },
+    setListeners() {
+      if (!this.$server.socket) {
+        console.error('Invalid server socket not set')
+        return
+      }
+      this.$server.socket.on('stream_open', this.streamOpen)
+      this.$server.socket.on('stream_closed', this.streamClosed)
+      this.$server.socket.on('stream_progress', this.streamProgress)
+      this.$server.socket.on('stream_ready', this.streamReady)
+      this.$server.socket.on('stream_reset', this.streamReset)
+    }
+  },
+  mounted() {
+    console.warn('Stream Container Mounted')
+    this.setListeners()
+  }
+}
+</script>

components/cards/BookCover.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+    <div class="w-full h-full relative">
+      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
+        <div class="w-full h-full z-0" ref="coverBg" />
+      </div>
+      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+    </div>
+
+    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
+      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
+        <img src="/LogoTransparent.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
+      </div>
+    </div>
+
+    <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
+      <div>
+        <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+      </div>
+    </div>
+    <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
+      <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    },
+    authorOverride: String,
+    width: {
+      type: Number,
+      default: 120
+    }
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false
+    }
+  },
+  watch: {
+    cover() {
+      this.imageFailed = false
+    }
+  },
+  computed: {
+    book() {
+      return this.audiobook.book || {}
+    },
+    title() {
+      return this.book.title || 'No Title'
+    },
+    titleCleaned() {
+      if (this.title.length > 60) {
+        return this.title.slice(0, 57) + '...'
+      }
+      return this.title
+    },
+    author() {
+      if (this.authorOverride) return this.authorOverride
+      return this.book.author || 'Unknown'
+    },
+    authorCleaned() {
+      if (this.author.length > 30) {
+        return this.author.slice(0, 27) + '...'
+      }
+      return this.author
+    },
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    serverUrl() {
+      return this.$store.state.serverUrl
+    },
+    fullCoverUrl() {
+      if (this.cover.startsWith('http')) return this.cover
+      var _clean = this.cover.replace(/\\/g, '/')
+      if (_clean.startsWith('/local')) {
+        var _cover = process.env.NODE_ENV !== 'production' && process.env.PROD !== '1' ? _clean.replace('/local', '') : _clean
+        return `${this.serverUrl}${_cover}`
+      }
+      return _clean
+    },
+    cover() {
+      return this.book.cover || this.placeholderUrl
+    },
+    hasCover() {
+      return !!this.book.cover
+    },
+    sizeMultiplier() {
+      return this.width / 120
+    },
+    titleFontSize() {
+      return 0.75 * this.sizeMultiplier
+    },
+    authorFontSize() {
+      return 0.6 * this.sizeMultiplier
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    },
+    authorBottom() {
+      return 0.75 * this.sizeMultiplier
+    }
+  },
+  methods: {
+    setCoverBg() {
+      if (this.$refs.coverBg) {
+        this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
+        this.$refs.coverBg.style.backgroundSize = 'cover'
+        this.$refs.coverBg.style.backgroundPosition = 'center'
+        this.$refs.coverBg.style.opacity = 0.25
+        this.$refs.coverBg.style.filter = 'blur(1px)'
+      }
+    },
+    hideCoverBg() {},
+    imageLoaded() {
+      if (this.$refs.cover && this.cover !== this.placeholderUrl) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - 1.6)
+
+        // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+        if (arDiff > 0.15) {
+          this.showCoverBg = true
+          this.$nextTick(this.setCoverBg)
+        } else {
+          this.showCoverBg = false
+        }
+      }
+    },
+    imageError(err) {
+      console.error('ImgError', err)
+      this.imageFailed = true
+    }
+  }
+}
+</script>

components/modals/FilterModal.vue

@@ -0,0 +1,165 @@
+<template>
+  <modals-modal v-model="show" width="90%" height="100%">
+    <template #outer>
+      <div v-show="selected !== 'all'" class="absolute top-4 left-4 z-40">
+        <ui-btn class="text-xl border-yellow-400 border-opacity-40" @click="clearSelected">Clear</ui-btn>
+        <!-- <span class="font-semibold uppercase text-white text-2xl">Clear</span> -->
+      </div>
+    </template>
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+        <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="item in items">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+              <div class="flex items-center justify-between">
+                <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
+              </div>
+              <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
+                <span class="material-icons text-2xl">arrow_right</span>
+              </div>
+            </li>
+          </template>
+        </ul>
+        <ul v-show="sublist" class="h-full w-full rounded-lg" role="listbox" aria-labelledby="listbox-label">
+          <li class="text-gray-50 select-none relative py-3 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
+            <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
+              <span class="material-icons text-2xl">arrow_left</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="font-normal ml-3 block truncate text-lg">Back</span>
+            </div>
+          </li>
+          <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
+            <div class="flex items-center justify-center">
+              <span class="font-normal block truncate py-3">No {{ sublist }}</span>
+            </div>
+          </li>
+          <template v-for="item in sublistItems">
+            <li :key="item" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item}` === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item)">
+              <div class="flex items-center">
+                <span class="font-normal truncate py-3 text-base">{{ snakeToNormal(item) }}</span>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    filterBy: String
+  },
+  data() {
+    return {
+      sublist: null,
+      items: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Series',
+          value: 'series',
+          sublist: true
+        }
+      ]
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (!newVal) {
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selected: {
+      get() {
+        return this.filterBy
+      },
+      set(val) {
+        this.$emit('update:filterBy', val)
+      }
+    },
+    selectedItemSublist() {
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
+    },
+    genres() {
+      return this.$store.state.audiobooks.genres
+    },
+    tags() {
+      return this.$store.state.audiobooks.tags
+    },
+    series() {
+      return this.$store.state.audiobooks.series
+    },
+    sublistItems() {
+      return this[this.sublist] || []
+    }
+  },
+  methods: {
+    clearSelected() {
+      this.selected = 'all'
+      this.show = false
+      this.$nextTick(() => this.$emit('change', 'all'))
+    },
+    snakeToNormal(kebab) {
+      if (!kebab) {
+        return 'err'
+      }
+      return String(kebab)
+        .split('_')
+        .map((t) => t.slice(0, 1).toUpperCase() + t.slice(1))
+        .join(' ')
+    },
+    clickedSublistOption(item) {
+      this.clickedOption({ value: `${this.sublist}.${item}` })
+    },
+    clickedOption(option) {
+      if (option.sublist) {
+        this.sublist = option.value
+        return
+      }
+
+      var val = option.value
+      if (this.selected === val) {
+        this.show = false
+        return
+      }
+      this.selected = val
+      this.show = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+.filter-modal-wrapper {
+  max-height: calc(100% - 320px);
+}
+</style>

components/modals/Modal.vue

@@ -0,0 +1,97 @@
+<template>
+  <div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-30 opacity-0">
+    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
+
+    <div class="absolute z-40 top-4 right-4 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
+      <span class="material-icons text-4xl">close</span>
+    </div>
+    <slot name="outer" />
+    <div ref="content" style="min-width: 90%; min-height: 200px" class="relative text-white max-h-screen" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickBg">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    processing: Boolean,
+    persistent: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: [String, Number],
+      default: 500
+    },
+    height: {
+      type: [String, Number],
+      default: 'unset'
+    }
+  },
+  data() {
+    return {
+      el: null,
+      content: null
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.setShow()
+      } else {
+        this.setHide()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    modalHeight() {
+      if (typeof this.height === 'string') {
+        return this.height
+      } else {
+        return this.height + 'px'
+      }
+    },
+    modalWidth() {
+      return typeof this.width === 'string' ? this.width : this.width + 'px'
+    }
+  },
+  methods: {
+    clickBg(vm, ev) {
+      if (this.processing && this.persistent) return
+      if (vm.srcElement.classList.contains('modal-bg')) {
+        this.show = false
+      }
+    },
+    setShow() {
+      document.body.appendChild(this.el)
+      setTimeout(() => {
+        this.content.style.transform = 'scale(1)'
+      }, 10)
+      document.documentElement.classList.add('modal-open')
+    },
+    setHide() {
+      this.content.style.transform = 'scale(0)'
+      this.el.remove()
+      document.documentElement.classList.remove('modal-open')
+    }
+  },
+  mounted() {
+    this.el = this.$refs.wrapper
+    this.content = this.$refs.content
+    this.content.style.transform = 'scale(0)'
+    this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
+    this.el.style.opacity = 1
+    this.el.remove()
+  }
+}
+</script>

components/modals/OrderModal.vue

@@ -0,0 +1,96 @@
+<template>
+  <modals-modal v-model="show" width="90%">
+    <div class="w-full h-full bg-primary rounded-lg border border-white border-opacity-20">
+      <ul class="w-full rounded-lg text-base" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in items">
+          <li :key="item.value" class="text-gray-50 select-none relative py-4 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
+            </div>
+            <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+              <span class="material-icons text-4xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+            </span>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    orderBy: String,
+    descending: Boolean
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: 'Title',
+          value: 'book.title'
+        },
+        {
+          text: 'Author (First Last)',
+          value: 'book.authorFL'
+        },
+        {
+          text: 'Author (Last, First)',
+          value: 'book.authorLF'
+        },
+        {
+          text: 'Added At',
+          value: 'addedAt'
+        },
+        {
+          text: 'Duration',
+          value: 'duration'
+        },
+        {
+          text: 'Size',
+          value: 'size'
+        }
+      ]
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selected: {
+      get() {
+        return this.orderBy
+      },
+      set(val) {
+        this.$emit('update:orderBy', val)
+      }
+    },
+    selectedDesc: {
+      get() {
+        return this.descending
+      },
+      set(val) {
+        this.$emit('update:descending', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(val) {
+      if (this.selected === val) {
+        this.selectedDesc = !this.selectedDesc
+      } else {
+        this.selected = val
+      }
+      this.show = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  },
+  mounted() {}
+}
+</script>

components/ui/Btn.vue

@@ -0,0 +1,78 @@
+<template>
+  <button class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="loading" :type="type" :class="classList" @click="click">
+    <slot />
+    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+      <!-- <span class="material-icons animate-spin">refresh</span> -->
+      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+      </svg>
+    </div>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    paddingX: Number,
+    small: Boolean,
+    loading: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    classList() {
+      var list = []
+      if (this.loading) list.push('text-opacity-0')
+      list.push('text-white')
+      list.push(`bg-${this.color}`)
+      if (this.small) {
+        list.push('text-sm')
+        if (this.paddingX === undefined) list.push('px-4')
+        list.push('py-1')
+      } else {
+        if (this.paddingX === undefined) list.push('px-8')
+        list.push('py-2')
+      }
+      if (this.paddingX !== undefined) {
+        list.push(`px-${this.paddingX}`)
+      }
+      return list
+    }
+  },
+  methods: {
+    click(e) {
+      this.$emit('click', e)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+button.btn::before {
+  content: '';
+  position: absolute;
+  border-radius: 6px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.1s ease-in-out;
+}
+button.btn:hover:not(:disabled)::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+button:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>

components/ui/Menu.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full bg-fg border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="showMenu = !showMenu">
+      <span class="flex items-center">
+        <span class="block truncate">{{ label }}</span>
+      </span>
+      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span class="material-icons text-gray-100">person</span>
+      </span>
+    </button>
+
+    <transition name="menu">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-gray-600 shadow-lg max-h-56 rounded-b-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3">
+        <template v-for="item in items">
+          <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
+            <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+              <div class="flex items-center">
+                <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
+              </div>
+            </li>
+          </nuxt-link>
+          <li v-else :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: 'Menu'
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(itemValue) {
+      this.$emit('action', itemValue)
+      this.showMenu = false
+    }
+  },
+  mounted() {}
+}
+</script>

components/ui/TextInput.vue

@@ -0,0 +1,29 @@
+<template>
+  <input v-model="input" :type="type" :disabled="disabled" :placeholder="placeholder" class="px-2 py-1 bg-bg border border-gray-600 outline-none rounded-sm" :class="disabled ? 'text-gray-300' : 'text-white'" />
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    placeholder: String,
+    type: String,
+    disabled: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    input: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

components/ui/TextInputWithLabel.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="w-full">
+    <p class="px-1 pb-1 text-sm font-semibold">{{ label }}</p>
+    <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" class="w-full px-4 py-2" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    label: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    disabled: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    inputValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

layouts/blank.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="w-full min-h-screen h-full bg-bg text-white">
+    <Nuxt />
+  </div>
+</template>
+
+<script>
+export default {}
+</script>

layouts/default.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="w-full min-h-screen h-full bg-bg text-white">
+    <app-appbar />
+    <div id="content" class="overflow-hidden" :class="streaming ? 'streaming' : ''">
+      <Nuxt />
+    </div>
+    <app-stream-container ref="streamContainer" />
+  </div>
+</template>
+
+<script>
+export default {
+  middleware: 'authenticated',
+  data() {
+    return {}
+  },
+  // watch: {
+  //   routeName(newVal, oldVal) {
+  //     if (newVal === 'connect' && this.$server.connected) {
+  //       this.$router.replace('/')
+  //     }
+  //   }
+  // },
+  computed: {
+    streaming() {
+      return this.$store.state.streamAudiobook
+    },
+    routeName() {
+      return this.$route.name
+    }
+  },
+  methods: {
+    connected(isConnected) {
+      if (this.$route.name === 'connect') {
+        if (isConnected) {
+          this.$router.push('/')
+        }
+      } else {
+        if (!isConnected) {
+          this.$router.push('/connect')
+        }
+      }
+    },
+    initialStream(stream) {
+      if (this.$refs.streamContainer && this.$refs.streamContainer.audioPlayerReady) {
+        this.$refs.streamContainer.streamOpen(stream)
+      }
+    }
+  },
+  mounted() {
+    if (!this.$server) return console.error('No Server')
+
+    this.$server.on('connected', this.connected)
+    this.$server.on('initialStream', this.initialStream)
+
+    if (!this.$server.connected) {
+      this.$router.push('/connect')
+    }
+  }
+}
+</script>
+
+<style>
+#content {
+  height: calc(100vh - 64px);
+}
+#content.streaming {
+  height: calc(100vh - 204px);
+}
+</style>

middleware/authenticated.js

@@ -0,0 +1,6 @@
+export default function ({ store, redirect, route }) {
+  // If the user is not authenticated
+  if (!store.state.user.user) {
+    return redirect(`/connect?redirect=${route.path}`)
+  }
+}

nuxt.config.js

@@ -0,0 +1,59 @@
+const pkg = require('./package.json')
+
+export default {
+  ssr: false,
+
+  env: {
+    PROD: '1'
+  },
+
+  publicRuntimeConfig: {
+    version: pkg.version
+  },
+
+  head: {
+    title: 'AudioBookshelf',
+    htmlAttrs: {
+      lang: 'en'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: '' },
+      { name: 'format-detection', content: 'telephone=no' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Fira+Mono&family=Ubuntu+Mono&family=Open+Sans:wght@400;600&family=Gentium+Book+Basic' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
+    ]
+  },
+
+  css: [
+  ],
+
+  plugins: [
+    { src: '~/plugins/server.js', mode: 'client' },
+    '@/plugins/init.client.js',
+    '@/plugins/axios.js',
+    '@/plugins/my-native-audio.js'
+  ],
+
+  components: true,
+
+  buildModules: [
+    '@nuxtjs/tailwindcss',
+  ],
+
+  modules: [
+    '@nuxtjs/axios'
+  ],
+
+  axios: {},
+
+  build: {
+    babel: {
+      plugins: [['@babel/plugin-proposal-private-property-in-object', { loose: true }]],
+    },
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "audiobookshelf-app",
+  "version": "1.0.0",
+  "author": "advplyr",
+  "scripts": {
+    "dev": "nuxt --hostname localhost --port 1337",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "icons-android": "cordova-res android --skip-config --copy"
+  },
+  "dependencies": {
+    "@capacitor/android": "^3.1.2",
+    "@capacitor/cli": "^3.1.2",
+    "@capacitor/core": "^3.1.2",
+    "@capacitor/dialog": "^1.0.3",
+    "@capacitor/toast": "^1.0.2",
+    "@nuxtjs/axios": "^5.13.6",
+    "axios": "^0.21.1",
+    "cordova-plugin-file": "^6.0.2",
+    "cordova-plugin-media": "^5.0.3",
+    "core-js": "^3.15.1",
+    "hls.js": "^1.0.9",
+    "nuxt": "^2.15.7",
+    "socket.io-client": "^4.1.3"
+  },
+  "devDependencies": {
+    "@babel/core": "7.13.15",
+    "@babel/preset-env": "7.13.15",
+    "@nuxtjs/tailwindcss": "^4.2.0",
+    "postcss": "^8.3.5"
+  }
+}

pages/account.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="w-full h-full p-4">
+    <div class="w-full max-w-xs mx-auto">
+      <ui-text-input-with-label :value="serverUrl" label="Server Url" disabled class="my-4" />
+
+      <ui-text-input-with-label :value="username" label="Username" disabled class="my-4" />
+    </div>
+
+    <div class="flex items-center pt-4">
+      <div class="flex-grow" />
+      <p class="pr-2 text-sm font-book text-yellow-400">Report bugs, request features, provide feedback, and contribute on <a class="underline" href="https://github.com/advplyr/audiobookshelf" target="_blank">github</a>.</p>
+      <a href="https://github.com/advplyr/audiobookshelf" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24">
+          <path
+            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+          />
+        </svg>
+      </a>
+    </div>
+    <p class="font-mono pt-1 pb-4">v{{ $config.version }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    username() {
+      return this.user.username
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    serverUrl() {
+      return this.$server.url
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

pages/audiobook/_id/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="w-full h-full px-3 py-4 overflow-y-auto">
+    <div class="flex">
+      <div class="w-32">
+        <cards-book-cover :audiobook="audiobook" :width="128" />
+      </div>
+      <div class="flex-grow px-3">
+        <h1 class="text-lg">{{ title }}</h1>
+        <h3 v-if="series" class="font-book text-gray-300 text-lg leading-7">{{ seriesText }}</h3>
+        <p class="text-sm text-gray-400">by {{ author }}</p>
+        <p class="text-gray-300 text-sm my-1">
+          {{ durationPretty }}<span class="px-4">{{ sizePretty }}</span>
+        </p>
+        <ui-btn color="success" class="flex items-center justify-center w-full mt-2" :padding-x="4" @click="playClick">
+          <span class="material-icons">play_arrow</span>
+          <span class="px-1">Play</span>
+        </ui-btn>
+        <div class="flex my-4"></div>
+      </div>
+    </div>
+    <div class="w-full py-4">
+      <p>{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ params, redirect, app }) {
+    var audiobookId = params.id
+    var audiobook = await app.$axios.$get(`/api/audiobook/${audiobookId}`).catch((error) => {
+      console.error('Failed', error)
+      return false
+    })
+    if (!audiobook) {
+      console.error('No audiobook...', params.id)
+      return redirect('/')
+    }
+    return {
+      audiobook
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    book() {
+      return this.audiobook.book || {}
+    },
+    title() {
+      return this.book.title
+    },
+    author() {
+      return this.book.author || 'Unknown'
+    },
+    description() {
+      return this.book.description || 'No Description'
+    },
+    series() {
+      return this.book.series || null
+    },
+    volumeNumber() {
+      return this.book.volumeNumber || null
+    },
+    seriesText() {
+      if (!this.series) return ''
+      if (!this.volumeNumber) return this.series
+      return `${this.series} #${this.volumeNumber}`
+    },
+    durationPretty() {
+      return this.audiobook.durationPretty
+    },
+    duration() {
+      return this.audiobook.duration
+    },
+    sizePretty() {
+      return this.audiobook.sizePretty
+    }
+  },
+  methods: {
+    playClick() {
+      this.$store.commit('setPlayOnLoad', true)
+      this.$store.commit('setStreamAudiobook', this.audiobook)
+      this.$server.socket.emit('open_stream', this.audiobook.id)
+    }
+  },
+  mounted() {}
+}
+</script>

pages/connect.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="w-full h-full">
+    <div class="relative flex items-center justify-center min-h-screen sm:pt-0">
+      <div class="absolute top-0 left-0 w-full p-6 flex items-center flex-col justify-center z-0 short:hidden">
+        <img src="/Logo.png" class="h-20 w-20 mb-2" />
+        <h1 class="text-2xl font-book">AudioBookshelf</h1>
+      </div>
+      <p class="hidden absolute short:block top-0 left-0 p-2 font-book text-xl">AudioBookshelf</p>
+
+      <div class="max-w-sm mx-auto sm:px-6 lg:px-8 z-10">
+        <div v-show="loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg p-6 text-center">
+          <p class="text-success text-xl mb-2">Login Success!</p>
+          <p>Connecting socket..</p>
+        </div>
+        <div v-show="!loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg p-6">
+          <h2 class="text-xl leading-7 mb-4">Enter an <span class="font-book font-normal">AudioBookshelf</span><br />server address:</h2>
+          <form v-show="!showAuth" @submit.prevent="submit">
+            <ui-text-input v-model="serverUrl" :disabled="processing" placeholder="http://55.55.55.55:13378" type="url" class="w-60 sm:w-72 h-10" />
+            <ui-btn :disabled="processing" type="submit" :padding-x="3" class="h-10">Submit</ui-btn>
+          </form>
+          <template v-if="showAuth">
+            <div class="flex items-center">
+              <p class="">{{ serverUrl }}</p>
+              <div class="flex-grow" />
+              <span class="material-icons" style="font-size: 1.1rem" @click="editServerUrl">edit</span>
+            </div>
+            <div class="w-full h-px bg-gray-200 my-2" />
+            <form @submit.prevent="submitAuth" class="pt-3">
+              <ui-text-input v-model="username" :disabled="processing" placeholder="username" class="w-full my-1 text-lg" />
+              <ui-text-input v-model="password" type="password" :disabled="processing" placeholder="password" class="w-full my-1 text-lg" />
+
+              <ui-btn :disabled="processing" type="submit" class="mt-1 h-10">Submit</ui-btn>
+            </form>
+          </template>
+
+          <div v-show="error" class="w-full rounded-lg bg-red-600 bg-opacity-10 border border-error border-opacity-50 py-3 px-2 flex items-center mt-4">
+            <span class="material-icons mr-2 text-error" style="font-size: 1.1rem">warning</span>
+            <p class="text-error">{{ error }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div :class="processing ? 'opacity-100' : 'opacity-0 pointer-events-none'" class="fixed w-full h-full top-0 left-0 bg-black bg-opacity-75 flex items-center justify-center z-30 transition-opacity duration-500">
+      <div>
+        <div class="absolute top-0 left-0 w-full p-6 flex items-center flex-col justify-center z-0 short:hidden">
+          <img src="/Logo.png" class="h-20 w-20 mb-2" />
+        </div>
+        <svg class="animate-spin w-16 h-16" viewBox="0 0 24 24">
+          <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+        </svg>
+      </div>
+    </div>
+    <div class="flex items-center justify-center pt-4 fixed bottom-4 left-0 right-0">
+      <a href="https://github.com/advplyr/audiobookshelf" target="_blank" class="text-sm pr-2">Follow the project on Github</a>
+      <a href="https://github.com/advplyr/audiobookshelf" target="_blank"
+        ><svg class="w-8 h-8 text-gray-100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+          <path
+            d="M12 2.247a10 10 0 0 0-3.162 19.487c.5.088.687-.212.687-.475c0-.237-.012-1.025-.012-1.862c-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 0 0-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 0 1 1.538 1.025a2.137 2.137 0 0 0 2.912.825a2.104 2.104 0 0 1 .638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 0 1 1.025-2.688a3.594 3.594 0 0 1 .1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 0 1 5 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 0 1 .1 2.65a3.869 3.869 0 0 1 1.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 0 1 .675 1.85c0 1.338-.012 2.413-.012 2.75c0 .263.187.575.687.475A10.005 10.005 0 0 0 12 2.247z"
+            fill="currentColor"
+          /></svg
+      ></a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'blank',
+  data() {
+    return {
+      serverUrl: null,
+      processing: false,
+      showAuth: false,
+      username: null,
+      password: null,
+      error: null,
+      loggedIn: false
+    }
+  },
+  methods: {
+    async submit() {
+      this.processing = true
+      this.error = null
+      var success = await this.$server.check(this.serverUrl)
+      this.processing = false
+      if (!success) {
+        console.error('Server invalid')
+        this.error = 'Invalid Server'
+      } else {
+        this.showAuth = true
+      }
+    },
+    async submitAuth() {
+      if (!this.username) {
+        this.error = 'Invalid username'
+        return
+      }
+      this.error = null
+
+      this.processing = true
+      var response = await this.$server.login(this.serverUrl, this.username, this.password)
+      this.processing = false
+      if (response.error) {
+        console.error('Login failed')
+        this.error = response.error
+      } else {
+        console.log('Login Success!')
+        this.loggedIn = true
+      }
+    },
+    editServerUrl() {
+      this.error = null
+      this.showAuth = false
+    },
+    redirect() {
+      if (this.$route.query && this.$route.query.redirect) {
+        this.$router.replace(this.$route.query.redirect)
+      } else {
+        this.$router.replace('/')
+      }
+    },
+    socketConnected() {
+      console.log('Socket connected')
+      this.redirect()
+    },
+    async init() {
+      if (!this.$server) {
+        console.error('Invalid server not initialized')
+        return
+      }
+      if (this.$server.connected) {
+        console.warn('Server already connected')
+        return this.redirect()
+      }
+      this.$server.on('connected', this.socketConnected)
+
+      var localServerUrl = localStorage.getItem('serverUrl')
+      var localUserToken = localStorage.getItem('userToken')
+      if (localServerUrl) {
+        this.serverUrl = localServerUrl
+        if (localUserToken) {
+          this.processing = true
+          var success = await this.$server.connect(localServerUrl, localUserToken)
+
+          if (!success && !this.$server.url) {
+            this.processing = false
+            this.serverUrl = null
+            this.showAuth = false
+          } else if (!success) {
+            console.log('Server connect success')
+            this.processing = false
+          }
+          this.showAuth = true
+        } else {
+          this.submit()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

pages/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="w-full h-full">
+    <div class="w-full h-12 relative z-20">
+      <div id="toolbar" class="asolute top-0 left-0 w-full h-full bg-bg flex items-center px-2">
+        <p class="font-book">{{ numAudiobooks }} Audiobooks</p>
+        <div class="flex-grow" />
+        <span class="material-icons px-2" @click="showFilterModal = true">filter_alt</span>
+        <span class="material-icons px-2" @click="showSortModal = true">sort</span>
+      </div>
+    </div>
+    <app-bookshelf />
+
+    <modals-order-modal v-model="showSortModal" :order-by.sync="settings.orderBy" :descending.sync="settings.orderDesc" @change="updateOrder" />
+    <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.filterBy" @change="updateFilter" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showSortModal: false,
+      showFilterModal: false,
+      settings: {}
+    }
+  },
+  computed: {
+    numAudiobooks() {
+      return this.$store.getters['audiobooks/getFiltered']().length
+    }
+  },
+  methods: {
+    updateOrder() {
+      this.saveSettings()
+    },
+    updateFilter() {
+      this.saveSettings()
+    },
+    saveSettings() {
+      this.$store.commit('user/setSettings', this.settings) // Immediate update
+      this.$store.dispatch('user/updateUserSettings', this.settings)
+    },
+    init() {
+      this.settings = { ...this.$store.state.user.settings }
+    },
+    settingsUpdated(settings) {
+      for (const key in settings) {
+        this.settings[key] = settings[key]
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
+  },
+  beforeDestroy() {
+    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
+  }
+}
+</script>
+
+<style>
+#toolbar {
+  box-shadow: 0px 5px 5px #11111155;
+}
+</style>

plugins/axios.js

@@ -0,0 +1,25 @@
+export default function ({ $axios, store }) {
+  $axios.onRequest(config => {
+    console.log('[Axios] Making request to ' + config.url)
+    if (config.url.startsWith('http:') || config.url.startsWith('https:')) {
+      return
+    }
+    var bearerToken = store.getters['user/getToken']
+    if (bearerToken) {
+      config.headers.common['Authorization'] = `Bearer ${bearerToken}`
+    } else {
+      console.warn('[Axios] No Bearer Token for request')
+    }
+
+    var serverUrl = store.state.serverUrl
+    if (serverUrl) {
+      config.url = `${serverUrl}${config.url}`
+    }
+    console.log('[Axios] Request out', config.url)
+  })
+
+  $axios.onError(error => {
+    const code = parseInt(error.response && error.response.status)
+    console.error('Axios error code', code)
+  })
+}

plugins/init.client.js

@@ -0,0 +1,75 @@
+import Vue from 'vue'
+Vue.prototype.$isDev = process.env.NODE_ENV !== 'production'
+
+import { Toast } from '@capacitor/toast'
+
+Vue.prototype.$toast = (text) => {
+  if (!Toast) {
+    return console.error('No Toast Plugin')
+  }
+  Toast.show({
+    text: text
+  })
+}
+
+Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
+  if (bytes === 0) {
+    return '0 Bytes'
+  }
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+Vue.prototype.$secondsToTimestamp = (seconds) => {
+  var _seconds = seconds
+  var _minutes = Math.floor(seconds / 60)
+  _seconds -= _minutes * 60
+  var _hours = Math.floor(_minutes / 60)
+  _minutes -= _hours * 60
+  _seconds = Math.round(_seconds)
+  if (!_hours) {
+    return `${_minutes}:${_seconds.toString().padStart(2, '0')}`
+  }
+  return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}`
+}
+
+
+function isClickedOutsideEl(clickEvent, elToCheckOutside, ignoreSelectors = [], ignoreElems = []) {
+  const isDOMElement = (element) => {
+    return element instanceof Element || element instanceof HTMLDocument
+  }
+
+  const clickedEl = clickEvent.srcElement
+  const didClickOnIgnoredEl = ignoreElems.filter((el) => el).some((element) => element.contains(clickedEl) || element.isEqualNode(clickedEl))
+  const didClickOnIgnoredSelector = ignoreSelectors.length ? ignoreSelectors.map((selector) => clickedEl.closest(selector)).reduce((curr, accumulator) => curr && accumulator, true) : false
+
+  if (isDOMElement(elToCheckOutside) && !elToCheckOutside.contains(clickedEl) && !didClickOnIgnoredEl && !didClickOnIgnoredSelector) {
+    return true
+  }
+
+  return false
+}
+
+Vue.directive('click-outside', {
+  bind: function (el, binding, vnode) {
+    let vm = vnode.context;
+    let callback = binding.value;
+    if (typeof callback !== 'function') {
+      console.error('Invalid callback', binding)
+      return
+    }
+    el['__click_outside__'] = (ev) => {
+      if (isClickedOutsideEl(ev, el)) {
+        callback.call(vm, ev)
+      }
+    }
+    document.addEventListener('click', el['__click_outside__'], false)
+  },
+  unbind: function (el, binding, vnode) {
+    document.removeEventListener('click', el['__click_outside__'], false)
+    delete el['__click_outside__']
+  }
+})

plugins/my-native-audio.js

@@ -0,0 +1,4 @@
+import { registerPlugin } from '@capacitor/core';
+
+const MyNativeAudio = registerPlugin('MyNativeAudio');
+export default MyNativeAudio;

plugins/server.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Server from '../Server'
+
+Vue.prototype.$server = null
+export default function ({ store }) {
+  Vue.prototype.$server = new Server(store)
+}

readme.md

@@ -0,0 +1,7 @@
+# AudioBookshelf Mobile App
+
+AudioBookshelf is a self-hosted audiobook server for managing and playing your audiobooks.
+
+[Go to the main project repo github.com/advplyr/audiobookshelf](https://github.com/advplyr/audiobookshelf)
+
+**Currently in Beta** - **Requires an AudioBookshelf server to connect with**