feat: initial support for i18n

ui/src/player/Player.js

@@ -1,43 +1,51 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchUtils, useAuthState, useDataProvider } from 'react-admin'
+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 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 translate = useTranslate()
+
+  const defaultOptions = {
+    bounds: 'body',
+    mode: 'full',
+    autoPlay: true,
+    preload: true,
+    autoPlayInitLoadPlayList: true,
+    clearPriorAudioLists: 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)