Change: njodb version bump, Fix: Socket reconnect & toast, Fix: Mobile config nav drawer

client/components/app/ConfigSideNav.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-44 fixed left-0 top-16 z-40 h-full bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-4 transform transition-transform" :class="drawerOpen ? 'translate-x-0' : '-translate-x-44'" v-click-outside="clickOutside">
+  <div class="w-44 fixed left-0 top-16 h-full bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform" :class="wrapperClass" v-click-outside="clickOutside">
-    <div class="md:hidden flex items-center justify-end py-2 px-4 mb-1" @click="closeDrawer">
+    <div class="md:hidden flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
       <span class="material-icons text-2xl">arrow_back</span>
     </div>
     <nuxt-link to="/config" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === 'config' ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
@@ -24,7 +24,7 @@
       <div v-show="routeName === 'config-log'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <div class="w-full h-12 px-4 border-t border-black border-opacity-20 absolute bottom-20 left-0 flex flex-col justify-center">
+    <div class="w-full h-10 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamAudiobook && windowHeight > 700 && !isMobile ? '300px' : '65px' }">
       <p class="font-mono text-sm">v{{ $config.version }}</p>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-sm">Update available: {{ latestVersion }}</a>
     </div>
@@ -38,12 +38,24 @@ export default {
   },
   data() {
     return {
-      windowWidth: 0
+      windowWidth: 0,
+      windowHeight: 0
     }
   },
   computed: {
+    wrapperClass() {
+      var classes = []
+      if (this.drawerOpen) classes.push('translate-x-0')
+      else classes.push('-translate-x-44')
+      if (this.isMobile) classes.push('z-50')
+      else classes.push('z-40')
+      return classes.join(' ')
+    },
+    isMobile() {
+      return this.windowWidth < 758
+    },
     drawerOpen() {
-      if (this.windowWidth < 758) return this.isOpen
+      if (this.isMobile) return this.isOpen
       return true
     },
     routeName() {
@@ -60,6 +72,9 @@ export default {
     },
     githubTagUrl() {
       return this.versionData.githubTagUrl
+    },
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
     }
   },
   methods: {
@@ -72,11 +87,13 @@ export default {
     },
     resize() {
       this.windowWidth = window.innerWidth
+      this.windowHeight = window.innerHeight
     }
   },
   mounted() {
     window.addEventListener('resize', this.resize)
-    this.windowWidth = this.resize
+    this.windowWidth = window.innerWidth
+    this.windowHeight = window.innerHeight
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.resize)

client/layouts/default.vue

