feat: initial integration of react-jinke-music-player

ui/src/song/AddToQueueButton.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button, useDataProvider, useUnselectAll } from 'react-admin'
+import { useDispatch } from 'react-redux'
+import { addTrack } from '../player'
+
+const AddToQueueButton = ({ selectedIds }) => {
+  const dispatch = useDispatch()
+  const dataProvider = useDataProvider()
+  const unselectAll = useUnselectAll()
+  const addToQueue = () => {
+    selectedIds.forEach((id) => {
+      dataProvider.getOne('song', { id }).then((response) => {
+        console.log(response.data)
+        dispatch(addTrack(response.data))
+      })
+    })
+    unselectAll('song')
+  }
+
+  return <Button color="secondary" label="Add To Queue" onClick={addToQueue} />
+}
+
+export default AddToQueueButton

ui/src/song/PlayButton.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import { IconButton } from '@material-ui/core'
+import { useDispatch } from 'react-redux'
+import { setTrack } from '../player'
+
+const defaultIcon = <PlayArrowIcon fontSize="small" />
+
+const PlayButton = ({
+  record,
+  icon = defaultIcon,
+  action = setTrack,
+  ...rest
+}) => {
+  const dispatch = useDispatch()
+
+  return (
+    <IconButton onClick={() => dispatch(action(record))} {...rest}>
+      {icon}
+    </IconButton>
+  )
+}
+
+PlayButton.propTypes = {
+  record: PropTypes.any,
+  icon: PropTypes.element,
+  action: PropTypes.func
+}
+export default PlayButton

ui/src/song/SongList.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import {
   BooleanField,
   Datagrid,
@@ -7,12 +7,14 @@ import {
   List,
   NumberField,
   SearchInput,
-  TextInput,
   Show,
   SimpleShowLayout,
-  TextField
+  TextField,
+  TextInput
 } from 'react-admin'
 import { BitrateField, DurationField, Title } from '../common'
+import AddToQueueButton from './AddToQueueButton'
+import PlayButton from './PlayButton'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -22,6 +24,12 @@ const SongFilter = (props) => (
   </Filter>
 )
 
+const SongBulkActionButtons = (props) => (
+  <Fragment>
+    <AddToQueueButton {...props} />
+  </Fragment>
+)
+
 const SongDetails = (props) => {
   return (
     <Show {...props} title=" ">
@@ -37,26 +45,28 @@ const SongDetails = (props) => {
   )
 }
 
-const SongList = (props) => (
-  <List
-    {...props}
-    title={<Title subTitle={'Songs'} />}
-    sort={{ field: 'title', order: 'ASC' }}
-    exporter={false}
-    bulkActionButtons={false}
-    filters={<SongFilter />}
-    perPage={15}
-  >
-    <Datagrid expand={<SongDetails />}>
-      <TextField source="title" />
-      <TextField source="album" />
-      <TextField source="artist" />
-      <NumberField label="Track #" source="trackNumber" />
-      <NumberField label="Disc #" source="discNumber" />
-      <TextField source="year" />
-      <DurationField label="Time" source="duration" />
-    </Datagrid>
-  </List>
-)
+const SongList = (props) => {
+  return (
+    <List
+      {...props}
+      title={<Title subTitle={'Songs'} />}
+      sort={{ field: 'title', order: 'ASC' }}
+      exporter={false}
+      bulkActionButtons={<SongBulkActionButtons />}
+      filters={<SongFilter />}
+    >
+      <Datagrid expand={<SongDetails />}>
+        <PlayButton {...props} />
+        <TextField source="title" />
+        <TextField source="album" />
+        <TextField source="artist" />
+        <NumberField label="Track #" source="trackNumber" />
+        <NumberField label="Disc #" source="discNumber" />
+        <TextField source="year" />
+        <DurationField label="Time" source="duration" />
+      </Datagrid>
+    </List>
+  )
+}
 
 export default SongList