调整播放栏布局

publish/changeLog.md

@@ -12,6 +12,8 @@
 - 支持PC端同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
 - 调整横屏下的导航栏、播放详情页布局，提高屏幕空间利用率并使其更易操作
 - 调整歌单类别、我的列表弹出层界面
+- 播放栏移除上一曲按钮，将多出来的空间加给播放、下一曲按钮
+- 现在点击、长按播放栏歌曲标题也可以进入详情页、定位当前播放歌曲了
 
 ### 修复
 

src/screens/Home/components/HeaderLandscape.js

@@ -34,7 +34,7 @@ const Header = ({ componentId }) => {
   const theme = useGetter('common', 'theme')
 
   return (
-    <View style={{ ...styles.container, borderRightColor: theme.borderColor }}>
+    <View style={{ ...styles.container, borderRightColor: theme.borderColor, backgroundColor: theme.primary }}>
       {/* <View style={styles.left}> */}
         {menus.map((item, index) => <HeaderItem info={item} index={index} key={item.id} onPress={setNavActiveIndex} />)}
       {/* </View>

src/screens/Home/components/Main.js

@@ -200,7 +200,7 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     flexShrink: 1,
-    backgroundColor: '#fff',
+    // backgroundColor: '#fff',
   },
   pagerView: {
     flex: 1,

src/screens/Home/components/PlayerPortrait/components/ControlBtn.js

@@ -8,7 +8,7 @@ import { STATUS } from '@/store/modules/player'
 export default () => {
   const playStatus = useGetter('player', 'status')
   const playNext = useDispatch('player', 'playNext')
-  const playPrev = useDispatch('player', 'playPrev')
+  // const playPrev = useDispatch('player', 'playPrev')
   // const playMusicInfo = useGetter('player', 'playMusicInfo')
   const pauseMusic = useDispatch('player', 'pauseMusic')
   const playMusic = useDispatch('player', 'playMusic')
@@ -22,11 +22,11 @@ export default () => {
   //   setPlayNextMode(playNextModes[index] || '')
   // }, [setPlayNextMode, togglePlayMethod, playNextModes])
 
-  const btnPrev = useMemo(() => (
+  // const btnPrev = useMemo(() => (
-    <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
+  //   <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
-      <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
+  //     <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
-    </TouchableOpacity>
+  //   </TouchableOpacity>
-  ), [playPrev, theme])
+  // ), [playPrev, theme])
 
   const togglePlay = useCallback(playStatus => {
     switch (playStatus) {
@@ -45,12 +45,12 @@ export default () => {
   }, [])
   const btnPlay = useMemo(() => (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={() => togglePlay(playStatus)}>
-      <Icon name={playStatus == STATUS.playing ? 'pause' : 'play'} style={{ color: theme.secondary10 }} size={20} />
+      <Icon name={playStatus == STATUS.playing ? 'pause' : 'play'} style={{ color: theme.secondary10 }} size={24} />
     </TouchableOpacity>
   ), [playStatus, theme, togglePlay])
   const btnNext = useMemo(() => (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playNext}>
-      <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={20} />
+      <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={24} />
     </TouchableOpacity>
   ), [playNext, theme])
 
@@ -62,7 +62,7 @@ export default () => {
         </Text>
       </TouchableOpacity>
     */}
-      {btnPrev}
+      {/* {btnPrev} */}
       {btnPlay}
       {btnNext}
     </>
@@ -72,8 +72,8 @@ export default () => {
 
 const styles = StyleSheet.create({
   cotrolBtn: {
-    width: 32,
+    width: 50,
-    height: 32,
+    height: 50,
     justifyContent: 'center',
     alignItems: 'center',
 

src/screens/Home/components/PlayerPortrait/components/Title.js

@@ -1,18 +1,52 @@
 import React, { useCallback, memo, useMemo, useEffect } from 'react'
-import { Text, StyleSheet } from 'react-native'
+import { Text, StyleSheet, TouchableOpacity } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
+import { navigations } from '@/navigation'
+import { LIST_ID_PLAY_TEMP, LIST_ID_PLAY_LATER, NAV_VIEW_NAMES } from '@/config/constant'
 
 
 export default () => {
-  const theme = useGetter('common', 'theme')
-  const downloadFileName = useGetter('common', 'downloadFileName')
   const playMusicInfo = useGetter('player', 'playMusicInfo')
+  const theme = useGetter('common', 'theme')
+  const setNavActiveIndex = useDispatch('common', 'setNavActiveIndex')
+  const setPrevSelectListId = useDispatch('common', 'setPrevSelectListId')
+  const setJumpPosition = useDispatch('list', 'setJumpPosition')
+  // const { t } = useTranslation()
+  const componentIds = useGetter('common', 'componentIds')
+  const musicInfo = useMemo(() => {
+    return (playMusicInfo && playMusicInfo.musicInfo) || {}
+  }, [playMusicInfo])
+  const handlePress = useCallback(() => {
+    // console.log('')
+    // console.log(playMusicInfo)
+    if (!playMusicInfo) return
+    navigations.pushPlayDetailScreen(componentIds.home, musicInfo.songmid)
+    // toast(t('play_detail_todo_tip'), 'long')
+  }, [componentIds.home, musicInfo, playMusicInfo])
+
+  const handleLongPress = useCallback(() => {
+    if (!playMusicInfo || playMusicInfo.listId == LIST_ID_PLAY_TEMP || playMusicInfo.listId == LIST_ID_PLAY_LATER) return
+    setNavActiveIndex(NAV_VIEW_NAMES.list)
+    setPrevSelectListId(playMusicInfo.listId)
+    global.requestAnimationFrame(() => {
+      setJumpPosition(true)
+    })
+  }, [playMusicInfo, setJumpPosition, setNavActiveIndex, setPrevSelectListId])
+
+  const downloadFileName = useGetter('common', 'downloadFileName')
+  const title = useMemo(() => {
     let title = '^-^'
     if (playMusicInfo && playMusicInfo.musicInfo) {
       title = downloadFileName.replace('歌手', playMusicInfo.musicInfo.singer).replace('歌名', playMusicInfo.musicInfo.name)
     }
+    return title
+  }, [downloadFileName, playMusicInfo])
   // console.log(playMusicInfo)
-  return <Text style={{ width: '100%', fontSize: 14, color: theme.normal }} numberOfLines={1}>{title}</Text>
+  return (
+    <TouchableOpacity onLongPress={handleLongPress} onPress={handlePress} activeOpacity={0.7} >
+      <Text style={{ width: '100%', fontSize: 14, color: theme.normal }} numberOfLines={1}>{title}</Text>
+    </TouchableOpacity>
+  )
 }
 // const Singer = () => {
 //   const playMusicInfo = useGetter('player', 'playMusicInfo')

src/screens/Home/components/PlayerPortrait/index.js

@@ -18,7 +18,7 @@ export default memo(() => {
 
 
   const playerComponent = useMemo(() => (
-    <View style={{ ...styles.container, backgroundColor: theme.primary, borderTopColor: theme.secondary10 }}>
+    <View style={{ ...styles.container, backgroundColor: theme.primary }}>
       <View style={styles.left} elevation={1}><Pic /></View>
       <View style={styles.center}>
         <View style={{ ...styles.row, justifyContent: 'space-between', fontSize: 12 }}>
@@ -45,14 +45,17 @@ const styles = StyleSheet.create({
     // paddingTop: progressContentPadding,
     // marginTop: -progressContentPadding,
     // backgroundColor: 'rgba(0, 0, 0, .1)',
-    borderTopWidth: BorderWidths.normal2,
+    // borderTopWidth: BorderWidths.normal2,
     paddingTop: 5,
     paddingBottom: 5,
     paddingLeft: 5,
     // backgroundColor: AppColors.primary,
     // backgroundColor: 'red',
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
     flexDirection: 'row',
     alignItems: 'center',
+    elevation: 10,
   },
   left: {
     borderRadius: 3,

src/screens/Home/index.js

@@ -23,7 +23,7 @@ const Landscape = (props) => {
       <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
       <View style={{ ...styles.container, backgroundColor: props.theme.primary }}>
         <HeaderLandscape componentId={props.componentId} />
-        <View style={{ flex: 1, flexDirection: 'column', height: '100%' }}>
+        <View style={{ flex: 1, flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
           {/* <Aside /> */}
           <Main />
           <FooterPlayer />

src/screens/SonglistDetail/PlayerPortrait/components/ControlBtn.js

@@ -8,7 +8,7 @@ import { STATUS } from '@/store/modules/player'
 export default () => {
   const playStatus = useGetter('player', 'status')
   const playNext = useDispatch('player', 'playNext')
-  const playPrev = useDispatch('player', 'playPrev')
+  // const playPrev = useDispatch('player', 'playPrev')
   // const playMusicInfo = useGetter('player', 'playMusicInfo')
   const pauseMusic = useDispatch('player', 'pauseMusic')
   const playMusic = useDispatch('player', 'playMusic')
@@ -22,11 +22,11 @@ export default () => {
   //   setPlayNextMode(playNextModes[index] || '')
   // }, [setPlayNextMode, togglePlayMethod, playNextModes])
 
-  const btnPrev = useMemo(() => (
+  // const btnPrev = useMemo(() => (
-    <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
+  //   <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
-      <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
+  //     <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
-    </TouchableOpacity>
+  //   </TouchableOpacity>
-  ), [playPrev, theme])
+  // ), [playPrev, theme])
 
   const togglePlay = useCallback(playStatus => {
     switch (playStatus) {
@@ -45,12 +45,12 @@ export default () => {
   }, [])
   const btnPlay = useMemo(() => (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={() => togglePlay(playStatus)}>
-      <Icon name={playStatus == STATUS.playing ? 'pause' : 'play'} style={{ color: theme.secondary10 }} size={20} />
+      <Icon name={playStatus == STATUS.playing ? 'pause' : 'play'} style={{ color: theme.secondary10 }} size={24} />
     </TouchableOpacity>
   ), [playStatus, theme, togglePlay])
   const btnNext = useMemo(() => (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playNext}>
-      <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={20} />
+      <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={24} />
     </TouchableOpacity>
   ), [playNext, theme])
 
@@ -62,7 +62,7 @@ export default () => {
         </Text>
       </TouchableOpacity>
     */}
-      {btnPrev}
+      {/* {btnPrev} */}
       {btnPlay}
       {btnNext}
     </>
@@ -72,8 +72,8 @@ export default () => {
 
 const styles = StyleSheet.create({
   cotrolBtn: {
-    width: 32,
+    width: 50,
-    height: 32,
+    height: 50,
     justifyContent: 'center',
     alignItems: 'center',
 

src/screens/SonglistDetail/PlayerPortrait/components/Pic.js

@@ -1,17 +1,11 @@
 import React, { useCallback, memo, useMemo, useEffect, useState } from 'react'
-import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
+import { Image, TouchableOpacity } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
-import { toast } from '@/utils/tools'
-import { useTranslation } from '@/plugins/i18n'
-import { LIST_ID_PLAY_TEMP, LIST_ID_PLAY_LATER, NAV_VIEW_NAMES } from '@/config/constant'
 import { navigations } from '@/navigation'
 
 export default () => {
   const playMusicInfo = useGetter('player', 'playMusicInfo')
   const theme = useGetter('common', 'theme')
-  const setNavActiveIndex = useDispatch('common', 'setNavActiveIndex')
-  const setPrevSelectListId = useDispatch('common', 'setPrevSelectListId')
-  const setJumpPosition = useDispatch('list', 'setJumpPosition')
   // const { t } = useTranslation()
   const componentIds = useGetter('common', 'componentIds')
   const musicInfo = useMemo(() => {
@@ -25,17 +19,17 @@ export default () => {
     // toast(t('play_detail_todo_tip'), 'long')
   }, [componentIds.home, musicInfo, playMusicInfo])
 
-  const handleLongPress = useCallback(() => {
+  // const handleLongPress = useCallback(() => {
-    if (!playMusicInfo || playMusicInfo.listId == LIST_ID_PLAY_TEMP || playMusicInfo.listId == LIST_ID_PLAY_LATER) return
+  //   if (!playMusicInfo || playMusicInfo.listId == LIST_ID_PLAY_TEMP || playMusicInfo.listId == LIST_ID_PLAY_LATER) return
-    setNavActiveIndex(NAV_VIEW_NAMES.list)
+  //   setNavActiveIndex(NAV_VIEW_NAMES.list)
-    setPrevSelectListId(playMusicInfo.listId)
+  //   setPrevSelectListId(playMusicInfo.listId)
-    global.requestAnimationFrame(() => {
+  //   global.requestAnimationFrame(() => {
-      setJumpPosition(true)
+  //     setJumpPosition(true)
-    })
+  //   })
-  }, [playMusicInfo, setJumpPosition, setNavActiveIndex, setPrevSelectListId])
+  // }, [playMusicInfo, setJumpPosition, setNavActiveIndex, setPrevSelectListId])
 
   const component = useMemo(() => (
-    <TouchableOpacity onLongPress={handleLongPress} onPress={handlePress} activeOpacity={0.7} >
+    <TouchableOpacity onPress={handlePress} activeOpacity={0.7} >
       <Image source={{ uri: musicInfo.img }} nativeID={`pic${musicInfo.songmid}`} progressiveRenderingEnabled={true} borderRadius={2} style={{
         // ...styles.playInfoImg,
         backgroundColor: theme.primary,
@@ -43,7 +37,7 @@ export default () => {
         height: 48,
       }} />
     </TouchableOpacity>
-  ), [handleLongPress, handlePress, musicInfo, theme])
+  ), [handlePress, musicInfo, theme])
   return component
 }
 

src/screens/SonglistDetail/PlayerPortrait/components/Title.js

@@ -1,18 +1,39 @@
 import React, { useCallback, memo, useMemo, useEffect } from 'react'
-import { Text, StyleSheet } from 'react-native'
+import { Text, StyleSheet, TouchableOpacity } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
+import { navigations } from '@/navigation'
 
 
 export default () => {
-  const theme = useGetter('common', 'theme')
-  const downloadFileName = useGetter('common', 'downloadFileName')
   const playMusicInfo = useGetter('player', 'playMusicInfo')
+  const theme = useGetter('common', 'theme')
+  // const { t } = useTranslation()
+  const componentIds = useGetter('common', 'componentIds')
+  const musicInfo = useMemo(() => {
+    return (playMusicInfo && playMusicInfo.musicInfo) || {}
+  }, [playMusicInfo])
+  const handlePress = useCallback(() => {
+    // console.log('')
+    // console.log(playMusicInfo)
+    if (!playMusicInfo) return
+    navigations.pushPlayDetailScreen(componentIds.home, musicInfo.songmid)
+    // toast(t('play_detail_todo_tip'), 'long')
+  }, [componentIds.home, musicInfo, playMusicInfo])
+
+  const downloadFileName = useGetter('common', 'downloadFileName')
+  const title = useMemo(() => {
     let title = '^-^'
     if (playMusicInfo && playMusicInfo.musicInfo) {
       title = downloadFileName.replace('歌手', playMusicInfo.musicInfo.singer).replace('歌名', playMusicInfo.musicInfo.name)
     }
+    return title
+  }, [downloadFileName, playMusicInfo])
   // console.log(playMusicInfo)
-  return <Text style={{ width: '100%', fontSize: 14, color: theme.normal }} numberOfLines={1}>{title}</Text>
+  return (
+    <TouchableOpacity onPress={handlePress} activeOpacity={0.7} >
+      <Text style={{ width: '100%', fontSize: 14, color: theme.normal }} numberOfLines={1}>{title}</Text>
+    </TouchableOpacity>
+  )
 }
 // const Singer = () => {
 //   const playMusicInfo = useGetter('player', 'playMusicInfo')

src/screens/SonglistDetail/PlayerPortrait/index.js

@@ -18,7 +18,7 @@ export default memo(() => {
 
 
   const playerComponent = useMemo(() => (
-    <View style={{ ...styles.container, backgroundColor: theme.primary, borderTopColor: theme.secondary10 }}>
+    <View style={{ ...styles.container, backgroundColor: theme.primary }}>
       <View style={styles.left} elevation={1}><Pic /></View>
       <View style={styles.center}>
         <View style={{ ...styles.row, justifyContent: 'space-between', fontSize: 12 }}>
@@ -45,14 +45,17 @@ const styles = StyleSheet.create({
     // paddingTop: progressContentPadding,
     // marginTop: -progressContentPadding,
     // backgroundColor: 'rgba(0, 0, 0, .1)',
-    borderTopWidth: BorderWidths.normal2,
+    // borderTopWidth: BorderWidths.normal2,
     paddingTop: 5,
     paddingBottom: 5,
     paddingLeft: 5,
     // backgroundColor: AppColors.primary,
     // backgroundColor: 'red',
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
     flexDirection: 'row',
     alignItems: 'center',
+    elevation: 10,
   },
   left: {
     borderRadius: 3,