Fix:Socket reconnection on disconnect, Add:Connection indicator icon showing socket/cellular

components/app/Appbar.vue

@@ -13,20 +13,23 @@
           <p class="text-base font-book leading-4 ml-2 mt-0.5">{{ currentLibraryName }}</p>
         </div>
       </div>
+
+      <widgets-connection-indicator />
+
       <div class="flex-grow" />
 
       <widgets-download-progress-indicator />
 
       <!-- Must be connected to a server to cast, only supports media items on server -->
       <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer mt-1.5">
-        <span class="material-icons" :class="isCasting ? 'text-success' : ''" style="font-size: 1.6rem" @click="castClick">cast</span>
+        <span class="material-icons text-2xl" :class="isCasting ? 'text-success' : ''" @click="castClick">cast</span>
       </div>
 
-      <nuxt-link v-if="user" class="h-7 mx-2" to="/search">
+      <nuxt-link v-if="user" class="h-7 mx-1.5" to="/search">
         <span class="material-icons" style="font-size: 1.75rem">search</span>
       </nuxt-link>
 
-      <div class="h-7 mx-2">
+      <div class="h-7 mx-1.5">
         <span class="material-icons" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
       </div>
     </div>

components/app/AudioPlayer.vue

@@ -523,7 +523,6 @@ export default {
         var data = await AbsAudioPlayer.getCurrentTime()
         this.currentTime = Number(data.value.toFixed(2))
         this.bufferedTime = Number(data.bufferedTime.toFixed(2))
-        console.log('[AudioPlayer] Got Current Time', this.currentTime)
         this.timeupdate()
       }, 1000)
     },

components/app/SideDrawer.vue

@@ -19,7 +19,7 @@
       </div>
       <div class="absolute bottom-0 left-0 w-full py-6 px-6 text-gray-300">
         <div v-if="serverConnectionConfig" class="mb-4 flex justify-center">
-          <p class="text-xs" style="word-break: break-word">{{ serverConnectionConfig.address }} (v{{ serverSettings.version }})</p>
+          <p class="text-xs text-gray-400" style="word-break: break-word">{{ serverConnectionConfig.address }} (v{{ serverSettings.version }})</p>
         </div>
         <div class="flex items-center">
           <p class="text-xs">{{ $config.version }}</p>

components/widgets/ConnectionIndicator.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="icon" class="flex h-full items-center px-2">
+    <span class="material-icons-outlined text-lg" :class="iconClass" @click="showAlertDialog">{{ icon }}</span>
+  </div>
+</template>
+
+<script>
+import { Dialog } from '@capacitor/dialog'
+
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    user() {
+      return this.$store.state.user.user
+    },
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
+    networkConnected() {
+      return this.$store.state.networkConnected
+    },
+    networkConnectionType() {
+      return this.$store.state.networkConnectionType
+    },
+    isCellular() {
+      return this.networkConnectionType === 'cellular'
+    },
+    icon() {
+      if (!this.networkConnected) {
+        return 'wifi_off'
+      } else if (!this.socketConnected) {
+        return 'cloud_off'
+      } else if (this.user) {
+        if (this.isCellular) {
+          return 'signal_cellular_alt'
+        } else {
+          return 'cloud_done'
+        }
+      } else {
+        return null
+      }
+    },
+    iconClass() {
+      if (!this.networkConnected) return 'text-error'
+      else if (!this.socketConnected) return 'text-warning'
+      else if (this.isCellular) return 'text-gray-200'
+      else return 'text-success'
+    }
+  },
+  methods: {
+    showAlertDialog() {
+      var msg = ''
+      if (!this.networkConnected) {
+        msg = 'No internet'
+      } else if (!this.socketConnected) {
+        msg = 'Socket not connected'
+      } else if (this.isCellular) {
+        msg = 'Socket connected over cellular'
+      } else {
+        msg = 'Socket connected over wifi'
+      }
+      Dialog.alert({
+        title: 'Connection Status',
+        message: msg
+      })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

ios/App/Podfile

@@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorDialog', :path => '..\..\node_modules\@capacitor\dialog'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorNetwork', :path => '..\..\node_modules\@capacitor\network'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'
 end
 
 target 'App' do

layouts/default.vue

@@ -154,9 +154,6 @@ export default {
       // Only cancels stream if streamining not playing downloaded
       this.$eventBus.$emit('close-stream')
     },
-    socketConnectionUpdate(isConnected) {
-      console.log('Socket connection update', isConnected)
-    },
     socketConnectionFailed(err) {
       this.$toast.error('Socket connection error: ' + err.message)
     },
@@ -253,7 +250,6 @@ export default {
     }
   },
   async mounted() {
-    this.$socket.on('connection-update', this.socketConnectionUpdate)
     this.$socket.on('initialized', this.socketInit)
     this.$socket.on('user_updated', this.userUpdated)
     this.$socket.on('user_media_progress_updated', this.userMediaProgressUpdated)
@@ -282,7 +278,6 @@ export default {
     }
   },
   beforeDestroy() {
-    this.$socket.off('connection-update', this.socketConnectionUpdate)
     this.$socket.off('initialized', this.socketInit)
     this.$socket.off('user_updated', this.userUpdated)
     this.$socket.off('user_media_progress_updated', this.userMediaProgressUpdated)

plugins/server.js

@@ -39,6 +39,7 @@ class ServerSocket extends EventEmitter {
 
   logout() {
     if (this.socket) this.socket.disconnect()
+    this.removeListeners()
   }
 
   setSocketListeners() {
@@ -54,6 +55,14 @@ class ServerSocket extends EventEmitter {
     // })
   }
 
+  removeListeners() {
+    if (!this.socket) return
+    this.socket.removeAllListeners()
+    if (this.socket.io && this.socket.io.removeAllListeners) {
+      this.socket.io.removeAllListeners()
+    }
+  }
+
   onConnect() {
     console.log('[SOCKET] Socket Connected ' + this.socket.id)
     this.connected = true
@@ -67,11 +76,6 @@ class ServerSocket extends EventEmitter {
     this.connected = false
     this.$store.commit('setSocketConnected', false)
     this.emit('connection-update', false)
-
-    this.socket.removeAllListeners()
-    if (this.socket.io && this.socket.io.removeAllListeners) {
-      this.socket.io.removeAllListeners()
-    }
   }
 
   onInit(data) {