Add Playlist action

ui/src/album/AlbumActions.js

@@ -8,7 +8,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { playAlbum, shuffleAlbum } from '../audioplayer'
+import { playTracks, shuffleTracks } from '../audioplayer'
 
 const AlbumActions = ({
   className,
@@ -25,7 +25,7 @@ const AlbumActions = ({
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       <Button
         onClick={() => {
-          dispatch(playAlbum(data, ids))
+          dispatch(playTracks(data, ids))
         }}
         label={translate('resources.album.actions.playAll')}
       >
@@ -33,7 +33,7 @@ const AlbumActions = ({
       </Button>
       <Button
         onClick={() => {
-          dispatch(shuffleAlbum(data, ids))
+          dispatch(shuffleTracks(data, ids))
         }}
         label={translate('resources.album.actions.shuffle')}
       >

ui/src/album/AlbumContextMenu.js

@@ -6,7 +6,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDataProvider, useNotify, useTranslate } from 'react-admin'
 import { useDispatch } from 'react-redux'
-import { addTracks, playAlbum, shuffleAlbum } from '../audioplayer'
+import { addTracks, playTracks, shuffleTracks } from '../audioplayer'
 
 const useStyles = makeStyles({
   icon: {
@@ -25,7 +25,7 @@ const AlbumContextMenu = ({ record, color }) => {
   const options = {
     play: {
       label: translate('resources.album.actions.playAll'),
-      action: (data) => playAlbum(data),
+      action: (data) => playTracks(data),
     },
     addToQueue: {
       label: translate('resources.album.actions.addToQueue'),
@@ -33,7 +33,7 @@ const AlbumContextMenu = ({ record, color }) => {
     },
     shuffle: {
       label: translate('resources.album.actions.shuffle'),
-      action: (data) => shuffleAlbum(data),
+      action: (data) => shuffleTracks(data),
     },
   }
 

ui/src/album/AlbumSongs.js

@@ -13,7 +13,7 @@ import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
 import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { playAlbum } from '../audioplayer'
+import { playTracks } from '../audioplayer'
 import { DurationField, SongDetails, SongDatagridRow } from '../common'
 
 const useStyles = makeStyles(
@@ -124,7 +124,7 @@ const AlbumSongs = (props) => {
           ) : (
             <SongsDatagrid
               expand={!isXsmall && <SongDetails />}
-              rowClick={(id) => dispatch(playAlbum(data, ids, id))}
+              rowClick={(id) => dispatch(playTracks(data, ids, id))}
               {...controllerProps}
               hasBulkActions={hasBulkActions}
             >

ui/src/audioplayer/index.js

@@ -3,15 +3,15 @@ import {
   addTracks,
   setTrack,
   playQueueReducer,
-  playAlbum,
-  shuffleAlbum,
+  playTracks,
+  shuffleTracks,
 } from './queue'
 
 export {
   Player,
   addTracks,
   setTrack,
-  playAlbum,
+  playTracks,
   playQueueReducer,
-  shuffleAlbum,
+  shuffleTracks,
 }

ui/src/audioplayer/queue.js

@@ -7,16 +7,19 @@ const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
 const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
 const PLAYER_PLAY_ALBUM = 'PLAYER_PLAY_ALBUM'
 
-const mapToAudioLists = (item) => ({
-  id: item.id,
-  trackId: item.id,
-  name: item.title,
-  singer: item.artist,
-  duration: item.duration,
-  cover: subsonic.url('getCoverArt', item.id, { size: 300 }),
-  musicSrc: subsonic.url('stream', item.id, { ts: true }),
-  scrobbled: false,
-})
+const mapToAudioLists = (item) => {
+  // If item comes from a playlist, id is mediaFileId
+  const id = item.mediaFileId || item.id
+  return {
+    trackId: id,
+    name: item.title,
+    singer: item.artist,
+    duration: item.duration,
+    cover: subsonic.url('getCoverArt', id, { size: 300 }),
+    musicSrc: subsonic.url('stream', id, { ts: true }),
+    scrobbled: false,
+  }
+}
 
 const setTrack = (data) => ({
   type: PLAYER_SET_TRACK,
@@ -49,7 +52,7 @@ const shuffle = (data) => {
   return shuffled
 }
 
-const shuffleAlbum = (data, ids) => {
+const shuffleTracks = (data, ids) => {
   const songs = filterAlbumSongs(data, ids)
   const shuffled = shuffle(songs)
   const firstId = Object.keys(shuffled)[0]
@@ -60,7 +63,7 @@ const shuffleAlbum = (data, ids) => {
   }
 }
 
-const playAlbum = (data, ids, selectedId) => {
+const playTracks = (data, ids, selectedId) => {
   const songs = filterAlbumSongs(data, ids)
   return {
     type: PLAYER_PLAY_ALBUM,
@@ -146,9 +149,9 @@ const playQueueReducer = (
 export {
   addTracks,
   setTrack,
-  playAlbum,
+  playTracks,
   syncQueue,
   scrobble,
-  shuffleAlbum,
+  shuffleTracks,
   playQueueReducer,
 }

ui/src/playlist/PlaylistActions.js

@@ -0,0 +1,42 @@
+import {
+  Button,
+  sanitizeListRestProps,
+  TopToolbar,
+  useTranslate,
+} from 'react-admin'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { playTracks } from '../audioplayer'
+
+const PlaylistActions = ({
+  className,
+  ids,
+  data,
+  exporter,
+  permanentFilter,
+  ...rest
+}) => {
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      <Button
+        onClick={() => {
+          dispatch(playTracks(data))
+        }}
+        label={translate('resources.album.actions.playAll')}
+      >
+        <PlayArrowIcon />
+      </Button>
+    </TopToolbar>
+  )
+}
+
+PlaylistActions.defaultProps = {
+  selectedIds: [],
+  onUnselectItems: () => null,
+}
+
+export default PlaylistActions

ui/src/playlist/PlaylistShow.js

@@ -3,6 +3,7 @@ import { useGetOne } from 'react-admin'
 import PlaylistDetails from './PlaylistDetails'
 import { Title } from '../common'
 import PlaylistSongs from './PlaylistSongs'
+import PlaylistActions from './PlaylistActions'
 
 const PlaylistShow = (props) => {
   const { data: record, loading, error } = useGetOne('playlist', props.id)
@@ -22,7 +23,7 @@ const PlaylistShow = (props) => {
         {...props}
         playlistId={props.id}
         title={<Title subTitle={record.name} />}
-        // actions={<AlbumActions />}
+        actions={<PlaylistActions />}
         filter={{ playlist_id: props.id }}
         resource={'playlistTrack'}
         exporter={false}