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

ui/src/player/Player.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useAuthState } from 'react-admin'
+import ReactJkMusicPlayer from 'react-jinke-music-player'
+import 'react-jinke-music-player/assets/index.css'
+import { syncQueue } from './queue'
+
+const defaultOptions = {
+  bounds: 'body',
+  mode: 'full',
+  autoPlay: true,
+  preload: true,
+  autoPlayInitLoadPlayList: true,
+  clearPriorAudioLists: false,
+  showDownload: false,
+  showReload: false,
+  glassBg: false,
+  showThemeSwitch: false,
+  playModeText: {
+    order: 'order',
+    orderLoop: 'orderLoop',
+    singleLoop: 'singleLoop',
+    shufflePlay: 'shufflePlay'
+  },
+  defaultPosition: {
+    top: 300,
+    left: 120
+  }
+}
+
+const addQueueToOptions = (queue) => {
+  return {
+    ...defaultOptions,
+    autoPlay: true,
+    clearPriorAudioLists: queue.clear,
+    audioLists: queue.queue.map((item) => item)
+  }
+}
+
+const Player = () => {
+  const dispatch = useDispatch()
+  const queue = useSelector((state) => state.queue)
+  const options = addQueueToOptions(queue)
+  const { authenticated } = useAuthState()
+
+  const OnAudioListsChange = (currentPlayIndex, audioLists) => {
+    dispatch(syncQueue(audioLists))
+  }
+
+  const OnAudioProgress = (info) => {
+    const progress = (info.currentTime / info.duration) * 100
+  }
+
+  if (authenticated && options.audioLists.length > 0) {
+    return (
+      <ReactJkMusicPlayer
+        {...options}
+        onAudioListsChange={OnAudioListsChange}
+        onAudioProgress={OnAudioProgress}
+      />
+    )
+  }
+  return <div />
+}
+
+export default Player

ui/src/player/index.js

@@ -0,0 +1,4 @@
+import Player from './Player'
+import { addTrack, setTrack, playQueueReducer } from './queue'
+
+export { Player, addTrack, setTrack, playQueueReducer }

ui/src/player/queue.js

@@ -0,0 +1,50 @@
+import 'react-jinke-music-player/assets/index.css'
+
+const PLAYER_ADD_TRACK = 'PLAYER_ADD_TRACK'
+const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
+const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
+
+const mapToAudioLists = (item) => ({
+  id: item.id,
+  name: item.title,
+  singer: item.artist,
+  cover: `/rest/getCoverArt.view?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=Jamstash&size=300&id=${item.id}`,
+  musicSrc: `/rest/stream.view?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=Jamstash&id=${
+    item.id
+  }&ts=${new Date().getTime()}`
+})
+
+const addTrack = (data) => ({
+  type: PLAYER_ADD_TRACK,
+  data
+})
+
+const setTrack = (data) => ({
+  type: PLAYER_SET_TRACK,
+  data
+})
+
+const syncQueue = (data) => ({
+  type: PLAYER_SYNC_QUEUE,
+  data
+})
+
+const playQueueReducer = (
+  previousState = { queue: [], clear: true },
+  { type, data }
+) => {
+  switch (type) {
+    case PLAYER_ADD_TRACK:
+      const queue = previousState.queue
+      queue.push(mapToAudioLists(data))
+      return { queue, clear: false }
+    case PLAYER_SET_TRACK:
+      return { queue: [mapToAudioLists(data)], clear: true }
+    case PLAYER_SYNC_QUEUE:
+      return { queue: data, clear: false }
+    default:
+      return previousState
+  }
+}
+
+export { addTrack, setTrack, syncQueue, playQueueReducer }