Make the UI use the new ShareURL option

server/serve_index.go

@@ -59,6 +59,7 @@ func serveIndex(ds model.DataStore, fs fs.FS, shareInfo *model.Share) http.Handl
 			"devActivityPanel":          conf.Server.DevActivityPanel,
 			"enableUserEditing":         conf.Server.EnableUserEditing,
 			"enableSharing":             conf.Server.EnableSharing,
+			"shareURL":                  conf.Server.ShareURL,
 			"defaultDownloadableShare":  conf.Server.DefaultDownloadableShare,
 			"devSidebarPlaylists":       conf.Server.DevSidebarPlaylists,
 			"lastFMEnabled":             conf.Server.LastFM.Enabled,

ui/src/config.js

@@ -22,6 +22,7 @@ const defaultConfig = {
   defaultUIVolume: 100,
   enableUserEditing: true,
   enableSharing: true,
+  shareURL: 'http://127.0.0.1:4533',
   defaultDownloadableShare: true,
   devSidebarPlaylists: true,
   lastFMEnabled: true,

ui/src/dialogs/ShareDialog.js

@@ -14,7 +14,7 @@ import {
   useTranslate,
 } from 'react-admin'
 import { useEffect, useState } from 'react'
-import { shareUrl } from '../utils'
+import { sharePlayerUrl } from '../utils'
 import { useTranscodingOptions } from './useTranscodingOptions'
 import { useDispatch, useSelector } from 'react-redux'
 import { closeShareMenu } from '../actions'
@@ -52,7 +52,7 @@ export const ShareDialog = () => {
     },
     {
       onSuccess: (res) => {
-        const url = shareUrl(res?.data?.id)
+        const url = sharePlayerUrl(res?.data?.id)
         if (navigator.clipboard && window.isSecureContext) {
           navigator.clipboard
             .writeText(url)

ui/src/share/ShareEdit.js

@@ -6,14 +6,14 @@ import {
   SimpleForm,
   TextInput,
 } from 'react-admin'
-import { shareUrl } from '../utils'
+import { sharePlayerUrl } from '../utils'
 import { Link } from '@material-ui/core'
 import { DateField } from '../common'
 import config from '../config'
 
 export const ShareEdit = (props) => {
   const { id, basePath, hasCreate, ...rest } = props
-  const url = shareUrl(id)
+  const url = sharePlayerUrl(id)
   return (
     <Edit {...props}>
       <SimpleForm {...rest}>

ui/src/share/ShareList.js

@@ -13,7 +13,7 @@ import React from 'react'
 import { IconButton, Link, useMediaQuery } from '@material-ui/core'
 import ShareIcon from '@material-ui/icons/Share'
 import { DateField, QualityInfo } from '../common'
-import { shareUrl } from '../utils'
+import { sharePlayerUrl } from '../utils'
 import config from '../config'
 
 export const FormatInfo = ({ record, size }) => {
@@ -30,7 +30,7 @@ const ShareList = (props) => {
   const notify = useNotify()
 
   const handleShare = (r) => (e) => {
-    const url = shareUrl(r?.id)
+    const url = sharePlayerUrl(r?.id)
     if (navigator.clipboard && window.isSecureContext) {
       navigator.clipboard
         .writeText(url)
@@ -89,7 +89,7 @@ const ShareList = (props) => {
             source={'id'}
             render={(r) => (
               <Link
-                href={shareUrl(r.id)}
+                href={sharePlayerUrl(r.id)}
                 label="URL"
                 target="_blank"
                 rel="noopener noreferrer"

ui/src/share/SharePlayer.js

@@ -39,6 +39,7 @@ const SharePlayer = () => {
       src: shareDownloadUrl(shareInfo?.id),
     })
   }
+  console.log(list)
   const options = {
     audioLists: list,
     mode: 'full',

ui/src/utils/urls.js

@@ -7,24 +7,34 @@ export const baseUrl = (path) => {
   return parts.join('/')
 }
 
-export const shareUrl = (id) => {
+export const shareUrl = (path) => {
+  if (config.shareURL !== '') {
+    const base = config.shareURL || ''
+    const parts = [base]
+    parts.push(path.replace(/^\//, ''))
+    return parts.join('/')
+  }
+  return baseUrl(path)
+}
+
+export const sharePlayerUrl = (id) => {
   const url = new URL(
-    baseUrl(config.publicBaseUrl + '/' + id),
+    shareUrl(config.publicBaseUrl + '/' + id),
     window.location.href,
   )
   return url.href
 }
 
 export const shareStreamUrl = (id) => {
-  return baseUrl(config.publicBaseUrl + '/s/' + id)
+  return shareUrl(config.publicBaseUrl + '/s/' + id)
 }
 
 export const shareDownloadUrl = (id) => {
-  return baseUrl(config.publicBaseUrl + '/d/' + id)
+  return shareUrl(config.publicBaseUrl + '/d/' + id)
 }
 
 export const shareCoverUrl = (id) => {
-  return baseUrl(config.publicBaseUrl + '/img/' + id + '?size=300')
+  return shareUrl(config.publicBaseUrl + '/img/' + id + '?size=300')
 }
 
 export const docsUrl = (path) => `https://www.navidrome.org${path}`