新增“添加歌曲到列表时的位置”设置

publish/changeLog.md

@@ -1,4 +1,8 @@
 ### 新增
 
 - 新增“其他应用播放声音时，自动暂停播放”设置，默认开启
+- 新增“添加歌曲到列表时的位置”设置，可选项为列表的“顶部”与“底部”
 
+### 变更
+
+- 添加歌曲到列表时从原来的底部改为顶部，若想要恢复原来的行为则可以去更改“添加歌曲到列表时的位置”设置项

src/config/defaultSetting.js

@@ -3,7 +3,7 @@
 // const { isMac } = require('./utils')
 
 const defaultSetting = {
-  version: '1.4',
+  version: '1.5',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -17,6 +17,7 @@ const defaultSetting = {
     isShowSource: true,
     prevSelectListId: 'default',
     isSaveScrollLocation: true,
+    addMusicLocationType: 'top',
   },
   download: {
     enable: false,

src/lang/en_us.json

@@ -89,6 +89,9 @@
   "setting_basic_sourcename_real": "Original",
   "setting_basic_sourcename_title": "Select the name of music source",
   "setting_basic_theme": "Theme",
+  "setting_list": "List settings",
+  "setting_list_add_music_location_type_bottom": "Bottom",
+  "setting_list_add_music_location_type_top": "Top",
   "setting_other": "Other",
   "setting_other_cache": "Cache management (including the cache of songs, lyrics, error logs, etc., it is not recommended to clean up if there is no problem related to song playback)",
   "setting_other_cache_clear_btn": "Clear Cache",

src/lang/zh_cn.json

@@ -89,6 +89,10 @@
   "setting_basic_sourcename_real": "原名",
   "setting_basic_sourcename_title": "选择音源名字类型",
   "setting_basic_theme": "主题颜色",
+  "setting_list": "列表设置",
+  "setting_list_add_music_location_type": "添加歌曲到列表时的位置",
+  "setting_list_add_music_location_type_bottom": "底部",
+  "setting_list_add_music_location_type_top": "顶部",
   "setting_other": "其他",
   "setting_other_cache": "缓存管理（包括歌曲、歌词、错误日志等缓存，没有歌曲播放相关的问题不建议清理）",
   "setting_other_cache_clear_btn": "清理缓存",

src/screens/Home/Setting/Basic/Source.js

@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
   list: {
     flexGrow: 0,
     flexShrink: 1,
-    flexDirection: 'row',
+    // flexDirection: 'row',
-    flexWrap: 'wrap',
+    // flexWrap: 'wrap',
   },
 })

src/screens/Home/Setting/List/AddMusicLocationType.js

@@ -0,0 +1,43 @@
+import React, { memo, useMemo } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import { useGetter, useDispatch } from '@/store'
+
+import SubTitle from '../components/SubTitle'
+import { useTranslation } from '@/plugins/i18n'
+import CheckBox from '@/components/common/CheckBox'
+
+
+const useActive = id => {
+  const addMusicLocationType = useGetter('common', 'addMusicLocationType')
+  const isActive = useMemo(() => addMusicLocationType == id, [addMusicLocationType, id])
+  return isActive
+}
+
+const Item = ({ id, name, change }) => {
+  const isActive = useActive(id)
+  // const [toggleCheckBox, setToggleCheckBox] = useState(false)
+  return <CheckBox marginBottom={3} check={isActive} label={name} onChange={() => change(id)} need />
+}
+
+
+export default memo(() => {
+  const { t } = useTranslation()
+  const setAddMusicLocationType = useDispatch('common', 'setAddMusicLocationType')
+
+  return (
+    <SubTitle title={t('setting_list_add_music_location_type')}>
+      <View style={styles.list}>
+        <Item id="top" change={setAddMusicLocationType} name={t('setting_list_add_music_location_type_top')} />
+        <Item id="bottom" change={setAddMusicLocationType} name={t('setting_list_add_music_location_type_bottom')} />
+      </View>
+    </SubTitle>
+  )
+})
+
+const styles = StyleSheet.create({
+  list: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+})

src/screens/Home/Setting/List/index.js

@@ -0,0 +1,15 @@
+import React, { memo } from 'react'
+
+import Section from '../components/Section'
+import AddMusicLocationType from './AddMusicLocationType'
+import { useTranslation } from '@/plugins/i18n'
+
+export default memo(() => {
+  const { t } = useTranslation()
+
+  return (
+    <Section title={t('setting_list')}>
+      <AddMusicLocationType />
+    </Section>
+  )
+})

src/screens/Home/Setting/index.js

