Support for android 8+, selectable download location, permissions check, recursive delete

components/modals/DownloadsModal.vue

@@ -3,7 +3,17 @@
     <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="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div class="absolute top-16 left-0 right-0 w-full flex items-center px-2 py-1" :class="hasStoragePermission ? '' : 'text-error'">
+        <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>
+
+      <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 class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20 mt-10" style="max-height: 75%" @click.stop>
         <div v-if="!totalDownloads" class="flex items-center justify-center h-40">
           <p>No Downloads</p>
         </div>
@@ -28,9 +38,10 @@
               <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-1/2">
+                <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" class="shadow-sm text-warning flex items-center justify-center rounded-full mr-4">
@@ -71,11 +82,22 @@
 
 <script>
 import { Dialog } from '@capacitor/dialog'
+import AudioDownloader from '@/plugins/audio-downloader'
 
 export default {
   data() {
     return {
-      downloadingProgress: {}
+      downloadFolder: null,
+      downloadingProgress: {},
+      totalSize: 0
+    }
+  },
+  watch: {
+    async show(newValue) {
+      if (newValue) {
+        this.downloadFolder = await this.$localStore.getDownloadFolder()
+        this.setTotalSize()
+      }
     }
   },
   computed: {
@@ -87,6 +109,12 @@ export default {
         this.$store.commit('downloads/setShowModal', val)
       }
     },
+    hasStoragePermission() {
+      return this.$store.state.hasStoragePermission
+    },
+    downloadFolderSimplePath() {
+      return this.downloadFolder ? this.downloadFolder.simplePath : null
+    },
     totalDownloads() {
       return this.downloadsReady.length + this.orphanDownloads.length + this.downloadsDownloading.length
     },
@@ -132,6 +160,25 @@ export default {
     }
   },
   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')
+        AudioDownloader.requestStoragePermission()
+      } else {
+        var folderObj = await AudioDownloader.selectFolder()
+        if (folderObj.error) {
+          return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
+        }
+        await this.$localStore.setDownloadFolder(folderObj)
+      }
+    },
     updateDownloadProgress({ audiobookId, progress }) {
       this.$set(this.downloadingProgress, audiobookId, progress)
     },