New downloader for downloading multiple tracks, android media player support for using multiple tracks

components/app/AudioPlayer.vue

@@ -291,8 +291,8 @@ export default {
         return this.restart()
       }
 
-      // If 1 second or less into current chapter, then go to previous
-      if (this.currentTime - this.currentChapter.start <= 1) {
+      // If 4 seconds or less into current chapter, then go to previous
+      if (this.currentTime - this.currentChapter.start <= 4) {
         var currChapterIndex = this.chapters.findIndex((ch) => Number(ch.start) <= this.currentTime && Number(ch.end) >= this.currentTime)
         if (currChapterIndex > 0) {
           var prevChapter = this.chapters[currChapterIndex - 1]
@@ -509,8 +509,8 @@ export default {
       console.log('onMetadata', JSON.stringify(data))
       this.isLoading = false
 
-      this.totalDuration = Number((data.duration / 1000).toFixed(2))
-      this.$emit('setTotalDuration', this.totalDuration)
+      // this.totalDuration = Number((data.duration / 1000).toFixed(2))
+      this.totalDuration = Number(data.duration.toFixed(2))
       this.currentTime = Number((data.currentTime / 1000).toFixed(2))
       this.stateName = data.stateName
 

components/app/AudioPlayerContainer.vue

@@ -1,19 +1,7 @@
 <template>
   <div>
     <div id="streamContainer">
-      <app-audio-player
-        ref="audioPlayer"
-        :playing.sync="isPlaying"
-        :bookmarks="bookmarks"
-        :sleep-timer-running="isSleepTimerRunning"
-        :sleep-time-remaining="sleepTimeRemaining"
-        @setTotalDuration="setTotalDuration"
-        @selectPlaybackSpeed="showPlaybackSpeedModal = true"
-        @updateTime="(t) => (currentTime = t)"
-        @showSleepTimer="showSleepTimer"
-        @showBookmarks="showBookmarks"
-        @hook:mounted="audioPlayerMounted"
-      />
+      <app-audio-player ref="audioPlayer" :playing.sync="isPlaying" :bookmarks="bookmarks" :sleep-timer-running="isSleepTimerRunning" :sleep-time-remaining="sleepTimeRemaining" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @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" />
@@ -43,8 +31,7 @@ export default {
       onSleepTimerEndedListener: null,
       onSleepTimerSetListener: null,
       sleepInterval: null,
-      currentEndOfChapterTime: 0,
-      totalDuration: 0
+      currentEndOfChapterTime: 0
     }
   },
   watch: {
@@ -121,9 +108,6 @@ export default {
       console.log('Canceling sleep timer')
       await MyNativeAudio.cancelSleepTimer()
     },
-    setTotalDuration(duration) {
-      this.totalDuration = duration
-    },
     streamClosed() {
       console.log('Stream Closed')
     },

components/modals/SelectLocalFolderModal.vue

@@ -0,0 +1,62 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div class="absolute top-7 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">Select Local Folder</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="folder in localFolders">
+            <li :key="folder.id" :id="`folder-${folder.id}`" class="text-gray-50 select-none relative py-4" role="option" @click="clickedOption(folder)">
+              <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">{{ folder.name }}</p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    mediaType: String
+  },
+  data() {
+    return {
+      localFolders: []
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.$nextTick(this.init)
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(folder) {
+      this.$emit('select', folder)
+    },
+    async init() {
+      var localFolders = (await this.$db.loadFolders()) || []
+      this.localFolders = localFolders.filter((lf) => lf.mediaType == this.mediaType)
+    }
+  },
+  mounted() {}
+}
+</script>