调整横屏下的导航栏，调整歌单类别、我的列表弹出层界面

publish/changeLog.md

@@ -7,7 +7,8 @@
 
 - 修改对播放模块的调用，杜绝应用显示正在播放的歌曲与实际播放歌曲不一致的问题（这是播放模块歌曲队列与应用内歌曲队列在某些情况下出现不一致时导致的）
 - 支持PC端同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
-- 调整横屏下的播放详情页布局，提高屏幕空间利用率并使其更易操作
+- 调整横屏下的导航栏、播放详情页布局，提高屏幕空间利用率并使其更易操作
+- 调整歌单类别、我的列表弹出层界面
 
 ### 修复
 

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 ? <TouchableOpacity style={styles.closeBtn} onPress={hideDialog}><Icon name="close" style={{ color: theme.normal50, fontSize: 12 }} /></TouchableOpacity> : null, [closeBtn, hideDialog, theme])
+  const closeBtnComponent = useMemo(() => closeBtn ? <TouchableOpacity style={styles.closeBtn} onPress={hide}><Icon name="close" style={{ color: theme.normal50, fontSize: 12 }} /></TouchableOpacity> : null, [closeBtn, hide, theme])
 
   const [centeredViewStyle, modalViewStyle] = useMemo(() => {
     switch (position) {
@@ -110,12 +113,12 @@ export default ({
   }, [position])
 
   return (
-    <Modal visible={visible} hideModal={hideDialog} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
+    <Modal visible={visible} hideModal={hide} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
       <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
       <View style={{ ...styles.centeredView, ...centeredViewStyle, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
         <View style={{ ...styles.modalView, ...modalViewStyle, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
           <View style={styles.header}>
-            <Text style={{ ...styles.title, color: theme.normal }} numberOfLines={1}>{title}</Text>
+            <Text style={{ ...styles.title, color: theme.normal40 }} numberOfLines={1}>{title}</Text>
             {closeBtnComponent}
           </View>
           {children}

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

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": "最新",

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 (
-    <View style={{ ...styles.container, borderBottomColor: theme.secondary10 }}>
+    <>
       <ScrollView style={{ flexShrink: 1, flexGrow: 0 }} onScroll={handleScroll} ref={scrollViewRef} keyboardShouldPersistTaps={'always'}>
         <View style={{ ...styles.listContainer, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
           <ListItem name={defaultList.name} id={defaultList.id} index={-2} loading={false} onPress={() => handleToggleList(defaultList)} activeId={currentList.id} showMenu={showMenu} />
@@ -362,7 +363,7 @@ const List = memo(({ setVisiblePanel, currentList, handleCancelMultiSelect }) =>
         </View>
       </ConfirmAlert>
       <ImportExport actionType={actionType} visible={isShowChoosePath} hide={() => setShowChoosePath(false)} selectedListRef={selectedListRef} />
-    </View>
+    </>
   )
 })
 
@@ -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 (
-    <DorpDownPanel
-      visible={visiblePanel}
-      setVisible={setVisiblePanel}
-      PanelContent={<List setVisiblePanel={setVisiblePanel} currentList={currentList} handleCancelMultiSelect={handleCancelMultiSelect} />}
-    >
-      <View style={{ ...styles.currentList, borderBottomWidth: BorderWidths.normal, borderBottomColor: theme.borderColor }}>
+    <View>
+      <TouchableOpacity onPress={showPopup} style={{ ...styles.currentList, borderBottomWidth: BorderWidths.normal, borderBottomColor: theme.borderColor }}>
         <Text numberOfLines={1} style={{ ...styles.sourceMenu, color: theme.secondary, flex: 1 }}>{currentList.name}</Text>
         <TouchableOpacity style={styles.btns} onPress={showListSearchBar}>
           <Icon style={{ color: theme.secondary30, fontSize: 16 }} name="search-2" />
         </TouchableOpacity>
-      </View>
-    </DorpDownPanel>
+      </TouchableOpacity>
+      <Popup visible={visiblePanel} hide={hidePopup} title={t('nav__my_list')}>
+        <List setVisiblePanel={setVisiblePanel} currentList={currentList} handleCancelMultiSelect={handleCancelMultiSelect} />
+      </Popup>
+    </View>
   )
 })
 
@@ -397,9 +404,9 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
   },
 
-  container: {
-    borderBottomWidth: BorderWidths.normal2,
-  },
+  // container: {
+  //   borderBottomWidth: BorderWidths.normal2,
+  // },
   listContainer: {
     // borderBottomWidth: BorderWidths.normal2,
   },

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 (
-    <View style={{ ...styles.container, borderBottomColor: theme.secondary10 }}>
-      <ScrollView style={{ flexShrink: 1, flexGrow: 0 }} keyboardShouldPersistTaps={'always'}>
-        <View style={{ ...styles.tagContainer, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
-          <View style={{ ...styles.tagTypeList, marginTop: 10 }}>
-            <Button style={{ ...styles.tagButton, backgroundColor: theme.secondary45 }} onPress={() => setTagInfo('默认', null)}>
-              <Text style={{ ...styles.tagButtonText, color: songListTagInfo.id == null ? theme.secondary : theme.normal10 }}>默认</Text>
-            </Button>
-          </View>
-          {tagsList.map((type, index) => <TagType key={index} name={type.name} list={type.list} activeId={songListTagInfo.id} setTagInfo={setTagInfo} />)}
+    <ScrollView style={{ flexShrink: 1, flexGrow: 0 }} keyboardShouldPersistTaps={'always'}>
+      <View style={{ ...styles.tagContainer, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
+        <View style={{ ...styles.tagTypeList, marginTop: 10 }}>
+          <Button style={{ ...styles.tagButton, backgroundColor: theme.secondary45 }} onPress={() => setTagInfo('默认', null)}>
+            <Text style={{ ...styles.tagButtonText, color: songListTagInfo.id == null ? theme.secondary : theme.normal10 }}>默认</Text>
+          </Button>
         </View>
-      </ScrollView>
-    </View>
+        {tagsList.map((type, index) => <TagType key={index} name={type.name} list={type.list} activeId={songListTagInfo.id} setTagInfo={setTagInfo} />)}
+      </View>
+    </ScrollView>
   )
 })
 
@@ -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 (
-    <DorpDownPanel
-      visible={visiblePanel}
-      setVisible={setVisiblePanel}
-      PanelContent={<Tags setVisiblePanel={setVisiblePanel} />}
-    >
-      <Text style={{ ...styles.sourceMenu, color: theme.normal }}>{songListTagInfo.name}</Text>
-    </DorpDownPanel>
+    <>
+      <TouchableOpacity style={styles.listName} onPress={() => setVisiblePanel(true)}>
+        <Text style={{ ...styles.sourceMenu, color: theme.normal }}>{songListTagInfo.name}</Text>
+      </TouchableOpacity>
+      <Popup
+        visible={visiblePanel}
+        hide={() => setVisiblePanel(false)}
+        title={t('songlist__tags')}
+      >
+        <Tags setVisiblePanel={setVisiblePanel} />
+      </Popup>
+    </>
   )
 })
 
@@ -98,9 +102,6 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
   },
 
-  container: {
-    borderBottomWidth: BorderWidths.normal2,
-  },
   tagContainer: {
     paddingLeft: 15,
     paddingBottom: 15,

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(() => (
+    <TouchableOpacity style={styles.btn} onPress={() => !isActive && onPress(index)}>
+      <Icon name={info.icon} style={{ ...styles.icon, color: isActive ? theme.secondary : theme.normal10 }} size={18} />
+      {/* <Text style={{ ...style.btnText, color: isActive ? theme.secondary : theme.normal10 }}>{info.name}</Text> */}
+    </TouchableOpacity>
+  ), [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 (
+    <View style={{ ...styles.container, borderRightColor: theme.borderColor }}>
+      {/* <View style={styles.left}> */}
+        {menus.map((item, index) => <HeaderItem info={item} index={index} key={item.id} onPress={setNavActiveIndex} />)}
+      {/* </View>
+      <View style={styles.right}>
+        <HeaderItem info={settingItem} index={-1} onPress={() => navigations.pushSettingScreen(componentId)} />
+      </View> */}
+    </View>
+  )
+}
+
+
+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

src/screens/Home/components/Main.js

@@ -204,6 +204,7 @@ const styles = StyleSheet.create({
   },
   pagerView: {
     flex: 1,
+    overflow: 'hidden',
   },
   pageStyle: {
     // alignItems: 'center',

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 (
+    <>
+      <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%' }}>
+          {/* <Aside /> */}
+          <Main />
+          <FooterPlayer />
+        </View>
+      </View>
+   </>
+  )
+}
 
 export default (props) => {
   const theme = useGetter('common', 'theme')
+  const { window } = useDimensions()
   const setComponentId = useDispatch('common', 'setComponentId')
   useEffect(() => {
     setComponentId({ name: 'home', id: props.componentId })
@@ -17,13 +43,15 @@ export default (props) => {
   }, [])
 
   return (
-    <>
-      <Header componentId={props.componentId} />
-      <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}>
-        {/* <Aside /> */}
-        <Main />
-        <FooterPlayer />
-      </View>
-    </>
+    window.height > window.width
+      ? <>
+        <Header componentId={props.componentId} />
+        <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}>
+          {/* <Aside /> */}
+          <Main />
+          <FooterPlayer />
+        </View>
+      </>
+      : <Landscape componentId={props.componentId} theme={theme} />
   )
 }

src/screens/PlayDetail/Landscape/components/Header.js

@@ -7,6 +7,7 @@ import { useGetter, useDispatch } from '@/store'
 import { pop } from '@/navigation'
 import Popup from '@/components/common/Popup'
 import Slider from '@/components/common/Slider'
+import { useTranslation } from '@/plugins/i18n'
 // import { AppColors } from '@/theme'
 
 const LrcFontSizeStyles = StyleSheet.create({
@@ -57,15 +58,16 @@ const LrcFontSize = () => {
 }
 
 const Setting = ({ visible, hide }) => {
+  const { t } = useTranslation()
   return (
     <Popup
-        visible={visible}
-        hideDialog={hide}
-        position='left'
-        style={{ width: '35%' }}
-      >
-        <LrcFontSize />
-      </Popup>
+      visible={visible}
+      hide={hide}
+      position='left'
+      title={t('player__setting_lrc_font_size')}
+    >
+      <LrcFontSize />
+    </Popup>
   )
 }
 

src/screens/PlayDetail/Portrait/components/Header.js

@@ -7,6 +7,7 @@ import { useGetter, useDispatch } from '@/store'
 import { pop } from '@/navigation'
 import Popup from '@/components/common/Popup'
 import Slider from '@/components/common/Slider'
+import { useTranslation } from '@/plugins/i18n'
 // import { AppColors } from '@/theme'
 
 const LrcFontSizeStyles = StyleSheet.create({
@@ -56,14 +57,15 @@ const LrcFontSize = () => {
 }
 
 const Setting = ({ visible, hide }) => {
+  const { t } = useTranslation()
   return (
     <Popup
-        visible={visible}
-        hideDialog={hide}
-        title=''
-      >
-        <LrcFontSize />
-      </Popup>
+      visible={visible}
+      hide={hide}
+      title={t('player__setting_lrc_font_size')}
+    >
+      <LrcFontSize />
+    </Popup>
   )
 }