Merge pull request #3521 from mikiher/subdirectory-fixes

Fixes and cleanup for subdirectory serving support

client/components/covers/AuthorImage.vue

@@ -56,11 +56,7 @@ export default {
     },
     imgSrc() {
       if (!this.imagePath) return null
-      if (process.env.NODE_ENV !== 'production') {
-        // Testing
-        return `http://localhost:3333${this.$config.routerBasePath}/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
-      }
-      return `/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
+      return `${this.$config.routerBasePath}/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
     }
   },
   methods: {

client/components/modals/ShareModal.vue

@@ -112,11 +112,11 @@ export default {
       return this.$store.state.user.user
     },
     demoShareUrl() {
-      return `${window.origin}/share/${this.newShareSlug}`
+      return `${window.origin}${this.$config.routerBasePath}/share/${this.newShareSlug}`
     },
     currentShareUrl() {
       if (!this.currentShare) return ''
-      return `${window.origin}/share/${this.currentShare.slug}`
+      return `${window.origin}${this.$config.routerBasePath}/share/${this.currentShare.slug}`
     },
     currentShareTimeRemaining() {
       if (!this.currentShare) return 'Error'

client/components/modals/rssfeed/OpenCloseModal.vue

@@ -139,7 +139,7 @@ export default {
         slug: this.newFeedSlug,
         metadataDetails: this.metadataDetails
       }
-      if (this.$isDev) payload.serverAddress = `http://localhost:3333${this.$config.routerBasePath}`
+      if (this.$isDev) payload.serverAddress = process.env.serverUrl
 
       console.log('Payload', payload)
       this.$axios

client/layouts/default.vue

@@ -357,7 +357,8 @@ export default {
         teardown: false,
         transports: ['websocket'],
         upgrade: false,
-        reconnection: true
+        reconnection: true,
+        path: `${this.$config.routerBasePath}/socket.io`
       })
       this.$root.socket = this.socket
       console.log('Socket initialized')

client/nuxt.config.js

@@ -1,19 +1,22 @@
 const pkg = require('./package.json')
 
+const routerBasePath = process.env.ROUTER_BASE_PATH || ''
+const serverHostUrl = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3333'
+
 module.exports = {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
   ssr: false,
   target: 'static',
   dev: process.env.NODE_ENV !== 'production',
   env: {
-    serverUrl: process.env.NODE_ENV === 'production' ? process.env.ROUTER_BASE_PATH || '' : 'http://localhost:3333',
+    serverUrl: serverHostUrl + routerBasePath,
     chromecastReceiver: 'FD1F76C5'
   },
   telemetry: false,
 
   publicRuntimeConfig: {
     version: pkg.version,
-    routerBasePath: process.env.ROUTER_BASE_PATH || ''
+    routerBasePath
   },
 
   // Global page headers: https://go.nuxtjs.dev/config-head
@@ -30,13 +33,13 @@ module.exports = {
     ],
     script: [],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/favicon.ico' },
-      { rel: 'apple-touch-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/ios_icon.png' }
+      { rel: 'icon', type: 'image/x-icon', href: routerBasePath + '/favicon.ico' },
+      { rel: 'apple-touch-icon', href: routerBasePath + '/ios_icon.png' }
     ]
   },
 
   router: {
-    base: process.env.ROUTER_BASE_PATH || ''
+    base: routerBasePath
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
@@ -72,14 +75,15 @@ module.exports = {
   ],
 
   proxy: {
-    '/api/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
-    '/dev/': { target: 'http://localhost:3333', pathRewrite: { '^/dev/': '' } }
+    [`${routerBasePath}/api/`]: { target: process.env.NODE_ENV !== 'production' ? serverHostUrl : '/' },
+    [`${routerBasePath}/public/`]: { target: process.env.NODE_ENV !== 'production' ? serverHostUrl : '/' },
+    [`${routerBasePath}/hls/`]: { target: process.env.NODE_ENV !== 'production' ? serverHostUrl : '/' }
   },
 
   io: {
     sockets: [{
       name: 'dev',
-      url: 'http://localhost:3333'
+      url: serverHostUrl
     },
     {
       name: 'prod'
@@ -88,7 +92,7 @@ module.exports = {
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
-    baseURL: process.env.ROUTER_BASE_PATH || ''
+    baseURL: routerBasePath
   },
 
   // nuxt/pwa https://pwa.nuxtjs.org
@@ -108,11 +112,11 @@ module.exports = {
       background_color: '#232323',
       icons: [
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
+          src: routerBasePath + '/icon.svg',
           sizes: 'any'
         },
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon192.png',
+          src: routerBasePath + '/icon192.png',
           type: 'image/png',
           sizes: 'any'
         }

client/pages/audiobook/_id/chapters.vue

@@ -415,7 +415,7 @@ export default {
       const audioEl = this.audioEl || document.createElement('audio')
       var src = audioTrack.contentUrl + `?token=${this.userToken}`
       if (this.$isDev) {
-        src = `http://localhost:3333${this.$config.routerBasePath}${src}`
+        src = `${process.env.serverUrl}${src}`
       }
 
       audioEl.src = src

client/pages/share/_slug.vue

@@ -61,16 +61,10 @@ export default {
     },
     coverUrl() {
       if (!this.playbackSession.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
-      if (process.env.NODE_ENV === 'development') {
-        return `http://localhost:3333/public/share/${this.mediaItemShare.slug}/cover`
-      }
-      return `/public/share/${this.mediaItemShare.slug}/cover`
+      return `${this.$config.routerBasePath}/public/share/${this.mediaItemShare.slug}/cover`
     },
     audioTracks() {
       return (this.playbackSession.audioTracks || []).map((track) => {
-        if (process.env.NODE_ENV === 'development') {
-          track.contentUrl = `${process.env.serverUrl}${track.contentUrl}`
-        }
         track.relativeContentUrl = track.contentUrl
         return track
       })

client/players/AudioTrack.js

@@ -23,10 +23,6 @@ export default class AudioTrack {
   get relativeContentUrl() {
     if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
 
-    if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
-    }
-
     return this.contentUrl + `?token=${this.userToken}`
   }
 }

client/plugins/axios.js

@@ -13,7 +13,6 @@ export default function ({ $axios, store, $config }) {
     }
 
     if (process.env.NODE_ENV === 'development') {
-      config.url = `/dev${config.url}`
       console.log('Making request to ' + config.url)
     }
   })

client/store/globals.js

@@ -98,12 +98,6 @@ export const getters = {
       const userToken = rootGetters['user/getToken']
       const lastUpdate = libraryItem.updatedAt || Date.now()
       const libraryItemId = libraryItem.libraryItemId || libraryItem.id // Workaround for /users/:id page showing media progress covers
-
-      if (process.env.NODE_ENV !== 'production') {
-        // Testing
-        return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
-      }
-
       return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
     },
   getLibraryItemCoverSrcById:
@@ -112,10 +106,6 @@ export const getters = {
       const placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
       if (!libraryItemId) return placeholder
       const userToken = rootGetters['user/getToken']
-      if (process.env.NODE_ENV !== 'production') {
-        // Testing
-        return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
-      }
       return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
     },
   getIsBatchSelectingMediaItems: (state) => {