Offline support, downloading, syncing progress

2026-08-08 12:58:38 +02:00 · 2021-09-12 18:37:08 -05:00
parent e33a054288
commit 7fe37ff983
37 changed files with 2836 additions and 201 deletions
@@ -13,14 +13,18 @@
      <div class="flex-grow" />
      <!-- <ui-menu :label="username" :items="menuItems" @action="menuAction" class="ml-5" /> -->

-      <nuxt-link to="/account" class="relative w-28 bg-fg border border-gray-500 rounded shadow-sm ml-5 pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
+      <span class="material-icons cursor-pointer mx-4" @click="$store.commit('downloads/setShowModal', true)">source</span>
+
+      <widgets-connection-icon />
+
+      <!-- <nuxt-link to="/account" class="relative w-28 bg-fg border border-gray-500 rounded shadow-sm ml-5 pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
        <span class="flex items-center">
          <span class="block truncate">{{ username }}</span>
        </span>
        <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
          <span class="material-icons text-gray-100">person</span>
        </span>
-      </nuxt-link>
+      </nuxt-link> -->
    </div>
  </div>
 </template>
@@ -89,4 +93,47 @@ export default {
 #appbar {
  box-shadow: 0px 5px 5px #11111155;
 }
+.loader-dots div {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.loader-dots div:nth-child(1) {
+  left: 0px;
+  animation: loader-dots1 0.6s infinite;
+}
+.loader-dots div:nth-child(2) {
+  left: 0px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(3) {
+  left: 10px;
+  animation: loader-dots2 0.6s infinite;
+}
+.loader-dots div:nth-child(4) {
+  left: 20px;
+  animation: loader-dots3 0.6s infinite;
+}
+@keyframes loader-dots1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes loader-dots3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes loader-dots2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(10px, 0);
+  }
+}
 </style>
@@ -4,7 +4,7 @@
      <div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 flex justify-around relative">
        <template v-for="audiobook in shelf">
          <!-- <div :key="audiobook.id" class="relative px-4"> -->
-          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" :user-progress="userAudiobooks[audiobook.id]" />
+          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" :user-progress="userAudiobooks[audiobook.id]" :local-user-progress="localUserAudiobooks[audiobook.id]" />
          <!-- <nuxt-link :to="`/audiobook/${audiobook.id}`">
              <cards-book-cover :audiobook="audiobook" :width="cardWidth" class="mx-auto -mb-px" style="box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166" />
            </nuxt-link> -->
@@ -44,6 +44,9 @@ export default {
    },
    userAudiobooks() {
      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    },
+    localUserAudiobooks() {
+      return this.$store.state.user.localUserAudiobooks || {}
    }
  },
  methods: {
@@ -52,11 +55,6 @@ export default {
        filterBy: 'all'
      })
    },
-    playAudiobook(audiobook) {
-      console.log('Play Audiobook', audiobook)
-      this.$store.commit('setStreamAudiobook', audiobook)
-      this.$server.socket.emit('open_stream', audiobook.id)
-    },
    calcShelves() {
      var booksPerShelf = Math.floor(this.pageWidth / (this.cardWidth + 32))
      var groupedBooks = []
@@ -87,6 +85,16 @@ export default {
      if (this.currFilterOrderKey !== this.filterOrderKey) {
        this.calcShelves()
      }
+    },
+    socketConnected(isConnected) {
+      if (isConnected) {
+        console.log('Connected - Load from server')
+        this.$store.dispatch('audiobooks/load')
+      } else {
+        console.log('Disconnected - Reset to local storage')
+        this.$store.commit('audiobooks/reset')
+        this.$store.dispatch('downloads/loadFromStorage')
+      }
    }
  },
  mounted() {
@@ -94,7 +102,13 @@ export default {
    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })

    window.addEventListener('resize', this.resize)
