diff --git a/publish/changeLog.md b/publish/changeLog.md index 4ced3f4..b05876f 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -12,6 +12,8 @@ - 支持PC端同步功能添加对列表顺序调整的控制,确保手动调整位置后的列表与不同的电脑同步时,列表位置不会被还原 - 调整横屏下的导航栏、播放详情页布局,提高屏幕空间利用率并使其更易操作 - 调整歌单类别、我的列表弹出层界面 +- 播放栏移除上一曲按钮,将多出来的空间加给播放、下一曲按钮 +- 现在点击、长按播放栏歌曲标题也可以进入详情页、定位当前播放歌曲了 ### 修复 diff --git a/src/screens/Home/components/HeaderLandscape.js b/src/screens/Home/components/HeaderLandscape.js index 40619a3..0db4f01 100644 --- a/src/screens/Home/components/HeaderLandscape.js +++ b/src/screens/Home/components/HeaderLandscape.js @@ -34,7 +34,7 @@ const Header = ({ componentId }) => { const theme = useGetter('common', 'theme') return ( - + {/* */} {menus.map((item, index) => )} {/* diff --git a/src/screens/Home/components/Main.js b/src/screens/Home/components/Main.js index 3fbcc32..f04a531 100644 --- a/src/screens/Home/components/Main.js +++ b/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, diff --git a/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js b/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js index 91f7366..3d9ddae 100644 --- a/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js +++ b/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(() => ( - - - - ), [playPrev, theme]) + // const btnPrev = useMemo(() => ( + // + // + // + // ), [playPrev, theme]) const togglePlay = useCallback(playStatus => { switch (playStatus) { @@ -45,12 +45,12 @@ export default () => { }, []) const btnPlay = useMemo(() => ( togglePlay(playStatus)}> - + ), [playStatus, theme, togglePlay]) const btnNext = useMemo(() => ( - + ), [playNext, theme]) @@ -62,7 +62,7 @@ export default () => { */} - {btnPrev} + {/* {btnPrev} */} {btnPlay} {btnNext} @@ -72,8 +72,8 @@ export default () => { const styles = StyleSheet.create({ cotrolBtn: { - width: 32, - height: 32, + width: 50, + height: 50, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/Home/components/PlayerPortrait/components/Title.js b/src/screens/Home/components/PlayerPortrait/components/Title.js index bfaf271..229727e 100644 --- a/src/screens/Home/components/PlayerPortrait/components/Title.js +++ b/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') - let title = '^-^' - if (playMusicInfo && playMusicInfo.musicInfo) { - title = downloadFileName.replace('歌手', playMusicInfo.musicInfo.singer).replace('歌名', playMusicInfo.musicInfo.name) - } + 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 {title} + return ( + + {title} + + ) } // const Singer = () => { // const playMusicInfo = useGetter('player', 'playMusicInfo') diff --git a/src/screens/Home/components/PlayerPortrait/index.js b/src/screens/Home/components/PlayerPortrait/index.js index 02c9fb3..ff7b469 100644 --- a/src/screens/Home/components/PlayerPortrait/index.js +++ b/src/screens/Home/components/PlayerPortrait/index.js @@ -18,7 +18,7 @@ export default memo(() => { const playerComponent = useMemo(() => ( - + @@ -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, diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index 1e8413e..5d54c16 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -23,7 +23,7 @@ const Landscape = (props) => { - + {/*