Fix:Encode filename for audio player direct plays

client/components/tables/AllFilesTable.vue

@@ -96,12 +96,8 @@ export default {
   },
   methods: {
     getRelativePath(path) {
-      var filePath = path.replace(/\\/g, '/')
-      var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-      return filePath
-        .replace(audiobookPath + '/', '')
-        .replace(/%/g, '%25')
-        .replace(/#/g, '%23')
+      var relativePath = path.replace(/\\/g, '/').replace(this.audiobookPath.replace(/\\/g, '/') + '/', '')
+      return this.$encodeUriPath(relativePath)
     }
   },
   mounted() {}

client/components/tables/OtherFilesTable.vue

@@ -71,15 +71,9 @@ export default {
     },
     otherFilesCleaned() {
       return this.files.map((file) => {
-        var filePath = file.path.replace(/\\/g, '/')
-        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-
         return {
           ...file,
-          relativePath: filePath
-            .replace(audiobookPath + '/', '')
-            .replace(/%/g, '%25')
-            .replace(/#/g, '%23')
+          relativePath: this.getRelativePath(file.path)
         }
       })
     },
@@ -99,6 +93,10 @@ export default {
     },
     clickBar() {
       this.showFiles = !this.showFiles
+    },
+    getRelativePath(path) {
+      var relativePath = path.replace(/\\/g, '/').replace(this.audiobookPath.replace(/\\/g, '/') + '/', '')
+      return this.$encodeUriPath(relativePath)
     }
   },
   mounted() {}

client/components/tables/TracksTable.vue

@@ -75,15 +75,9 @@ export default {
     },
     tracksCleaned() {
       return this.tracks.map((track) => {
-        var trackPath = track.path.replace(/\\/g, '/')
-        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-
         return {
           ...track,
-          relativePath: trackPath
-            .replace(audiobookPath + '/', '')
-            .replace(/%/g, '%25')
-            .replace(/#/g, '%23')
+          relativePath: this.getRelativePath(track.path)
         }
       })
     },
@@ -100,6 +94,10 @@ export default {
   methods: {
     clickBar() {
       this.showTracks = !this.showTracks
+    },
+    getRelativePath(path) {
+      var relativePath = path.replace(/\\/g, '/').replace(this.audiobookPath.replace(/\\/g, '/') + '/', '')
+      return this.$encodeUriPath(relativePath)
     }
   },
   mounted() {}

client/players/PlayerHandler.js

@@ -132,7 +132,7 @@ export default class PlayerHandler {
     var audioTracks = (this.audiobook.tracks || []).map((track) => {
       var audioTrack = new AudioTrack(track)
       audioTrack.startOffset = runningTotal
-      audioTrack.contentUrl = `/lib/${this.audiobook.libraryId}/${this.audiobook.folderId}/${track.path}?token=${this.userToken}`
+      audioTrack.contentUrl = `/lib/${this.audiobook.libraryId}/${this.audiobook.folderId}/${this.ctx.$encodeUriPath(track.path)}?token=${this.userToken}`
       audioTrack.mimeType = this.getMimeTypeForTrack(track)
       audioTrack.canDirectPlay = !!this.player.playableMimetypes[audioTrack.mimeType]
 

client/plugins/init.client.js

@@ -138,6 +138,10 @@ function xmlToJson(xml) {
 }
 Vue.prototype.$xmlToJson = xmlToJson
 
+Vue.prototype.$encodeUriPath = (path) => {
+  return path.replace(/\\/g, '/').replace(/%/g, '%25').replace(/#/g, '%23')
+}
+
 const encode = (text) => encodeURIComponent(Buffer.from(text).toString('base64'))
 Vue.prototype.$encode = encode
 const decode = (text) => Buffer.from(decodeURIComponent(text), 'base64').toString()