Add:Start/complete date on audiobook page #383, Fix local hls stream url

client/pages/audiobook/_id/index.vue

@@ -47,7 +47,6 @@
                     <nuxt-link :key="narrator" :to="`/library/${libraryId}/bookshelf?filter=narrators.${$encode(narrator)}`" class="hover:underline">{{ narrator }}</nuxt-link
                     ><span :key="index" v-if="index < narrators.length - 1">,&nbsp;</span>
                   </template>
-                  <!-- <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=narrators.${$encode(narrator)}`" class="hover:underline">{{ narrator }}</nuxt-link> -->
                 </div>
               </div>
               <div v-if="publishYear" class="flex py-0.5">
@@ -95,9 +94,13 @@
             <p class="ml-4">Book has no audio tracks but has valid ebook files. The e-reader is experimental and can be turned on in config.</p>
           </div>
 
-          <div v-if="progressPercent > 0 && progressPercent < 1" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-200 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
+          <!-- Progress -->
-            <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
+          <div v-if="progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
-            <p class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
+            <p v-if="progressPercent < 1" class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
+            <p v-else class="text-xs">Finished {{ $formatDate(userProgressFinishedAt, 'MM/dd/yyyy') }}</p>
+            <p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
+            <p class="text-gray-400 text-xs pt-1">Started {{ $formatDate(userProgressStartedAt, 'MM/dd/yyyy') }}</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>
@@ -372,7 +375,13 @@ export default {
       return this.duration - this.userCurrentTime
     },
     progressPercent() {
-      return this.userAudiobook ? this.userAudiobook.progress : 0
+      return this.userAudiobook ? Math.max(Math.min(1, this.userAudiobook.progress), 0) : 0
+    },
+    userProgressStartedAt() {
+      return this.userAudiobook ? this.userAudiobook.startedAt : 0
+    },
+    userProgressFinishedAt() {
+      return this.userAudiobook ? this.userAudiobook.finishedAt : 0
     },
     streamAudiobook() {
       return this.$store.state.streamAudiobook

client/players/AudioTrack.js

@@ -16,4 +16,14 @@ export default class AudioTrack {
     }
     return `${window.location.origin}${this.contentUrl}`
   }
+
+  get relativeContentUrl() {
+    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
+
+    if (process.env.NODE_ENV === 'development') {
+      return `${process.env.serverUrl}${this.contentUrl}`
+    }
+
+    return this.contentUrl
+  }
 }

client/players/LocalPlayer.js

@@ -99,7 +99,7 @@ export default class LocalPlayer extends EventEmitter {
     if (!Hls.isSupported()) {
       console.warn('HLS is not supported - fallback to using audio element')
       this.usingNativeplayer = true
-      this.player.src = this.currentTrack.contentUrl
+      this.player.src = this.currentTrack.relativeContentUrl
       this.player.currentTime = this.currentTime
       return
     }
@@ -115,7 +115,7 @@ export default class LocalPlayer extends EventEmitter {
 
     this.hlsInstance.attachMedia(this.player)
     this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
-      this.hlsInstance.loadSource(this.currentTrack.contentUrl)
+      this.hlsInstance.loadSource(this.currentTrack.relativeContentUrl)
 
       this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
         console.log('[HLS] Manifest Parsed')