Updates to downloader, audio track ordering, hard deleting from file system, UI updates and fixes

android/app/capacitor.build.gradle

@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-dialog')
+    implementation project(':capacitor-haptics')
     implementation project(':capacitor-network')
     implementation project(':capacitor-status-bar')
     implementation project(':capacitor-storage')

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

@@ -7,6 +7,10 @@
 		"pkg": "@capacitor/dialog",
 		"classpath": "com.capacitorjs.plugins.dialog.DialogPlugin"
 	},
+	{
+		"pkg": "@capacitor/haptics",
+		"classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin"
+	},
 	{
 		"pkg": "@capacitor/network",
 		"classpath": "com.capacitorjs.plugins.network.NetworkPlugin"

android/app/src/main/java/com/audiobookshelf/app/data/DataClasses.kt

@@ -119,9 +119,18 @@ class Book(
   override fun removeAudioTrack(localFileId:String) {
     tracks?.removeIf { it.localFileId == localFileId }
 
+    tracks?.sortBy { it.index }
+
+    var index = 1
+    var startOffset = 0.0
     var totalDuration = 0.0
     tracks?.forEach {
+      it.index = index
+      it.startOffset = startOffset
       totalDuration += it.duration
+
+      index++
+      startOffset += it.duration
     }
     duration = totalDuration
   }
@@ -233,6 +242,7 @@ data class AudioTrack(
   var isLocal:Boolean,
   var localFileId:String?,
   var audioProbeResult:AudioProbeResult?,
+  var serverIndex:Int? // Need to know if server track index is different
 ) {
 
   @get:JsonIgnore

android/app/src/main/java/com/audiobookshelf/app/data/DeviceClasses.kt

@@ -22,8 +22,10 @@ data class DeviceData(
 @JsonIgnoreProperties(ignoreUnknown = true)
 data class LocalLibraryItem(
   var id:String,
+  var serverAddress:String?,
   var libraryItemId:String?,
   var folderId:String,
+  var basePath:String,
   var absolutePath:String,
   var contentUrl:String,
   var isInvalid:Boolean,
@@ -70,16 +72,23 @@ data class LocalLibraryItem(
     }
     return PlaybackSession(sessionId,null,null,null, mediaType, mediaMetadata, chapters, mediaMetadata.title, authorName,null,getDuration(),PLAYMETHOD_LOCAL, media.getAudioTracks() as MutableList<AudioTrack>,0.0,null,this,null,null)
   }
+
+  @JsonIgnore
+  fun removeLocalFile(localFileId:String) {
+    localFiles.removeIf { it.id == localFileId }
+  }
 }
 
 @JsonIgnoreProperties(ignoreUnknown = true)
 data class LocalMediaItem(
   var id:String,
+  var serverAddress:String?,
   var name: String,
   var mediaType:String,
   var folderId:String,
   var contentUrl:String,
   var simplePath: String,
+  var basePath:String,
   var absolutePath:String,
   var audioTracks:MutableList<AudioTrack>,
   var localFiles:MutableList<LocalFile>,
@@ -126,10 +135,10 @@ data class LocalMediaItem(
     if (mediaType == "book") {
       var chapters = getAudiobookChapters()
       var book = Book(mediaMetadata as BookMetadata, coverAbsolutePath, mutableListOf(), mutableListOf(), chapters,audioTracks,getTotalSize(),getDuration())
-      return LocalLibraryItem(id, null, folderId, absolutePath, contentUrl,  false,mediaType, book, localFiles, coverContentUrl, coverAbsolutePath,true)
+      return LocalLibraryItem(id,serverAddress, null, folderId, basePath,absolutePath, contentUrl,  false,mediaType, book, localFiles, coverContentUrl, coverAbsolutePath,true)
     } else {
       var podcast = Podcast(mediaMetadata as PodcastMetadata, coverAbsolutePath, mutableListOf(), mutableListOf(), false)
-      return LocalLibraryItem(id, null, folderId, absolutePath, contentUrl, false, mediaType, podcast,localFiles,coverContentUrl, coverAbsolutePath, true)
+      return LocalLibraryItem(id,serverAddress, null, folderId, basePath,absolutePath, contentUrl, false, mediaType, podcast,localFiles,coverContentUrl, coverAbsolutePath, true)
     }
   }
 }
@@ -139,6 +148,7 @@ data class LocalFile(
   var id:String,
   var filename:String?,
   var contentUrl:String,
+  var basePath:String,
   var absolutePath:String,
   var simplePath:String,
   var mimeType:String?,
@@ -155,6 +165,7 @@ data class LocalFolder(
   var id:String,
   var name:String,
   var contentUrl:String,
+  var basePath:String,
   var absolutePath:String,
   var simplePath:String,
   var storageType:String,

android/app/src/main/java/com/audiobookshelf/app/device/FolderScanner.kt

@@ -97,7 +97,7 @@ class FolderScanner(var ctx: Context) {
 
          var localFileId = DeviceManager.getBase64Id(file.id)
 
-         var localFile = LocalFile(localFileId,filename,file.uri.toString(),file.getAbsolutePath(ctx),file.getSimplePath(ctx),mimeType,file.length())
+         var localFile = LocalFile(localFileId,filename,file.uri.toString(),file.getBasePath(ctx), file.getAbsolutePath(ctx),file.getSimplePath(ctx),mimeType,file.length())
          localFiles.add(localFile)
 
          Log.d(tag, "File attributes Id:${localFileId}|ContentUrl:${localFile.contentUrl}|isDownloadsDocument:${file.isDownloadsDocument}")
@@ -134,7 +134,7 @@ class FolderScanner(var ctx: Context) {
                audioTrackToAdd = existingAudioTrack
              } else {
                // Create new audio track
-               var track = AudioTrack(index, startOffset, audioProbeResult.duration, filename, localFile.contentUrl, mimeType, null, true, localFileId, audioProbeResult)
+               var track = AudioTrack(index, startOffset, audioProbeResult.duration, filename, localFile.contentUrl, mimeType, null, true, localFileId, audioProbeResult, null)
                audioTrackToAdd = track
              }
 
@@ -186,7 +186,7 @@ class FolderScanner(var ctx: Context) {
          Log.d(tag, "Found local media item named $itemFolderName with ${audioTracks.size} tracks and ${localFiles.size} local files")
          mediaItemsAdded++
 
-         var localMediaItem = LocalMediaItem(itemId, itemFolderName, localFolder.mediaType, localFolder.id, itemFolder.uri.toString(), itemFolder.getSimplePath(ctx), itemFolder.getAbsolutePath(ctx),audioTracks,localFiles,coverContentUrl,coverAbsolutePath)
+         var localMediaItem = LocalMediaItem(itemId,null, itemFolderName, localFolder.mediaType, localFolder.id, itemFolder.uri.toString(), itemFolder.getSimplePath(ctx), itemFolder.getBasePath(ctx), itemFolder.getAbsolutePath(ctx),audioTracks,localFiles,coverContentUrl,coverAbsolutePath)
          var localLibraryItem = localMediaItem.getLocalLibraryItem()
          localLibraryItems.add(localLibraryItem)
        }
@@ -209,10 +209,14 @@ class FolderScanner(var ctx: Context) {
   fun scanDownloadItem(downloadItem: AbsDownloader.DownloadItem):LocalLibraryItem? {
     var folderDf = DocumentFileCompat.fromUri(ctx, Uri.parse(downloadItem.localFolder.contentUrl))
     var foldersFound =  folderDf?.search(false, DocumentFileType.FOLDER) ?: mutableListOf()
-    var itemFolderUrl:String = ""
+    var itemFolderUrl = ""
+    var itemFolderBasePath = ""
+    var itemFolderAbsolutePath = ""
     foldersFound.forEach {
       if (it.name == downloadItem.itemTitle) {
         itemFolderUrl = it.uri.toString()
+        itemFolderBasePath = it.getBasePath(ctx)
+        itemFolderAbsolutePath = it.getAbsolutePath(ctx)
       }
     }
 
@@ -232,7 +236,7 @@ class FolderScanner(var ctx: Context) {
     var filesFound = df.search(false, DocumentFileType.FILE, arrayOf("audio/*", "image/*"))
     Log.d(tag, "scanDownloadItem ${filesFound.size} files found in ${downloadItem.itemFolderPath}")
 
-    var localLibraryItem = LocalLibraryItem("local_${downloadItem.id}", downloadItem.id, downloadItem.localFolder.id, downloadItem.itemFolderPath,itemFolderUrl, false, downloadItem.mediaType, downloadItem.media, mutableListOf(), null, null, true)
+    var localLibraryItem = LocalLibraryItem("local_${downloadItem.id}", downloadItem.serverAddress, downloadItem.id, downloadItem.localFolder.id, itemFolderBasePath, itemFolderAbsolutePath, itemFolderUrl, false, downloadItem.mediaType, downloadItem.media, mutableListOf(), null, null, true)
 
     var localFiles:MutableList<LocalFile> = mutableListOf()
     var audioTracks:MutableList<AudioTrack> = mutableListOf()
@@ -247,7 +251,7 @@ class FolderScanner(var ctx: Context) {
         var audioTrackFromServer = itemPart.audioTrack
 
         var localFileId = DeviceManager.getBase64Id(docFile.id)
-        var localFile = LocalFile(localFileId,docFile.name,docFile.uri.toString(),docFile.getAbsolutePath(ctx),docFile.getSimplePath(ctx),docFile.mimeType,docFile.length())
+        var localFile = LocalFile(localFileId,docFile.name,docFile.uri.toString(),docFile.getBasePath(ctx),docFile.getAbsolutePath(ctx),docFile.getSimplePath(ctx),docFile.mimeType,docFile.length())
         localFiles.add(localFile)
 
         // TODO: Make asynchronous
@@ -257,11 +261,11 @@ class FolderScanner(var ctx: Context) {
         Log.d(tag, "Probe Result DATA ${audioProbeResult.duration} | ${audioProbeResult.size} | ${audioProbeResult.title} | ${audioProbeResult.artist}")
 
           // Create new audio track
-        var track = AudioTrack(audioTrackFromServer?.index ?: 0, audioTrackFromServer?.startOffset ?: 0.0, audioProbeResult.duration, localFile.filename ?: "", localFile.contentUrl, localFile.mimeType ?: "", null, true, localFileId, audioProbeResult)
+        var track = AudioTrack(audioTrackFromServer?.index ?: -1, audioTrackFromServer?.startOffset ?: 0.0, audioProbeResult.duration, localFile.filename ?: "", localFile.contentUrl, localFile.mimeType ?: "", null, true, localFileId, audioProbeResult, audioTrackFromServer?.index ?: -1)
         audioTracks.add(track)
       } else { // Cover image
         var localFileId = DeviceManager.getBase64Id(docFile.id)
-        var localFile = LocalFile(localFileId,docFile.name,docFile.uri.toString(),docFile.getAbsolutePath(ctx),docFile.getSimplePath(ctx),docFile.mimeType,docFile.length())
+        var localFile = LocalFile(localFileId,docFile.name,docFile.uri.toString(),docFile.getBasePath(ctx),docFile.getAbsolutePath(ctx),docFile.getSimplePath(ctx),docFile.mimeType,docFile.length())
         localFiles.add(localFile)
 
         localLibraryItem.coverAbsolutePath = localFile.absolutePath
@@ -274,6 +278,19 @@ class FolderScanner(var ctx: Context) {
       return null
     }
 
+    audioTracks.sortBy { it.index }
+
+    var indexCheck = 1
+    var startOffset = 0.0
+    audioTracks.forEach { audioTrack ->
+      if (audioTrack.index != indexCheck || audioTrack.startOffset != startOffset) {
+        audioTrack.index = indexCheck
+        audioTrack.startOffset = startOffset
+      }
+      indexCheck++
+      startOffset += audioTrack.duration
+    }
+
     localLibraryItem.media.setAudioTracks(audioTracks)
     localLibraryItem.localFiles = localFiles
 
@@ -329,7 +346,7 @@ class FolderScanner(var ctx: Context) {
 
       if (existingLocalFile == null || (existingLocalFile.isAudioFile() && forceAudioProbe)) {
 
-        var localFile = existingLocalFile ?: LocalFile(localFileId,docFile.name,docFile.uri.toString(),docFile.getAbsolutePath(ctx),docFile.getSimplePath(ctx),docFile.mimeType,docFile.length())
+        var localFile = existingLocalFile ?: LocalFile(localFileId,docFile.name,docFile.uri.toString(),docFile.getBasePath(ctx), docFile.getAbsolutePath(ctx),docFile.getSimplePath(ctx),docFile.mimeType,docFile.length())
         if (existingLocalFile == null) {
           localLibraryItem.localFiles.add(localFile)
           Log.d(tag, "scanLocalLibraryItem new file found ${localFile.filename}")
@@ -350,7 +367,7 @@ class FolderScanner(var ctx: Context) {
             // Create new audio track
               var lastTrack = existingAudioTracks.lastOrNull()
             var startOffset = (lastTrack?.startOffset ?: 0.0) + (lastTrack?.duration ?: 0.0)
-            var track = AudioTrack(existingAudioTracks.size, startOffset, audioProbeResult.duration, localFile.filename ?: "", localFile.contentUrl, localFile.mimeType ?: "", null, true, localFileId, audioProbeResult)
+            var track = AudioTrack(existingAudioTracks.size, startOffset, audioProbeResult.duration, localFile.filename ?: "", localFile.contentUrl, localFile.mimeType ?: "", null, true, localFileId, audioProbeResult, null)
             localLibraryItem.media.addAudioTrack(track)
             wasUpdated = true
           } else {

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsAudioPlayer.kt

@@ -88,6 +88,11 @@ class AbsAudioPlayer : Plugin() {
     var libraryItemId = call.getString("libraryItemId", "").toString()
     var playWhenReady = call.getBoolean("playWhenReady") == true
 
+    if (libraryItemId.isEmpty()) {
+      Log.e(tag, "Invalid call to play library item no library item id")
+      return call.resolve()
+    }
+
     if (libraryItemId.startsWith("local")) { // Play local media item
       DeviceManager.dbManager.getLocalLibraryItem(libraryItemId)?.let {
         Handler(Looper.getMainLooper()).post() {

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsDownloader.kt

@@ -62,6 +62,7 @@ class AbsDownloader : Plugin() {
 
   data class DownloadItem(
     val id: String,
+    val serverAddress:String,
     val mediaType: String,
     val itemFolderPath:String,
     val localFolder: LocalFolder,
@@ -142,7 +143,7 @@ class AbsDownloader : Plugin() {
       var tracks = libraryItem.media.getAudioTracks()
       Log.d(tag, "Starting library item download with ${tracks.size} tracks")
       var itemFolderPath = localFolder.absolutePath + "/" + bookTitle
-      var downloadItem = DownloadItem(libraryItem.id, libraryItem.mediaType, itemFolderPath, localFolder, bookTitle, libraryItem.media, mutableListOf())
+      var downloadItem = DownloadItem(libraryItem.id, DeviceManager.serverAddress, libraryItem.mediaType, itemFolderPath, localFolder, bookTitle, libraryItem.media, mutableListOf())
 
       // Create download item part for each audio track
       tracks.forEach { audioTrack ->

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsFileSystem.kt

@@ -25,6 +25,7 @@ import kotlinx.coroutines.launch
 @CapacitorPlugin(name = "AbsFileSystem")
 class AbsFileSystem : Plugin() {
   private val TAG = "AbsFileSystem"
+  private val tag = "AbsFileSystem"
 
   lateinit var mainActivity: MainActivity
 
@@ -70,9 +71,10 @@ class AbsFileSystem : Plugin() {
         var absolutePath = folder.getAbsolutePath(activity)
         var storageType = folder.getStorageType(activity)
         var simplePath = folder.getSimplePath(activity)
+        var basePath = folder.getBasePath(activity)
         var folderId = android.util.Base64.encodeToString(folder.id.toByteArray(), android.util.Base64.DEFAULT)
 
-        var localFolder = LocalFolder(folderId, folder.name ?: "", folder.uri.toString(),absolutePath, simplePath, storageType.toString(), mediaType)
+        var localFolder = LocalFolder(folderId, folder.name ?: "", folder.uri.toString(),basePath,absolutePath, simplePath, storageType.toString(), mediaType)
 
         DeviceManager.dbManager.saveLocalFolder(localFolder)
         call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(localFolder)))
@@ -188,34 +190,44 @@ class AbsFileSystem : Plugin() {
   }
 
   @PluginMethod
-  fun delete(call: PluginCall) {
+  fun deleteItem(call: PluginCall) {
-    var url = call.data.getString("url", "").toString()
+    var localLibraryItemId = call.data.getString("id", "").toString()
-    var coverUrl = call.data.getString("coverUrl", "").toString()
+    var absolutePath = call.data.getString("absolutePath", "").toString()
-    var folderUrl = call.data.getString("folderUrl", "").toString()
+    var contentUrl = call.data.getString("contentUrl", "").toString()
+    Log.d(tag, "deleteItem $absolutePath | $contentUrl")
 
-    if (folderUrl != "") {
+    var docfile = DocumentFileCompat.fromUri(mainActivity, Uri.parse(contentUrl))
-      Log.d(TAG, "CALLED DELETE FOLDER: $folderUrl")
+    var success = docfile?.delete() == true
-      var folder = DocumentFileCompat.fromUri(context, Uri.parse(folderUrl))
+    if (success) {
-      var success = folder?.deleteRecursively(context)
+      DeviceManager.dbManager.removeLocalLibraryItem(localLibraryItemId)
-      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()
-      }
     }
+    call.resolve(JSObject("{\"success\":$success}"))
   }
 
+  @PluginMethod
+  fun deleteTrackFromItem(call: PluginCall) {
+    var localLibraryItemId = call.data.getString("id", "").toString()
+    var trackLocalFileId = call.data.getString("trackLocalFileId", "").toString()
+    var contentUrl = call.data.getString("trackContentUrl", "").toString()
+    Log.d(tag, "deleteTrackFromItem $contentUrl")
+
+    var localLibraryItem = DeviceManager.dbManager.getLocalLibraryItem(localLibraryItemId)
+    if (localLibraryItem == null) {
+      Log.e(tag, "deleteTrackFromItem: LLI does not exist $localLibraryItemId")
+      return call.resolve(JSObject("{\"success\":false}"))
+    }
+
+    var docfile = DocumentFileCompat.fromUri(mainActivity, Uri.parse(contentUrl))
+    var success = docfile?.delete() == true
+    if (success) {
+      localLibraryItem?.media?.removeAudioTrack(trackLocalFileId)
+      localLibraryItem?.removeLocalFile(trackLocalFileId)
+      DeviceManager.dbManager.saveLocalLibraryItem(localLibraryItem)
+      call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(localLibraryItem)))
+    } else {
+      call.resolve(JSObject("{\"success\":false}"))
+    }
+  }
 
   fun checkUriExists(uri: Uri?): Boolean {
     if (uri == null) return false

android/capacitor.settings.gradle

@@ -8,6 +8,9 @@ project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/
 include ':capacitor-dialog'
 project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')
 
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
+
 include ':capacitor-network'
 project(':capacitor-network').projectDir = new File('../node_modules/@capacitor/network/android')
 

components/app/Appbar.vue

@@ -9,10 +9,10 @@
       </a>
       <div v-if="user">
         <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">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
+          <p class="text-base font-book leading-4 ml-2">{{ currentLibraryName }}</p>
         </div>
       </div>
       <div class="flex-grow" />

components/app/AudioPlayerContainer.vue

@@ -166,12 +166,13 @@ export default {
       }
     },
     async playLibraryItem(libraryItemId) {
+      console.log('Called playLibraryItem', libraryItemId)
       AbsAudioPlayer.prepareLibraryItem({ libraryItemId, playWhenReady: true })
         .then((data) => {
-          console.log('TEST library item play response', JSON.stringify(data))
+          console.log('Library item play response', JSON.stringify(data))
         })
         .catch((error) => {
-          console.error('TEST failed', error)
+          console.error('Failed', error)
         })
     }
   },

components/app/SideDrawer.vue

@@ -8,9 +8,10 @@
           <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">
+          <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" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg bg-opacity-60' : ''">
             <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </nuxt-link>
@@ -82,25 +83,9 @@ export default {
           icon: 'home',
           text: 'Home',
           to: '/bookshelf'
-        },
-        {
-          icon: 'person',
-          text: 'Account',
-          to: '/account'
-        },
-        {
-          icon: 'folder',
-          iconOutlined: true,
-          text: 'Local Media',
-          to: '/localMedia/folders'
         }
-        // {
-        //   icon: 'settings',
-        //   text: 'Settings',
-        //   to: '/config'
-        // }
       ]
-      if (!this.socketConnected) {
+      if (!this.serverConnectionConfig) {
         items = [
           {
             icon: 'cloud_off',
@@ -108,8 +93,24 @@ export default {
             to: '/connect'
           }
         ].concat(items)
+      } else {
+        items.push({
+          icon: 'person',
+          text: 'Account',
+          to: '/account'
+        })
       }
+
+      items.push({
+        icon: 'folder',
+        iconOutlined: true,
+        text: 'Local Media',
+        to: '/localMedia/folders'
+      })
       return items
+    },
+    currentRoutePath() {
+      return this.$route.path
     }
   },
   methods: {

components/modals/Dialog.vue

@@ -0,0 +1,55 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div v-if="title" class="absolute top-7 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">{{ title }}</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="item in items">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item.value)">
+              <div class="relative flex items-center px-3">
+                <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    title: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(action) {
+      this.$emit('action', action)
+    }
+  },
+  mounted() {}
+}
+</script>

components/ui/TextInputWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
-    <p class="px-1 pb-1 text-sm font-semibold">{{ label }}</p>
+    <p class="pb-0.5 text-sm font-semibold">{{ label }}</p>
-    <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" class="w-full px-4 py-2" />
+    <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" text-size="base" class="w-full" />
   </div>
 </template>
 

ios/App/Podfile

@@ -11,6 +11,7 @@ def capacitor_pods
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
   pod 'CapacitorDialog', :path => '..\..\node_modules\@capacitor\dialog'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
   pod 'CapacitorNetwork', :path => '..\..\node_modules\@capacitor\network'
   pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
   pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'

nuxt.config.js

@@ -42,7 +42,8 @@ export default {
     '@/plugins/axios.js',
     '@/plugins/capacitor/index.js',
     '@/plugins/toast.js',
-    '@/plugins/constants.js'
+    '@/plugins/constants.js',
+    '@/plugins/haptics.js'
   ],
 
   components: true,

package.json

@@ -15,6 +15,7 @@
     "@capacitor/cli": "^3.1.2",
     "@capacitor/core": "^3.2.2",
     "@capacitor/dialog": "^1.0.3",
+    "@capacitor/haptics": "^1.1.4",
     "@capacitor/ios": "^3.2.2",
     "@capacitor/network": "^1.0.3",
     "@capacitor/status-bar": "^1.0.6",

pages/account.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="w-full h-full p-4">
-    <div class="w-full max-w-xs mx-auto">
+    <ui-text-input-with-label :value="serverConnConfigName" label="Connection Config Name" disabled class="my-2" />
-      <ui-text-input-with-label :value="serverUrl" label="Server Url" disabled class="my-4" />
 
-      <ui-text-input-with-label :value="username" label="Username" disabled class="my-4" />
+    <ui-text-input-with-label :value="username" label="Username" disabled class="my-2" />
 
-      <ui-btn color="primary flex items-center justify-between text-base w-full mt-8" @click="logout">Logout<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
+    <ui-btn color="primary flex items-center justify-between text-base w-full mt-8" @click="logout">Logout<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
-    </div>
 
     <div class="flex items-center pt-8">
       <div class="flex-grow" />
@@ -26,9 +24,6 @@
 
     <ui-btn v-if="!isUpdateAvailable || immediateUpdateAllowed" class="w-full my-4" color="primary" @click="openAppStore">Open app store</ui-btn>
 
-    <!-- Used for testing API -->
-    <ui-btn @click="testCall">Test Call</ui-btn>
-
     <p class="text-xs text-gray-400">UA: {{ updateAvailability }} | Avail: {{ availableVersion }} | Curr: {{ currentVersion }} | ImmedAllowed: {{ immediateUpdateAllowed }}</p>
   </div>
 </template>
@@ -55,8 +50,14 @@ export default {
     user() {
       return this.$store.state.user.user
     },
-    serverUrl() {
+    serverConnectionConfig() {
-      return this.$server.url
+      return this.$store.state.user.serverConnectionConfig || {}
+    },
+    serverConnConfigName() {
+      return this.serverConnectionConfig.name
+    },
+    serverAddress() {
+      return this.serverConnectionConfig.address
     },
     appUpdateInfo() {
       return this.$store.state.appUpdateInfo
@@ -78,14 +79,6 @@ export default {
     }
   },
   methods: {
-    testCall() {
-      // Used for testing API
-      console.log('Making Test call')
-      var libraryId = this.$store.state.libraries.currentLibraryId
-      AbsAudioPlayer.getLibraryItems({ libraryId }).then((res) => {
-        console.log('TEST CALL response', JSON.stringify(res))
-      })
-    },
     async logout() {
       await this.$axios.$post('/logout').catch((error) => {
         console.error(error)

pages/item/_id.vue

@@ -73,9 +73,10 @@ export default {
   async asyncData({ store, params, redirect, app }) {
     var libraryItemId = params.id
     var libraryItem = null
-
+    console.log(libraryItemId)
     if (libraryItemId.startsWith('local')) {
       libraryItem = await app.$db.getLocalLibraryItem(libraryItemId)
+      console.log('Got lli', libraryItem)
     } else if (store.state.user.serverConnectionConfig) {
       libraryItem = await app.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
         console.error('Failed', error)
@@ -331,153 +332,14 @@ export default {
         this.$set(this.libraryItem, 'localLibraryItem', item)
       }
     }
-    // async prepareDownload() {
-    //   var audiobook = this.libraryItem
-    //   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.libraryItemId,
-    //     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.libraryItem.path.replace('\\', '/'), '')
-
-    //     var url = `${this.$store.state.serverUrl}/s/book/${this.libraryItemId}${relTrackPath}?token=${this.userToken}`
-    //     this.startDownload(url, fileext, downloadObject)
-    //   } else {
-    //     // Multi-track merge
-    //     this.$store.commit('downloads/addUpdateDownload', downloadObject)
-
-    //     var prepareDownloadPayload = {
-    //       audiobookId: this.libraryItemId,
-    //       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['global/getLibraryItemCoverSrc'](this.libraryItem)
-    //   return coverSrc
-    // },
-    // 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.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
-    // if (!this.$server.socket) {
-    //   console.warn('Library Item 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('item_updated', this.itemUpdated)
-    // }
   },
   beforeDestroy() {
     this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
-    // if (!this.$server.socket) {
-    //   console.warn('Library Item 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('item_updated', this.itemUpdated)
-    // }
   }
 }
 </script>

pages/localMedia/folders/_id.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="w-full h-full py-6 px-2">
+  <div class="w-full h-full py-6 px-4">
-    <div class="flex items-center mb-4">
+    <div class="flex items-center mb-2">
+      <p class="text-base font-semibold">Folder: {{ folderName }}</p>
       <div class="flex-grow" />
-      <ui-btn v-if="!removingFolder" :loading="isScanning" small @click="clickScan">Scan</ui-btn>
+
-      <ui-btn v-if="!removingFolder && localLibraryItems.length" :loading="isScanning" small class="ml-2" color="warning" @click="clickForceRescan">Force Re-Scan</ui-btn>
+      <span class="material-icons" @click="showDialog = true">more_vert</span>
-      <ui-icon-btn class="ml-2" bg-color="error" outlined :loading="removingFolder" icon="delete" @click="clickDeleteFolder" />
     </div>
-    <p class="text-lg mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
+
-    <p class="mb-4 text-xl">Local Library Items ({{ localLibraryItems.length }})</p>
+    <p class="text-sm mb-4 text-white text-opacity-60">Media Type: {{ mediaType }}</p>
+
+    <p class="mb-2 text-base text-white">Local Library Items ({{ localLibraryItems.length }})</p>
+
     <div v-if="isScanning" class="w-full text-center p-4">
       <p>Scanning...</p>
     </div>
@@ -18,19 +21,18 @@
             <img v-if="mediaItem.coverPathSrc" :src="mediaItem.coverPathSrc" class="w-full h-full object-contain" />
           </div>
           <div class="flex-grow px-2">
-            <p>{{ mediaItem.media.metadata.title }}</p>
+            <p class="text-sm">{{ mediaItem.media.metadata.title }}</p>
-            <p v-if="mediaItem.type == 'book'">{{ mediaItem.media.tracks.length }} Tracks</p>
+            <p v-if="mediaItem.mediaType == 'book'" class="text-xs text-gray-300">{{ mediaItem.media.tracks.length }} Track{{ mediaItem.media.tracks.length == 1 ? '' : 's' }}</p>
-            <p v-else-if="mediaItem.type == 'podcast'">{{ mediaItem.media.episodes.length }} Tracks</p>
+            <p v-else-if="mediaItem.mediaType == 'podcast'" class="text-xs text-gray-300">{{ mediaItem.media.episodes.length }} Episode{{ mediaItem.media.tracks.length == 1 ? '' : 's' }}</p>
           </div>
           <div class="w-12 h-12 flex items-center justify-center">
             <span class="material-icons text-xl text-gray-300">arrow_right</span>
-            <!-- <button class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="play(mediaItem)">
-              <span class="material-icons" style="font-size: 2rem">play_arrow</span>
-            </button> -->
           </div>
         </nuxt-link>
       </template>
     </div>
+
+    <modals-dialog v-model="showDialog" :items="dialogItems" @action="dialogAction" />
   </div>
 </template>
 
@@ -51,22 +53,47 @@ export default {
       localLibraryItems: [],
       folder: null,
       isScanning: false,
-      removingFolder: false
+      removingFolder: false,
+      showDialog: false
     }
   },
   computed: {
     folderName() {
       return this.folder ? this.folder.name : null
+    },
+    mediaType() {
+      return this.folder ? this.folder.mediaType : null
+    },
+    dialogItems() {
+      return [
+        {
+          text: 'Scan',
+          value: 'scan'
+        },
+        {
+          text: 'Force Re-Scan',
+          value: 'rescan'
+        },
+        {
+          text: 'Remove',
+          value: 'remove'
+        }
+      ].filter((i) => !i.value == 'rescan' || this.localLibraryItems.length) // Filter out rescan if there are no local library items
     }
   },
   methods: {
-    clickScan() {
+    dialogAction(action) {
-      this.scanFolder()
+      console.log('Dialog action', action)
+      if (action == 'scan') {
+        this.scanFolder()
+      } else if (action == 'rescan') {
+        this.scanFolder(true)
+      } else if (action == 'remove') {
+        this.removeFolder()
+      }
+      this.showDialog = false
     },
-    clickForceRescan() {
+    async removeFolder() {
-      this.scanFolder(true)
-    },
-    async clickDeleteFolder() {
       var deleteMessage = 'Are you sure you want to remove this folder? (does not delete anything in your file system)'
       if (this.localLibraryItems.length) {
         deleteMessage = `Are you sure you want to remove this folder and ${this.localLibraryItems.length} items? (does not delete anything in your file system)`

pages/localMedia/folders/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="w-full h-full py-6">
-    <h1 class="text-2xl px-4 mb-2">Local Folders</h1>
+    <h1 class="text-base font-semibold px-3 mb-2">Local Folders</h1>
 
-    <div v-if="!isIos" class="w-full max-w-full px-2 py-2">
+    <div v-if="!isIos" class="w-full max-w-full px-3 py-2">
       <template v-for="folder in localFolders">
         <nuxt-link :to="`/localMedia/folders/${folder.id}`" :key="folder.id" class="flex items-center px-2 py-4 bg-primary rounded-md border-bg mb-1">
           <span class="material-icons text-xl text-yellow-400">folder</span>
@@ -15,7 +15,7 @@
       <div v-if="!localFolders.length" class="flex justify-center">
         <p class="text-center">No Media Folders</p>
       </div>
-      <div class="flex border-t border-primary my-4">
+      <div class="flex border-t border-white border-opacity-10 my-4 py-4">
         <div class="flex-grow pr-1">
           <ui-dropdown v-model="newFolderMediaType" placeholder="Select media type" :items="mediaTypeItems" />
         </div>

pages/localMedia/item/_id.vue

@@ -1,42 +1,45 @@
 <template>
-  <div class="w-full h-full py-6 px-2">
+  <div class="w-full h-full py-6 px-4">
     <div v-if="localLibraryItem" class="w-full h-full">
-      <div class="flex items-center mb-4">
+      <div class="flex items-center mb-2">
-        <button v-if="audioTracks.length" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="play">
+        <p class="text-base font-book font-semibold">{{ mediaMetadata.title }}</p>
+        <div class="flex-grow" />
+
+        <button v-if="audioTracks.length" class="shadow-sm text-accent flex items-center justify-center rounded-full mx-2" @click.stop="play">
           <span class="material-icons" style="font-size: 2rem">play_arrow</span>
         </button>
-        <div class="flex-grow" />
+        <span class="material-icons" @click="showItemDialog">more_vert</span>
-        <ui-btn v-if="!removingItem" :loading="isScanning" small @click="clickScan">Scan</ui-btn>
-        <ui-btn v-if="!removingItem" :loading="isScanning" small class="ml-2" color="warning" @click="clickForceRescan">Force Re-Scan</ui-btn>
-        <ui-icon-btn class="ml-2" bg-color="error" outlined :loading="removingItem" icon="delete" @click="clickDeleteItem" />
       </div>
-      <p class="text-lg mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
-      <p class="mb-4 text-xl">{{ mediaMetadata.title }}</p>
 
-       <p class="mb-4 text-xs text-gray-400">{{ libraryItemId || 'Not linked to server library item' }}</p>
+      <p class="text-sm mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
+
+      <p class="mb-4 text-xs text-gray-400">{{ libraryItemId ? 'Linked to item on server ' + liServerAddress : 'Not linked to server item' }}</p>
 
       <div v-if="isScanning" class="w-full text-center p-4">
         <p>Scanning...</p>
       </div>
       <div v-else class="w-full media-item-container overflow-y-auto">
-        <p class="text-lg mb-2">Audio Tracks</p>
+        <p class="text-base mb-2">Audio Tracks ({{ audioTracks.length }})</p>
         <template v-for="track in audioTracks">
           <div :key="track.localFileId" class="flex items-center my-1">
-            <div class="w-12 h-12 flex items-center justify-center">
+            <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
               <p class="font-mono font-bold text-xl">{{ track.index }}</p>
             </div>
             <div class="flex-grow px-2">
               <p class="text-sm">{{ track.title }}</p>
             </div>
-            <div class="w-20 text-center text-gray-300">
+            <div class="w-20 text-center text-gray-300" style="min-width: 80px">
               <p class="text-xs">{{ track.mimeType }}</p>
               <p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
             </div>
+            <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
+              <span class="material-icons" @click="showTrackDialog(track)">more_vert</span>
+            </div>
           </div>
         </template>
 
-        <p class="text-lg mb-2 pt-8">Local Files</p>
+        <p v-if="otherFiles.length" class="text-lg mb-2 pt-8">Other Files</p>
-        <template v-for="file in localFiles">
+        <template v-for="file in otherFiles">
           <div :key="file.id" class="flex items-center my-1">
             <div class="w-12 h-12 flex items-center justify-center">
               <img v-if="(file.mimeType || '').startsWith('image')" :src="getCapImageSrc(file.contentUrl)" class="w-full h-full object-contain" />
@@ -51,13 +54,13 @@
             </div>
           </div>
         </template>
-
-        <p class="py-4">{{ audioTracks.length }} Audio Tracks</p>
       </div>
     </div>
     <div v-else class="w-full h-full">
       <p class="text-lg text-center px-8">{{ failed ? 'Failed to get local library item ' + localLibraryItemId : 'Loading..' }}</p>
     </div>
+
+    <modals-dialog v-model="showDialog" :items="dialogItems" @action="dialogAction" />
   </div>
 </template>
 
@@ -79,22 +82,39 @@ export default {
       removingItem: false,
       folderId: null,
       folder: null,
-      isScanning: false
+      isScanning: false,
+      showDialog: false,
+      selectedAudioTrack: null
     }
   },
   computed: {
+    basePath() {
+      return this.localLibraryItem ? this.localLibraryItem.basePath : null
+    },
     localFiles() {
       return this.localLibraryItem ? this.localLibraryItem.localFiles : []
     },
+    otherFiles() {
+      if (!this.localFiles.filter) {
+        console.error('Invalid local files', this.localFiles)
+        return []
+      }
+      return this.localFiles.filter((lf) => {
+        return !this.audioTracks.find((at) => at.localFileId == lf.id)
+      })
+    },
     folderName() {
       return this.folder ? this.folder.name : null
     },
     mediaType() {
       return this.localLibraryItem ? this.localLibraryItem.mediaType : null
     },
-        libraryItemId() {
+    libraryItemId() {
       return this.localLibraryItem ? this.localLibraryItem.libraryItemId : null
     },
+    liServerAddress() {
+      return this.localLibraryItem ? this.localLibraryItem.serverAddress : null
+    },
     media() {
       return this.localLibraryItem ? this.localLibraryItem.media : null
     },
@@ -108,22 +128,106 @@ export default {
       } else {
         return this.media.episodes || []
       }
+    },
+    dialogItems() {
+      if (this.selectedAudioTrack) {
+        return [
+          {
+            text: 'Hard Delete',
+            value: 'track-delete'
+          }
+        ]
+      } else {
+        return [
+          {
+            text: 'Scan',
+            value: 'scan'
+          },
+          {
+            text: 'Force Re-Scan',
+            value: 'rescan'
+          },
+          {
+            text: 'Remove',
+            value: 'remove'
+          },
+          {
+            text: 'Hard Delete',
+            value: 'delete'
+          }
+        ]
+      }
     }
   },
   methods: {
+    showItemDialog() {
+      this.selectedAudioTrack = null
+      this.showDialog = true
+    },
+    showTrackDialog(track) {
+      this.selectedAudioTrack = track
+      this.showDialog = true
+    },
     play() {
       this.$eventBus.$emit('play-item', this.localLibraryItemId)
     },
     getCapImageSrc(contentUrl) {
       return Capacitor.convertFileSrc(contentUrl)
     },
-    clickScan() {
+    dialogAction(action) {
-      this.scanItem()
+      console.log('Dialog action', action)
+      if (action == 'scan') {
+        this.scanItem()
+      } else if (action == 'rescan') {
+        this.scanItem(true)
+      } else if (action == 'remove') {
+        this.removeItem()
+      } else if (action == 'delete') {
+        this.deleteItem()
+      } else if (action == 'track-delete') {
+        this.deleteTrack()
+      }
+      this.showDialog = false
     },
-    clickForceRescan() {
+    getLocalFileForTrack(localFileId) {
-      this.scanItem(true)
+      return this.localFiles.find((lf) => lf.id == localFileId)
     },
-    async clickDeleteItem() {
+    async deleteTrack() {
+      if (!this.selectedAudioTrack) {
+        return
+      }
+      var localFile = this.getLocalFileForTrack(this.selectedAudioTrack.localFileId)
+      if (!localFile) {
+        this.$toast.error('Audio track does not have matching local file..')
+        return
+      }
+      var trackPath = localFile ? localFile.basePath : this.selectedAudioTrack.title
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: `Warning! This will delete the audio file "${trackPath}" from your file system. Are you sure?`
+      })
+      if (value) {
+        var res = await AbsFileSystem.deleteTrackFromItem({ id: this.localLibraryItem.id, trackLocalFileId: this.selectedAudioTrack.localFileId, trackContentUrl: this.selectedAudioTrack.contentUrl })
+        if (res && res.id) {
+          this.$toast.success('Deleted track successfully')
+          this.localLibraryItem = res
+        } else this.$toast.error('Failed to delete')
+      }
+    },
+    async deleteItem() {
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: `Warning! This will delete the folder "${this.basePath}" and all contents. Are you sure?`
+      })
+      if (value) {
+        var res = await AbsFileSystem.deleteItem(this.localLibraryItem)
+        if (res && res.success) {
+          this.$toast.success('Deleted Successfully')
+          this.$router.replace(`/localMedia/folders/${this.folderId}`)
+        } else this.$toast.error('Failed to delete')
+      }
+    },
+    async removeItem() {
       var deleteMessage = 'Are you sure you want to remove this local library item? (does not delete anything in your file system)'
       const { value } = await Dialog.confirm({
         title: 'Confirm',
@@ -136,10 +240,9 @@ export default {
         this.$router.replace(`/localMedia/folders/${this.folderId}`)
       }
     },
-    play(mediaItem) {
-      this.$eventBus.$emit('play-item', mediaItem.id)
-    },
     async scanItem(forceAudioProbe = false) {
+      if (this.isScanning) return
+
       this.isScanning = true
       var response = await AbsFileSystem.scanLocalLibraryItem({ localLibraryItemId: this.localLibraryItemId, forceAudioProbe })
 
@@ -158,13 +261,13 @@ export default {
     },
     async init() {
       this.localLibraryItem = await this.$db.getLocalLibraryItem(this.localLibraryItemId)
+
       if (!this.localLibraryItem) {
         console.error('Failed to get local library item', this.localLibraryItemId)
         this.failed = true
         return
       }
 
-      console.log('Got local library item', JSON.stringify(this.localLibraryItem))
       this.folderId = this.localLibraryItem.folderId
       this.folder = await this.$db.getLocalFolder(this.folderId)
     }

plugins/capacitor/AbsDatabase.js

@@ -56,6 +56,88 @@ class AbsDatabaseWeb extends WebPlugin {
     deviceData.lastServerConnectionConfigId = null
     localStorage.setItem('device', JSON.stringify(deviceData))
   }
+
+  //
+  // For testing on web
+  //
+  async getLocalFolders() {
+    return {
+      folders: [
+        {
+          id: 'test1',
+          name: 'Audiobooks',
+          contentUrl: 'test',
+          absolutePath: '/audiobooks',
+          simplePath: 'audiobooks',
+          storageType: 'primary',
+          mediaType: 'book'
+        }
+      ]
+    }
+  }
+  async getLocalFolder({ folderId }) {
+    return this.getLocalFolders().then((data) => data.folders[0])
+  }
+  async getLocalLibraryItems(payload) {
+    return {
+      localLibraryItems: [{
+        id: 'local_test',
+        libraryItemId: 'test34',
+        folderId: 'test1',
+        absolutePath: 'a',
+        contentUrl: 'c',
+        isInvalid: false,
+        mediaType: 'book',
+        media: {
+          metadata: {
+            title: 'Test Book',
+            authorName: 'Test Author Name'
+          },
+          coverPath: null,
+          tags: [],
+          audioFiles: [],
+          chapters: [],
+          tracks: [
+            {
+              index: 1,
+              startOffset: 0,
+              duration: 10000,
+              title: 'Track Title 1',
+              contentUrl: 'test',
+              mimeType: 'audio/mpeg',
+              metadata: null,
+              isLocal: true,
+              localFileId: 'lf1',
+              audioProbeResult: {}
+            }
+          ]
+        },
+        localFiles: [
+          {
+            id: 'lf1',
+            filename: 'lf1.mp3',
+            contentUrl: 'test',
+            absolutePath: 'test',
+            simplePath: 'test',
+            mimeType: 'audio/mpeg',
+            size: 39048290
+          }
+        ],
+        coverContentUrl: null,
+        coverAbsolutePath: null,
+        isLocal: true
+      }]
+    }
+  }
+  async getLocalLibraryItemsInFolder({ folderId }) {
+    return this.getLocalLibraryItems()
+  }
+  async getLocalLibraryItem({ id }) {
+    return this.getLocalLibraryItems().then((data) => data.localLibraryItems[0])
+  }
+  async getLocalLibraryItemByLLId({ libraryItemId }) {
+    return this.getLocalLibraryItems().then((data) => data.localLibraryItems.find(lli => lli.libraryItemId == libraryItemId))
+  }
 }
 
 const AbsDatabase = registerPlugin('AbsDatabase', {

plugins/db.js

@@ -52,7 +52,6 @@ class DbService {
   }
 
   getLocalFolders() {
-    if (isWeb) return []
     return AbsDatabase.getLocalFolders().then((data) => {
       console.log('Loaded local folders', JSON.stringify(data))
       if (data.folders && typeof data.folders == 'string') {
@@ -66,7 +65,6 @@ class DbService {
   }
 
   getLocalFolder(folderId) {
-    if (isWeb) return null
     return AbsDatabase.getLocalFolder({ folderId }).then((data) => {
       console.log('Got local folder', JSON.stringify(data))
       return data
@@ -74,7 +72,6 @@ class DbService {
   }
 
   getLocalLibraryItemsInFolder(folderId) {
-    if (isWeb) return []
     return AbsDatabase.getLocalLibraryItemsInFolder({ folderId }).then((data) => {
       console.log('Loaded local library items in folder', JSON.stringify(data))
       if (data.localLibraryItems && typeof data.localLibraryItems == 'string') {
@@ -85,8 +82,7 @@ class DbService {
   }
 
   getLocalLibraryItems(mediaType = null) {
-    if (isWeb) return []
+    return AbsDatabase.getLocalLibraryItems({ mediaType }).then((data) => {
-    return AbsDatabase.getLocalLibraryItems(mediaType).then((data) => {
       console.log('Loaded all local media items', JSON.stringify(data))
       if (data.localLibraryItems && typeof data.localLibraryItems == 'string') {
         return JSON.parse(data.localLibraryItems)
@@ -96,12 +92,10 @@ class DbService {
   }
 
   getLocalLibraryItem(id) {
-    if (isWeb) return null
     return AbsDatabase.getLocalLibraryItem({ id })
   }
 
   getLocalLibraryItemByLLId(libraryItemId) {
-    if (isWeb) return null
     return AbsDatabase.getLocalLibraryItemByLLId({ libraryItemId })
   }
 }

plugins/haptics.js

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics'
+
+const hapticsImpactHeavy = async () => {
+  await Haptics.impact({ style: ImpactStyle.Heavy });
+}
+Vue.prototype.$hapticsImpactHeavy = hapticsImpactHeavy
+
+const hapticsImpactMedium = async () => {
+  await Haptics.impact({ style: ImpactStyle.Medium });
+}
+Vue.prototype.$hapticsImpactMedium = hapticsImpactMedium
+
+const hapticsImpactLight = async () => {
+  await Haptics.impact({ style: ImpactStyle.Light });
+};
+Vue.prototype.$hapticsImpactLight = hapticsImpactLight
+
+const hapticsVibrate = async () => {
+  await Haptics.vibrate();
+};
+Vue.prototype.$hapticsVibrate = hapticsVibrate
+
+const hapticsNotificationSuccess = async () => {
+  await Haptics.notification({ type: NotificationType.Success });
+};
+Vue.prototype.$hapticsNotificationSuccess = hapticsNotificationSuccess
+
+const hapticsNotificationWarning = async () => {
+  await Haptics.notification({ type: NotificationType.Warning });
+};
+Vue.prototype.$hapticsNotificationWarning = hapticsNotificationWarning
+
+const hapticsNotificationError = async () => {
+  await Haptics.notification({ type: NotificationType.Error });
+};
+Vue.prototype.$hapticsNotificationError = hapticsNotificationError
+
+const hapticsSelectionStart = async () => {
+  await Haptics.selectionStart();
+};
+Vue.prototype.$hapticsSelectionStart = hapticsSelectionStart
+
+const hapticsSelectionChanged = async () => {
+  await Haptics.selectionChanged();
+};
+Vue.prototype.$hapticsSelectionChanged = hapticsSelectionChanged
+
+const hapticsSelectionEnd = async () => {
+  await Haptics.selectionEnd();
+};
+Vue.prototype.$hapticsSelectionEnd = hapticsSelectionEnd

store/user.js

@@ -23,7 +23,7 @@ export const getters = {
     return state.serverConnectionConfig ? state.serverConnectionConfig.address : null
   },
   getUserLibraryItemProgress: (state) => (libraryItemId) => {
-    if (!state.user.libraryItemProgress) return null
+    if (!state.user || !state.user.libraryItemProgress) return null
     return state.user.libraryItemProgress.find(li => li.id == libraryItemId)
   },
   getUserBookmarksForItem: (state) => (libraryItemId) => {