From fd49ae319f85e96d2b0cbe12710ec9c4fa825918 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Fri, 15 May 2020 18:53:33 -0400
Subject: [PATCH] Add Playlist action

---
 ui/src/album/AlbumActions.js       |  6 ++---
 ui/src/album/AlbumContextMenu.js   |  6 ++---
 ui/src/album/AlbumSongs.js         |  4 +--
 ui/src/audioplayer/index.js        |  8 +++---
 ui/src/audioplayer/queue.js        | 31 ++++++++++++----------
 ui/src/playlist/PlaylistActions.js | 42 ++++++++++++++++++++++++++++++
 ui/src/playlist/PlaylistShow.js    |  3 ++-
 7 files changed, 73 insertions(+), 27 deletions(-)
 create mode 100644 ui/src/playlist/PlaylistActions.js

diff --git a/ui/src/album/AlbumActions.js b/ui/src/album/AlbumActions.js
index 70cb28d38..60aa07879 100644
--- a/ui/src/album/AlbumActions.js
+++ b/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')}
       >
diff --git a/ui/src/album/AlbumContextMenu.js b/ui/src/album/AlbumContextMenu.js
index 5ff12e513..93a6262ab 100644
--- a/ui/src/album/AlbumContextMenu.js
+++ b/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),
     },
   }
 
diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 71ac13684..cd5ebc9d6 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/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}
             >
diff --git a/ui/src/audioplayer/index.js b/ui/src/audioplayer/index.js
index 6c2c13413..c7cf0aebd 100644
--- a/ui/src/audioplayer/index.js
+++ b/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,
 }
diff --git a/ui/src/audioplayer/queue.js b/ui/src/audioplayer/queue.js
index c3a85990c..182b83760 100644
--- a/ui/src/audioplayer/queue.js
+++ b/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,
 }
diff --git a/ui/src/playlist/PlaylistActions.js b/ui/src/playlist/PlaylistActions.js
new file mode 100644
index 000000000..78d64e754
--- /dev/null
+++ b/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
diff --git a/ui/src/playlist/PlaylistShow.js b/ui/src/playlist/PlaylistShow.js
index 830571927..990504cb3 100644
--- a/ui/src/playlist/PlaylistShow.js
+++ b/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}