From feec7f7399998b96ea601c1ed19563167ba0a9de Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 11 Dec 2022 12:01:54 -0600
Subject: [PATCH] Add:Sync local media progress button on local media page

---
 components/app/AudioPlayer.vue     |  8 +++--
 layouts/default.vue                |  2 +-
 pages/localMedia/folders/index.vue | 53 +++++++++++++++++++++++++++---
 store/user.js                      |  3 ++
 4 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index f069a268..60a9a56e 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -766,9 +766,11 @@ export default {
     screenOrientationChange() {
       setTimeout(() => {
         this.updateScreenSize()
-        this.trackWidth = this.$refs.track.clientWidth
-        this.updateTrack()
-        this.updateReadyTrack()
+        if (this.$refs.track) {
+          this.trackWidth = this.$refs.track.clientWidth
+          this.updateTrack()
+          this.updateReadyTrack()
+        }
       }, 50)
     },
     updateScreenSize() {
diff --git a/layouts/default.vue b/layouts/default.vue
index 19dee180..1f5a76d6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -175,7 +175,7 @@ export default {
       }
 
       console.log('[default] Calling syncLocalMediaProgress')
-      var response = await this.$db.syncLocalMediaProgressWithServer()
+      const 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)
diff --git a/pages/localMedia/folders/index.vue b/pages/localMedia/folders/index.vue
index d6b09ce4..5b28a304 100644
--- a/pages/localMedia/folders/index.vue
+++ b/pages/localMedia/folders/index.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="w-full h-full py-6">
+    <div v-if="localLibraryItemsOnCurrentServer.length" class="flex items-center justify-between mb-4 pb-2 px-2 border-b border-white border-opacity-10">
+      <p class="text-sm text-gray-100">{{ localLibraryItemsOnCurrentServer.length }} local items on this server</p>
+      <ui-btn small :loading="syncing" @click="syncLocalMedia">Sync</ui-btn>
+    </div>
+
     <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">
@@ -23,9 +28,9 @@
       </div>
     </div>
 
-    <h1 class="text-base font-semibold px-3 mb-2">Local Folders</h1>
+    <h1 class="text-base font-semibold px-2 mb-2">Local Folders</h1>
 
-    <div v-if="!isIos" class="w-full max-w-full px-3 py-2">
+    <div v-if="!isIos" class="w-full max-w-full px-2 py-2">
       <template v-for="folder in localFolders">
         <nuxt-link :to="`/localMedia/folders/${folder.id}`" :key="folder.id" class="flex items-center px-2 py-4 bg-primary rounded-md border-bg mb-1">
           <span class="material-icons text-xl text-yellow-400">folder</span>
@@ -55,6 +60,7 @@ export default {
   data() {
     return {
       localFolders: [],
+      localLibraryItems: [],
       newFolderMediaType: null,
       mediaTypeItems: [
         {
@@ -65,7 +71,8 @@ export default {
           value: 'podcast',
           text: 'Podcasts'
         }
-      ]
+      ],
+      syncing: false
     }
   },
   computed: {
@@ -75,6 +82,14 @@ export default {
     lastLocalMediaSyncResults() {
       return this.$store.state.lastLocalMediaSyncResults
     },
+    serverConnectionConfigId() {
+      return this.$store.getters['user/getServerConnectionConfigId']
+    },
+    localLibraryItemsOnCurrentServer() {
+      return this.localLibraryItems.filter((lli) => {
+        return lli.serverConnectionConfigId === this.serverConnectionConfigId
+      })
+    },
     numLocalMediaSynced() {
       if (!this.lastLocalMediaSyncResults) return 0
       return this.lastLocalMediaSyncResults.numLocalMediaProgressForServer || 0
@@ -97,6 +112,33 @@ export default {
     }
   },
   methods: {
+    async syncLocalMedia() {
+      console.log('[localMedia] Calling syncLocalMediaProgress')
+      this.syncing = true
+      const 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)
+        this.syncing = false
+        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(`[localMedia] ${numServerProgressUpdates} Server progress updates | ${numLocalProgressUpdates} Local progress updates`)
+        } else {
+          console.log('[localMedia] syncLocalMediaProgress No updates were necessary')
+        }
+      } else {
+        console.log('[localMedia] syncLocalMediaProgress No local media progress to sync')
+        this.$store.commit('setLastLocalMediaSyncResults', null)
+      }
+      this.syncing = false
+    },
     async selectFolder() {
       if (!this.newFolderMediaType) {
         return this.$toast.error('Must select a media type')
@@ -107,14 +149,14 @@ export default {
         return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
       }
 
-      var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
+      const indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
       if (indexOfExisting >= 0) {
         this.localFolders.splice(indexOfExisting, 1, folderObj)
       } else {
         this.localFolders.push(folderObj)
       }
 
-      var permissionsGood = await AbsFileSystem.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
+      const permissionsGood = await AbsFileSystem.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
 
       if (!permissionsGood) {
         this.$toast.error('Folder permissions failed')
@@ -127,6 +169,7 @@ export default {
     },
     async init() {
       this.localFolders = (await this.$db.getLocalFolders()) || []
+      this.localLibraryItems = await this.$db.getLocalLibraryItems()
     }
   },
   mounted() {
diff --git a/store/user.js b/store/user.js
index 8981e557..ae976964 100644
--- a/store/user.js
+++ b/store/user.js
@@ -20,6 +20,9 @@ export const getters = {
   getToken: (state) => {
     return state.user ? state.user.token : null
   },
+  getServerConnectionConfigId: (state) => {
+    return state.serverConnectionConfig ? state.serverConnectionConfig.id : null
+  },
   getServerAddress: (state) => {
     return state.serverConnectionConfig ? state.serverConnectionConfig.address : null
   },