refactor: rename player to audioplayer

ui/src/audioplayer/Player.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  fetchUtils,
+  useAuthState,
+  useDataProvider,
+  useTranslate
+} from 'react-admin'
+import ReactJkMusicPlayer from 'react-jinke-music-player'
+import 'react-jinke-music-player/assets/index.css'
+import { scrobble, syncQueue } from './queue'
+
+const Player = () => {
+  const translate = useTranslate()
+
+  const defaultOptions = {
+    bounds: 'body',
+    mode: 'full',
+    autoPlay: true,
+    preload: true,
+    autoPlayInitLoadPlayList: true,
+    clearPriorAudioLists: false,
+    showDestroy: false,
+    showDownload: false,
+    showReload: false,
+    glassBg: false,
+    showThemeSwitch: false,
+    playModeText: {
+      order: translate('player.playModeText.order'),
+      orderLoop: translate('player.playModeText.orderLoop'),
+      singleLoop: translate('player.playModeText.singleLoop'),
+      shufflePlay: translate('player.playModeText.shufflePlay')
+    },
+    panelTitle: translate('player.panelTitle'),
+    defaultPosition: {
+      top: 300,
+      left: 120
+    }
+  }
+
+  const addQueueToOptions = (queue) => {
+    return {
+      ...defaultOptions,
+      autoPlay: true,
+      clearPriorAudioLists: queue.clear,
+      audioLists: queue.queue.map((item) => item)
+    }
+  }
+
+  const dataProvider = useDataProvider()
+  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 (isNaN(info.duration) || progress < 90) {
+      return
+    }
+    const item = queue.queue.find((item) => item.id === info.id)
+    if (item && !item.scrobbled) {
+      dispatch(scrobble(info.id))
+      fetchUtils.fetchJson(info.scrobble(true))
+    }
+  }
+
+  const OnAudioPlay = (info) => {
+    if (info.duration) {
+      fetchUtils.fetchJson(info.scrobble(false))
+      dataProvider.getOne('keepalive', { id: info.id })
+    }
+  }
+
+  if (authenticated && options.audioLists.length > 0) {
+    return (
+      <ReactJkMusicPlayer
+        {...options}
+        onAudioListsChange={OnAudioListsChange}
+        onAudioProgress={OnAudioProgress}
+        onAudioPlay={OnAudioPlay}
+      />
+    )
+  }
+  return <div />
+}
+
+export default Player

ui/src/audioplayer/index.js

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

ui/src/audioplayer/queue.js

@@ -0,0 +1,85 @@
+import 'react-jinke-music-player/assets/index.css'
+import { subsonicUrl } from '../subsonic'
+
+const PLAYER_ADD_TRACK = 'PLAYER_ADD_TRACK'
+const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
+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,
+  name: item.title,
+  singer: item.artist,
+  cover: subsonicUrl('getCoverArt', item.id, { size: 300 }),
+  musicSrc: subsonicUrl('stream', item.id, { ts: true }),
+  scrobble: (submit) => subsonicUrl('scrobble', item.id, { submission: submit })
+})
+
+const addTrack = (data) => ({
+  type: PLAYER_ADD_TRACK,
+  data
+})
+
+const setTrack = (data) => ({
+  type: PLAYER_SET_TRACK,
+  data
+})
+
+const playAlbum = (id, data) => ({
+  type: PLAYER_PLAY_ALBUM,
+  data,
+  id
+})
+
+const syncQueue = (data) => ({
+  type: PLAYER_SYNC_QUEUE,
+  data
+})
+
+const scrobble = (id) => ({
+  type: PLAYER_SCROBBLE,
+  data: id
+})
+
+const playQueueReducer = (
+  previousState = { queue: [], clear: true },
+  payload
+) => {
+  let queue
+  const { type, data } = payload
+  switch (type) {
+    case PLAYER_ADD_TRACK:
+      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 }
+    case PLAYER_SCROBBLE:
+      const newQueue = previousState.queue.map((item) => {
+        return {
+          ...item,
+          scrobbled: item.scrobbled || item.id === data
+        }
+      })
+      return { queue: newQueue, clear: false }
+    case PLAYER_PLAY_ALBUM:
+      queue = []
+      let match = false
+      Object.keys(data).forEach((id) => {
+        if (id === payload.id) {
+          match = true
+        }
+        if (match) {
+          queue.push(mapToAudioLists(data[id]))
+        }
+      })
+      return { queue, clear: true }
+    default:
+      return previousState
+  }
+}
+
+export { addTrack, setTrack, playAlbum, syncQueue, scrobble, playQueueReducer }