Initial work on Shares

ui/src/App.js

@@ -15,6 +15,7 @@ import album from './album'
 import artist from './artist'
 import playlist from './playlist'
 import radio from './radio'
+import share from './share'
 import { Player } from './audioplayer'
 import customRoutes from './routes'
 import {
@@ -31,10 +32,11 @@ import {
 } from './reducers'
 import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
-import config from './config'
+import config, { shareInfo } from './config'
 import { setDispatch, startEventStream, stopEventStream } from './eventStream'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
+import ShareApp from './ShareApp'
 
 const history = createHashHistory()
 
@@ -106,6 +108,7 @@ const Admin = (props) => {
           name="radio"
           {...(permissions === 'admin' ? radio.admin : radio.all)}
         />,
+        config.devEnableShare && <Resource name="share" {...share} />,
         <Resource
           name="playlist"
           {...playlist}
@@ -136,10 +139,15 @@ const Admin = (props) => {
   )
 }
 
-const AppWithHotkeys = () => (
-  <HotKeys keyMap={keyMap}>
-    <App />
-  </HotKeys>
-)
+const AppWithHotkeys = () => {
+  if (config.devEnableShare && shareInfo) {
+    return <ShareApp />
+  }
+  return (
+    <HotKeys keyMap={keyMap}>
+      <App />
+    </HotKeys>
+  )
+}
 
 export default AppWithHotkeys

ui/src/ShareApp.js

@@ -0,0 +1,26 @@
+import ReactJkMusicPlayer from 'navidrome-music-player'
+import config, { shareInfo } from './config'
+import { baseUrl } from './utils'
+
+const ShareApp = (props) => {
+  const list = shareInfo?.tracks.map((s) => {
+    return {
+      name: s.title,
+      musicSrc: baseUrl(config.publicBaseUrl + '/s/' + s.id),
+      cover: baseUrl(config.publicBaseUrl + '/img/' + s.id),
+      singer: s.artist,
+      duration: s.duration,
+    }
+  })
+  const options = {
+    audioLists: list,
+    mode: 'full',
+    mobileMediaQuery: '',
+    showDownload: false,
+    showReload: false,
+    showMediaSession: true,
+  }
+  return <ReactJkMusicPlayer {...options} />
+}
+
+export default ShareApp

ui/src/album/AlbumActions.js

@@ -25,6 +25,9 @@ import { formatBytes } from '../utils'
 import { useMediaQuery, makeStyles } from '@material-ui/core'
 import config from '../config'
 import { ToggleFieldsMenu } from '../common'
+import { useDialog } from '../dialogs/useDialog'
+import { ShareDialog } from '../dialogs/ShareDialog'
+import ShareIcon from '@material-ui/icons/Share'
 
 const useStyles = makeStyles({
   toolbar: { display: 'flex', justifyContent: 'space-between', width: '100%' },
@@ -43,6 +46,7 @@ const AlbumActions = ({
   const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
+  const shareDialog = useDialog()
 
   const handlePlay = React.useCallback(() => {
     dispatch(playTracks(data, ids))
@@ -102,6 +106,14 @@ const AlbumActions = ({
           >
             <PlaylistAddIcon />
           </Button>
+          {config.devEnableShare && (
+            <Button
+              onClick={shareDialog.open}
+              label={translate('resources.album.actions.share')}
+            >
+              <ShareIcon />
+            </Button>
+          )}
           {config.enableDownloads && (
             <Button
               onClick={handleDownload}
@@ -116,6 +128,12 @@ const AlbumActions = ({
         </div>
         <div>{isNotSmall && <ToggleFieldsMenu resource="albumSong" />}</div>
       </div>
+      <ShareDialog
+        {...shareDialog.props}
+        close={shareDialog.close}
+        ids={[record.id]}
+        resource={'album'}
+      />
     </TopToolbar>
   )
 }

ui/src/common/QualityInfo.js

@@ -27,7 +27,7 @@ export const QualityInfo = ({ record, size, gainMode, preAmp, className }) => {
   if (suffix) {
     suffix = suffix.toUpperCase()
     info = suffix
-    if (!llFormats.has(suffix)) {
+    if (!llFormats.has(suffix) && bitRate > 0) {
       info += ' ' + bitRate
     }
   }

ui/src/config.js

@@ -28,6 +28,8 @@ const defaultConfig = {
   enableCoverAnimation: true,
   devShowArtistPage: true,
   enableReplayGain: true,
+  shareBaseUrl: '/s',
+  publicBaseUrl: '/p',
 }
 
 let config
@@ -42,4 +44,12 @@ try {
   config = defaultConfig
 }
 
+export let shareInfo
+
+try {
+  shareInfo = JSON.parse(window.__SHARE_INFO__)
+} catch (e) {
+  shareInfo = null
+}
+
 export default config

ui/src/dialogs/ShareDialog.js

@@ -0,0 +1,134 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core'
+import {
+  SelectInput,
+  SimpleForm,
+  useCreate,
+  useGetList,
+  useNotify,
+} 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 }) => {
+  const notify = useNotify()
+  const [format, setFormat] = useState('')
+  const [maxBitRate, setMaxBitRate] = useState(0)
+  const { data: formats, loading } = useGetList(
+    'transcoding',
+    {
+      page: 1,
+      perPage: 1000,
+    },
+    { field: 'name', order: 'ASC' }
+  )
+
+  const formatOptions = useMemo(
+    () =>
+      loading
+        ? []
+        : Object.values(formats).map((f) => {
+            return { id: f.targetFormat, name: f.targetFormat }
+          }),
+    [formats, loading]
+  )
+
+  const [createShare] = useCreate(
+    'share',
+    {
+      resourceType: resource,
+      resourceIds: ids?.join(','),
+      format,
+      maxBitRate,
+    },
+    {
+      onSuccess: (res) => {
+        const url = shareUrl(res?.data?.id)
+        close()
+        navigator.clipboard
+          .writeText(url)
+          .then(() => {
+            notify(`URL copied to clipboard: ${url}`, {
+              type: 'info',
+              multiLine: true,
+              duration: 0,
+            })
+          })
+          .catch((err) => {
+            notify(`Error copying URL ${url} to clipboard: ${err.message}`, {
+              type: 'warning',
+              multiLine: true,
+              duration: 0,
+            })
+          })
+      },
+      onFailure: (error) =>
+        notify(`Error sharing media: ${error.message}`, { type: 'warning' }),
+    }
+  )
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      onBackdropClick={onClose}
+      aria-labelledby="info-dialog-album"
+      fullWidth={true}
+      maxWidth={'sm'}
+    >
+      <DialogTitle id="info-dialog-album">
+        Create a link to share your music with friends
+      </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)
+            }}
+          />
+        </SimpleForm>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={createShare} color="primary">
+          Share
+        </Button>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

ui/src/dialogs/useDialog.js

@@ -0,0 +1,30 @@
+import { useCallback, useMemo, useState } from 'react'
+
+// Idea from https://blog.bitsrc.io/new-react-design-pattern-return-component-from-hooks-79215c3eac00
+export const useDialog = () => {
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const open = useCallback((event) => {
+    event?.stopPropagation()
+    setAnchorEl(event.currentTarget)
+  }, [])
+
+  const close = useCallback((event) => {
+    event?.stopPropagation()
+    setAnchorEl(null)
+  }, [])
+
+  const props = useMemo(() => {
+    return {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose: close,
+    }
+  }, [anchorEl, close])
+
+  return {
+    open,
+    close,
+    props,
+  }
+}

ui/src/i18n/en.json

@@ -60,6 +60,7 @@
                 "playAll": "Play",
                 "playNext": "Play Next",
                 "addToQueue": "Play Later",
+                "share": "Share",
                 "shuffle": "Shuffle",
                 "addToPlaylist": "Add to Playlist",
                 "download": "Download",
@@ -180,6 +181,24 @@
             "actions": {
                 "playNow": "Play Now"
             }
+        },
+        "share": {
+            "name": "Share |||| Shares",
+            "fields": {
+                "username": "Shared By",
+                "url": "URL",
+                "description": "Description",
+                "contents": "Contents",
+                "expiresAt": "Expires at",
+                "lastVisitedAt": "Last Visited at",
+                "visitCount": "Visits",
+                "updatedAt": "Updated at",
+                "createdAt": "Created at"
+            },
+            "notifications": {
+            },
+            "actions": {
+            }
         }
     },
     "ra": {
@@ -433,4 +452,4 @@
             "toggle_love": "Add this track to favourites"
         }
     }
-}
+}

ui/src/reducers/playerReducer.js

@@ -20,6 +20,9 @@ const initialState = {
   savedPlayIndex: 0,
 }
 
+const timestampRegex =
+  /(\[([0-9]{1,2}:)?([0-9]{1,2}:)([0-9]{1,2})(\.[0-9]{1,2})?\])/g
+
 const mapToAudioLists = (item) => {
   // If item comes from a playlist, trackId is mediaFileId
   const trackId = item.mediaFileId || item.id
@@ -37,8 +40,6 @@ const mapToAudioLists = (item) => {
   }
 
   const { lyrics } = item
-  const timestampRegex =
-    /(\[([0-9]{1,2}:)?([0-9]{1,2}:)([0-9]{1,2})(\.[0-9]{1,2})?\])/g
   return {
     trackId,
     uuid: uuidv4(),

ui/src/share/ShareEdit.js

@@ -0,0 +1,33 @@
+import {
+  DateField,
+  DateInput,
+  Edit,
+  NumberField,
+  SimpleForm,
+  TextInput,
+} from 'react-admin'
+import { shareUrl } from '../utils'
+import { Link } from '@material-ui/core'
+
+export const ShareEdit = (props) => {
+  const { id } = props
+  const url = shareUrl(id)
+  return (
+    <Edit {...props}>
+      <SimpleForm>
+        <Link source="URL" href={url} target="_blank" rel="noopener noreferrer">
+          {url}
+        </Link>
+        <TextInput source="description" />
+        <TextInput source="contents" disabled />
+        <TextInput source="format" disabled />
+        <TextInput source="maxBitRate" disabled />
+        <DateInput source="expiresAt" disabled />
+        <TextInput source="username" disabled />
+        <NumberField source="visitCount" disabled />
+        <DateField source="lastVisitedAt" disabled />
+        <DateField source="createdAt" disabled />
+      </SimpleForm>
+    </Edit>
+  )
+}

ui/src/share/ShareList.js

@@ -0,0 +1,53 @@
+import {
+  Datagrid,
+  FunctionField,
+  List,
+  NumberField,
+  TextField,
+} from 'react-admin'
+import React from 'react'
+import { DateField, QualityInfo } from '../common'
+import { shareUrl } from '../utils'
+import { Link } from '@material-ui/core'
+
+export const FormatInfo = ({ record, size }) => {
+  const r = { suffix: record.format, bitRate: record.maxBitRate }
+  // TODO Get DefaultDownsamplingFormat
+  r.suffix = r.suffix || (r.bitRate ? 'opus' : 'Original')
+  return <QualityInfo record={r} size={size} />
+}
+
+const ShareList = (props) => {
+  return (
+    <List
+      {...props}
+      sort={{ field: 'createdAt', order: 'DESC' }}
+      exporter={false}
+    >
+      <Datagrid rowClick="edit">
+        <FunctionField
+          source={'id'}
+          render={(r) => (
+            <Link
+              href={shareUrl(r.id)}
+              label="URL"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {r.id}
+            </Link>
+          )}
+        />
+        <TextField source="username" />
+        <TextField source="description" />
+        <DateField source="contents" />
+        <FormatInfo source="format" />
+        <NumberField source="visitCount" />
+        <DateField source="expiresAt" showTime />
+        <DateField source="lastVisitedAt" showTime sortByOrder={'DESC'} />
+      </Datagrid>
+    </List>
+  )
+}
+
+export default ShareList

ui/src/share/index.js

@@ -0,0 +1,9 @@
+import ShareList from './ShareList'
+import { ShareEdit } from './ShareEdit'
+import ShareIcon from '@material-ui/icons/Share'
+
+export default {
+  list: ShareList,
+  edit: ShareEdit,
+  icon: <ShareIcon />,
+}

ui/src/subsonic/index.js

@@ -69,8 +69,13 @@ const getAlbumInfo = (id) => {
   return httpClient(url('getAlbumInfo', id))
 }
 
-const streamUrl = (id) => {
-  return baseUrl(url('stream', id, { ts: true }))
+const streamUrl = (id, options) => {
+  return baseUrl(
+    url('stream', id, {
+      ts: true,
+      ...options,
+    })
+  )
 }
 
 export default {

ui/src/utils/index.js

@@ -4,3 +4,4 @@ export * from './formatters'
 export * from './intersperse'
 export * from './notifications'
 export * from './openInNewTab'
+export * from './shareUrl'

ui/src/utils/shareUrl.js

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