Merge branch 'advplyr:master' into stream-sync

components/AudioPlayerMini.vue

@@ -72,7 +72,9 @@ export default {
       bufferTrackWidth: 0,
       playedTrackWidth: 0,
       seekedTime: 0,
-      seekLoading: false
+      seekLoading: false,
+      onPlayingUpdateListener: null,
+      onMetadataListener: null
     }
   },
   computed: {
@@ -308,28 +310,29 @@ export default {
     terminateStream() {
       MyNativeAudio.terminateStream()
     },
+    onPlayingUpdate(data) {
+      this.isPaused = !data.value
+      if (!this.isPaused) {
+        this.startPlayInterval()
+      } else {
+        this.stopPlayInterval()
+      }
+    },
+    onMetadata(data) {
+      console.log('Native Audio On Metadata', JSON.stringify(data))
+      this.totalDuration = Number((data.duration / 1000).toFixed(2))
+      this.currentTime = Number((data.currentTime / 1000).toFixed(2))
+      this.stateName = data.stateName
+
+      if (this.stateName === 'ended' && this.isResetting) {
+        this.setFromObj()
+      }
+
+      this.timeupdate()
+    },
     init() {
-      MyNativeAudio.addListener('onPlayingUpdate', (data) => {
-        this.isPaused = !data.value
-        if (!this.isPaused) {
-          this.startPlayInterval()
-        } else {
-          this.stopPlayInterval()
-        }
-      })
-
-      MyNativeAudio.addListener('onMetadata', (data) => {
-        console.log('Native Audio On Metadata', JSON.stringify(data))
-        this.totalDuration = Number((data.duration / 1000).toFixed(2))
-        this.currentTime = Number((data.currentTime / 1000).toFixed(2))
-        this.stateName = data.stateName
-
-        if (this.stateName === 'ended' && this.isResetting) {
-          this.setFromObj()
-        }
-
-        this.timeupdate()
-      })
+      this.onPlayingUpdateListener = MyNativeAudio.addListener('onPlayingUpdate', this.onPlayingUpdate)
+      this.onMetadataListener = MyNativeAudio.addListener('onMetadata', this.onMetadata)
 
       if (this.$refs.track) {
         this.trackWidth = this.$refs.track.clientWidth
@@ -342,6 +345,8 @@ export default {
     this.$nextTick(this.init)
   },
   beforeDestroy() {
+    if (this.onPlayingUpdateListener) this.onPlayingUpdateListener.remove()
+    if (this.onMetadataListener) this.onMetadataListener.remove()
     clearInterval(this.playInterval)
   }
 }

components/widgets/ConnectionIcon.vue

@@ -69,7 +69,6 @@ export default {
 
       if (!this.networkConnected) return
 
-      this.$server.on('connected', this.socketConnected)
       var localServerUrl = await this.$localStore.getServerUrl()
       var localUserToken = await this.$localStore.getToken()
       if (localServerUrl) {
@@ -78,12 +77,16 @@ export default {
         // Server and Token are stored
         if (localUserToken) {
           this.processing = true
+          var isSocketAlreadyEstablished = this.$server.socket
           var success = await this.$server.connect(localServerUrl, localUserToken)
           if (!success && !this.$server.url) {
             this.processing = false
             this.serverUrl = null
           } else if (!success) {
             this.processing = false
+          } else if (isSocketAlreadyEstablished) {
+            // No need to wait for connect event
+            this.processing = false
           }
         } else {
           // Server only is stored
@@ -97,7 +100,18 @@ export default {
     }
   },
   mounted() {
+    if (!this.$server) {
+      console.error('Server not initalized in connection icon')
+      return
+    }
+    if (this.$server.connected) {
+      this.isConnected = true
+    }
+    this.$server.on('connected', this.socketConnected)
     this.init()
+  },
+  beforeDestroy() {
+    if (this.$server) this.$server.off('connected', this.socketConnected)
   }
 }
 </script>