Add version checker

client/components/app/Appbar.vue

@@ -11,6 +11,11 @@
         <controls-global-search />
         <div class="flex-grow" />
 
+        <!-- <a v-if="isUpdateAvailable" :href="githubTagUrl" target="_blank" class="flex items-center rounded-full bg-warning p-2 text-sm">
+          <span class="material-icons">notification_important</span>
+          <span class="pl-2">Update is available! Check release notes for v{{ latestVersion }}</span>
+        </a> -->
+
         <nuxt-link v-if="isRootUser" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mr-4">
           <span class="material-icons">upload</span>
         </nuxt-link>

client/layouts/default.vue

@@ -232,10 +232,40 @@ export default {
       this.socket.on('download_failed', this.downloadFailed)
       this.socket.on('download_killed', this.downloadKilled)
       this.socket.on('download_expired', this.downloadExpired)
+    },
+    showUpdateToast(versionData) {
+      var ignoreVersion = localStorage.getItem('ignoreVersion')
+      var latestVersion = versionData.latestVersion
+
+      if (!ignoreVersion || ignoreVersion !== latestVersion) {
+        this.$toast.info(`Update is available!\nCheck release notes for v${versionData.latestVersion}`, {
+          position: 'top-center',
+          toastClassName: 'cursor-pointer',
+          bodyClassName: 'custom-class-1',
+          timeout: 20000,
+          closeOnClick: false,
+          draggable: false,
+          hideProgressBar: false,
+          onClick: () => {
+            window.open(versionData.githubTagUrl, '_blank')
+          },
+          onClose: () => {
+            localStorage.setItem('ignoreVersion', versionData.latestVersion)
+          }
+        })
+      } else {
+        console.warn(`Update is available but user chose to dismiss it! v${versionData.latestVersion}`)
+      }
     }
   },
   mounted() {
     this.initializeSocket()
+    this.$store
+      .dispatch('checkForUpdate')
+      .then((res) => {
+        if (res && res.hasUpdate) this.showUpdateToast(res)
+      })
+      .catch((err) => console.error(err))
 
     if (this.$route.query.error) {
       this.$toast.error(this.$route.query.error)
@@ -243,4 +273,10 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+.Vue-Toastification__toast-body.custom-class-1 {
+  font-size: 14px;
+}
+</style>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {

client/plugins/toast.js

@@ -7,4 +7,4 @@ const options = {
   draggable: false
 }
 
-Vue.use(Toast, options)
+Vue.use(Toast, options)

client/plugins/version.js

@@ -0,0 +1,59 @@
+import packagejson from '../package.json'
+import axios from 'axios'
+
+function parseSemver(ver) {
+  if (!ver) return null
+  var groups = ver.match(/^v((([0-9]+)\.([0-9]+)\.([0-9]+)(?:-([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?)(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?)$/)
+  if (groups && groups.length > 6) {
+    var total = Number(groups[3]) * 100 + Number(groups[4]) * 10 + Number(groups[5])
+    if (isNaN(total)) {
+      console.warn('Invalid version total', groups[3], groups[4], groups[5])
+      return null
+    }
+    return {
+      total,
+      version: groups[2],
+      major: Number(groups[3]),
+      minor: Number(groups[4]),
+      patch: Number(groups[5]),
+      preRelease: groups[6] || null
+    }
+  } else {
+    console.warn('Invalid semver string', ver)
+  }
+  return null
+}
+export async function checkForUpdate() {
+  if (!packagejson.version) {
+    return
+  }
+  var currVerObj = parseSemver('v' + packagejson.version)
+  if (!currVerObj) {
+    console.error('Invalid version', packagejson.version)
+    return
+  }
+  var largestVer = null
+  await axios.get(`https://api.github.com/repos/advplyr/audiobookshelf/tags`).then((res) => {
+    var tags = res.data
+    if (tags && tags.length) {
+      tags.forEach((tag) => {
+        var verObj = parseSemver(tag.name)
+        if (verObj) {
+          if (!largestVer || largestVer.total < verObj.total) {
+            largestVer = verObj
+          }
+        }
+      })
+    }
+  })
+  if (!largestVer) {
+    console.error('No valid version tags to compare with')
+    return
+  }
+  return {
+    hasUpdate: largestVer.total > currVerObj.total,
+    latestVersion: largestVer.version,
+    githubTagUrl: `https://github.com/advplyr/audiobookshelf/releases/tag/v${largestVer.version}`,
+    currentVersion: currVerObj.version
+  }
+}

client/store/index.js

@@ -1,6 +1,7 @@
-import Vue from 'vue'
+import { checkForUpdate } from '@/plugins/version'
 
 export const state = () => ({
+  versionData: null,
   serverSettings: null,
   streamAudiobook: null,
   editModalTab: 'details',
@@ -39,10 +40,24 @@ export const actions = {
       console.error('Failed to update server settings', error)
       return false
     })
+  },
+  checkForUpdate({ commit }) {
+    return checkForUpdate()
+      .then((res) => {
+        commit('setVersionData', res)
+        return res
+      })
+      .catch((error) => {
+        console.error('Update check failed', error)
+        return false
+      })
   }
 }
 
 export const mutations = {
+  setVersionData(state, versionData) {
+    state.versionData = versionData
+  },
   setServerSettings(state, settings) {
     state.serverSettings = settings
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "Self-hosted audiobook server for managing and playing audiobooks.",
   "main": "index.js",
   "scripts": {