Enable transcoding of downlods (#1667)

* feat(download): Enable transcoding of downlods - #573

Signed-off-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com>

* feat(download): Make automatic transcoding of downloads optional

Signed-off-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com>

* Fix spelling

* address changes

* prettier

* fix config

* use previous name

Signed-off-by: Kendall Garner <17521368+kgarner7@users.noreply.github.com>

ui/src/App.js

@@ -25,6 +25,7 @@ import {
   albumViewReducer,
   activityReducer,
   settingsReducer,
+  downloadMenuDialogReducer,
 } from './reducers'
 import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
@@ -52,6 +53,7 @@ const adminStore = createAdminStore({
     albumView: albumViewReducer,
     theme: themeReducer,
     addToPlaylistDialog: addToPlaylistDialogReducer,
+    downloadMenuDialog: downloadMenuDialogReducer,
     expandInfoDialog: expandInfoDialogReducer,
     listenBrainzTokenDialog: listenBrainzTokenDialogReducer,
     activity: activityReducer,

ui/src/actions/dialogs.js

@@ -1,11 +1,17 @@
 export const ADD_TO_PLAYLIST_OPEN = 'ADD_TO_PLAYLIST_OPEN'
 export const ADD_TO_PLAYLIST_CLOSE = 'ADD_TO_PLAYLIST_CLOSE'
+export const DOWNLOAD_MENU_OPEN = 'DOWNLOAD_MENU_OPEN'
+export const DOWNLOAD_MENU_CLOSE = 'DOWNLOAD_MENU_CLOSE'
 export const DUPLICATE_SONG_WARNING_OPEN = 'DUPLICATE_SONG_WARNING_OPEN'
 export const DUPLICATE_SONG_WARNING_CLOSE = 'DUPLICATE_SONG_WARNING_CLOSE'
 export const EXTENDED_INFO_OPEN = 'EXTENDED_INFO_OPEN'
 export const EXTENDED_INFO_CLOSE = 'EXTENDED_INFO_CLOSE'
 export const LISTENBRAINZ_TOKEN_OPEN = 'LISTENBRAINZ_TOKEN_OPEN'
 export const LISTENBRAINZ_TOKEN_CLOSE = 'LISTENBRAINZ_TOKEN_CLOSE'
+export const DOWNLOAD_MENU_ALBUM = 'album'
+export const DOWNLOAD_MENU_ARTIST = 'artist'
+export const DOWNLOAD_MENU_PLAY = 'playlist'
+export const DOWNLOAD_MENU_SONG = 'song'
 
 export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
   type: ADD_TO_PLAYLIST_OPEN,
@@ -17,6 +23,18 @@ export const closeAddToPlaylist = () => ({
   type: ADD_TO_PLAYLIST_CLOSE,
 })
 
+export const openDownloadMenu = (record, recordType) => {
+  return {
+    type: DOWNLOAD_MENU_OPEN,
+    recordType,
+    record,
+  }
+}
+
+export const closeDownloadMenu = () => ({
+  type: DOWNLOAD_MENU_CLOSE,
+})
+
 export const openDuplicateSongWarning = (duplicateIds) => ({
   type: DUPLICATE_SONG_WARNING_OPEN,
   duplicateIds,

ui/src/album/AlbumActions.js

@@ -18,8 +18,9 @@ import {
   playTracks,
   shuffleTracks,
   openAddToPlaylist,
+  openDownloadMenu,
+  DOWNLOAD_MENU_ALBUM,
 } from '../actions'
-import subsonic from '../subsonic'
 import { formatBytes } from '../utils'
 import { useMediaQuery, makeStyles } from '@material-ui/core'
 import config from '../config'
@@ -64,8 +65,8 @@ const AlbumActions = ({
   }, [dispatch, ids])
 
   const handleDownload = React.useCallback(() => {
-    subsonic.download(record.id)
-  }, [record])
+    dispatch(openDownloadMenu(record, DOWNLOAD_MENU_ALBUM))
+  }, [dispatch, record])
 
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>

ui/src/album/AlbumList.js

@@ -28,6 +28,7 @@ import { AddToPlaylistDialog } from '../dialogs'
 import albumLists, { defaultAlbumList } from './albumLists'
 import config from '../config'
 import AlbumInfo from './AlbumInfo'
+import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const AlbumFilter = (props) => {
@@ -132,6 +133,7 @@ const AlbumList = (props) => {
         )}
       </List>
       <AddToPlaylistDialog />
+      <DownloadMenuDialog />
       <ExpandInfoDialog content={<AlbumInfo />} />
     </>
   )

ui/src/album/AlbumSongs.js

@@ -29,6 +29,7 @@ import {
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
 import config from '../config'
+import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
@@ -187,6 +188,7 @@ const AlbumSongs = (props) => {
         </Card>
       </div>
       <AddToPlaylistDialog />
+      <DownloadMenuDialog />
       <ExpandInfoDialog content={<SongInfo />} />
     </>
   )

ui/src/artist/ArtistList.js

@@ -31,6 +31,7 @@ import {
 import config from '../config'
 import ArtistListActions from './ArtistListActions'
 import { DraggableTypes } from '../consts'
+import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -173,6 +174,7 @@ const ArtistList = (props) => {
         <ArtistListView {...props} />
       </List>
       <AddToPlaylistDialog />
+      <DownloadMenuDialog />
     </>
   )
 }

ui/src/common/ContextMenus.js

@@ -14,9 +14,11 @@ import {
   playTracks,
   shuffleTracks,
   openAddToPlaylist,
+  openDownloadMenu,
   openExtendedInfoDialog,
+  DOWNLOAD_MENU_ALBUM,
+  DOWNLOAD_MENU_ARTIST,
 } from '../actions'
-import subsonic from '../subsonic'
 import { LoveButton } from './LoveButton'
 import config from '../config'
 import { formatBytes } from '../utils'
@@ -83,7 +85,16 @@ const ContextMenu = ({
       label: `${translate('resources.album.actions.download')} (${formatBytes(
         record.size
       )})`,
-      action: () => subsonic.download(record.id),
+      action: () => {
+        dispatch(
+          openDownloadMenu(
+            record,
+            record.duration !== undefined
+              ? DOWNLOAD_MENU_ALBUM
+              : DOWNLOAD_MENU_ARTIST
+          )
+        )
+      },
     },
     ...(!hideInfo && {
       info: {

ui/src/common/SongContextMenu.js

@@ -12,8 +12,9 @@ import {
   setTrack,
   openAddToPlaylist,
   openExtendedInfoDialog,
+  openDownloadMenu,
+  DOWNLOAD_MENU_SONG,
 } from '../actions'
-import subsonic from '../subsonic'
 import { LoveButton } from './LoveButton'
 import config from '../config'
 import { formatBytes } from '../utils'
@@ -67,7 +68,9 @@ export const SongContextMenu = ({
       label: `${translate('resources.song.actions.download')} (${formatBytes(
         record.size
       )})`,
-      action: (record) => subsonic.download(record.mediaFileId || record.id),
+      action: (record) => {
+        dispatch(openDownloadMenu(record, DOWNLOAD_MENU_SONG))
+      },
     },
     info: {
       enabled: true,

ui/src/dialogs/DownloadMenuDialog.js

@@ -0,0 +1,173 @@
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { ReferenceManyField, useTranslate } from 'react-admin'
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  FormGroup,
+  MenuItem,
+  Switch,
+  TextField,
+} from '@material-ui/core'
+import subsonic from '../subsonic'
+import { closeDownloadMenu } from '../actions'
+import { formatBytes } from '../utils'
+
+const DownloadTranscodings = (props) => {
+  const translate = useTranslate()
+
+  return (
+    <>
+      <TextField
+        fullWidth
+        id="downloadFormat"
+        select
+        label={translate('resources.transcoding.fields.targetFormat')}
+        onChange={(e) => props.onChange(e.target.value)}
+        value={props.value}
+      >
+        {Object.values(props.data).map((transcoding) => (
+          <MenuItem key={transcoding.id} value={transcoding.targetFormat}>
+            {transcoding.name}
+          </MenuItem>
+        ))}
+      </TextField>
+    </>
+  )
+}
+
+const DownloadMenuDialog = () => {
+  const { open, record, recordType } = useSelector(
+    (state) => state.downloadMenuDialog
+  )
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+
+  const [originalFormat, setUseOriginalFormat] = useState(true)
+  const [targetFormat, setTargetFormat] = useState('')
+  const [targetRate, setTargetRate] = useState(0)
+
+  const handleClose = (e) => {
+    dispatch(closeDownloadMenu())
+    e.stopPropagation()
+  }
+
+  const handleDownload = (e) => {
+    if (record) {
+      subsonic.download(
+        record.id,
+        originalFormat ? 'raw' : targetFormat,
+        targetRate
+      )
+      dispatch(closeDownloadMenu())
+    }
+    e.stopPropagation()
+  }
+
+  const handleOriginal = (e) => {
+    const original = e.target.checked
+
+    setUseOriginalFormat(original)
+
+    if (original) {
+      setTargetFormat('')
+      setTargetRate(0)
+    }
+  }
+
+  const type = recordType
+    ? translate(`resources.${recordType}.name`, {
+        smart_count: 1,
+      }).toLocaleLowerCase()
+    : ''
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        onBackdropClick={handleClose}
+        aria-labelledby="download-dialog"
+        fullWidth={true}
+        maxWidth={'sm'}
+      >
+        <DialogTitle id="download-dialog">
+          {record &&
+            `${translate('resources.album.actions.download')} ${type} ${
+              record.name || record.title
+            } (${formatBytes(record.size)})`}
+        </DialogTitle>
+        <DialogContent>
+          <Box
+            component="form"
+            sx={{
+              '& .MuiTextField-root': { m: 1, width: '25ch' },
+            }}
+          >
+            <div>
+              <FormGroup>
+                <FormControlLabel
+                  control={<Switch checked={originalFormat} />}
+                  label={translate('message.originalFormat')}
+                  onChange={handleOriginal}
+                />
+              </FormGroup>
+              {!originalFormat && (
+                <>
+                  <ReferenceManyField
+                    fullWidth
+                    source=""
+                    target="name"
+                    reference="transcoding"
+                    sort={{ field: 'name', order: 'ASC' }}
+                  >
+                    <DownloadTranscodings
+                      onChange={setTargetFormat}
+                      value={targetFormat}
+                    />
+                  </ReferenceManyField>
+                  <TextField
+                    fullWidth
+                    id="downloadRate"
+                    select
+                    label={translate('resources.player.fields.maxBitRate')}
+                    value={targetRate}
+                    onChange={(e) => setTargetRate(e.target.value)}
+                  >
+                    <MenuItem value={0}>-</MenuItem>
+                    {[32, 48, 64, 80, 96, 112, 128, 160, 192, 256, 320].map(
+                      (bits) => (
+                        <MenuItem key={bits} value={bits}>
+                          {bits}
+                        </MenuItem>
+                      )
+                    )}
+                  </TextField>
+                </>
+              )}
+            </div>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={handleDownload}
+            color="primary"
+            disabled={!originalFormat && !targetFormat}
+          >
+            {translate('resources.album.actions.download')}
+          </Button>
+          <Button onClick={handleClose} color="secondary">
+            {translate('ra.action.close')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default DownloadMenuDialog

ui/src/i18n/en.json

@@ -322,7 +322,8 @@
             "lastfm": "Open in Last.fm",
             "musicbrainz": "Open in MusicBrainz"
         },
-        "lastfmLink": "Read More..."
+        "lastfmLink": "Read More...",
+        "originalFormat": "Download in original format"
     },
     "menu": {
         "library": "Library",

ui/src/playlist/PlaylistActions.js

@@ -14,9 +14,15 @@ import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
 import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
 import QueueMusicIcon from '@material-ui/icons/QueueMusic'
 import { httpClient } from '../dataProvider'
-import { playNext, addTracks, playTracks, shuffleTracks } from '../actions'
+import {
+  playNext,
+  addTracks,
+  playTracks,
+  shuffleTracks,
+  openDownloadMenu,
+  DOWNLOAD_MENU_PLAY,
+} from '../actions'
 import { M3U_MIME_TYPE, REST_URL } from '../consts'
-import subsonic from '../subsonic'
 import PropTypes from 'prop-types'
 import { formatBytes } from '../utils'
 import { useMediaQuery, makeStyles } from '@material-ui/core'
@@ -79,8 +85,8 @@ const PlaylistActions = ({ className, ids, data, record, ...rest }) => {
   }, [getAllSongsAndDispatch])
 
   const handleDownload = React.useCallback(() => {
-    subsonic.download(record.id)
-  }, [record])
+    dispatch(openDownloadMenu(record, DOWNLOAD_MENU_PLAY))
+  }, [dispatch, record])
 
   const handleExport = React.useCallback(
     () =>

ui/src/playlist/PlaylistSongs.js

@@ -31,6 +31,7 @@ import { AddToPlaylistDialog } from '../dialogs'
 import { AlbumLinkField } from '../song/AlbumLinkField'
 import { playTracks } from '../actions'
 import PlaylistSongBulkActions from './PlaylistSongBulkActions'
+import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
@@ -214,6 +215,7 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
         </Card>
       </div>
       <AddToPlaylistDialog />
+      <DownloadMenuDialog />
       <ExpandInfoDialog content={<SongInfo />} />
       {React.cloneElement(props.pagination, listContext)}
     </>

ui/src/reducers/dialogReducer.js

@@ -1,6 +1,12 @@
 import {
   ADD_TO_PLAYLIST_CLOSE,
   ADD_TO_PLAYLIST_OPEN,
+  DOWNLOAD_MENU_ALBUM,
+  DOWNLOAD_MENU_ARTIST,
+  DOWNLOAD_MENU_CLOSE,
+  DOWNLOAD_MENU_OPEN,
+  DOWNLOAD_MENU_PLAY,
+  DOWNLOAD_MENU_SONG,
   DUPLICATE_SONG_WARNING_OPEN,
   DUPLICATE_SONG_WARNING_CLOSE,
   EXTENDED_INFO_OPEN,
@@ -40,6 +46,49 @@ export const addToPlaylistDialogReducer = (
   }
 }
 
+export const downloadMenuDialogReducer = (
+  previousState = {
+    open: false,
+  },
+  payload
+) => {
+  const { type } = payload
+  switch (type) {
+    case DOWNLOAD_MENU_OPEN: {
+      switch (payload.recordType) {
+        case DOWNLOAD_MENU_ALBUM:
+        case DOWNLOAD_MENU_ARTIST:
+        case DOWNLOAD_MENU_PLAY:
+        case DOWNLOAD_MENU_SONG: {
+          return {
+            ...previousState,
+            open: true,
+            record: payload.record,
+            recordType: payload.recordType,
+          }
+        }
+        default: {
+          return {
+            ...previousState,
+            open: true,
+            record: payload.record,
+            recordType: undefined,
+          }
+        }
+      }
+    }
+    case DOWNLOAD_MENU_CLOSE: {
+      return {
+        ...previousState,
+        open: false,
+        recordType: undefined,
+      }
+    }
+    default:
+      return previousState
+  }
+}
+
 export const expandInfoDialogReducer = (
   previousState = {
     open: false,

ui/src/song/SongList.js

@@ -34,6 +34,7 @@ import { AlbumLinkField } from './AlbumLinkField'
 import { AddToPlaylistDialog } from '../dialogs'
 import { SongBulkActions, QualityInfo, useSelectedFields } from '../common'
 import config from '../config'
+import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles({
@@ -194,6 +195,7 @@ const SongList = (props) => {
         )}
       </List>
       <AddToPlaylistDialog />
+      <DownloadMenuDialog />
       <ExpandInfoDialog content={<SongInfo />} />
     </>
   )

ui/src/subsonic/index.js

@@ -38,7 +38,8 @@ const unstar = (id) => httpClient(url('unstar', id))
 
 const setRating = (id, rating) => httpClient(url('setRating', id, { rating }))
 
-const download = (id) => (window.location.href = baseUrl(url('download', id)))
+const download = (id, format = 'raw', bitrate = '0') =>
+  (window.location.href = baseUrl(url('download', id, { format, bitrate })))
 
 const startScan = (options) => httpClient(url('startScan', null, options))