新增播放、收藏整个排行榜功能

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
 - 新增歌曲评论显示，可在播放详情页进入。（与PC端一样，目前仅支持显示部分评论）
+- 新增播放、收藏整个排行榜功能，可长按排行榜名字后在弹出的菜单中操作
 
 ### 优化
 

src/lang/en_us.json

@@ -8,6 +8,7 @@
   "change_position_music_multi_title": "Adjust the position of the selected {{num}} song to",
   "change_position_music_title": "Adjust the position of {{name}} to",
   "change_position_tip": "Please enter a new position",
+  "collect": "Collect",
   "collect_songlist": "Collection Songlist",
   "collect_success": "Collection success",
   "collect_toplist": "Collection Toplist",

src/lang/zh_cn.json

@@ -8,6 +8,7 @@
   "change_position_music_multi_title": "将已选的 {{num}} 首歌曲的位置调整到",
   "change_position_music_title": "将 {{name}} 的位置调整到",
   "change_position_tip": "请输入新的位置",
+  "collect": "收藏",
   "collect_songlist": "收藏歌单",
   "collect_success": "收藏成功",
   "collect_toplist": "收藏排行榜",

src/screens/Home/Top/BoardsList.js

@@ -1,19 +1,108 @@
-import React, { memo, useMemo, useEffect } from 'react'
+import React, { memo, useMemo, useEffect, useCallback, useRef, useState } from 'react'
 import { StyleSheet, View, Text, ScrollView } from 'react-native'
 
+import Menu from '@/components/common/Menu'
+
 import { useGetter, useDispatch } from '@/store'
 import Button from '@/components/common/Button'
-// import { useTranslation } from '@/plugins/i18n'
+import { useTranslation } from '@/plugins/i18n'
+import { LIST_ID_PLAY_TEMP } from '@/config/constant'
+import { toast } from '@/utils/tools'
+
+const Item = ({ item, tabId, showMenu, setTop, index, longPressIndex }) => {
+  const theme = useGetter('common', 'theme')
+  const buttonRef = useRef()
+
+  const setPosition = useCallback(() => {
+    if (buttonRef.current && buttonRef.current.measure) {
+      buttonRef.current.measure((fx, fy, width, height, px, py) => {
+        // console.log(fx, fy, width, height, px, py)
+        showMenu({
+          position: { x: Math.ceil(px), y: Math.ceil(py), w: Math.ceil(width), h: Math.ceil(height) },
+          index,
+        })
+      })
+    }
+  }, [index, showMenu])
+
+  return (
+    <Button ref={buttonRef} style={{ ...styles.button, backgroundColor: index == longPressIndex ? theme.secondary40 : theme.primary }} key={item.id} onLongPress={setPosition} onPress={() => setTop({ tabId: item.id })}>
+      <Text style={{ ...styles.buttonText, color: tabId == item.id ? theme.secondary : theme.normal }} numberOfLines={1}>{item.name}</Text>
+    </Button>
+  )
+}
+
+const BoardMenu = ({ visible, buttonPosition, index, hideMenu }) => {
+  const { t } = useTranslation()
+  const getListAll = useDispatch('top', 'getListAll')
+  const createUserList = useDispatch('list', 'createUserList')
+  const boards = useGetter('top', 'boards')
+  const setPlayList = useDispatch('player', 'setList')
+  const sourceId = useGetter('top', 'sourceId')
+
+  const menus = useMemo(() => {
+    return [
+      { action: 'play', label: t('play') },
+      { action: 'collect', label: t('collect') },
+    ]
+  }, [t])
+
+  const handleMenuPress = useCallback(({ action }) => {
+    hideMenu()
+    if (action) {
+      const board = boards[sourceId][index]
+      getListAll(board.id).then(list => {
+        if (!list.length) return
+
+        switch (action) {
+          case 'play':
+            setPlayList({
+              list: {
+                list,
+                id: LIST_ID_PLAY_TEMP,
+              },
+              index: 0,
+            })
+            break
+          case 'collect':
+            createUserList({
+              name: board.name,
+              id: `board__${sourceId}__${board.id}`,
+              list,
+              source: board.source,
+              sourceListId: `board__${board.id}`,
+              isShowToast: true,
+            })
+            toast(t('collect_success'))
+            break
+          default:
+            break
+        }
+      })
+    }
+  }, [boards, createUserList, getListAll, hideMenu, index, setPlayList, sourceId, t])
+
+  return (
+    <Menu
+      menus={menus}
+      visible={visible}
+      buttonPosition={buttonPosition}
+      hideMenu={hideMenu}
+      onPress={handleMenuPress}
+    />
+  )
+}
 
 
 export default memo(() => {
-  const theme = useGetter('common', 'theme')
   const setTop = useDispatch('common', 'setTop')
   const getBoardsList = useDispatch('top', 'getBoardsList')
   const boards = useGetter('top', 'boards')
   const sourceId = useGetter('top', 'sourceId')
   const tabId = useGetter('top', 'tabId')
-  // const { t } = useTranslation()
+  const [visible, setVisible] = useState(false)
+  const [longPressIndex, setLongPressIndex] = useState(-1)
+  const [buttonPosition, setButtonPosition] = useState({})
 
   useEffect(() => {
     const list = boards[sourceId]
@@ -36,19 +125,26 @@ export default memo(() => {
 
   const list = useMemo(() => sourceId ? [...boards[sourceId]] : [], [boards, sourceId])
 
+  const showMenu = useCallback(({ position, index }) => {
+    setLongPressIndex(index)
+    setButtonPosition(position)
+    setVisible(true)
+  }, [])
+  const hideMenu = useCallback(() => {
+    setVisible(false)
+    setLongPressIndex(-1)
+  }, [setVisible])
+
   return (
     <View style={styles.container}>
       <ScrollView style={styles.scrollView} keyboardShouldPersistTaps={'always'}>
         <View style={styles.list}>
           {
-            list.map(item => (
-              <Button style={styles.button} key={item.id} onPress={() => setTop({ tabId: item.id })}>
-                <Text style={{ ...styles.buttonText, color: tabId == item.id ? theme.secondary : theme.normal }} numberOfLines={1}>{item.name}</Text>
-              </Button>
-            ))
+            list.map((item, index) => (<Item key={item.id} item={item} index={index} longPressIndex={longPressIndex} tabId={tabId} showMenu={showMenu} setTop={setTop} />))
           }
         </View>
       </ScrollView>
+      <BoardMenu visible={visible} buttonPosition={buttonPosition} index={longPressIndex} hideMenu={hideMenu} />
     </View>
   )
 })