-    this.$store.dispatch('audiobooks/load')
+
+    this.$server.on('connected', this.socketConnected)
+    if (this.$server.connected) {
+      this.$store.dispatch('audiobooks/load')
+    } else {
+      console.log('Bookshelf - Server not connected using downloaded')
+    }
    this.init()
  },
  beforeDestroy() {
@@ -1,21 +1,21 @@
 <template>
  <div class="w-full p-4 pointer-events-none fixed bottom-0 left-0 right-0 z-20">
-    <div v-if="streamAudiobook" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
+    <div v-if="audiobook" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
      <div class="pl-16 pr-2 flex items-center pb-2">
        <div>
          <p class="px-2">{{ title }}</p>
          <p class="px-2 text-xs text-gray-400">by {{ author }}</p>
        </div>
        <div class="flex-grow" />
-        <div class="cursor-pointer flex items-center justify-center mr-6 w-6 text-center" :class="chapters.length ? 'text-gray-300' : 'text-gray-400'" @mousedown.prevent @mouseup.prevent @click="clickChapterBtn">
+        <div v-if="chapters.length" class="cursor-pointer flex items-center justify-center mr-6 w-6 text-center" :class="chapters.length ? 'text-gray-300' : 'text-gray-400'" @mousedown.prevent @mouseup.prevent @click="clickChapterBtn">
          <span class="material-icons text-2xl">format_list_bulleted</span>
        </div>
        <span class="material-icons" @click="cancelStream">close</span>
      </div>
      <div class="absolute left-2 -top-10">
-        <cards-book-cover :audiobook="streamAudiobook" :width="64" />
+        <cards-book-cover :audiobook="audiobook" :width="64" />
      </div>
-      <audio-player-mini ref="audioPlayerMini" :loading="!stream || currStreamAudiobookId !== streamAudiobookId" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
+      <audio-player-mini ref="audioPlayerMini" :loading="isLoading" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
    </div>
    <modals-playback-speed-modal v-model="showPlaybackSpeedModal" :playback-speed.sync="playbackSpeed" @change="changePlaybackSpeed" />
    <modals-chapters-modal v-model="showChapterModal" :chapters="chapters" @select="selectChapter" />
@@ -30,24 +30,62 @@ export default {
    return {
      audioPlayerReady: false,
      stream: null,
-      lastServerUpdateSentSeconds: 0,
+      download: null,
+      lastProgressTimeUpdate: 0,
      showPlaybackSpeedModal: false,
      playbackSpeed: 1,
      showChapterModal: false
    }
  },
+  watch: {
+    // playingDownload: {
+    //   handler(newVal, oldVal) {
+    //     console.log('[StreamContainer] Download AUDIOBOOK Changed ' + newVal + '|' + oldVal)
+    //     if (newVal) {
+    //       if (this.audioPlayerReady) {
+    //         this.playDownload()
+    //       }
+    //     } else if (this.download) {
+    //       this.download = null
+    //     }
+    //   }
+    // },
+    // streamAudiobook(newVal, oldval) {
+    //   console.log('[StreamContainer] Stream AUDIOBOOK Changed ' + newVal + '|' + oldVal)
+    // }
+  },
+  watch: {
+    socketConnected(newVal) {
+      if (newVal) {
+        console.log('Socket Connected set listeners')
+        this.setListeners()
+      }
+    }
+  },
  computed: {
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
+    isLoading() {
+      if (this.playingDownload) return false
+      if (!this.streamAudiobook) return false
+      return !this.stream || this.streamAudiobook.id !== this.stream.audiobook.id
+    },
+    playingDownload() {
+      return this.$store.state.playingDownload
+    },
+    audiobook() {
+      if (this.playingDownload) return this.playingDownload.audiobook
+      return this.streamAudiobook
+    },
+    audiobookId() {
+      return this.audiobook ? this.audiobook.id : null
+    },
    streamAudiobook() {
      return this.$store.state.streamAudiobook
    },
-    streamAudiobookId() {
-      return this.streamAudiobook ? this.streamAudiobook.id : null
-    },
-    currStreamAudiobookId() {
-      return this.stream ? this.stream.audiobook.id : null
-    },
    book() {
-      return this.streamAudiobook ? this.streamAudiobook.book || {} : {}
+      return this.audiobook ? this.audiobook.book || {} : {}
    },
    title() {
      return this.book ? this.book.title : ''
@@ -62,7 +100,7 @@ export default {
      return this.book ? this.book.series : ''
    },
    chapters() {
-      return this.streamAudiobook ? this.streamAudiobook.chapters || [] : []
+      return this.audiobook ? this.audiobook.chapters || [] : []
    },
    volumeNumber() {
      return this.book ? this.book.volumeNumber : ''
@@ -73,7 +111,7 @@ export default {
      return `${this.series} #${this.volumeNumber}`
    },
    duration() {
-      return this.streamAudiobook ? this.streamAudiobook.duration || 0 : 0
+      return this.audiobook ? this.audiobook.duration || 0 : 0
    },
    coverForNative() {
      if (!this.cover) {
@@ -100,27 +138,61 @@ export default {
      this.showChapterModal = false
    },
    async cancelStream() {
-      const { value } = await Dialog.confirm({
-        title: 'Confirm',
-        message: 'Cancel this stream?'
-      })
-      if (value) {
-        this.$server.socket.emit('close_stream')
-        this.$store.commit('setStreamAudiobook', null)
+      if (this.download) {
        if (this.$refs.audioPlayerMini) {
          this.$refs.audioPlayerMini.terminateStream()
        }
+        this.$store.commit('setPlayingDownload', null)
+
+        this.$localStore.setCurrent(null)
+      } else {
+        const { value } = await Dialog.confirm({
+          title: 'Confirm',
+          message: 'Cancel this stream?'
+        })
+        if (value) {
+          this.$server.socket.emit('close_stream')
+          this.$store.commit('setStreamAudiobook', null)
+          if (this.$refs.audioPlayerMini) {
+            this.$refs.audioPlayerMini.terminateStream()
+          }
+        }
      }
    },
    updateTime(currentTime) {
-      var diff = currentTime - this.lastServerUpdateSentSeconds
+      var diff = currentTime - this.lastProgressTimeUpdate
+
      if (diff > 4 || diff < 0) {
-        this.lastServerUpdateSentSeconds = currentTime
-        var updatePayload = {
-          currentTime,
-          streamId: this.stream.id
+        this.lastProgressTimeUpdate = currentTime
+        if (this.stream) {
+          var updatePayload = {
+            currentTime,
+            streamId: this.stream.id
+          }
+          this.$server.socket.emit('stream_update', updatePayload)
+        } else if (this.download) {
+          var progressUpdate = {
+            audiobookId: this.download.id,
+            currentTime: currentTime,
+            totalDuration: this.download.audiobook.duration,
+            progress: Number((currentTime / this.download.audiobook.duration).toFixed(3)),
+            lastUpdate: Date.now(),
+            isRead: false
+          }
+
+          if (this.$server.connected) {
+            // var updateObj = {
+            //   audiobookId: this.download.id,
+            //   totalDuration: this.download.audiobook.duration,
+            //   clientCurrentTime: currentTime,
+            //   clientProgress: Number((currentTime / this.download.audiobook.duration).toFixed(3))
+            // }
+            this.$server.socket.emit('progress_update', progressUpdate)
+          }
+          this.$localStore.updateUserAudiobookProgress(progressUpdate).then(() => {
+            console.log('Updated user audiobook progress', currentTime)
+          })
        }
-        this.$server.socket.emit('stream_update', updatePayload)
      }
    },
    closeStream() {},
@@ -151,8 +223,67 @@ export default {
        }
      }
    },
+    async getDownloadStartTime() {
+      var userAudiobook = await this.$localStore.getMostRecentUserAudiobook(this.audiobookId)
+      if (!userAudiobook) {
+        console.log('[StreamContainer] getDownloadStartTime no user audiobook record found')
+        return 0
+      }
+      return userAudiobook.currentTime
+    },
+    async playDownload() {
+      if (this.stream) {
+        if (this.$refs.audioPlayerMini) {
+          this.$refs.audioPlayerMini.terminateStream()
+        }
+        this.stream = null
+      }
+
+      this.lastProgressTimeUpdate = 0
+      console.log('[StreamContainer] Playing local', this.playingDownload)
+      if (!this.$refs.audioPlayerMini) {
+        console.error('No Audio Player Mini')
+        return
+      }
+
+      var playOnLoad = this.$store.state.playOnLoad
+      if (playOnLoad) this.$store.commit('setPlayOnLoad', false)
+
+      var currentTime = await this.getDownloadStartTime()
+      if (isNaN(currentTime) || currentTime === null) currentTime = 0
+
+      // Update local current time
+      this.$localStore.setCurrent({
+        audiobookId: this.download.id,
+        lastUpdate: Date.now()
+      })
+
+      var audiobookStreamData = {
+        title: this.title,
+        author: this.author,
+        playWhenReady: !!playOnLoad,
+        startTime: String(Math.floor(currentTime * 1000)),
+        playbackSpeed: this.playbackSpeed || 1,
+        cover: this.download.coverUrl || null,
+        duration: String(Math.floor(this.duration * 1000)),
+        series: this.seriesTxt,
+        token: this.$store.getters['user/getToken'],
+        contentUrl: this.playingDownload.contentUrl,
+        isLocal: true
+      }
+
+      this.$refs.audioPlayerMini.set(audiobookStreamData)
+    },
    streamOpen(stream) {
-      console.log('[StreamContainer] Stream Open', stream)
+      if (this.download) {
+        if (this.$refs.audioPlayerMini) {
+          this.$refs.audioPlayerMini.terminateStream()
+        }
+      }
+
+      this.lastProgressTimeUpdate = 0
+      console.log('[StreamContainer] Stream Open: ' + this.title)
+
      if (!this.$refs.audioPlayerMini) {
        console.error('No Audio Player Mini')
        return
@@ -160,6 +291,9 @@ export default {

      this.stream = stream

+      // Update local remove current
+      this.$localStore.setCurrent(null)
+
      var playlistUrl = stream.clientPlaylistUri
      var currentTime = stream.clientCurrentTime || 0
      var playOnLoad = this.$store.state.playOnLoad
@@ -177,13 +311,17 @@ export default {
        playlistUrl: this.$server.url + playlistUrl,
        token: this.$store.getters['user/getToken']
      }
-
      this.$refs.audioPlayerMini.set(audiobookStreamData)
    },
    audioPlayerMounted() {
      console.log('Audio Player Mounted', this.$server.stream)
      this.audioPlayerReady = true
-      if (this.$server.stream) {
+
+      if (this.playingDownload) {
+        console.log('[StreamContainer] Play download on audio mount')
+        this.playDownload()
+      } else if (this.$server.stream) {
+        console.log('[StreamContainer] Open stream on audio mount')
        this.streamOpen(this.$server.stream)
      }
    },
@@ -206,6 +344,26 @@ export default {
        this.playbackSpeed = settings.playbackRate
        this.$refs.audioPlayerMini.updatePlaybackRate()
      }
+    },
+    streamUpdated(type, data) {
+      if (type === 'download') {
+        if (data) {
+          console.log('START DOWNLOAD PLAY')
+          this.download = { ...data }
+          if (this.audioPlayerReady) {
+            this.playDownload()
+          }
+        } else if (this.download) {
+          console.log('STOP DOWNLOAD PLAY')
+          this.cancelStream()
+        }
+      } else {
+        if (data) {
+          console.log('STARTING STREAM')
+        } else {
+          console.log('STOPPING STREAM')
+        }
+      }
    }
  },
  mounted() {
@@ -213,15 +371,19 @@ export default {

    this.setListeners()
    this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
+    this.$store.commit('setStreamListener', this.streamUpdated)
  },
  beforeDestroy() {
-    this.$server.socket.off('stream_open', this.streamOpen)
-    this.$server.socket.off('stream_closed', this.streamClosed)
-    this.$server.socket.off('stream_progress', this.streamProgress)
-    this.$server.socket.off('stream_ready', this.streamReady)
-    this.$server.socket.off('stream_reset', this.streamReset)
+    if (this.$server.socket) {
+      this.$server.socket.off('stream_open', this.streamOpen)
+      this.$server.socket.off('stream_closed', this.streamClosed)
+      this.$server.socket.off('stream_progress', this.streamProgress)
+      this.$server.socket.off('stream_ready', this.streamReady)
+      this.$server.socket.off('stream_reset', this.streamReset)
+    }

    this.$store.commit('user/removeSettingsListener', 'streamContainer')
+    this.$store.commit('removeStreamListener')
  }
 }
 </script>