Merge branch 'master' of https://github.com/advplyr/audiobookshelf-app

Add issue templates

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+labels: bug
+
+---
+
+### Steps to reproduce
+
+1.
+2.
+3.
+
+### Expected behaviour
+- Tell us what should happen
+
+### Actual behaviour
+- Tell us what happens
+
+### Environment data
+
+Audiobookshelf Version:
+
+- [ ] Android App?
+- [ ] iOS App?
+
+#### Android Issue
+Android version:
+
+Device model:
+
+Stock or customized system:
+
+#### iOS Issue
+iOS Version:
+
+iPhone model:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+labels: enhancement
+
+---
+
+### Is your feature request related to a problem? Please describe.
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+### Describe the solution you'd like
+A clear and concise description of what you want to happen.
+
+### Describe alternatives you've considered
+A clear and concise description of any alternative solutions or features you've considered.
+
+### Additional context
+Add any other context or screenshots about the feature request here.

Server.js

@@ -1,4 +1,5 @@
 import { io } from 'socket.io-client'
+import { Storage } from '@capacitor/storage'
 import axios from 'axios'
 import EventEmitter from 'events'
 
@@ -13,8 +14,11 @@ class Server extends EventEmitter {
 
     this.user = null
     this.connected = false
+    this.initialized = false
 
     this.stream = null
+
+    this.isConnectingSocket = false
   }
 
   get token() {
@@ -26,54 +30,90 @@ class Server extends EventEmitter {
   }
 
   getServerUrl(url) {
-    var urlObject = new URL(url)
-    return `${urlObject.protocol}//${urlObject.hostname}:${urlObject.port}`
+    if (!url) return null
+    try {
+      var urlObject = new URL(url)
+      return `${urlObject.protocol}//${urlObject.hostname}:${urlObject.port}`
+    } catch (error) {
+      console.error('Invalid URL', error)
+      return null
+    }
   }
 
   setUser(user) {
     this.user = user
     this.store.commit('user/setUser', user)
     if (user) {
-      this.store.commit('user/setSettings', user.settings)
-      localStorage.setItem('userToken', user.token)
+      // this.store.commit('user/setSettings', user.settings)
+      Storage.set({ key: 'token', value: user.token })
     } else {
-      localStorage.removeItem('userToken')
+      Storage.remove({ key: 'token' })
     }
   }
 
   setServerUrl(url) {
     this.url = url
-    localStorage.setItem('serverUrl', url)
     this.store.commit('setServerUrl', url)
+
+    if (url) {
+      Storage.set({ key: 'serverUrl', value: url })
+    } else {
+      Storage.remove({ key: 'serverUrl' })
+    }
   }
 
   async connect(url, token) {
+    if (this.connected) {
+      console.warn('[SOCKET] Connection already established for ' + this.url)
+      return { success: true }
+    }
+    if (!url) {
+      console.error('Invalid url to connect')
+      return {
+        error: 'Invalid URL'
+      }
+    }
+
     var serverUrl = this.getServerUrl(url)
     var res = await this.ping(serverUrl)
+
     if (!res || !res.success) {
-      this.url = null
-      return false
+      return {
+        error: res ? res.error : 'Unknown Error'
+      }
     }
     var authRes = await this.authorize(serverUrl, token)
-    if (!authRes || !authRes.user) {
-      return false
+    if (!authRes || authRes.error) {
+      return {
+        error: authRes ? authRes.error : 'Authorization Error'
+      }
     }
 
     this.setServerUrl(serverUrl)
-    console.warn('Connect setting auth user', authRes)
+
     this.setUser(authRes.user)
     this.connectSocket()
 
-    return true
+    return { success: true }
   }
 
   async check(url) {
     var serverUrl = this.getServerUrl(url)
-    var res = await this.ping(serverUrl)
-    if (!res || !res.success) {
-      return false
+    if (!serverUrl) {
+      return {
+        error: 'Invalid server url'
+      }
+    }
+    var res = await this.ping(serverUrl)
+    if (!res || res.error) {
+      return {
+        error: res ? res.error : 'Ping Failed'
+      }
+    }
+    return {
+      success: true,
+      serverUrl
     }
-    return serverUrl
   }
 
   async login(url, username, password) {
@@ -95,14 +135,27 @@ class Server extends EventEmitter {
       }
     }).catch(error => {
       console.error('[Server] Server auth failed', error)
+      var errorMsg = null
+      if (error.response) {
+        errorMsg = error.response.data || 'Unknown Error'
+      } else if (error.request) {
+        errorMsg = 'Server did not respond'
+      } else {
+        errorMsg = 'Failed to send request'
+      }
       return {
-        error: 'Request Failed'
+        error: errorMsg
       }
     })
   }
 
   logout() {
     this.setUser(null)
+    this.stream = null
+    if (this.socket) {
+      this.socket.disconnect()
+    }
+    this.emit('logout')
   }
 
   authorize(serverUrl, token) {
@@ -111,50 +164,140 @@ class Server extends EventEmitter {
       return res.data
     }).catch(error => {
       console.error('[Server] Server auth failed', error)
-      return false
+      var errorMsg = null
+      if (error.response) {
+        errorMsg = error.response.data || 'Unknown Error'
+      } else if (error.request) {
+        errorMsg = 'Server did not respond'
+      } else {
+        errorMsg = 'Failed to send request'
+      }
+      return {
+        error: errorMsg
+      }
     })
   }
 
   ping(url) {
     var pingUrl = url + '/ping'
     console.log('[Server] Check server', pingUrl)
-    return axios.get(pingUrl).then((res) => {
+    return axios.get(pingUrl, { timeout: 1000 }).then((res) => {
       return res.data
     }).catch(error => {
       console.error('Server check failed', error)
-      return false
+      var errorMsg = null
+      if (error.response) {
+        errorMsg = error.response.data || 'Unknown Error'
+      } else if (error.request) {
+        errorMsg = 'Server did not respond'
+      } else {
+        errorMsg = 'Failed to send request'
+      }
+      return {
+        success: false,
+        error: errorMsg
+      }
     })
   }
 
   connectSocket() {
-    console.log('[SERVER] Connect Socket', this.url)
+    if (this.socket && !this.connected) {
+      this.socket.connect()
+      console.log('[SOCKET] Submitting connect')
+      return
+    }
+    if (this.connected || this.socket) {
+      if (this.socket) console.error('[SOCKET] Socket already established', this.url)
+      else console.error('[SOCKET] Already connected to socket', this.url)
+      return
+    }
 
-    this.socket = io(this.url)
+    console.log('[SOCKET] Connect Socket', this.url)
+
+    const socketOptions = {
+      transports: ['websocket'],
+      upgrade: false,
+      // reconnectionAttempts: 3
+    }
+    this.socket = io(this.url, socketOptions)
     this.socket.on('connect', () => {
-      console.log('[Server] Socket Connected')
+      console.log('[SOCKET] Socket Connected ' + this.socket.id)
 
       // Authenticate socket with token
       this.socket.emit('auth', this.token)
-
       this.connected = true
       this.emit('connected', true)
+      this.store.commit('setSocketConnected', true)
     })
-    this.socket.on('disconnect', () => {
-      console.log('[Server] Socket Disconnected')
+    this.socket.on('disconnect', (reason) => {
+      console.log('[SOCKET] Socket Disconnected: ' + reason)
+      this.connected = false
+      this.emit('connected', false)
+      this.emit('initialized', false)
+      this.initialized = false
+      this.store.commit('setSocketConnected', false)
+
+      // this.socket.removeAllListeners()
+      // if (this.socket.io && this.socket.io.removeAllListeners) {
+      //   console.log(`[SOCKET] Removing ALL IO listeners`)
+      //   this.socket.io.removeAllListeners()
+      // }
     })
     this.socket.on('init', (data) => {
-      console.log('[Server] Initial socket data received', data)
+      console.log('[SOCKET] Initial socket data received', data)
       if (data.stream) {
         this.stream = data.stream
         this.store.commit('setStreamAudiobook', data.stream.audiobook)
         this.emit('initialStream', data.stream)
       }
+      if (data.serverSettings) {
+        this.store.commit('setServerSettings', data.serverSettings)
+      }
+      this.initialized = true
+      this.emit('initialized', true)
     })
+
     this.socket.on('user_updated', (user) => {
       if (this.user && user.id === this.user.id) {
         this.setUser(user)
       }
     })
+
+    this.socket.on('current_user_audiobook_update', (payload) => {
+      this.emit('currentUserAudiobookUpdate', payload)
+    })
+
+    this.socket.on('show_error_toast', (payload) => {
+      this.emit('show_error_toast', payload)
+    })
+    this.socket.on('show_success_toast', (payload) => {
+      this.emit('show_success_toast', payload)
+    })
+
+    this.socket.onAny((evt, args) => {
+      console.log(`[SOCKET] ${this.socket.id}: ${evt} ${JSON.stringify(args)}`)
+    })
+
+    this.socket.on('connect_error', (err) => {
+      console.error('[SOCKET] connection failed', err)
+      this.emit('socketConnectionFailed', err)
+    })
+
+    this.socket.io.on("reconnect_attempt", (attempt) => {
+      console.log(`[SOCKET] Reconnect Attempt ${this.socket.id}: ${attempt}`)
+    })
+
+    this.socket.io.on("reconnect_error", (err) => {
+      console.log(`[SOCKET] Reconnect Error ${this.socket.id}: ${err}`)
+    })
+
+    this.socket.io.on("reconnect_failed", () => {
+      console.log(`[SOCKET] Reconnect Failed ${this.socket.id}`)
+    })
+
+    this.socket.io.on("reconnect", () => {
+      console.log(`[SOCKET] Reconnect Success ${this.socket.id}`)
+    })
   }
 }
 

android/app/build.gradle

@@ -5,13 +5,16 @@ plugins {
 }
 
 android {
+    kotlinOptions {
+      freeCompilerArgs = ['-Xjvm-default=all']
+    }
     compileSdkVersion rootProject.ext.compileSdkVersion
     defaultConfig {
         applicationId "com.audiobookshelf.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5
-        versionName "0.2.1-beta"
+        versionCode 55
+        versionName "0.9.35-beta"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -35,16 +38,19 @@ repositories {
 }
 
 dependencies {
-    implementation fileTree(include: ['*.jar'], dir: 'libs')
-    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
-    implementation project(':capacitor-android')
+  implementation "com.anggrayudi:storage:0.13.0"
+  implementation fileTree(include: ['*.jar'], dir: 'libs')
+  implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+  implementation project(':capacitor-android')
 
   implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
 
+  implementation 'com.squareup.okhttp3:okhttp:4.9.2'
+
   testImplementation "junit:junit:$junitVersion"
-    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
-    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
-    implementation project(':capacitor-cordova-android-plugins')
+  androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+  androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+  implementation project(':capacitor-cordova-android-plugins')
 
   implementation "androidx.core:core-ktx:1.6.0"
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
@@ -75,12 +81,3 @@ dependencies {
 }
 
 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

@@ -9,8 +9,13 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-community-sqlite')
+    implementation project(':capacitor-app')
     implementation project(':capacitor-dialog')
+    implementation project(':capacitor-network')
+    implementation project(':capacitor-storage')
     implementation project(':robingenz-capacitor-app-update')
+    implementation project(':capacitor-data-storage-sqlite')
 
 }
 

android/app/src/main/AndroidManifest.xml

@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:dist="http://schemas.android.com/apk/distribution"
   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" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 
     <application
         android:allowBackup="true"
@@ -14,31 +17,49 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/AppTheme"
-        android:usesCleartextTraffic="true">
+        android:usesCleartextTraffic="true"
+        android:networkSecurityConfig="@xml/network_security_config"
+        android:requestLegacyExternalStorage="true">
+
+
+        <!--Used by Android Auto-->
+        <meta-data android:name="com.google.android.gms.car.notification.SmallIcon"
+          android:resource="@drawable/icon" />
+        <meta-data
+          android:name="com.google.android.gms.car.application"
+          android:resource="@xml/automotive_app_desc"/>
+
+        <!-- Support for Cast -->
+        <meta-data android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
+          android:value="com.audiobookshelf.app.CastOptionsProvider"/>
 
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
             android:name="com.audiobookshelf.app.MainActivity"
             android:label="@string/title_activity_main"
+            android:exported="true"
             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>
+          <intent-filter>
+              <action android:name="android.intent.action.MAIN" />
+              <category android:name="android.intent.category.LAUNCHER" />
+          </intent-filter>
 
+          <intent-filter>
+            <action android:name="android.media.action.MEDIA_PLAY_FROM_SEARCH" />
+            <category android:name="android.intent.category.DEFAULT" />
+          </intent-filter>
+
+          <!-- Register URL scheme -->
+          <intent-filter>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <data android:scheme="@string/custom_url_scheme" />
+          </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>
@@ -47,8 +68,12 @@
       </receiver>
 
       <service
+        android:exported="true"
         android:enabled="true"
         android:name=".PlayerNotificationService">
+        <intent-filter>
+          <action android:name="android.media.browse.MediaBrowserService"/>
+        </intent-filter>
       </service>
 
     </application>

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

@@ -1,10 +1,30 @@
 [
+	{
+		"pkg": "@capacitor-community/sqlite",
+		"classpath": "com.getcapacitor.community.database.sqlite.CapacitorSQLitePlugin"
+	},
+	{
+		"pkg": "@capacitor/app",
+		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
+	},
 	{
 		"pkg": "@capacitor/dialog",
 		"classpath": "com.capacitorjs.plugins.dialog.DialogPlugin"
 	},
+	{
+		"pkg": "@capacitor/network",
+		"classpath": "com.capacitorjs.plugins.network.NetworkPlugin"
+	},
+	{
+		"pkg": "@capacitor/storage",
+		"classpath": "com.capacitorjs.plugins.storage.StoragePlugin"
+	},
 	{
 		"pkg": "@robingenz/capacitor-app-update",
 		"classpath": "dev.robingenz.capacitor.appupdate.AppUpdatePlugin"
+	},
+	{
+		"pkg": "capacitor-data-storage-sqlite",
+		"classpath": "com.jeep.plugin.capacitor.capacitordatastoragesqlite.CapacitorDataStorageSqlitePlugin"
 	}
 ]

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

@@ -0,0 +1,82 @@
+package com.audiobookshelf.app
+
+import android.app.PendingIntent
+import android.graphics.Bitmap
+import android.net.Uri
+import android.support.v4.media.session.MediaControllerCompat
+import android.util.Log
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+import com.bumptech.glide.request.RequestOptions
+import com.google.android.exoplayer2.Player
+import com.google.android.exoplayer2.ui.PlayerNotificationManager
+import kotlinx.coroutines.*
+
+const val NOTIFICATION_LARGE_ICON_SIZE = 144 // px
+
+class AbMediaDescriptionAdapter constructor(private val controller: MediaControllerCompat, playerNotificationService: PlayerNotificationService) : PlayerNotificationManager.MediaDescriptionAdapter {
+  private val tag = "MediaDescriptionAdapter"
+  private val playerNotificationService:PlayerNotificationService = playerNotificationService
+
+  var currentIconUri: Uri? = null
+  var currentBitmap: Bitmap? = null
+
+  private val glideOptions = RequestOptions()
+    .fallback(R.drawable.icon)
+    .diskCacheStrategy(DiskCacheStrategy.DATA)
+  private val serviceJob = SupervisorJob()
+  private val serviceScope = CoroutineScope(Dispatchers.Main + serviceJob)
+
+  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
+      Log.d(tag, "ART $currentIconUri")
+      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.
+      try {
+        Glide.with(playerNotificationService).applyDefaultRequestOptions(glideOptions)
+          .asBitmap()
+          .load(uri)
+          .placeholder(R.drawable.icon)
+          .error(R.drawable.icon)
+          .submit(NOTIFICATION_LARGE_ICON_SIZE, NOTIFICATION_LARGE_ICON_SIZE)
+          .get()
+      } catch (e: Exception) {
+        e.printStackTrace()
+
+        Glide.with(playerNotificationService).applyDefaultRequestOptions(glideOptions)
+          .asBitmap()
+          .load(Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon))
+          .submit(NOTIFICATION_LARGE_ICON_SIZE, NOTIFICATION_LARGE_ICON_SIZE)
+          .get()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,354 @@
+package com.audiobookshelf.app
+
+import android.app.DownloadManager
+import android.content.Context
+import android.net.Uri
+import android.os.Build
+import android.os.Environment
+import android.util.Log
+import androidx.documentfile.provider.DocumentFile
+import com.anggrayudi.storage.callback.FileCallback
+import com.anggrayudi.storage.file.*
+import com.anggrayudi.storage.media.FileDescription
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import java.io.File
+
+
+@CapacitorPlugin(name = "AudioDownloader")
+class AudioDownloader : Plugin() {
+  private val tag = "AudioDownloader"
+
+  lateinit var mainActivity:MainActivity
+  lateinit var downloadManager:DownloadManager
+
+//  data class AudiobookItem(val uri: Uri, val name: String, val size: Long, val coverUrl: String) {
+//    fun toJSObject() : JSObject {
+//      var obj = JSObject()
+//      obj.put("uri", this.uri)
+//      obj.put("name", this.name)
+//      obj.put("size", this.size)
+//      obj.put("coverUrl", this.coverUrl)
+//      return obj
+//    }
+//  }
+
+  override fun load() {
+    mainActivity = (activity as MainActivity)
+    downloadManager = activity.getSystemService(Context.DOWNLOAD_SERVICE) as DownloadManager
+
+    var recieverEvent: (evt: String, id: Long) -> Unit = { evt: String, id: Long ->
+      if (evt == "complete") {
+      }
+      if (evt == "clicked") {
+        Log.d(tag, "Clicked $id back in the audiodownloader")
+      }
+    }
+    mainActivity.registerBroadcastReceiver(recieverEvent)
+
+    Log.d(tag, "Build SDK ${Build.VERSION.SDK_INT}")
+  }
+
+
+//    @PluginMethod
+//  fun load(call: PluginCall) {
+//    var audiobookUrls = call.data.getJSONArray("audiobookUrls")
+//    var len = audiobookUrls?.length()
+//    if (len == null) {
+//      len = 0
+//    }
+//    Log.d(tag, "CALLED LOAD $len")
+//    var audiobookItems:MutableList<AudiobookItem> = mutableListOf()
+//
+//    (0 until len).forEach {
+//      var jsobj = audiobookUrls.get(it) as JSONObject
+//      var audiobookUrl = jsobj.get("contentUrl").toString()
+//      var coverUrl = jsobj.get("coverUrl").toString()
+//      var storageId = ""
+//      if(jsobj.has("storageId")) jsobj.get("storageId").toString()
+//
+//      var basePath = ""
+//      if(jsobj.has("basePath")) jsobj.get("basePath").toString()
+//
+//      var coverBasePath = ""
+//      if(jsobj.has("coverBasePath")) jsobj.get("coverBasePath").toString()
+//
+//      Log.d(tag, "LOOKUP $storageId $basePath $audiobookUrl")
+//
+//      var audiobookFile: DocumentFile? = null
+//      var coverFile: DocumentFile? = null
+//
+//      // Android 9 OR Below use storage id and base path
+//      if (Build.VERSION.SDK_INT <= android.os.Build.VERSION_CODES.P) {
+//        audiobookFile = DocumentFileCompat.fromSimplePath(context, storageId, basePath)
+//        if (coverUrl != null && coverUrl != "") {
+//          coverFile = DocumentFileCompat.fromSimplePath(context, storageId, coverBasePath)
+//        }
+//      } else {
+//        // Android 10 and up manually deleting will still load the file causing crash
+//        var exists = checkUriExists(Uri.parse(audiobookUrl))
+//        if (exists) {
+//          Log.d(tag, "Audiobook exists")
+//          audiobookFile = DocumentFileCompat.fromUri(context, Uri.parse(audiobookUrl))
+//        } else {
+//          Log.e(tag, "Audiobook does not exist")
+//        }
+//
+//        var coverExists = checkUriExists(Uri.parse(coverUrl))
+//        if (coverExists) {
+//          Log.d(tag, "Cover Exists")
+//          coverFile = DocumentFileCompat.fromUri(context, Uri.parse(coverUrl))
+//        } else if (coverUrl != null && coverUrl != "") {
+//          Log.e(tag, "Cover does not exist")
+//        }
+//      }
+//
+//      if (audiobookFile == null) {
+//        Log.e(tag, "Audiobook was not found $audiobookUrl")
+//      } else {
+//        Log.d(tag, "Audiobook File Found StorageId:${audiobookFile.getStorageId(context)} | AbsolutePath:${audiobookFile.getAbsolutePath(context)} | BasePath:${audiobookFile.getBasePath(context)}")
+//
+//        var _name = audiobookFile.name
+//        if (_name == null) _name = ""
+//
+//        var size = audiobookFile.length()
+//
+//        if (audiobookFile.uri.toString() !== audiobookUrl) {
+//          Log.d(tag, "Audiobook URI ${audiobookFile.uri} is different from $audiobookUrl => using the latter")
+//        }
+//
+//        // Use existing URI's - bug happening where new uri is different from initial
+//        var abItem = AudiobookItem(Uri.parse(audiobookUrl), _name, size, coverUrl)
+//
+//        Log.d(tag, "Setting AB ITEM ${abItem.name} | ${abItem.size} | ${abItem.uri} | ${abItem.coverUrl}")
+//
+//        audiobookItems.add(abItem)
+//      }
+//    }
+//
+//    Log.d(tag, "Load Finished ${audiobookItems.size} found")
+//
+//    var audiobookObjs:List<JSObject> = audiobookItems.map{ it.toJSObject() }
+//    var mediaItemNoticePayload = JSObject()
+//    mediaItemNoticePayload.put("items", audiobookObjs)
+//    notifyListeners("onMediaLoaded", mediaItemNoticePayload)
+//  }
+
+  @PluginMethod
+  fun download(call: PluginCall) {
+    var audiobookId = call.data.getString("audiobookId", "audiobook").toString()
+    var url = call.data.getString("downloadUrl", "unknown").toString()
+    var coverDownloadUrl = call.data.getString("coverDownloadUrl", "").toString()
+    var title = call.data.getString("title", "Audiobook").toString()
+    var filename = call.data.getString("filename", "audiobook.mp3").toString()
+    var coverFilename = call.data.getString("coverFilename", "cover.png").toString()
+    var downloadFolderUrl = call.data.getString("downloadFolderUrl", "").toString()
+    var folder = DocumentFileCompat.fromUri(context, Uri.parse(downloadFolderUrl))!!
+    Log.d(tag, "Called download: $url | Folder: ${folder.name} | $downloadFolderUrl")
+
+    var dlfilename = audiobookId + "." + File(filename).extension
+    var coverdlfilename = audiobookId + "." + File(coverFilename).extension
+    Log.d(tag, "DL Filename $dlfilename | Cover DL Filename $coverdlfilename")
+
+    var canWriteToFolder = folder.canWrite()
+    if (!canWriteToFolder) {
+      Log.e(tag, "Error Cannot Write to Folder ${folder.baseName}")
+      val ret = JSObject()
+      ret.put("error", "Cannot write to ${folder.baseName}")
+      call.resolve(ret)
+      return
+    }
+
+    var dlRequest = DownloadManager.Request(Uri.parse(url))
+    dlRequest.setTitle("Ab: $title")
+    dlRequest.setDescription("Downloading to ${folder.name}")
+    dlRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED)
+    dlRequest.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, dlfilename)
+
+    var audiobookDownloadId = downloadManager.enqueue(dlRequest)
+    var coverDownloadId:Long? = null
+
+    if (coverDownloadUrl != "") {
+      var coverDlRequest = DownloadManager.Request(Uri.parse(coverDownloadUrl))
+      coverDlRequest.setTitle("Cover: $title")
+      coverDlRequest.setDescription("Downloading to ${folder.name}")
+      coverDlRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_ONLY_COMPLETION)
+      coverDlRequest.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, coverdlfilename)
+      coverDownloadId = downloadManager.enqueue(coverDlRequest)
+    }
+
+    var progressReceiver : (id:Long, prog: Long) -> Unit = { id:Long, prog: Long ->
+      if (id == audiobookDownloadId) {
+        var jsobj = JSObject()
+        jsobj.put("audiobookId", audiobookId)
+        jsobj.put("progress", prog)
+        notifyListeners("onDownloadProgress", jsobj)
+      }
+    }
+
+    var coverDocFile:DocumentFile? = null
+
+    var doneReceiver : (id:Long, success: Boolean) -> Unit = { id:Long, success: Boolean ->
+      Log.d(tag, "RECEIVER DONE $id, SUCCES? $success")
+      var docfile:DocumentFile? = null
+
+      // Download was complete, now find downloaded file
+      if (id == coverDownloadId) {
+        docfile = DocumentFileCompat.fromPublicFolder(context, PublicDirectory.DOWNLOADS, coverdlfilename)
+        Log.d(tag, "Move Cover File ${docfile?.name}")
+
+        // For unknown reason, Android 10 test was using the title set in "setTitle" for the dl manager as the filename
+        //  check if this was the case
+        if (docfile?.name == null) {
+          docfile = DocumentFileCompat.fromPublicFolder(context, PublicDirectory.DOWNLOADS, "Cover: $title")
+          Log.d(tag, "Cover File name attempt 2 ${docfile?.name}")
+        }
+      } else if (id == audiobookDownloadId) {
+        docfile = DocumentFileCompat.fromPublicFolder(context, PublicDirectory.DOWNLOADS, dlfilename)
+        Log.d(tag, "Move Audiobook File ${docfile?.name}")
+
+        if (docfile?.name == null) {
+          docfile = DocumentFileCompat.fromPublicFolder(context, PublicDirectory.DOWNLOADS, "Ab: $title")
+          Log.d(tag, "File name attempt 2 ${docfile?.name}")
+        }
+      }
+
+      // Callback for moving the downloaded file
+      var callback = object : FileCallback() {
+        override fun onPrepare() {
+          Log.d(tag, "PREPARING MOVE FILE")
+        }
+        override fun onFailed(errorCode:ErrorCode) {
+          Log.e(tag, "FAILED MOVE FILE $errorCode")
+
+          docfile?.delete()
+          coverDocFile?.delete()
+
+          if (id == audiobookDownloadId) {
+            var jsobj = JSObject()
+            jsobj.put("audiobookId", audiobookId)
+            jsobj.put("error", "Move failed")
+            notifyListeners("onDownloadFailed", jsobj)
+          }
+        }
+        override fun onCompleted(result:Any) {
+          var resultDocFile = result as DocumentFile
+          var simplePath = resultDocFile.getSimplePath(context)
+          var storageId = resultDocFile.getStorageId(context)
+          var size = resultDocFile.length()
+          Log.d(tag, "Finished Moving File, NAME: ${resultDocFile.name} | URI:${resultDocFile.uri} | AbsolutePath:${resultDocFile.getAbsolutePath(context)} | $storageId | SimplePath: $simplePath")
+
+          var abFolder = folder.findFolder(title)
+          var jsobj = JSObject()
+          jsobj.put("audiobookId", audiobookId)
+          jsobj.put("downloadId", id)
+          jsobj.put("storageId", storageId)
+          jsobj.put("storageType", resultDocFile.getStorageType(context))
+          jsobj.put("folderUrl", abFolder?.uri)
+          jsobj.put("folderName", abFolder?.name)
+          jsobj.put("downloadFolderUrl", downloadFolderUrl)
+          jsobj.put("contentUrl", resultDocFile.uri)
+          jsobj.put("basePath", resultDocFile.getBasePath(context))
+          jsobj.put("filename", filename)
+          jsobj.put("simplePath", simplePath)
+          jsobj.put("size", size)
+
+          if (resultDocFile.name == filename) {
+            Log.d(tag, "Audiobook Finishing Moving")
+          } else if (resultDocFile.name == coverFilename) {
+            coverDocFile = docfile
+            Log.d(tag, "Audiobook Cover Finished Moving")
+            jsobj.put("isCover", true)
+          }
+          notifyListeners("onDownloadComplete", jsobj)
+        }
+      }
+
+      // After file is downloaded, move the files into an audiobook directory inside the user selected folder
+        if (id == coverDownloadId) {
+          docfile?.moveFileTo(context, folder, FileDescription(coverFilename, title, MimeType.IMAGE), callback)
+        } else if (id == audiobookDownloadId) {
+          docfile?.moveFileTo(context, folder, FileDescription(filename, title, MimeType.AUDIO), callback)
+        }
+    }
+
+    var progressUpdater = DownloadProgressUpdater(downloadManager, audiobookDownloadId, progressReceiver, doneReceiver)
+    progressUpdater.run()
+    if (coverDownloadId != null) {
+      var coverProgressUpdater = DownloadProgressUpdater(downloadManager, coverDownloadId, progressReceiver, doneReceiver)
+      coverProgressUpdater.run()
+    }
+
+    val ret = JSObject()
+    ret.put("audiobookDownloadId", audiobookDownloadId)
+    ret.put("coverDownloadId", coverDownloadId)
+    call.resolve(ret)
+  }
+
+  internal class DownloadProgressUpdater(private val manager: DownloadManager, private val downloadId: Long, private var receiver: (Long, Long) -> Unit, private var doneReceiver: (Long, Boolean) -> Unit) : Thread() {
+    private val query: DownloadManager.Query = DownloadManager.Query()
+    private var totalBytes: Int = 0
+    private var TAG = "DownloadProgressUpdater"
+
+    init {
+      query.setFilterById(this.downloadId)
+    }
+
+    override fun run() {
+      Log.d(TAG, "RUN FOR ID $downloadId")
+      var keepRunning = true
+      var increment = 0
+      while (keepRunning) {
+        Thread.sleep(500)
+        increment++
+
+        if (increment % 4 == 0) {
+          Log.d(TAG, "Loop $increment : $downloadId")
+        }
+
+        manager.query(query).use {
+          if (it.moveToFirst()) {
+            //get total bytes of the file
+            if (totalBytes <= 0) {
+              totalBytes = it.getInt(it.getColumnIndex(DownloadManager.COLUMN_TOTAL_SIZE_BYTES))
+              if (totalBytes <= 0) {
+                Log.e(TAG, "Download Is 0 Bytes $downloadId")
+                doneReceiver(downloadId, false)
+                keepRunning = false
+                this.interrupt()
+                return
+              }
+            }
+
+            val downloadStatus = it.getInt(it.getColumnIndex(DownloadManager.COLUMN_STATUS))
+            val bytesDownloadedSoFar = it.getInt(it.getColumnIndex(DownloadManager.COLUMN_BYTES_DOWNLOADED_SO_FAR))
+
+            if (increment % 4 == 0) {
+              Log.d(TAG, "BYTES $increment : $downloadId : $bytesDownloadedSoFar : TOTAL: $totalBytes")
+            }
+
+            if (downloadStatus == DownloadManager.STATUS_SUCCESSFUL || downloadStatus == DownloadManager.STATUS_FAILED) {
+              if (downloadStatus == DownloadManager.STATUS_SUCCESSFUL) {
+                doneReceiver(downloadId, true)
+              } else {
+                doneReceiver(downloadId, false)
+              }
+              keepRunning = false
+              this.interrupt()
+            } else {
+              //update progress
+              val percentProgress = ((bytesDownloadedSoFar * 100L) / totalBytes)
+              receiver(downloadId, percentProgress)
+            }
+          } else {
+            Log.e(TAG, "NOT FOUND IN QUERY")
+            keepRunning = false
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,40 +1,102 @@
 package com.audiobookshelf.app
 
 import android.net.Uri
+import android.os.Bundle
+import android.support.v4.media.MediaBrowserCompat
+import android.support.v4.media.MediaDescriptionCompat
+import android.support.v4.media.MediaMetadataCompat
 import com.getcapacitor.JSObject
 
 class Audiobook {
-  var id:String = "audiobook"
+  var id:String
+  var ino:String
+  var libraryId:String
+  var folderId:String
+  var book:Book
+  var duration:Float
+  var size:Long
+  var numTracks:Int
+  var isMissing:Boolean
+  var isInvalid:Boolean
+  var path:String
+
+  var isDownloaded:Boolean = false
+  var downloadFolderUrl:String = ""
+  var folderUrl:String = ""
+  var contentUrl:String = ""
+  var filename:String = ""
+  var localCoverUrl:String = ""
+  var localCover:String = ""
+
+  var serverUrl:String = ""
   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 playbackSpeed:Float = 1f
-  var duration:Long = 0
 
-  var hasPlayerLoaded:Boolean = false
+  constructor(jsobj: JSObject, serverUrl:String, token:String) {
+    this.serverUrl = serverUrl
+    this.token = token
 
-  val playlistUri:Uri
-  val coverUri:Uri
+    id = jsobj.getString("id", "").toString()
+    ino = jsobj.getString("ino", "").toString()
+    libraryId = jsobj.getString("libraryId", "").toString()
+    folderId = jsobj.getString("folderId", "").toString()
 
-  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()
-    playbackSpeed = jsondata.getDouble("playbackSpeed")!!.toFloat()
-    duration = jsondata.getString("duration", "0")!!.toLong()
+    var bookJsObj = jsobj.getJSObject("book")
+    book = bookJsObj?.let { Book(it) }!!
 
-    playlistUri = Uri.parse(playlistUrl)
-    coverUri = Uri.parse(cover)
+    duration = jsobj.getDouble("duration").toFloat()
+    size = jsobj.getLong("size")
+    numTracks = jsobj.getInteger("numTracks")!!
+    isMissing = jsobj.getBoolean("isMissing")
+    isInvalid = jsobj.getBoolean("isInvalid")
+    path = jsobj.getString("path", "").toString()
+
+    isDownloaded = jsobj.getBoolean("isDownloaded")
+    if (isDownloaded) {
+      downloadFolderUrl = jsobj.getString("downloadFolderUrl", "").toString()
+      folderUrl = jsobj.getString("folderUrl", "").toString()
+      contentUrl = jsobj.getString("contentUrl", "").toString()
+      filename = jsobj.getString("filename", "").toString()
+      localCover = jsobj.getString("localCover", "").toString()
+      localCoverUrl = jsobj.getString("localCoverUrl", "").toString()
+    }
+  }
+
+  fun getCover():Uri {
+    if (isDownloaded) {
+//      return Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon)
+      return Uri.parse(localCoverUrl)
+    }
+    if (book.cover == "" || serverUrl == "" || token == "") return Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon)
+    return Uri.parse("$serverUrl${book.cover}?token=$token&ts=${book.lastUpdate}")
+  }
+
+  fun getDurationLong():Long {
+    return duration.toLong() * 1000L
+  }
+
+  fun toMediaMetadata():MediaMetadataCompat {
+    return MediaMetadataCompat.Builder().apply {
+      putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, id)
+      putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_TITLE, book.title)
+      putString(MediaMetadataCompat.METADATA_KEY_TITLE, book.title)
+      putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_SUBTITLE, book.authorFL)
+      putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_ICON_URI, getCover().toString())
+      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, getCover().toString())
+      putString(MediaMetadataCompat.METADATA_KEY_ART_URI, getCover().toString())
+      putString(MediaMetadataCompat.METADATA_KEY_AUTHOR, book.authorFL)
+
+//      val extras = Bundle()
+//      if (isDownloaded) {
+//        extras.putLong(
+//          MediaDescriptionCompat.EXTRA_DOWNLOAD_STATUS,
+//          MediaDescriptionCompat.STATUS_DOWNLOADED)
+//      }
+//            extras.putInt(
+//              MediaConstants.DESCRIPTION_EXTRAS_KEY_COMPLETION_STATUS,
+//              MediaConstants.DESCRIPTION_EXTRAS_VALUE_COMPLETION_STATUS_PARTIALLY_PLAYED)
+
+//      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, RESOURCE_ROOT_URI +
+//        context.resources.getResourceEntryName(R.drawable.notification_bg_low_normal))
+    }.build()
   }
 }

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

@@ -0,0 +1,369 @@
+package com.audiobookshelf.app
+
+import android.app.Activity
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.support.v4.media.MediaMetadataCompat
+
+import android.util.Log
+import com.getcapacitor.JSArray
+import com.getcapacitor.JSObject
+import com.jeep.plugin.capacitor.capacitordatastoragesqlite.CapacitorDataStorageSqlite
+import okhttp3.*
+import org.json.JSONArray
+import java.io.IOException
+
+class AudiobookManager {
+  var tag = "AudiobookManager"
+
+  interface OnStreamData {
+    fun onStreamReady(asd:AudiobookStreamData)
+  }
+
+  var hasLoaded = false
+  var isLoading = false
+  var ctx: Context
+  var serverUrl = ""
+  var token = ""
+  private var client:OkHttpClient
+
+  var localMediaManager:LocalMediaManager
+
+  var audiobooks:MutableList<Audiobook> = mutableListOf()
+  var audiobooksInProgress:MutableList<Audiobook> = mutableListOf()
+
+  constructor(_ctx:Context, _client:OkHttpClient) {
+    ctx = _ctx
+    client = _client
+
+    localMediaManager = LocalMediaManager(ctx)
+  }
+
+  fun init() {
+   var sharedPreferences = ctx.getSharedPreferences("CapacitorStorage", Activity.MODE_PRIVATE)
+    serverUrl = sharedPreferences.getString("serverUrl", "").toString()
+    Log.d(tag, "SHARED PREF SERVERURL $serverUrl")
+    token = sharedPreferences.getString("token", "").toString()
+    Log.d(tag, "SHARED PREF TOKEN $token")
+  }
+
+  fun loadCategories(cb: (() -> Unit)) {
+    Log.d(tag, "LOAD Categories $serverUrl | $token")
+    var url = "$serverUrl/api/libraries/main/categories"
+    val request = Request.Builder()
+      .url(url).addHeader("Authorization", "Bearer $token")
+      .build()
+
+    client.newCall(request).enqueue(object : Callback {
+      override fun onFailure(call: Call, e: IOException) {
+        Log.d(tag, "FAILURE TO CONNECT")
+        e.printStackTrace()
+        cb()
+      }
+
+      override fun onResponse(call: Call, response: Response) {
+        response.use {
+          if (!response.isSuccessful) throw IOException("Unexpected code $response")
+
+          var bodyString = response.body!!.string()
+          var results = JSONArray(bodyString)
+//          var results = resJson.getJSONArray("results")
+
+          var totalShelves = results.length() - 1
+          Log.d(tag, "Got categories $totalShelves")
+          for (i in 0..totalShelves) {
+            var shelfobj = results.get(i)
+            var jsobj = JSObject(shelfobj.toString())
+            var shelfId = jsobj.getString("id", "")
+            Log.d(tag, "Category shelf id $shelfId")
+            if (shelfId == "continue-reading") {
+              var entities = jsobj.getJSONArray("entities")
+              var totalEntities = entities.length() - 1
+              Log.d(tag, "Shelf total entities $totalEntities")
+              for (y in 0..totalEntities) {
+                var abobj = entities.get(y)
+                Log.d(tag, "Shelf category ab id $y = ${abobj.toString()}")
+                var abjsobj = JSObject(abobj.toString())
+                abjsobj.put("isDownloaded", false)
+                var audiobook = Audiobook(abjsobj, serverUrl, token)
+                if (audiobook.isMissing || audiobook.isInvalid || audiobook.numTracks <= 0) {
+                  Log.d(tag, "Not an audiobook or invalid/missing")
+                } else {
+                  var audiobookExists = audiobooksInProgress.find { it.id == audiobook.id }
+                  if (audiobookExists == null) {
+                    audiobooksInProgress.add(audiobook)
+                  }
+                }
+              }
+            }
+          }
+          Log.d(tag, "${audiobooksInProgress.size} Audiobooks In Progress Loaded")
+          cb()
+        }
+      }
+    })
+  }
+
+  fun loadAudiobooks(cb: (() -> Unit)) {
+    Log.d(tag, "Load Audiobooks: $serverUrl | $token")
+    if (serverUrl == "" || token == "") {
+      Log.d(tag, "Load Audiobooks: No Server or Token set")
+      cb()
+      return
+    } else if (!serverUrl.startsWith("http")) {
+      Log.e(tag, "Load Audiobooks: Invalid server url $serverUrl")
+      cb()
+      return
+    }
+
+    // First load currently reading
+    loadCategories() {
+      // Then load all
+      var url = "$serverUrl/api/libraries/main/books/all?sort=book.title"
+      val request = Request.Builder()
+        .url(url).addHeader("Authorization", "Bearer $token")
+        .build()
+
+      client.newCall(request).enqueue(object : Callback {
+        override fun onFailure(call: Call, e: IOException) {
+          Log.d(tag, "Load Audiobooks: FAILURE TO CONNECT")
+          e.printStackTrace()
+          cb()
+        }
+
+        override fun onResponse(call: Call, response: Response) {
+          response.use {
+            if (!response.isSuccessful) throw IOException("Unexpected code $response")
+
+            var bodyString = response.body!!.string()
+            var resJson = JSObject(bodyString)
+            var results = resJson.getJSONArray("results")
+
+            var totalBooks = results.length() - 1
+            for (i in 0..totalBooks) {
+              var abobj = results.get(i)
+              var jsobj = JSObject(abobj.toString())
+
+              jsobj.put("isDownloaded", false)
+              var audiobook = Audiobook(jsobj, serverUrl, token)
+
+              if (audiobook.isMissing || audiobook.isInvalid) {
+                Log.d(tag, "Audiobook ${audiobook.book.title} is missing or invalid")
+              } else if (audiobook.numTracks <= 0) {
+                Log.d(tag, "Audiobook ${audiobook.book.title} has audio tracks")
+              } else {
+                var audiobookExists = audiobooks.find { it.id == audiobook.id }
+                if (audiobookExists == null) {
+                  audiobooks.add(audiobook)
+                } else {
+                  Log.d(tag, "Audiobook already there from downloaded")
+                }
+              }
+            }
+            Log.d(tag, "${audiobooks.size} Audiobooks Loaded")
+            cb()
+          }
+        }
+      })
+    }
+  }
+
+  fun load() {
+    isLoading = true
+    hasLoaded = true
+
+    localMediaManager.loadLocalAudio()
+
+    // Load downloads from sql db
+    var db = CapacitorDataStorageSqlite(ctx)
+    db.openStore("storage", "downloads", false, "no-encryption", 1)
+    var keyvalues = db.keysvalues()
+    keyvalues.forEach {
+      Log.d(tag, "keyvalue ${it.getString("key")} | ${it.getString("value")}")
+
+      var dlobj = JSObject(it.getString("value"))
+      if (dlobj.has("audiobook")) {
+        var abobj = dlobj.getJSObject("audiobook")!!
+        abobj.put("isDownloaded", true)
+        abobj.put("contentUrl", dlobj.getString("contentUrl", "").toString())
+        abobj.put("filename", dlobj.getString("filename", "").toString())
+        abobj.put("folderUrl", dlobj.getString("folderUrl", "").toString())
+        abobj.put("downloadFolderUrl", dlobj.getString("downloadFolderUrl", "").toString())
+        abobj.put("localCoverUrl", dlobj.getString("coverUrl", "").toString())
+        abobj.put("localCover", dlobj.getString("cover", "").toString())
+
+        var audiobook = Audiobook(abobj, serverUrl, token)
+        audiobooks.add(audiobook)
+      }
+    }
+  }
+
+  fun openStream(audiobook:Audiobook, streamListener:OnStreamData) {
+    var url = "$serverUrl/api/books/${audiobook.id}/stream"
+    val request = Request.Builder()
+      .url(url).addHeader("Authorization", "Bearer $token")
+      .build()
+
+    client.newCall(request).enqueue(object : Callback {
+      override fun onFailure(call: Call, e: IOException) {
+        e.printStackTrace()
+      }
+
+      override fun onResponse(call: Call, response: Response) {
+        response.use {
+          if (!response.isSuccessful) throw IOException("Unexpected code $response")
+
+          var bodyString = response.body!!.string()
+          var stream = JSObject(bodyString)
+          var streamId = stream.getString("streamId", "").toString()
+          var startTime = stream.getDouble("startTime")
+          var streamUrl = stream.getString("streamUrl", "").toString()
+
+          var startTimeLong = (startTime * 1000).toLong()
+
+          var abStreamDataObj = JSObject()
+          abStreamDataObj.put("id", streamId)
+          abStreamDataObj.put("audiobookId", audiobook.id)
+          abStreamDataObj.put("playlistUrl", "$serverUrl$streamUrl")
+          abStreamDataObj.put("title", audiobook.book.title)
+          abStreamDataObj.put("author", audiobook.book.authorFL)
+          abStreamDataObj.put("token", token)
+          abStreamDataObj.put("cover", audiobook.getCover())
+          abStreamDataObj.put("duration", audiobook.getDurationLong())
+          abStreamDataObj.put("startTime", startTimeLong)
+          abStreamDataObj.put("playbackSpeed", 1)
+          abStreamDataObj.put("playWhenReady", true)
+          abStreamDataObj.put("isLocal", false)
+
+          var audiobookStreamData = AudiobookStreamData(abStreamDataObj)
+
+          Handler(Looper.getMainLooper()).post() {
+            Log.d(tag, "Stream Ready on Main Looper")
+            streamListener.onStreamReady(audiobookStreamData)
+          }
+
+          Log.d(tag, "Init Player Stream")
+        }
+      }
+    })
+  }
+
+  fun initDownloadPlay(audiobook:Audiobook):AudiobookStreamData {
+    var abStreamDataObj = JSObject()
+    abStreamDataObj.put("id", "download")
+    abStreamDataObj.put("audiobookId", audiobook.id)
+    abStreamDataObj.put("contentUrl", audiobook.contentUrl)
+    abStreamDataObj.put("title", audiobook.book.title)
+    abStreamDataObj.put("author", audiobook.book.authorFL)
+    abStreamDataObj.put("token", null)
+    abStreamDataObj.put("cover", audiobook.getCover())
+    abStreamDataObj.put("duration", audiobook.getDurationLong())
+    abStreamDataObj.put("startTime", 0)
+    abStreamDataObj.put("playbackSpeed", 1)
+    abStreamDataObj.put("playWhenReady", true)
+    abStreamDataObj.put("isLocal", true)
+
+    var audiobookStreamData = AudiobookStreamData(abStreamDataObj)
+    return audiobookStreamData
+  }
+
+  fun initLocalPlay(local: LocalMediaManager.LocalAudio):AudiobookStreamData {
+    var abStreamDataObj = JSObject()
+    abStreamDataObj.put("id", "local")
+    abStreamDataObj.put("audiobookId", local.id)
+    abStreamDataObj.put("contentUrl", local.uri.toString())
+    abStreamDataObj.put("title", local.name)
+    abStreamDataObj.put("author", "")
+    abStreamDataObj.put("token", null)
+    abStreamDataObj.put("cover", local.coverUri)
+    abStreamDataObj.put("duration", local.duration)
+    abStreamDataObj.put("startTime", 0)
+    abStreamDataObj.put("playbackSpeed", 1)
+    abStreamDataObj.put("playWhenReady", true)
+    abStreamDataObj.put("isLocal", true)
+
+    var audiobookStreamData = AudiobookStreamData(abStreamDataObj)
+    return audiobookStreamData
+  }
+
+  private fun levenshtein(lhs : CharSequence, rhs : CharSequence) : Int {
+    val lhsLength = lhs.length + 1
+    val rhsLength = rhs.length + 1
+
+    var cost = Array(lhsLength) { it }
+    var newCost = Array(lhsLength) { 0 }
+
+    for (i in 1..rhsLength-1) {
+      newCost[0] = i
+
+      for (j in 1..lhsLength-1) {
+        val match = if(lhs[j - 1] == rhs[i - 1]) 0 else 1
+
+        val costReplace = cost[j - 1] + match
+        val costInsert = cost[j] + 1
+        val costDelete = newCost[j - 1] + 1
+
+        newCost[j] = Math.min(Math.min(costInsert, costDelete), costReplace)
+      }
+
+      val swap = cost
+      cost = newCost
+      newCost = swap
+    }
+
+    return cost[lhsLength - 1]
+  }
+
+  fun searchForAudiobook(query:String):Audiobook? {
+    var closestDistance = 99
+    var closestMatch:Audiobook? = null
+    audiobooks.forEach {
+      var dist = levenshtein(it.book.title, query)
+      Log.d(tag, "LEVENSHTEIN $dist")
+      if (dist < closestDistance) {
+        closestDistance = dist
+        closestMatch = it
+      }
+    }
+    if (closestMatch != null) {
+      Log.d(tag, "Closest Search is ${closestMatch?.book?.title} with distance $closestDistance")
+      if (closestDistance < 2) {
+        return closestMatch
+      }
+      return null
+    }
+    return null
+  }
+
+  fun getFirstAudiobook():Audiobook? {
+    if (audiobooks.isEmpty()) return null
+    return audiobooks[0]
+  }
+
+  fun getFirstLocal(): LocalMediaManager.LocalAudio? {
+    if (localMediaManager.localAudioFiles.isEmpty()) return null
+    return localMediaManager.localAudioFiles[0]
+  }
+
+  // Used for media browser loadChildren, fallback to using the samples if no audiobooks are there
+  fun getAudiobooksMediaMetadata() : List<MediaMetadataCompat> {
+    var mediaMetadata:MutableList<MediaMetadataCompat> = mutableListOf()
+    if (audiobooks.isEmpty()) {
+      localMediaManager.localAudioFiles.forEach { mediaMetadata.add(it.toMediaMetadata()) }
+    } else {
+      audiobooks.forEach { mediaMetadata.add(it.toMediaMetadata()) }
+    }
+    return mediaMetadata
+  }
+  // Used for media browser loadChildren, fallback to using the samples if no audiobooks are there
+  fun getDownloadedAudiobooksMediaMetadata() : List<MediaMetadataCompat> {
+    var mediaMetadata:MutableList<MediaMetadataCompat> = mutableListOf()
+    if (audiobooks.isEmpty()) {
+      localMediaManager.localAudioFiles.forEach { mediaMetadata.add(it.toMediaMetadata()) }
+    } else {
+      audiobooks.forEach { if (it.isDownloaded) { mediaMetadata.add(it.toMediaMetadata()) } }
+    }
+    return mediaMetadata
+  }
+}

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

@@ -0,0 +1,142 @@
+package com.audiobookshelf.app
+
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import com.getcapacitor.JSObject
+import okhttp3.*
+import okhttp3.MediaType.Companion.toMediaType
+import okhttp3.RequestBody.Companion.toRequestBody
+import java.io.IOException
+import java.util.*
+import kotlin.concurrent.schedule
+
+/*
+ * Normal progress sync is handled in webview, but when using android auto webview may not be open.
+ *   If webview is not open sync progress every 5s. Webview can be closed at any time so interval is always set.
+ */
+class AudiobookProgressSyncer constructor(playerNotificationService:PlayerNotificationService, client: OkHttpClient) {
+  private val tag = "AudiobookProgressSync"
+  private val playerNotificationService:PlayerNotificationService = playerNotificationService
+  private val client:OkHttpClient = client
+
+  private var listeningTimerTask: TimerTask? = null
+  var listeningTimerRunning:Boolean = false
+
+  private var webviewOpenOnStart:Boolean = false
+  private var listeningBookTitle:String? = ""
+  private var listeningBookIsLocal:Boolean = false
+  private var listeningBookId:String? = ""
+  private var listeningStreamId:String? = ""
+
+  private var lastPlaybackTime:Long = 0
+  private var lastUpdateTime:Long = 0
+
+  fun start() {
+    if (listeningTimerRunning) {
+      Log.d(tag, "start: Timer already running for $listeningBookTitle")
+      if (playerNotificationService.getCurrentBookTitle() != listeningBookTitle) {
+        Log.d(tag, "start: Changed audiobook stream - resetting timer")
+        listeningTimerTask?.cancel()
+      }
+    }
+    listeningTimerRunning = true
+
+    webviewOpenOnStart = playerNotificationService.getIsWebviewOpen()
+    listeningBookTitle = playerNotificationService.getCurrentBookTitle()
+    listeningBookIsLocal = playerNotificationService.getCurrentBookIsLocal()
+    listeningBookId = playerNotificationService.getCurrentBookId()
+    listeningStreamId = playerNotificationService.getCurrentStreamId()
+
+    lastPlaybackTime = playerNotificationService.getCurrentTime()
+    lastUpdateTime = System.currentTimeMillis() / 1000L
+
+    listeningTimerTask = Timer("ListeningTimer", false).schedule(0L, 5000L) {
+      Handler(Looper.getMainLooper()).post() {
+        // Webview was closed while android auto is open - switch to native sync
+        if (!playerNotificationService.getIsWebviewOpen() && webviewOpenOnStart) {
+          Log.d(tag, "Listening Timer: webview closed Switching to native sync tracking")
+          webviewOpenOnStart = false
+          lastUpdateTime = System.currentTimeMillis() / 1000L
+        }
+        if (!webviewOpenOnStart && playerNotificationService.currentPlayer.isPlaying) {
+          sync()
+        }
+      }
+    }
+  }
+
+  fun stop() {
+    if (!listeningTimerRunning) return
+    Log.d(tag, "stop: Stopping listening for $listeningBookTitle")
+
+    reset()
+    sync()
+  }
+
+  fun reset() {
+    listeningTimerTask?.cancel()
+    listeningTimerTask = null
+    listeningTimerRunning = false
+    listeningBookTitle = ""
+    listeningBookId = ""
+    listeningBookIsLocal = false
+    listeningStreamId = ""
+  }
+
+  fun sync() {
+    var currTime = System.currentTimeMillis() / 1000L
+    var elapsed = currTime - lastUpdateTime
+    lastUpdateTime = currTime
+
+    if (!listeningBookIsLocal) {
+      Log.d(tag, "ListeningTimer: Sending sync data to server: elapsed $elapsed | $listeningStreamId | $listeningBookId")
+
+      // Send sync data only for streaming books
+      var syncData: JSObject = JSObject()
+      syncData.put("timeListened", elapsed)
+      syncData.put("currentTime", playerNotificationService.getCurrentTime())
+      syncData.put("streamId", listeningStreamId)
+      syncData.put("audiobookId", listeningBookId)
+      sendStreamSyncData(syncData) {
+        Log.d(tag, "Stream sync done")
+      }
+    } else if (listeningStreamId == "download") {
+      // TODO: Save downloaded audiobook progress & send to server if connected
+      Log.d(tag, "ListeningTimer: Is listening download")
+    }
+  }
+
+  fun sendStreamSyncData(payload:JSObject, cb: (() -> Unit)) {
+    var serverUrl = playerNotificationService.getServerUrl()
+    var token = playerNotificationService.getUserToken()
+
+    if (serverUrl == "" || token == "") {
+      return
+    }
+
+    Log.d(tag, "Sync Stream $serverUrl | $token")
+    var url = "$serverUrl/api/syncStream"
+
+    val mediaType = "application/json; charset=utf-8".toMediaType()
+    val requestBody = payload.toString().toRequestBody(mediaType)
+    val request = Request.Builder().post(requestBody)
+      .url(url).addHeader("Authorization", "Bearer $token")
+      .build()
+
+    client.newCall(request).enqueue(object : Callback {
+      override fun onFailure(call: Call, e: IOException) {
+        Log.d(tag, "FAILURE TO CONNECT")
+        e.printStackTrace()
+        cb()
+      }
+
+      override fun onResponse(call: Call, response: Response) {
+        response.use {
+          if (!response.isSuccessful) throw IOException("Unexpected code $response")
+          cb()
+        }
+      }
+    })
+  }
+}

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

@@ -0,0 +1,171 @@
+package com.audiobookshelf.app
+
+import android.net.Uri
+import android.support.v4.media.MediaMetadataCompat
+import android.util.Log
+import com.getcapacitor.JSObject
+import com.google.android.exoplayer2.MediaItem
+import com.google.android.exoplayer2.MediaMetadata
+import com.google.android.exoplayer2.util.MimeTypes
+import java.lang.Exception
+
+class AudiobookStreamData {
+  var id:String = "unset"
+  var audiobookId:String = ""
+  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 playbackSpeed:Float = 1f
+  var duration:Long = 0
+  var tracks:MutableList<String> = mutableListOf()
+
+  var isLocal:Boolean = false
+  var contentUrl:String = ""
+
+  var hasPlayerLoaded:Boolean = false
+
+  var playlistUri:Uri = Uri.EMPTY
+  var coverUri:Uri = Uri.EMPTY
+  var contentUri:Uri = Uri.EMPTY // For Local only
+
+  constructor(jsondata:JSObject) {
+    id = jsondata.getString("id", "unset").toString()
+    audiobookId = jsondata.getString("audiobookId", "").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
+
+    if (jsondata.has("startTime")) {
+      startTime = jsondata.getString("startTime", "0")!!.toLong()
+    }
+
+    if (jsondata.has("duration")) {
+      duration = jsondata.getString("duration", "0")!!.toLong()
+    }
+
+    if (jsondata.has("playbackSpeed")) {
+      playbackSpeed = jsondata.getDouble("playbackSpeed")!!.toFloat()
+    }
+
+
+    // Local data
+    isLocal = jsondata.getBoolean("isLocal", false) == true
+    contentUrl = jsondata.getString("contentUrl", "").toString()
+
+    if (playlistUrl != "") {
+      playlistUri = Uri.parse(playlistUrl)
+    }
+    if (cover != "" && cover != null) {
+      coverUri = Uri.parse(cover)
+    } else {
+      coverUri = Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon)
+      cover = coverUri.toString()
+    }
+
+    if (contentUrl != "") {
+      contentUri = Uri.parse(contentUrl)
+    }
+
+    // Tracks for cast
+    try {
+      var tracksTest = jsondata.getJSONArray("tracks")
+      Log.d("AudiobookStreamData", "Load tracks from json array ${tracksTest.length()}")
+      for (i in 0 until tracksTest.length()) {
+        var track = tracksTest.get(i)
+        Log.d("AudiobookStreamData", "Extracting track $track")
+        tracks.add(track as String)
+      }
+    } catch(e:Exception) {
+      Log.d("AudiobookStreamData", "No tracks found $e")
+    }
+  }
+
+  fun getMediaMetadataCompat():MediaMetadataCompat {
+    var metadataBuilder = MediaMetadataCompat.Builder()
+      .putString(MediaMetadataCompat.METADATA_KEY_TITLE, title)
+      .putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_TITLE, title)
+      .putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_SUBTITLE, author)
+      .putString(MediaMetadataCompat.METADATA_KEY_AUTHOR, author)
+      .putString(MediaMetadataCompat.METADATA_KEY_ARTIST, author)
+      .putString(MediaMetadataCompat.METADATA_KEY_ALBUM, series)
+      .putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, id)
+
+    if (cover != "") {
+      metadataBuilder.putString(MediaMetadataCompat.METADATA_KEY_ART_URI, cover)
+      metadataBuilder.putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, cover)
+    }
+    return metadataBuilder.build()
+  }
+
+  fun getMediaMetadata():MediaMetadata {
+    var metadataBuilder = MediaMetadata.Builder()
+      .setTitle(title)
+      .setDisplayTitle(title)
+      .setArtist(author)
+      .setAlbumArtist(author)
+      .setSubtitle(author)
+
+    if (coverUri != Uri.EMPTY) {
+      metadataBuilder.setArtworkUri(coverUri)
+    }
+    if (playlistUri != Uri.EMPTY) {
+      metadataBuilder.setMediaUri(playlistUri)
+    }
+    if (contentUri != Uri.EMPTY) {
+      metadataBuilder.setMediaUri(contentUri)
+    }
+    return metadataBuilder.build()
+  }
+
+  fun getMimeType():String {
+    return if (isLocal) {
+      MimeTypes.BASE_TYPE_AUDIO
+    } else {
+      MimeTypes.APPLICATION_M3U8
+    }
+  }
+
+  fun getMediaUri():Uri {
+    return if (isLocal) {
+      contentUri
+    } else {
+      Uri.parse("$playlistUrl?token=$token")
+    }
+  }
+
+  fun getCastQueue():ArrayList<MediaItem> {
+    var mediaQueue: java.util.ArrayList<MediaItem> = java.util.ArrayList<MediaItem>()
+
+   for (i in 0 until tracks.size) {
+     var track = tracks[i]
+     var metadataBuilder = MediaMetadata.Builder()
+       .setTitle(title)
+       .setDisplayTitle(title)
+       .setArtist(author)
+       .setAlbumArtist(author)
+       .setSubtitle(author)
+       .setTrackNumber(i + 1)
+
+     if (coverUri != Uri.EMPTY) {
+       metadataBuilder.setArtworkUri(coverUri)
+     }
+
+     var mimeType = MimeTypes.BASE_TYPE_AUDIO
+
+     var mediaMetadata = metadataBuilder.build()
+     var mediaItem = MediaItem.Builder().setUri(Uri.parse(track)).setMediaMetadata(mediaMetadata).setMimeType(mimeType).build()
+     mediaQueue.add(mediaItem)
+   }
+
+    return mediaQueue
+  }
+}

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

@@ -0,0 +1,39 @@
+package com.audiobookshelf.app
+
+import com.getcapacitor.JSObject
+
+class Book {
+  var title:String
+  var subtitle:String
+  var author:String
+  var authorFL:String
+  var narrator:String
+  var series:String
+  var volumeNumber:String
+  var publisher:String
+  var description:String
+  var publishYear:String
+  var language:String
+  var cover:String
+  var coverFullPath:String
+  var genres:String
+  var lastUpdate:Long
+
+  constructor(jsobj: JSObject) {
+    title = jsobj.getString("title", "").toString()
+    subtitle = jsobj.getString("subtitle", "").toString()
+    author = jsobj.getString("author", "").toString()
+    authorFL = jsobj.getString("authorFL", "").toString()
+    narrator = jsobj.getString("narrator", "").toString()
+    series = jsobj.getString("series", "").toString()
+    volumeNumber = jsobj.getString("volumeNumber", "").toString()
+    publisher = jsobj.getString("publisher", "").toString()
+    description = jsobj.getString("description", "").toString()
+    publishYear = jsobj.getString("publishYear", "").toString()
+    language = jsobj.getString("language", "").toString()
+    cover = jsobj.getString("cover", "").toString()
+    coverFullPath = jsobj.getString("coverFullPath", "").toString()
+    genres = jsobj.getString("genres", "").toString()
+    lastUpdate = jsobj.getLong("lastUpdate")
+  }
+}

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

@@ -0,0 +1,106 @@
+package com.audiobookshelf.app
+
+import android.content.ContentResolver
+import android.content.Context
+import android.net.Uri
+import android.support.v4.media.MediaMetadataCompat
+import android.util.Log
+import androidx.annotation.AnyRes
+
+
+class BrowseTree(
+  val context: Context,
+  audiobooksInProgress: List<Audiobook>,
+  audiobookMetadata: List<MediaMetadataCompat>,
+  downloadedMetadata: List<MediaMetadataCompat>
+) {
+  private val mediaIdToChildren = mutableMapOf<String, MutableList<MediaMetadataCompat>>()
+
+  /**
+   * get uri to drawable or any other resource type if u wish
+   * @param context - context
+   * @param drawableId - drawable res id
+   * @return - uri
+   */
+  fun getUriToDrawable(context: Context,
+                       @AnyRes drawableId: Int): Uri {
+    return Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE
+      + "://" + context.resources.getResourcePackageName(drawableId)
+      + '/' + context.resources.getResourceTypeName(drawableId)
+      + '/' + context.resources.getResourceEntryName(drawableId))
+  }
+
+  init {
+    val rootList = mediaIdToChildren[AUTO_BROWSE_ROOT] ?: mutableListOf()
+
+
+    val continueReadingMetadata = MediaMetadataCompat.Builder().apply {
+      putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, CONTINUE_ROOT)
+      putString(MediaMetadataCompat.METADATA_KEY_TITLE, "Reading")
+      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, getUriToDrawable(context, R.drawable.exo_icon_localaudio).toString())
+    }.build()
+
+    val allMetadata = MediaMetadataCompat.Builder().apply {
+      putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, ALL_ROOT)
+      putString(MediaMetadataCompat.METADATA_KEY_TITLE, "Audiobooks")
+
+      var resource = getUriToDrawable(context, R.drawable.exo_icon_books).toString()
+      Log.d("BrowseTree", "RESOURCE $resource")
+      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, resource)
+    }.build()
+
+
+    val downloadsMetadata = MediaMetadataCompat.Builder().apply {
+      putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, DOWNLOADS_ROOT)
+      putString(MediaMetadataCompat.METADATA_KEY_TITLE, "Downloads")
+      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, getUriToDrawable(context, R.drawable.exo_icon_downloaddone).toString())
+    }.build()
+
+//    val localsMetadata = MediaMetadataCompat.Builder().apply {
+//      putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, LOCAL_ROOT)
+//      putString(MediaMetadataCompat.METADATA_KEY_TITLE, "Samples")
+//      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, getUriToDrawable(context, R.drawable.exo_icon_localaudio).toString())
+//    }.build()
+
+    if (audiobooksInProgress.isNotEmpty()) {
+      rootList += continueReadingMetadata
+    }
+    rootList += allMetadata
+    rootList += downloadsMetadata
+//    rootList += localsMetadata
+    mediaIdToChildren[AUTO_BROWSE_ROOT] = rootList
+
+    audiobooksInProgress.forEach { audiobook ->
+      val children = mediaIdToChildren[CONTINUE_ROOT] ?: mutableListOf()
+      children += audiobook.toMediaMetadata()
+      mediaIdToChildren[CONTINUE_ROOT] = children
+    }
+
+    audiobookMetadata.forEach {
+      val allChildren = mediaIdToChildren[ALL_ROOT] ?: mutableListOf()
+      allChildren += it
+      mediaIdToChildren[ALL_ROOT] = allChildren
+    }
+
+    downloadedMetadata.forEach {
+      val allChildren = mediaIdToChildren[DOWNLOADS_ROOT] ?: mutableListOf()
+      allChildren += it
+      mediaIdToChildren[DOWNLOADS_ROOT] = allChildren
+    }
+
+//    localAudio.forEach { local ->
+//      val localChildren = mediaIdToChildren[LOCAL_ROOT] ?: mutableListOf()
+//      localChildren += local.toMediaMetadata()
+//      mediaIdToChildren[LOCAL_ROOT] = localChildren
+//    }
+//    Log.d("BrowseTree", "Set LOCAL AUDIO ${localAudio.size}")
+  }
+
+  operator fun get(mediaId: String) = mediaIdToChildren[mediaId]
+}
+
+const val AUTO_BROWSE_ROOT = "/"
+const val ALL_ROOT = "__ALL__"
+const val CONTINUE_ROOT = "__CONTINUE__"
+const val DOWNLOADS_ROOT = "__DOWNLOADS__"
+//const val LOCAL_ROOT = "__LOCAL__"

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

@@ -0,0 +1,379 @@
+package com.audiobookshelf.app
+
+import android.app.Activity
+import android.app.AlertDialog
+import android.os.Bundle
+import android.util.Log
+import androidx.appcompat.R
+import androidx.mediarouter.app.MediaRouteChooserDialog
+import androidx.mediarouter.media.MediaRouteSelector
+import androidx.mediarouter.media.MediaRouter
+import com.getcapacitor.PluginCall
+import com.google.android.exoplayer2.ext.cast.CastPlayer
+import com.google.android.exoplayer2.ext.cast.SessionAvailabilityListener
+import com.google.android.gms.cast.Cast
+import com.google.android.gms.cast.CastDevice
+import com.google.android.gms.cast.CastMediaControlIntent
+import com.google.android.gms.cast.framework.*
+import org.json.JSONObject
+import java.util.ArrayList
+
+class CastManager constructor(playerNotificationService:PlayerNotificationService) {
+  private val tag = "SleepTimerManager"
+  private val playerNotificationService:PlayerNotificationService = playerNotificationService
+
+  private var newConnectionListener:SessionListener? = null
+  private var mainActivity:Activity? = null
+
+  private fun switchToPlayer(useCastPlayer:Boolean) {
+    playerNotificationService.switchToPlayer(useCastPlayer)
+  }
+
+  private inner class CastSessionAvailabilityListener : SessionAvailabilityListener {
+
+    /**
+     * Called when a Cast session has started and the user wishes to control playback on a
+     * remote Cast receiver rather than play audio locally.
+     */
+    override fun onCastSessionAvailable() {
+      switchToPlayer(true)
+    }
+
+    /**
+     * Called when a Cast session has ended and the user wishes to control playback locally.
+     */
+    override fun onCastSessionUnavailable() {
+      Log.d(tag, "onCastSessionUnavailable")
+      switchToPlayer(false)
+    }
+  }
+
+  fun requestSession(mainActivity: Activity, callback: RequestSessionCallback) {
+    this.mainActivity = mainActivity
+
+    mainActivity.runOnUiThread(object : Runnable {
+      override fun run() {
+        Log.d(tag, "CAST RUNNING ON MAIN THREAD")
+
+        val session: CastSession? = getSession()
+        if (session == null) {
+          // show the "choose a connection" dialog
+
+          // Add the connection listener callback
+          listenForConnection(callback)
+
+          val builder = MediaRouteChooserDialog(mainActivity, R.style.Theme_AppCompat_NoActionBar)
+          builder.routeSelector = MediaRouteSelector.Builder()
+            .addControlCategory(CastMediaControlIntent.categoryForCast(CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID))
+            .build()
+          builder.setCanceledOnTouchOutside(true)
+          builder.setOnCancelListener {
+            getSessionManager()!!.removeSessionManagerListener(newConnectionListener, CastSession::class.java)
+            callback.onCancel()
+          }
+          builder.show()
+        } else {
+          // We are are already connected, so show the "connection options" Dialog
+          val builder: AlertDialog.Builder = AlertDialog.Builder(mainActivity)
+          if (session.castDevice != null) {
+            builder.setTitle(session.castDevice.friendlyName)
+          }
+          builder.setOnDismissListener { callback.onCancel() }
+          builder.setPositiveButton("Stop Casting") { dialog, which -> endSession(true, null) }
+          builder.show()
+        }
+      }
+    })
+  }
+
+  abstract class RequestSessionCallback : ConnectionCallback {
+    abstract fun onError(errorCode: Int)
+    abstract fun onCancel()
+    override fun onSessionEndedBeforeStart(errorCode: Int): Boolean {
+      onSessionStartFailed(errorCode)
+      return true
+    }
+
+    override fun onSessionStartFailed(errorCode: Int): Boolean {
+      onError(errorCode)
+      return true
+    }
+  }
+
+  fun endSession(stopCasting: Boolean, pluginCall: PluginCall?) {
+
+    getSessionManager()!!.addSessionManagerListener(object : SessionListener() {
+      override fun onSessionEnded(castSession: CastSession?, error: Int) {
+        getSessionManager()!!.removeSessionManagerListener(this, CastSession::class.java)
+        Log.d(tag, "CAST END SESSION")
+//        media.setSession(null)
+        pluginCall?.resolve()
+//        listener.onSessionEnd(ChromecastUtilities.createSessionObject(castSession, if (stopCasting) "stopped" else "disconnected"))
+      }
+    }, CastSession::class.java)
+    getSessionManager()!!.endCurrentSession(stopCasting)
+
+  }
+
+  open class SessionListener : SessionManagerListener<CastSession> {
+    override fun onSessionStarting(castSession: CastSession?) {}
+    override fun onSessionStarted(castSession: CastSession?, sessionId: String) {}
+    override fun onSessionStartFailed(castSession: CastSession?, error: Int) {}
+    override fun onSessionEnding(castSession: CastSession?) {}
+    override fun onSessionEnded(castSession: CastSession?, error: Int) {}
+    override fun onSessionResuming(castSession: CastSession?, sessionId: String) {}
+    override fun onSessionResumed(castSession: CastSession?, wasSuspended: Boolean) {}
+    override fun onSessionResumeFailed(castSession: CastSession?, error: Int) {}
+    override fun onSessionSuspended(castSession: CastSession?, reason: Int) {}
+  }
+
+  private fun startRouteScan() {
+    var connListener = object: ChromecastListener() {
+      override fun onReceiverAvailableUpdate(available: Boolean) {
+        Log.d(tag, "CAST RECEIVER UPDATE AVAILABLE $available")
+      }
+
+      override fun onSessionRejoin(jsonSession: JSONObject?) {
+        Log.d(tag, "CAST onSessionRejoin")
+      }
+
+      override fun onMediaLoaded(jsonMedia: JSONObject?) {
+        Log.d(tag, "CAST onMediaLoaded")
+      }
+
+      override fun onMediaUpdate(jsonMedia: JSONObject?) {
+        Log.d(tag, "CAST onMediaUpdate")
+      }
+
+      override fun onSessionUpdate(jsonSession: JSONObject?) {
+        Log.d(tag, "CAST onSessionUpdate")
+      }
+
+      override fun onSessionEnd(jsonSession: JSONObject?) {
+        Log.d(tag, "CAST onSessionEnd")
+      }
+
+      override fun onMessageReceived(p0: CastDevice, p1: String, p2: String) {
+        Log.d(tag, "CAST onMessageReceived")
+      }
+    }
+
+    var callback = object : ScanCallback() {
+      override fun onRouteUpdate(routes: List<MediaRouter.RouteInfo>?) {
+        Log.d(tag, "CAST On ROUTE UPDATED ${routes?.size} | ${getContext().castState}")
+        // if the routes have changed, we may have an available device
+        // If there is at least one device available
+        if (getContext().castState != CastState.NO_DEVICES_AVAILABLE) {
+
+          routes?.forEach { Log.d(tag, "CAST ROUTE ${it.description} | ${it.deviceType} | ${it.isBluetooth} | ${it.name}") }
+
+          // Stop the scan
+          stopRouteScan(this, null);
+          // Let the client know a receiver is available
+          connListener.onReceiverAvailableUpdate(true);
+          // Since we have a receiver we may also have an active session
+          var session = getSessionManager()?.currentCastSession;
+          // If we do have a session
+          if (session != null) {
+            // Let the client know
+            Log.d(tag, "LET SESSION KNOW ABOUT")
+//            media.setSession(session);
+//            connListener.onSessionRejoin(ChromecastUtilities.createSessionObject(session));
+          }
+        }
+      }
+    }
+    callback.setMediaRouter(getMediaRouter())
+
+    callback.onFilteredRouteUpdate();
+
+    getMediaRouter()!!.addCallback(MediaRouteSelector.Builder()
+      .addControlCategory(CastMediaControlIntent.categoryForCast(CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID))
+      .build(),
+      callback,
+      MediaRouter.CALLBACK_FLAG_PERFORM_ACTIVE_SCAN)
+  }
+
+  internal interface CastListener : Cast.MessageReceivedCallback {
+    fun onMediaLoaded(jsonMedia: JSONObject?)
+    fun onMediaUpdate(jsonMedia: JSONObject?)
+    fun onSessionUpdate(jsonSession: JSONObject?)
+    fun onSessionEnd(jsonSession: JSONObject?)
+  }
+
+  internal abstract class ChromecastListener : CastStateListener, CastListener {
+    abstract fun onReceiverAvailableUpdate(available: Boolean)
+    abstract fun onSessionRejoin(jsonSession: JSONObject?)
+
+    /** CastStateListener functions.  */
+    override fun onCastStateChanged(state: Int) {
+      onReceiverAvailableUpdate(state != CastState.NO_DEVICES_AVAILABLE)
+    }
+  }
+
+  fun stopRouteScan(callback: ScanCallback?, completionCallback: Runnable?) {
+    if (callback == null) {
+      completionCallback!!.run()
+      return
+    }
+//    ctx.runOnUiThread(Runnable {
+    callback.stop()
+    getMediaRouter()!!.removeCallback(callback)
+    completionCallback?.run()
+//    })
+  }
+
+  abstract class ScanCallback : MediaRouter.Callback() {
+    /**
+     * Called whenever a route is updated.
+     * @param routes the currently available routes
+     */
+    abstract fun onRouteUpdate(routes: List<MediaRouter.RouteInfo>?)
+
+    /** records whether we have been stopped or not.  */
+    private var stopped = false
+
+    /** Global mediaRouter object.  */
+    private var mediaRouter: MediaRouter? = null
+
+    /**
+     * Sets the mediaRouter object.
+     * @param router mediaRouter object
+     */
+    fun setMediaRouter(router: MediaRouter?) {
+      mediaRouter = router
+    }
+
+    /**
+     * Call this method when you wish to stop scanning.
+     * It is important that it is called, otherwise battery
+     * life will drain more quickly.
+     */
+    fun stop() {
+      stopped = true
+    }
+
+    fun onFilteredRouteUpdate() {
+      if (stopped || mediaRouter == null) {
+        return
+      }
+      val outRoutes: MutableList<MediaRouter.RouteInfo> = ArrayList()
+      // Filter the routes
+      for (route in mediaRouter!!.routes) {
+        // We don't want default routes, or duplicate active routes
+        // or multizone duplicates https://github.com/jellyfin/cordova-plugin-chromecast/issues/32
+        val extras: Bundle? = route.extras
+        if (extras != null) {
+          CastDevice.getFromBundle(extras)
+          if (extras.getString("com.google.android.gms.cast.EXTRA_SESSION_ID") != null) {
+            continue
+          }
+        }
+        if (!route.isDefault
+          && !route.description.equals("Google Cast Multizone Member")
+          && route.playbackType === MediaRouter.RouteInfo.PLAYBACK_TYPE_REMOTE) {
+          outRoutes.add(route)
+        }
+      }
+      onRouteUpdate(outRoutes)
+    }
+
+    override fun onRouteAdded(router: MediaRouter?, route: MediaRouter.RouteInfo?) {
+      onFilteredRouteUpdate()
+    }
+
+    override fun onRouteChanged(router: MediaRouter?, route: MediaRouter.RouteInfo?) {
+      onFilteredRouteUpdate()
+    }
+
+    override fun onRouteRemoved(router: MediaRouter?, route: MediaRouter.RouteInfo?) {
+      onFilteredRouteUpdate()
+    }
+  }
+
+  private fun listenForConnection(callback: ConnectionCallback) {
+    // We should only ever have one of these listeners active at a time, so remove previous
+    getSessionManager()?.removeSessionManagerListener(newConnectionListener, CastSession::class.java)
+
+    newConnectionListener = object : SessionListener() {
+      override fun onSessionStarted(castSession: CastSession?, sessionId: String) {
+        Log.d(tag, "CAST SESSION STARTED ${castSession?.castDevice?.friendlyName}")
+        getSessionManager()?.removeSessionManagerListener(this, CastSession::class.java)
+
+        try {
+          val castContext = CastContext.getSharedInstance(mainActivity)
+          playerNotificationService.castPlayer = CastPlayer(castContext).apply {
+            setSessionAvailabilityListener(CastSessionAvailabilityListener())
+            addListener(playerNotificationService.getPlayerListener())
+          }
+          Log.d(tag, "CAST Cast Player Applied")
+          switchToPlayer(true)
+        } catch (e: Exception) {
+          Log.i(tag, "Cast is not available on this device. " +
+            "Exception thrown when attempting to obtain CastContext. " + e.message)
+          return
+        }
+
+
+//        media.setSession(castSession)
+//        callback.onJoin(ChromecastUtilities.createSessionObject(castSession))
+      }
+
+      override fun onSessionStartFailed(castSession: CastSession?, errCode: Int) {
+        if (callback.onSessionStartFailed(errCode)) {
+          getSessionManager()?.removeSessionManagerListener(this, CastSession::class.java)
+        }
+      }
+
+      override fun onSessionEnded(castSession: CastSession?, errCode: Int) {
+        if (callback.onSessionEndedBeforeStart(errCode)) {
+          getSessionManager()?.removeSessionManagerListener(this, CastSession::class.java)
+        }
+      }
+    }
+
+    getSessionManager()?.addSessionManagerListener(newConnectionListener, CastSession::class.java)
+  }
+
+  private fun getContext(): CastContext {
+    return CastContext.getSharedInstance(mainActivity)
+  }
+
+  private fun getSessionManager(): SessionManager? {
+    return getContext().sessionManager
+  }
+
+  private fun getMediaRouter(): MediaRouter? {
+    return mainActivity?.let { MediaRouter.getInstance(it) }
+  }
+
+  private fun getSession(): CastSession? {
+    return getSessionManager()?.currentCastSession
+  }
+
+  internal interface ConnectionCallback {
+    /**
+     * Successfully joined a session on a route.
+     * @param jsonSession the session we joined
+     */
+    fun onJoin(jsonSession: JSONObject?)
+
+    /**
+     * Called if we received an error.
+     * @param errorCode You can find the error meaning here:
+     * https://developers.google.com/android/reference/com/google/android/gms/cast/CastStatusCodes
+     * @return true if we are done listening for join, false, if we to keep listening
+     */
+    fun onSessionStartFailed(errorCode: Int): Boolean
+
+    /**
+     * Called when we detect a session ended event before session started.
+     * See issues:
+     * https://github.com/jellyfin/cordova-plugin-chromecast/issues/49
+     * https://github.com/jellyfin/cordova-plugin-chromecast/issues/48
+     * @param errorCode error to output
+     * @return true if we are done listening for join, false, if we to keep listening
+     */
+    fun onSessionEndedBeforeStart(errorCode: Int): Boolean
+  }
+}

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

@@ -0,0 +1,28 @@
+package com.audiobookshelf.app
+
+import android.content.Context
+import android.util.Log
+import com.google.android.gms.cast.CastMediaControlIntent
+import com.google.android.gms.cast.framework.CastOptions
+import com.google.android.gms.cast.framework.OptionsProvider
+import com.google.android.gms.cast.framework.SessionProvider
+import com.google.android.gms.cast.framework.media.CastMediaOptions
+
+class CastOptionsProvider : OptionsProvider {
+  override fun getCastOptions(context: Context): CastOptions {
+    Log.d("CastOptionsProvider", "getCastOptions")
+    return CastOptions.Builder()
+      .setReceiverApplicationId(CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID).setCastMediaOptions(
+        CastMediaOptions.Builder()
+          // We manage the media session and the notifications ourselves.
+          .setMediaSessionEnabled(false)
+          .setNotificationOptions(null)
+          .build()
+      )
+      .setStopReceiverApplicationWhenEndingSession(true).build()
+  }
+
+  override fun getAdditionalSessionProviders(context: Context): List<SessionProvider>? {
+    return null
+  }
+}

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

@@ -0,0 +1,120 @@
+package com.audiobookshelf.app
+
+import android.Manifest
+import android.content.ContentResolver
+import android.content.ContentUris
+import android.content.Context
+import android.content.pm.PackageManager
+import android.content.res.AssetFileDescriptor
+import android.database.Cursor
+import android.media.MediaPlayer
+import android.net.Uri
+import android.os.Build
+import android.provider.MediaStore
+import android.support.v4.media.MediaMetadataCompat
+import android.util.Log
+import androidx.annotation.AnyRes
+import androidx.core.content.ContextCompat
+import androidx.core.net.toFile
+import androidx.core.net.toUri
+import com.bumptech.glide.Glide
+import java.io.File
+import java.io.IOException
+
+
+class LocalMediaManager {
+  private var ctx: Context
+  val tag = "LocalAudioManager"
+
+  constructor(ctx: Context) {
+    this.ctx = ctx
+  }
+
+  data class LocalAudio(val uri: Uri,
+                        val id: String,
+                        val name: String,
+                        val duration: Int,
+                        val size: Int,
+                        val coverUri: Uri?
+  ) {
+
+    fun toMediaMetadata(): MediaMetadataCompat {
+      return MediaMetadataCompat.Builder().apply {
+        putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, id)
+        putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_TITLE, name)
+        putString(MediaMetadataCompat.METADATA_KEY_TITLE, name)
+
+        if (coverUri != null) {
+          putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, coverUri.toString())
+        }
+      }.build()
+    }
+  }
+  val localAudioFiles = mutableListOf<LocalAudio>()
+
+  /**
+   * get uri to drawable or any other resource type if u wish
+   * @param context - context
+   * @param drawableId - drawable res id
+   * @return - uri
+   */
+  fun getUriToDrawable(context: Context,
+                       @AnyRes drawableId: Int): Uri {
+    return Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE
+      + "://" + context.resources.getResourcePackageName(drawableId)
+      + '/' + context.resources.getResourceTypeName(drawableId)
+      + '/' + context.resources.getResourceEntryName(drawableId))
+  }
+
+  fun loadLocalAudio() {
+    localAudioFiles.clear()
+
+    localAudioFiles += LocalAudio(Uri.parse("asset:///public/samples/Anthem/AnthemSample.m4b"), "anthem_sample", "Anthem", 60000, 10000, getUriToDrawable(ctx, R.drawable.exo_icon_localaudio))
+    localAudioFiles += LocalAudio(Uri.parse("asset:///public/samples/Legend of Sleepy Hollow/LegendOfSleepyHollowSample.m4b"), "sleepy_hollow", "Legend of Sleepy Hollow", 60000, 10000, getUriToDrawable(ctx, R.drawable.exo_icon_localaudio))
+
+    // TODO: No longer reading in local audio files - just use samples
+//    if (ContextCompat.checkSelfPermission(ctx, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
+//      Log.e(tag, "Permission not granted to read from external storage")
+//      return
+//    }
+//
+//    val collection =
+//      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+//        MediaStore.Audio.Media.getContentUri(
+//          MediaStore.VOLUME_EXTERNAL
+//        )
+//      } else {
+//        MediaStore.Audio.Media.EXTERNAL_CONTENT_URI
+//      }
+//
+//    val proj = arrayOf(MediaStore.Audio.Media._ID, MediaStore.Audio.Media.DISPLAY_NAME, MediaStore.Audio.Media.DURATION, MediaStore.Audio.Media.SIZE)
+//    val audioCursor: Cursor? = ctx.contentResolver.query(collection, proj, null, null, null)
+//
+//    audioCursor?.use { cursor ->
+//      // Cache column indices.
+//      val idColumn = cursor.getColumnIndexOrThrow(MediaStore.Audio.Media._ID)
+//      val nameColumn =
+//        cursor.getColumnIndexOrThrow(MediaStore.Audio.Media.DISPLAY_NAME)
+//      val durationColumn =
+//        cursor.getColumnIndexOrThrow(MediaStore.Audio.Media.DURATION)
+//      val sizeColumn = cursor.getColumnIndexOrThrow(MediaStore.Audio.Media.SIZE)
+//
+//      while (cursor.moveToNext()) {
+//        // Get values of columns for a given video.
+//        val id = cursor.getLong(idColumn)
+//        val name = cursor.getString(nameColumn)
+//        val duration = cursor.getInt(durationColumn)
+//        val size = cursor.getInt(sizeColumn)
+//
+//        val contentUri: Uri = ContentUris.withAppendedId(
+//          MediaStore.Audio.Media.EXTERNAL_CONTENT_URI,
+//          id
+//        )
+//        Log.d(tag, "Found local audio file $name")
+//       localAudioFiles += LocalAudio(contentUri, id.toString(), name, duration, size, null)
+//      }
+//    }
+//
+//    Log.d(tag, "${localAudioFiles.size} Local Audio Files found")
+  }
+}

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

@@ -1,15 +1,14 @@
 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.app.DownloadManager
+import android.content.*
+import android.os.*
 import android.util.Log
-import com.example.myapp.MyNativeAudio
+import com.anggrayudi.storage.SimpleStorage
+import com.anggrayudi.storage.SimpleStorageHelper
 import com.getcapacitor.BridgeActivity
 
+
 class MainActivity : BridgeActivity() {
   private val tag = "MainActivity"
 
@@ -18,11 +17,43 @@ class MainActivity : BridgeActivity() {
   private lateinit var mConnection : ServiceConnection
 
   lateinit var pluginCallback : () -> Unit
+  lateinit var downloaderCallback : (String, Long) -> Unit
+
+  val storageHelper = SimpleStorageHelper(this)
+  val storage = SimpleStorage(this)
+
+  val broadcastReceiver = object: BroadcastReceiver() {
+    override fun onReceive(context: Context?, intent: Intent?) {
+      when (intent?.action) {
+        DownloadManager.ACTION_DOWNLOAD_COMPLETE -> {
+          var thisdlid = intent.getLongExtra(DownloadManager.EXTRA_DOWNLOAD_ID, 0L)
+          downloaderCallback("complete", thisdlid)
+        }
+        DownloadManager.ACTION_NOTIFICATION_CLICKED -> {
+          var thisdlid = intent.getLongExtra(DownloadManager.EXTRA_DOWNLOAD_ID, 0L)
+          downloaderCallback("clicked", thisdlid)
+        }
+      }
+    }
+  }
 
   public override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
+
     Log.d(tag, "onCreate")
     registerPlugin(MyNativeAudio::class.java)
+    registerPlugin(AudioDownloader::class.java)
+    registerPlugin(StorageManager::class.java)
+
+    var filter = IntentFilter(DownloadManager.ACTION_DOWNLOAD_COMPLETE).apply {
+      addAction(DownloadManager.ACTION_NOTIFICATION_CLICKED)
+    }
+    registerReceiver(broadcastReceiver, filter)
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    unregisterReceiver(broadcastReceiver)
   }
 
   override fun onPostCreate(savedInstanceState: Bundle?) {
@@ -30,12 +61,12 @@ class MainActivity : BridgeActivity() {
 
     mConnection = object : ServiceConnection {
       override fun onServiceDisconnected(name: ComponentName) {
-        Log.w(tag, "Service Disconnected")
+        Log.w(tag, "Service Disconnected $name")
         mBounded = false
       }
 
       override fun onServiceConnected(name: ComponentName, service: IBinder) {
-        Log.d(tag, "Service Connected")
+        Log.d(tag, "Service Connected $name")
 
 
         mBounded = true
@@ -62,4 +93,38 @@ class MainActivity : BridgeActivity() {
     val stopIntent = Intent(this, PlayerNotificationService::class.java)
     stopService(stopIntent)
   }
+
+  fun registerBroadcastReceiver(cb: (String, Long) -> Unit) {
+    downloaderCallback = cb
+  }
+
+  override fun onSaveInstanceState(outState: Bundle) {
+    storageHelper.onSaveInstanceState(outState)
+    super.onSaveInstanceState(outState)
+  }
+
+  override fun onRestoreInstanceState(savedInstanceState: Bundle) {
+    super.onRestoreInstanceState(savedInstanceState)
+    storageHelper.onRestoreInstanceState(savedInstanceState)
+  }
+
+  override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
+    super.onActivityResult(requestCode, resultCode, data)
+    // Mandatory for Activity, but not for Fragment & ComponentActivity
+    storageHelper.storage.onActivityResult(requestCode, resultCode, data)
+  }
+
+  override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray) {
+    super.onRequestPermissionsResult(requestCode, permissions, grantResults)
+    Log.d(tag, "onRequestPermissionResult $requestCode")
+    permissions.forEach { Log.d(tag, "PERMISSION $it") }
+    grantResults.forEach { Log.d(tag, "GRANTREUSLTS $it") }
+    // Mandatory for Activity, but not for Fragment & ComponentActivity
+    storageHelper.onRequestPermissionsResult(requestCode, permissions, grantResults)
+  }
+
+//  override fun onUserInteraction() {
+//    super.onUserInteraction()
+//    Log.d(tag, "USER INTERACTION")
+//  }
 }

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

@@ -1,18 +1,14 @@
-package com.example.myapp
+package com.audiobookshelf.app
 
 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.capacitorjs.plugins.app.AppPlugin
+import com.getcapacitor.*
 import com.getcapacitor.annotation.CapacitorPlugin
+import org.json.JSONObject
 
 @CapacitorPlugin(name = "MyNativeAudio")
 class MyNativeAudio : Plugin() {
@@ -27,20 +23,37 @@ class MyNativeAudio : Plugin() {
     var foregroundServiceReady : () -> Unit = {
       playerNotificationService = mainActivity.foregroundService
 
-      playerNotificationService.setCustomObjectListener(object: PlayerNotificationService.MyCustomObjectListener {
-        override fun onPlayingUpdate(isPlaying:Boolean) {
+      playerNotificationService.setBridge(bridge)
+
+      playerNotificationService.setCustomObjectListener(object : PlayerNotificationService.MyCustomObjectListener {
+        override fun onPlayingUpdate(isPlaying: Boolean) {
           emit("onPlayingUpdate", isPlaying)
         }
-        override fun onMetadata(metadata:JSObject) {
+
+        override fun onMetadata(metadata: JSObject) {
           notifyListeners("onMetadata", metadata)
         }
+
+        override fun onPrepare(audiobookId: String, playWhenReady: Boolean) {
+          var jsobj = JSObject()
+          jsobj.put("audiobookId", audiobookId)
+          jsobj.put("playWhenReady", playWhenReady)
+          notifyListeners("onPrepareMedia", jsobj)
+        }
+
+        override fun onSleepTimerEnded(currentPosition: Long) {
+          emit("onSleepTimerEnded", currentPosition)
+        }
+
+        override fun onSleepTimerSet(sleepTimerEndTime: Long) {
+          emit("onSleepTimerSet", sleepTimerEndTime)
+        }
       })
     }
     mainActivity.pluginCallback = foregroundServiceReady
-
   }
 
-  fun emit(evtName: String, value:Any) {
+  fun emit(evtName: String, value: Any) {
     var ret:JSObject = JSObject()
     ret.put("value", value)
     notifyListeners(evtName, ret)
@@ -53,15 +66,21 @@ class MyNativeAudio : Plugin() {
       Intent(mainActivity, PlayerNotificationService::class.java).also { intent ->
         ContextCompat.startForegroundService(mainActivity, intent)
       }
-    } else {
-      Log.w(tag, "Service already started --")
+    }
+    var jsobj = JSObject()
+
+    var audiobookStreamData:AudiobookStreamData = AudiobookStreamData(call.data)
+    if (audiobookStreamData.playlistUrl == "" && audiobookStreamData.contentUrl == "") {
+      Log.e(tag, "Invalid URL for init audio player")
+
+      jsobj.put("success", false)
+      return call.resolve(jsobj)
     }
 
-
-    var audiobook:Audiobook = Audiobook(call.data)
     Handler(Looper.getMainLooper()).post() {
-      playerNotificationService.initPlayer(audiobook)
-      call.resolve()
+      playerNotificationService.initPlayer(audiobookStreamData)
+      jsobj.put("success", true)
+      call.resolve(jsobj)
     }
   }
 
@@ -69,9 +88,32 @@ class MyNativeAudio : Plugin() {
   fun getCurrentTime(call: PluginCall) {
     Handler(Looper.getMainLooper()).post() {
       var currentTime = playerNotificationService.getCurrentTime()
-      Log.d(tag, "Get Current Time $currentTime")
+      var bufferedTime = playerNotificationService.getBufferedTime()
       val ret = JSObject()
       ret.put("value", currentTime)
+      ret.put("bufferedTime", bufferedTime)
+      call.resolve(ret)
+    }
+  }
+
+  @PluginMethod
+  fun getStreamSyncData(call: PluginCall) {
+    Handler(Looper.getMainLooper()).post() {
+      var isPlaying = playerNotificationService.getPlayStatus()
+      var lastPauseTime = playerNotificationService.getTheLastPauseTime()
+      Log.d(tag, "Get Last Pause Time $lastPauseTime")
+      var currentTime = playerNotificationService.getCurrentTime()
+      //if (!isPlaying) currentTime -= playerNotificationService.calcPauseSeekBackTime()
+      var id = playerNotificationService.getCurrentAudiobookId()
+      Log.d(tag, "Get Current id $id")
+      var duration = playerNotificationService.getDuration()
+      Log.d(tag, "Get duration $duration")
+      val ret = JSObject()
+      ret.put("lastPauseTime", lastPauseTime)
+      ret.put("currentTime", currentTime)
+      ret.put("isPlaying", isPlaying)
+      ret.put("id", id)
+      ret.put("duration", duration)
       call.resolve(ret)
     }
   }
@@ -109,6 +151,7 @@ class MyNativeAudio : Plugin() {
       call.resolve()
     }
   }
+
   @PluginMethod
   fun seekBackward(call: PluginCall) {
     var amount:Long = call.getString("amount", "0")!!.toLong()
@@ -117,6 +160,7 @@ class MyNativeAudio : Plugin() {
       call.resolve()
     }
   }
+
   @PluginMethod
   fun setPlaybackSpeed(call: PluginCall) {
     var playbackSpeed:Float = call.getFloat("speed", 1.0f)!!
@@ -126,6 +170,7 @@ class MyNativeAudio : Plugin() {
       call.resolve()
     }
   }
+
   @PluginMethod
   fun terminateStream(call: PluginCall) {
     Handler(Looper.getMainLooper()).post() {
@@ -133,4 +178,74 @@ class MyNativeAudio : Plugin() {
       call.resolve()
     }
   }
+
+  @PluginMethod
+  fun setSleepTimer(call: PluginCall) {
+    var time:Long = call.getString("time", "360000")!!.toLong()
+    var isChapterTime:Boolean = call.getBoolean("isChapterTime", false) == true
+
+    Handler(Looper.getMainLooper()).post() {
+        var success:Boolean = playerNotificationService.sleepTimerManager.setSleepTimer(time, isChapterTime)
+        val ret = JSObject()
+        ret.put("success", success)
+        call.resolve(ret)
+    }
+  }
+
+  @PluginMethod
+  fun getSleepTimerTime(call: PluginCall) {
+    var time = playerNotificationService.sleepTimerManager.getSleepTimerTime()
+    val ret = JSObject()
+    ret.put("value", time)
+    call.resolve(ret)
+  }
+
+  @PluginMethod
+  fun increaseSleepTime(call: PluginCall) {
+    var time:Long = call.getString("time", "300000")!!.toLong()
+
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.sleepTimerManager.increaseSleepTime(time)
+      val ret = JSObject()
+      ret.put("success", true)
+      call.resolve()
+    }
+  }
+
+  @PluginMethod
+  fun decreaseSleepTime(call: PluginCall) {
+    var time:Long = call.getString("time", "300000")!!.toLong()
+
+    Handler(Looper.getMainLooper()).post() {
+      playerNotificationService.sleepTimerManager.decreaseSleepTime(time)
+      val ret = JSObject()
+      ret.put("success", true)
+      call.resolve()
+    }
+  }
+
+  @PluginMethod
+  fun cancelSleepTimer(call: PluginCall) {
+    playerNotificationService.sleepTimerManager.cancelSleepTimer()
+    call.resolve()
+  }
+
+  @PluginMethod
+  fun requestSession(call: PluginCall) {
+    Log.d(tag, "CAST REQUEST SESSION PLUGIN")
+
+      playerNotificationService.castManager.requestSession(mainActivity, object : CastManager.RequestSessionCallback() {
+        override fun onError(errorCode: Int) {
+          Log.e(tag, "CAST REQUEST SESSION CALLBACK ERROR $errorCode")
+        }
+
+        override fun onCancel() {
+          Log.d(tag, "CAST REQUEST SESSION ON CANCEL")
+        }
+
+        override fun onJoin(jsonSession: JSONObject?) {
+          Log.d(tag, "CAST REQUEST SESSION ON JOIN")
+        }
+      })
+  }
 }

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

@@ -0,0 +1,67 @@
+package com.audiobookshelf.app
+
+import android.hardware.Sensor
+import android.hardware.SensorEvent
+import android.hardware.SensorEventListener
+import android.hardware.SensorManager
+import java.lang.Math.sqrt
+import kotlin.math.sqrt
+
+class ShakeDetector : SensorEventListener {
+  private var mListener: OnShakeListener? = null
+  private var mShakeTimestamp: Long = 0
+  private var mShakeCount = 0
+  fun setOnShakeListener(listener: OnShakeListener?) {
+    mListener = listener
+  }
+
+  interface OnShakeListener {
+    fun onShake(count: Int)
+  }
+
+  override fun onAccuracyChanged(
+    sensor: Sensor,
+    accuracy: Int
+  ) { // ignore
+  }
+
+  override fun onSensorChanged(event: SensorEvent) {
+    if (mListener != null) {
+      val x = event.values[0]
+      val y = event.values[1]
+      val z = event.values[2]
+      val gX = x / SensorManager.GRAVITY_EARTH
+      val gY = y / SensorManager.GRAVITY_EARTH
+      val gZ = z / SensorManager.GRAVITY_EARTH
+      // gForce will be close to 1 when there is no movement.
+      val gForce: Float = sqrt(gX * gX + gY * gY + gZ * gZ)
+      if (gForce > SHAKE_THRESHOLD_GRAVITY) {
+        val now = System.currentTimeMillis()
+        // ignore shake events too close to each other (500ms)
+        if (mShakeTimestamp + SHAKE_SLOP_TIME_MS > now) {
+          return
+        }
+        // reset the shake count after 3 seconds of no shakes
+        if (mShakeTimestamp + SHAKE_COUNT_RESET_TIME_MS < now) {
+          mShakeCount = 0
+        }
+        mShakeTimestamp = now
+        mShakeCount++
+        mListener!!.onShake(mShakeCount)
+      }
+    }
+  }
+
+  companion object {
+    /*
+ * The gForce that is necessary to register as shake.
+ * Must be greater than 1G (one earth gravity unit).
+ * You can install "G-Force", by Blake La Pierre
+ * from the Google Play Store and run it to see how
+ *  many G's it takes to register a shake
+ */
+    private const val SHAKE_THRESHOLD_GRAVITY = 1.5f // orig 2.7f
+    private const val SHAKE_SLOP_TIME_MS = 500
+    private const val SHAKE_COUNT_RESET_TIME_MS = 3000
+  }
+}

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

@@ -0,0 +1,190 @@
+package com.audiobookshelf.app
+
+import android.hardware.SensorManager
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import java.util.*
+import kotlin.concurrent.schedule
+import kotlin.math.roundToInt
+
+const val SLEEP_EXTENSION_TIME = 900000L // 15m
+
+class SleepTimerManager constructor(playerNotificationService:PlayerNotificationService) {
+  private val tag = "SleepTimerManager"
+  private val playerNotificationService:PlayerNotificationService = playerNotificationService
+
+  private var sleepTimerTask:TimerTask? = null
+  private var sleepTimerRunning:Boolean = false
+  private var sleepTimerEndTime:Long = 0L
+  private var sleepTimerExtensionTime:Long = 0L
+  private var sleepTimerFinishedAt:Long = 0L
+
+  private fun getCurrentTime():Long {
+    return playerNotificationService.getCurrentTime()
+  }
+
+  private fun getDuration():Long {
+    return playerNotificationService.getDuration()
+  }
+
+  private fun getIsPlaying():Boolean {
+    return playerNotificationService.currentPlayer.isPlaying
+  }
+
+  private fun setVolume(volume:Float) {
+    playerNotificationService.currentPlayer.volume = volume
+  }
+
+  private fun pause() {
+    playerNotificationService.currentPlayer.pause()
+  }
+
+  private fun play() {
+    playerNotificationService.currentPlayer.play()
+  }
+
+  private fun getSleepTimerTimeRemainingSeconds():Int {
+    if (sleepTimerEndTime <= 0) return 0
+    var sleepTimeRemaining = sleepTimerEndTime - getCurrentTime()
+    return ((sleepTimeRemaining / 1000).toDouble()).roundToInt()
+  }
+
+  fun getIsSleepTimerRunning():Boolean {
+    return sleepTimerRunning
+  }
+
+  fun setSleepTimer(time: Long, isChapterTime: Boolean) : Boolean {
+    Log.d(tag, "Setting Sleep Timer for $time is chapter time $isChapterTime")
+    sleepTimerTask?.cancel()
+    sleepTimerRunning = false
+    sleepTimerFinishedAt = 0L
+
+    // Register shake sensor
+    playerNotificationService.registerSensor()
+
+    var currentTime = getCurrentTime()
+    if (isChapterTime) {
+      if (currentTime > time) {
+        Log.d(tag, "Invalid sleep timer - current time is already passed chapter time $time")
+        return false
+      }
+      sleepTimerEndTime = time
+      sleepTimerExtensionTime = SLEEP_EXTENSION_TIME
+    } else {
+      sleepTimerEndTime = currentTime + time
+      sleepTimerExtensionTime = time
+    }
+
+    if (sleepTimerEndTime > getDuration()) {
+      sleepTimerEndTime = getDuration()
+    }
+
+    playerNotificationService.listener?.onSleepTimerSet(sleepTimerEndTime)
+
+    sleepTimerRunning = true
+    sleepTimerTask = Timer("SleepTimer", false).schedule(0L, 1000L) {
+      Handler(Looper.getMainLooper()).post() {
+        if (getIsPlaying()) {
+          var sleepTimeSecondsRemaining = getSleepTimerTimeRemainingSeconds()
+          Log.d(tag, "Sleep TIMER time remaining $sleepTimeSecondsRemaining s")
+
+          if (sleepTimeSecondsRemaining <= 0) {
+            Log.d(tag, "Sleep Timer Pausing Player on Chapter")
+            pause()
+
+            playerNotificationService.listener?.onSleepTimerEnded(getCurrentTime())
+            clearSleepTimer()
+            sleepTimerFinishedAt = System.currentTimeMillis()
+          } else if (sleepTimeSecondsRemaining <= 30) {
+            // Start fading out audio
+            var volume = sleepTimeSecondsRemaining / 30F
+            Log.d(tag, "SLEEP VOLUME FADE $volume | ${sleepTimeSecondsRemaining}s remaining")
+            setVolume(volume)
+          }
+        }
+      }
+    }
+    return true
+  }
+
+  fun clearSleepTimer() {
+    sleepTimerTask?.cancel()
+    sleepTimerTask = null
+    sleepTimerEndTime = 0
+    sleepTimerRunning = false
+    playerNotificationService.unregisterSensor()
+  }
+
+  fun getSleepTimerTime():Long? {
+    return sleepTimerEndTime
+  }
+
+  fun cancelSleepTimer() {
+    Log.d(tag, "Canceling Sleep Timer")
+    clearSleepTimer()
+    playerNotificationService.listener?.onSleepTimerSet(0)
+  }
+
+  private fun extendSleepTime() {
+    if (!sleepTimerRunning) return
+    setVolume(1F)
+    sleepTimerEndTime += sleepTimerExtensionTime
+    if (sleepTimerEndTime > getDuration()) sleepTimerEndTime = getDuration()
+    playerNotificationService.listener?.onSleepTimerSet(sleepTimerEndTime)
+  }
+
+  fun checkShouldExtendSleepTimer() {
+    if (!sleepTimerRunning) {
+      if (sleepTimerFinishedAt <= 0L) return
+
+      var finishedAtDistance = System.currentTimeMillis() - sleepTimerFinishedAt
+      if (finishedAtDistance > SLEEP_TIMER_WAKE_UP_EXPIRATION) // 2 minutes
+      {
+        Log.d(tag, "Sleep timer finished over 2 mins ago, clearing it")
+        sleepTimerFinishedAt = 0L
+        return
+      }
+
+      var newSleepTime = if (sleepTimerExtensionTime >= 0) sleepTimerExtensionTime else SLEEP_EXTENSION_TIME
+      setSleepTimer(newSleepTime, false)
+      play()
+      return
+    }
+    // Only extend if within 30 seconds of finishing
+    var sleepTimeRemaining = getSleepTimerTimeRemainingSeconds()
+    if (sleepTimeRemaining <= 30) extendSleepTime()
+  }
+
+  fun handleShake() {
+    Log.d(tag, "HANDLE SHAKE HERE")
+    if (sleepTimerRunning || sleepTimerFinishedAt > 0L) checkShouldExtendSleepTimer()
+  }
+
+  fun increaseSleepTime(time: Long) {
+    Log.d(tag, "Increase Sleep time $time")
+    if (!sleepTimerRunning) return
+    var newSleepEndTime = sleepTimerEndTime + time
+    sleepTimerEndTime = if (newSleepEndTime >= getDuration()) {
+      getDuration()
+    } else {
+      newSleepEndTime
+    }
+    setVolume(1F)
+    playerNotificationService.listener?.onSleepTimerSet(sleepTimerEndTime)
+  }
+
+  fun decreaseSleepTime(time: Long) {
+    Log.d(tag, "Decrease Sleep time $time")
+    if (!sleepTimerRunning) return
+    var newSleepEndTime = sleepTimerEndTime - time
+    sleepTimerEndTime = if (newSleepEndTime <= 1000) {
+      // End sleep timer in 1 second
+      getCurrentTime() + 1000
+    } else {
+      newSleepEndTime
+    }
+    setVolume(1F)
+    playerNotificationService.listener?.onSleepTimerSet(sleepTimerEndTime)
+  }
+}

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

@@ -0,0 +1,264 @@
+package com.audiobookshelf.app
+
+import android.database.Cursor
+import android.net.Uri
+import android.os.Build
+import android.util.Log
+import androidx.annotation.RequiresApi
+import androidx.documentfile.provider.DocumentFile
+
+import com.anggrayudi.storage.SimpleStorage
+import com.anggrayudi.storage.callback.FolderPickerCallback
+import com.anggrayudi.storage.callback.StorageAccessCallback
+import com.anggrayudi.storage.file.*
+import com.getcapacitor.*
+import com.getcapacitor.annotation.CapacitorPlugin
+
+@CapacitorPlugin(name = "StorageManager")
+class StorageManager : Plugin() {
+  private val TAG = "StorageManager"
+
+  lateinit var mainActivity:MainActivity
+
+  data class MediaFile(val uri: Uri, val name: String, val simplePath: String, val size: Long, val type: String, val isAudio: Boolean) {
+    fun toJSObject() : JSObject {
+      var obj = JSObject()
+      obj.put("uri", this.uri)
+      obj.put("name", this.name)
+      obj.put("simplePath", this.simplePath)
+      obj.put("size", this.size)
+      obj.put("type", this.type)
+      obj.put("isAudio", this.isAudio)
+      return obj
+    }
+  }
+
+  data class MediaFolder(val uri: Uri, val name: String, val simplePath: String, val mediaFiles:List<MediaFile>) {
+    fun toJSObject() : JSObject {
+      var obj = JSObject()
+      obj.put("uri", this.uri)
+      obj.put("name", this.name)
+      obj.put("simplePath", this.simplePath)
+      obj.put("files", this.mediaFiles.map { it.toJSObject() })
+      return obj
+    }
+  }
+
+  override fun load() {
+    mainActivity = (activity as MainActivity)
+
+    mainActivity.storage.storageAccessCallback = object : StorageAccessCallback {
+      override fun onRootPathNotSelected(
+        requestCode: Int,
+        rootPath: String,
+        uri: Uri,
+        selectedStorageType: StorageType,
+        expectedStorageType: StorageType
+      ) {
+        Log.d(TAG, "STORAGE ACCESS CALLBACK")
+      }
+
+      override fun onCanceledByUser(requestCode: Int) {
+        Log.d(TAG, "STORAGE ACCESS CALLBACK")
+      }
+
+      override fun onExpectedStorageNotSelected(requestCode: Int, selectedFolder: DocumentFile, selectedStorageType: StorageType, expectedBasePath: String, expectedStorageType: StorageType) {
+        Log.d(TAG, "STORAGE ACCESS CALLBACK")
+      }
+
+      override fun onStoragePermissionDenied(requestCode: Int) {
+        Log.d(TAG, "STORAGE ACCESS CALLBACK")
+      }
+
+      override fun onRootPathPermissionGranted(requestCode: Int, root: DocumentFile) {
+        Log.d(TAG, "STORAGE ACCESS CALLBACK")
+      }
+    }
+  }
+
+  @PluginMethod
+  fun selectFolder(call: PluginCall) {
+    mainActivity.storage.folderPickerCallback = object : FolderPickerCallback {
+      override fun onFolderSelected(requestCode: Int, folder: DocumentFile) {
+        Log.d(TAG, "ON FOLDER SELECTED ${folder.uri} ${folder.name}")
+
+        var absolutePath = folder.getAbsolutePath(activity)
+        var storageId = folder.getStorageId(activity)
+        var storageType = folder.getStorageType(activity)
+        var simplePath = folder.getSimplePath(activity)
+        var basePath = folder.getBasePath(activity)
+
+        var jsobj = JSObject()
+        jsobj.put("uri", folder.uri)
+        jsobj.put("absolutePath", absolutePath)
+        jsobj.put("storageId", storageId)
+        jsobj.put("storageType", storageType)
+        jsobj.put("simplePath", simplePath)
+        jsobj.put("basePath", basePath)
+        call.resolve(jsobj)
+      }
+
+      override fun onStorageAccessDenied(requestCode: Int, folder: DocumentFile?, storageType: StorageType) {
+        Log.e(TAG, "STORAGE ACCESS DENIED")
+        var jsobj = JSObject()
+        jsobj.put("error", "Access Denied")
+        call.resolve(jsobj)
+      }
+
+      override fun onStoragePermissionDenied(requestCode: Int) {
+        Log.d(TAG, "STORAGE PERMISSION DENIED $requestCode")
+        var jsobj = JSObject()
+        jsobj.put("error", "Permission Denied")
+        call.resolve(jsobj)
+      }
+    }
+    mainActivity.storage.openFolderPicker(6)
+  }
+
+  @RequiresApi(Build.VERSION_CODES.R)
+  @PluginMethod
+  fun requestStoragePermission(call: PluginCall) {
+    Log.d(TAG, "Request Storage Permissions")
+    mainActivity.storageHelper.requestStorageAccess()
+    call.resolve()
+  }
+
+  @PluginMethod
+  fun checkStoragePermission(call: PluginCall) {
+    var res = false
+
+    if (Build.VERSION.SDK_INT <= android.os.Build.VERSION_CODES.P) {
+      res = SimpleStorage.hasStoragePermission(context)
+      Log.d(TAG, "Check Storage Access $res")
+    } else {
+      Log.d(TAG, "Has permission on Android 10 or up")
+      res = true
+    }
+
+    var jsobj = JSObject()
+    jsobj.put("value", res)
+    call.resolve(jsobj)
+  }
+
+  @PluginMethod
+  fun checkFolderPermissions(call: PluginCall) {
+    var folderUrl = call.data.getString("folderUrl", "").toString()
+      Log.d(TAG, "Check Folder Permissions for $folderUrl")
+
+    var hasAccess = SimpleStorage.hasStorageAccess(context,folderUrl,true)
+
+    var jsobj = JSObject()
+    jsobj.put("value", hasAccess)
+    call.resolve(jsobj)
+  }
+
+  @PluginMethod
+  fun searchFolder(call: PluginCall) {
+    var folderUrl = call.data.getString("folderUrl", "").toString()
+    Log.d(TAG, "Searching folder $folderUrl")
+
+    var df: DocumentFile? = DocumentFileCompat.fromUri(context, Uri.parse(folderUrl))
+
+    if (df == null) {
+      Log.e(TAG, "Folder Doc File Invalid $folderUrl")
+      var jsobj = JSObject()
+      jsobj.put("folders", JSArray())
+      jsobj.put("files", JSArray())
+      call.resolve(jsobj)
+      return
+    }
+
+    Log.d(TAG, "Folder as DF ${df.isDirectory} | ${df.getSimplePath(context)} | ${df.getBasePath(context)} | ${df.name}")
+
+    var mediaFolders = mutableListOf<MediaFolder>()
+    var foldersFound = df.search(false, DocumentFileType.FOLDER)
+
+    foldersFound.forEach {
+      Log.d(TAG, "Iterating over Folder Found ${it.name} | ${it.getSimplePath(context)} | URI: ${it.uri}")
+      var folderName = it.name ?: ""
+      var mediaFiles = mutableListOf<MediaFile>()
+
+      var filesInFolder = it.search(false, DocumentFileType.FILE, arrayOf("audio/*", "image/*"))
+      filesInFolder.forEach { it2 ->
+        var mimeType = it2?.mimeType ?: ""
+        var filename = it2?.name ?: ""
+        var isAudio = mimeType.startsWith("audio")
+        Log.d(TAG, "Found $mimeType file $filename in folder $folderName")
+        var imageFile = MediaFile(it2.uri, filename, it2.getSimplePath(context), it2.length(), mimeType, isAudio)
+        mediaFiles.add(imageFile)
+      }
+      if (mediaFiles.size > 0) {
+        mediaFolders.add(MediaFolder(it.uri, folderName, it.getSimplePath(context), mediaFiles))
+      }
+    }
+
+    // Files in root dir
+    var rootMediaFiles = mutableListOf<MediaFile>()
+    var mediaFilesFound:List<DocumentFile> = df.search(false, DocumentFileType.FILE, arrayOf("audio/*", "image/*"))
+    mediaFilesFound.forEach {
+      Log.d(TAG, "Folder Root File Found ${it.name} | ${it.getSimplePath(context)} | URI: ${it.uri} | ${it.mimeType}")
+      var mimeType = it?.mimeType ?: ""
+      var filename = it?.name ?: ""
+      var isAudio = mimeType.startsWith("audio")
+      Log.d(TAG, "Found $mimeType file $filename in root folder")
+      var imageFile = MediaFile(it.uri, filename, it.getSimplePath(context), it.length(), mimeType, isAudio)
+      rootMediaFiles.add(imageFile)
+    }
+
+    var jsobj = JSObject()
+    jsobj.put("folders", mediaFolders.map{ it.toJSObject() })
+    jsobj.put("files", rootMediaFiles.map{ it.toJSObject() })
+    call.resolve(jsobj)
+  }
+
+
+  @PluginMethod
+  fun delete(call: PluginCall) {
+    var url = call.data.getString("url", "").toString()
+    var coverUrl = call.data.getString("coverUrl", "").toString()
+    var folderUrl = call.data.getString("folderUrl", "").toString()
+
+    if (folderUrl != "") {
+      Log.d(TAG, "CALLED DELETE FOLDER: $folderUrl")
+      var folder = DocumentFileCompat.fromUri(context, Uri.parse(folderUrl))
+      var success = folder?.deleteRecursively(context)
+      var jsobj = JSObject()
+      jsobj.put("success", success)
+      call.resolve()
+    } else {
+      // Older audiobooks did not store a folder url, use cover and audiobook url
+      var abExists = checkUriExists(Uri.parse(url))
+      if (abExists) {
+        var abfile = DocumentFileCompat.fromUri(context, Uri.parse(url))
+        abfile?.delete()
+      }
+
+      var coverExists = checkUriExists(Uri.parse(coverUrl))
+      if (coverExists) {
+        var coverfile = DocumentFileCompat.fromUri(context, Uri.parse(coverUrl))
+        coverfile?.delete()
+      }
+    }
+  }
+
+
+  fun checkUriExists(uri: Uri?): Boolean {
+    if (uri == null) return false
+    val resolver = context.contentResolver
+    var cursor: Cursor? = null
+    return try {
+      cursor = resolver.query(uri, null, null, null, null)
+      //cursor null: content Uri was invalid or some other error occurred
+      //cursor.moveToFirst() false: Uri was ok but no entry found.
+      (cursor != null && cursor.moveToFirst())
+    } catch (t: Throwable) {
+      false
+    } finally {
+      try {
+        cursor?.close()
+      } catch (t: Throwable) {
+      }
+      false
+    }
+  }
+}

android/app/src/main/res/drawable-anydpi-v24/exo_icon_books.xml

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#FFFFFF">
+  <group android:scaleX="1.127451"
+      android:scaleY="1.127451"
+      android:translateX="-1.5294118"
+      android:translateY="-1.5294118">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M4,6H2v14c0,1.1 0.9,2 2,2h14v-2H4V6z"/>
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M20,2L8,2c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L22,4c0,-1.1 -0.9,-2 -2,-2zM20,12l-2.5,-1.5L15,12L15,4h5v8z"/>
+  </group>
+</vector>

android/app/src/main/res/drawable-anydpi-v24/exo_icon_downloaddone.xml

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#FFFFFF">
+  <group android:scaleX="1.127451"
+      android:scaleY="1.127451"
+      android:translateX="-1.5294118"
+      android:translateY="-1.5294118">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M20.13,5.41l-1.41,-1.41l-9.19,9.19l-4.25,-4.24l-1.41,1.41l5.66,5.66z"/>
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M5,18h14v2h-14z"/>
+  </group>
+</vector>

android/app/src/main/res/drawable-anydpi-v24/exo_icon_localaudio.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#FFFFFF">
+  <group android:scaleX="1.127451"
+      android:scaleY="1.127451"
+      android:translateX="-1.5294118"
+      android:translateY="-1.5294118">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M12,3v9.28c-0.47,-0.17 -0.97,-0.28 -1.5,-0.28C8.01,12 6,14.01 6,16.5S8.01,21 10.5,21c2.31,0 4.2,-1.75 4.45,-4H15V6h4V3h-7z"/>
+  </group>
+</vector>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<automotiveApp>
+  <uses name="media" />
+</automotiveApp>

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+  <base-config cleartextTrafficPermitted="true">
+    <trust-anchors>
+      <certificates src="user"/>
+      <certificates src="system"/>
+    </trust-anchors>
+  </base-config>
+</network-security-config>

android/capacitor.settings.gradle

@@ -2,8 +2,23 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-community-sqlite'
+project(':capacitor-community-sqlite').projectDir = new File('../node_modules/@capacitor-community/sqlite/android')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
 include ':capacitor-dialog'
 project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')
 
+include ':capacitor-network'
+project(':capacitor-network').projectDir = new File('../node_modules/@capacitor/network/android')
+
+include ':capacitor-storage'
+project(':capacitor-storage').projectDir = new File('../node_modules/@capacitor/storage/android')
+
 include ':robingenz-capacitor-app-update'
 project(':robingenz-capacitor-app-update').projectDir = new File('../node_modules/@robingenz/capacitor-app-update/android')
+
+include ':capacitor-data-storage-sqlite'
+project(':capacitor-data-storage-sqlite').projectDir = new File('../node_modules/capacitor-data-storage-sqlite/android')

android/variables.gradle

@@ -1,5 +1,5 @@
 ext {
-    minSdkVersion = 26
+    minSdkVersion = 23
     compileSdkVersion = 30
     targetSdkVersion = 30
     androidxActivityVersion = '1.2.0'

assets/app.css

@@ -1,3 +1,13 @@
+@import "./fonts.css";
+
+#bookshelf {
+  min-height: calc(100vh - 48px);
+}
+
+.box-shadow-sm {
+  box-shadow: 0px 3px 6px #11111170;
+}
+
 .box-shadow-md {
   box-shadow: 2px 8px 6px #111111aa;
 }
@@ -12,4 +22,42 @@
 
 .box-shadow-book {
   box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
+}
+.shadow-height {
+  height: calc(100% - 4px);
+}
+
+.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 10px 8px #1111117e;
+}
+
+/*
+Bookshelf Label
+*/
+.categoryPlacard {
+  background-image: url(https://image.freepik.com/free-photo/brown-wooden-textured-flooring-background_53876-128537.jpg);
+  letter-spacing: 1px;
+}
+.shinyBlack {
+  background-color: #2d3436;
+  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
+  border-color: rgba(255, 244, 182, 0.6);
+  border-style: solid;
+  color: #fce3a6;
+}
+
+.cover-bg {
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
+  background-size: 100% 100%;
+  background-position: center;
+  opacity: 1;
+  filter: blur(20px);
 }

assets/ebooks/basic.js

@@ -0,0 +1,506 @@
+/*
+Calibres stylesheet
+*/
+
+export default `
+@charset "UTF-8";
+
+/*
+  Calibre styles
+*/
+.arabic {
+    display: block;
+    list-style-type: decimal;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.attribution {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    margin: 0.3em 0
+    }
+.big {
+    font-size: 1.375em;
+    line-height: 1.2
+    }
+.big1 {
+    font-size: 1em
+    }
+.block {
+    display: block;
+    text-align: justify;
+    margin: 1em 1em 2em
+    }
+.block1 {
+    display: block;
+    text-align: justify;
+    margin: 1em 4em
+    }
+.block2 {
+    display: block;
+    text-align: justify;
+    margin: 1em 1em 1em 2em
+    }
+.bullet {
+    display: block;
+    list-style-type: disc;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: disc
+    }
+.calibre {
+    background-color: #000007;
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    margin: 0 5pt
+    }
+.calibre1 {
+    display: block
+    }
+.calibre2 {
+    height: auto;
+    width: auto
+    }
+.calibre3:not(strong) {
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 5pt
+    }
+.calibre4 {
+    font-weight: bold
+    }
+.calibre5 {
+    font-style: italic
+    }
+.calibre6 {
+    background-color: #FFF;
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    margin: 0 5pt
+    }
+.calibre7 {
+    display: list-item
+    }
+.calibre8 {
+    font-size: 1em;
+    line-height: 1.2;
+    vertical-align: super
+    }
+.calibre9 {
+    border-collapse: separate;
+    border-spacing: 2px;
+    display: table;
+    margin-bottom: 0;
+    margin-top: 0;
+    text-indent: 0
+    }
+.calibre10 {
+    display: table-row;
+    vertical-align: middle
+    }
+.calibre11 {
+    display: table-cell;
+    text-align: right;
+    vertical-align: inherit;
+    padding: 1px
+    }
+.calibre12 {
+    display: table-cell;
+    text-align: left;
+    vertical-align: inherit;
+    padding: 1px
+    }
+.calibre13 {
+    height: 1em;
+    width: auto
+    }
+.calibre14 {
+    font-size: 0.88889em;
+    line-height: 1.2;
+    vertical-align: super
+    }
+.calibre15 {
+    font-size: 1em;
+    line-height: 1.2;
+    vertical-align: sub
+    }
+.calibre16 {
+    display: block;
+    list-style-type: decimal;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em
+    }
+.calibre17 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 0.83em 0
+    }
+.center {
+    display: block;
+    text-align: center;
+    margin: 1em 0
+    }
+.center1 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: -2em 0 3em
+    }
+.center2 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 2em 0 1em
+    }
+.center3 {
+    display: block;
+    text-align: center;
+    margin: -1em 0 1em
+    }
+.center4 {
+    display: block;
+    text-align: center;
+    text-indent: 3%;
+    margin: 1em 0
+    }
+.chapter {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 2em 0 1em
+    }
+.chapter1 {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-top: 2em
+    }
+.chapter2 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 2em 0 3em
+    }
+.copyright {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 4em;
+    text-align: center
+    }
+.dedication {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 4em
+    }
+.dropcaps {
+    float: left;
+    font-size: 3.4375rem;
+    line-height: 50px;
+    margin-right: 0.09em;
+    margin-top: -0.05em;
+    padding-top: 1px
+    }
+.dropcaps1 {
+    float: left;
+    font-size: 3.4375rem;
+    line-height: 50px;
+    margin-right: 0.09em;
+    margin-top: 0.15em;
+    padding-top: 1px
+    }
+.extract {
+    display: block;
+    text-align: justify;
+    margin: 2em 0 0.3em
+    }
+.extract1 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 2em 0 0.3em
+    }
+.extract2 {
+    display: block;
+    text-align: justify;
+    margin: 1em 0 0.3em
+    }
+.footnote {
+    border-bottom-style: solid;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-left-width: 0;
+    border-right-style: solid;
+    border-right-width: 0;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    margin-top: 2 em
+    }
+.footnote1 {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0 0.3em 2
+    }
+.footnote2 {
+    border-bottom-style: solid;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-left-width: 0;
+    border-right-style: solid;
+    border-right-width: 0;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 2 em
+    }
+.hanging {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1em
+    }
+.hanging1 {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1.5em
+    }
+.hanging2 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1em
+    }
+.hanging3 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: 1em;
+    margin: 0.1em 0 0.3em 1em
+    }
+.hanging4 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: 0.1em;
+    margin: 0.1em 0 0.3em 1em
+    }
+a.hlink {
+    text-decoration: none
+    }
+.indent {
+    display: block;
+    text-align: justify;
+    text-indent: 1em;
+    margin: 0.3em 0
+    }
+.line {
+    border-top: currentColor solid 1px;
+    border-bottom: currentColor solid 1px
+    }
+.loweralpha {
+    display: block;
+    list-style-type: lower-alpha;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.none {
+    display: block;
+    list-style-type: none;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.none1 {
+    display: block;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-right: 0;
+    margin-top: 0;
+    text-align: justify
+    }
+.nonindent {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0
+    }
+.nonindent1 {
+    display: block;
+    font-size: 1.125em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 0.1em
+    }
+.nonindent2 {
+    display: block;
+    font-size: 1.125em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em -0.5em
+    }
+.nonindent3 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 0.3em 0
+    }
+.part {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 4em 0 1em
+    }
+.preface {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: justify
+    }
+.pubhlink {
+    color: green;
+    text-decoration: none
+    }
+.right {
+    display: block;
+    text-align: right;
+    margin: 0.3em 0
+    }
+.section {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 2em 0 0.5em
+    }
+.section1 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: left;
+    margin: 2em 0 0.3em
+    }
+.section2 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: left;
+    margin: 2em 0 0.3em 1em
+    }
+.small {
+    font-size: 0.66667em
+    }
+.small1 {
+    font-size: 0.75em
+    }
+.subchapter {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 1em 0
+    }
+.textbox {
+    background-color: #E4E4E4;
+    display: block;
+    line-height: 1.5em;
+    margin-bottom: 2em;
+    margin-top: 2em;
+    text-align: justify;
+    border-top: currentColor double 2px;
+    border-bottom: currentColor double 2px
+    }
+.textbox1 {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0.5em 0.3em 0.8em
+    }
+.textbox2 {
+    display: block;
+    text-align: justify;
+    text-indent: 1em;
+    margin: 0.3em 0.5em
+    }
+.textbox3 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 0.3em 0.5em 0.3em 0.8em
+    }
+.titlepage {
+    display: block;
+    margin-left: -0.4em;
+    margin-top: 1.2em
+    }
+.toc {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: center
+    }
+.toc1 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 0.67em 0 3em
+    }
+.underline {
+    text-decoration: underline
+    }
+`

assets/ebooks/htmlParser.js

@@ -0,0 +1,248 @@
+/*
+This is borrowed from koodo-reader https://github.com/troyeguo/koodo-reader/tree/master/src
+*/
+
+export const isTitle = (
+  line,
+  isContainDI = false,
+  isContainChapter = false,
+  isContainCHAPTER = false
+) => {
+  return (
+    line.length < 30 &&
+    line.indexOf("[") === -1 &&
+    line.indexOf("(") === -1 &&
+    (line.startsWith("CHAPTER") ||
+      line.startsWith("Chapter") ||
+      line.startsWith("序章") ||
+      line.startsWith("前言") ||
+      line.startsWith("声明") ||
+      line.startsWith("聲明") ||
+      line.startsWith("写在前面的话") ||
+      line.startsWith("后记") ||
+      line.startsWith("楔子") ||
+      line.startsWith("后序") ||
+      line.startsWith("寫在前面的話") ||
+      line.startsWith("後記") ||
+      line.startsWith("後序") ||
+      /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+        line
+      ) ||
+      (line.startsWith("第") && startWithDI(line)) ||
+      (line.startsWith("卷") && startWithJUAN(line)) ||
+      startWithRomanNum(line) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("第") > -1 &&
+        (line[line.indexOf("第") - 1] === " " ||
+          line[line.indexOf("第") - 1] === "　" ||
+          line[line.indexOf("第") - 1] === "、" ||
+          line[line.indexOf("第") - 1] === "：" ||
+          line[line.indexOf("第") - 1] === ":") &&
+        startWithDI(line.substr(line.indexOf("第")))) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf(" ") &&
+        startWithNumAndSpace(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("　") &&
+        startWithNumAndSpace(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("、") &&
+        startWithNumAndPause(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("：") &&
+        startWithNumAndColon(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf(":") &&
+        startWithNumAndColon(line)))
+  );
+};
+const startWithDI = (line) => {
+  let keywords = [
+    "章",
+    "节",
+    "回",
+    "節",
+    "卷",
+    "部",
+    "輯",
+    "辑",
+    "話",
+    "集",
+    "话",
+    "篇",
+  ];
+  let flag = false;
+  for (let i = 0; i < keywords.length; i++) {
+    if (
+      (line.indexOf(keywords[i]) > -1 &&
+        (line[line.indexOf(keywords[i]) + 1] === " " ||
+          line[line.indexOf(keywords[i]) + 1] === "　" ||
+          line[line.indexOf(keywords[i]) + 1] === "、" ||
+          line[line.indexOf(keywords[i]) + 1] === "：" ||
+          line[line.indexOf(keywords[i]) + 1] === ":")) ||
+      !line[line.indexOf(keywords[i]) + 1]
+    ) {
+      if (
+        /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+          line.substring(1, line.indexOf(keywords[i])).trim()
+        ) ||
+        /^\d+$/.test(line.substring(1, line.indexOf(keywords[i])).trim())
+      ) {
+        flag = true;
+      }
+      if (flag) break;
+    }
+  }
+  return flag;
+};
+const startWithJUAN = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1, line.indexOf(" "))
+    ) ||
+    /^\d+$/.test(line.substring(1, line.indexOf(" ")))
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1, line.indexOf("　"))
+    ) ||
+    /^\d+$/.test(line.substring(1, line.indexOf("　")))
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1)
+    ) ||
+    /^\d+$/.test(line.substring(1))
+  )
+    return true;
+  return false;
+};
+const startWithRomanNum = (line) => {
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.substring(0, line.indexOf(" "))
+    )
+  )
+    return true;
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.substring(0, line.indexOf("."))
+    )
+  )
+    return true;
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.trim()
+    )
+  )
+    return true;
+  return false;
+};
+const startWithNumAndSpace = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf(" "))
+    )
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("　"))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf(" ")))) return true;
+  if (/^\d+$/.test(line.substring(0, line.indexOf("　")))) return true;
+  return false;
+};
+const startWithNumAndColon = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf(":"))
+    )
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("："))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf(":")))) return true;
+  if (/^\d+$/.test(line.substring(0, line.indexOf("：")))) return true;
+  return false;
+};
+const startWithNumAndPause = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("、"))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf("、")))) return true;
+  return false;
+};
+
+
+class HtmlParser {
+  bookDoc;
+  contentList;
+  contentTitleList;
+  constructor(bookDoc) {
+    this.bookDoc = bookDoc;
+    this.contentList = [];
+    this.contentTitleList = [];
+    this.getContent(bookDoc);
+  }
+  getContent(bookDoc) {
+    this.contentList = Array.from(
+      bookDoc.querySelectorAll("h1,h2,h3,h4,h5,b,font")
+    ).filter((item, index) => {
+      return isTitle(item.innerText.trim());
+    });
+
+    for (let i = 0; i < this.contentList.length; i++) {
+      let random = Math.floor(Math.random() * 900000) + 100000;
+      this.contentTitleList.push({
+        label: this.contentList[i].innerText,
+        id: "title" + random,
+        href: "#title" + random,
+        subitems: [],
+      });
+    }
+    for (let i = 0; i < this.contentList.length; i++) {
+      this.contentList[i].id = this.contentTitleList[i].id;
+    }
+  }
+  getAnchoredDoc() {
+    return this.bookDoc;
+  }
+  getContentList() {
+    return this.contentTitleList.filter((item, index) => {
+      if (index > 0) {
+        return item.label !== this.contentTitleList[index - 1].label;
+      } else {
+        return true;
+      }
+    });
+  }
+}
+
+export default HtmlParser;

assets/ebooks/mobi.js

@@ -0,0 +1,450 @@
+/*
+This is borrowed from koodo-reader https://github.com/troyeguo/koodo-reader/tree/master/src
+*/
+
+function ab2str(buf) {
+  if (buf instanceof ArrayBuffer) {
+    buf = new Uint8Array(buf);
+  }
+  return new TextDecoder("utf-8").decode(buf);
+}
+
+var domParser = new DOMParser();
+
+class Buffer {
+  capacity;
+  fragment_list;
+  imageArray;
+  cur_fragment;
+  constructor(capacity) {
+    this.capacity = capacity;
+    this.fragment_list = [];
+    this.imageArray = [];
+    this.cur_fragment = new Fragment(capacity);
+    this.fragment_list.push(this.cur_fragment);
+  }
+  write(byte) {
+    var result = this.cur_fragment.write(byte);
+    if (!result) {
+      this.cur_fragment = new Fragment(this.capacity);
+      this.fragment_list.push(this.cur_fragment);
+      this.cur_fragment.write(byte);
+    }
+  }
+  get(idx) {
+    var fi = 0;
+    while (fi < this.fragment_list.length) {
+      var frag = this.fragment_list[fi];
+      if (idx < frag.size) {
+        return frag.get(idx);
+      }
+      idx -= frag.size;
+      fi += 1;
+    }
+    return null;
+  }
+  size() {
+    var s = 0;
+    for (var i = 0; i < this.fragment_list.length; i++) {
+      s += this.fragment_list[i].size;
+    }
+    return s;
+  }
+  shrink() {
+    var total_buffer = new Uint8Array(this.size());
+    var offset = 0;
+    for (var i = 0; i < this.fragment_list.length; i++) {
+      var frag = this.fragment_list[i];
+      if (frag.full()) {
+        total_buffer.set(frag.buffer, offset);
+      } else {
+        total_buffer.set(frag.buffer.slice(0, frag.size), offset);
+      }
+      offset += frag.size;
+    }
+    return total_buffer;
+  }
+}
+
+var copagesne_uint8array = function (buffers) {
+  var total_size = 0;
+  for (let i = 0; i < buffers.length; i++) {
+    var buffer = buffers[i];
+    total_size += buffer.length;
+  }
+  var total_buffer = new Uint8Array(total_size);
+  var offset = 0;
+  for (let i = 0; i < buffers.length; i++) {
+    buffer = buffers[i];
+    total_buffer.set(buffer, offset);
+    offset += buffer.length;
+  }
+  return total_buffer;
+};
+
+class Fragment {
+  buffer;
+  capacity;
+  size;
+  constructor(capacity) {
+    this.buffer = new Uint8Array(capacity);
+    this.capacity = capacity;
+    this.size = 0;
+  }
+
+  write(byte) {
+    if (this.size >= this.capacity) {
+      return false;
+    }
+    this.buffer[this.size] = byte;
+    this.size += 1;
+    return true;
+  }
+  full() {
+    return this.size === this.capacity;
+  }
+  get(idx) {
+    return this.buffer[idx];
+  }
+}
+
+var uncompression_lz77 = function (data) {
+  var length = data.length;
+  var offset = 0; // Current offset into data
+  var buffer = new Buffer(data.length);
+
+  while (offset < length) {
+    var char = data[offset];
+    offset += 1;
+
+    if (char === 0) {
+      buffer.write(char);
+    } else if (char <= 8) {
+      for (var i = offset; i < offset + char; i++) {
+        buffer.write(data[i]);
+      }
+      offset += char;
+    } else if (char <= 0x7f) {
+      buffer.write(char);
+    } else if (char <= 0xbf) {
+      var next = data[offset];
+      offset += 1;
+      var distance = (((char << 8) | next) >> 3) & 0x7ff;
+      var lz_length = (next & 0x7) + 3;
+
+      var buffer_size = buffer.size();
+      for (let i = 0; i < lz_length; i++) {
+        buffer.write(buffer.get(buffer_size - distance));
+        buffer_size += 1;
+      }
+    } else {
+      buffer.write(32);
+      buffer.write(char ^ 0x80);
+    }
+  }
+  return buffer;
+};
+
+class MobiFile {
+  view;
+  buffer;
+  offset;
+  header;
+  palm_header;
+  mobi_header;
+  reclist;
+  constructor(data) {
+    this.view = new DataView(data);
+    this.buffer = this.view.buffer;
+    this.offset = 0;
+    this.header = null;
+  }
+
+  parse() { }
+
+  getUint8() {
+    var v = this.view.getUint8(this.offset);
+    this.offset += 1;
+    return v;
+  }
+
+  getUint16() {
+    var v = this.view.getUint16(this.offset);
+    this.offset += 2;
+    return v;
+  }
+
+  getUint32() {
+    var v = this.view.getUint32(this.offset);
+    this.offset += 4;
+    return v;
+  }
+
+  getStr(size) {
+    var v = ab2str(this.buffer.slice(this.offset, this.offset + size));
+    this.offset += size;
+    return v;
+  }
+
+  skip(size) {
+    this.offset += size;
+  }
+
+  setoffset(_of) {
+    this.offset = _of;
+  }
+
+  get_record_extrasize(data, flags) {
+    var pos = data.length - 1;
+    var extra = 0;
+    for (var i = 15; i > 0; i--) {
+      if (flags & (1 << i)) {
+        var res = this.buffer_get_varlen(data, pos);
+        var size = res[0];
+        var l = res[1];
+        pos = res[2];
+        pos -= size - l;
+        extra += size;
+      }
+    }
+    if (flags & 1) {
+      var a = data[pos];
+      extra += (a & 0x3) + 1;
+    }
+    return extra;
+  }
+
+  // data should be uint8array
+  buffer_get_varlen(data, pos) {
+    var l = 0;
+    var size = 0;
+    var byte_count = 0;
+    var mask = 0x7f;
+    var stop_flag = 0x80;
+    var shift = 0;
+    for (var i = 0; ; i++) {
+      var byte = data[pos];
+      size |= (byte & mask) << shift;
+      shift += 7;
+      l += 1;
+      byte_count += 1;
+      pos -= 1;
+
+      var to_stop = byte & stop_flag;
+      if (byte_count >= 4 || to_stop > 0) {
+        break;
+      }
+    }
+    return [size, l, pos];
+  }
+  // 读出文本内容
+  read_text() {
+    var text_end = this.palm_header.record_count;
+    var buffers = [];
+    for (var i = 1; i <= text_end; i++) {
+      buffers.push(this.read_text_record(i));
+    }
+    var all = copagesne_uint8array(buffers);
+    return ab2str(all);
+  }
+
+  read_text_record(i) {
+    var flags = this.mobi_header.extra_flags;
+    var begin = this.reclist[i].offset;
+    var end = this.reclist[i + 1].offset;
+
+    var data = new Uint8Array(this.buffer.slice(begin, end));
+    var ex = this.get_record_extrasize(data, flags);
+
+    data = new Uint8Array(this.buffer.slice(begin, end - ex));
+    if (this.palm_header.compression === 2) {
+      var buffer = uncompression_lz77(data);
+      return buffer.shrink();
+    } else {
+      return data;
+    }
+  }
+  // 从buffer中读出image
+  read_image(idx) {
+    var first_image_idx = this.mobi_header.first_image_idx;
+    var begin = this.reclist[first_image_idx + idx].offset;
+    var end = this.reclist[first_image_idx + idx + 1].offset;
+    var data = new Uint8Array(this.buffer.slice(begin, end));
+    return new Blob([data.buffer]);
+  }
+
+  load() {
+    this.header = this.load_pdbheader();
+    this.reclist = this.load_reclist();
+    this.load_record0();
+  }
+
+  load_pdbheader() {
+    var header = {};
+    header.name = this.getStr(32);
+    header.attr = this.getUint16();
+    header.version = this.getUint16();
+    header.ctime = this.getUint32();
+    header.mtime = this.getUint32();
+    header.btime = this.getUint32();
+    header.mod_num = this.getUint32();
+    header.appinfo_offset = this.getUint32();
+    header.sortinfo_offset = this.getUint32();
+    header.type = this.getStr(4);
+    header.creator = this.getStr(4);
+    header.uid = this.getUint32();
+    header.next_rec = this.getUint32();
+    header.record_num = this.getUint16();
+    return header;
+  }
+
+  load_reclist() {
+    var reclist = [];
+    for (var i = 0; i < this.header.record_num; i++) {
+      var record = {};
+      record.offset = this.getUint32();
+      // TODO(zz) change
+      record.attr = this.getUint32();
+      reclist.push(record);
+    }
+    return reclist;
+  }
+  load_record0() {
+    this.palm_header = this.load_record0_header();
+    this.mobi_header = this.load_mobi_header();
+  }
+
+  load_record0_header() {
+    var p_header = {};
+    var first_record = this.reclist[0];
+    this.setoffset(first_record.offset);
+
+    p_header.compression = this.getUint16();
+    this.skip(2);
+    p_header.text_length = this.getUint32();
+    p_header.record_count = this.getUint16();
+    p_header.record_size = this.getUint16();
+    p_header.encryption_type = this.getUint16();
+    this.skip(2);
+
+    return p_header;
+  }
+
+  load_mobi_header() {
+    var mobi_header = {};
+
+    var start_offset = this.offset;
+
+    mobi_header.identifier = this.getUint32();
+    mobi_header.header_length = this.getUint32();
+    mobi_header.mobi_type = this.getUint32();
+    mobi_header.text_encoding = this.getUint32();
+    mobi_header.uid = this.getUint32();
+    mobi_header.generator_version = this.getUint32();
+
+    this.skip(40);
+
+    mobi_header.first_nonbook_index = this.getUint32();
+    mobi_header.full_name_offset = this.getUint32();
+    mobi_header.full_name_length = this.getUint32();
+
+    mobi_header.language = this.getUint32();
+    mobi_header.input_language = this.getUint32();
+    mobi_header.output_language = this.getUint32();
+    mobi_header.min_version = this.getUint32();
+    mobi_header.first_image_idx = this.getUint32();
+
+    mobi_header.huff_rec_index = this.getUint32();
+    mobi_header.huff_rec_count = this.getUint32();
+    mobi_header.datp_rec_index = this.getUint32();
+    mobi_header.datp_rec_count = this.getUint32();
+
+    mobi_header.exth_flags = this.getUint32();
+
+    this.skip(36);
+
+    mobi_header.drm_offset = this.getUint32();
+    mobi_header.drm_count = this.getUint32();
+    mobi_header.drm_size = this.getUint32();
+    mobi_header.drm_flags = this.getUint32();
+
+    this.skip(8);
+
+    // TODO (zz) fdst_index
+    this.skip(4);
+
+    this.skip(46);
+
+    mobi_header.extra_flags = this.getUint16();
+
+    this.setoffset(start_offset + mobi_header.header_length);
+
+    return mobi_header;
+  }
+  load_exth_header() {
+    // TODO
+    return {};
+  }
+  extractContent(s) {
+    var span = document.createElement("span");
+    span.innerHTML = s;
+    return span.textContent || span.innerText;
+  }
+  render(isElectron = false) {
+    return new Promise((resolve, reject) => {
+      this.load();
+      var content = this.read_text();
+      var bookDoc = domParser.parseFromString(content, "text/html")
+        .documentElement;
+      let lines = Array.from(
+        bookDoc.querySelectorAll("p,b,font,h3,h2,h1")
+      );
+      let parseContent = [];
+      for (let i = 0, len = lines.length; i < len - 1; i++) {
+        lines[i].innerText &&
+          lines[i].innerText !== parseContent[parseContent.length - 1] &&
+          parseContent.push(lines[i].innerText);
+        let imgDoms = lines[i].getElementsByTagName("img");
+        if (imgDoms.length > 0) {
+          for (let i = 0; i < imgDoms.length; i++) {
+            parseContent.push("#image");
+          }
+        }
+      }
+      const handleImage = async () => {
+        var imgDoms = bookDoc.getElementsByTagName("img");
+        parseContent.push("~image");
+        for (let i = 0; i < imgDoms.length; i++) {
+          const src = await this.render_image(imgDoms, i);
+          parseContent.push(
+            src + " " + imgDoms[i].width + " " + imgDoms[i].height
+          );
+        }
+        if (imgDoms.length > 200 || !isElectron) {
+          resolve(bookDoc);
+        } else {
+          resolve(parseContent.join("\n    \n"));
+        }
+      };
+      handleImage();
+    });
+  }
+  render_image = (imgDoms, i) => {
+    return new Promise((resolve, reject) => {
+      var imgDom = imgDoms[i];
+      var idx = +imgDom.getAttribute("recindex");
+      var blob = this.read_image(idx - 1);
+      var imgReader = new FileReader();
+      imgReader.onload = (e) => {
+        imgDom.src = e.target?.result;
+        resolve(e.target?.result);
+      };
+      imgReader.onerror = function (err) {
+        reject(err);
+      };
+      imgReader.readAsDataURL(blob);
+    });
+  };
+}
+
+export default MobiFile;

assets/fonts.css

@@ -0,0 +1,104 @@
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/MaterialIcons.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/MaterialIconsOutlined.woff2) format('woff2');
+}
+
+/* .material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  font-size: 1.5rem;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+.material-icons.text-icon {
+  font-size: 1.15rem;
+}
+.material-icons.text-lg {
+  font-size: 1.25rem;
+}
+.material-icons.text-2xl {
+  font-size: 1.5rem;
+}
+.material-icons.text-3xl {
+  font-size: 1.875rem;
+}
+.material-icons.text-4xl {
+  font-size: 2.25rem;
+}
+.material-icons.text-5xl {
+  font-size: 3rem;
+}
+.material-icons.text-base {
+  font-size: 1rem;
+} */
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
+  font-size: 1.5rem;
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
+  font-size: 1.5rem;
+}
+
+@font-face {
+  font-family: 'Gentium Book Basic';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Gentium Book Basic';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

components/AudioPlayerMini.vue

@@ -1,284 +0,0 @@
-<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-7 w-10 text-center" @mousedown.prevent @mouseup.prevent @click="$emit('selectPlaybackSpeed')">
-            <span class="font-mono text-lg">{{ playbackRate }}x</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,
-      currentPlaybackRate: 1,
-      currentTime: 0,
-      isResetting: 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)
-    },
-    playbackRate() {
-      return this.$store.getters['user/getUserSetting']('playbackRate')
-    }
-  },
-  methods: {
-    updatePlaybackRate() {
-      this.currentPlaybackRate = this.playbackRate
-      MyNativeAudio.setPlaybackSpeed({ speed: this.playbackRate })
-    },
-    restart() {
-      this.seek(0)
-    },
-    backward10() {
-      MyNativeAudio.seekBackward({ amount: '10000' })
-    },
-    forward10() {
-      MyNativeAudio.seekForward({ amount: '10000' })
-    },
-    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.isResetting = false
-      this.initObject = { ...audiobookStreamData }
-      this.currentPlaybackRate = this.initObject.playbackSpeed
-      MyNativeAudio.initPlayer(this.initObject)
-    },
-    setFromObj() {
-      if (!this.initObject) {
-        console.error('Cannot set from obj')
-        return
-      }
-      this.isResetting = false
-      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)
-    },
-    resetStream(startTime) {
-      var _time = String(Math.floor(startTime * 1000))
-      if (!this.initObject) {
-        console.error('Terminate stream when no init object is set...')
-        return
-      }
-      this.isResetting = true
-      this.initObject.currentTime = _time
-      this.terminateStream()
-    },
-    terminateStream() {
-      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.isResetting) {
-          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

@@ -1,26 +1,29 @@
 <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">
+    <div id="appbar" class="absolute top-0 left-0 w-full h-full z-10 flex items-center px-2">
       <nuxt-link v-show="!showBack" to="/" class="mr-3">
         <img src="/Logo.png" class="h-10 w-10" />
       </nuxt-link>
       <a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-2 cursor-pointer">
         <span class="material-icons text-3xl text-white">arrow_back</span>
       </a>
-      <div>
-        <p class="text-lg font-book leading-4">AudioBookshelf</p>
+      <div v-if="socketConnected">
+        <div class="px-4 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+          </svg>
+          <p class="text-lg font-book leading-4 ml-2">{{ currentLibraryName }}</p>
+        </div>
       </div>
       <div class="flex-grow" />
-      <!-- <ui-menu :label="username" :items="menuItems" @action="menuAction" class="ml-5" /> -->
 
-      <nuxt-link to="/account" class="relative w-28 bg-fg border border-gray-500 rounded shadow-sm ml-5 pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
-        <span class="flex items-center">
-          <span class="block truncate">{{ username }}</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>
+      <nuxt-link class="h-7 mx-2" to="/search">
+        <span class="material-icons" style="font-size: 1.75rem">search</span>
       </nuxt-link>
+
+      <div class="h-7 mx-2">
+        <span class="material-icons" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
+      </div>
     </div>
   </div>
 </template>
@@ -28,57 +31,37 @@
 <script>
 export default {
   data() {
-    return {
-      menuItems: [
-        {
-          value: 'account',
-          text: 'Account',
-          to: '/account'
-        },
-        {
-          value: 'logout',
-          text: 'Logout'
-        }
-      ]
-    }
+    return {}
   },
   computed: {
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
+    currentLibrary() {
+      return this.$store.getters['libraries/getCurrentLibrary']
+    },
+    currentLibraryName() {
+      return this.currentLibrary ? this.currentLibrary.name : 'Main'
+    },
     showBack() {
-      return this.$route.name !== 'index'
+      return this.$route.name !== 'index' && !this.$route.name.startsWith('bookshelf')
     },
     user() {
       return this.$store.state.user.user
     },
     username() {
       return this.user ? this.user.username : 'err'
-    },
-    appListingUrl() {
-      if (this.$platform === 'android') {
-        return process.env.ANDROID_APP_URL
-      } else {
-        return process.env.IOS_APP_URL
-      }
     }
   },
   methods: {
+    clickShowSideDrawer() {
+      this.$store.commit('setShowSideDrawer', true)
+    },
+    clickShowLibraryModal() {
+      this.$store.commit('libraries/setShowModal', true)
+    },
     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()
-      }
+      window.history.back()
     }
   },
   mounted() {}
@@ -89,4 +72,47 @@ export default {
 #appbar {
   box-shadow: 0px 5px 5px #11111155;
 }
+.loader-dots div {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.loader-dots div:nth-child(1) {
+  left: 0px;
+  animation: loader-dots1 0.6s infinite;
+}
+.loader-dots div:nth-child(2) {
+  left: 0px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(3) {
+  left: 10px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(4) {
+  left: 20px;
+  animation: loader-dots3 0.6s infinite;
+}
+@keyframes loader-dots1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes loader-dots3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes loader-dots2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(10px, 0);
+  }
+}
 </style>

components/app/AudioPlayer.vue

@@ -0,0 +1,872 @@
+<template>
+  <div class="fixed top-0 bottom-0 left-0 right-0 z-50 pointer-events-none" :class="showFullscreen ? 'fullscreen' : ''">
+    <div v-if="showFullscreen" class="w-full h-full z-10 bg-bg absolute top-0 left-0 pointer-events-auto">
+      <div class="top-2 left-4 absolute cursor-pointer">
+        <span class="material-icons text-5xl" @click="collapseFullscreen">expand_more</span>
+      </div>
+      <div v-show="showCastBtn" class="top-3.5 right-20 absolute cursor-pointer">
+        <span class="material-icons text-3xl" @click="castClick">cast</span>
+      </div>
+      <div class="top-4 right-4 absolute cursor-pointer">
+        <ui-dropdown-menu :items="menuItems" @action="clickMenuAction">
+          <span class="material-icons text-3xl">more_vert</span>
+        </ui-dropdown-menu>
+      </div>
+    </div>
+
+    <div v-if="useChapterTrack && showFullscreen" class="absolute total-track w-full px-3 z-30">
+      <div class="flex">
+        <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ currentTimePretty }}</p>
+        <div class="flex-grow" />
+        <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ totalTimeRemainingPretty }}</p>
+      </div>
+      <div class="w-full">
+        <div class="h-1 w-full bg-gray-500 bg-opacity-50 relative">
+          <div ref="totalReadyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
+          <div ref="totalBufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none" />
+          <div ref="totalPlayedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
+        </div>
+      </div>
+    </div>
+
+    <div class="cover-wrapper absolute z-30 pointer-events-auto" :class="bookCoverAspectRatio === 1 ? 'square-cover' : ''" @click="clickContainer">
+      <div class="cover-container bookCoverWrapper bg-black bg-opacity-75 w-full h-full">
+        <covers-book-cover :audiobook="audiobook" :download-cover="downloadedCover" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+    </div>
+
+    <div class="title-author-texts absolute z-30 left-0 right-0 overflow-hidden">
+      <p class="title-text font-book truncate">{{ title }}</p>
+      <p class="author-text text-white text-opacity-75 truncate">by {{ authorFL }}</p>
+    </div>
+
+    <div id="streamContainer" class="w-full z-20 bg-primary absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" @click="clickContainer">
+      <div v-if="showFullscreen" class="absolute top-0 left-0 right-0 w-full py-3 mx-auto px-3" style="max-width: 380px">
+        <div class="flex items-center justify-between pointer-events-auto">
+          <span class="material-icons text-3xl text-white text-opacity-75 cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
+          <span class="font-mono text-white text-opacity-75 cursor-pointer" style="font-size: 1.35rem" @click="$emit('selectPlaybackSpeed')">{{ currentPlaybackRate }}x</span>
+          <svg v-if="!sleepTimerRunning" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white text-opacity-75 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" @click.stop="$emit('showSleepTimer')">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+          </svg>
+          <div v-else class="h-7 w-7 flex items-center justify-around cursor-pointer" @click.stop="$emit('showSleepTimer')">
+            <p class="text-xl font-mono text-success">{{ sleepTimeRemainingPretty }}</p>
+          </div>
+
+          <span class="material-icons text-3xl text-white cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="$emit('selectChapter')">format_list_bulleted</span>
+        </div>
+      </div>
+
+      <div id="playerControls" class="absolute right-0 bottom-0 py-2">
+        <div class="flex items-center justify-center">
+          <span v-show="showFullscreen" class="material-icons next-icon text-white text-opacity-75 cursor-pointer" :class="loading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
+          <span class="material-icons jump-icon text-white cursor-pointer" :class="loading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="backward10">replay_10</span>
+          <div class="play-btn cursor-pointer shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
+            <span v-if="!loading" class="material-icons">{{ seekLoading ? 'autorenew' : isPaused ? 'play_arrow' : 'pause' }}</span>
+            <widgets-spinner-icon v-else class="h-8 w-8" />
+          </div>
+          <span class="material-icons jump-icon text-white cursor-pointer" :class="loading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="forward10">forward_10</span>
+          <span v-show="showFullscreen" class="material-icons next-icon text-white cursor-pointer" :class="nextChapter && !loading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
+        </div>
+      </div>
+
+      <div id="playerTrack" class="absolute bottom-0 left-0 w-full px-3">
+        <div ref="track" class="h-2 w-full bg-gray-500 bg-opacity-50 relative" :class="loading ? 'animate-pulse' : ''" @click="clickTrack">
+          <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
+          <div ref="bufferedTrack" class="h-full bg-gray-500 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>
+        <div class="flex pt-0.5">
+          <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p>
+          <div class="flex-grow" />
+          <p v-show="showFullscreen" class="text-sm truncate text-white text-opacity-75" style="max-width: 65%">{{ currentChapterTitle }}</p>
+          <div class="flex-grow" />
+          <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MyNativeAudio from '@/plugins/my-native-audio'
+
+export default {
+  props: {
+    playing: Boolean,
+    audiobook: {
+      type: Object,
+      default: () => {}
+    },
+    download: {
+      type: Object,
+      default: () => {}
+    },
+    bookmarks: {
+      type: Array,
+      default: () => []
+    },
+    loading: Boolean,
+    sleepTimerRunning: Boolean,
+    sleepTimerEndTime: Number
+  },
+  data() {
+    return {
+      showCastBtn: false,
+      showFullscreen: false,
+      totalDuration: 0,
+      currentPlaybackRate: 1,
+      currentTime: 0,
+      bufferedTime: 0,
+      isResetting: false,
+      initObject: null,
+      streamId: null,
+      audiobookId: null,
+      stateName: 'idle',
+      playInterval: null,
+      trackWidth: 0,
+      isPaused: true,
+      src: null,
+      volume: 0.5,
+      readyTrackWidth: 0,
+      playedTrackWidth: 0,
+      seekedTime: 0,
+      seekLoading: false,
+      onPlayingUpdateListener: null,
+      onMetadataListener: null,
+      // noSyncUpdateTime: false,
+      touchStartY: 0,
+      touchStartTime: 0,
+      touchEndY: 0,
+      listenTimeInterval: null,
+      listeningTimeSinceLastUpdate: 0,
+      totalListeningTimeInSession: 0,
+      useChapterTrack: false
+    }
+  },
+  computed: {
+    isPlaying: {
+      get() {
+        return this.playing
+      },
+      set(val) {
+        this.$emit('update:playing', val)
+      }
+    },
+    menuItems() {
+      var items = []
+      items.push({
+        text: 'Chapter Track',
+        value: 'chapter_track',
+        icon: this.useChapterTrack ? 'check_box' : 'check_box_outline_blank'
+      })
+      items.push({
+        text: 'Close Player',
+        value: 'close',
+        icon: 'close'
+      })
+      return items
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    bookCoverWidth() {
+      if (this.bookCoverAspectRatio === 1) {
+        return this.showFullscreen ? 260 : 60
+      }
+      return this.showFullscreen ? 200 : 60
+    },
+    book() {
+      return this.audiobook.book || {}
+    },
+    title() {
+      return this.book.title
+    },
+    authorFL() {
+      return this.book.authorFL
+    },
+    chapters() {
+      return this.audiobook ? this.audiobook.chapters || [] : []
+    },
+    currentChapter() {
+      if (!this.audiobook || !this.chapters.length) return null
+      return this.chapters.find((ch) => Number(ch.start.toFixed(2)) <= this.currentTime && Number(ch.end.toFixed(2)) > this.currentTime)
+    },
+    nextChapter() {
+      if (!this.chapters.length) return
+      return this.chapters.find((c) => Number(c.start.toFixed(2)) > this.currentTime)
+    },
+    currentChapterTitle() {
+      return this.currentChapter ? this.currentChapter.title : ''
+    },
+    currentChapterDuration() {
+      return this.currentChapter ? this.currentChapter.end - this.currentChapter.start : this.totalDuration
+    },
+    downloadedCover() {
+      return this.download ? this.download.cover : null
+    },
+    totalDurationPretty() {
+      return this.$secondsToTimestamp(this.totalDuration)
+    },
+    currentTimePretty() {
+      return this.$secondsToTimestamp(this.currentTime)
+    },
+    timeRemaining() {
+      if (this.useChapterTrack && this.currentChapter) {
+        var currChapTime = this.currentTime - this.currentChapter.start
+        return (this.currentChapterDuration - currChapTime) / this.currentPlaybackRate
+      }
+      return this.totalTimeRemaining
+    },
+    totalTimeRemaining() {
+      return (this.totalDuration - this.currentTime) / this.currentPlaybackRate
+    },
+    totalTimeRemainingPretty() {
+      if (this.totalTimeRemaining < 0) {
+        return this.$secondsToTimestamp(this.totalTimeRemaining * -1)
+      }
+      return '-' + this.$secondsToTimestamp(this.totalTimeRemaining)
+    },
+    timeRemainingPretty() {
+      if (this.timeRemaining < 0) {
+        return this.$secondsToTimestamp(this.timeRemaining * -1)
+      }
+      return '-' + this.$secondsToTimestamp(this.timeRemaining)
+    },
+    timeLeftInChapter() {
+      if (!this.currentChapter) return 0
+      return this.currentChapter.end - this.currentTime
+    },
+    sleepTimeRemaining() {
+      if (!this.sleepTimerEndTime) return 0
+      return Math.max(0, this.sleepTimerEndTime / 1000 - this.currentTime)
+    },
+    sleepTimeRemainingPretty() {
+      if (!this.sleepTimeRemaining) return '0s'
+      var secondsRemaining = Math.round(this.sleepTimeRemaining)
+      if (secondsRemaining > 91) {
+        return Math.ceil(secondsRemaining / 60) + 'm'
+      } else {
+        return secondsRemaining + 's'
+      }
+    }
+  },
+  methods: {
+    castClick() {
+      console.log('Cast Btn Click')
+      MyNativeAudio.requestSession()
+    },
+    sendStreamSync(timeListened = 0) {
+      var syncData = {
+        timeListened,
+        currentTime: this.currentTime,
+        streamId: this.streamId,
+        audiobookId: this.audiobookId,
+        totalDuration: this.totalDuration
+      }
+      this.$emit('sync', syncData)
+    },
+    sendAddListeningTime() {
+      var listeningTimeToAdd = Math.floor(this.listeningTimeSinceLastUpdate)
+      this.listeningTimeSinceLastUpdate = Math.max(0, this.listeningTimeSinceLastUpdate - listeningTimeToAdd)
+      this.sendStreamSync(listeningTimeToAdd)
+    },
+    cancelListenTimeInterval() {
+      this.sendAddListeningTime()
+      clearInterval(this.listenTimeInterval)
+      this.listenTimeInterval = null
+    },
+    startListenTimeInterval() {
+      clearInterval(this.listenTimeInterval)
+      var lastTime = this.currentTime
+      var lastTick = Date.now()
+      var noProgressCount = 0
+      this.listenTimeInterval = setInterval(() => {
+        var timeSinceLastTick = Date.now() - lastTick
+        lastTick = Date.now()
+
+        var expectedAudioTime = lastTime + timeSinceLastTick / 1000
+        var currentTime = this.currentTime
+        var differenceFromExpected = expectedAudioTime - currentTime
+        if (currentTime === lastTime) {
+          noProgressCount++
+          if (noProgressCount > 3) {
+            console.error('Audio current time has not increased - cancel interval and pause player')
+            this.pause()
+          }
+        } else if (Math.abs(differenceFromExpected) > 0.1) {
+          noProgressCount = 0
+          console.warn('Invalid time between interval - resync last', differenceFromExpected)
+          lastTime = currentTime
+        } else {
+          noProgressCount = 0
+          var exactPlayTimeDifference = currentTime - lastTime
+          // console.log('Difference from expected', differenceFromExpected, 'Exact play time diff', exactPlayTimeDifference)
+          lastTime = currentTime
+          this.listeningTimeSinceLastUpdate += exactPlayTimeDifference
+          this.totalListeningTimeInSession += exactPlayTimeDifference
+          // console.log('Time since last update:', this.listeningTimeSinceLastUpdate, 'Session listening time:', this.totalListeningTimeInSession)
+          if (this.listeningTimeSinceLastUpdate > 5) {
+            this.sendAddListeningTime()
+          }
+        }
+      }, 1000)
+    },
+    clickContainer() {
+      this.showFullscreen = true
+
+      // Update track for total time bar if useChapterTrack is set
+      this.$nextTick(() => {
+        this.updateTrack()
+      })
+    },
+    collapseFullscreen() {
+      this.showFullscreen = false
+    },
+    jumpNextChapter() {
+      if (this.loading) return
+      if (!this.nextChapter) return
+      this.seek(this.nextChapter.start)
+    },
+    jumpChapterStart() {
+      if (this.loading) return
+      if (!this.currentChapter) {
+        return this.restart()
+      }
+
+      // If 1 second or less into current chapter, then go to previous
+      if (this.currentTime - this.currentChapter.start <= 1) {
+        var currChapterIndex = this.chapters.findIndex((ch) => ch.start <= this.currentTime && ch.end >= this.currentTime)
+        if (currChapterIndex > 0) {
+          var prevChapter = this.chapters[currChapterIndex - 1]
+          this.seek(prevChapter.start)
+        }
+      } else {
+        this.seek(this.currentChapter.start)
+      }
+    },
+    showSleepTimerModal() {
+      this.$emit('showSleepTimer')
+    },
+    setPlaybackSpeed(speed) {
+      console.log(`[AudioPlayer] Set Playback Rate: ${speed}`)
+      this.currentPlaybackRate = speed
+      MyNativeAudio.setPlaybackSpeed({ speed: speed })
+    },
+    restart() {
+      this.seek(0)
+    },
+    backward10() {
+      if (this.loading) return
+      MyNativeAudio.seekBackward({ amount: '10000' })
+    },
+    forward10() {
+      if (this.loading) return
+      MyNativeAudio.seekForward({ amount: '10000' })
+    },
+    setStreamReady() {
+      this.readyTrackWidth = this.trackWidth
+      this.updateReadyTrack()
+    },
+    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.updateReadyTrack()
+    },
+    updateReadyTrack() {
+      if (this.useChapterTrack) {
+        if (this.$refs.totalReadyTrack) {
+          this.$refs.totalReadyTrack.style.width = this.readyTrackWidth + 'px'
+        }
+        this.$refs.readyTrack.style.width = this.trackWidth + 'px'
+      } else {
+        this.$refs.readyTrack.style.width = this.readyTrackWidth + 'px'
+      }
+    },
+    updateTimestamp() {
+      var ts = this.$refs.currentTimestamp
+      if (!ts) {
+        console.error('No timestamp el')
+        return
+      }
+      var currTimeStr = ''
+      if (this.useChapterTrack && this.currentChapter) {
+        var currChapTime = Math.max(0, this.currentTime - this.currentChapter.start)
+        currTimeStr = this.$secondsToTimestamp(currChapTime)
+      } else {
+        currTimeStr = this.$secondsToTimestamp(this.currentTime)
+      }
+      ts.innerText = currTimeStr
+    },
+    timeupdate() {
+      if (!this.$refs.playedTrack) {
+        console.error('Invalid no played track ref')
+        return
+      }
+      this.$emit('updateTime', this.currentTime)
+
+      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.updateTrack()
+    },
+    updateTrack() {
+      var percentDone = this.currentTime / this.totalDuration
+      var totalPercentDone = percentDone
+      var bufferedPercent = this.bufferedTime / this.totalDuration
+      var totalBufferedPercent = bufferedPercent
+
+      if (this.useChapterTrack && this.currentChapter) {
+        var currChapTime = this.currentTime - this.currentChapter.start
+        percentDone = currChapTime / this.currentChapterDuration
+        bufferedPercent = (this.bufferedTime - this.currentChapter.start) / this.currentChapterDuration
+      }
+      var ptWidth = Math.round(percentDone * this.trackWidth)
+      if (this.playedTrackWidth === ptWidth) {
+        return
+      }
+      this.$refs.playedTrack.style.width = ptWidth + 'px'
+      this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px'
+      this.playedTrackWidth = ptWidth
+
+      if (this.useChapterTrack) {
+        if (this.$refs.totalPlayedTrack) this.$refs.totalPlayedTrack.style.width = Math.round(totalPercentDone * this.trackWidth) + 'px'
+        if (this.$refs.totalBufferedTrack) this.$refs.totalBufferedTrack.style.width = Math.round(totalBufferedPercent * this.trackWidth) + 'px'
+      }
+    },
+    seek(time) {
+      if (this.loading) return
+      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')
+      }
+    },
+    clickTrack(e) {
+      if (this.loading) return
+      if (!this.showFullscreen) {
+        // Track not clickable on mini-player
+        return
+      }
+      if (e) e.stopPropagation()
+
+      var offsetX = e.offsetX
+      var perc = offsetX / this.trackWidth
+      var time = 0
+      if (this.useChapterTrack && this.currentChapter) {
+        time = perc * this.currentChapterDuration + this.currentChapter.start
+      } else {
+        time = perc * this.totalDuration
+      }
+      if (isNaN(time) || time === null) {
+        console.error('Invalid time', perc, time)
+        return
+      }
+      this.seek(time)
+    },
+    playPauseClick() {
+      if (this.loading) return
+      if (this.isPaused) {
+        console.log('playPause PLAY')
+        this.play()
+      } else {
+        console.log('playPause PAUSE')
+        this.pause()
+      }
+    },
+    calcSeekBackTime(lastUpdate) {
+      var time = Date.now() - lastUpdate
+      var seekback = 0
+      if (time < 3000) seekback = 0
+      else if (time < 60000) seekback = time / 6
+      else if (time < 300000) seekback = 15000
+      else if (time < 1800000) seekback = 20000
+      else if (time < 3600000) seekback = 25000
+      else seekback = 29500
+      return seekback
+    },
+    async set(audiobookStreamData, stream, fromAppDestroy) {
+      this.isResetting = false
+      this.bufferedTime = 0
+      this.streamId = stream ? stream.id : null
+      this.audiobookId = audiobookStreamData.audiobookId
+      this.initObject = { ...audiobookStreamData }
+
+      var init = true
+      if (!!stream) {
+        //console.log(JSON.stringify(stream))
+        var data = await MyNativeAudio.getStreamSyncData()
+        console.log('getStreamSyncData', JSON.stringify(data))
+        console.log('lastUpdate', stream.lastUpdate || 0)
+        //Same audiobook
+        if (data.id == stream.id && (data.isPlaying || data.lastPauseTime >= (stream.lastUpdate || 0))) {
+          console.log('Same audiobook')
+          this.isPaused = !data.isPlaying
+          this.currentTime = Number((data.currentTime / 1000).toFixed(2))
+          this.totalDuration = Number((data.duration / 1000).toFixed(2))
+          this.$emit('setTotalDuration', this.totalDuration)
+          this.timeupdate()
+          if (data.isPlaying) {
+            console.log('playing - continue')
+            if (fromAppDestroy) this.startPlayInterval()
+          } else console.log('paused and newer')
+          if (!fromAppDestroy) return
+          init = false
+          this.initObject.startTime = String(Math.floor(this.currentTime * 1000))
+        }
+        //new audiobook stream or sync from other client
+        else if (stream.clientCurrentTime > 0) {
+          console.log('new audiobook stream or sync from other client')
+          if (!!stream.lastUpdate) {
+            var backTime = this.calcSeekBackTime(stream.lastUpdate)
+            var currentTime = Math.floor(stream.clientCurrentTime * 1000)
+            if (backTime >= currentTime) backTime = currentTime - 500
+            console.log('SeekBackTime', backTime)
+            this.initObject.startTime = String(Math.floor(currentTime - backTime))
+          }
+        }
+      }
+
+      this.currentPlaybackRate = this.initObject.playbackSpeed
+      console.log(`[AudioPlayer] Set Stream Playback Rate: ${this.currentPlaybackRate}`)
+
+      if (init)
+        MyNativeAudio.initPlayer(this.initObject).then((res) => {
+          if (res && res.success) {
+            console.log('Success init audio player')
+          } else {
+            console.error('Failed to init audio player')
+          }
+        })
+
+      if (audiobookStreamData.isLocal) {
+        this.setStreamReady()
+      }
+    },
+    setFromObj() {
+      if (!this.initObject) {
+        console.error('Cannot set from obj')
+        return
+      }
+      this.isResetting = false
+      MyNativeAudio.initPlayer(this.initObject).then((res) => {
+        if (res && res.success) {
+          console.log('Success init audio player')
+        } else {
+          console.error('Failed to init audio player')
+        }
+      })
+
+      if (audiobookStreamData.isLocal) {
+        this.setStreamReady()
+      }
+    },
+    play() {
+      MyNativeAudio.playPlayer()
+      this.startPlayInterval()
+      this.isPlaying = true
+    },
+    pause() {
+      MyNativeAudio.pausePlayer()
+      this.stopPlayInterval()
+      this.isPlaying = false
+    },
+    startPlayInterval() {
+      this.startListenTimeInterval()
+
+      clearInterval(this.playInterval)
+      this.playInterval = setInterval(async () => {
+        var data = await MyNativeAudio.getCurrentTime()
+        this.currentTime = Number((data.value / 1000).toFixed(2))
+        this.bufferedTime = Number((data.bufferedTime / 1000).toFixed(2))
+        this.timeupdate()
+      }, 1000)
+    },
+    stopPlayInterval() {
+      this.cancelListenTimeInterval()
+      clearInterval(this.playInterval)
+    },
+    resetStream(startTime) {
+      var _time = String(Math.floor(startTime * 1000))
+      if (!this.initObject) {
+        console.error('Terminate stream when no init object is set...')
+        return
+      }
+      this.isResetting = true
+      this.initObject.currentTime = _time
+      this.terminateStream()
+    },
+    terminateStream() {
+      MyNativeAudio.terminateStream()
+    },
+    onPlayingUpdate(data) {
+      this.isPaused = !data.value
+      if (!this.isPaused) {
+        this.startPlayInterval()
+      } else {
+        this.stopPlayInterval()
+      }
+    },
+    onMetadata(data) {
+      this.totalDuration = Number((data.duration / 1000).toFixed(2))
+      this.$emit('setTotalDuration', this.totalDuration)
+      this.currentTime = Number((data.currentTime / 1000).toFixed(2))
+      this.stateName = data.stateName
+
+      if (this.stateName === 'ended' && this.isResetting) {
+        this.setFromObj()
+      }
+
+      this.timeupdate()
+    },
+    async init() {
+      this.useChapterTrack = await this.$localStore.getUseChapterTrack()
+
+      this.onPlayingUpdateListener = MyNativeAudio.addListener('onPlayingUpdate', this.onPlayingUpdate)
+      this.onMetadataListener = MyNativeAudio.addListener('onMetadata', this.onMetadata)
+
+      if (this.$refs.track) {
+        this.trackWidth = this.$refs.track.clientWidth
+      } else {
+        console.error('Track not loaded', this.$refs)
+      }
+    },
+    handleGesture() {
+      var touchDistance = this.touchEndY - this.touchStartY
+      if (touchDistance > 100) {
+        this.collapseFullscreen()
+      }
+    },
+    touchstart(e) {
+      if (!this.showFullscreen || !e.changedTouches) return
+
+      this.touchStartY = e.changedTouches[0].screenY
+      if (this.touchStartY > window.innerHeight / 3) {
+        // console.log('touch too low')
+        return
+      }
+      this.touchStartTime = Date.now()
+    },
+    touchend(e) {
+      if (!this.showFullscreen || !e.changedTouches) return
+
+      this.touchEndY = e.changedTouches[0].screenY
+      var touchDuration = Date.now() - this.touchStartTime
+      if (touchDuration > 1200) {
+        // console.log('touch too long', touchDuration)
+        return
+      }
+      this.handleGesture()
+    },
+    clickMenuAction(action) {
+      if (action === 'chapter_track') {
+        this.useChapterTrack = !this.useChapterTrack
+
+        this.$nextTick(() => {
+          this.updateTimestamp()
+          this.updateTrack()
+          this.updateReadyTrack()
+        })
+        this.$localStore.setUseChapterTrack(this.useChapterTrack)
+      } else if (action === 'close') {
+        this.$emit('close')
+      }
+    }
+  },
+  mounted() {
+    document.body.addEventListener('touchstart', this.touchstart)
+    document.body.addEventListener('touchend', this.touchend)
+
+    this.$nextTick(this.init)
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('touchstart', this.touchstart)
+    document.body.removeEventListener('touchend', this.touchend)
+
+    if (this.onPlayingUpdateListener) this.onPlayingUpdateListener.remove()
+    if (this.onMetadataListener) this.onMetadataListener.remove()
+    clearInterval(this.playInterval)
+  }
+}
+</script>
+
+<style>
+.bookCoverWrapper {
+  box-shadow: 3px -2px 5px #00000066;
+}
+#streamContainer {
+  box-shadow: 0px -8px 8px #11111155;
+  height: 100px;
+}
+.fullscreen #streamContainer {
+  height: 200px;
+}
+
+#playerTrack {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: margin;
+  margin-bottom: 4px;
+}
+.fullscreen #playerTrack {
+  margin-bottom: 18px;
+}
+
+.cover-wrapper {
+  bottom: 44px;
+  left: 12px;
+  height: 96px;
+  width: 60px;
+  transition: all 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: left, bottom, width, height;
+  transform-origin: left bottom;
+}
+.cover-wrapper.square-cover {
+  height: 60px;
+}
+
+.total-track {
+  bottom: 215px;
+  left: 0;
+  right: 0;
+}
+
+.title-author-texts {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: left, bottom, width, height;
+  transform-origin: left bottom;
+
+  width: 40%;
+  bottom: 50px;
+  left: 80px;
+  text-align: left;
+}
+.title-author-texts .title-text {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: font-size;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+.title-author-texts .author-text {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: font-size;
+  font-size: 0.75rem;
+  line-height: 1.2;
+}
+
+.fullscreen .title-author-texts {
+  bottom: 36%;
+  width: 80%;
+  left: 10%;
+  text-align: center;
+}
+.fullscreen .title-author-texts .title-text {
+  font-size: 1.2rem;
+}
+.fullscreen .title-author-texts .author-text {
+  font-size: 1rem;
+}
+
+#playerControls {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: width, bottom;
+  height: 48px;
+  width: 140px;
+  padding-left: 12px;
+  padding-right: 12px;
+  bottom: 45px;
+}
+#playerControls .jump-icon {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: font-size;
+
+  margin: 0px 0px;
+  font-size: 1.6rem;
+}
+#playerControls .play-btn {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: padding, margin, height, width, min-width, min-height;
+
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  margin: 0px 14px;
+  /* padding: 8px; */
+}
+#playerControls .play-btn .material-icons {
+  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-property: font-size;
+
+  font-size: 1.5rem;
+}
+
+.fullscreen .cover-wrapper {
+  bottom: 46%;
+  left: calc(50% - 100px);
+  margin: 0 auto;
+  height: 320px;
+  width: 200px;
+}
+.fullscreen .cover-wrapper.square-cover {
+  height: 260px;
+  width: 260px;
+  left: calc(50% - 130px);
+}
+
+.fullscreen #playerControls {
+  width: 100%;
+  bottom: 100px;
+}
+.fullscreen #playerControls .jump-icon {
+  margin: 0px 18px;
+  font-size: 2.4rem;
+}
+.fullscreen #playerControls .next-icon {
+  margin: 0px 20px;
+  font-size: 2rem;
+}
+.fullscreen #playerControls .play-btn {
+  /* padding: 16px; */
+  height: 65px;
+  width: 65px;
+  min-width: 65px;
+  min-height: 65px;
+  margin: 0px 26px;
+}
+.fullscreen #playerControls .play-btn .material-icons {
+  font-size: 2.1rem;
+}
+</style>

components/app/AudioPlayerContainer.vue

@@ -0,0 +1,509 @@
+<template>
+  <div>
+    <div v-if="audiobook" id="streamContainer">
+      <app-audio-player
+        ref="audioPlayer"
+        :playing.sync="isPlaying"
+        :audiobook="audiobook"
+        :download="download"
+        :loading="isLoading"
+        :bookmarks="bookmarks"
+        :sleep-timer-running="isSleepTimerRunning"
+        :sleep-timer-end-time="sleepTimerEndTime"
+        @close="cancelStream"
+        @sync="sync"
+        @setTotalDuration="setTotalDuration"
+        @selectPlaybackSpeed="showPlaybackSpeedModal = true"
+        @selectChapter="clickChapterBtn"
+        @updateTime="(t) => (currentTime = t)"
+        @showSleepTimer="showSleepTimer"
+        @showBookmarks="showBookmarks"
+        @hook:mounted="audioPlayerMounted"
+      />
+    </div>
+
+    <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-rate.sync="playbackSpeed" @update:playbackRate="updatePlaybackSpeed" @change="changePlaybackSpeed" />
+    <modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :current-time="sleepTimeRemaining" :sleep-timer-running="isSleepTimerRunning" :current-end-of-chapter-time="currentEndOfChapterTime" @change="selectSleepTimeout" @cancel="cancelSleepTimer" @increase="increaseSleepTimer" @decrease="decreaseSleepTimer" />
+    <modals-bookmarks-modal v-model="showBookmarksModal" :audiobook-id="audiobookId" :bookmarks="bookmarks" :current-time="currentTime" @select="selectBookmark" />
+  </div>
+</template>
+
+<script>
+import { Dialog } from '@capacitor/dialog'
+import MyNativeAudio from '@/plugins/my-native-audio'
+
+export default {
+  data() {
+    return {
+      isPlaying: false,
+      audioPlayerReady: false,
+      stream: null,
+      download: null,
+      lastProgressTimeUpdate: 0,
+      showPlaybackSpeedModal: false,
+      showBookmarksModal: false,
+      showSleepTimerModal: false,
+      playbackSpeed: 1,
+      showChapterModal: false,
+      currentTime: 0,
+      isSleepTimerRunning: false,
+      sleepTimerEndTime: 0,
+      onSleepTimerEndedListener: null,
+      onSleepTimerSetListener: null,
+      sleepInterval: null,
+      currentEndOfChapterTime: 0,
+      totalDuration: 0
+    }
+  },
+  watch: {
+    socketConnected(newVal) {
+      if (newVal) {
+        console.log('Socket Connected set listeners')
+        this.setListeners()
+      }
+    }
+  },
+  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    userAudiobook() {
+      if (!this.audiobookId) return
+      return this.$store.getters['user/getUserAudiobookData'](this.audiobookId)
+    },
+    bookmarks() {
+      if (!this.userAudiobook) return []
+      return this.userAudiobook.bookmarks || []
+    },
+    currentChapter() {
+      if (!this.audiobook || !this.chapters.length) return null
+      return this.chapters.find((ch) => ch.start <= this.currentTime && ch.end > this.currentTime)
+    },
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
+    isLoading() {
+      if (this.playingDownload) return false
+      if (!this.streamAudiobook) return false
+      return !this.stream || this.streamAudiobook.id !== this.stream.audiobook.id
+    },
+    playingDownload() {
+      return this.$store.state.playingDownload
+    },
+    audiobook() {
+      if (this.playingDownload) return this.playingDownload.audiobook
+      return this.streamAudiobook
+    },
+    audiobookId() {
+      return this.audiobook ? this.audiobook.id : null
+    },
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    },
+    book() {
+      return this.audiobook ? this.audiobook.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 : ''
+    },
+    chapters() {
+      return this.audiobook ? this.audiobook.chapters || [] : []
+    },
+    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.audiobook ? this.audiobook.duration || 0 : 0
+    },
+    coverForNative() {
+      if (!this.cover) {
+        return `${this.$store.state.serverUrl}/Logo.png`
+      }
+      if (this.cover.startsWith('http')) return this.cover
+      var coverSrc = this.$store.getters['audiobooks/getBookCoverSrc'](this.audiobook)
+      return coverSrc
+    },
+    tracksForCast() {
+      if (!this.audiobook || !this.audiobook.tracks) {
+        return []
+      }
+      var abpath = this.audiobook.path
+      var tracks = this.audiobook.tracks.map((t) => {
+        var trelpath = t.path.replace(abpath, '')
+        if (trelpath.startsWith('/')) trelpath = trelpath.substr(1)
+        return `${this.$store.state.serverUrl}/s/book/${this.audiobook.id}/${trelpath}?token=${this.userToken}`
+      })
+      return tracks
+    },
+    sleepTimeRemaining() {
+      if (!this.sleepTimerEndTime) return 0
+      return Math.max(0, this.sleepTimerEndTime / 1000 - this.currentTime)
+    }
+  },
+  methods: {
+    showBookmarks() {
+      this.showBookmarksModal = true
+    },
+    selectBookmark(bookmark) {
+      this.showBookmarksModal = false
+      if (!bookmark || isNaN(bookmark.time)) return
+      var bookmarkTime = Number(bookmark.time)
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.seek(bookmarkTime)
+      }
+    },
+    onSleepTimerEnded({ value: currentPosition }) {
+      this.isSleepTimerRunning = false
+      if (currentPosition) {
+        console.log('Sleep Timer Ended Current Position: ' + currentPosition)
+        var currentTime = Math.floor(currentPosition / 1000)
+        this.updateTime(currentTime)
+      }
+    },
+    onSleepTimerSet({ value: sleepTimerEndTime }) {
+      console.log('SLEEP TIMER SET', sleepTimerEndTime)
+      if (sleepTimerEndTime === 0) {
+        console.log('Sleep timer canceled')
+        this.isSleepTimerRunning = false
+      } else {
+        this.isSleepTimerRunning = true
+      }
+
+      this.sleepTimerEndTime = sleepTimerEndTime
+    },
+    showSleepTimer() {
+      if (this.currentChapter) {
+        this.currentEndOfChapterTime = Math.floor(this.currentChapter.end)
+      } else {
+        this.currentEndOfChapterTime = 0
+      }
+      this.showSleepTimerModal = true
+    },
+    async selectSleepTimeout({ time, isChapterTime }) {
+      console.log('Setting sleep timer', time, isChapterTime)
+      var res = await MyNativeAudio.setSleepTimer({ time: String(time), isChapterTime })
+      if (!res.success) {
+        return this.$toast.error('Sleep timer did not set, invalid time')
+      }
+    },
+    increaseSleepTimer() {
+      // Default time to increase = 5 min
+      MyNativeAudio.increaseSleepTime({ time: '300000' })
+    },
+    decreaseSleepTimer() {
+      MyNativeAudio.decreaseSleepTime({ time: '300000' })
+    },
+    async cancelSleepTimer() {
+      console.log('Canceling sleep timer')
+      await MyNativeAudio.cancelSleepTimer()
+    },
+    clickChapterBtn() {
+      if (!this.chapters.length) return
+      this.showChapterModal = true
+    },
+    selectChapter(chapter) {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.seek(chapter.start)
+      }
+      this.showChapterModal = false
+    },
+    async cancelStream() {
+      this.currentTime = 0
+
+      if (this.download) {
+        if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.terminateStream()
+        }
+        this.download = null
+        this.$store.commit('setPlayingDownload', null)
+
+        this.$localStore.setCurrent(null)
+      } else {
+        const { value } = await Dialog.confirm({
+          title: 'Confirm',
+          message: 'Cancel this stream?'
+        })
+        if (value) {
+          this.$server.socket.emit('close_stream')
+          this.$store.commit('setStreamAudiobook', null)
+          this.$server.stream = null
+          if (this.$refs.audioPlayer) {
+            this.$refs.audioPlayer.terminateStream()
+          }
+        }
+      }
+    },
+    sync(syncData) {
+      var diff = syncData.currentTime - this.lastServerUpdateSentSeconds
+      if (Math.abs(diff) < 1 && !syncData.timeListened) {
+        // No need to sync
+        return
+      }
+
+      if (this.stream) {
+        this.$server.socket.emit('stream_sync', syncData)
+      } else {
+        var progressUpdate = {
+          audiobookId: syncData.audiobookId,
+          currentTime: syncData.currentTime,
+          totalDuration: syncData.totalDuration,
+          progress: syncData.totalDuration ? Number((syncData.currentTime / syncData.totalDuration).toFixed(3)) : 0,
+          lastUpdate: Date.now(),
+          isRead: false
+        }
+
+        if (this.$server.connected) {
+          this.$server.socket.emit('progress_update', progressUpdate)
+        } else {
+          this.$store.dispatch('user/updateUserAudiobookData', progressUpdate)
+        }
+      }
+    },
+    updateTime(currentTime) {
+      this.sync({
+        currentTime,
+        audiobookId: this.audiobookId,
+        streamId: this.stream ? this.stream.id : null,
+        timeListened: 0,
+        totalDuration: this.totalDuration || 0
+      })
+    },
+    setTotalDuration(duration) {
+      this.totalDuration = duration
+    },
+    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.audioPlayer) {
+        this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
+      }
+    },
+    streamReady() {
+      console.log('[StreamContainer] Stream Ready')
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setStreamReady()
+      }
+    },
+    streamReset({ streamId, startTime }) {
+      if (this.$refs.audioPlayer) {
+        if (this.stream && this.stream.id === streamId) {
+          this.$refs.audioPlayer.resetStream(startTime)
+        }
+      }
+    },
+    async getDownloadStartTime() {
+      var userAudiobook = this.$store.getters['user/getUserAudiobookData'](this.audiobookId)
+      if (!userAudiobook) {
+        console.log('[StreamContainer] getDownloadStartTime no user audiobook record found')
+        return 0
+      }
+      return userAudiobook.currentTime
+    },
+    async playDownload() {
+      if (this.stream) {
+        if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.terminateStream()
+        }
+        this.stream = null
+      }
+
+      this.lastProgressTimeUpdate = 0
+      console.log('[StreamContainer] Playing local', this.playingDownload)
+      if (!this.$refs.audioPlayer) {
+        console.error('No Audio Player Mini')
+        return
+      }
+
+      var playOnLoad = this.$store.state.playOnLoad
+      if (playOnLoad) this.$store.commit('setPlayOnLoad', false)
+
+      var currentTime = await this.getDownloadStartTime()
+      if (isNaN(currentTime) || currentTime === null) currentTime = 0
+      this.currentTime = currentTime
+
+      // Update local current time
+      this.$localStore.setCurrent({
+        audiobookId: this.download.id,
+        lastUpdate: Date.now()
+      })
+
+      var audiobookStreamData = {
+        id: 'download',
+        title: this.title,
+        author: this.author,
+        playWhenReady: !!playOnLoad,
+        startTime: String(Math.floor(currentTime * 1000)),
+        playbackSpeed: this.playbackSpeed || 1,
+        cover: this.download.coverUrl || null,
+        duration: String(Math.floor(this.duration * 1000)),
+        series: this.seriesTxt,
+        token: this.userToken,
+        contentUrl: this.playingDownload.contentUrl,
+        isLocal: true,
+        audiobookId: this.download.id
+      }
+
+      this.$refs.audioPlayer.set(audiobookStreamData, null, false)
+    },
+    streamOpen(stream) {
+      if (this.download) {
+        if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.terminateStream()
+        }
+        this.download = null
+      }
+
+      this.lastProgressTimeUpdate = 0
+      console.log('[StreamContainer] Stream Open: ' + this.title)
+
+      if (!this.$refs.audioPlayer) {
+        console.error('No Audio Player Mini')
+        return
+      }
+
+      // Update local remove current
+      this.$localStore.setCurrent(null)
+
+      var playlistUrl = stream.clientPlaylistUri
+      var currentTime = stream.clientCurrentTime || 0
+      this.currentTime = currentTime
+      var playOnLoad = this.$store.state.playOnLoad
+      if (playOnLoad) this.$store.commit('setPlayOnLoad', false)
+
+      var audiobookStreamData = {
+        id: stream.id,
+        title: this.title,
+        author: this.author,
+        playWhenReady: !!playOnLoad,
+        startTime: String(Math.floor(currentTime * 1000)),
+        playbackSpeed: this.playbackSpeed || 1,
+        cover: this.coverForNative,
+        duration: String(Math.floor(this.duration * 1000)),
+        series: this.seriesTxt,
+        playlistUrl: this.$server.url + playlistUrl,
+        token: this.userToken,
+        audiobookId: this.audiobookId,
+        tracks: this.tracksForCast
+      }
+
+      this.$refs.audioPlayer.set(audiobookStreamData, stream, !this.stream)
+
+      this.stream = stream
+    },
+    audioPlayerMounted() {
+      console.log('Audio Player Mounted', this.$server.stream)
+      this.audioPlayerReady = true
+
+      if (this.playingDownload) {
+        console.log('[StreamContainer] Play download on audio mount')
+        if (!this.download) {
+          this.download = { ...this.playingDownload }
+        }
+        this.playDownload()
+      } else if (this.$server.stream) {
+        console.log('[StreamContainer] Open stream on audio mount')
+        this.streamOpen(this.$server.stream)
+      }
+    },
+    updatePlaybackSpeed(speed) {
+      if (this.$refs.audioPlayer) {
+        console.log(`[AudioPlayerContainer] Update Playback Speed: ${speed}`)
+        this.$refs.audioPlayer.setPlaybackSpeed(speed)
+      }
+    },
+    changePlaybackSpeed(speed) {
+      console.log(`[AudioPlayerContainer] Change Playback Speed: ${speed}`)
+      this.$store.dispatch('user/updateUserSettings', { playbackRate: speed })
+    },
+    settingsUpdated(settings) {
+      console.log(`[AudioPlayerContainer] Settings Update | PlaybackRate: ${settings.playbackRate}`)
+      this.playbackSpeed = settings.playbackRate
+      if (this.$refs.audioPlayer && this.$refs.audioPlayer.currentPlaybackRate !== settings.playbackRate) {
+        console.log(`[AudioPlayerContainer] PlaybackRate Updated: ${this.playbackSpeed}`)
+        this.$refs.audioPlayer.setPlaybackSpeed(this.playbackSpeed)
+      }
+    },
+    streamUpdated(type, data) {
+      if (type === 'download') {
+        if (data) {
+          this.download = { ...data }
+          if (this.audioPlayerReady) {
+            this.playDownload()
+          }
+        } else if (this.download) {
+          this.cancelStream()
+        }
+      }
+    },
+    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)
+    },
+    closeStreamOnly() {
+      // If user logs out or disconnects from server, close audio if streaming
+      if (!this.download) {
+        this.$store.commit('setStreamAudiobook', null)
+        if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.terminateStream()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.onSleepTimerEndedListener = MyNativeAudio.addListener('onSleepTimerEnded', this.onSleepTimerEnded)
+    this.onSleepTimerSetListener = MyNativeAudio.addListener('onSleepTimerSet', this.onSleepTimerSet)
+
+    this.playbackSpeed = this.$store.getters['user/getUserSetting']('playbackRate')
+    console.log(`[AudioPlayerContainer] Init Playback Speed: ${this.playbackSpeed}`)
+
+    this.setListeners()
+    this.$eventBus.$on('close_stream', this.closeStreamOnly)
+    this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
+    this.$store.commit('setStreamListener', this.streamUpdated)
+  },
+  beforeDestroy() {
+    if (this.onSleepTimerEndedListener) this.onSleepTimerEndedListener.remove()
+    if (this.onSleepTimerSetListener) this.onSleepTimerSetListener.remove()
+
+    if (this.$server.socket) {
+      this.$server.socket.off('stream_open', this.streamOpen)
+      this.$server.socket.off('stream_closed', this.streamClosed)
+      this.$server.socket.off('stream_progress', this.streamProgress)
+      this.$server.socket.off('stream_ready', this.streamReady)
+      this.$server.socket.off('stream_reset', this.streamReset)
+    }
+
+    this.$eventBus.$off('close_stream', this.closeStreamOnly)
+    this.$store.commit('user/removeSettingsListener', 'streamContainer')
+    this.$store.commit('removeStreamListener')
+  }
+}
+</script>

components/app/Bookshelf.vue

@@ -1,120 +0,0 @@
-<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"> -->
-          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" :user-progress="userAudiobooks[audiobook.id]" />
-          <!-- <nuxt-link :to="`/audiobook/${audiobook.id}`">
-              <cards-book-cover :audiobook="audiobook" :width="cardWidth" class="mx-auto -mb-px" style="box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166" />
-            </nuxt-link> -->
-          <!-- </div> -->
-        </template>
-        <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
-      </div>
-    </template>
-    <div v-show="!groupedBooks.length" 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'
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
-    }
-  },
-  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/SideDrawer.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="fixed top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden pointer-events-none">
+    <div class="absolute top-0 left-0 w-full h-full bg-black transition-opacity duration-200" :class="show ? 'bg-opacity-60 pointer-events-auto' : 'bg-opacity-0'" @click="clickBackground" />
+    <div class="absolute top-0 right-0 w-64 h-full bg-primary transform transition-transform py-6 pointer-events-auto" :class="show ? '' : 'translate-x-64'" @click.stop>
+      <div class="px-6 mb-4">
+        <p v-if="socketConnected" class="text-base">
+          Welcome, <strong>{{ username }}</strong>
+        </p>
+      </div>
+      <div class="w-full overflow-y-auto">
+        <template v-for="item in navItems">
+          <nuxt-link :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300">
+            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <p class="pl-4">{{ item.text }}</p>
+          </nuxt-link>
+        </template>
+      </div>
+      <div class="absolute bottom-0 left-0 w-full flex items-center py-6 px-6 text-gray-300">
+        <p class="text-xs">{{ $config.version }}</p>
+        <div class="flex-grow" />
+        <div v-if="socketConnected" class="flex items-center" @click="logout">
+          <p class="text-xs pr-2">Logout</p>
+          <span class="material-icons text-sm">logout</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TouchEvent from '@/objects/TouchEvent'
+
+export default {
+  data() {
+    return {
+      touchEvent: null
+    }
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.show = false
+      }
+    },
+    show: {
+      handler(newVal) {
+        if (newVal) this.registerListener()
+        else this.removeListener()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.showSideDrawer
+      },
+      set(val) {
+        this.$store.commit('setShowSideDrawer', val)
+      }
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    username() {
+      return this.user ? this.user.username : ''
+    },
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
+    navItems() {
+      var items = [
+        {
+          icon: 'home',
+          text: 'Home',
+          to: '/bookshelf'
+        },
+        {
+          icon: 'person',
+          text: 'Account',
+          to: '/account'
+        },
+        {
+          icon: 'folder',
+          iconOutlined: true,
+          text: 'Downloads',
+          to: '/downloads'
+        }
+        // {
+        //   icon: 'settings',
+        //   text: 'Settings',
+        //   to: '/config'
+        // }
+      ]
+      if (!this.socketConnected) {
+        items = [
+          {
+            icon: 'cloud_off',
+            text: 'Connect to Server',
+            to: '/connect'
+          }
+        ].concat(items)
+      }
+      return items
+    }
+  },
+  methods: {
+    clickBackground() {
+      this.show = false
+    },
+    async logout() {
+      await this.$axios.$post('/logout').catch((error) => {
+        console.error(error)
+      })
+      this.$server.logout()
+      this.$router.push('/connect')
+    },
+    touchstart(e) {
+      this.touchEvent = new TouchEvent(e)
+    },
+    touchend(e) {
+      if (!this.touchEvent) return
+      this.touchEvent.setEndEvent(e)
+      if (this.touchEvent.isSwipeRight()) {
+        this.show = false
+      }
+      this.touchEvent = null
+    },
+    registerListener() {
+      document.addEventListener('touchstart', this.touchstart)
+      document.addEventListener('touchend', this.touchend)
+    },
+    removeListener() {
+      document.removeEventListener('touchstart', this.touchstart)
+      document.removeEventListener('touchend', this.touchend)
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    this.show = false
+  }
+}
+</script>

components/app/StreamContainer.vue

@@ -1,209 +0,0 @@
-<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" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
-    </div>
-    <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-speed.sync="playbackSpeed" @change="changePlaybackSpeed" />
-  </div>
-</template>
-
-<script>
-import { Dialog } from '@capacitor/dialog'
-
-export default {
-  data() {
-    return {
-      audioPlayerReady: false,
-      stream: null,
-      lastServerUpdateSentSeconds: 0,
-      showPlaybackSpeedModal: false,
-      playbackSpeed: 1
-    }
-  },
-  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')
-        this.$store.commit('setStreamAudiobook', null)
-        if (this.$refs.audioPlayerMini) {
-          this.$refs.audioPlayerMini.terminateStream()
-        }
-      }
-    },
-    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.resetStream(startTime)
-        }
-      }
-    },
-    streamOpen(stream) {
-      console.log('[StreamContainer] Stream Open', stream)
-      if (!this.$refs.audioPlayerMini) {
-        console.error('No Audio Player Mini')
-        return
-      }
-
-      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)),
-        playbackSpeed: this.playbackSpeed || 1,
-        cover: this.coverForNative,
-        duration: String(Math.floor(this.duration * 1000)),
-        series: this.seriesTxt,
-        playlistUrl: this.$server.url + playlistUrl,
-        token: this.$store.getters['user/getToken']
-      }
-
-      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)
-    },
-    changePlaybackSpeed(speed) {
-      this.$store.dispatch('user/updateUserSettings', { playbackRate: speed })
-    },
-    settingsUpdated(settings) {
-      if (this.$refs.audioPlayerMini && this.$refs.audioPlayerMini.currentPlaybackRate !== settings.playbackRate) {
-        this.playbackSpeed = settings.playbackRate
-        this.$refs.audioPlayerMini.updatePlaybackRate()
-      }
-    }
-  },
-  mounted() {
-    this.playbackSpeed = this.$store.getters['user/getUserSetting']('playbackRate')
-
-    this.setListeners()
-    this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
-  },
-  beforeDestroy() {
-    this.$server.socket.off('stream_open', this.streamOpen)
-    this.$server.socket.off('stream_closed', this.streamClosed)
-    this.$server.socket.off('stream_progress', this.streamProgress)
-    this.$server.socket.off('stream_ready', this.streamReady)
-    this.$server.socket.off('stream_reset', this.streamReset)
-
-    this.$store.commit('user/removeSettingsListener', 'streamContainer')
-  }
-}
-</script>

components/bookshelf/LazyBookshelf.vue

@@ -0,0 +1,487 @@
+<template>
+  <div id="bookshelf" class="w-full max-w-full h-full">
+    <template v-for="shelf in totalShelves">
+      <div :key="shelf" class="w-full px-2 bookshelfRow relative" :id="`shelf-${shelf - 1}`" :style="{ height: shelfHeight + 'px' }">
+        <div class="bookshelfDivider w-full absolute bottom-0 left-0 z-30" style="min-height: 16px" :class="`h-${shelfDividerHeightIndex}`" />
+      </div>
+    </template>
+
+    <div v-show="!entities.length && initialized" class="w-full py-16 text-center text-xl">
+      <div class="py-4 capitalize">No {{ entityName }}</div>
+      <ui-btn v-if="hasFilter" @click="clearFilter">Clear Filter</ui-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import bookshelfCardsHelpers from '@/mixins/bookshelfCardsHelpers'
+
+export default {
+  props: {
+    page: String,
+    seriesId: String
+  },
+  mixins: [bookshelfCardsHelpers],
+  data() {
+    return {
+      bookshelfHeight: 0,
+      bookshelfWidth: 0,
+      bookshelfMarginLeft: 0,
+      shelvesPerPage: 0,
+      entitiesPerShelf: 8,
+      currentPage: 0,
+      currentBookWidth: 0,
+      booksPerFetch: 20,
+      initialized: false,
+      currentSFQueryString: null,
+      isFetchingEntities: false,
+      entities: [],
+      totalEntities: 0,
+      totalShelves: 0,
+      entityComponentRefs: {},
+      entityIndexesMounted: [],
+      pagesLoaded: {},
+      isFirstInit: false,
+      pendingReset: false
+    }
+  },
+  computed: {
+    isSocketConnected() {
+      return this.$store.state.socketConnected
+    },
+    isBookEntity() {
+      return this.entityName === 'books' || this.entityName === 'series-books'
+    },
+    shelfDividerHeightIndex() {
+      if (this.isBookEntity) return 4
+      return 6
+    },
+    entityName() {
+      return this.page
+    },
+    bookshelfView() {
+      return this.$store.state.bookshelfView
+    },
+    hasFilter() {
+      return this.filterBy !== 'all'
+    },
+    isListView() {
+      return this.bookshelfView === 'list'
+    },
+    books() {
+      return this.$store.getters['downloads/getAudiobooks']
+    },
+    orderBy() {
+      return this.$store.getters['user/getUserSetting']('mobileOrderBy')
+    },
+    orderDesc() {
+      return this.$store.getters['user/getUserSetting']('mobileOrderDesc')
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('mobileFilterBy')
+    },
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+    },
+    bookCoverAspectRatio() {
+      return this.isCoverSquareAspectRatio ? 1 : 1.6
+    },
+    bookWidth() {
+      // var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      var coverSize = 100
+      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
+      return coverSize
+    },
+    bookHeight() {
+      if (this.isCoverSquareAspectRatio) return this.bookWidth
+      return this.bookWidth * 1.6
+    },
+    entityWidth() {
+      if (this.isBookEntity) return this.bookWidth
+      return this.bookWidth * 2
+    },
+    entityHeight() {
+      return this.bookHeight
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    shelfHeight() {
+      return this.entityHeight + 40
+    },
+    totalEntityCardWidth() {
+      // Includes margin
+      return this.entityWidth + 24
+    },
+    downloads() {
+      return this.$store.getters['downloads/getDownloads']
+    },
+    downloadedBooks() {
+      return this.downloads.map((dl) => {
+        var download = { ...dl }
+        var ab = { ...download.audiobook }
+        delete download.audiobook
+        ab.download = download
+        return ab
+      })
+    }
+  },
+  methods: {
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', {
+        mobileFilterBy: 'all'
+      })
+    },
+    async fetchEntities(page) {
+      var startIndex = page * this.booksPerFetch
+
+      this.isFetchingEntities = true
+
+      if (!this.initialized) {
+        this.currentSFQueryString = this.buildSearchParams()
+      }
+      var entityPath = this.entityName === 'books' ? `books/all` : this.entityName
+      var sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
+      var queryString = `?${sfQueryString}&limit=${this.booksPerFetch}&page=${page}`
+
+      if (this.entityName === 'series-books') {
+        entityPath = `series/${this.seriesId}`
+        queryString = ''
+      }
+
+      var payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${queryString}`).catch((error) => {
+        console.error('failed to fetch books', error)
+        return null
+      })
+      this.isFetchingEntities = false
+      if (this.pendingReset) {
+        this.pendingReset = false
+        this.resetEntities()
+        return
+      }
+      if (payload && payload.results) {
+        console.log('Received payload', payload)
+        if (!this.initialized) {
+          this.initialized = true
+          this.totalEntities = payload.total
+          this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+          this.entities = new Array(this.totalEntities)
+          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        }
+
+        for (let i = 0; i < payload.results.length; i++) {
+          if (this.entityName === 'books' || this.entityName === 'series-books') {
+            // Check if has download and append download obj
+            var download = this.downloads.find((dl) => dl.id === payload.results[i].id)
+            if (download) {
+              var dl = { ...download }
+              delete dl.audiobook
+              payload.results[i].download = dl
+            }
+          }
+
+          var index = i + startIndex
+          this.entities[index] = payload.results[i]
+          if (this.entityComponentRefs[index]) {
+            this.entityComponentRefs[index].setEntity(this.entities[index])
+          }
+        }
+      }
+    },
+    async loadPage(page) {
+      this.pagesLoaded[page] = true
+      await this.fetchEntities(page)
+    },
+    mountEntites(fromIndex, toIndex) {
+      for (let i = fromIndex; i < toIndex; i++) {
+        if (!this.entityIndexesMounted.includes(i)) {
+          this.cardsHelpers.mountEntityCard(i)
+        }
+      }
+    },
+    handleScroll(scrollTop) {
+      this.currScrollTop = scrollTop
+      var firstShelfIndex = Math.floor(scrollTop / this.shelfHeight)
+      var lastShelfIndex = Math.ceil((scrollTop + this.bookshelfHeight) / this.shelfHeight)
+      lastShelfIndex = Math.min(this.totalShelves - 1, lastShelfIndex)
+
+      var firstBookIndex = firstShelfIndex * this.entitiesPerShelf
+      var lastBookIndex = lastShelfIndex * this.entitiesPerShelf + this.entitiesPerShelf
+      lastBookIndex = Math.min(this.totalEntities, lastBookIndex)
+
+      var firstBookPage = Math.floor(firstBookIndex / this.booksPerFetch)
+      var lastBookPage = Math.floor(lastBookIndex / this.booksPerFetch)
+      if (!this.pagesLoaded[firstBookPage]) {
+        console.log('Must load next batch', firstBookPage, 'book index', firstBookIndex)
+        this.loadPage(firstBookPage)
+      }
+      if (!this.pagesLoaded[lastBookPage]) {
+        console.log('Must load last next batch', lastBookPage, 'book index', lastBookIndex)
+        this.loadPage(lastBookPage)
+      }
+
+      this.entityIndexesMounted = this.entityIndexesMounted.filter((_index) => {
+        if (_index < firstBookIndex || _index >= lastBookIndex) {
+          var el = document.getElementById(`book-card-${_index}`)
+          if (el) el.remove()
+          return false
+        }
+        return true
+      })
+      this.mountEntites(firstBookIndex, lastBookIndex)
+    },
+    destroyEntityComponents() {
+      for (const key in this.entityComponentRefs) {
+        if (this.entityComponentRefs[key] && this.entityComponentRefs[key].destroy) {
+          this.entityComponentRefs[key].destroy()
+        }
+      }
+    },
+    setDownloads() {
+      if (this.entityName === 'books') {
+        this.entities = this.downloadedBooks
+        // TOOD: Sort and filter here
+        this.totalEntities = this.entities.length
+        this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+      } else {
+        // TODO: Support offline series and collections
+        this.entities = []
+        this.totalEntities = 0
+        this.totalShelves = 0
+      }
+      this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+    },
+    async resetEntities() {
+      if (this.isFetchingEntities) {
+        this.pendingReset = true
+        return
+      }
+      this.destroyEntityComponents()
+      this.entityIndexesMounted = []
+      this.entityComponentRefs = {}
+      this.pagesLoaded = {}
+      this.entities = []
+      this.totalShelves = 0
+      this.totalEntities = 0
+      this.currentPage = 0
+      this.initialized = false
+
+      this.initSizeData()
+      if (this.isSocketConnected) {
+        await this.loadPage(0)
+        var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+        this.mountEntites(0, lastBookIndex)
+      } else {
+        this.setDownloads()
+
+        this.mountEntites(0, this.totalEntities - 1)
+      }
+    },
+    remountEntities() {
+      // Remount when an entity is removed
+      for (const key in this.entityComponentRefs) {
+        if (this.entityComponentRefs[key]) {
+          this.entityComponentRefs[key].destroy()
+        }
+      }
+      this.entityComponentRefs = {}
+      this.entityIndexesMounted.forEach((i) => {
+        this.cardsHelpers.mountEntityCard(i)
+      })
+    },
+    initSizeData() {
+      var bookshelf = document.getElementById('bookshelf')
+      if (!bookshelf) {
+        console.error('Failed to init size data')
+        return
+      }
+      var entitiesPerShelfBefore = this.entitiesPerShelf
+
+      var { clientHeight, clientWidth } = bookshelf
+      this.bookshelfHeight = clientHeight
+      this.bookshelfWidth = clientWidth
+      this.entitiesPerShelf = Math.floor((this.bookshelfWidth - 16) / this.totalEntityCardWidth)
+
+      this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
+      this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
+
+      this.currentBookWidth = this.bookWidth
+      if (this.totalEntities) {
+        this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+      }
+      return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
+    },
+    async init() {
+      if (this.isFirstInit) return
+      this.isFirstInit = true
+      this.initSizeData()
+
+      await this.loadPage(0)
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.mountEntites(0, lastBookIndex)
+    },
+    initDownloads() {
+      this.initSizeData()
+      this.setDownloads()
+      this.$nextTick(() => {
+        console.log('Mounting downloads', this.totalEntities, 'total shelves', this.totalShelves)
+        this.mountEntites(0, this.totalEntities)
+      })
+    },
+    scroll(e) {
+      if (!e || !e.target) return
+      if (!this.isSocketConnected) return // Offline books are all mounted at once
+      var { scrollTop } = e.target
+      this.handleScroll(scrollTop)
+    },
+    socketInit(isConnected) {
+      if (isConnected) {
+        this.init()
+      } else {
+        this.isFirstInit = false
+        this.resetEntities()
+      }
+    },
+    buildSearchParams() {
+      let searchParams = new URLSearchParams()
+      if (this.filterBy && this.filterBy !== 'all') {
+        searchParams.set('filter', this.filterBy)
+      }
+      if (this.orderBy) {
+        searchParams.set('sort', this.orderBy)
+        searchParams.set('desc', this.orderDesc ? 1 : 0)
+      }
+      return searchParams.toString()
+    },
+    checkUpdateSearchParams() {
+      var newSearchParams = this.buildSearchParams()
+      var currentQueryString = window.location.search
+      if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
+
+      if (newSearchParams === '') {
+        return false
+      }
+      if (newSearchParams !== this.currentSFQueryString || newSearchParams !== currentQueryString) {
+        let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newSearchParams
+        window.history.replaceState({ path: newurl }, '', newurl)
+        return true
+      }
+
+      return false
+    },
+    settingsUpdated(settings) {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      }
+    },
+    libraryChanged(libid) {
+      if (this.hasFilter) {
+        this.clearFilter()
+      } else {
+        this.resetEntities()
+      }
+    },
+    downloadsLoaded() {
+      if (!this.isSocketConnected) {
+        this.resetEntities()
+      }
+    },
+    audiobookAdded(audiobook) {
+      console.log('Audiobook added', audiobook)
+      // TODO: Check if audiobook would be on this shelf
+      this.resetEntities()
+    },
+    audiobookUpdated(audiobook) {
+      console.log('Audiobook updated', audiobook)
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === audiobook.id)
+        if (indexOf >= 0) {
+          this.entities[indexOf] = audiobook
+          if (this.entityComponentRefs[indexOf]) {
+            this.entityComponentRefs[indexOf].setEntity(audiobook)
+          }
+        }
+      }
+    },
+    audiobookRemoved(audiobook) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === audiobook.id)
+        if (indexOf >= 0) {
+          this.entities = this.entities.filter((ent) => ent.id !== audiobook.id)
+          this.totalEntities = this.entities.length
+          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+          this.remountEntities()
+        }
+      }
+    },
+    audiobooksAdded(audiobooks) {
+      console.log('audiobooks added', audiobooks)
+      // TODO: Check if audiobook would be on this shelf
+      this.resetEntities()
+    },
+    audiobooksUpdated(audiobooks) {
+      audiobooks.forEach((ab) => {
+        this.audiobookUpdated(ab)
+      })
+    },
+    initListeners() {
+      var bookshelf = document.getElementById('bookshelf-wrapper')
+      if (bookshelf) {
+        bookshelf.addEventListener('scroll', this.scroll)
+      }
+      // this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+      // this.$eventBus.$on('bookshelf-select-all', this.selectAllEntities)
+      // this.$eventBus.$on('bookshelf-keyword-filter', this.updateKeywordFilter)
+      this.$eventBus.$on('library-changed', this.libraryChanged)
+      this.$eventBus.$on('downloads-loaded', this.downloadsLoaded)
+      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
+
+      if (this.$server.socket) {
+        this.$server.socket.on('audiobook_updated', this.audiobookUpdated)
+        this.$server.socket.on('audiobook_added', this.audiobookAdded)
+        this.$server.socket.on('audiobook_removed', this.audiobookRemoved)
+        this.$server.socket.on('audiobooks_updated', this.audiobooksUpdated)
+        this.$server.socket.on('audiobooks_added', this.audiobooksAdded)
+      } else {
+        console.error('Bookshelf - Socket not initialized')
+      }
+    },
+    removeListeners() {
+      var bookshelf = document.getElementById('bookshelf-wrapper')
+      if (bookshelf) {
+        bookshelf.removeEventListener('scroll', this.scroll)
+      }
+      this.$eventBus.$off('library-changed', this.libraryChanged)
+      this.$eventBus.$off('downloads-loaded', this.downloadsLoaded)
+      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')
+
+      if (this.$server.socket) {
+        this.$server.socket.off('audiobook_updated', this.audiobookUpdated)
+        this.$server.socket.off('audiobook_added', this.audiobookAdded)
+        this.$server.socket.off('audiobook_removed', this.audiobookRemoved)
+        this.$server.socket.off('audiobooks_updated', this.audiobooksUpdated)
+        this.$server.socket.off('audiobooks_added', this.audiobooksAdded)
+      } else {
+        console.error('Bookshelf - Socket not initialized')
+      }
+    }
+  },
+  mounted() {
+    if (this.$server.initialized) {
+      this.init()
+    } else {
+      this.initDownloads()
+    }
+    this.$server.on('initialized', this.socketInit)
+    this.initListeners()
+  },
+  beforeDestroy() {
+    this.$server.off('initialized', this.socketInit)
+    this.removeListeners()
+  }
+}
+</script>

components/bookshelf/Shelf.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="w-full relative">
+    <div class="bookshelfRow flex items-end px-3 max-w-full overflow-x-auto" :style="{ height: shelfHeight + 'px' }">
+      <template v-for="(entity, index) in entities">
+        <cards-lazy-book-card v-if="type === 'books'" :key="entity.id" :index="index" :book-mount="entity" :width="bookWidth" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" is-categorized class="mx-2 relative" />
+        <cards-lazy-series-card v-else-if="type === 'series'" :key="entity.id" :index="index" :series-mount="entity" :width="bookWidth * 2" :height="entityHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" is-categorized class="mx-2 relative" />
+      </template>
+    </div>
+
+    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 18px">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
+        <p class="transform text-xs">{{ label }}</p>
+      </div>
+    </div>
+    <div class="w-full h-5 z-40 bookshelfDivider"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    type: String,
+    entities: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    shelfHeight() {
+      return this.entityHeight + 40
+    },
+    bookWidth() {
+      var coverSize = 100
+      if (this.bookCoverAspectRatio === 1) return coverSize * 1.6
+      return coverSize
+    },
+    bookHeight() {
+      if (this.bookCoverAspectRatio === 1) return this.bookWidth
+      return this.bookWidth * 1.6
+    },
+    entityHeight() {
+      return this.bookHeight
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

components/cards/AuthorSearchCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden shadow-sm">
+    <!-- <img src="/icons/NoUserPhoto.png" class="w-40 h-40 max-h-40 object-contain" style="max-height: 40px; max-width: 40px" /> -->
+    <div style="max-height: 48px; max-width: 48px" class="w-12 h-12 bg-primary overflow-hidden rounded">
+      <svg width="140%" height="140%" style="margin-left: -20%; margin-top: -20%; opacity: 0.6" viewBox="0 0 177 266" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill="white" d="M40.7156 165.47C10.2694 150.865 -31.5407 148.629 -38.0532 155.529L63.3191 204.159L76.9443 190.899C66.828 181.394 54.006 171.846 40.7156 165.47Z" stroke="white" stroke-width="4" transform="translate(-2 -1)" />
+        <path d="M-38.0532 155.529C-31.5407 148.629 10.2694 150.865 40.7156 165.47C54.006 171.846 66.828 181.394 76.9443 190.899L95.0391 173.37C80.6681 159.403 64.7526 149.155 51.5747 142.834C21.3549 128.337 -46.2471 114.563 -60.6897 144.67L-71.5489 167.307L44.5864 223.019L63.3191 204.159L-38.0532 155.529Z" fill="white" />
+        <path
+          d="M105.87 29.6508C80.857 17.6515 50.8784 28.1923 38.879 53.2056C26.8797 78.219 37.4205 108.198 62.4338 120.197C87.4472 132.196 117.426 121.656 129.425 96.6422C141.425 71.6288 130.884 41.6502 105.87 29.6508ZM106.789 85.783C112.761 73.3329 107.461 58.2599 95.0112 52.2874C82.5611 46.3148 67.4881 51.6147 61.5156 64.0648C55.543 76.5149 60.8429 91.5879 73.293 97.5604C85.7431 103.533 100.816 98.2331 106.789 85.783Z"
+          fill="white"
+        />
+        <path
+          d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01ZM181.725 108.497C179.624 108.491 177.436 109.326 175.835 110.918L160.415 126.257L191.848 157.856L207.268 142.517C210.554 139.248 210.568 133.954 207.299 130.667L187.685 110.95C186.009 109.264 183.91 108.502 181.725 108.497ZM151.399 135.226L58.2034 227.931L58.1203 259.447L89.6359 259.53L182.831 166.825L151.399 135.226Z"
+          fill="white"
+        />
+        <path d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01Z" fill="white" stroke="white" stroke-width="10px" />
+      </svg>
+    </div>
+    <div class="flex-grow px-2 authorSearchCardContent h-full">
+      <p class="truncate text-sm">{{ author }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    author: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.authorSearchCardContent {
+  width: calc(100% - 50px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

components/cards/BookCard.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="relative">
-    <!-- New Book Flag -->
-    <div v-if="isNew" class="absolute top-4 left-0 w-4 h-10 pr-2 bg-darkgreen box-shadow-xl">
-      <div class="absolute top-0 left-0 w-full h-full transform -rotate-90 flex items-center justify-center">
-        <p class="text-center text-sm">New</p>
-      </div>
-      <div class="absolute -bottom-4 left-0 triangle-right" />
-    </div>
-
-    <div class="rounded-sm h-full overflow-hidden relative box-shadow-book">
-      <nuxt-link :to="`/audiobook/${audiobookId}`" class="cursor-pointer">
-        <div class="w-full relative" :style="{ height: height + 'px' }">
-          <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
-
-          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
-
-          <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-            <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-          </div>
-        </div>
-      </nuxt-link>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => null
-    },
-    userProgress: {
-      type: Object,
-      default: () => null
-    },
-    width: {
-      type: Number,
-      default: 140
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    isNew() {
-      return this.tags.includes('new')
-    },
-    tags() {
-      return this.audiobook.tags || []
-    },
-    audiobookId() {
-      return this.audiobook.id
-    },
-    book() {
-      return this.audiobook.book || {}
-    },
-    height() {
-      return this.width * 1.6
-    },
-    sizeMultiplier() {
-      return this.width / 120
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
-    },
-    author() {
-      return this.book.author
-    },
-    authorFL() {
-      return this.book.authorFL || this.author
-    },
-    authorLF() {
-      return this.book.authorLF || this.author
-    },
-    authorFormat() {
-      if (!this.orderBy || !this.orderBy.startsWith('book.author')) return null
-      return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
-    },
-    orderBy() {
-      return this.$store.getters['user/getUserSetting']('orderBy')
-    },
-    userProgressPercent() {
-      return this.userProgress ? this.userProgress.progress || 0 : 0
-    },
-    showError() {
-      return this.hasMissingParts || this.hasInvalidParts
-    },
-    hasMissingParts() {
-      return this.audiobook.hasMissingParts
-    },
-    hasInvalidParts() {
-      return this.audiobook.hasInvalidParts
-    },
-    errorText() {
-      var txt = ''
-      if (this.hasMissingParts) {
-        txt = `${this.hasMissingParts} missing parts.`
-      }
-      if (this.hasInvalidParts) {
-        if (this.hasMissingParts) txt += ' '
-        txt += `${this.hasInvalidParts} invalid parts.`
-      }
-      return txt || 'Unknown Error'
-    }
-  },
-  methods: {
-    play() {
-      this.$store.commit('setStreamAudiobook', this.audiobook)
-      this.$root.socket.emit('open_stream', this.audiobookId)
-    }
-  },
-  mounted() {}
-}
-</script>

components/cards/BookCover.vue

@@ -1,144 +0,0 @@
-<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="/Logo.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/cards/BookSearchCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <covers-book-cover :audiobook="audiobook" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="flex-grow px-2 h-full audiobookSearchCardContent">
+      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
+      <p v-else class="truncate text-sm" v-html="matchHtml" />
+
+      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
+
+      <p v-if="matchKey !== 'authorFL'" class="text-xs text-gray-200 truncate">by {{ authorFL }}</p>
+      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
+
+      <div v-if="matchKey === 'series' || matchKey === 'tags'" class="m-0 p-0 truncate" v-html="matchHtml" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    },
+    search: String,
+    matchKey: String,
+    matchText: String
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
+      return 50
+    },
+    book() {
+      return this.audiobook ? this.audiobook.book || {} : {}
+    },
+    title() {
+      return this.book ? this.book.title : 'No Title'
+    },
+    subtitle() {
+      return this.book ? this.book.subtitle : ''
+    },
+    authorFL() {
+      return this.book ? this.book.authorFL : 'Unknown'
+    },
+    matchHtml() {
+      if (!this.matchText || !this.search) return ''
+      if (this.matchKey === 'subtitle') return ''
+      var matchSplit = this.matchText.toLowerCase().split(this.search.toLowerCase().trim())
+      if (matchSplit.length < 2) return ''
+
+      var html = ''
+      var totalLenSoFar = 0
+      for (let i = 0; i < matchSplit.length - 1; i++) {
+        var indexOf = matchSplit[i].length
+        var firstPart = this.matchText.substr(totalLenSoFar, indexOf)
+        var actualWasThere = this.matchText.substr(totalLenSoFar + indexOf, this.search.length)
+        totalLenSoFar += indexOf + this.search.length
+
+        html += `${firstPart}<strong class="text-warning">${actualWasThere}</strong>`
+      }
+      var lastPart = this.matchText.substr(totalLenSoFar)
+      html += lastPart
+
+      if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
+      if (this.matchKey === 'authorFL') return `by ${html}`
+      if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
+      return `${html}`
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.audiobookSearchCardContent {
+  width: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

components/cards/LazyBookCard.vue

@@ -0,0 +1,278 @@
+<template>
+  <div ref="card" :id="`book-card-${index}`" :style="{ width: width + 'px', minWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @click="clickCard">
+    <!-- When cover image does not fill -->
+    <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+      <div class="absolute cover-bg" ref="coverBg" />
+    </div>
+
+    <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
+      <div v-show="audiobook && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
+        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
+      </div>
+
+      <img v-show="audiobook" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="hasCover ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+
+      <!-- Placeholder Cover Title & Author -->
+      <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>
+
+    <!-- Downloaded indicator icon -->
+    <div v-if="hasDownload" class="absolute z-10" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }">
+      <span class="material-icons text-success" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">download_done</span>
+    </div>
+
+    <!-- Progress bar -->
+    <div class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
+
+    <div v-if="showError" :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+      <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+    </div>
+
+    <div v-if="volumeNumber && showVolumeNumber && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ volumeNumber }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: {
+      type: Number,
+      default: 120
+    },
+    height: {
+      type: Number,
+      default: 192
+    },
+    bookCoverAspectRatio: Number,
+    showVolumeNumber: Boolean,
+    bookMount: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      isHovering: false,
+      isMoreMenuOpen: false,
+      isProcessingReadUpdate: false,
+      audiobook: null,
+      imageReady: false,
+      rescanning: false,
+      selected: false,
+      isSelectionMode: false,
+      showCoverBg: false
+    }
+  },
+  computed: {
+    _audiobook() {
+      return this.audiobook || {}
+    },
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    hasDownload() {
+      return !!this._audiobook.download
+    },
+    downloadedCover() {
+      if (!this._audiobook.download) return null
+      return this._audiobook.download.cover
+    },
+    bookCoverSrc() {
+      if (this.downloadedCover) return this.downloadedCover
+      return this.store.getters['audiobooks/getBookCoverSrc'](this._audiobook, this.placeholderUrl)
+    },
+    audiobookId() {
+      return this._audiobook.id
+    },
+    hasEbook() {
+      return this._audiobook.numEbooks
+    },
+    hasTracks() {
+      return this._audiobook.numTracks
+    },
+    book() {
+      return this._audiobook.book || {}
+    },
+    hasCover() {
+      return !!this.book.cover
+    },
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    sizeMultiplier() {
+      var baseSize = this.squareAspectRatio ? 160 : 100
+      return this.width / baseSize
+    },
+    title() {
+      return this.book.title || ''
+    },
+    author() {
+      return this.book.author
+    },
+    authorFL() {
+      return this.book.authorFL || this.author
+    },
+    authorLF() {
+      return this.book.authorLF || this.author
+    },
+    volumeNumber() {
+      return this.book.volumeNumber || null
+    },
+    userProgress() {
+      return this.store.getters['user/getUserAudiobook'](this.audiobookId)
+    },
+    userProgressPercent() {
+      return this.userProgress ? this.userProgress.progress || 0 : 0
+    },
+    userIsRead() {
+      return this.userProgress ? !!this.userProgress.isRead : false
+    },
+    showError() {
+      return this.hasMissingParts || this.hasInvalidParts || this.isMissing || this.isInvalid
+    },
+    isStreaming() {
+      return this.store.getters['getAudiobookIdStreaming'] === this.audiobookId
+    },
+    isMissing() {
+      return this._audiobook.isMissing
+    },
+    isInvalid() {
+      return this._audiobook.isInvalid
+    },
+    hasMissingParts() {
+      return this._audiobook.hasMissingParts
+    },
+    hasInvalidParts() {
+      return this._audiobook.hasInvalidParts
+    },
+    errorText() {
+      if (this.isMissing) return 'Audiobook directory is missing!'
+      else if (this.isInvalid) return 'Audiobook has no audio tracks & ebook'
+      var txt = ''
+      if (this.hasMissingParts) {
+        txt = `${this.hasMissingParts} missing parts.`
+      }
+      if (this.hasInvalidParts) {
+        if (this.hasMissingParts) txt += ' '
+        txt += `${this.hasInvalidParts} invalid parts.`
+      }
+      return txt || 'Unknown Error'
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    userCanUpdate() {
+      return this.store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.store.getters['user/getUserCanDelete']
+    },
+    userCanDownload() {
+      return this.store.getters['user/getUserCanDownload']
+    },
+    userIsRoot() {
+      return this.store.getters['user/getIsRoot']
+    },
+    _socket() {
+      return this.$root.socket || this.$nuxt.$root.socket
+    },
+    titleFontSize() {
+      return 0.75 * this.sizeMultiplier
+    },
+    authorFontSize() {
+      return 0.6 * this.sizeMultiplier
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    },
+    authorBottom() {
+      return 0.75 * this.sizeMultiplier
+    },
+    titleCleaned() {
+      if (!this.title) return ''
+      if (this.title.length > 60) {
+        return this.title.slice(0, 57) + '...'
+      }
+      return this.title
+    },
+    authorCleaned() {
+      if (!this.authorFL) return ''
+      if (this.authorFL.length > 30) {
+        return this.authorFL.slice(0, 27) + '...'
+      }
+      return this.authorFL
+    }
+  },
+  methods: {
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+      if (!val) this.selected = false
+    },
+    setEntity(audiobook) {
+      this.audiobook = audiobook
+    },
+    clickCard(e) {
+      if (this.isSelectionMode) {
+        e.stopPropagation()
+        e.preventDefault()
+        this.selectBtnClick()
+      } else {
+        var router = this.$router || this.$nuxt.$router
+        if (router) router.push(`/audiobook/${this.audiobookId}`)
+      }
+    },
+    selectBtnClick() {
+      this.selected = !this.selected
+      this.$emit('select', this.audiobook)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    },
+    setCoverBg() {
+      if (this.$refs.coverBg) {
+        this.$refs.coverBg.style.backgroundImage = `url("${this.bookCoverSrc}")`
+      }
+    },
+    imageLoaded() {
+      this.imageReady = true
+
+      if (this.$refs.cover && this.bookCoverSrc !== this.placeholderUrl) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+        // 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
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.bookMount) {
+      this.setEntity(this.bookMount)
+    }
+  }
+}
+</script>

components/cards/LazyCollectionCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm cursor-pointer z-30" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      collection: null,
+      isSelectionMode: false,
+      selected: false
+    }
+  },
+  computed: {
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.875
+    },
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    title() {
+      return this.collection ? this.collection.name : ''
+    },
+    books() {
+      return this.collection ? this.collection.books || [] : []
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    setEntity(_collection) {
+      this.collection = _collection
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    clickCard() {
+      if (!this.collection) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/collection/${this.collection.id}`)
+    },
+    clickEdit() {
+      this.$emit('edit', this.collection)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

components/cards/LazySeriesCard.vue

@@ -0,0 +1,100 @@
+<template>
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm cursor-pointer z-30" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number,
+    seriesMount: {
+      type: Object,
+      default: () => null
+    },
+    isCategorized: Boolean
+  },
+  data() {
+    return {
+      series: null,
+      isSelectionMode: false,
+      selected: false,
+      imageReady: false
+    }
+  },
+  computed: {
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.875
+    },
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    title() {
+      return this.series ? this.series.name : ''
+    },
+    books() {
+      return this.series ? this.series.books || [] : []
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    seriesId() {
+      return this.series ? this.$encode(this.series.id) : null
+    },
+    hasValidCovers() {
+      var validCovers = this.books.map((bookItem) => bookItem.book.cover)
+      return !!validCovers.length
+    }
+  },
+  methods: {
+    setEntity(_series) {
+      this.series = _series
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    clickCard() {
+      if (!this.series) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/bookshelf/series/${this.seriesId}`)
+    },
+    imageLoaded() {
+      this.imageReady = true
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.seriesMount) {
+      this.setEntity(this.seriesMount)
+    }
+  },
+  beforeDestroy() {}
+}
+</script>

components/cards/SeriesSearchCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <covers-group-cover :name="series" :book-items="bookItems" :width="80" :height="60" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="flex-grow px-2 seriesSearchCardContent h-full">
+      <p class="truncate text-sm">{{ series }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    series: String,
+    bookItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.seriesSearchCardContent {
+  width: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

components/covers/BookCover.vue

@@ -0,0 +1,383 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+    <div class="w-full h-full relative bg-bg">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
+      </div>
+
+      <img v-if="audiobook" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
+      <div v-show="loading && audiobook" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
+        <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
+        <div class="absolute top-2 right-2">
+          <div class="la-ball-spin-clockwise la-sm">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </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="/Logo.png" loading="lazy" 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 z-10" :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 z-10" :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
+    },
+    bookCoverAspectRatio: Number,
+    downloadCover: String
+  },
+  data() {
+    return {
+      loading: true,
+      imageFailed: false,
+      showCoverBg: false,
+      imageReady: false
+    }
+  },
+  watch: {
+    cover() {
+      this.imageFailed = false
+    }
+  },
+  computed: {
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    height() {
+      return this.width * this.bookCoverAspectRatio
+    },
+    book() {
+      if (!this.audiobook) return {}
+      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'
+    },
+    fullCoverUrl() {
+      if (this.downloadCover) return this.downloadCover
+      if (!this.audiobook) return null
+      var store = this.$store || this.$nuxt.$store
+      return store.getters['audiobooks/getBookCoverSrc'](this.audiobook, this.placeholderUrl)
+    },
+    cover() {
+      return this.book.cover || this.placeholderUrl
+    },
+    hasCover() {
+      return !!this.book.cover
+    },
+    sizeMultiplier() {
+      var baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
+    },
+    titleFontSize() {
+      return 0.75 * this.sizeMultiplier
+    },
+    authorFontSize() {
+      return 0.6 * this.sizeMultiplier
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    },
+    authorBottom() {
+      return 0.75 * this.sizeMultiplier
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    }
+  },
+  methods: {
+    setCoverBg() {
+      if (this.$refs.coverBg) {
+        this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
+      }
+    },
+    hideCoverBg() {},
+    imageLoaded() {
+      this.loading = false
+      this.$nextTick(() => {
+        this.imageReady = true
+      })
+      if (this.$refs.cover && this.cover !== this.placeholderUrl) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+        // 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) {
+      this.loading = false
+      console.error('ImgError', err)
+      this.imageFailed = true
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+/*!
+ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+ * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+ * Licensed under MIT
+ */
+.la-ball-spin-clockwise,
+.la-ball-spin-clockwise > div {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.la-ball-spin-clockwise {
+  display: block;
+  font-size: 0;
+  color: #fff;
+}
+.la-ball-spin-clockwise.la-dark {
+  color: #262626;
+}
+.la-ball-spin-clockwise > div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
+}
+.la-ball-spin-clockwise {
+  width: 32px;
+  height: 32px;
+}
+.la-ball-spin-clockwise > div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  margin-top: -4px;
+  margin-left: -4px;
+  border-radius: 100%;
+  -webkit-animation: ball-spin-clockwise 1s infinite ease-in-out;
+  -moz-animation: ball-spin-clockwise 1s infinite ease-in-out;
+  -o-animation: ball-spin-clockwise 1s infinite ease-in-out;
+  animation: ball-spin-clockwise 1s infinite ease-in-out;
+}
+.la-ball-spin-clockwise > div:nth-child(1) {
+  top: 5%;
+  left: 50%;
+  -webkit-animation-delay: -0.875s;
+  -moz-animation-delay: -0.875s;
+  -o-animation-delay: -0.875s;
+  animation-delay: -0.875s;
+}
+.la-ball-spin-clockwise > div:nth-child(2) {
+  top: 18.1801948466%;
+  left: 81.8198051534%;
+  -webkit-animation-delay: -0.75s;
+  -moz-animation-delay: -0.75s;
+  -o-animation-delay: -0.75s;
+  animation-delay: -0.75s;
+}
+.la-ball-spin-clockwise > div:nth-child(3) {
+  top: 50%;
+  left: 95%;
+  -webkit-animation-delay: -0.625s;
+  -moz-animation-delay: -0.625s;
+  -o-animation-delay: -0.625s;
+  animation-delay: -0.625s;
+}
+.la-ball-spin-clockwise > div:nth-child(4) {
+  top: 81.8198051534%;
+  left: 81.8198051534%;
+  -webkit-animation-delay: -0.5s;
+  -moz-animation-delay: -0.5s;
+  -o-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.la-ball-spin-clockwise > div:nth-child(5) {
+  top: 94.9999999966%;
+  left: 50.0000000005%;
+  -webkit-animation-delay: -0.375s;
+  -moz-animation-delay: -0.375s;
+  -o-animation-delay: -0.375s;
+  animation-delay: -0.375s;
+}
+.la-ball-spin-clockwise > div:nth-child(6) {
+  top: 81.8198046966%;
+  left: 18.1801949248%;
+  -webkit-animation-delay: -0.25s;
+  -moz-animation-delay: -0.25s;
+  -o-animation-delay: -0.25s;
+  animation-delay: -0.25s;
+}
+.la-ball-spin-clockwise > div:nth-child(7) {
+  top: 49.9999750815%;
+  left: 5.0000051215%;
+  -webkit-animation-delay: -0.125s;
+  -moz-animation-delay: -0.125s;
+  -o-animation-delay: -0.125s;
+  animation-delay: -0.125s;
+}
+.la-ball-spin-clockwise > div:nth-child(8) {
+  top: 18.179464974%;
+  left: 18.1803700518%;
+  -webkit-animation-delay: 0s;
+  -moz-animation-delay: 0s;
+  -o-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.la-ball-spin-clockwise.la-sm {
+  width: 16px;
+  height: 16px;
+}
+.la-ball-spin-clockwise.la-sm > div {
+  width: 4px;
+  height: 4px;
+  margin-top: -2px;
+  margin-left: -2px;
+}
+.la-ball-spin-clockwise.la-2x {
+  width: 64px;
+  height: 64px;
+}
+.la-ball-spin-clockwise.la-2x > div {
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+}
+.la-ball-spin-clockwise.la-3x {
+  width: 96px;
+  height: 96px;
+}
+.la-ball-spin-clockwise.la-3x > div {
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+  margin-left: -12px;
+}
+/*
+ * Animation
+ */
+@-webkit-keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+}
+@-moz-keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+}
+@-o-keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -o-transform: scale(0);
+    transform: scale(0);
+  }
+}
+@keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+  }
+}
+</style>

components/covers/CollectionCover.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <div v-if="hasOwnCover" class="w-full h-full relative rounded-sm">
+      <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-else-if="books.length" class="flex justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+
+      <covers-book-cover :audiobook="books[0]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <covers-book-cover v-if="books.length > 1" :audiobook="books[1]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+
+      <p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    hasOwnCover() {
+      return false
+    },
+    fullCoverUrl() {
+      return null
+    },
+    books() {
+      return this.bookItems || []
+    }
+  },
+  methods: {
+    imageError() {},
+    imageLoaded() {}
+  },
+  mounted() {}
+}
+</script>

components/covers/GroupCover.vue

@@ -0,0 +1,225 @@
+<template>
+  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
+    <div v-if="noValidCovers" class="absolute top-0 left-0 w-full h-full flex items-center justify-center box-shadow-book" :style="{ padding: `${sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier + 'rem' }">{{ name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: String,
+    name: String,
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      noValidCovers: false,
+      coverDiv: null,
+      isHovering: false,
+      coverWrapperEl: null,
+      coverImageEls: [],
+      coverWidth: 0,
+      offsetIncrement: 0,
+      isFannedOut: false,
+      isDetached: false,
+      isAttaching: false,
+      windowWidth: 0,
+      isInit: false
+    }
+  },
+  watch: {
+    bookItems: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          // ensure wrapper is initialized
+          this.$nextTick(this.init)
+        }
+      }
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (100 * 1.6 * 2)
+      return this.width / 200
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    router() {
+      return this.$router || this.$nuxt.$router
+    }
+  },
+  methods: {
+    detchCoverWrapper() {
+      if (!this.coverWrapperEl || !this.$refs.wrapper || this.isDetached) return
+
+      this.coverWrapperEl.remove()
+
+      this.isDetached = true
+      document.body.appendChild(this.coverWrapperEl)
+      this.coverWrapperEl.addEventListener('mouseleave', this.mouseleaveCover)
+
+      this.coverWrapperEl.style.position = 'absolute'
+      this.coverWrapperEl.style.zIndex = 40
+
+      this.updatePosition()
+    },
+    attachCoverWrapper() {
+      if (!this.coverWrapperEl || !this.$refs.wrapper || !this.isDetached) return
+
+      this.coverWrapperEl.remove()
+      this.coverWrapperEl.style.position = 'relative'
+      this.coverWrapperEl.style.left = 'unset'
+      this.coverWrapperEl.style.top = 'unset'
+      this.coverWrapperEl.style.width = this.$refs.wrapper.clientWidth + 'px'
+
+      this.$refs.wrapper.appendChild(this.coverWrapperEl)
+
+      this.isDetached = false
+    },
+    updatePosition() {
+      var rect = this.$refs.wrapper.getBoundingClientRect()
+      this.coverWrapperEl.style.top = rect.top + window.scrollY + 'px'
+
+      this.coverWrapperEl.style.left = rect.left + window.scrollX + 4 + 'px'
+
+      this.coverWrapperEl.style.height = rect.height + 'px'
+      this.coverWrapperEl.style.width = rect.width + 'px'
+    },
+    getCoverUrl(book) {
+      return this.store.getters['audiobooks/getBookCoverSrc'](book, '')
+    },
+    async buildCoverImg(coverData, bgCoverWidth, offsetLeft, zIndex, forceCoverBg = false) {
+      var src = coverData.coverUrl
+
+      var showCoverBg =
+        forceCoverBg ||
+        (await new Promise((resolve) => {
+          var image = new Image()
+
+          image.onload = () => {
+            var { naturalWidth, naturalHeight } = image
+            var aspectRatio = naturalHeight / naturalWidth
+            var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+            // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+            if (arDiff > 0.15) {
+              resolve(true)
+            } else {
+              resolve(false)
+            }
+          }
+          image.onerror = (err) => {
+            console.error(err)
+            resolve(false)
+          }
+          image.src = src
+        }))
+
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = bgCoverWidth + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.style.zIndex = zIndex
+      imgdiv.dataset.audiobookId = coverData.id
+      imgdiv.dataset.volumeNumber = coverData.volumeNumber || ''
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
+      // imgdiv.style.transform = 'skew(0deg, 15deg)'
+
+      if (showCoverBg) {
+        var coverbgwrapper = document.createElement('div')
+        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary'
+
+        var coverbg = document.createElement('div')
+        coverbg.className = 'absolute cover-bg'
+        coverbg.style.backgroundImage = `url("${src}")`
+
+        coverbgwrapper.appendChild(coverbg)
+        imgdiv.appendChild(coverbgwrapper)
+      }
+
+      var img = document.createElement('img')
+      img.src = src
+      img.className = 'absolute top-0 left-0 w-full h-full'
+      img.style.objectFit = showCoverBg ? 'contain' : 'cover'
+
+      imgdiv.appendChild(img)
+      return imgdiv
+    },
+    async init() {
+      if (this.isInit) return
+      this.isInit = true
+
+      if (this.coverDiv) {
+        this.coverDiv.remove()
+        this.coverDiv = null
+      }
+      var validCovers = this.bookItems
+        .map((bookItem) => {
+          return {
+            id: bookItem.id,
+            volumeNumber: bookItem.book ? bookItem.book.volumeNumber : null,
+            coverUrl: this.getCoverUrl(bookItem)
+          }
+        })
+        .filter((b) => b.coverUrl !== '')
+      if (!validCovers.length) {
+        this.noValidCovers = true
+        return
+      }
+      this.noValidCovers = false
+
+      var coverWidth = this.width
+      var widthPer = this.width
+      if (validCovers.length > 1) {
+        coverWidth = this.height / this.bookCoverAspectRatio
+        widthPer = (this.width - coverWidth) / (validCovers.length - 1)
+      }
+      this.coverWidth = coverWidth
+      this.offsetIncrement = widthPer
+
+      var outerdiv = document.createElement('div')
+      outerdiv.id = `group-cover-${this.id || this.$encode(this.name)}`
+      this.coverWrapperEl = outerdiv
+      outerdiv.className = 'w-full h-full relative box-shadow-book'
+
+      var coverImageEls = []
+      var offsetLeft = 0
+      for (let i = 0; i < validCovers.length; i++) {
+        offsetLeft = widthPer * i
+        var zIndex = validCovers.length - i
+        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, zIndex, validCovers.length === 1)
+        outerdiv.appendChild(img)
+        coverImageEls.push(img)
+      }
+
+      this.coverImageEls = coverImageEls
+
+      if (this.$refs.wrapper) {
+        this.coverDiv = outerdiv
+        this.$refs.wrapper.appendChild(outerdiv)
+      }
+    }
+  },
+  mounted() {
+    this.windowWidth = window.innerWidth
+  },
+  beforeDestroy() {
+    if (this.coverWrapperEl) this.coverWrapperEl.remove()
+    if (this.coverImageEls && this.coverImageEls.length) {
+      this.coverImageEls.forEach((el) => el.remove())
+    }
+    if (this.coverDiv) this.coverDiv.remove()
+  }
+}
+</script>

components/home/BookshelfNavBar.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="w-full h-9 bg-bg relative">
+    <div id="bookshelf-navbar" class="absolute z-10 top-0 left-0 w-full h-full flex bg-secondary text-gray-200">
+      <nuxt-link to="/bookshelf" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf' ? 'bg-primary' : 'text-gray-400'">
+        <p>Home</p>
+      </nuxt-link>
+      <nuxt-link to="/bookshelf/library" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf-library' ? 'bg-primary' : 'text-gray-400'">
+        <p>Library</p>
+      </nuxt-link>
+      <nuxt-link to="/bookshelf/series" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf-series' ? 'bg-primary' : 'text-gray-400'">
+        <p>Series</p>
+      </nuxt-link>
+      <nuxt-link to="/bookshelf/collections" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf-collections' ? 'bg-primary' : 'text-gray-400'">
+        <p>Collections</p>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    routeName() {
+      return this.$route.name
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+#bookshelf-navbar {
+  box-shadow: 0px 5px 5px #11111155;
+}
+#bookshelf-navbar a {
+  font-size: 0.9rem;
+}
+</style>

components/home/BookshelfToolbar.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="w-full h-9 bg-bg relative z-20">
+    <div id="bookshelf-toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-2">
+      <div class="flex items-center w-full text-sm">
+        <nuxt-link to="/bookshelf/series" v-if="selectedSeriesName" class="pt-1">
+          <span class="material-icons">arrow_back</span>
+        </nuxt-link>
+        <p v-show="!selectedSeriesName" class="font-book pt-1">{{ totalEntities }} {{ entityTitle }}</p>
+        <p v-show="selectedSeriesName" class="ml-2 font-book pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
+        <div class="flex-grow" />
+        <template v-if="page === 'library'">
+          <!-- <span class="material-icons px-2" @click="changeView">{{ viewIcon }}</span> -->
+          <div class="relative flex items-center px-2">
+            <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
+            <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
+          </div>
+          <span class="material-icons px-2" @click="showSortModal = true">sort</span>
+        </template>
+      </div>
+    </div>
+
+    <modals-order-modal v-model="showSortModal" :order-by.sync="settings.mobileOrderBy" :descending.sync="settings.mobileOrderDesc" @change="updateOrder" />
+    <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.mobileFilterBy" @change="updateFilter" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showSortModal: false,
+      showFilterModal: false,
+      settings: {},
+      isListView: false,
+      totalEntities: 0
+    }
+  },
+  computed: {
+    hasFilters() {
+      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
+    },
+    page() {
+      var routeName = this.$route.name || ''
+      return routeName.split('-')[1]
+    },
+    routeQuery() {
+      return this.$route.query || {}
+    },
+    entityTitle() {
+      if (this.page === 'library') return 'Books'
+      else if (this.page === 'series') {
+        return 'Series'
+      } else if (this.page === 'collections') {
+        return 'Collections'
+      }
+      return ''
+    },
+    selectedSeriesName() {
+      if (this.page === 'series' && this.$route.params.id) {
+        return this.$decode(this.$route.params.id)
+      }
+      return null
+    },
+    viewIcon() {
+      return this.isListView ? 'grid_view' : 'view_stream'
+    }
+  },
+  methods: {
+    changeView() {
+      this.isListView = !this.isListView
+
+      var bookshelfView = this.isListView ? 'list' : 'grid'
+      this.$localStore.setBookshelfView(bookshelfView)
+      this.$store.commit('setBookshelfView', bookshelfView)
+    },
+    updateOrder() {
+      this.saveSettings()
+    },
+    updateFilter() {
+      this.saveSettings()
+    },
+    saveSettings() {
+      this.$store.commit('user/setSettings', this.settings) // Immediate update
+      this.$store.dispatch('user/updateUserSettings', this.settings)
+    },
+    async init() {
+      this.settings = { ...this.$store.state.user.settings }
+
+      var bookshelfView = await this.$localStore.getBookshelfView()
+      this.isListView = bookshelfView === 'list'
+      this.bookshelfReady = true
+      this.$store.commit('setBookshelfView', bookshelfView)
+    },
+    settingsUpdated(settings) {
+      for (const key in settings) {
+        this.settings[key] = settings[key]
+      }
+    },
+    setTotalEntities(total) {
+      this.totalEntities = total
+    }
+  },
+  mounted() {
+    this.init()
+    this.$eventBus.$on('bookshelf-total-entities', this.setTotalEntities)
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf-total-entities', this.setTotalEntities)
+    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
+  }
+}
+</script>
+
+<style>
+#bookshelf-toolbar {
+  box-shadow: 0px 5px 5px #11111155;
+}
+</style>

components/modals/BookmarksModal.vue

@@ -0,0 +1,137 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div class="absolute top-5 left-4 z-40">
+        <p class="text-white text-2xl truncate">Bookmarks</p>
+      </div>
+    </template>
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div ref="container" class="w-full rounded-lg bg-primary border border-white border-opacity-20 overflow-y-auto overflow-x-hidden" style="max-height: 80vh" @click.stop.prevent>
+        <div class="w-full h-full p-4" v-show="showBookmarkTitleInput">
+          <div class="flex mb-4 items-center">
+            <div class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-white hover:bg-opacity-10 cursor-pointer" @click.stop="showBookmarkTitleInput = false">
+              <span class="material-icons text-3xl">arrow_back</span>
+            </div>
+            <p class="text-xl pl-2">{{ selectedBookmark ? 'Edit Bookmark' : 'New Bookmark' }}</p>
+            <div class="flex-grow" />
+            <p class="text-xl font-mono">
+              {{ this.$secondsToTimestamp(currentTime) }}
+            </p>
+          </div>
+
+          <ui-text-input-with-label v-model="newBookmarkTitle" label="Note" />
+          <div class="flex justify-end mt-6">
+            <ui-btn color="success" class="w-full" @click.stop="submitBookmark">{{ selectedBookmark ? 'Update' : 'Create' }}</ui-btn>
+          </div>
+        </div>
+        <div class="w-full h-full" v-show="!showBookmarkTitleInput">
+          <template v-for="bookmark in bookmarks">
+            <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @edit="editBookmark" @delete="deleteBookmark" />
+          </template>
+          <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
+            <p class="text-xl">No Bookmarks</p>
+          </div>
+          <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center justify-between border-b border-white border-opacity-10 bg-blue-500 bg-opacity-20 cursor-pointer text-white text-opacity-80 hover:bg-opacity-40 hover:text-opacity-100" @click.stop="createBookmark">
+            <span class="material-icons">add</span>
+            <p class="text-base pl-2">Create Bookmark</p>
+            <p class="text-sm font-mono">
+              {{ this.$secondsToTimestamp(currentTime) }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    bookmarks: {
+      type: Array,
+      default: () => []
+    },
+    currentTime: {
+      type: Number,
+      default: 0
+    },
+    audiobookId: String
+  },
+  data() {
+    return {
+      selectedBookmark: null,
+      showBookmarkTitleInput: false,
+      newBookmarkTitle: ''
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.showBookmarkTitleInput = false
+        this.newBookmarkTitle = ''
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    isConnected() {
+      return this.$store.state.socketConnected
+    },
+    canCreateBookmark() {
+      if (!this.isConnected) return false
+      return !this.bookmarks.find((bm) => bm.time === this.currentTime)
+    }
+  },
+  methods: {
+    editBookmark(bm) {
+      this.selectedBookmark = bm
+      this.newBookmarkTitle = bm.title
+      this.showBookmarkTitleInput = true
+    },
+    deleteBookmark(bm) {
+      var bookmark = { ...bm, audiobookId: this.audiobookId }
+      this.$server.socket.emit('delete_bookmark', bookmark)
+    },
+    clickBookmark(bm) {
+      this.$emit('select', bm)
+    },
+    createBookmark() {
+      this.selectedBookmark = null
+      this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
+      this.showBookmarkTitleInput = true
+    },
+    submitBookmark() {
+      console.log(`[BookmarksModal] Submit Bookmark ${this.newBookmarkTitle}/${this.audiobookId}`)
+      if (this.selectedBookmark) {
+        if (this.selectedBookmark.title !== this.newBookmarkTitle) {
+          var bookmark = { ...this.selectedBookmark }
+          bookmark.audiobookId = this.audiobookId
+          bookmark.title = this.newBookmarkTitle
+          console.log(`[BookmarksModal] Update Bookmark ${JSON.stringify(bookmark)}`)
+          this.$server.socket.emit('update_bookmark', bookmark)
+        }
+      } else {
+        var bookmark = {
+          audiobookId: this.audiobookId,
+          title: this.newBookmarkTitle,
+          time: this.currentTime
+        }
+        console.log(`[BookmarksModal] Create Bookmark ${JSON.stringify(bookmark)}`)
+        this.$server.socket.emit('create_bookmark', bookmark)
+      }
+      this.newBookmarkTitle = ''
+      this.showBookmarkTitleInput = false
+      this.show = false
+    }
+  },
+  mounted() {}
+}
+</script>

components/modals/ChaptersModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div v-if="currentChapter" class="absolute top-7 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">Current: {{ currentChapterTitle }}</p>
+      </div>
+    </template>
+
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div ref="container" 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 class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="chapter in chapters">
+            <li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="currentChapterId === chapter.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
+              <div class="relative flex items-center pl-3" style="padding-right: 4.5rem">
+                <p class="font-normal block truncate text-sm text-white text-opacity-80">{{ chapter.title }}</p>
+                <div class="absolute top-0 right-3 -mt-0.5">
+                  <span class="font-mono text-white text-opacity-90 leading-3" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start) }}</span>
+                </div>
+              </div>
+
+              <div v-show="chapter.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    chapters: {
+      type: Array,
+      default: () => []
+    },
+    currentChapter: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    value(newVal) {
+      this.$nextTick(this.scrollToChapter)
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    currentChapterId() {
+      return this.currentChapter ? this.currentChapter.id : null
+    },
+    currentChapterTitle() {
+      return this.currentChapter ? this.currentChapter.title : null
+    }
+  },
+  methods: {
+    clickedOption(chapter) {
+      this.$emit('select', chapter)
+    },
+    scrollToChapter() {
+      if (!this.currentChapterId) return
+
+      var container = this.$refs.container
+      if (container) {
+        var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
+        if (currChapterEl) {
+          var offsetTop = currChapterEl.offsetTop
+          var containerHeight = container.clientHeight
+          container.scrollTo({ top: offsetTop - containerHeight / 2 })
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

components/modals/DownloadsModal.vue

@@ -0,0 +1,254 @@
+<template>
+  <modals-modal v-model="show" width="100%" height="100%">
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <p class="absolute top-6 left-2 text-2xl">Downloads</p>
+
+      <div class="absolute top-16 left-0 right-0 w-full px-2 py-1" :class="hasStoragePermission ? '' : 'text-error'">
+        <div class="flex items-center">
+          <span class="material-icons" @click="changeDownloadFolderClick">{{ hasStoragePermission ? 'folder' : 'error' }}</span>
+          <p v-if="hasStoragePermission" class="text-sm px-4" @click="changeDownloadFolderClick">{{ downloadFolderSimplePath || 'No Download Folder Selected' }}</p>
+          <p v-else class="text-sm px-4" @click="changeDownloadFolderClick">No Storage Permissions. Click here</p>
+        </div>
+        <!-- <p v-if="hasStoragePermission" class="text-xs text-gray-400 break-all max-w-full">{{ downloadFolderUri }}</p> -->
+      </div>
+
+      <div v-if="totalSize" class="absolute bottom-0 left-0 right-0 w-full py-3 text-center">
+        <p class="text-sm text-center text-gray-300">Total: {{ $bytesPretty(totalSize) }}</p>
+      </div>
+
+      <div v-if="downloadFolder && hasStoragePermission" class="w-full relative mt-10" @click.stop>
+        <div class="w-full h-10 relative">
+          <div class="absolute top-px left-0 z-10 w-full h-full flex">
+            <div class="flex-grow h-full bg-primary rounded-t-md mr-px" @click="showingDownloads = true">
+              <div class="flex items-center justify-center rounded-t-md border-t border-l border-r border-white border-opacity-20 h-full" :class="showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
+                <p>Downloads</p>
+              </div>
+            </div>
+            <div class="flex-grow h-full bg-primary rounded-t-md ml-px" @click="showingDownloads = false">
+              <div class="flex items-center justify-center h-full rounded-t-md border-t border-l border-r border-white border-opacity-20" :class="!showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
+                <p>Files</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="list-content-body relative w-full overflow-x-hidden overflow-y-auto bg-primary rounded-b-lg border border-white border-opacity-20" style="max-height: 70vh; height: 70vh">
+          <template v-if="showingDownloads">
+            <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
+              <p>No Downloads</p>
+            </div>
+            <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+              <template v-for="download in downloadsDownloading">
+                <li :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
+                  <div class="flex items-center justify-center">
+                    <div class="w-3/4">
+                      <span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
+                      <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
+                    </div>
+                    <div class="flex-grow" />
+
+                    <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
+                      <span class="material-icons">refresh</span>
+                    </div>
+                  </div>
+                </li>
+              </template>
+              <template v-for="download in downloadsReady">
+                <li :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
+                  <modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
+                </li>
+              </template>
+            </ul>
+          </template>
+          <template v-else>
+            <div class="w-full h-full">
+              <div class="w-full flex justify-around py-4 px-2">
+                <ui-btn small @click="searchFolder">Re-Scan</ui-btn>
+                <ui-btn small @click="changeDownloadFolderClick">Change Folder</ui-btn>
+                <ui-btn small color="error" @click="resetFolder">Reset</ui-btn>
+              </div>
+              <p v-if="isScanning" class="text-center my-8">Scanning Folder..</p>
+              <p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
+              <template v-else>
+                <template v-for="mediaFolder in mediaScanResults.folders">
+                  <div :key="mediaFolder.uri" class="w-full px-2 py-2">
+                    <div class="flex items-center">
+                      <span class="material-icons text-base text-white text-opacity-50">folder</span>
+                      <p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
+                    </div>
+                    <div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 flex items-center">
+                      <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
+                      <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
+                    </div>
+                  </div>
+                </template>
+                <template v-for="mediaFile in mediaScanResults.files">
+                  <div :key="mediaFile.uri" class="w-full px-2 py-2">
+                    <div class="flex items-center">
+                      <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
+                      <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
+                    </div>
+                  </div>
+                </template>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div v-else class="list-content-body relative w-full overflow-x-hidden overflow-y-auto bg-primary rounded-b-lg border border-white border-opacity-20 py-8 px-4" @click.stop>
+        <ui-btn class="w-full" color="info" @click="changeDownloadFolderClick">Select Folder</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+import { Dialog } from '@capacitor/dialog'
+import AudioDownloader from '@/plugins/audio-downloader'
+import StorageManager from '@/plugins/storage-manager'
+
+export default {
+  data() {
+    return {
+      downloadingProgress: {},
+      totalSize: 0,
+      showingDownloads: true,
+      isScanning: false
+    }
+  },
+  watch: {
+    async show(newValue) {
+      if (newValue) {
+        await this.$localStore.getDownloadFolder()
+        this.setTotalSize()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.downloads.showModal
+      },
+      set(val) {
+        this.$store.commit('downloads/setShowModal', val)
+      }
+    },
+    hasStoragePermission() {
+      return this.$store.state.hasStoragePermission
+    },
+    downloadFolder() {
+      return this.$store.state.downloadFolder
+    },
+    downloadFolderSimplePath() {
+      return this.downloadFolder ? this.downloadFolder.simplePath : null
+    },
+    downloadFolderUri() {
+      return this.downloadFolder ? this.downloadFolder.uri : null
+    },
+    totalDownloads() {
+      return this.downloadsReady.length + this.downloadsDownloading.length
+    },
+    downloadsDownloading() {
+      return this.downloads.filter((d) => d.isDownloading || d.isPreparing)
+    },
+    downloadsReady() {
+      return this.downloads.filter((d) => !d.isDownloading && !d.isPreparing)
+    },
+    downloads() {
+      return this.$store.state.downloads.downloads
+    },
+    mediaScanResults() {
+      return this.$store.state.downloads.mediaScanResults
+    }
+  },
+  methods: {
+    setTotalSize() {
+      var totalSize = 0
+      this.downloadsReady.forEach((dl) => {
+        totalSize += dl.size && !isNaN(dl.size) ? Number(dl.size) : 0
+      })
+      this.totalSize = totalSize
+    },
+    async changeDownloadFolderClick() {
+      if (!this.hasStoragePermission) {
+        console.log('Requesting Storage Permission')
+        StorageManager.requestStoragePermission()
+      } else {
+        var folderObj = await StorageManager.selectFolder()
+        if (folderObj.error) {
+          return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
+        }
+
+        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.uri })
+        console.log('Storage Permission check folder ' + permissionsGood)
+
+        if (!permissionsGood) {
+          this.$toast.error('Folder permissions failed')
+          return
+        } else {
+          this.$toast.success('Folder permission success')
+        }
+
+        await this.$localStore.setDownloadFolder(folderObj)
+
+        this.searchFolder()
+      }
+    },
+    async searchFolder() {
+      this.isScanning = true
+      var response = await StorageManager.searchFolder({ folderUrl: this.downloadFolderUri })
+      var searchResults = response
+      searchResults.folders = JSON.parse(searchResults.folders)
+      searchResults.files = JSON.parse(searchResults.files)
+
+      if (searchResults.folders.length) {
+        console.log('Search results folders length', searchResults.folders.length)
+
+        searchResults.folders = searchResults.folders.map((sr) => {
+          if (sr.files) {
+            sr.files = JSON.parse(sr.files)
+          }
+          return sr
+        })
+        this.$store.commit('downloads/setMediaScanResults', searchResults)
+      } else {
+        this.$toast.warning('No audio or image files found')
+      }
+      this.isScanning = false
+    },
+    async resetFolder() {
+      await this.$localStore.setDownloadFolder(null)
+      this.$store.commit('downloads/setMediaScanResults', {})
+      this.$toast.info('Unlinked Folder')
+    },
+    updateDownloadProgress({ audiobookId, progress }) {
+      this.$set(this.downloadingProgress, audiobookId, progress)
+    },
+    jumpToAudiobook(download) {
+      this.show = false
+      this.$router.push(`/audiobook/${download.id}`)
+    },
+    async clickDeleteDownload(download) {
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: 'Delete this download?'
+      })
+      if (value) {
+        this.$emit('deleteDownload', download)
+      }
+    },
+    playDownload(download) {
+      this.$store.commit('setPlayOnLoad', true)
+      this.$store.commit('setPlayingDownload', download)
+      this.show = false
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+.list-content-body {
+  max-height: calc(75% - 40px);
+}
+</style>

components/modals/FilterModal.vue

@@ -31,13 +31,13 @@
           </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>
+              <span class="font-normal block truncate py-5 text-lg">No {{ sublist }} items</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)">
+            <li :key="item.value" class="text-gray-50 select-none relative px-4 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
               <div class="flex items-center">
-                <span class="font-normal truncate py-3 text-base">{{ snakeToNormal(item) }}</span>
+                <span class="font-normal truncate py-3 text-base">{{ item.text }}</span>
               </div>
             </li>
           </template>
@@ -75,6 +75,26 @@ export default {
           text: 'Series',
           value: 'series',
           sublist: true
+        },
+        {
+          text: 'Authors',
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: 'Narrator',
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: 'Progress',
+          value: 'progress',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
         }
       ]
     }
@@ -108,16 +128,33 @@ export default {
       return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
     },
     genres() {
-      return this.$store.state.audiobooks.genres
+      return this.filterData.genres || []
     },
     tags() {
-      return this.$store.state.audiobooks.tags
+      return this.filterData.tags || []
     },
     series() {
-      return this.$store.state.audiobooks.series
+      return this.filterData.series || []
+    },
+    authors() {
+      return this.filterData.authors || []
+    },
+    narrators() {
+      return this.filterData.narrators || []
+    },
+    progress() {
+      return ['Read', 'Unread', 'In Progress']
     },
     sublistItems() {
-      return this[this.sublist] || []
+      return (this[this.sublist] || []).map((item) => {
+        return {
+          text: item,
+          value: this.$encode(item)
+        }
+      })
+    },
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
     }
   },
   methods: {
@@ -126,15 +163,6 @@ export default {
       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}` })
     },

components/modals/LibrariesModal.vue

@@ -0,0 +1,63 @@
+<template>
+  <modals-modal v-model="show" :width="300" :processing="processing" height="100%">
+    <template #outer>
+      <div class="absolute top-4 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-2xl truncate">Libraries</p>
+      </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 class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="library in libraries">
+            <li :key="library.id" class="text-gray-50 select-none relative py-3 cursor-pointer hover:bg-black-400" :class="currentLibraryId === library.id ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(library)">
+              <div v-show="currentLibraryId === library.id" class="absolute top-0 left-0 w-0.5 bg-warning h-full" />
+              <div class="flex items-center px-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+                </svg>
+
+                <span class="font-normal block truncate text-lg ml-4">{{ library.name }}</span>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.libraries.showModal
+      },
+      set(val) {
+        this.$store.commit('libraries/setShowModal', val)
+      }
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    libraries() {
+      return this.$store.state.libraries.libraries
+    }
+  },
+  methods: {
+    async clickedOption(lib) {
+      this.show = false
+      await this.$store.dispatch('libraries/fetch', lib.id)
+      this.$eventBus.$emit('library-changed', lib.id)
+      this.$localStore.setCurrentLibrary(lib)
+    }
+  },
+  mounted() {}
+}
+</script>

components/modals/Modal.vue

@@ -1,6 +1,6 @@
 <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 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-50 opacity-0">
+    <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent 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>

components/modals/OrderModal.vue

@@ -7,8 +7,8 @@
             <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 v-if="item.value === selected" class="text-yellow-300 absolute inset-y-0 right-0 flex items-center pr-4">
+              <span class="material-icons text-3xl">{{ descending ? 'south' : 'north' }}</span>
             </span>
           </li>
         </template>
@@ -43,6 +43,10 @@ export default {
           text: 'Added At',
           value: 'addedAt'
         },
+        {
+          text: 'Volume #',
+          value: 'book.volumeNumber'
+        },
         {
           text: 'Duration',
           value: 'duration'
@@ -50,6 +54,10 @@ export default {
         {
           text: 'Size',
           value: 'size'
+        },
+        {
+          text: 'Last Read',
+          value: 'recent'
         }
       ]
     }
@@ -85,6 +93,7 @@ export default {
       if (this.selected === val) {
         this.selectedDesc = !this.selectedDesc
       } else {
+        if (val === 'recent' || val === 'addedAt') this.selectedDesc = true // Progress defaults to descending
         this.selected = val
       }
       this.show = false

components/modals/PlaybackSpeedModal.vue

@@ -1,16 +1,33 @@
 <template>
   <modals-modal v-model="show" :width="200" height="100%">
-    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+    <template #outer>
+      <div class="absolute top-5 left-4 z-40">
+        <p class="text-white text-2xl truncate">Playback Speed</p>
+      </div>
+    </template>
+
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="closeMenu">
       <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 class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <ul class="w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="rate in rates">
-            <li :key="rate" class="text-gray-50 select-none relative py-4 pr-9 cursor-pointer hover:bg-black-400" :class="rate === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(rate)">
+            <li :key="rate" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="rate === selected ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(rate)">
               <div class="flex items-center justify-center">
-                <span class="font-normal ml-3 block truncate text-lg">{{ rate }}x</span>
+                <span class="font-normal block truncate text-lg">{{ rate }}x</span>
               </div>
             </li>
           </template>
         </ul>
+        <div class="flex items-center justify-center py-3 border-t border-white border-opacity-10">
+          <button :disabled="!canDecrement" @click="decrement" class="icon-num-btn w-8 h-8 text-white text-opacity-75 rounded border border-white border-opacity-20 flex items-center justify-center">
+            <span class="material-icons">remove</span>
+          </button>
+          <div class="w-24 text-center">
+            <p class="text-xl">{{ playbackRate }}<span class="text-lg">⨯</span></p>
+          </div>
+          <button :disabled="!canIncrement" @click="increment" class="icon-num-btn w-8 h-8 text-white text-opacity-75 rounded border border-white border-opacity-20 flex items-center justify-center">
+            <span class="material-icons">add</span>
+          </button>
+        </div>
       </div>
     </div>
   </modals-modal>
@@ -20,10 +37,21 @@
 export default {
   props: {
     value: Boolean,
-    playbackSpeed: Number
+    playbackRate: Number
   },
   data() {
-    return {}
+    return {
+      currentPlaybackRate: 0,
+      MIN_SPEED: 0.5,
+      MAX_SPEED: 3
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.currentPlaybackRate = this.selected
+      }
+    }
   },
   computed: {
     show: {
@@ -36,27 +64,56 @@ export default {
     },
     selected: {
       get() {
-        return this.playbackSpeed
+        return this.playbackRate
       },
       set(val) {
-        this.$emit('update:playbackSpeed', val)
+        this.$emit('update:playbackRate', val)
       }
     },
     rates() {
-      return [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      return [0.5, 1, 1.2, 1.5, 2]
+    },
+    canIncrement() {
+      return this.playbackRate + 0.1 <= this.MAX_SPEED
+    },
+    canDecrement() {
+      return this.playbackRate - 0.1 >= this.MIN_SPEED
     }
   },
   methods: {
-    clickedOption(speed) {
-      if (this.selected === speed) {
-        this.show = false
-        return
+    increment() {
+      if (this.selected + 0.1 > this.MAX_SPEED) return
+      var newPlaybackRate = this.selected + 0.1
+      this.selected = Number(newPlaybackRate.toFixed(1))
+    },
+    decrement() {
+      if (this.selected - 0.1 < this.MIN_SPEED) return
+      var newPlaybackRate = this.selected - 0.1
+      this.selected = Number(newPlaybackRate.toFixed(1))
+    },
+    closeMenu() {
+      if (this.currentPlaybackRate !== this.selected) {
+        this.$emit('change', this.selected)
       }
-      this.selected = speed
       this.show = false
-      this.$nextTick(() => this.$emit('change', speed))
+    },
+    clickedOption(rate) {
+      this.selected = Number(rate)
+      this.$nextTick(this.closeMenu)
     }
   },
   mounted() {}
 }
 </script>
+
+<style>
+button.icon-num-btn:disabled {
+  cursor: not-allowed;
+}
+button.icon-num-btn:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+button.icon-num-btn:disabled span {
+  color: #777;
+}
+</style>

components/modals/SleepTimerModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <modals-modal v-model="show" :width="200" height="100%">
+    <template #outer>
+      <div class="absolute top-5 left-4 z-40">
+        <p class="text-white text-2xl truncate">Sleep Timer</p>
+      </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-if="!sleepTimerRunning" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="timeout in timeouts">
+            <li :key="timeout" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(timeout)">
+              <div class="flex items-center justify-center">
+                <span class="font-normal block truncate text-lg">{{ timeout }} min</span>
+              </div>
+            </li>
+          </template>
+          <li v-if="currentEndOfChapterTime" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedChapterOption(timeout)">
+            <div class="flex items-center justify-center">
+              <span class="font-normal block truncate text-lg text-center">End of Chapter</span>
+            </div>
+          </li>
+        </ul>
+        <div v-else class="px-2 py-4">
+          <div class="flex my-2 justify-between">
+            <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <p class="text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
+            <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+          </div>
+
+          <ui-btn @click="cancelSleepTimer" class="w-full">Cancel Timer</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    currentTime: Number,
+    sleepTimerRunning: Boolean,
+    currentEndOfChapterTime: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    timeouts() {
+      return [1, 5, 10, 15, 30, 45, 60, 90]
+    },
+    timeRemainingPretty() {
+      return this.$secondsToTimestamp(this.currentTime)
+    }
+  },
+  methods: {
+    clickedChapterOption() {
+      this.show = false
+      this.$nextTick(() => this.$emit('change', { time: this.currentEndOfChapterTime * 1000, isChapterTime: true }))
+    },
+    clickedOption(timeoutMin) {
+      var timeout = timeoutMin * 1000 * 60
+      this.show = false
+      this.$nextTick(() => this.$emit('change', { time: timeout, isChapterTime: false }))
+    },
+    cancelSleepTimer() {
+      this.$emit('cancel')
+      this.show = false
+    },
+    increaseSleepTime() {
+      this.$emit('increase')
+    },
+    decreaseSleepTime() {
+      this.$emit('decrease')
+    }
+  },
+  mounted() {}
+}
+</script>

components/modals/bookmarks/BookmarkItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
+    <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span>
+    <div class="flex-grow overflow-hidden">
+      <p class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
+    </div>
+    <div class="h-full flex items-center w-16 justify-end">
+      <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span>
+    </div>
+    <div class="h-full flex items-center justify-end transform w-16">
+      <span class="material-icons text-lg mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-icons text-lg text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bookmark: {
+      type: Object,
+      default: () => {}
+    },
+    highlight: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    click() {
+      this.$emit('click', this.bookmark)
+    },
+    deleteClick() {
+      this.$emit('delete', this.bookmark)
+    },
+    editClick() {
+      this.$emit('edit', this.bookmark)
+    }
+  },
+  mounted() {}
+}
+</script>

components/modals/downloads/DownloadItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex items-center justify-center">
+    <img v-if="download.cover" :src="download.cover" class="w-10 h-16 object-contain" />
+    <img v-else src="/book_placeholder.jpg" class="w-10 h-16 object-contain" />
+    <div class="pl-2 w-2/3">
+      <p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
+      <p class="font-normal truncate text-xs text-gray-400">{{ download.audiobook.book.author }}</p>
+      <p class="font-normal truncate text-xs text-gray-400">{{ $bytesPretty(download.size) }}</p>
+    </div>
+    <div class="flex-grow" />
+    <div v-if="download.isIncomplete || download.isMissing" class="shadow-sm text-warning flex items-center justify-center rounded-full mr-4">
+      <span class="material-icons">error_outline</span>
+    </div>
+    <button v-if="!isMissing" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="playDownload">
+      <span class="material-icons" style="font-size: 2rem">play_arrow</span>
+    </button>
+    <div class="shadow-sm text-error flex items-center justify-center rounded-ful ml-4" @click.stop="clickDelete">
+      <span class="material-icons" style="font-size: 1.2rem">delete</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    download: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    isIncomplete() {
+      return this.download.isIncomplete
+    },
+    isMissing() {
+      return this.download.isMissing
+    }
+  },
+  methods: {
+    playDownload() {
+      this.$emit('play', this.download)
+    },
+    clickDelete() {
+      this.$emit('delete', this.download)
+    }
+  },
+  mounted() {}
+}
+</script>

components/readers/ComicReader.vue

@@ -0,0 +1,226 @@
+<template>
+  <div id="comic-reader" class="w-full h-full">
+    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute right-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52" style="top: 72px">
+      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index)">
+        <p class="text-sm truncate">{{ file }}</p>
+      </div>
+    </div>
+    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-20 right-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" style="top: 72px">
+      <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
+        <p class="text-xs">
+          <strong>{{ key }}</strong
+          >: {{ comicMetadata[key] }}
+        </p>
+      </div>
+    </div>
+
+    <div v-if="comicMetadata" class="absolute top-8 right-36 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showInfoMenu = !showInfoMenu">
+      <span class="material-icons text-lg">more</span>
+    </div>
+    <div class="absolute top-8 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" style="right: 92px" @mousedown.prevent @click.stop.prevent="showPageMenu = !showPageMenu">
+      <span class="material-icons text-lg">menu</span>
+    </div>
+    <div class="absolute top-8 right-4 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
+      <p class="font-mono">{{ page + 1 }} / {{ numPages }}</p>
+    </div>
+
+    <div class="overflow-hidden m-auto comicwrapper relative">
+      <div class="h-full flex justify-center">
+        <img v-if="mainImg" :src="mainImg" class="object-contain comicimg" />
+      </div>
+
+      <div v-show="loading" class="w-full h-full absolute top-0 left-0 flex items-center justify-center z-10">
+        <ui-loading-indicator />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Path from 'path'
+import { Archive } from 'libarchive.js/main.js'
+
+Archive.init({
+  workerUrl: '/libarchive/worker-bundle.js'
+})
+
+export default {
+  props: {
+    url: String
+  },
+  data() {
+    return {
+      loading: false,
+      pages: null,
+      filesObject: null,
+      mainImg: null,
+      page: 0,
+      numPages: 0,
+      showPageMenu: false,
+      showInfoMenu: false,
+      loadTimeout: null,
+      loadedFirstPage: false,
+      comicMetadata: null
+    }
+  },
+  watch: {
+    url: {
+      immediate: true,
+      handler() {
+        this.extract()
+      }
+    }
+  },
+  computed: {
+    comicMetadataKeys() {
+      return this.comicMetadata ? Object.keys(this.comicMetadata) : []
+    },
+    canGoNext() {
+      return this.page < this.numPages - 1
+    },
+    canGoPrev() {
+      return this.page > 0
+    }
+  },
+  methods: {
+    clickOutside() {
+      if (this.showPageMenu) this.showPageMenu = false
+      if (this.showInfoMenu) this.showInfoMenu = false
+    },
+    next() {
+      if (!this.canGoNext) return
+      this.setPage(this.page + 1)
+    },
+    prev() {
+      if (!this.canGoPrev) return
+      this.setPage(this.page - 1)
+    },
+    setPage(index) {
+      if (index < 0 || index > this.numPages - 1) {
+        return
+      }
+      var filename = this.pages[index]
+      this.page = index
+      return this.extractFile(filename)
+    },
+    setLoadTimeout() {
+      this.loadTimeout = setTimeout(() => {
+        this.loading = true
+      }, 150)
+    },
+    extractFile(filename) {
+      return new Promise(async (resolve) => {
+        this.setLoadTimeout()
+        var file = await this.filesObject[filename].extract()
+        var reader = new FileReader()
+        reader.onload = (e) => {
+          this.mainImg = e.target.result
+          this.loading = false
+          resolve()
+        }
+        reader.onerror = (e) => {
+          console.error(e)
+          this.$toast.error('Read page file failed')
+          this.loading = false
+          resolve()
+        }
+        reader.readAsDataURL(file)
+        clearTimeout(this.loadTimeout)
+      })
+    },
+    async extract() {
+      this.loading = true
+      console.log('Extracting', this.url)
+
+      var buff = await this.$axios.$get(this.url, {
+        responseType: 'blob'
+      })
+      const archive = await Archive.open(buff)
+      this.filesObject = await archive.getFilesObject()
+      var filenames = Object.keys(this.filesObject)
+      this.parseFilenames(filenames)
+
+      var xmlFile = filenames.find((f) => (Path.extname(f) || '').toLowerCase() === '.xml')
+      if (xmlFile) await this.extractXmlFile(xmlFile)
+
+      this.numPages = this.pages.length
+
+      if (this.pages.length) {
+        this.loading = false
+        await this.setPage(0)
+        this.loadedFirstPage = true
+      } else {
+        this.$toast.error('Unable to extract pages')
+        this.loading = false
+      }
+    },
+    async extractXmlFile(filename) {
+      console.log('extracting xml filename', filename)
+      try {
+        var file = await this.filesObject[filename].extract()
+        var reader = new FileReader()
+        reader.onload = (e) => {
+          this.comicMetadata = this.$xmlToJson(e.target.result)
+          console.log('Metadata', this.comicMetadata)
+        }
+        reader.onerror = (e) => {
+          console.error(e)
+        }
+        reader.readAsText(file)
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    parseImageFilename(filename) {
+      var basename = Path.basename(filename, Path.extname(filename))
+      var numbersinpath = basename.match(/\d{1,4}/g)
+      if (!numbersinpath || !numbersinpath.length) {
+        return {
+          index: -1,
+          filename
+        }
+      } else {
+        return {
+          index: Number(numbersinpath[numbersinpath.length - 1]),
+          filename
+        }
+      }
+    },
+    parseFilenames(filenames) {
+      const acceptableImages = ['.jpeg', '.jpg', '.png']
+      var imageFiles = filenames.filter((f) => {
+        return acceptableImages.includes((Path.extname(f) || '').toLowerCase())
+      })
+      var imageFileObjs = imageFiles.map((img) => {
+        return this.parseImageFilename(img)
+      })
+
+      var imagesWithNum = imageFileObjs.filter((i) => i.index >= 0)
+      var orderedImages = imagesWithNum.sort((a, b) => a.index - b.index).map((i) => i.filename)
+      var noNumImages = imageFileObjs.filter((i) => i.index < 0)
+      orderedImages = orderedImages.concat(noNumImages.map((i) => i.filename))
+
+      this.pages = orderedImages
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>
+
+<style scoped>
+#comic-reader {
+  height: calc(100vh - 32px);
+}
+.pagemenu {
+  max-height: calc(100vh - 80px);
+}
+.comicimg {
+  height: 100%;
+  margin: auto;
+}
+.comicwrapper {
+  width: 100vw;
+  height: 100%;
+}
+</style>

components/readers/EpubReader.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="epub-frame" class="w-full">
+    <div id="viewer" class="border border-gray-100 bg-white shadow-md h-full w-full"></div>
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center">
+      <p class="text-xs">epub</p>
+      <div class="flex-grow" />
+
+      <p class="text-sm">{{ progress }}%</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import ePub from 'epubjs'
+
+export default {
+  props: {
+    url: String
+  },
+  data() {
+    return {
+      book: null,
+      rendition: null,
+      chapters: [],
+      title: '',
+      author: '',
+      progress: 0,
+      hasNext: true,
+      hasPrev: false
+    }
+  },
+  computed: {},
+  methods: {
+    prev() {
+      if (this.rendition) {
+        this.rendition.prev()
+      }
+    },
+    next() {
+      if (this.rendition) {
+        this.rendition.next()
+      }
+    },
+    keyUp() {
+      if ((e.keyCode || e.which) == 37) {
+        this.prev()
+      } else if ((e.keyCode || e.which) == 39) {
+        this.next()
+      }
+    },
+    initEpub() {
+      var book = ePub(this.url)
+      this.book = book
+
+      this.rendition = book.renderTo('viewer', {
+        width: window.innerWidth,
+        height: window.innerHeight - 64,
+        snap: true,
+        manager: 'continuous',
+        flow: 'paginated'
+      })
+      var displayed = this.rendition.display()
+
+      book.ready
+        .then(() => {
+          console.log('Book ready')
+          return book.locations.generate(1600)
+        })
+        .then((locations) => {
+          // console.log('Loaded locations', locations)
+          // Wait for book to be rendered to get current page
+          displayed.then(() => {
+            // Get the current CFI
+            var currentLocation = this.rendition.currentLocation()
+            if (!currentLocation.start) {
+              console.error('No Start', currentLocation)
+            } else {
+              var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi)
+              // console.log('current page', currentPage)
+            }
+          })
+        })
+
+      book.loaded.navigation.then((toc) => {
+        var _chapters = []
+        toc.forEach((chapter) => {
+          _chapters.push(chapter)
+        })
+        this.chapters = _chapters
+      })
+      book.loaded.metadata.then((metadata) => {
+        // this.author = metadata.creator
+        // this.title = metadata.title
+      })
+
+      // const spine_get = book.spine.get.bind(book.spine)
+      // book.spine.get = function (target) {
+      //   var t = spine_get(target)
+      //   console.log(t, target)
+      //   // while (t == null && target.includes('#')) {
+      //   //   target = target.split('#')[0]
+      //   //   t = spine_get(target)
+      //   // }
+      //   return t
+      // }
+
+      this.rendition.on('keyup', this.keyUp)
+
+      this.rendition.on('relocated', (location) => {
+        var percent = book.locations.percentageFromCfi(location.start.cfi)
+        this.progress = Math.floor(percent * 100)
+
+        this.hasNext = !location.atEnd
+        this.hasPrev = !location.atStart
+      })
+    }
+  },
+  mounted() {
+    this.initEpub()
+  }
+}
+</script>
+
+<style>
+#epub-frame {
+  height: calc(100% - 32px);
+  max-height: calc(100% - 32px);
+  overflow: hidden;
+}
+</style>

components/readers/MobiReader.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="ebook-viewer w-full h-full">
+    <div class="absolute overflow-y-scroll left-0 right-0 w-full max-w-screen m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
+      <iframe title="html-viewer" class="w-screen"> Loading </iframe>
+    </div>
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20">
+      <p class="text-xs">mobi</p>
+      <div class="flex-grow" />
+    </div>
+  </div>
+</template>
+
+<script>
+import MobiParser from '@/assets/ebooks/mobi.js'
+import HtmlParser from '@/assets/ebooks/htmlParser.js'
+import defaultCss from '@/assets/ebooks/basic.js'
+
+export default {
+  props: {
+    url: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    addHtmlCss() {
+      let iframe = document.getElementsByTagName('iframe')[0]
+      if (!iframe) return
+      let doc = iframe.contentDocument
+      if (!doc) return
+      let style = doc.createElement('style')
+      style.id = 'default-style'
+      style.textContent = defaultCss
+      doc.head.appendChild(style)
+    },
+    handleIFrameHeight(iFrame) {
+      const isElement = (obj) => !!(obj && obj.nodeType === 1)
+
+      var body = iFrame.contentWindow.document.body,
+        html = iFrame.contentWindow.document.documentElement
+      iFrame.height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) * 2
+
+      setTimeout(() => {
+        let lastchild = body.lastElementChild
+        let lastEle = body.lastChild
+
+        let itemAs = body.querySelectorAll('a')
+        let itemPs = body.querySelectorAll('p')
+        let lastItemA = itemAs[itemAs.length - 1]
+        let lastItemP = itemPs[itemPs.length - 1]
+        let lastItem
+        if (isElement(lastItemA) && isElement(lastItemP)) {
+          if (lastItemA.clientHeight + lastItemA.offsetTop > lastItemP.clientHeight + lastItemP.offsetTop) {
+            lastItem = lastItemA
+          } else {
+            lastItem = lastItemP
+          }
+        }
+
+        if (!lastchild && !lastItem && !lastEle) return
+        if (lastEle.nodeType === 3 && !lastchild && !lastItem) return
+
+        let nodeHeight = 0
+        if (lastEle.nodeType === 3 && document.createRange) {
+          let range = document.createRange()
+          range.selectNodeContents(lastEle)
+          if (range.getBoundingClientRect) {
+            let rect = range.getBoundingClientRect()
+            if (rect) {
+              nodeHeight = rect.bottom - rect.top
+            }
+          }
+        }
+        var lastChildHeight = isElement(lastchild) ? lastchild.clientHeight + lastchild.offsetTop : 0
+        var lastEleHeight = isElement(lastEle) ? lastEle.clientHeight + lastEle.offsetTop : 0
+        var lastItemHeight = isElement(lastItem) ? lastItem.clientHeight + lastItem.offsetTop : 0
+        iFrame.height = Math.max(lastChildHeight, lastEleHeight, lastItemHeight) + 100 + nodeHeight
+      }, 500)
+    },
+    async initMobi() {
+      // Fetch mobi file as blob
+      var buff = await this.$axios.$get(this.url, {
+        responseType: 'blob'
+      })
+      var reader = new FileReader()
+      reader.onload = async (event) => {
+        var file_content = event.target.result
+
+        let mobiFile = new MobiParser(file_content)
+
+        let content = await mobiFile.render()
+        let htmlParser = new HtmlParser(new DOMParser().parseFromString(content.outerHTML, 'text/html'))
+        var anchoredDoc = htmlParser.getAnchoredDoc()
+
+        let iFrame = document.getElementsByTagName('iframe')[0]
+        iFrame.contentDocument.body.innerHTML = anchoredDoc.documentElement.outerHTML
+
+        // Add css
+        let style = iFrame.contentDocument.createElement('style')
+        style.id = 'default-style'
+        style.textContent = defaultCss
+        iFrame.contentDocument.head.appendChild(style)
+
+        this.handleIFrameHeight(iFrame)
+      }
+      reader.readAsArrayBuffer(buff)
+    }
+  },
+  mounted() {
+    this.initMobi()
+  }
+}
+</script>
+
+<style>
+.ebook-viewer {
+  height: calc(100% - 32px);
+}
+</style>

components/readers/Reader.vue

@@ -0,0 +1,130 @@
+<template>
+  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-8">
+    <div class="h-8 w-full bg-primary flex items-center px-2 fixed top-0 left-0 z-30 box-shadow-sm">
+      <p class="w-5/6 truncate">{{ title }}</p>
+      <div class="flex-grow" />
+      <span class="material-icons text-xl text-white" @click.stop="show = false">close</span>
+    </div>
+    <component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ebookType: null,
+      ebookUrl: null,
+      touchstartX: 0,
+      touchendX: 0
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+          this.registerListeners()
+        } else {
+          this.unregisterListeners()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.showReader
+      },
+      set(val) {
+        this.$store.commit('setShowReader', val)
+      }
+    },
+    title() {
+      return this.selectedBook ? this.selectedBook.book.title : null
+    },
+    selectedBook() {
+      return this.$store.state.selectedBook
+    },
+    readerComponentName() {
+      if (this.ebookType === 'epub') return 'readers-epub-reader'
+      else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
+      else if (this.ebookType === 'comic') return 'readers-comic-reader'
+      return null
+    },
+    ebook() {
+      if (!this.selectedBook || !this.selectedBook.ebooks || !this.selectedBook.ebooks.length) return null
+      return this.selectedBook.ebooks[0]
+    },
+    ebookPath() {
+      return this.ebook ? this.ebook.path : null
+    },
+    folderId() {
+      return this.selectedBook ? this.selectedBook.folderId : null
+    },
+    libraryId() {
+      return this.selectedBook ? this.selectedBook.libraryId : null
+    },
+    ebookRelPath() {
+      return `/ebook/${this.libraryId}/${this.folderId}/${this.ebookPath}`
+    }
+  },
+  methods: {
+    init() {
+      if (!this.ebook) {
+        console.error('No ebook for book', this.selectedBook)
+        return
+      }
+      if (this.ebook.ext === '.epub') {
+        this.ebookType = 'epub'
+      } else if (this.ebook.ext === '.mobi' || this.ebook.ext === '.azw3') {
+        this.ebookType = 'mobi'
+      } else if (this.ebook.ext === '.cbr' || this.ebook.ext === '.cbz') {
+        this.ebookType = 'comic'
+      }
+
+      var serverUrl = this.$store.state.serverUrl
+      this.ebookUrl = `${serverUrl}${this.ebookRelPath}`
+    },
+    next() {
+      if (this.$refs.readerComponent && this.$refs.readerComponent.next) {
+        this.$refs.readerComponent.next()
+      }
+    },
+    prev() {
+      if (this.$refs.readerComponent && this.$refs.readerComponent.prev) {
+        this.$refs.readerComponent.prev()
+      }
+    },
+    handleGesture() {
+      if (this.touchendX < this.touchstartX) {
+        console.log('swiped left')
+
+        this.next()
+      }
+      if (this.touchendX > this.touchstartX) {
+        console.log('swiped right')
+        this.prev()
+      }
+    },
+    touchstart(e) {
+      this.touchstartX = e.changedTouches[0].screenX
+    },
+    touchend(e) {
+      this.touchendX = e.changedTouches[0].screenX
+      this.handleGesture()
+    },
+    registerListeners() {
+      document.body.addEventListener('touchstart', this.touchstart)
+      document.body.addEventListener('touchend', this.touchend)
+    },
+    unregisterListeners() {
+      document.body.removeEventListener('touchstart', this.touchstart)
+      document.body.removeEventListener('touchend', this.touchend)
+    }
+  },
+  beforeDestroy() {
+    this.unregisterListeners()
+  }
+}
+</script>

components/tables/CollectionBooksTable.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="w-full bg-primary bg-opacity-40">
+    <div class="w-full h-14 flex items-center px-4 bg-primary">
+      <p>Collection List</p>
+      <div class="w-6 h-6 bg-white bg-opacity-10 flex items-center justify-center rounded-full ml-2">
+        <p class="font-mono text-sm">{{ books.length }}</p>
+      </div>
+      <div class="flex-grow" />
+      <p v-if="totalDuration">{{ totalDurationPretty }}</p>
+    </div>
+    <template v-for="book in booksCopy">
+      <tables-collection-book-table-row :key="book.id" :book="book" :collection-id="collectionId" class="item collection-book-item" @edit="editBook" />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collectionId: String,
+    books: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      booksCopy: []
+    }
+  },
+  watch: {
+    books: {
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    totalDuration() {
+      var _total = 0
+      this.books.forEach((book) => {
+        _total += book.duration
+      })
+      return _total
+    },
+    totalDurationPretty() {
+      return this.$elapsedPretty(this.totalDuration)
+    }
+  },
+  methods: {
+    editBook(book) {
+      var bookIds = this.books.map((b) => b.id)
+      this.$store.commit('setBookshelfBookIds', bookIds)
+      this.$store.commit('showEditModal', book)
+    },
+    init() {
+      this.booksCopy = this.books.map((b) => ({ ...b }))
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style>
+.collection-book-item {
+  transition: all 0.4s ease;
+}
+
+.collection-book-enter-from,
+.collection-book-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.collection-book-leave-active {
+  position: absolute;
+}
+</style>

components/tables/collection/BookTableRow.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="w-full px-2 py-2 overflow-hidden relative">
+    <div v-if="book" class="flex h-20">
+      <div class="h-full relative" :style="{ width: bookWidth + 'px' }">
+        <covers-book-cover :audiobook="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+      <div class="w-80 h-full px-2 flex items-center">
+        <div>
+          <nuxt-link :to="`/audiobook/${book.id}`" class="truncate hover:underline">{{ bookTitle }}</nuxt-link>
+          <nuxt-link :to="`/bookshelf/library?filter=authors.${$encode(bookAuthor)}`" class="truncate block text-gray-400 text-sm hover:underline">{{ bookAuthor }}</nuxt-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collectionId: String,
+    book: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isProcessingReadUpdate: false,
+      processingRemove: false
+    }
+  },
+  watch: {
+    userIsRead: {
+      immediate: true,
+      handler(newVal) {
+        this.isRead = newVal
+      }
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    bookWidth() {
+      if (this.bookCoverAspectRatio === 1) return 80
+      return 50
+    },
+    _book() {
+      return this.book.book || {}
+    },
+    bookTitle() {
+      return this._book.title || ''
+    },
+    bookAuthor() {
+      return this._book.authorFL || ''
+    },
+    bookDuration() {
+      return this.$secondsToTimestamp(this.book.duration)
+    },
+    isMissing() {
+      return this.book.isMissing
+    },
+    isIncomplete() {
+      return this.book.isIncomplete
+    },
+    numTracks() {
+      return this.book.numTracks
+    },
+    isStreaming() {
+      return this.$store.getters['getAudiobookIdStreaming'] === this.book.id
+    },
+    showPlayBtn() {
+      return !this.isMissing && !this.isIncomplete && !this.isStreaming && this.numTracks
+    },
+    userAudiobooks() {
+      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    },
+    userAudiobook() {
+      return this.userAudiobooks[this.book.id] || null
+    },
+    userIsRead() {
+      return this.userAudiobook ? !!this.userAudiobook.isRead : false
+    }
+  },
+  methods: {
+    playClick() {
+      // this.$store.commit('setStreamAudiobook', this.book)
+      // this.$root.socket.emit('open_stream', this.book.id)
+    },
+    clickEdit() {
+      this.$emit('edit', this.book)
+    },
+    toggleRead() {
+      var updatePayload = {
+        isRead: !this.isRead
+      }
+      this.isProcessingReadUpdate = true
+      this.$axios
+        .$patch(`/api/me/audiobook/${this.book.id}`, updatePayload)
+        .then(() => {
+          this.isProcessingReadUpdate = false
+          this.$toast.success(`"${this.bookTitle}" Marked as ${updatePayload.isRead ? 'Read' : 'Not Read'}`)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.isProcessingReadUpdate = false
+          this.$toast.error(`Failed to mark as ${updatePayload.isRead ? 'Read' : 'Not Read'}`)
+        })
+    },
+    removeClick() {
+      this.processingRemove = true
+
+      this.$axios
+        .$delete(`/api/collections/${this.collectionId}/book/${this.book.id}`)
+        .then((updatedCollection) => {
+          console.log(`Book removed from collection`, updatedCollection)
+          this.$toast.success('Book removed from collection')
+          this.processingRemove = false
+        })
+        .catch((error) => {
+          console.error('Failed to remove book from collection', error)
+          this.$toast.error('Failed to remove book from collection')
+          this.processingRemove = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

components/ui/DropdownMenu.vue

@@ -0,0 +1,100 @@
+<template>
+  <div ref="wrapper" v-click-outside="clickOutside">
+    <div @click.stop="toggleMenu">
+      <slot />
+    </div>
+    <transition name="menu">
+      <ul ref="menu" v-show="showMenu" class="absolute z-50 -mt-px bg-primary border border-gray-600 shadow-lg max-h-56 rounded-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" style="width: 160px">
+        <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 px-2">
+                <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
+                <span class="font-normal block truncate font-sans text-center">{{ 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 px-2">
+              <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
+              <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      menu: null,
+      showMenu: false
+    }
+  },
+  methods: {
+    toggleMenu() {
+      if (!this.showMenu) {
+        this.openMenu()
+      } else {
+        this.closeMenu()
+      }
+    },
+    openMenu() {
+      this.showMenu = true
+      this.$nextTick(() => {
+        if (!this.menu) this.unmountMountMenu()
+        this.recalcMenuPos()
+      })
+    },
+    closeMenu() {
+      this.showMenu = false
+    },
+    recalcMenuPos() {
+      if (!this.menu) return
+      var boundingBox = this.$refs.wrapper.getBoundingClientRect()
+      if (boundingBox.y > window.innerHeight - 8) {
+        // Input is off the page
+        return this.closeMenu()
+      }
+      var menuHeight = this.menu.clientHeight
+      var top = boundingBox.y + boundingBox.height - 4
+      if (top + menuHeight > window.innerHeight - 20) {
+        // Reverse menu to open upwards
+        top = boundingBox.y - menuHeight - 4
+      }
+
+      var left = boundingBox.x
+      if (left + this.menu.clientWidth > window.innerWidth - 20) {
+        // Shift left
+        left = boundingBox.x + boundingBox.width - this.menu.clientWidth
+      }
+
+      this.menu.style.top = top + 'px'
+      this.menu.style.left = left + 'px'
+    },
+    unmountMountMenu() {
+      if (!this.$refs.menu) return
+      this.menu = this.$refs.menu
+      this.menu.remove()
+      document.body.appendChild(this.menu)
+    },
+    clickOutside() {
+      this.closeMenu()
+    },
+    clickedOption(itemValue) {
+      this.$emit('action', itemValue)
+      this.closeMenu()
+    }
+  },
+  mounted() {}
+}
+</script>

components/ui/LoadingIndicator.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="w-40">
+    <div class="bg-bg border border-gray-500 py-2 px-5 rounded-lg flex items-center flex-col box-shadow-md">
+      <div class="loader-dots block relative w-20 h-5 mt-2">
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
+      </div>
+      <div class="text-gray-200 text-xs font-light mt-2 text-center">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: 'Please Wait...'
+    }
+  }
+}
+</script>
+
+<style>
+.loader-dots div {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.loader-dots div:nth-child(1) {
+  left: 8px;
+  animation: loader-dots1 0.6s infinite;
+}
+.loader-dots div:nth-child(2) {
+  left: 8px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(3) {
+  left: 32px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(4) {
+  left: 56px;
+  animation: loader-dots3 0.6s infinite;
+}
+@keyframes loader-dots1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes loader-dots3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes loader-dots2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+</style>

components/ui/TextInput.vue

@@ -1,5 +1,10 @@
 <template>
-  <input v-model="input" :type="type" :disabled="disabled" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="px-2 py-1 bg-bg border border-gray-600 outline-none rounded-sm" :class="disabled ? 'text-gray-300' : 'text-white'" />
+  <div class="relative">
+    <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none" :class="inputClass" @keyup="keyup" />
+    <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
+      <span class="material-icons text-lg">{{ prependIcon }}</span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -8,7 +13,24 @@ export default {
     value: [String, Number],
     placeholder: String,
     type: String,
-    disabled: Boolean
+    disabled: Boolean,
+    borderless: Boolean,
+    bg: {
+      type: String,
+      default: 'bg'
+    },
+    rounded: {
+      type: String,
+      default: 'sm'
+    },
+    prependIcon: {
+      type: String,
+      default: null
+    },
+    textSize: {
+      type: String,
+      default: 'lg'
+    }
   },
   data() {
     return {}
@@ -21,9 +43,32 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
+    },
+    inputClass() {
+      var classes = [`bg-${this.bg}`, `rounded-${this.rounded}`, `text-${this.textSize}`]
+      if (this.disabled) classes.push('text-gray-300')
+      else classes.push('text-white')
+
+      if (this.prependIcon) classes.push('pl-10 pr-2')
+      else classes.push('px-2')
+
+      if (!this.borderless) classes.push('border border-gray-600')
+      return classes.join(' ')
+    }
+  },
+  methods: {
+    focus() {
+      if (this.$refs.input) {
+        this.$refs.input.focus()
+        this.$refs.input.click()
+      }
+    },
+    keyup() {
+      if (this.$refs.input) {
+        this.input = this.$refs.input.value
+      }
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>

components/widgets/SpinnerIcon.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="la-ball-spin-clockwise la-dark la-sm">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style scoped>
+/*!
+ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+ * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+ * Licensed under MIT
+ */
+.la-ball-spin-clockwise,
+.la-ball-spin-clockwise > div {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.la-ball-spin-clockwise {
+  display: block;
+  font-size: 0;
+  color: #fff;
+}
+.la-ball-spin-clockwise.la-dark {
+  color: #262626;
+}
+.la-ball-spin-clockwise > div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
+}
+.la-ball-spin-clockwise {
+  width: 32px;
+  height: 32px;
+}
+.la-ball-spin-clockwise > div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  margin-top: -4px;
+  margin-left: -4px;
+  border-radius: 100%;
+  -webkit-animation: ball-spin-clockwise 1s infinite ease-in-out;
+  -moz-animation: ball-spin-clockwise 1s infinite ease-in-out;
+  -o-animation: ball-spin-clockwise 1s infinite ease-in-out;
+  animation: ball-spin-clockwise 1s infinite ease-in-out;
+}
+.la-ball-spin-clockwise > div:nth-child(1) {
+  top: 5%;
+  left: 50%;
+  -webkit-animation-delay: -0.875s;
+  -moz-animation-delay: -0.875s;
+  -o-animation-delay: -0.875s;
+  animation-delay: -0.875s;
+}
+.la-ball-spin-clockwise > div:nth-child(2) {
+  top: 18.1801948466%;
+  left: 81.8198051534%;
+  -webkit-animation-delay: -0.75s;
+  -moz-animation-delay: -0.75s;
+  -o-animation-delay: -0.75s;
+  animation-delay: -0.75s;
+}
+.la-ball-spin-clockwise > div:nth-child(3) {
+  top: 50%;
+  left: 95%;
+  -webkit-animation-delay: -0.625s;
+  -moz-animation-delay: -0.625s;
+  -o-animation-delay: -0.625s;
+  animation-delay: -0.625s;
+}
+.la-ball-spin-clockwise > div:nth-child(4) {
+  top: 81.8198051534%;
+  left: 81.8198051534%;
+  -webkit-animation-delay: -0.5s;
+  -moz-animation-delay: -0.5s;
+  -o-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.la-ball-spin-clockwise > div:nth-child(5) {
+  top: 94.9999999966%;
+  left: 50.0000000005%;
+  -webkit-animation-delay: -0.375s;
+  -moz-animation-delay: -0.375s;
+  -o-animation-delay: -0.375s;
+  animation-delay: -0.375s;
+}
+.la-ball-spin-clockwise > div:nth-child(6) {
+  top: 81.8198046966%;
+  left: 18.1801949248%;
+  -webkit-animation-delay: -0.25s;
+  -moz-animation-delay: -0.25s;
+  -o-animation-delay: -0.25s;
+  animation-delay: -0.25s;
+}
+.la-ball-spin-clockwise > div:nth-child(7) {
+  top: 49.9999750815%;
+  left: 5.0000051215%;
+  -webkit-animation-delay: -0.125s;
+  -moz-animation-delay: -0.125s;
+  -o-animation-delay: -0.125s;
+  animation-delay: -0.125s;
+}
+.la-ball-spin-clockwise > div:nth-child(8) {
+  top: 18.179464974%;
+  left: 18.1803700518%;
+  -webkit-animation-delay: 0s;
+  -moz-animation-delay: 0s;
+  -o-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.la-ball-spin-clockwise.la-sm {
+  width: 16px;
+  height: 16px;
+}
+.la-ball-spin-clockwise.la-sm > div {
+  width: 4px;
+  height: 4px;
+  margin-top: -2px;
+  margin-left: -2px;
+}
+.la-ball-spin-clockwise.la-2x {
+  width: 64px;
+  height: 64px;
+}
+.la-ball-spin-clockwise.la-2x > div {
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+}
+.la-ball-spin-clockwise.la-3x {
+  width: 96px;
+  height: 96px;
+}
+.la-ball-spin-clockwise.la-3x > div {
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+  margin-left: -12px;
+}
+/*
+ * Animation
+ */
+@-webkit-keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+}
+@-moz-keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+}
+@-o-keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -o-transform: scale(0);
+    transform: scale(0);
+  }
+}
+@keyframes ball-spin-clockwise {
+  0%,
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+  }
+}
+</style>

layouts/default.vue

@@ -1,39 +1,77 @@
 <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' : ''">
+    <div id="content" class="overflow-hidden" :class="playerIsOpen ? 'playerOpen' : ''">
       <Nuxt />
     </div>
-    <app-stream-container ref="streamContainer" />
+    <app-audio-player-container ref="streamContainer" />
+    <modals-libraries-modal />
+    <app-side-drawer />
+    <readers-reader />
   </div>
 </template>
 
 <script>
+import { Capacitor } from '@capacitor/core'
 import { AppUpdate } from '@robingenz/capacitor-app-update'
+import AudioDownloader from '@/plugins/audio-downloader'
+import StorageManager from '@/plugins/storage-manager'
+import MyNativeAudio from '@/plugins/my-native-audio'
 
 export default {
-  middleware: 'authenticated',
   data() {
     return {}
   },
+  watch: {
+    networkConnected: {
+      handler(newVal) {
+        if (newVal) {
+          this.attemptConnection()
+        }
+      }
+    }
+  },
   computed: {
-    streaming() {
-      return this.$store.state.streamAudiobook
+    playerIsOpen() {
+      return this.$store.getters['playerIsOpen']
     },
     routeName() {
       return this.$route.name
+    },
+    networkConnected() {
+      return this.$store.state.networkConnected
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    isSocketConnected() {
+      return this.$store.state.socketConnected
     }
   },
   methods: {
-    connected(isConnected) {
-      if (this.$route.name === 'connect') {
-        if (isConnected) {
-          this.$router.push('/')
-        }
+    async connected(isConnected) {
+      if (isConnected) {
+        console.log('[Default] Connected socket sync user ab data')
+        this.$store.dispatch('user/syncUserAudiobookData')
+
+        this.initSocketListeners()
+
+        // Load libraries
+        this.$store.dispatch('libraries/load')
+        this.$store.dispatch('libraries/fetch', this.currentLibraryId)
       } else {
-        if (!isConnected) {
-          this.$router.push('/connect')
-        }
+        this.removeSocketListeners()
+      }
+    },
+    socketConnectionFailed(err) {
+      this.$toast.error('Socket connection error: ' + err.message)
+    },
+    currentUserAudiobookUpdate({ id, data }) {
+      if (data) {
+        console.log(`Current User Audiobook Updated ${id} ${JSON.stringify(data)}`)
+        this.$sqlStore.setUserAudiobookData(data)
+      } else {
+        this.$sqlStore.removeUserAudiobookData(id)
       }
     },
     initialStream(stream) {
@@ -49,104 +87,330 @@ export default {
         await AppUpdate.openAppStore()
       }
     },
-    showUpdateToast(availableVersion, immediateUpdateAllowed) {
-      var toastText = immediateUpdateAllowed ? `Click here to update` : `Click here to open app store`
-      this.$toast.info(`Update is available for v${availableVersion}! ${toastText}`, {
-        draggable: false,
-        hideProgressBar: false,
-        timeout: 10000,
-        closeButton: false,
-        onClick: this.clickUpdateToast()
-      })
-    },
     async checkForUpdate() {
+      console.log('Checking for app update')
       const result = await AppUpdate.getAppUpdateInfo()
       if (!result) {
         console.error('Invalid version check')
         return
       }
+      console.log('App Update Info', JSON.stringify(result))
       this.$store.commit('setAppUpdateInfo', result)
-
       if (result.updateAvailability === 2) {
         setTimeout(() => {
-          this.showUpdateToast(result.availableVersion, !!result.immediateUpdateAllowed)
+          this.$toast.info(`Update is available! Click to update.`, {
+            draggable: false,
+            hideProgressBar: false,
+            timeout: 20000,
+            closeButton: true,
+            onClick: this.clickUpdateToast
+          })
         }, 5000)
       }
-    }
-    // parseSemver(ver) {
-    //   if (!ver) return null
-    //   var groups = ver.match(/^v((([0-9]+)\.([0-9]+)\.([0-9]+)(?:-([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?)(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?)$/)
-    //   if (groups && groups.length > 6) {
-    //     var total = Number(groups[3]) * 100 + Number(groups[4]) * 10 + Number(groups[5])
-    //     if (isNaN(total)) {
-    //       console.warn('Invalid version total', groups[3], groups[4], groups[5])
-    //       return null
-    //     }
-    //     return {
-    //       total,
-    //       version: groups[2],
-    //       major: Number(groups[3]),
-    //       minor: Number(groups[4]),
-    //       patch: Number(groups[5]),
-    //       preRelease: groups[6] || null
-    //     }
-    //   } else {
-    //     console.warn('Invalid semver string', ver)
-    //   }
-    //   return null
-    // },
-    // checkForUpdateWebVersion() {
-    //   if (!this.$config.version) {
-    //     return
-    //   }
-    //   var currVerObj = this.parseSemver(this.$config.version)
-    //   if (!currVerObj) {
-    //     console.error('Invalid version', this.$config.version)
-    //     return
-    //   }
-    //   console.log('Check for update, your version:', currVerObj.version)
-    //   this.$store.commit('setCurrentVersion', currVerObj)
+    },
+    onDownloadProgress(data) {
+      var progress = data.progress
+      var audiobookId = data.audiobookId
 
-    //   var largestVer = null
-    //   this.$axios.$get(`https://api.github.com/repos/advplyr/audiobookshelf-app/tags`).then((tags) => {
-    //     if (tags && tags.length) {
-    //       tags.forEach((tag) => {
-    //         var verObj = this.parseSemver(tag.name)
-    //         if (verObj) {
-    //           if (!largestVer || largestVer.total < verObj.total) {
-    //             largestVer = verObj
-    //           }
-    //         }
-    //       })
-    //     }
-    //   })
-    //   if (!largestVer) {
-    //     console.error('No valid version tags to compare with')
-    //     return
-    //   }
-    //   this.$store.commit('setLatestVersion', largestVer)
-    //   if (largestVer.total > currVerObj.total) {
-    //     console.log('Has Update!', largestVer.version)
-    //     this.$store.commit('setHasUpdate', true)
-    //   }
-    // }
+      var downloadObj = this.$store.getters['downloads/getDownload'](audiobookId)
+      if (downloadObj) {
+        this.$toast.update(downloadObj.toastId, { content: `${progress}% Downloading ${downloadObj.audiobook.book.title}` })
+      }
+    },
+    onDownloadFailed(data) {
+      if (!data.audiobookId) {
+        console.error('Download failed invalid audiobook id', data)
+        return
+      }
+      var downloadObj = this.$store.getters['downloads/getDownload'](data.audiobookId)
+      if (!downloadObj) {
+        console.error('Failed to find download for audiobook', data.audiobookId)
+        return
+      }
+      var message = data.error || 'Unknown Error'
+      this.$toast.update(downloadObj.toastId, { content: `Failed. ${message}.`, options: { timeout: 5000, type: 'error' } }, true)
+      this.$store.commit('downloads/removeDownload', downloadObj)
+    },
+    onDownloadComplete(data) {
+      if (!data.audiobookId) {
+        console.error('Download compelte invalid audiobook id', data)
+        return
+      }
+      var downloadId = data.downloadId
+      var contentUrl = data.contentUrl
+      var folderUrl = data.folderUrl
+      var folderName = data.folderName
+      var storageId = data.storageId
+      var storageType = data.storageType
+      var simplePath = data.simplePath
+      var filename = data.filename
+      var audiobookId = data.audiobookId
+      var size = data.size || 0
+      var isCover = !!data.isCover
+
+      console.log(`Download complete "${contentUrl}" | ${filename} | DlId: ${downloadId} | Is Cover? ${isCover}`)
+      var downloadObj = this.$store.getters['downloads/getDownload'](audiobookId)
+      if (!downloadObj) {
+        console.error('Failed to find download for audiobook', audiobookId)
+        return
+      }
+
+      if (!isCover) {
+        // Notify server to remove prepared download
+        if (this.$server.socket) {
+          this.$server.socket.emit('remove_download', audiobookId)
+        }
+
+        this.$toast.update(downloadObj.toastId, { content: `Success! ${downloadObj.audiobook.book.title} downloaded.`, options: { timeout: 5000, type: 'success' } }, true)
+
+        delete downloadObj.isDownloading
+        delete downloadObj.isPreparing
+        downloadObj.contentUrl = contentUrl
+        downloadObj.simplePath = simplePath
+        downloadObj.folderUrl = folderUrl
+        downloadObj.folderName = folderName
+        downloadObj.storageType = storageType
+        downloadObj.storageId = storageId
+        downloadObj.basePath = data.basePath || null
+        downloadObj.size = size
+        this.$store.commit('downloads/addUpdateDownload', downloadObj)
+      } else {
+        downloadObj.coverUrl = contentUrl
+        downloadObj.cover = Capacitor.convertFileSrc(contentUrl)
+        downloadObj.coverSize = size
+        downloadObj.coverBasePath = data.basePath || null
+        console.log('Updating download with cover', downloadObj.cover)
+        this.$store.commit('downloads/addUpdateDownload', downloadObj)
+      }
+    },
+    async checkLoadCurrent() {
+      var currentObj = await this.$localStore.getCurrent()
+      if (!currentObj) return
+
+      console.log('Has Current playing', currentObj.audiobookId)
+      var download = this.$store.getters['downloads/getDownload'](currentObj.audiobookId)
+      if (download) {
+        this.$store.commit('setPlayingDownload', download)
+      } else {
+        console.warn('Download not available for previous current playing', currentObj.audiobookId)
+        this.$localStore.setCurrent(null)
+      }
+    },
+    async searchFolder(downloadFolder) {
+      try {
+        var response = await StorageManager.searchFolder({ folderUrl: downloadFolder.uri })
+        var searchResults = response
+        searchResults.folders = JSON.parse(searchResults.folders)
+        searchResults.files = JSON.parse(searchResults.files)
+
+        console.log('Search folders results length', searchResults.folders.length)
+        searchResults.folders = searchResults.folders.map((sr) => {
+          if (sr.files) {
+            sr.files = JSON.parse(sr.files)
+          }
+          return sr
+        })
+
+        return searchResults
+      } catch (error) {
+        console.error('Failed', error)
+        this.$toast.error('Failed to search downloads folder')
+        return {}
+      }
+    },
+    async syncDownloads(downloads, downloadFolder) {
+      console.log('Syncing downloads ' + downloads.length)
+      var mediaScanResults = await this.searchFolder(downloadFolder)
+
+      this.$store.commit('downloads/setMediaScanResults', mediaScanResults)
+
+      // Filter out media folders without any audio files
+      var mediaFolders = mediaScanResults.folders.filter((sr) => {
+        if (!sr.files) return false
+        var audioFiles = sr.files.filter((mf) => !!mf.isAudio)
+        return audioFiles.length
+      })
+
+      downloads.forEach((download) => {
+        var mediaFolder = mediaFolders.find((mf) => mf.name === download.folderName)
+        if (mediaFolder) {
+          console.log('Found download ' + download.folderName)
+          if (download.isMissing) {
+            download.isMissing = false
+            this.$store.commit('downloads/addUpdateDownload', download)
+          }
+        } else {
+          console.error('Download not found ' + download.folderName)
+          if (!download.isMissing) {
+            download.isMissing = true
+            this.$store.commit('downloads/addUpdateDownload', download)
+          }
+        }
+      })
+
+      // Match media scanned folders with books from server
+      if (this.isSocketConnected) {
+        await this.$store.dispatch('downloads/linkOrphanDownloads')
+      }
+    },
+    async initMediaStore() {
+      // Request and setup listeners for media files on native
+      AudioDownloader.addListener('onDownloadComplete', (data) => {
+        this.onDownloadComplete(data)
+      })
+      AudioDownloader.addListener('onDownloadFailed', (data) => {
+        this.onDownloadFailed(data)
+      })
+      AudioDownloader.addListener('onDownloadProgress', (data) => {
+        this.onDownloadProgress(data)
+      })
+
+      var downloads = await this.$store.dispatch('downloads/loadFromStorage')
+      var downloadFolder = await this.$localStore.getDownloadFolder()
+
+      if (downloadFolder) {
+        await this.syncDownloads(downloads, downloadFolder)
+      }
+      this.$eventBus.$emit('downloads-loaded')
+
+      var checkPermission = await StorageManager.checkStoragePermission()
+      console.log('Storage Permission is' + checkPermission.value)
+      if (!checkPermission.value) {
+        console.log('Will require permissions')
+      } else {
+        console.log('Has Storage Permission')
+        this.$store.commit('setHasStoragePermission', true)
+      }
+    },
+    async loadSavedSettings() {
+      var userSavedServerSettings = await this.$localStore.getServerSettings()
+      if (userSavedServerSettings) {
+        this.$store.commit('setServerSettings', userSavedServerSettings)
+      }
+
+      var userSavedSettings = await this.$localStore.getUserSettings()
+      if (userSavedSettings) {
+        this.$store.commit('user/setSettings', userSavedSettings)
+      }
+
+      console.log('Loading offline user audiobook data')
+      await this.$store.dispatch('user/loadOfflineUserAudiobookData')
+    },
+    showErrorToast(message) {
+      this.$toast.error(message)
+    },
+    showSuccessToast(message) {
+      this.$toast.success(message)
+    },
+    async attemptConnection() {
+      if (!this.$server) return
+      if (!this.networkConnected) {
+        console.warn('No network connection')
+        return
+      }
+
+      var localServerUrl = await this.$localStore.getServerUrl()
+      var localUserToken = await this.$localStore.getToken()
+      if (localServerUrl) {
+        // Server and Token are stored
+        if (localUserToken) {
+          var isSocketAlreadyEstablished = this.$server.socket
+          var success = await this.$server.connect(localServerUrl, localUserToken)
+          if (!success && !this.$server.url) {
+            // Bad URL
+          } else if (!success) {
+            // Failed to connect
+          } else if (isSocketAlreadyEstablished) {
+            // No need to wait for connect event
+          }
+        }
+      }
+    },
+    audiobookAdded(audiobook) {
+      this.$store.commit('libraries/updateFilterDataWithAudiobook', audiobook)
+    },
+    audiobookUpdated(audiobook) {
+      this.$store.commit('libraries/updateFilterDataWithAudiobook', audiobook)
+    },
+    audiobookRemoved(audiobook) {
+      if (this.$route.name.startsWith('audiobook')) {
+        if (this.$route.params.id === audiobook.id) {
+          this.$router.replace(`/bookshelf`)
+        }
+      }
+    },
+    audiobooksAdded(audiobooks) {
+      audiobooks.forEach((ab) => {
+        this.audiobookAdded(ab)
+      })
+    },
+    audiobooksUpdated(audiobooks) {
+      audiobooks.forEach((ab) => {
+        this.audiobookUpdated(ab)
+      })
+    },
+    userLoggedOut() {
+      // Only cancels stream if streamining not playing downloaded
+      this.$eventBus.$emit('close_stream')
+    },
+    initSocketListeners() {
+      if (this.$server.socket) {
+        // Audiobook Listeners
+        this.$server.socket.on('audiobook_updated', this.audiobookUpdated)
+        this.$server.socket.on('audiobook_added', this.audiobookAdded)
+        this.$server.socket.on('audiobook_removed', this.audiobookRemoved)
+        this.$server.socket.on('audiobooks_updated', this.audiobooksUpdated)
+        this.$server.socket.on('audiobooks_added', this.audiobooksAdded)
+      }
+    },
+    removeSocketListeners() {
+      if (this.$server.socket) {
+        // Audiobook Listeners
+        this.$server.socket.off('audiobook_updated', this.audiobookUpdated)
+        this.$server.socket.off('audiobook_added', this.audiobookAdded)
+        this.$server.socket.off('audiobook_removed', this.audiobookRemoved)
+        this.$server.socket.off('audiobooks_updated', this.audiobooksUpdated)
+        this.$server.socket.off('audiobooks_added', this.audiobooksAdded)
+      }
+    }
   },
-  mounted() {
+  async mounted() {
     if (!this.$server) return console.error('No Server')
+    // console.log(`Default Mounted set SOCKET listeners ${this.$server.connected}`)
 
-    this.$server.on('connected', this.connected)
-    this.$server.on('initialStream', this.initialStream)
-
-    if (!this.$server.connected) {
-      this.$router.push('/connect')
+    if (this.$server.connected) {
+      console.log('Syncing on default mount')
+      this.connected(true)
     }
+    this.$server.on('logout', this.userLoggedOut)
+    this.$server.on('connected', this.connected)
+    this.$server.on('connectionFailed', this.socketConnectionFailed)
+    this.$server.on('initialStream', this.initialStream)
+    this.$server.on('currentUserAudiobookUpdate', this.currentUserAudiobookUpdate)
+    this.$server.on('show_error_toast', this.showErrorToast)
+    this.$server.on('show_success_toast', this.showSuccessToast)
 
-    this.checkForUpdate()
-
-    // var checkForUpdateFlag = localStorage.getItem('checkForUpdate')
-    // if (!checkForUpdateFlag || checkForUpdateFlag !== '1') {
-    //   this.checkForUpdate()
-    // }
+    if (this.$store.state.isFirstLoad) {
+      this.$store.commit('setIsFirstLoad', false)
+      await this.$store.dispatch('setupNetworkListener')
+      this.attemptConnection()
+      this.checkForUpdate()
+      this.loadSavedSettings()
+      this.initMediaStore()
+    }
+  },
+  beforeDestroy() {
+    if (!this.$server) {
+      console.error('No Server beforeDestroy')
+      return
+    }
+    this.removeSocketListeners()
+    this.$server.off('logout', this.userLoggedOut)
+    this.$server.off('connected', this.connected)
+    this.$server.off('connectionFailed', this.socketConnectionFailed)
+    this.$server.off('initialStream', this.initialStream)
+    this.$server.off('show_error_toast', this.showErrorToast)
+    this.$server.off('show_success_toast', this.showSuccessToast)
   }
 }
 </script>
@@ -155,7 +419,7 @@ export default {
 #content {
   height: calc(100vh - 64px);
 }
-#content.streaming {
-  height: calc(100vh - 204px);
+#content.playerOpen {
+  height: calc(100vh - 164px);
 }
 </style>

mixins/bookshelfCardsHelpers.js

@@ -0,0 +1,89 @@
+import Vue from 'vue'
+import LazyBookCard from '@/components/cards/LazyBookCard'
+import LazySeriesCard from '@/components/cards/LazySeriesCard'
+import LazyCollectionCard from '@/components/cards/LazyCollectionCard'
+
+export default {
+  data() {
+    return {
+      cardsHelpers: {
+        mountEntityCard: this.mountEntityCard
+      }
+    }
+  },
+  methods: {
+    getComponentClass() {
+      if (this.entityName === 'series') return Vue.extend(LazySeriesCard)
+      if (this.entityName === 'collections') return Vue.extend(LazyCollectionCard)
+      return Vue.extend(LazyBookCard)
+    },
+    async mountEntityCard(index) {
+      var shelf = Math.floor(index / this.entitiesPerShelf)
+      var shelfEl = document.getElementById(`shelf-${shelf}`)
+      if (!shelfEl) {
+        console.error('mount entity card invalid shelf', shelf, 'book index', index)
+        return
+      }
+      this.entityIndexesMounted.push(index)
+      if (this.entityComponentRefs[index]) {
+        var bookComponent = this.entityComponentRefs[index]
+        shelfEl.appendChild(bookComponent.$el)
+        if (this.isSelectionMode) {
+          bookComponent.setSelectionMode(true)
+          if (this.selectedAudiobooks.includes(bookComponent.audiobookId) || this.isSelectAll) {
+            bookComponent.selected = true
+          } else {
+            bookComponent.selected = false
+          }
+        } else {
+          bookComponent.setSelectionMode(false)
+        }
+        bookComponent.isHovering = false
+        return
+      }
+      var shelfOffsetY = this.isBookEntity ? 24 : 16
+      var row = index % this.entitiesPerShelf
+
+      var marginShiftLeft = 12
+      var shelfOffsetX = row * this.totalEntityCardWidth + this.bookshelfMarginLeft + marginShiftLeft
+
+      var ComponentClass = this.getComponentClass()
+      var props = {
+        index,
+        width: this.entityWidth,
+        height: this.entityHeight,
+        bookCoverAspectRatio: this.bookCoverAspectRatio
+      }
+      if (this.entityName === 'series-books') props.showVolumeNumber = true
+
+      var _this = this
+      var instance = new ComponentClass({
+        propsData: props,
+        created() {
+          // this.$on('edit', (entity) => {
+          //   if (_this.editEntity) _this.editEntity(entity)
+          // })
+          // this.$on('select', (entity) => {
+          //   if (_this.selectEntity) _this.selectEntity(entity)
+          // })
+        }
+      })
+      this.entityComponentRefs[index] = instance
+      instance.$mount()
+      instance.$el.style.transform = `translate3d(${shelfOffsetX}px, ${shelfOffsetY}px, 0px)`
+
+      instance.$el.classList.add('absolute', 'top-0', 'left-0')
+      shelfEl.appendChild(instance.$el)
+
+      if (this.entities[index]) {
+        instance.setEntity(this.entities[index])
+      }
+      if (this.isSelectionMode) {
+        instance.setSelectionMode(true)
+        if (instance.audiobookId && this.selectedAudiobooks.includes(instance.audiobookId) || this.isSelectAll) {
+          instance.selected = true
+        }
+      }
+    },
+  }
+}

nuxt.config.js

@@ -14,7 +14,7 @@ export default {
   },
 
   head: {
-    title: 'AudioBookshelf',
+    title: 'Audiobookshelf',
     htmlAttrs: {
       lang: 'en'
     },
@@ -26,8 +26,7 @@ export default {
     ],
     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' }
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Source+Sans+Pro:wght@300;400;600' },
     ]
   },
 
@@ -37,10 +36,15 @@ export default {
 
   plugins: [
     '@/plugins/server.js',
+    '@/plugins/sqlStore.js',
+    '@/plugins/localStore.js',
     '@/plugins/init.client.js',
     '@/plugins/axios.js',
     '@/plugins/my-native-audio.js',
-    '@/plugins/toast.js'
+    '@/plugins/audio-downloader.js',
+    '@/plugins/storage-manager.js',
+    '@/plugins/toast.js',
+    '@/plugins/constants.js'
   ],
 
   components: true,

objects/TouchEvent.js

@@ -0,0 +1,65 @@
+// SOURCE: https://stackoverflow.com/a/69617795/7431543
+export default class TouchEvent {
+    static SWPIE_THRESHOLD = 50 // Minumum difference in pixels at which a swipe gesture is detected
+
+    static SWIPE_LEFT = 1
+    static SWIPE_RIGHT = 2
+    static SWIPE_UP = 3
+    static SWIPE_DOWN = 4
+
+    constructor(startEvent, endEvent) {
+        this.startEvent = startEvent
+        this.endEvent = endEvent || null
+    }
+
+    isSwipeLeft() {
+        return this.getSwipeDirection() == TouchEvent.SWIPE_LEFT
+    }
+
+    isSwipeRight() {
+        return this.getSwipeDirection() == TouchEvent.SWIPE_RIGHT
+    }
+
+    isSwipeUp() {
+        return this.getSwipeDirection() == TouchEvent.SWIPE_UP
+    }
+
+    isSwipeDown() {
+        return this.getSwipeDirection() == TouchEvent.SWIPE_DOWN
+    }
+
+    getSwipeDirection() {
+        let start = this.startEvent.changedTouches[0]
+        let end = this.endEvent.changedTouches[0]
+
+        if (!start || !end) {
+            return null
+        }
+
+        let horizontalDifference = start.screenX - end.screenX
+        let verticalDifference = start.screenY - end.screenY
+
+        // Horizontal difference dominates
+        if (Math.abs(horizontalDifference) > Math.abs(verticalDifference)) {
+            if (horizontalDifference >= TouchEvent.SWPIE_THRESHOLD) {
+                return TouchEvent.SWIPE_LEFT
+            } else if (horizontalDifference <= -TouchEvent.SWPIE_THRESHOLD) {
+                return TouchEvent.SWIPE_RIGHT
+            }
+
+            // Verical or no difference dominates
+        } else {
+            if (verticalDifference >= TouchEvent.SWPIE_THRESHOLD) {
+                return TouchEvent.SWIPE_UP
+            } else if (verticalDifference <= -TouchEvent.SWPIE_THRESHOLD) {
+                return TouchEvent.SWIPE_DOWN
+            }
+        }
+
+        return null
+    }
+
+    setEndEvent(endEvent) {
+        this.endEvent = endEvent
+    }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-app",
-  "version": "v0.2.1-beta",
+  "version": "0.9.33-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1000,11 +1000,21 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@capacitor-community/sqlite": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor-community/sqlite/-/sqlite-3.2.0.tgz",
+      "integrity": "sha512-0tD+XKrtXS44DpeVLV0LR+UZafTBmLNHy3nQBr1lVMsefiunaU75q/BiYGhVdUIdp7x397y16s2RyTqroj5mbg=="
+    },
     "@capacitor/android": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-3.2.2.tgz",
       "integrity": "sha512-+/qbSZIHPP1VndRUe5c6dgheLV0MgX9CXeUo7el8ODHgVrC2DXKhczgvs+EpTAmvS2VZFxzDeld7AMUmHybTcg=="
     },
+    "@capacitor/app": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-1.0.7.tgz",
+      "integrity": "sha512-7CcMGp9yshBR0fkmNPVsYmUUhlAQnJFCeJGJIF3862D5l+drBjEOE+QoGjiKtaqPriadkGCsoYVrX10yGULDpA=="
+    },
     "@capacitor/cli": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-3.1.2.tgz",
@@ -1061,11 +1071,62 @@
       "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-3.2.2.tgz",
       "integrity": "sha512-Eq17Y+UDHFmYGaZcObvxHAcHw0fF9TCBAg1f5f6qdV8ab3cKKEUB9xMvoCSZAueBfxFARrD18TsZJKoxh2YsLA=="
     },
+    "@capacitor/network": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/network/-/network-1.0.3.tgz",
+      "integrity": "sha512-DgRusTC0UkTJE9IQIAMgqBnRnTaj8nFeGH7dwRldfVBZAtHBTkU8wCK/tU1oWtaY2Wam+iyVKXUAhYDO7yeD9Q=="
+    },
+    "@capacitor/storage": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/storage/-/storage-1.1.0.tgz",
+      "integrity": "sha512-Fi5R542sHWfkzBcYeRl4zde+4zPqUpLk7S0LzrkCwn9eAy90v8yY6Pa6dXfADXvkPKDdPckmyCQ7CmM+YImsrQ=="
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@electron/get": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.13.0.tgz",
+      "integrity": "sha512-+SjZhRuRo+STTO1Fdhzqnv9D2ZhjxXP6egsJ9kiO8dtP68cDx7dFCwWi64dlMQV7sWcfW1OYCW4wviEBzmRsfQ==",
+      "requires": {
+        "debug": "^4.1.1",
+        "env-paths": "^2.2.0",
+        "fs-extra": "^8.1.0",
+        "global-agent": "^2.0.2",
+        "global-tunnel-ng": "^2.7.1",
+        "got": "^9.6.0",
+        "progress": "^2.0.3",
+        "semver": "^6.2.0",
+        "sumchecker": "^3.0.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        }
+      }
+    },
     "@ionic/cli-framework-output": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.2.tgz",
@@ -2619,6 +2680,19 @@
       "resolved": "https://registry.npmjs.org/@robingenz/capacitor-app-update/-/capacitor-app-update-1.0.0.tgz",
       "integrity": "sha512-pK8Yi7VgG/O/R4kJ3JtLpdeQgJzRIDPGM61bJhofTqu/+i26h8GhQdq4MB2OLJWk06Ht8MYDIIW/E0nxatrrnA=="
     },
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
     "@types/component-emitter": {
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -2642,6 +2716,14 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
     },
+    "@types/localforage": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@types/localforage/-/localforage-0.0.34.tgz",
+      "integrity": "sha1-XjHDLdh5HsS5/z70fJy1Wy0NlDg=",
+      "requires": {
+        "localforage": "*"
+      }
+    },
     "@types/node": {
       "version": "16.4.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.12.tgz",
@@ -3523,6 +3605,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "boolean": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.1.4.tgz",
+      "integrity": "sha512-3hx0kwU3uzG6ReQ3pnaFQPSktpBw6RHN3/ivDKEuU8g1XSfafowyvDnadjv1xp8IZqhtSukxlwv9bF6FhX8m0w==",
+      "optional": true
+    },
     "boxen": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.0.1.tgz",
@@ -3875,6 +3963,40 @@
         "schema-utils": "^2.0.0"
       }
     },
+    "cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lowercase-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
+        },
+        "normalize-url": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+          "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA=="
+        }
+      }
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -3941,6 +4063,15 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz",
       "integrity": "sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw=="
     },
+    "capacitor-data-storage-sqlite": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/capacitor-data-storage-sqlite/-/capacitor-data-storage-sqlite-3.2.0.tgz",
+      "integrity": "sha512-+8uyd9O+k/UleSGAKI7rNkF5AAAMeLzvzIqBle7sYjLRuhRiuCLapJ5b5GLAbzdtyUp72YoZX29XCKk3ywDAyg==",
+      "requires": {
+        "electron": "~13.1.4",
+        "localforage": "^1.9.0"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4167,6 +4298,14 @@
         }
       }
     },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4296,6 +4435,16 @@
         "typedarray": "^0.0.6"
       }
     },
+    "config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "optional": true,
+      "requires": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "connect": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@@ -4998,6 +5147,20 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "date-fns": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.25.0.tgz",
+      "integrity": "sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -5016,6 +5179,14 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -5027,6 +5198,11 @@
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
     },
+    "defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -5118,6 +5294,12 @@
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
       "integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50="
     },
+    "detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "optional": true
+    },
     "detective": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
@@ -5256,6 +5438,11 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -5272,6 +5459,23 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
+    "electron": {
+      "version": "13.1.9",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-13.1.9.tgz",
+      "integrity": "sha512-By4Zb72XNQLrPb70BXdIW3NtEHFwybP5DIQjohnCxOYONq5vojuHjNcTuWnBgMvwQ2qwykk6Tw5EwF2Pt0CWjA==",
+      "requires": {
+        "@electron/get": "^1.0.1",
+        "@types/node": "^14.6.2",
+        "extract-zip": "^1.0.3"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.17.15",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.15.tgz",
+          "integrity": "sha512-D1sdW0EcSCmNdLKBGMYb38YsHUS6JcM7yQ6sLQ9KuZ35ck7LYCKE7kYFHOO59ayFOY3zobWVZxf4KXhYHcHYFA=="
+        }
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.796",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.796.tgz",
@@ -5387,6 +5591,29 @@
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="
     },
+    "epubjs": {
+      "version": "0.3.88",
+      "resolved": "https://registry.npmjs.org/epubjs/-/epubjs-0.3.88.tgz",
+      "integrity": "sha512-VRumULpUELYmYwzypyfbDwoSIqDp2LXOXCtY3o55o3YDW5Zm32UjtZuX/xaWFGqyZORNNMWWQ8VlMaY1djnDYg==",
+      "requires": {
+        "@types/localforage": "0.0.34",
+        "core-js": "^3.6.5",
+        "event-emitter": "^0.3.5",
+        "jszip": "^3.4.0",
+        "localforage": "^1.7.3",
+        "lodash": "^4.17.15",
+        "marks-pane": "^1.0.9",
+        "path-webpack": "0.0.3",
+        "xmldom": "^0.3.0"
+      },
+      "dependencies": {
+        "xmldom": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.3.0.tgz",
+          "integrity": "sha512-z9s6k3wxE+aZHgXYxSTpGDo7BYOUfJsIRyoZiX6HTjwpwfS2wpQBQKa2fD+ShLyPkqDYo5ud7KitmLZ2Cd6r0g=="
+        }
+      }
+    },
     "errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -5445,6 +5672,41 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "optional": true
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -5504,6 +5766,15 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -5594,6 +5865,21 @@
         }
       }
     },
+    "ext": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
+      "integrity": "sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==",
+      "requires": {
+        "type": "^2.5.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz",
+          "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw=="
+        }
+      }
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -5726,6 +6012,32 @@
         }
       }
     },
+    "extract-zip": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz",
+      "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==",
+      "requires": {
+        "concat-stream": "^1.6.2",
+        "debug": "^2.6.9",
+        "mkdirp": "^0.5.4",
+        "yauzl": "^2.10.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6070,11 +6382,58 @@
         "is-glob": "^4.0.1"
       }
     },
+    "global-agent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-2.2.0.tgz",
+      "integrity": "sha512-+20KpaW6DDLqhG7JDiJpD1JvNvb8ts+TNl7BPOYcURqCrXqnN1Vf+XVOrkKJAFPqfX+oEhsdzOj1hLWkBTdNJg==",
+      "optional": true,
+      "requires": {
+        "boolean": "^3.0.1",
+        "core-js": "^3.6.5",
+        "es6-error": "^4.1.1",
+        "matcher": "^3.0.0",
+        "roarr": "^2.15.3",
+        "semver": "^7.3.2",
+        "serialize-error": "^7.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "optional": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "global-tunnel-ng": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/global-tunnel-ng/-/global-tunnel-ng-2.7.1.tgz",
+      "integrity": "sha512-4s+DyciWBV0eK148wqXxcmVAbFVPqtc3sEtUE/GTQfuU80rySLcMhUmHKSHI7/LDj8q0gDYI1lIhRRB7ieRAqg==",
+      "optional": true,
+      "requires": {
+        "encodeurl": "^1.0.2",
+        "lodash": "^4.17.10",
+        "npm-conf": "^1.1.3",
+        "tunnel": "^0.0.6"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "globalthis": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.2.tgz",
+      "integrity": "sha512-ZQnSFO1la8P7auIOQECnm0sSuoMeaSq0EEdXMBFF2QJO4uNcwbyhSgG3MruWNbFTqCLmxVwGOl7LZ9kASvHdeQ==",
+      "optional": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
     "globby": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
@@ -6088,6 +6447,34 @@
         "slash": "^3.0.0"
       }
     },
+    "got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "requires": {
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        }
+      }
+    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -6511,6 +6898,11 @@
         "http-errors": "~1.7.2"
       }
     },
+    "http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -6611,6 +7003,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7100,6 +7497,11 @@
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
+    "json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -7116,6 +7518,12 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "optional": true
+    },
     "json5": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
@@ -7133,6 +7541,27 @@
         "universalify": "^2.0.0"
       }
     },
+    "jszip": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.1.tgz",
+      "integrity": "sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      },
+      "dependencies": {
+        "lie": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+          "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+          "requires": {
+            "immediate": "~3.0.5"
+          }
+        }
+      }
+    },
     "keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -7142,6 +7571,14 @@
         "tsscmp": "1.0.6"
       }
     },
+    "keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -7297,6 +7734,19 @@
         "launch-editor": "^2.2.1"
       }
     },
+    "libarchive.js": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/libarchive.js/-/libarchive.js-1.3.0.tgz",
+      "integrity": "sha512-EkQfRXt9DhWwj6BnEA2TNpOf4jTnzSTUPGgE+iFxcdNqjktY8GitbDeHnx8qZA0/IukNyyBUR3oQKRdYkO+HFg=="
+    },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lilconfig": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
@@ -7334,6 +7784,14 @@
         }
       }
     },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -7409,6 +7867,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -7446,6 +7909,28 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marks-pane": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/marks-pane/-/marks-pane-1.0.9.tgz",
+      "integrity": "sha512-Ahs4oeG90tbdPWwAJkAAoHg2lRR8lAs9mZXETNPO9hYg3AkjUJBKi1NQ4aaIQZVGrig7c/3NUV1jANl8rFTeMg=="
+    },
+    "matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "optional": true,
+      "requires": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "optional": true
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -7572,6 +8057,11 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
       "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ=="
     },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -7791,6 +8281,11 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
     "no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -7949,6 +8444,24 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "npm-conf": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
+      "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
+      "optional": true,
+      "requires": {
+        "config-chain": "^1.1.11",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "optional": true
+        }
+      }
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -8173,6 +8686,11 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
+    "p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -8396,6 +8914,11 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "path-webpack": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/path-webpack/-/path-webpack-0.0.3.tgz",
+      "integrity": "sha1-/23sdJ7sWpRgXATV9j/FVgegOhY="
+    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -10998,6 +11521,11 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -11029,6 +11557,12 @@
         "signal-exit": "^3.0.2"
       }
     },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
+      "optional": true
+    },
     "protocols": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-1.4.8.tgz",
@@ -11550,6 +12084,14 @@
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
     "restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -11601,6 +12143,28 @@
         "inherits": "^2.0.1"
       }
     },
+    "roarr": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+      "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+      "optional": true,
+      "requires": {
+        "boolean": "^3.0.1",
+        "detect-node": "^2.0.4",
+        "globalthis": "^1.0.1",
+        "json-stringify-safe": "^5.0.1",
+        "semver-compare": "^1.0.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "dependencies": {
+        "sprintf-js": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+          "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
+          "optional": true
+        }
+      }
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -11680,6 +12244,12 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
+    "semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+      "optional": true
+    },
     "send": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
@@ -11727,6 +12297,23 @@
         }
       }
     },
+    "serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "optional": true,
+      "requires": {
+        "type-fest": "^0.13.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+          "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+          "optional": true
+        }
+      }
+    },
     "serialize-javascript": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
@@ -11759,6 +12346,11 @@
       "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
       "integrity": "sha1-8Tv5KOQrnD55OD5hzDmYtdFObN0="
     },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -12361,6 +12953,14 @@
         }
       }
     },
+    "sumchecker": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
+      "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==",
+      "requires": {
+        "debug": "^4.1.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -12847,6 +13447,11 @@
         }
       }
     },
+    "to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q=="
+    },
     "to-regex": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
@@ -12902,6 +13507,17 @@
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
     },
+    "tunnel": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+      "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+      "optional": true
+    },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
     "type-fest": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
@@ -13141,6 +13757,21 @@
         }
       }
     },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "requires": {
+        "prepend-http": "^2.0.0"
+      },
+      "dependencies": {
+        "prepend-http": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
+        }
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-app",
-  "version": "v0.2.1-beta",
+  "version": "0.9.35-beta",
   "author": "advplyr",
   "scripts": {
     "dev": "nuxt --hostname localhost --port 1337",
@@ -10,16 +10,24 @@
     "icons-android": "cordova-res android --skip-config --copy"
   },
   "dependencies": {
+    "@capacitor-community/sqlite": "^3.2.0",
     "@capacitor/android": "^3.2.2",
+    "@capacitor/app": "^1.0.7",
     "@capacitor/cli": "^3.1.2",
     "@capacitor/core": "^3.2.2",
     "@capacitor/dialog": "^1.0.3",
     "@capacitor/ios": "^3.2.2",
+    "@capacitor/network": "^1.0.3",
+    "@capacitor/storage": "^1.1.0",
     "@nuxtjs/axios": "^5.13.6",
     "@robingenz/capacitor-app-update": "^1.0.0",
     "axios": "^0.21.1",
+    "capacitor-data-storage-sqlite": "^3.2.0",
     "core-js": "^3.15.1",
+    "date-fns": "^2.25.0",
+    "epubjs": "^0.3.88",
     "hls.js": "^1.0.9",
+    "libarchive.js": "^1.3.0",
     "nuxt": "^2.15.7",
     "socket.io-client": "^4.1.3",
     "vue-toastification": "^1.7.11"
@@ -30,4 +38,4 @@
     "@nuxtjs/tailwindcss": "^4.2.0",
     "postcss": "^8.3.5"
   }
-}
+}

pages/account.vue

@@ -22,7 +22,11 @@
 
     <p class="font-mono pt-1 pb-4">{{ $config.version }}</p>
 
-    <ui-btn v-if="isUpdateAvailable" class="w-full my-4" color="success" @click="clickUpdate"> Version {{ availableVersion }} is available! {{ immediateUpdateAllowed ? 'Update now' : 'Get update from app store' }} </ui-btn>
+    <ui-btn v-if="isUpdateAvailable" class="w-full my-4" color="success" @click="clickUpdate">Update is available</ui-btn>
+
+    <ui-btn v-if="!isUpdateAvailable || immediateUpdateAllowed" class="w-full my-4" color="primary" @click="openAppStore">Open app store</ui-btn>
+
+    <p class="text-xs text-gray-400">UA: {{ updateAvailability }} | Avail: {{ availableVersion }} | Curr: {{ currentVersion }} | ImmedAllowed: {{ immediateUpdateAllowed }}</p>
   </div>
 </template>
 
@@ -30,11 +34,18 @@
 import { AppUpdate } from '@robingenz/capacitor-app-update'
 
 export default {
+  asyncData({ redirect, store }) {
+    if (!store.state.socketConnected) {
+      return redirect('/connect')
+    }
+    return {}
+  },
   data() {
     return {}
   },
   computed: {
     username() {
+      if (!this.user) return ''
       return this.user.username
     },
     user() {
@@ -49,6 +60,9 @@ export default {
     availableVersion() {
       return this.appUpdateInfo ? this.appUpdateInfo.availableVersion : null
     },
+    currentVersion() {
+      return this.appUpdateInfo ? this.appUpdateInfo.currentVersion : null
+    },
     immediateUpdateAllowed() {
       return this.appUpdateInfo ? !!this.appUpdateInfo.immediateUpdateAllowed : false
     },
@@ -60,18 +74,21 @@ export default {
     }
   },
   methods: {
-    logout() {
-      this.$axios.$post('/logout').catch((error) => {
+    async logout() {
+      await this.$axios.$post('/logout').catch((error) => {
         console.error(error)
       })
       this.$server.logout()
       this.$router.push('/connect')
     },
+    openAppStore() {
+      AppUpdate.openAppStore()
+    },
     async clickUpdate() {
       if (this.immediateUpdateAllowed) {
-        await AppUpdate.performImmediateUpdate()
+        AppUpdate.performImmediateUpdate()
       } else {
-        await AppUpdate.openAppStore()
+        AppUpdate.openAppStore()
       }
     }
   },

pages/audiobook/_id/index.vue

@@ -3,17 +3,19 @@
     <div class="flex">
       <div class="w-32">
         <div class="relative">
-          <cards-book-cover :audiobook="audiobook" :width="128" />
-          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :style="{ width: 128 * progressPercent + 'px' }"></div>
+          <covers-book-cover :audiobook="audiobook" :download-cover="downloadedCover" :width="128" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :style="{ width: 128 * progressPercent + 'px' }"></div>
+        </div>
+        <div class="flex my-4">
+          <p v-if="numTracks" class="text-sm">{{ numTracks }} Tracks</p>
         </div>
-        <!-- <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 v-if="numTracks" class="text-gray-300 text-sm my-1">
+          {{ $elapsedPretty(duration) }}<span class="px-4">{{ $bytesPretty(size) }}</span>
         </p>
 
         <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
@@ -24,11 +26,19 @@
           </div>
         </div>
 
-        <ui-btn color="success" :disabled="streaming" class="flex items-center justify-center w-full mt-4" :padding-x="4" @click="playClick">
-          <span v-show="!streaming" class="material-icons">play_arrow</span>
-          <span class="px-1">{{ streaming ? 'Streaming' : 'Play' }}</span>
-        </ui-btn>
-        <div class="flex my-4"></div>
+        <div v-if="(isConnected && (showPlay || showRead)) || isDownloadPlayable" class="flex mt-4 -mr-2">
+          <ui-btn v-if="showPlay" color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mr-2" :padding-x="4" @click="playClick">
+            <span v-show="!isPlaying" class="material-icons">play_arrow</span>
+            <span class="px-1 text-sm">{{ isPlaying ? (isStreaming ? 'Streaming' : 'Playing') : isDownloadPlayable ? 'Play local' : 'Play stream' }}</span>
+          </ui-btn>
+          <ui-btn v-if="showRead && isConnected" color="info" class="flex items-center justify-center mr-2" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
+            <span class="material-icons">auto_stories</span>
+            <span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
+          </ui-btn>
+          <ui-btn v-if="isConnected && showPlay" color="primary" class="flex items-center justify-center" :padding-x="2" @click="downloadClick">
+            <span class="material-icons" :class="downloadObj ? 'animate-pulse' : ''">{{ downloadObj ? (isDownloading || isDownloadPreparing ? 'downloading' : 'download_done') : 'download' }}</span>
+          </ui-btn>
+        </div>
       </div>
     </div>
     <div class="w-full py-4">
@@ -38,15 +48,28 @@
 </template>
 
 <script>
+import Path from 'path'
 import { Dialog } from '@capacitor/dialog'
+import AudioDownloader from '@/plugins/audio-downloader'
+import StorageManager from '@/plugins/storage-manager'
 
 export default {
-  async asyncData({ params, redirect, app }) {
+  async asyncData({ store, params, redirect, app }) {
     var audiobookId = params.id
-    var audiobook = await app.$axios.$get(`/api/audiobook/${audiobookId}`).catch((error) => {
-      console.error('Failed', error)
-      return false
-    })
+    var audiobook = null
+
+    if (app.$server.connected) {
+      audiobook = await app.$axios.$get(`/api/books/${audiobookId}`).catch((error) => {
+        console.error('Failed', error)
+        return false
+      })
+    } else {
+      var download = store.getters['downloads/getDownload'](audiobookId)
+      if (download) {
+        audiobook = download.audiobook
+      }
+    }
+
     if (!audiobook) {
       console.error('No audiobook...', params.id)
       return redirect('/')
@@ -61,6 +84,12 @@ export default {
     }
   },
   computed: {
+    isConnected() {
+      return this.$store.state.socketConnected
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
     audiobookId() {
       return this.audiobook.id
     },
@@ -87,20 +116,17 @@ export default {
       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
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    size() {
+      return this.audiobook.size
     },
     userAudiobook() {
-      return this.userAudiobooks[this.audiobookId] || null
+      return this.$store.getters['user/getUserAudiobook'](this.audiobookId)
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
     },
     userCurrentTime() {
       return this.userAudiobook ? this.userAudiobook.currentTime : 0
@@ -111,18 +137,70 @@ export default {
     progressPercent() {
       return this.userAudiobook ? this.userAudiobook.progress : 0
     },
-    streamAudiobook() {
-      return this.$store.state.streamAudiobook
-    },
     isStreaming() {
-      return this.streamAudiobook && this.streamAudiobook.id === this.audiobookId
+      return this.$store.getters['isAudiobookStreaming'](this.audiobookId)
+    },
+    isPlaying() {
+      return this.$store.getters['isAudiobookPlaying'](this.audiobookId)
+    },
+    numTracks() {
+      if (this.audiobook.tracks) return this.audiobook.tracks.length
+      return this.audiobook.numTracks || 0
+    },
+    isMissing() {
+      return this.audiobook.isMissing
+    },
+    isIncomplete() {
+      return this.audiobook.isIncomplete
+    },
+    isDownloading() {
+      return this.downloadObj ? this.downloadObj.isDownloading : false
+    },
+    showPlay() {
+      return !this.isMissing && !this.isIncomplete && this.numTracks
+    },
+    showRead() {
+      return this.hasEbook && this.ebookFormat !== '.pdf'
+    },
+    hasEbook() {
+      return this.audiobook.numEbooks
+    },
+    ebookFormat() {
+      if (!this.audiobook || !this.audiobook.ebooks || !this.audiobook.ebooks.length) return null
+      return this.audiobook.ebooks[0].ext.substr(1)
+    },
+    isDownloadPreparing() {
+      return this.downloadObj ? this.downloadObj.isPreparing : false
+    },
+    isDownloadPlayable() {
+      return this.downloadObj && !this.isDownloading && !this.isDownloadPreparing
+    },
+    downloadedCover() {
+      return this.downloadObj ? this.downloadObj.cover : null
+    },
+    downloadObj() {
+      return this.$store.getters['downloads/getDownload'](this.audiobookId)
+    },
+    hasStoragePermission() {
+      return this.$store.state.hasStoragePermission
     }
   },
   methods: {
+    readBook() {
+      this.$store.commit('openReader', this.audiobook)
+    },
     playClick() {
       this.$store.commit('setPlayOnLoad', true)
-      this.$store.commit('setStreamAudiobook', this.audiobook)
-      this.$server.socket.emit('open_stream', this.audiobook.id)
+      if (!this.isDownloadPlayable) {
+        // Stream
+        console.log('[PLAYCLICK] Set Playing STREAM ' + this.title)
+        this.$store.commit('setStreamAudiobook', this.audiobook)
+        this.$server.socket.emit('open_stream', this.audiobook.id)
+      } else {
+        // Local
+        console.log('[PLAYCLICK] Set Playing Local Download ' + this.title)
+        this.$store.commit('setPlayingDownload', this.downloadObj)
+      }
     },
     async clearProgressClick() {
       const { value } = await Dialog.confirm({
@@ -132,36 +210,229 @@ export default {
 
       if (value) {
         this.resettingProgress = true
+        this.$store.dispatch('user/updateUserAudiobookData', {
+          audiobookId: this.audiobookId,
+          currentTime: 0,
+          totalDuration: this.duration,
+          progress: 0,
+          lastUpdate: Date.now(),
+          isRead: false
+        })
+
+        if (this.$server.connected) {
+          await this.$axios
+            .$patch(`/api/me/audiobook/${this.audiobookId}/reset-progress`)
+            .then(() => {
+              console.log('Progress reset complete')
+              this.$toast.success(`Your progress was reset`)
+            })
+            .catch((error) => {
+              console.error('Progress reset failed', error)
+            })
+        }
+
+        this.resettingProgress = false
+      }
+    },
+    audiobookUpdated(audiobook) {
+      if (audiobook.id === this.audiobookId) {
+        console.log('Audiobook Updated - Fetch full audiobook')
         this.$axios
-          .$delete(`/api/user/audiobook/${this.audiobookId}`)
-          .then(() => {
-            console.log('Progress reset complete')
-            this.$toast.success(`Your progress was reset`)
-            this.resettingProgress = false
+          .$get(`/api/books/${this.audiobookId}`)
+          .then((audiobook) => {
+            this.audiobook = audiobook
           })
           .catch((error) => {
-            console.error('Progress reset failed', error)
-            this.resettingProgress = false
+            console.error('Failed', error)
           })
       }
     },
-    audiobookUpdated() {
-      console.log('Audiobook Updated - Fetch full audiobook')
-      this.$axios
-        .$get(`/api/audiobook/${this.audiobookId}`)
-        .then((audiobook) => {
-          this.audiobook = audiobook
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-        })
+    downloadClick() {
+      console.log('downloadClick ' + this.$server.connected + ' | ' + !!this.downloadObj)
+      if (!this.$server.connected) return
+
+      if (this.downloadObj) {
+        console.log('Already downloaded', this.downloadObj)
+      } else {
+        this.prepareDownload()
+      }
+    },
+    async changeDownloadFolderClick() {
+      if (!this.hasStoragePermission) {
+        console.log('Requesting Storage Permission')
+        await StorageManager.requestStoragePermission()
+      } else {
+        var folderObj = await StorageManager.selectFolder()
+        if (folderObj.error) {
+          return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
+        }
+
+        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.uri })
+        console.log('Storage Permission check folder ' + permissionsGood)
+
+        if (!permissionsGood) {
+          this.$toast.error('Folder permissions failed')
+          return
+        } else {
+          this.$toast.success('Folder permission success')
+        }
+
+        await this.$localStore.setDownloadFolder(folderObj)
+      }
+    },
+    async prepareDownload() {
+      var audiobook = this.audiobook
+      if (!audiobook) {
+        return
+      }
+
+      // Download Path
+      var dlFolder = this.$localStore.downloadFolder
+      console.log('Prepare download: ' + this.hasStoragePermission + ' | ' + dlFolder)
+
+      if (!this.hasStoragePermission || !dlFolder) {
+        console.log('No download folder, request from user')
+        // User to select download folder from download modal to ensure permissions
+        // this.$store.commit('downloads/setShowModal', true)
+        this.changeDownloadFolderClick()
+        return
+      } else {
+        console.log('Has Download folder: ' + JSON.stringify(dlFolder))
+      }
+
+      var downloadObject = {
+        id: this.audiobookId,
+        downloadFolderUrl: dlFolder.uri,
+        audiobook: {
+          ...audiobook
+        },
+        isPreparing: true,
+        isDownloading: false,
+        toastId: this.$toast(`Preparing download for "${this.title}"`, { timeout: false })
+      }
+      if (audiobook.tracks.length === 1) {
+        // Single track should not need preparation
+        console.log('Single track, start download no prep needed')
+        var track = audiobook.tracks[0]
+        var fileext = track.ext
+
+        console.log('Download Single Track Path: ' + track.path)
+
+        var relTrackPath = track.path.replace('\\', '/').replace(this.audiobook.path.replace('\\', '/'), '')
+
+        var url = `${this.$store.state.serverUrl}/s/book/${this.audiobookId}${relTrackPath}?token=${this.userToken}`
+        this.startDownload(url, fileext, downloadObject)
+      } else {
+        // Multi-track merge
+        this.$store.commit('downloads/addUpdateDownload', downloadObject)
+
+        var prepareDownloadPayload = {
+          audiobookId: this.audiobookId,
+          audioFileType: 'same',
+          type: 'singleAudio'
+        }
+        this.$server.socket.emit('download', prepareDownloadPayload)
+      }
+    },
+    getCoverUrlForDownload() {
+      if (!this.book || !this.book.cover) return null
+
+      var cover = this.book.cover
+      if (cover.startsWith('http')) return cover
+      var coverSrc = this.$store.getters['audiobooks/getBookCoverSrc'](this.audiobook)
+      return coverSrc
+      // var _clean = 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}?token=${this.userToken}&ts=${Date.now()}`
+      // } else if (_clean.startsWith('/metadata')) {
+      //   return `${this.$store.state.serverUrl}${_clean}?token=${this.userToken}&ts=${Date.now()}`
+      // }
+      // return _clean
+    },
+    async startDownload(url, fileext, download) {
+      this.$toast.update(download.toastId, { content: `Downloading "${download.audiobook.book.title}"...` })
+
+      var coverDownloadUrl = this.getCoverUrlForDownload()
+      var coverFilename = null
+      if (coverDownloadUrl) {
+        var coverNoQueryString = coverDownloadUrl.split('?')[0]
+
+        var coverExt = Path.extname(coverNoQueryString) || '.jpg'
+        coverFilename = `cover-${download.id}${coverExt}`
+      }
+
+      download.isDownloading = true
+      download.isPreparing = false
+      download.filename = `${download.audiobook.book.title}${fileext}`
+      this.$store.commit('downloads/addUpdateDownload', download)
+
+      console.log('Starting Download URL', url)
+      var downloadRequestPayload = {
+        audiobookId: download.id,
+        filename: download.filename,
+        coverFilename,
+        coverDownloadUrl,
+        downloadUrl: url,
+        title: download.audiobook.book.title,
+        downloadFolderUrl: download.downloadFolderUrl
+      }
+      var downloadRes = await AudioDownloader.download(downloadRequestPayload)
+      if (downloadRes.error) {
+        var errorMsg = downloadRes.error || 'Unknown error'
+        console.error('Download error', errorMsg)
+        this.$toast.update(download.toastId, { content: `Error: ${errorMsg}`, options: { timeout: 5000, type: 'error' } })
+        this.$store.commit('downloads/removeDownload', download)
+      }
+    },
+    downloadReady(prepareDownload) {
+      var download = this.$store.getters['downloads/getDownload'](prepareDownload.audiobookId)
+      if (download) {
+        var fileext = prepareDownload.ext
+        var url = `${this.$store.state.serverUrl}/downloads/${prepareDownload.id}/${prepareDownload.filename}?token=${this.userToken}`
+        this.startDownload(url, fileext, download)
+      } else {
+        console.error('Prepare download killed but download not found', prepareDownload)
+      }
+    },
+    downloadKilled(prepareDownload) {
+      var download = this.$store.getters['downloads/getDownload'](prepareDownload.audiobookId)
+      if (download) {
+        this.$toast.update(download.toastId, { content: `Prepare download killed for "${download.audiobook.book.title}"`, options: { timeout: 5000, type: 'error' } })
+        this.$store.commit('downloads/removeDownload', download)
+      } else {
+        console.error('Prepare download killed but download not found', prepareDownload)
+      }
+    },
+    downloadFailed(prepareDownload) {
+      var download = this.$store.getters['downloads/getDownload'](prepareDownload.audiobookId)
+      if (download) {
+        this.$toast.update(download.toastId, { content: `Prepare download failed for "${download.audiobook.book.title}"`, options: { timeout: 5000, type: 'error' } })
+        this.$store.commit('downloads/removeDownload', download)
+      } else {
+        console.error('Prepare download failed but download not found', prepareDownload)
+      }
     }
   },
   mounted() {
-    this.$store.commit('audiobooks/addListener', { id: 'audiobook', audiobookId: this.audiobookId, meth: this.audiobookUpdated })
+    if (!this.$server.socket) {
+      console.warn('Audiobook Page mounted: Server socket not set')
+    } else {
+      this.$server.socket.on('download_ready', this.downloadReady)
+      this.$server.socket.on('download_killed', this.downloadKilled)
+      this.$server.socket.on('download_failed', this.downloadFailed)
+      this.$server.socket.on('audiobook_updated', this.audiobookUpdated)
+    }
   },
   beforeDestroy() {
-    this.$store.commit('audiobooks/removeListener', 'audiobook')
+    if (!this.$server.socket) {
+      console.warn('Audiobook Page beforeDestroy: Server socket not set')
+    } else {
+      this.$server.socket.off('download_ready', this.downloadReady)
+      this.$server.socket.off('download_killed', this.downloadKilled)
+      this.$server.socket.off('download_failed', this.downloadFailed)
+      this.$server.socket.off('audiobook_updated', this.audiobookUpdated)
+    }
   }
 }
 </script>

pages/bookshelf.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="w-full h-full">
+    <home-bookshelf-nav-bar />
+    <home-bookshelf-toolbar v-show="!isHome" />
+    <div id="bookshelf-wrapper" class="main-content overflow-y-auto overflow-x-hidden relative" :class="isHome ? 'home-page' : ''">
+      <nuxt-child />
+
+      <!-- <div v-if="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+        <ui-loading-indicator />
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    isHome() {
+      return this.$route.name === 'bookshelf'
+    }
+  }
+}
+</script>
+
+<style>
+.main-content {
+  max-height: calc(100% - 72px);
+  min-height: calc(100% - 72px);
+  max-width: 100vw;
+}
+.main-content.home-page {
+  max-height: calc(100% - 36px);
+  min-height: calc(100% - 36px);
+}
+</style>