Add download button in the SharePlayer

ui/src/App.js

@@ -37,7 +37,7 @@ import config, { shareInfo } from './config'
 import { setDispatch, startEventStream, stopEventStream } from './eventStream'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
-import SharePlayer from './SharePlayer'
+import SharePlayer from './share/SharePlayer'
 
 const history = createHashHistory()
 

ui/src/share/SharePlayer.js

@@ -1,6 +1,6 @@
 import ReactJkMusicPlayer from 'navidrome-music-player'
-import { shareInfo } from './config'
-import { shareCoverUrl, shareStreamUrl } from './utils'
+import { shareInfo } from '../config'
+import { shareCoverUrl, shareDownloadUrl, shareStreamUrl } from '../utils'
 
 import { makeStyles } from '@material-ui/core/styles'
 
@@ -34,12 +34,17 @@ const SharePlayer = () => {
       duration: s.duration,
     }
   })
+  const onBeforeAudioDownload = () => {
+    return Promise.resolve({
+      src: shareDownloadUrl(shareInfo?.id),
+    })
+  }
   const options = {
     audioLists: list,
     mode: 'full',
     toggleMode: false,
     mobileMediaQuery: '',
-    showDownload: false,
+    showDownload: shareInfo?.downloadable,
     showReload: false,
     showMediaSession: true,
     theme: 'auto',
@@ -49,7 +54,13 @@ const SharePlayer = () => {
     spaceBar: true,
     volumeFade: { fadeIn: 200, fadeOut: 200 },
   }
-  return <ReactJkMusicPlayer {...options} className={classes.player} />
+  return (
+    <ReactJkMusicPlayer
+      {...options}
+      className={classes.player}
+      onBeforeAudioDownload={onBeforeAudioDownload}
+    />
+  )
 }
 
 export default SharePlayer

ui/src/utils/urls.js

@@ -19,6 +19,10 @@ export const shareStreamUrl = (id) => {
   return baseUrl(config.publicBaseUrl + '/s/' + id)
 }
 
+export const shareDownloadUrl = (id) => {
+  return baseUrl(config.publicBaseUrl + '/d/' + id)
+}
+
 export const shareCoverUrl = (id) => {
   return baseUrl(config.publicBaseUrl + '/img/' + id + '?size=300')
 }