Merge branch 'master' into mf/loginPage

client/components/modals/ChaptersModal.vue

@@ -34,11 +34,6 @@ export default {
   data() {
     return {}
   },
-  watch: {
-    value(newVal) {
-      this.$nextTick(this.scrollToChapter)
-    }
-  },
   computed: {
     show: {
       get() {
@@ -53,7 +48,7 @@ export default {
       return this.playbackRate
     },
     currentChapterId() {
-      return this.currentChapter ? this.currentChapter.id : null
+      return this.currentChapter?.id || null
     },
     currentChapterStart() {
       return (this.currentChapter?.start || 0) / this._playbackRate
@@ -74,6 +69,11 @@ export default {
         }
       }
     }
+  },
+  updated() {
+    if (this.value) {
+      this.$nextTick(this.scrollToChapter)
+    }
   }
 }
 </script>

client/components/tables/BackupsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center mt-4">
+  <div class="text-center mt-4 relative">
     <div class="flex py-4">
       <ui-file-input ref="fileInput" class="mr-2" accept=".audiobookshelf" @change="backupUploaded">{{ $strings.ButtonUploadBackup }}</ui-file-input>
       <div class="flex-grow" />
@@ -54,6 +54,10 @@
         </div>
       </div>
     </prompt-dialog>
+
+    <div v-if="isApplyingBackup" class="absolute inset-0 w-full h-full flex items-center justify-center bg-black/20 rounded-md">
+      <ui-loading-indicator />
+    </div>
   </div>
 </template>
 
@@ -64,6 +68,7 @@ export default {
       showConfirmApply: false,
       selectedBackup: null,
       isBackingUp: false,
+      isApplyingBackup: false,
       processing: false,
       backups: []
     }
@@ -85,19 +90,21 @@ export default {
     },
     confirm() {
       this.showConfirmApply = false
+      this.isApplyingBackup = true
 
       this.$axios
         .$get(`/api/backups/${this.selectedBackup.id}/apply`)
         .then(() => {
-          this.isBackingUp = false
           location.replace('/config/backups?backup=1')
         })
         .catch((error) => {
-          this.isBackingUp = false
           console.error('Failed to apply backup', error)
           const errorMsg = error.response.data || this.$strings.ToastBackupRestoreFailed
           this.$toast.error(errorMsg)
         })
+        .finally(() => {
+          this.isApplyingBackup = false
+        })
     },
     deleteBackupClick(backup) {
       if (confirm(this.$getString('MessageConfirmDeleteBackup', [this.$formatDatetime(backup.createdAt, this.dateFormat, this.timeFormat)]))) {
@@ -180,7 +187,6 @@ export default {
     this.loadBackups()
     if (this.$route.query.backup) {
       this.$toast.success('Backup applied successfully')
-      this.$router.replace('/config')
     }
   }
 }

client/package-lock.json

@@ -16,7 +16,7 @@
         "cron-parser": "^4.7.1",
         "date-fns": "^2.25.0",
         "epubjs": "^0.3.88",
-        "hls.js": "^1.0.7",
+        "hls.js": "^1.5.7",
         "libarchive.js": "^1.3.0",
         "nuxt": "^2.17.3",
         "nuxt-socket-io": "^1.1.18",
@@ -8627,9 +8627,9 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.1.tgz",
-      "integrity": "sha512-SsUSlpyjOGnwBhVrVEG6vRFPU2SAJ0gUqrFdGeo7YPbOC0vuWK0TDMyp7n3QiaBC/Wkic771uqPnnVdT8/x+3Q=="
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.7.tgz",
+      "integrity": "sha512-Hnyf7ojTBtXHeOW1/t6wCBJSiK1WpoKF9yg7juxldDx8u3iswrkPt2wbOA/1NiwU4j27DSIVoIEJRAhcdMef/A=="
     },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
@@ -16976,4 +16976,4 @@
       }
     }
   }
-}
+}

client/package.json

@@ -21,7 +21,7 @@
     "cron-parser": "^4.7.1",
     "date-fns": "^2.25.0",
     "epubjs": "^0.3.88",
-    "hls.js": "^1.0.7",
+    "hls.js": "^1.5.7",
     "libarchive.js": "^1.3.0",
     "nuxt": "^2.17.3",
     "nuxt-socket-io": "^1.1.18",
@@ -36,4 +36,4 @@
     "postcss": "^8.3.6",
     "tailwindcss": "^3.4.1"
   }
-}
+}

client/players/LocalAudioPlayer.js

@@ -139,11 +139,30 @@ export default class LocalAudioPlayer extends EventEmitter {
     }
 
     var hlsOptions = {
-      startPosition: this.startTime || -1
-      // No longer needed because token is put in a query string
-      // xhrSetup: (xhr) => {
-      //   xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-      // }
+      startPosition: this.startTime || -1,
+      fragLoadPolicy: {
+        default: {
+          maxTimeToFirstByteMs: 10000,
+          maxLoadTimeMs: 120000,
+          timeoutRetry: {
+            maxNumRetry: 4,
+            retryDelayMs: 0,
+            maxRetryDelayMs: 0,
+          },
+          errorRetry: {
+            maxNumRetry: 8,
+            retryDelayMs: 1000,
+            maxRetryDelayMs: 8000,
+            shouldRetry: (retryConfig, retryCount, isTimeout, httpStatus, retry) => {
+              if (httpStatus?.code === 404 && retryConfig?.maxNumRetry > retryCount) {
+                console.log(`[HLS] Server 404 for fragment retry ${retryCount} of ${retryConfig.maxNumRetry}`)
+                return true
+              }
+              return retry
+            }
+          },
+        }
+      }
     }
     this.hlsInstance = new Hls(hlsOptions)
 
@@ -156,9 +175,15 @@ export default class LocalAudioPlayer extends EventEmitter {
       })
 
       this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
-        console.error('[HLS] Error', data.type, data.details, data)
         if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
           console.error('[HLS] BUFFER STALLED ERROR')
+        } else if (data.details === Hls.ErrorDetails.FRAG_LOAD_ERROR) {
+          // Only show error if the fragment is not being retried
+          if (data.errorAction?.action !== 5) {
+            console.error('[HLS] FRAG LOAD ERROR', data)
+          }
+        } else {
+          console.error('[HLS] Error', data.type, data.details, data)
         }
       })
       this.hlsInstance.on(Hls.Events.DESTROYING, () => {