More work on Shares

ui/src/App.js

@@ -36,7 +36,7 @@ import config, { shareInfo } from './config'
 import { setDispatch, startEventStream, stopEventStream } from './eventStream'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
-import ShareApp from './ShareApp'
+import SharePlayer from './SharePlayer'
 
 const history = createHashHistory()
 
@@ -141,7 +141,7 @@ const Admin = (props) => {
 
 const AppWithHotkeys = () => {
   if (config.devEnableShare && shareInfo) {
-    return <ShareApp />
+    return <SharePlayer />
   }
   return (
     <HotKeys keyMap={keyMap}>

ui/src/SharePlayer.js

@@ -2,12 +2,12 @@ import ReactJkMusicPlayer from 'navidrome-music-player'
 import config, { shareInfo } from './config'
 import { baseUrl } from './utils'
 
-const ShareApp = (props) => {
+const SharePlayer = () => {
   const list = shareInfo?.tracks.map((s) => {
     return {
       name: s.title,
       musicSrc: baseUrl(config.publicBaseUrl + '/s/' + s.id),
-      cover: baseUrl(config.publicBaseUrl + '/img/' + s.id),
+      cover: baseUrl(config.publicBaseUrl + '/img/' + s.id + '?size=300'),
       singer: s.artist,
       duration: s.duration,
     }
@@ -19,8 +19,10 @@ const ShareApp = (props) => {
     showDownload: false,
     showReload: false,
     showMediaSession: true,
+    theme: 'auto',
+    showThemeSwitch: false,
   }
   return <ReactJkMusicPlayer {...options} />
 }
 
-export default ShareApp
+export default SharePlayer

ui/src/album/AlbumActions.js

@@ -133,6 +133,7 @@ const AlbumActions = ({
         close={shareDialog.close}
         ids={[record.id]}
         resource={'album'}
+        title={`Share album '${record.name}'`}
       />
     </TopToolbar>
   )
@@ -146,7 +147,6 @@ AlbumActions.propTypes = {
 AlbumActions.defaultProps = {
   record: {},
   selectedIds: [],
-  onUnselectItems: () => null,
 }
 
 export default AlbumActions

ui/src/config.js

@@ -28,7 +28,6 @@ const defaultConfig = {
   enableCoverAnimation: true,
   devShowArtistPage: true,
   enableReplayGain: true,
-  shareBaseUrl: '/s',
   publicBaseUrl: '/p',
 }
 

ui/src/dialogs/ShareDialog.js

@@ -4,6 +4,8 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  FormControlLabel,
+  Switch,
 } from '@material-ui/core'
 import {
   SelectInput,
@@ -14,12 +16,12 @@ import {
 } from 'react-admin'
 import { useMemo, useState } from 'react'
 import { shareUrl } from '../utils'
-import Typography from '@material-ui/core/Typography'
 
-export const ShareDialog = ({ open, close, onClose, ids, resource }) => {
+export const ShareDialog = ({ open, close, onClose, ids, resource, title }) => {
   const notify = useNotify()
   const [format, setFormat] = useState('')
   const [maxBitRate, setMaxBitRate] = useState(0)
+  const [originalFormat, setUseOriginalFormat] = useState(true)
   const { data: formats, loading } = useGetList(
     'transcoding',
     {
@@ -39,6 +41,17 @@ export const ShareDialog = ({ open, close, onClose, ids, resource }) => {
     [formats, loading]
   )
 
+  const handleOriginal = (e) => {
+    const original = e.target.checked
+
+    setUseOriginalFormat(original)
+
+    if (original) {
+      setFormat('')
+      setMaxBitRate(0)
+    }
+  }
+
   const [createShare] = useCreate(
     'share',
     {
@@ -78,47 +91,50 @@ export const ShareDialog = ({ open, close, onClose, ids, resource }) => {
       open={open}
       onClose={onClose}
       onBackdropClick={onClose}
-      aria-labelledby="info-dialog-album"
+      aria-labelledby="share-dialog"
       fullWidth={true}
       maxWidth={'sm'}
     >
-      <DialogTitle id="info-dialog-album">
-        Create a link to share your music with friends
-      </DialogTitle>
+      <DialogTitle id="share-dialog">{title}</DialogTitle>
       <DialogContent>
         <SimpleForm toolbar={null} variant={'outlined'}>
-          <Typography variant="body1">Select transcoding options:</Typography>
-          <Typography variant="caption">
-            (Leave options empty for original quality)
-          </Typography>
-          <SelectInput
-            source="format"
-            choices={formatOptions}
-            resettable
-            onChange={(event) => {
-              setFormat(event.target.value)
-            }}
-          />
-          <SelectInput
-            source="bitrate"
-            choices={[
-              { id: 32, name: '32' },
-              { id: 48, name: '48' },
-              { id: 64, name: '64' },
-              { id: 80, name: '80' },
-              { id: 96, name: '96' },
-              { id: 112, name: '112' },
-              { id: 128, name: '128' },
-              { id: 160, name: '160' },
-              { id: 192, name: '192' },
-              { id: 256, name: '256' },
-              { id: 320, name: '320' },
-            ]}
-            resettable
-            onChange={(event) => {
-              setMaxBitRate(event.target.value)
-            }}
+          <FormControlLabel
+            control={<Switch checked={originalFormat} />}
+            label={'Share in original format'}
+            onChange={handleOriginal}
           />
+          {!originalFormat && (
+            <SelectInput
+              source="format"
+              choices={formatOptions}
+              resettable
+              onChange={(event) => {
+                setFormat(event.target.value)
+              }}
+            />
+          )}
+          {!originalFormat && (
+            <SelectInput
+              source="bitrate"
+              choices={[
+                { id: 32, name: '32' },
+                { id: 48, name: '48' },
+                { id: 64, name: '64' },
+                { id: 80, name: '80' },
+                { id: 96, name: '96' },
+                { id: 112, name: '112' },
+                { id: 128, name: '128' },
+                { id: 160, name: '160' },
+                { id: 192, name: '192' },
+                { id: 256, name: '256' },
+                { id: 320, name: '320' },
+              ]}
+              resettable
+              onChange={(event) => {
+                setMaxBitRate(event.target.value)
+              }}
+            />
+          )}
         </SimpleForm>
       </DialogContent>
       <DialogActions>

ui/src/share/ShareList.js

@@ -33,6 +33,9 @@ const ShareList = (props) => {
               label="URL"
               target="_blank"
               rel="noopener noreferrer"
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
             >
               {r.id}
             </Link>

ui/src/utils/shareUrl.js

@@ -1,6 +1,6 @@
 import config from '../config'
 
 export const shareUrl = (path) => {
-  const url = new URL(config.shareBaseUrl + '/' + path, window.location.href)
+  const url = new URL(config.publicBaseUrl + '/' + path, window.location.href)
   return url.href
 }