diff --git a/publish/changeLog.md b/publish/changeLog.md index daa88a5..1ceb3af 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -7,7 +7,8 @@ - 修改对播放模块的调用，杜绝应用显示正在播放的歌曲与实际播放歌曲不一致的问题（这是播放模块歌曲队列与应用内歌曲队列在某些情况下出现不一致时导致的） - 支持PC端同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原 -- 调整横屏下的播放详情页布局，提高屏幕空间利用率并使其更易操作 +- 调整横屏下的导航栏、播放详情页布局，提高屏幕空间利用率并使其更易操作 +- 调整歌单类别、我的列表弹出层界面 ### 修复 diff --git a/src/components/common/Popup.js b/src/components/common/Popup.js index fe77775..2543fc9 100644 --- a/src/components/common/Popup.js +++ b/src/components/common/Popup.js @@ -14,19 +14,22 @@ const styles = StyleSheet.create({ }, modalView: { elevation: 3, + flexGrow: 0, + flexShrink: 1, }, header: { - flexGrow: 0, - flexShrink: 0, + flex: 0, flexDirection: 'row', borderTopLeftRadius: 8, borderTopRightRadius: 8, }, title: { fontSize: 13, - paddingLeft: 5, + paddingLeft: 10, paddingRight: 25, - lineHeight: 20, + paddingTop: 10, + paddingBottom: 10, + // lineHeight: 20, }, closeBtn: { position: 'absolute', @@ -45,7 +48,7 @@ const styles = StyleSheet.create({ export default ({ visible = false, - hideDialog = () => {}, + hide = () => {}, keyHide = true, bgHide = true, closeBtn = true, @@ -56,7 +59,7 @@ export default ({ const theme = useGetter('common', 'theme') const { keyboardShown, keyboardHeight } = useKeyboard() - const closeBtnComponent = useMemo(() => closeBtn ? : null, [closeBtn, hideDialog, theme]) + const closeBtnComponent = useMemo(() => closeBtn ? : null, [closeBtn, hide, theme]) const [centeredViewStyle, modalViewStyle] = useMemo(() => { switch (position) { @@ -110,12 +113,12 @@ export default ({ }, [position]) return ( - + true}> - {title} + {title} {closeBtnComponent} {children} diff --git a/src/lang/en_us.json b/src/lang/en_us.json index 092e977..c266185 100644 --- a/src/lang/en_us.json +++ b/src/lang/en_us.json @@ -69,6 +69,7 @@ "loading": "Loading...", "move_to": "Move to...", "name": "Name: {{name}}", + "nav__my_list": "My list", "parent_dir_name": "Parent directory", "pause": "Pause", "play": "Play", @@ -82,6 +83,7 @@ "play_prev": "Previous song", "play_single": "Disable song switching", "play_single_loop": "Single loop playback", + "player__setting_lrc_font_size": "Lyric font size setting", "quality_high_quality": "HQ", "quality_lossless": "SQ", "setting_about": "About LX Music", @@ -176,6 +178,7 @@ "setting_version": "Software Update", "setting_version_show_ver_modal": "Open the update window 🚀", "singer": "Artist: {{name}}", + "songlist__tags": "Playlist category", "songlist_hot": "Hot", "songlist_hot_collect": "Hot Collect", "songlist_new": "New", diff --git a/src/lang/zh_cn.json b/src/lang/zh_cn.json index ca45489..1e8e2cd 100644 --- a/src/lang/zh_cn.json +++ b/src/lang/zh_cn.json @@ -70,6 +70,7 @@ "loading": "加载中...", "move_to": "移动到...", "name": "歌曲名：{{name}}", + "nav__my_list": "我的列表", "parent_dir_name": "父级目录", "pause": "暂停", "play": "播放", @@ -83,6 +84,7 @@ "play_prev": "上一曲", "play_single": "禁用歌曲切换", "play_single_loop": "单曲循环播放", + "player__setting_lrc_font_size": "歌词字体大小设置", "quality_high_quality": "高品质", "quality_lossless": "无损", "setting_about": "关于洛雪音乐", @@ -177,6 +179,7 @@ "setting_version": "软件更新", "setting_version_show_ver_modal": "打开更新窗口 🚀", "singer": "艺术家：{{name}}", + "songlist__tags": "歌单类别", "songlist_hot": "最热", "songlist_hot_collect": "热藏", "songlist_new": "最新", diff --git a/src/screens/Home/List/components/MyList.js b/src/screens/Home/List/components/MyList.js index 12e7a10..41c4a35 100644 --- a/src/screens/Home/List/components/MyList.js +++ b/src/screens/Home/List/components/MyList.js @@ -3,7 +3,7 @@ import { StyleSheet, Text, View, TouchableOpacity, ScrollView, InteractionManage import { useGetter, useDispatch } from '@/store' import { useTranslation } from '@/plugins/i18n' -import DorpDownPanel from '@/components/common/DorpDownPanel' +// import DorpDownPanel from '@/components/common/DorpDownPanel' import Icon from '@/components/common/Icon' // import Button from '@/components/common/Button' import { BorderWidths } from '@/theme' @@ -16,6 +16,7 @@ import { LIST_SCROLL_POSITION_KEY, LXM_FILE_EXT_RXP } from '@/config/constant' import musicSdk from '@/utils/music' import ChoosePath from '@/components/common/ChoosePath' import { log } from '@/utils/log' +import Popup from '@/components/common/Popup' const exportList = async(list, path) => { const data = JSON.parse(JSON.stringify({ @@ -337,7 +338,7 @@ const List = memo(({ setVisiblePanel, currentList, handleCancelMultiSelect }) => setVisibleMenu(true) }, []) return ( - + <> true}> handleToggleList(defaultList)} activeId={currentList.id} showMenu={showMenu} /> @@ -362,7 +363,7 @@ const List = memo(({ setVisiblePanel, currentList, handleCancelMultiSelect }) => setShowChoosePath(false)} selectedListRef={selectedListRef} /> - + ) }) @@ -370,20 +371,26 @@ const List = memo(({ setVisiblePanel, currentList, handleCancelMultiSelect }) => export default memo(({ currentList, handleCancelMultiSelect, showListSearchBar }) => { const theme = useGetter('common', 'theme') const [visiblePanel, setVisiblePanel] = useState(false) + const { t } = useTranslation() + const showPopup = () => { + setVisiblePanel(true) + } + const hidePopup = () => { + setVisiblePanel(false) + } return ( - } - > - + + {currentList.name} - - + + + + + ) }) @@ -397,9 +404,9 @@ const styles = StyleSheet.create({ paddingBottom: 10, }, - container: { - borderBottomWidth: BorderWidths.normal2, - }, + // container: { + // borderBottomWidth: BorderWidths.normal2, + // }, listContainer: { // borderBottomWidth: BorderWidths.normal2, }, diff --git a/src/screens/Home/SongList/Tag.js b/src/screens/Home/SongList/Tag.js index 36c8d5e..fe49419 100644 --- a/src/screens/Home/SongList/Tag.js +++ b/src/screens/Home/SongList/Tag.js @@ -1,11 +1,11 @@ import React, { memo, useMemo, useEffect, useCallback, useState } from 'react' -import { StyleSheet, Text, View, ScrollView } from 'react-native' +import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native' import { useGetter, useDispatch } from '@/store' -// import { useTranslation } from '@/plugins/i18n' -import DorpDownPanel from '@/components/common/DorpDownPanel' +import { useTranslation } from '@/plugins/i18n' +import Popup from '@/components/common/Popup' import Button from '@/components/common/Button' -import { BorderWidths } from '@/theme' +// import { BorderWidths } from '@/theme' const TagType = ({ name, list, setTagInfo, activeId }) => { const theme = useGetter('common', 'theme') @@ -39,18 +39,16 @@ const Tags = memo(({ setVisiblePanel }) => { setSongList({ tagInfo: { name, id } }) }, [setSongList, setVisiblePanel]) return ( - - - true}> - - - - {tagsList.map((type, index) => )} + + true}> + + - - + {tagsList.map((type, index) => )} + + ) }) @@ -62,6 +60,7 @@ export default memo(() => { const theme = useGetter('common', 'theme') const getTags = useDispatch('songList', 'getTags') const [visiblePanel, setVisiblePanel] = useState(false) + const { t } = useTranslation() // useEffect(() => { // getTags() @@ -75,13 +74,18 @@ export default memo(() => { // console.log('render tags') return ( - } - > - {songListTagInfo.name} - + <> + setVisiblePanel(true)}> + {songListTagInfo.name} + + setVisiblePanel(false)} + title={t('songlist__tags')} + > + + + ) }) @@ -98,9 +102,6 @@ const styles = StyleSheet.create({ paddingBottom: 10, }, - container: { - borderBottomWidth: BorderWidths.normal2, - }, tagContainer: { paddingLeft: 15, paddingBottom: 15, diff --git a/src/screens/Home/components/HeaderLandscape.js b/src/screens/Home/components/HeaderLandscape.js new file mode 100644 index 0000000..40619a3 --- /dev/null +++ b/src/screens/Home/components/HeaderLandscape.js @@ -0,0 +1,84 @@ +import React, { useMemo } from 'react' +import { View, Text, StyleSheet, StatusBar, TouchableOpacity } from 'react-native' +// import Button from '@/components/common/Button' +import Icon from '@/components/common/Icon' +import { useGetter, useDispatch } from '@/store' +// import { navigations } from '@/navigation' +import { BorderWidths } from '@/theme' + +const useActive = index => { + const activeIndex = useGetter('common', 'navActiveIndex') + return index === activeIndex +} + +const HeaderItem = ({ info, index, onPress }) => { + const theme = useGetter('common', 'theme') + const isActive = useActive(index) + // console.log(theme) + const components = useMemo(() => ( + !isActive && onPress(index)}> + + {/* {info.name} */} + + ), [isActive, theme, index, info.icon, onPress]) + + return components +} + +// const settingItem = { +// icon: 'setting', +// } +const Header = ({ componentId }) => { + const menus = useGetter('common', 'navMenus') + const setNavActiveIndex = useDispatch('common', 'setNavActiveIndex') + const theme = useGetter('common', 'theme') + + return ( + + {/* */} + {menus.map((item, index) => )} + {/* + + navigations.pushSettingScreen(componentId)} /> + */} + + ) +} + + +const styles = StyleSheet.create({ + container: { + // height: 36, + // width: '100%', + // flexDirection: 'row', + borderRightWidth: BorderWidths.normal, + justifyContent: 'center', + zIndex: 10, + }, + left: { + flex: 1, + flexDirection: 'row', + paddingLeft: 5, + }, + btn: { + // flex: 1, + padding: 15, + backgroundColor: 'rgba(0,0,0,0)', + alignItems: 'center', + justifyContent: 'center', + }, + btnActive: { + color: 'green', + }, + btnText: { + fontSize: 16, + // color: 'white', + }, + icon: { + paddingLeft: 4, + paddingRight: 4, + }, +}) + + +export default Header diff --git a/src/screens/Home/components/Main.js b/src/screens/Home/components/Main.js index 8530079..3fbcc32 100644 --- a/src/screens/Home/components/Main.js +++ b/src/screens/Home/components/Main.js @@ -204,6 +204,7 @@ const styles = StyleSheet.create({ }, pagerView: { flex: 1, + overflow: 'hidden', }, pageStyle: { // alignItems: 'center', diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index 1d619c0..1e8413e 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -1,15 +1,41 @@ import React, { useEffect } from 'react' -import { View } from 'react-native' +import { View, StatusBar, StyleSheet } from 'react-native' import Header from './components/Header' +import HeaderLandscape from './components/HeaderLandscape' // import Aside from './components/Aside' import Main from './components/Main' import FooterPlayer from './components/FooterPlayer' import { useGetter, useDispatch } from '@/store' +import { useDimensions } from '@/utils/hooks' +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: StatusBar.currentHeight, + flexDirection: 'row', + }, +}) + +const Landscape = (props) => { + return ( + <> + + + + + {/*