Check app version, fix close stream bug, show audiobook progress, add toasts

pages/account.vue

@@ -17,11 +17,15 @@
         </svg>
       </a>
     </div>
-    <p class="font-mono pt-1 pb-4">v{{ $config.version }}</p>
+    <p class="font-mono pt-1 pb-4">{{ $config.version }}</p>
+
+    <ui-btn v-if="isUpdateAvailable" class="w-full my-4" color="success" @click="clickUpdate"> Version {{ availableVersion }} is available! {{ immediateUpdateAllowed ? 'Update now' : 'Get update from app store' }} </ui-btn>
   </div>
 </template>
 
 <script>
+import { AppUpdate } from '@robingenz/capacitor-app-update'
+
 export default {
   data() {
     return {}
@@ -35,9 +39,32 @@ export default {
     },
     serverUrl() {
       return this.$server.url
+    },
+    appUpdateInfo() {
+      return this.$store.state.appUpdateInfo
+    },
+    availableVersion() {
+      return this.appUpdateInfo ? this.appUpdateInfo.availableVersion : null
+    },
+    immediateUpdateAllowed() {
+      return this.appUpdateInfo ? !!this.appUpdateInfo.immediateUpdateAllowed : false
+    },
+    updateAvailability() {
+      return this.appUpdateInfo ? this.appUpdateInfo.updateAvailability : null
+    },
+    isUpdateAvailable() {
+      return this.updateAvailability === 2
+    }
+  },
+  methods: {
+    async clickUpdate() {
+      if (this.immediateUpdateAllowed) {
+        await AppUpdate.performImmediateUpdate()
+      } else {
+        await AppUpdate.openAppStore()
+      }
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>

pages/audiobook/_id/index.vue

@@ -2,7 +2,11 @@
   <div class="w-full h-full px-3 py-4 overflow-y-auto">
     <div class="flex">
       <div class="w-32">
-        <cards-book-cover :audiobook="audiobook" :width="128" />
+        <div class="relative">
+          <cards-book-cover :audiobook="audiobook" :width="128" />
+          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :style="{ width: 128 * progressPercent + 'px' }"></div>
+        </div>
+        <!-- <cards-book-cover :audiobook="audiobook" :width="128" /> -->
       </div>
       <div class="flex-grow px-3">
         <h1 class="text-lg">{{ title }}</h1>
@@ -11,9 +15,18 @@
         <p class="text-gray-300 text-sm my-1">
           {{ durationPretty }}<span class="px-4">{{ sizePretty }}</span>
         </p>
-        <ui-btn color="success" class="flex items-center justify-center w-full mt-2" :padding-x="4" @click="playClick">
-          <span class="material-icons">play_arrow</span>
-          <span class="px-1">Play</span>
+
+        <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
+          <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
+          <p class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
+          <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
+            <span class="material-icons text-sm">close</span>
+          </div>
+        </div>
+
+        <ui-btn color="success" :disabled="streaming" class="flex items-center justify-center w-full mt-4" :padding-x="4" @click="playClick">
+          <span v-show="!streaming" class="material-icons">play_arrow</span>
+          <span class="px-1">{{ streaming ? 'Streaming' : 'Play' }}</span>
         </ui-btn>
         <div class="flex my-4"></div>
       </div>
@@ -25,6 +38,8 @@
 </template>
 
 <script>
+import { Dialog } from '@capacitor/dialog'
+
 export default {
   async asyncData({ params, redirect, app }) {
     var audiobookId = params.id
@@ -41,9 +56,14 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      resettingProgress: false
+    }
   },
   computed: {
+    audiobookId() {
+      return this.audiobook.id
+    },
     book() {
       return this.audiobook.book || {}
     },
@@ -54,7 +74,7 @@ export default {
       return this.book.author || 'Unknown'
     },
     description() {
-      return this.book.description || 'No Description'
+      return this.book.description || ''
     },
     series() {
       return this.book.series || null
@@ -75,6 +95,27 @@ export default {
     },
     sizePretty() {
       return this.audiobook.sizePretty
+    },
+    userAudiobooks() {
+      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    },
+    userAudiobook() {
+      return this.userAudiobooks[this.audiobookId] || null
+    },
+    userCurrentTime() {
+      return this.userAudiobook ? this.userAudiobook.currentTime : 0
+    },
+    userTimeRemaining() {
+      return this.duration - this.userCurrentTime
+    },
+    progressPercent() {
+      return this.userAudiobook ? this.userAudiobook.progress : 0
+    },
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    },
+    isStreaming() {
+      return this.streamAudiobook && this.streamAudiobook.id === this.audiobookId
     }
   },
   methods: {
@@ -82,8 +123,45 @@ export default {
       this.$store.commit('setPlayOnLoad', true)
       this.$store.commit('setStreamAudiobook', this.audiobook)
       this.$server.socket.emit('open_stream', this.audiobook.id)
+    },
+    async clearProgressClick() {
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: 'Are you sure you want to reset your progress?'
+      })
+
+      if (value) {
+        this.resettingProgress = true
+        this.$axios
+          .$delete(`/api/user/audiobook/${this.audiobookId}`)
+          .then(() => {
+            console.log('Progress reset complete')
+            this.$toast.success(`Your progress was reset`)
+            this.resettingProgress = false
+          })
+          .catch((error) => {
+            console.error('Progress reset failed', error)
+            this.resettingProgress = false
+          })
+      }
+    },
+    audiobookUpdated() {
+      console.log('Audiobook Updated - Fetch full audiobook')
+      this.$axios
+        .$get(`/api/audiobook/${this.audiobookId}`)
+        .then((audiobook) => {
+          this.audiobook = audiobook
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+        })
     }
   },
-  mounted() {}
+  mounted() {
+    this.$store.commit('audiobooks/addListener', { id: 'audiobook', audiobookId: this.audiobookId, meth: this.audiobookUpdated })
+  },
+  beforeDestroy() {
+    this.$store.commit('audiobooks/removeListener', 'audiobook')
+  }
 }
 </script>

pages/connect.vue

@@ -14,7 +14,7 @@
         </div>
         <div v-show="!loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg p-6">
           <h2 class="text-xl leading-7 mb-4">Enter an <span class="font-book font-normal">AudioBookshelf</span><br />server address:</h2>
-          <form v-show="!showAuth" @submit.prevent="submit">
+          <form v-show="!showAuth" @submit.prevent="submit" novalidate>
             <ui-text-input v-model="serverUrl" :disabled="processing" placeholder="http://55.55.55.55:13378" type="url" class="w-60 sm:w-72 h-10" />
             <ui-btn :disabled="processing" type="submit" :padding-x="3" class="h-10">Submit</ui-btn>
           </form>
@@ -79,6 +79,9 @@ export default {
   },
   methods: {
     async submit() {
+      if (!this.serverUrl.startsWith('http')) {
+        this.serverUrl = 'http://' + this.serverUrl
+      }
       this.processing = true
       this.error = null
       var success = await this.$server.check(this.serverUrl)