@@ -20,7 +20,10 @@ export default {
   middleware: 'authenticated',
   data() {
     return {
-      socket: null
+      socket: null,
+      isSocketConnected: false,
+      isFirstSocketConnection: true,
+      socketConnectionToastId: null
     }
   },
   watch: {
@@ -46,14 +49,46 @@ export default {
       console.log('[SOCKET] Connected')
       var token = this.$store.getters['user/getToken']
       this.socket.emit('auth', token)
+
+      if (this.socketConnectionToastId !== null) {
+        this.$toast.update(this.socketConnectionToastId, { content: 'Socket Connected', options: { timeout: 5000, type: 'success', closeButton: false, position: 'bottom-center', onClose: () => null } }, true)
+      } else if (!this.isFirstSocketConnection) {
+        this.$toast.success('Socket Connected', { position: 'bottom-center' })
+      }
+      this.isFirstSocketConnection = false
+      this.isSocketConnected = true
+    },
+    connectError() {
+      console.error('[SOCKET] connect error')
+
+      // if (this.socketConnectionToastId) {
+      //    this.$toast.update(this.socketConnectionToastId, { content: 'Socket Connection Error', options: { timeout: 5000, type: 'error', closeButton: false, position: 'bottom-center', onClose: () => null } }, true)
+      // } else {
+      //   this.$toast.error('Socket Connection Error', { position: 'bottom-center' })
+      // }
     },
-    connectError() {},
     disconnect() {
       console.log('[SOCKET] Disconnected')
+      this.isSocketConnected = false
+
+      if (this.socketConnectionToastId !== null) {
+        this.socketConnectionToastId = this.$toast.update(this.socketConnectionToastId, { content: 'Socket Disconnected', options: { timeout: null, type: 'error', closeButton: false, position: 'bottom-center', onClose: () => null } }, true)
+      } else {
+        this.socketConnectionToastId = this.$toast.error('Socket Disconnected', { timeout: null, position: 'bottom-center' })
+      }
+    },
+    reconnect() {
+      console.error('[SOCKET] reconnected')
+    },
+    reconnection_attempt(val) {
+      console.log(`[SOCKET] Reconnection attempt ${val}`)
+    },
+    reconnectError() {
+      console.error('[SOCKET] reconnect error')
+    },
+    reconnectFailed() {
+      console.error('[SOCKET] reconnect failed')
     },
-    reconnect() {},
-    reconnectError() {},
-    reconnectFailed() {},
     init(payload) {
       console.log('Init Payload', payload)
       if (payload.stream) {
@@ -269,20 +304,20 @@ export default {
       this.socket = this.$nuxtSocket({
         name: process.env.NODE_ENV === 'development' ? 'dev' : 'prod',
         persist: 'main',
-        teardown: true,
+        teardown: false,
         transports: ['websocket'],
-        upgrade: false
+        upgrade: false,
+        reconnection: true
       })
-      this.$root.socket = this.socket
+      // this.$root.socket = this.socket
 
-      // Connection Listeners
       this.socket.on('connect', this.connect)
       this.socket.on('connect_error', this.connectError)
       this.socket.on('disconnect', this.disconnect)
-      this.socket.on('reconnecting', this.reconnecting)
+      this.socket.io.on('reconnection_attempt', this.reconnection_attempt)
-      this.socket.on('reconnect', this.reconnect)
+      this.socket.io.on('reconnect', this.reconnect)
-      this.socket.on('reconnect_error', this.reconnectError)
+      this.socket.io.on('reconnect_error', this.reconnectError)
-      this.socket.on('reconnect_failed', this.reconnectFailed)
+      this.socket.io.on('reconnect_failed', this.reconnectFailed)
 
       this.socket.on('init', this.init)
 

client/package.json

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

client/tailwind.config.js

@@ -68,6 +68,9 @@ module.exports = {
         sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
         mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
         book: ['Gentium Book Basic', 'serif']
+      },
+      zIndex: {
+        '50': 50
       }
     }
   },

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1222,9 +1222,9 @@
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
     "njodb": {
-      "version": "0.4.24",
+      "version": "0.4.26",
-      "resolved": "https://registry.npmjs.org/njodb/-/njodb-0.4.24.tgz",
+      "resolved": "https://registry.npmjs.org/njodb/-/njodb-0.4.26.tgz",
-      "integrity": "sha512-d7S5mJJlEwWMhKblOE5BVKLnCubYuwZTLeoVq054GawnrxK3ATwauX/mkOKiZdBjbzrWoHg+dgatUkxoQIUvCA==",
+      "integrity": "sha512-cUEQzZT/jbwK5tBLZM/A4bCsYIB9oqGwfip79NWMMzUi0RBFVccPYGh9gTf2PhcrTn2y1ftbxlV+J/c4s9RR8g==",
       "requires": {
         "proper-lockfile": "^4.1.2"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {
@@ -38,7 +38,7 @@
     "ip": "^1.1.5",
     "jsonwebtoken": "^8.5.1",
     "libgen": "^2.1.0",
-    "njodb": "^0.4.24",
+    "njodb": "^0.4.26",
     "node-cron": "^3.0.0",
     "node-stream-zip": "^1.15.0",
     "podcast": "^1.3.0",