Update:Show version number in bottom of siderail #660 and save previous version data to continue showing if update is available

client/components/app/SideRail.vue

@@ -73,6 +73,12 @@
         <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
       </div>
     </nuxt-link>
+
+    <div class="w-full h-12 px-1 py-2 border-t border-black border-opacity-20 absolute left-0" :style="{ bottom: streamLibraryItem ? '240px' : '65px' }">
+      <p class="font-mono text-xs text-center text-gray-300 leading-3 mb-1">v{{ $config.version }}</p>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
+      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
+    </div>
   </div>
 </template>
 
@@ -82,6 +88,12 @@ export default {
     return {}
   },
   computed: {
+    Source() {
+      return this.$store.state.Source
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
+    },
     isShowingBookshelfToolbar() {
       if (!this.$route.name) return false
       return this.$route.name.startsWith('library')
@@ -131,6 +143,21 @@ export default {
     },
     numIssues() {
       return this.$store.state.libraries.issues || 0
+    },
+    versionData() {
+      return this.$store.state.versionData || {}
+    },
+    hasUpdate() {
+      return !!this.versionData.hasUpdate
+    },
+    latestVersion() {
+      return this.versionData.latestVersion
+    },
+    githubTagUrl() {
+      return this.versionData.githubTagUrl
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {},

client/layouts/default.vue

@@ -515,23 +515,12 @@ export default {
       this.$store.commit('globals/updateWindowSize', { width: window.innerWidth, height: window.innerHeight })
     },
     checkVersionUpdate() {
-      // Version check is only run if time since last check was 5 minutes
+      this.$store
-      const VERSION_CHECK_BUFF = 1000 * 60 * 5 // 5 minutes
+        .dispatch('checkForUpdate')
-      var lastVerCheck = localStorage.getItem('lastVerCheck') || 0
+        .then((res) => {
-      if (Date.now() - Number(lastVerCheck) > VERSION_CHECK_BUFF) {
+          if (res && res.hasUpdate) this.showUpdateToast(res)
-        this.$store
+        })
-          .dispatch('checkForUpdate')
+        .catch((err) => console.error(err))
-          .then((res) => {
-            localStorage.setItem('lastVerCheck', Date.now())
-            if (res && res.hasUpdate) this.showUpdateToast(res)
-          })
-          .catch((err) => console.error(err))
-
-        if (this.$route.query.error) {
-          this.$toast.error(this.$route.query.error)
-          this.$router.replace(this.$route.path)
-        }
-      }
     }
   },
   beforeMount() {
@@ -551,6 +540,11 @@ export default {
     }
 
     this.checkVersionUpdate()
+
+    if (this.$route.query.error) {
+      this.$toast.error(this.$route.query.error)
+      this.$router.replace(this.$route.path)
+    }
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.resize)

client/plugins/version.js

@@ -23,14 +23,17 @@ function parseSemver(ver) {
   }
   return null
 }
+
+export const currentVersion = packagejson.version
+
 export async function checkForUpdate() {
   if (!packagejson.version) {
-    return
+    return null
   }
   var currVerObj = parseSemver('v' + packagejson.version)
   if (!currVerObj) {
     console.error('Invalid version', packagejson.version)
-    return
+    return null
   }
   var largestVer = null
   await axios.get(`https://api.github.com/repos/advplyr/audiobookshelf/releases`).then((res) => {
@@ -49,7 +52,7 @@ export async function checkForUpdate() {
   })
   if (!largestVer) {
     console.error('No valid version tags to compare with')
-    return
+    return null
   }
 
   return {

client/store/index.js

@@ -1,4 +1,4 @@
-import { checkForUpdate } from '@/plugins/version'
+import { checkForUpdate, currentVersion } from '@/plugins/version'
 import Vue from 'vue'
 
 export const state = () => ({
@@ -65,15 +65,44 @@ export const actions = {
     })
   },
   checkForUpdate({ commit }) {
-    return checkForUpdate()
+    const VERSION_CHECK_BUFF = 1000 * 60 * 5 // 5 minutes
-      .then((res) => {
+    var lastVerCheck = localStorage.getItem('lastVerCheck') || 0
-        commit('setVersionData', res)
+    var savedVersionData = localStorage.getItem('versionData')
-        return res
+    if (savedVersionData) {
-      })
+      try {
-      .catch((error) => {
+        savedVersionData = JSON.parse(localStorage.getItem('versionData'))
-        console.error('Update check failed', error)
+      } catch (error) {
-        return false
+        console.error('Failed to parse version data', error)
-      })
+        savedVersionData = null
+        localStorage.removeItem('versionData')
+      }
+    }
+
+    var shouldCheckForUpdate = Date.now() - Number(lastVerCheck) > VERSION_CHECK_BUFF
+    if (!shouldCheckForUpdate && savedVersionData && savedVersionData.version !== currentVersion) {
+      // Version mismatch between saved data so check for update anyway
+      shouldCheckForUpdate = true
+    }
+
+    if (shouldCheckForUpdate) {
+      return checkForUpdate()
+        .then((res) => {
+          if (res) {
+            localStorage.setItem('lastVerCheck', Date.now())
+            localStorage.setItem('versionData', JSON.stringify(res))
+
+            commit('setVersionData', res)
+          }
+          return res && res.hasUpdate
+        })
+        .catch((error) => {
+          console.error('Update check failed', error)
+          return false
+        })
+    } else if (savedVersionData) {
+      commit('setVersionData', savedVersionData)
+    }
+    return null
   }
 }