Fix plugin listener handlers, add message for configs using old server auth, show server version on account page

components/app/Appbar.vue

@@ -100,14 +100,14 @@ export default {
       this.isCastAvailable = data && data.value
     }
   },
-  mounted() {
+  async mounted() {
     AbsAudioPlayer.getIsCastAvailable().then((data) => {
       this.isCastAvailable = data && data.value
     })
-    this.onCastAvailableUpdateListener = AbsAudioPlayer.addListener('onCastAvailableUpdate', this.onCastAvailableUpdate)
+    this.onCastAvailableUpdateListener = await AbsAudioPlayer.addListener('onCastAvailableUpdate', this.onCastAvailableUpdate)
   },
   beforeDestroy() {
-    if (this.onCastAvailableUpdateListener) this.onCastAvailableUpdateListener.remove()
+    this.onCastAvailableUpdateListener?.remove()
   }
 }
 </script>

components/app/AudioPlayer.vue

@@ -140,13 +140,6 @@ export default {
       readyTrackWidth: 0,
       seekedTime: 0,
       seekLoading: false,
-      onPlaybackSessionListener: null,
-      onPlaybackClosedListener: null,
-      onPlayingUpdateListener: null,
-      onMetadataListener: null,
-      onProgressSyncFailing: null,
-      onProgressSyncSuccess: null,
-      onPlaybackSpeedChangedListener: null,
       touchStartY: 0,
       touchStartTime: 0,
       playerSettings: {
@@ -883,14 +876,14 @@ export default {
     async init() {
       await this.loadPlayerSettings()
 
-      this.onPlaybackSessionListener = AbsAudioPlayer.addListener('onPlaybackSession', this.onPlaybackSession)
-      this.onPlaybackClosedListener = AbsAudioPlayer.addListener('onPlaybackClosed', this.onPlaybackClosed)
-      this.onPlaybackFailedListener = AbsAudioPlayer.addListener('onPlaybackFailed', this.onPlaybackFailed)
-      this.onPlayingUpdateListener = AbsAudioPlayer.addListener('onPlayingUpdate', this.onPlayingUpdate)
-      this.onMetadataListener = AbsAudioPlayer.addListener('onMetadata', this.onMetadata)
-      this.onProgressSyncFailing = AbsAudioPlayer.addListener('onProgressSyncFailing', this.showProgressSyncIsFailing)
-      this.onProgressSyncSuccess = AbsAudioPlayer.addListener('onProgressSyncSuccess', this.showProgressSyncSuccess)
-      this.onPlaybackSpeedChangedListener = AbsAudioPlayer.addListener('onPlaybackSpeedChanged', this.onPlaybackSpeedChanged)
+      AbsAudioPlayer.addListener('onPlaybackSession', this.onPlaybackSession)
+      AbsAudioPlayer.addListener('onPlaybackClosed', this.onPlaybackClosed)
+      AbsAudioPlayer.addListener('onPlaybackFailed', this.onPlaybackFailed)
+      AbsAudioPlayer.addListener('onPlayingUpdate', this.onPlayingUpdate)
+      AbsAudioPlayer.addListener('onMetadata', this.onMetadata)
+      AbsAudioPlayer.addListener('onProgressSyncFailing', this.showProgressSyncIsFailing)
+      AbsAudioPlayer.addListener('onProgressSyncSuccess', this.showProgressSyncSuccess)
+      AbsAudioPlayer.addListener('onPlaybackSpeedChanged', this.onPlaybackSpeedChanged)
     },
     async screenOrientationChange() {
       if (this.isRefreshingUI) return
@@ -984,14 +977,9 @@ export default {
     document.body.removeEventListener('touchend', this.touchend)
     document.body.removeEventListener('touchmove', this.touchmove)
 
-    if (this.onPlayingUpdateListener) this.onPlayingUpdateListener.remove()
-    if (this.onMetadataListener) this.onMetadataListener.remove()
-    if (this.onPlaybackSessionListener) this.onPlaybackSessionListener.remove()
-    if (this.onPlaybackClosedListener) this.onPlaybackClosedListener.remove()
-    if (this.onPlaybackFailedListener) this.onPlaybackFailedListener.remove()
-    if (this.onProgressSyncFailing) this.onProgressSyncFailing.remove()
-    if (this.onProgressSyncSuccess) this.onProgressSyncSuccess.remove()
-    if (this.onPlaybackSpeedChangedListener) this.onPlaybackSpeedChangedListener.remove()
+    if (AbsAudioPlayer.removeAllListeners) {
+      AbsAudioPlayer.removeAllListeners()
+    }
     clearInterval(this.playInterval)
   }
 }

components/app/AudioPlayerContainer.vue

@@ -351,11 +351,11 @@ export default {
       }
     }
   },
-  mounted() {
-    this.onLocalMediaProgressUpdateListener = AbsAudioPlayer.addListener('onLocalMediaProgressUpdate', this.onLocalMediaProgressUpdate)
-    this.onSleepTimerEndedListener = AbsAudioPlayer.addListener('onSleepTimerEnded', this.onSleepTimerEnded)
-    this.onSleepTimerSetListener = AbsAudioPlayer.addListener('onSleepTimerSet', this.onSleepTimerSet)
-    this.onMediaPlayerChangedListener = AbsAudioPlayer.addListener('onMediaPlayerChanged', this.onMediaPlayerChanged)
+  async mounted() {
+    this.onLocalMediaProgressUpdateListener = await AbsAudioPlayer.addListener('onLocalMediaProgressUpdate', this.onLocalMediaProgressUpdate)
+    this.onSleepTimerEndedListener = await AbsAudioPlayer.addListener('onSleepTimerEnded', this.onSleepTimerEnded)
+    this.onSleepTimerSetListener = await AbsAudioPlayer.addListener('onSleepTimerSet', this.onSleepTimerSet)
+    this.onMediaPlayerChangedListener = await AbsAudioPlayer.addListener('onMediaPlayerChanged', this.onMediaPlayerChanged)
 
     this.playbackSpeed = this.$store.getters['user/getUserSetting']('playbackRate')
     console.log(`[AudioPlayerContainer] Init Playback Speed: ${this.playbackSpeed}`)
@@ -370,10 +370,10 @@ export default {
     this.$eventBus.$on('device-focus-update', this.deviceFocused)
   },
   beforeDestroy() {
-    if (this.onLocalMediaProgressUpdateListener) this.onLocalMediaProgressUpdateListener.remove()
-    if (this.onSleepTimerEndedListener) this.onSleepTimerEndedListener.remove()
-    if (this.onSleepTimerSetListener) this.onSleepTimerSetListener.remove()
-    if (this.onMediaPlayerChangedListener) this.onMediaPlayerChangedListener.remove()
+    this.onLocalMediaProgressUpdateListener?.remove()
+    this.onSleepTimerEndedListener?.remove()
+    this.onSleepTimerSetListener?.remove()
+    this.onMediaPlayerChangedListener?.remove()
 
     this.$eventBus.$off('abs-ui-ready', this.onReady)
     this.$eventBus.$off('play-item', this.playLibraryItem)

components/connection/ServerConnectForm.vue

@@ -17,6 +17,11 @@
             <p class="text-xs text-warning">{{ $strings.MessageOldServerConnectionWarning }}</p>
             <ui-btn class="text-xs whitespace-nowrap" :padding-x="2" :padding-y="1" @click="showOldUserIdWarningDialog">{{ $strings.LabelMoreInfo }}</ui-btn>
           </div>
+          <!-- warning message if server connection config is using an old auth method -->
+          <div v-if="config.version && checkIsUsingOldAuth(config)" class="flex flex-nowrap justify-between items-center space-x-4 pt-4">
+            <p class="text-xs text-warning">{{ $strings.MessageOldServerAuthWarning }}</p>
+            <ui-btn class="text-xs whitespace-nowrap" :padding-x="2" :padding-y="1" @click="showOldAuthWarningDialog">{{ $strings.LabelMoreInfo }}</ui-btn>
+          </div>
         </div>
         <div class="my-1 py-4 w-full">
           <ui-btn class="w-full" @click="newServerConfigClick">{{ $strings.ButtonAddNewServer }}</ui-btn>
@@ -155,9 +160,20 @@ export default {
         cancelText: this.$strings.ButtonOk
       })
     },
+    showOldAuthWarningDialog() {
+      Dialog.alert({
+        title: 'Old Server Auth Warning',
+        message: this.$strings.MessageOldServerAuthWarningHelp,
+        cancelText: this.$strings.ButtonOk
+      })
+    },
     checkIdUuid(userId) {
       return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(userId)
     },
+    checkIsUsingOldAuth(config) {
+      if (!config.version) return true
+      return !this.$isValidVersion(config.version, '2.26.0')
+    },
     /**
      * Initiates the login process using OpenID via OAuth2.0.
      * 1. Verifying the server's address
@@ -505,7 +521,7 @@ export default {
       try {
         var urlObject = new URL(url)
         if (protocolOverride) urlObject.protocol = protocolOverride
-        return urlObject.href
+        return urlObject.href.replace(/\/$/, '') // Remove trailing slash
       } catch (error) {
         console.error('Invalid URL', error)
         return null
@@ -889,7 +905,7 @@ export default {
       return authRes
     },
     setForceReloginForNewAuth() {
-      this.error = 'A new authentication system was added in server v2.26.0. Re-login is required for this server connection.'
+      this.error = this.$strings.MessageOldServerAuthReLoginRequired
       this.showAuth = true
     },
     init() {

components/readers/ComicReader.vue

@@ -245,6 +245,7 @@ export default {
     async extract() {
       this.loading = true
 
+      // TODO: Handle JWT auth refresh
       const buff = await this.$axios.$get(this.url, {
         responseType: 'blob',
         headers: {

components/readers/MobiReader.vue

@@ -84,6 +84,7 @@ export default {
     },
     async initMobi() {
       // Fetch mobi file as blob
+      // TODO: Handle JWT auth refresh
       var buff = await this.$axios.$get(this.url, {
         responseType: 'blob',
         headers: {

components/widgets/DownloadProgressIndicator.vue

@@ -78,15 +78,15 @@ export default {
       this.$store.commit('globals/updateDownloadItemPart', itemPart)
     }
   },
-  mounted() {
-    this.downloadItemListener = AbsDownloader.addListener('onDownloadItem', (data) => this.onDownloadItem(data))
-    this.itemPartUpdateListener = AbsDownloader.addListener('onDownloadItemPartUpdate', (data) => this.onDownloadItemPartUpdate(data))
-    this.completeListener = AbsDownloader.addListener('onItemDownloadComplete', (data) => this.onItemDownloadComplete(data))
+  async mounted() {
+    this.downloadItemListener = await AbsDownloader.addListener('onDownloadItem', (data) => this.onDownloadItem(data))
+    this.itemPartUpdateListener = await AbsDownloader.addListener('onDownloadItemPartUpdate', (data) => this.onDownloadItemPartUpdate(data))
+    this.completeListener = await AbsDownloader.addListener('onItemDownloadComplete', (data) => this.onItemDownloadComplete(data))
   },
   beforeDestroy() {
-    if (this.downloadItemListener) this.downloadItemListener.remove()
-    if (this.completeListener) this.completeListener.remove()
-    if (this.itemPartUpdateListener) this.itemPartUpdateListener.remove()
+    this.downloadItemListener?.remove()
+    this.completeListener?.remove()
+    this.itemPartUpdateListener?.remove()
   }
 }
 </script>

pages/account.vue

@@ -4,6 +4,10 @@
 
     <ui-text-input-with-label :value="username" :label="$strings.LabelUsername" disabled class="my-2" />
 
+    <div v-if="serverVersion" class="text-sm text-fg">
+      <p>Server version: v{{ serverVersion }}</p>
+    </div>
+
     <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">{{ $strings.ButtonSwitchServerUser }}<span class="material-symbols" style="font-size: 1.1rem">logout</span></ui-btn>
 
     <div class="flex justify-center items-center my-4 left-0 right-0 bottom-0 absolute">
@@ -43,6 +47,10 @@ export default {
     },
     serverAddress() {
       return this.serverConnectionConfig.address
+    },
+    serverVersion() {
+      // Saved in server connection config after 0.9.81
+      return this.serverConnectionConfig.version
     }
   },
   methods: {

pages/media/_id/history.vue

@@ -200,7 +200,7 @@ export default {
     this.onMediaItemHistoryUpdatedListener = await AbsAudioPlayer.addListener('onMediaItemHistoryUpdated', this.onMediaItemHistoryUpdated)
   },
   beforeDestroy() {
-    if (this.onMediaItemHistoryUpdatedListener) this.onMediaItemHistoryUpdatedListener.remove()
+    this.onMediaItemHistoryUpdatedListener?.remove()
   }
 }
 </script>

strings/en-us.json

@@ -325,6 +325,9 @@
   "MessageNoSeries": "No series",
   "MessageNoUpdatesWereNecessary": "No updates were necessary",
   "MessageNoUserPlaylists": "You have no playlists",
+  "MessageOldServerAuthReLoginRequired": "A new authentication system was added in server v2.26.0. Re-login is required for this server connection.",
+  "MessageOldServerAuthWarning": "Server is using out-dated authentication",
+  "MessageOldServerAuthWarningHelp": "Authentication was updated in server v2.26.0 to use a more secure method. A future app update will require server version v2.26.0 or higher. You will need to re-login after updating the server.",
   "MessageOldServerConnectionWarning": "Server connection config is using an old user ID. Please delete and re-add this server connection.",
   "MessageOldServerConnectionWarningHelp": "You originally set up the connection to this server prior to the database migration in 2.3.0, released June 2023. A future server update will remove the ability to sign in with this old connection. Please delete the existing server connection and connect again (using the same server address and credentials). If you have any downloaded media on this device, the media will need to be downloaded again to sync with the server.",
   "MessagePodcastSearchField": "Enter search term or RSS feed URL",