Add:Last local media progress sync with server widget, Update:Remove local media progress with bad id

android/app/src/main/java/com/audiobookshelf/app/data/DbManager.kt

@@ -213,7 +213,11 @@ class DbManager {
     val localLibraryItems = getLocalLibraryItems()
     localMediaProgress.forEach {
       val matchingLLI = localLibraryItems.find { lli -> lli.id == it.localLibraryItemId }
-      if (matchingLLI == null) {
+      if (!it.id.startsWith("local")) {
+        // A bug on the server when syncing local media progress was replacing the media progress id causing duplicate progress. Remove them.
+        Log.d(tag, "cleanLocalMediaProgress: Invalid local media progress does not start with 'local' (fixed on server 2.0.24)")
+        Paper.book("localMediaProgress").delete(it.id)
+      } else if (matchingLLI == null) {
         Log.d(tag, "cleanLocalMediaProgress: No matching local library item for local media progress ${it.id} - removing")
         Paper.book("localMediaProgress").delete(it.id)
       } else if (matchingLLI.isPodcast) {

layouts/default.vue

@@ -66,9 +66,6 @@ export default {
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
-    },
-    isSocketConnected() {
-      return this.$store.state.socketConnected
     }
   },
   methods: {
@@ -174,6 +171,7 @@ export default {
     async syncLocalMediaProgress() {
       if (!this.user) {
         console.log('[default] No need to sync local media progress - not connected to server')
+        this.$store.commit('setLastLocalMediaSyncResults', null)
         return
       }
 
@@ -181,10 +179,15 @@ export default {
       var response = await this.$db.syncLocalMediaProgressWithServer()
       if (!response) {
         if (this.$platform != 'web') this.$toast.error('Failed to sync local media with server')
+        this.$store.commit('setLastLocalMediaSyncResults', null)
         return
       }
       const { numLocalMediaProgressForServer, numServerProgressUpdates, numLocalProgressUpdates } = response
       if (numLocalMediaProgressForServer > 0) {
+        response.syncedAt = Date.now()
+        response.serverConfigName = this.$store.getters['user/getServerConfigName']
+        this.$store.commit('setLastLocalMediaSyncResults', response)
+
         if (numServerProgressUpdates > 0 || numLocalProgressUpdates > 0) {
           console.log(`[default] ${numServerProgressUpdates} Server progress updates | ${numLocalProgressUpdates} Local progress updates`)
         } else {
@@ -192,6 +195,7 @@ export default {
         }
       } else {
         console.log('[default] syncLocalMediaProgress No local media progress to sync')
+        this.$store.commit('setLastLocalMediaSyncResults', null)
       }
     },
     async userUpdated(user) {

pages/localMedia/folders/index.vue

@@ -1,5 +1,28 @@
 <template>
   <div class="w-full h-full py-6">
+    <div v-if="lastLocalMediaSyncResults" class="px-2 mb-4">
+      <div class="w-full pl-2 pr-2 py-2 bg-black bg-opacity-25 rounded-lg relative">
+        <div class="flex items-center mb-1">
+          <span class="material-icons text-success text-xl">sync</span>
+          <p class="text-sm text-gray-300 pl-2">Local media progress synced with server</p>
+        </div>
+        <div class="flex justify-between mb-1.5">
+          <p class="text-xs text-gray-400 font-semibold">{{ syncedServerConfigName }}</p>
+          <p class="text-xs text-gray-400 italic">{{ $dateDistanceFromNow(syncedAt) }}</p>
+        </div>
+
+        <div v-if="!numLocalProgressUpdates && !numServerProgressUpdates">
+          <p class="text-sm text-gray-300">Local media progress was up-to-date with server ({{ numLocalMediaSynced }} item{{ numLocalMediaSynced == 1 ? '' : 's' }})</p>
+        </div>
+        <div v-else>
+          <p v-if="numServerProgressUpdates" class="text-sm text-gray-300">- {{ numServerProgressUpdates }} local media item{{ numServerProgressUpdates === 1 ? '' : 's' }} progress was updated on the server (local more recent).</p>
+          <p v-else class="text-sm text-gray-300">- No local media progress had to be synced on the server.</p>
+          <p v-if="numLocalProgressUpdates" class="text-sm text-gray-300">- {{ numLocalProgressUpdates }} local media item{{ numLocalProgressUpdates === 1 ? '' : 's' }} progress was updated to match the server (server more recent).</p>
+          <p v-else class="text-sm text-gray-300">- No server progress had to be synced with local media progress.</p>
+        </div>
+      </div>
+    </div>
+
     <h1 class="text-base font-semibold px-3 mb-2">Local Folders</h1>
 
     <div v-if="!isIos" class="w-full max-w-full px-3 py-2">
@@ -49,8 +72,28 @@ export default {
     isIos() {
       return this.$platform === 'ios'
     },
-    isSocketConnected() {
-      return this.$store.state.socketConnected
+    lastLocalMediaSyncResults() {
+      return this.$store.state.lastLocalMediaSyncResults
+    },
+    numLocalMediaSynced() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.numLocalMediaProgressForServer || 0
+    },
+    syncedAt() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.syncedAt || 0
+    },
+    syncedServerConfigName() {
+      if (!this.lastLocalMediaSyncResults) return ''
+      return this.lastLocalMediaSyncResults.serverConfigName
+    },
+    numLocalProgressUpdates() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.numLocalProgressUpdates || 0
+    },
+    numServerProgressUpdates() {
+      if (!this.lastLocalMediaSyncResults) return 0
+      return this.lastLocalMediaSyncResults.numServerProgressUpdates || 0
     }
   },
   methods: {

store/index.js

@@ -19,7 +19,8 @@ export const state = () => ({
   showSideDrawer: false,
   isNetworkListenerInit: false,
   serverSettings: null,
-  lastBookshelfScrollData: {}
+  lastBookshelfScrollData: {},
+  lastLocalMediaSyncResults: null
 })
 
 export const getters = {
@@ -126,5 +127,8 @@ export const mutations = {
   setServerSettings(state, val) {
     state.serverSettings = val
     this.$localStore.setServerSettings(state.serverSettings)
+  },
+  setLastLocalMediaSyncResults(state, val) {
+    state.lastLocalMediaSyncResults = val
   }
 }

store/user.js

@@ -22,6 +22,9 @@ export const getters = {
   getServerAddress: (state) => {
     return state.serverConnectionConfig ? state.serverConnectionConfig.address : null
   },
+  getServerConfigName: (state) => {
+    return state.serverConnectionConfig ? state.serverConnectionConfig.name : null
+  },
   getCustomHeaders: (state) => {
     return state.serverConnectionConfig ? state.serverConnectionConfig.customHeaders : null
   },