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

pages/localMedia/folders/_id.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="w-full h-full py-6 px-2">
-    <div class="flex items-center mb-4">
+  <div class="w-full h-full py-6 px-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>
-      <ui-icon-btn class="ml-2" bg-color="error" outlined :loading="removingFolder" icon="delete" @click="clickDeleteFolder" />
+
+      <span class="material-icons" @click="showDialog = true">more_vert</span>
     </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 v-if="mediaItem.type == 'book'">{{ mediaItem.media.tracks.length }} Tracks</p>
-            <p v-else-if="mediaItem.type == 'podcast'">{{ mediaItem.media.episodes.length }} Tracks</p>
+            <p class="text-sm">{{ mediaItem.media.metadata.title }}</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.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() {
-      this.scanFolder()
+    dialogAction(action) {
+      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() {
-      this.scanFolder(true)
-    },
-    async clickDeleteFolder() {
+    async removeFolder() {
       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">
-        <button v-if="audioTracks.length" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="play">
+      <div class="flex items-center mb-2">
+        <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" />
-        <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" />
+        <span class="material-icons" @click="showItemDialog">more_vert</span>
       </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>
-        <template v-for="file in localFiles">
+        <p v-if="otherFiles.length" class="text-lg mb-2 pt-8">Other Files</p>
+        <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() {
-      this.scanItem()
+    dialogAction(action) {
+      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() {
-      this.scanItem(true)
+    getLocalFileForTrack(localFileId) {
+      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)
     }