@@ -8,6 +8,7 @@ import {
 
 import Basic from './Basic'
 import Player from './Player'
+import List from './List'
 import Backup from './Backup'
 import Other from './Other'
 import Version from './Version'
@@ -28,6 +29,7 @@ export default () => {
       <View style={styles.content}>
         <Basic />
         <Player />
+        <List />
         <Backup />
         <Other />
         <Version />

src/store/modules/common/action.js

@@ -33,6 +33,7 @@ export const TYPES = {
   setVersionInfo: null,
   setTimeoutExit: null,
   setIsHandleAudioFocus: null,
+  setAddMusicLocationType: null,
 }
 for (const key of Object.keys(TYPES)) {
   TYPES[key] = `common__${key}`
@@ -270,3 +271,12 @@ export const setIsHandleAudioFocus = flag => async(dispatch, getState) => {
   await setData(settingKey, common.setting)
 }
 
+export const setAddMusicLocationType = type => async(dispatch, getState) => {
+  dispatch({
+    type: TYPES.setAddMusicLocationType,
+    payload: type,
+  })
+  const { common } = getState()
+  await setData(settingKey, common.setting)
+}
+

src/store/modules/common/getter.js

@@ -33,6 +33,7 @@ export const themeList = createSelector(themes, themes => Object.values(themes))
 export const versionInfo = state => state.common.versionInfo
 
 export const prevSelectListId = state => state.common.setting.list.prevSelectListId
+export const addMusicLocationType = state => state.common.setting.list.addMusicLocationType
 
 export const togglePlayMethod = state => state.common.setting.player.togglePlayMethod
 

src/store/modules/common/reducer.js

@@ -100,6 +100,18 @@ const mutations = {
       },
     }
   },
+  [TYPES.setAddMusicLocationType](state, type) {
+    return {
+      ...state,
+      setting: {
+        ...state.setting,
+        list: {
+          ...state.setting.list,
+          addMusicLocationType: type,
+        },
+      },
+    }
+  },
   [TYPES.setAgreePact](state, isAgreePact) {
     return {
       ...state,

src/store/modules/list/action.js

@@ -99,11 +99,13 @@ export const setList = ({ id, list, name, location, source, sourceListId }) => a
 }
 
 export const listAdd = ({ musicInfo, id }) => (dispatch, getState) => {
+  const addMusicLocationType = getState().common.setting.list.addMusicLocationType
   dispatch({
     type: TYPES.listAdd,
     payload: {
       musicInfo,
       id,
+      addMusicLocationType,
     },
   })
   dispatch(playerAction.checkPlayList([id]))
@@ -111,18 +113,20 @@ export const listAdd = ({ musicInfo, id }) => (dispatch, getState) => {
 }
 
 export const listMove = ({ fromId, musicInfo, toId }) => (dispatch, getState) => {
+  const addMusicLocationType = getState().common.setting.list.addMusicLocationType
   dispatch({
     type: TYPES.listMove,
-    payload: { fromId, musicInfo, toId },
+    payload: { fromId, musicInfo, toId, addMusicLocationType },
   })
   dispatch(playerAction.checkPlayList([fromId, musicInfo]))
   saveList([global.allList[fromId], global.allList[toId]])
 }
 
 export const listAddMultiple = ({ id, list }) => (dispatch, getState) => {
+  const addMusicLocationType = getState().common.setting.list.addMusicLocationType
   dispatch({
     type: TYPES.listAddMultiple,
-    payload: { id, list },
+    payload: { id, list, addMusicLocationType },
   })
   dispatch(playerAction.checkPlayList([id]))
   saveList(global.allList[id])

src/store/modules/list/reducer.js

@@ -113,14 +113,22 @@ const mutations = {
     allListUpdate(newList)
     return { ...state, userList: [...state.userList, newList] }
   }, */
-  [TYPES.listAdd](state, { id, musicInfo }) {
+  [TYPES.listAdd](state, { id, musicInfo, addMusicLocationType }) {
     const targetList = allList[id]
     if (!targetList) return state
     if (targetList.list.some(s => s.songmid === musicInfo.songmid)) return state
-    targetList.list = [...targetList.list, musicInfo]
+    switch (addMusicLocationType) {
+      case 'top':
+        targetList.list = [musicInfo, ...targetList.list]
+        break
+      case 'bottom':
+      default:
+        targetList.list = [...targetList.list, musicInfo]
+        break
+    }
     return updateStateList({ ...state }, [id])
   },
-  [TYPES.listMove](state, { fromId, musicInfo, toId }) {
+  [TYPES.listMove](state, { fromId, musicInfo, toId, addMusicLocationType }) {
     const fromList = allList[fromId]
     const toList = allList[toId]
     if (!fromList || !toList) return state
@@ -129,14 +137,31 @@ const mutations = {
     fromList.list = newFromList
     const index = toList.list.findIndex(s => s.songmid === musicInfo.songmid)
     if (index < 0) {
-      toList.list = [...toList.list, musicInfo]
+      switch (addMusicLocationType) {
+        case 'top':
+          toList.list = [musicInfo, ...toList.list]
+          break
+        case 'bottom':
+        default:
+          toList.list = [...toList.list, musicInfo]
+          break
+      }
     }
     return updateStateList({ ...state }, [fromId, toId])
   },
-  [TYPES.listAddMultiple](state, { id, list }) {
+  [TYPES.listAddMultiple](state, { id, list, addMusicLocationType }) {
     const targetList = allList[id]
     if (!targetList) return state
-    const newList = [...targetList.list, ...list]
+    let newList
+    switch (addMusicLocationType) {
+      case 'top':
+        newList = [...list, ...targetList.list]
+        break
+      case 'bottom':
+      default:
+        newList = [...targetList.list, ...list]
+        break
+    }
     const map = {}
     const ids = []
     for (const item of newList) {