Add start of new local media page for adding folders and scanning local media items

pages/downloads.vue

@@ -2,6 +2,22 @@
   <div class="w-full h-full py-6">
     <h1 class="text-2xl px-4">Downloads</h1>
 
+    <div v-if="!isIos" class="w-full px-2 py-2">
+      <template v-for="folder in localFolders">
+        <div :key="folder.id" class="flex items-center p-2">
+          <div class="flex-grow">
+            <p>{{ folder.id }}|{{ folder.name }}|{{ folder.contentUrl }}</p>
+          </div>
+          <div class="w-40">
+            <ui-btn @click="searchFolder(folder.id)">Scan</ui-btn>
+          </div>
+        </div>
+      </template>
+      <div v-if="!localFolders.length" class="flex justify-center">
+        <p class="text-center">No Media Folders</p>
+      </div>
+    </div>
+
     <div v-if="!isIos" class="w-full px-2 py-2" :class="hasStoragePermission ? '' : 'text-error'">
       <div class="flex items-center">
         <span class="material-icons" @click="changeDownloadFolderClick">{{ hasStoragePermission ? 'folder' : 'error' }}</span>
@@ -25,7 +41,7 @@
         </div>
       </div>
     </div>
-    <div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden bg-primary">
+    <div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden overflow-y-auto bg-primary">
       <template v-if="showingDownloads">
         <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
           <p>No Downloads</p>
@@ -52,8 +68,8 @@
       <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 @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>
 
@@ -107,7 +123,8 @@ export default {
       totalSize: 0,
       showingDownloads: true,
       isScanning: false,
-      localMediaItems: []
+      localMediaItems: [],
+      localFolders: []
     }
   },
   computed: {
@@ -150,11 +167,19 @@ export default {
       if (!this.hasStoragePermission) {
         StorageManager.requestStoragePermission()
       } else {
-        var folderObj = await StorageManager.selectFolder()
+        var folderObj = await StorageManager.selectFolder({ mediaType: 'book' })
         if (folderObj.error) {
           return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
         }
-        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.uri })
+
+        var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
+        if (indexOfExisting >= 0) {
+          this.localFolders.splice(indexOfExisting, 1, folderObj)
+        } else {
+          this.localFolders.push(folderObj)
+        }
+
+        var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
 
         if (!permissionsGood) {
           this.$toast.error('Folder permissions failed')
@@ -163,18 +188,17 @@ export default {
           this.$toast.success('Folder permission success')
         }
 
-        await this.$localStore.setDownloadFolder(folderObj)
-
-        await this.searchFolder()
+        // await this.$localStore.setDownloadFolder(folderObj)
+        await this.searchFolder(folderObj.id)
 
         if (this.isSocketConnected) {
           this.$store.dispatch('downloads/linkOrphanDownloads')
         }
       }
     },
-    async searchFolder() {
+    async searchFolder(folderId) {
       this.isScanning = true
-      var response = await StorageManager.searchFolder({ folderUrl: this.downloadFolderUri })
+      var response = await StorageManager.searchFolder({ folderId })
 
       if (response && response.localMediaItems) {
         this.localMediaItems = response.localMediaItems.map((mi) => {
@@ -252,10 +276,14 @@ export default {
         this.$set(this.downloadingProgress, audiobookId, progress)
       }
     },
-    init() {
+    async init() {
+      this.localFolders = (await this.$db.loadFolders()) || []
       AudioDownloader.addListener('onDownloadProgress', this.onDownloadProgress)
     }
   },
+  mounted() {
+    this.init()
+  },
   beforeDestroy() {
     AudioDownloader.removeListener('onDownloadProgress', this.onDownloadProgress)
   }