renil/lx-music-mobile-mod
1
0
Fork 0
mirror of https://github.com/ikun0014/lx-music-mobile.git synced 2025-07-04 09:32:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

调整播放栏布局

Browse Source
This commit is contained in:
lyswhut 2021-12-21 13:04:37 +08:00
parent 4bc78fd840
commit 47a169e7f5
11 changed files with 119 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
publish/changeLog.md
View File

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

2
src/screens/Home/components/HeaderLandscape.js
View File

@ -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>

2
src/screens/Home/components/Main.js
View File

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

22
src/screens/Home/components/PlayerPortrait/components/ControlBtn.js
View File

@ -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(() => (
<TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
<Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
</TouchableOpacity>
), [playPrev, theme])
// const btnPrev = useMemo(() => (
// <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
// <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
// </TouchableOpacity>
// ), [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,
height: 32,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',

50
src/screens/Home/components/PlayerPortrait/components/Title.js
View File

@ -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 <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')

7
src/screens/Home/components/PlayerPortrait/index.js
View File

@ -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,

2
src/screens/Home/index.js
View File

@ -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 />

22
src/screens/SonglistDetail/PlayerPortrait/components/ControlBtn.js
View File

@ -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(() => (
<TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
<Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
</TouchableOpacity>
), [playPrev, theme])
// const btnPrev = useMemo(() => (
// <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
// <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={20} />
// </TouchableOpacity>
// ), [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,
height: 32,
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',

28
src/screens/SonglistDetail/PlayerPortrait/components/Pic.js
View File

@ -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(() => {
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 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 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
}

37
src/screens/SonglistDetail/PlayerPortrait/components/Title.js
View File

@ -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')
let title = '^-^'
if (playMusicInfo && playMusicInfo.musicInfo) {
title = downloadFileName.replace('歌手', playMusicInfo.musicInfo.singer).replace('歌名', playMusicInfo.musicInfo.name)
}
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')

7
src/screens/SonglistDetail/PlayerPortrait/index.js
View File

@ -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,