优化播放详情页歌曲封面对屏幕大小的适配，修改横屏下的控制栏按钮布局

publish/changeLog.md

@@ -8,6 +8,7 @@
 - 添加是否忽略电池优化检查，用于提醒用户添加白名单，确保APP后台播放稳定性
 - 在设置界面返回时，不再直接返回桌面，将回到进入设置界面前的界面，再非设置界面返回时才会返回桌面
 - 更新播放栏进度条样式，进度条允许拖动调整进度
+- 优化播放详情页歌曲封面对屏幕大小的适配，修改横屏下的控制栏按钮布局
 
 ### 修复
 

src/screens/Home/Views/Setting/Horizontal/index.tsx

@@ -14,7 +14,7 @@ const styles = createStyle({
   },
   nav: {
     height: '100%',
-    width: '18%',
+    width: '22%',
     borderRightWidth: BorderWidths.normal,
   },
   main: {

src/screens/PlayDetail/Horizontal/MoreBtn/index.tsx

@@ -25,8 +25,8 @@ const styles = createStyle({
     justifyContent: 'center',
     position: 'absolute',
     height: '100%',
-    left: 15,
+    left: 0,
     gap: 16,
-    zIndex: 1,
+    // zIndex: 1,
   },
 })

src/screens/PlayDetail/Horizontal/Pic.tsx

@@ -1,5 +1,5 @@
 import { memo, useState } from 'react'
-import { View, Image, StyleSheet } from 'react-native'
+import { View, Image } from 'react-native'
 // import { useLayout } from '@/utils/hooks'
 import { useTheme } from '@/store/theme/hook'
 import { BorderRadius } from '@/theme'
@@ -8,6 +8,11 @@ import { usePlayerMusicInfo } from '@/store/player/hook'
 import { useWindowSize } from '@/utils/hooks'
 import { useNavigationComponentDidAppear } from '@/navigation'
 import { NAV_SHEAR_NATIVE_IDS } from '@/config/constant'
+import { createStyle } from '@/utils/tools'
+import StatusBar from '@/components/common/StatusBar'
+import { HEADER_HEIGHT } from './components/Header'
+import { BTN_WIDTH } from './MoreBtn/Btn'
+import { marginLeft } from './constant'
 
 const EmptyPic = memo(({ width }: { width: number }) => {
   const theme = useTheme()
@@ -30,10 +35,10 @@ export default memo(({ componentId }: { componentId: string }) => {
     setAnimated(true)
   })
 
-  const imgWidth = Math.min(winWidth * 0.6 * 0.5, winHeight * 0.5)
+  const imgWidth = Math.min((winWidth * 0.45 - marginLeft - BTN_WIDTH) * 0.76, (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.62)
 
   return (
-    <View style={styles.container}>
+    <View style={{ ...styles.container, height: (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.66 }}>
       <View style={{ ...styles.content, elevation: animated ? 3 : 0 }}>
         {
           musicInfo.pic
@@ -51,10 +56,9 @@ export default memo(({ componentId }: { componentId: string }) => {
   )
 })
 
-const styles = StyleSheet.create({
+const styles = createStyle({
   container: {
-    flexGrow: 1,
+    flex: 0,
-    flexShrink: 1,
     justifyContent: 'center',
     alignItems: 'center',
     // backgroundColor: 'rgba(0,0,0,0.1)',

src/screens/PlayDetail/Horizontal/Player/ControlBtn.tsx

@@ -3,11 +3,12 @@ import { Icon } from '@/components/common/Icon'
 import { useTheme } from '@/store/theme/hook'
 // import { useIsPlay } from '@/store/player/hook'
 import { playNext, playPrev, togglePlay } from '@/core/player/player'
-import { scaleSizeW } from '@/utils/pixelRatio'
+// import { scaleSizeW } from '@/utils/pixelRatio'
 import { useIsPlay } from '@/store/player/hook'
 import { useLayout } from '@/utils/hooks'
+import { marginLeft } from '../constant'
 
-const WIDTH = scaleSizeW(48)
+// const WIDTH = scaleSizeW(48)
 
 const PrevBtn = ({ size }: { size: number }) => {
   const theme = useTheme()
@@ -15,8 +16,8 @@ const PrevBtn = ({ size }: { size: number }) => {
     void playPrev()
   }
   return (
-    <TouchableOpacity style={{ ...styles.cotrolBtn, width: WIDTH, height: WIDTH }} activeOpacity={0.5} onPress={handlePlayPrev}>
+    <TouchableOpacity style={{ ...styles.cotrolBtn, width: size, height: size }} activeOpacity={0.5} onPress={handlePlayPrev}>
-      <Icon name='prevMusic' color={theme['c-button-font']} rawSize={size} />
+      <Icon name='prevMusic' color={theme['c-button-font']} rawSize={size * 0.7} />
     </TouchableOpacity>
   )
 }
@@ -26,8 +27,8 @@ const NextBtn = ({ size }: { size: number }) => {
     void playNext()
   }
   return (
-    <TouchableOpacity style={{ ...styles.cotrolBtn, width: WIDTH, height: WIDTH }} activeOpacity={0.5} onPress={handlePlayNext}>
+    <TouchableOpacity style={{ ...styles.cotrolBtn, width: size, height: size }} activeOpacity={0.5} onPress={handlePlayNext}>
-      <Icon name='nextMusic' color={theme['c-button-font']} rawSize={size} />
+      <Icon name='nextMusic' color={theme['c-button-font']} rawSize={size * 0.7} />
     </TouchableOpacity>
   )
 }
@@ -36,17 +37,17 @@ const TogglePlayBtn = ({ size }: { size: number }) => {
   const theme = useTheme()
   const isPlay = useIsPlay()
   return (
-    <TouchableOpacity style={{ ...styles.cotrolBtn, width: WIDTH, height: WIDTH }} activeOpacity={0.5} onPress={togglePlay}>
+    <TouchableOpacity style={{ ...styles.cotrolBtn, width: size, height: size }} activeOpacity={0.5} onPress={togglePlay}>
-      <Icon name={isPlay ? 'pause' : 'play'} color={theme['c-button-font']} rawSize={size} />
+      <Icon name={isPlay ? 'pause' : 'play'} color={theme['c-button-font']} rawSize={size * 0.7} />
     </TouchableOpacity>
   )
 }
 
 export default () => {
-  const { onLayout, height } = useLayout()
+  const { onLayout, height, width } = useLayout()
-  const size = height * 0.55
+  const size = Math.min(height * 0.65, (width - marginLeft) * 0.7 * 0.3)
   return (
-    <View style={styles.content} onLayout={onLayout}>
+    <View style={{ ...styles.content, gap: size * 0.5 }} onLayout={onLayout}>
       <PrevBtn size={size} />
       <TogglePlayBtn size={size}/>
       <NextBtn size={size} />
@@ -57,10 +58,13 @@ export default () => {
 
 const styles = StyleSheet.create({
   content: {
-    flexGrow: 0,
+    flex: 1,
     flexDirection: 'row',
-    paddingVertical: 8,
+    // paddingVertical: 8,
     gap: 22,
+    // backgroundColor: 'rgba(0,0,0,0.1)',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   cotrolBtn: {
     justifyContent: 'center',

src/screens/PlayDetail/Horizontal/Player/index.tsx

@@ -6,14 +6,13 @@ import { createStyle } from '@/utils/tools'
 import { NAV_SHEAR_NATIVE_IDS } from '@/config/constant'
 import PlayInfo from './PlayInfo'
 import ControlBtn from './ControlBtn'
+import { marginLeftRaw } from '../constant'
 
 
 export default memo(() => {
   return (
     <View style={styles.container} nativeID={NAV_SHEAR_NATIVE_IDS.playDetail_player}>
-      <View style={styles.controlBtn}>
+      <ControlBtn />
-        <ControlBtn />
-      </View>
       <PlayInfo />
     </View>
   )
@@ -21,21 +20,11 @@ export default memo(() => {
 
 const styles = createStyle({
   container: {
-    flexShrink: 0,
+    flex: 1,
-    flexGrow: 0,
+    // flexShrink: 0,
-    paddingLeft: 15,
+    // flexGrow: 1,
+    marginLeft: marginLeftRaw,
     // paddingRight: 15,
     // backgroundColor: 'rgba(0,0,0,0.1)',
-
-  },
-  controlBtn: {
-    flexShrink: 0,
-    flexGrow: 0,
-    flexDirection: 'row',
-    // alignItems: 'flex-end',
-    justifyContent: 'center',
-    paddingTop: 8,
-    // paddingLeft: 5,
-    // paddingBottom: 10,
   },
 })

src/screens/PlayDetail/Horizontal/components/Header.tsx

@@ -14,7 +14,7 @@ import CommentBtn from './CommentBtn'
 import Btn from './Btn'
 import SettingPopup, { type SettingPopupType } from '../../components/SettingPopup'
 
-const HEADER_HEIGHT = scaleSizeH(_HEADER_HEIGHT)
+export const HEADER_HEIGHT = scaleSizeH(_HEADER_HEIGHT)
 
 const Title = () => {
   const theme = useTheme()

src/screens/PlayDetail/Horizontal/constant.ts

@@ -0,0 +1,4 @@
+import { scaleSizeW } from '@/utils/pixelRatio'
+
+export const marginLeftRaw = 15
+export const marginLeft = scaleSizeW(marginLeftRaw)

src/screens/PlayDetail/Horizontal/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useEffect } from 'react'
-import { View, StyleSheet, AppState } from 'react-native'
+import { View, AppState } from 'react-native'
 import { screenkeepAwake, screenUnkeepAwake } from '@/utils/nativeModules/utils'
 import StatusBar from '@/components/common/StatusBar'
-import MoreBtn from './Player/MoreBtn'
+import MoreBtn from './MoreBtn'
 
 import Header from './components/Header'
 import { setComponentId } from '@/core/common'
@@ -14,6 +14,8 @@ import Pic from './Pic'
 // import ControlBtn from './ControlBtn'
 import Lyric from './Lyric'
 import Player from './Player'
+import { createStyle } from '@/utils/tools'
+import { marginLeftRaw } from './constant'
 // import MoreBtn from './MoreBtn2'
 
 export default memo(({ componentId }: { componentId: string }) => {
@@ -70,7 +72,7 @@ export default memo(({ componentId }: { componentId: string }) => {
   )
 })
 
-const styles = StyleSheet.create({
+const styles = createStyle({
   container: {
     flex: 1,
     flexDirection: 'row',
@@ -79,12 +81,13 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '45%',
     paddingBottom: 10,
-    // backgroundColor: '#eee',
+    // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   leftContent: {
-    flex: 1,
+    flex: 0,
-    paddingLeft: 15,
+    marginLeft: marginLeftRaw,
-    flexDirection: 'column',
+    // flexDirection: 'row',
+    // backgroundColor: 'rgba(0,0,0,0.1)',
     // alignItems: 'center',
   },
   right: {

src/screens/PlayDetail/Vertical/Pic.tsx

@@ -9,6 +9,8 @@ import { useWindowSize } from '@/utils/hooks'
 import Text from '@/components/common/Text'
 import { NAV_SHEAR_NATIVE_IDS } from '@/config/constant'
 import { useNavigationComponentDidAppear } from '@/navigation'
+import StatusBar from '@/components/common/StatusBar'
+import { HEADER_HEIGHT } from './components/Header'
 
 const EmptyPic = memo(({ width }: { width: number }) => {
   const theme = useTheme()
@@ -23,7 +25,7 @@ const EmptyPic = memo(({ width }: { width: number }) => {
 
 export default ({ componentId }: { componentId: string }) => {
   const musicInfo = usePlayerMusicInfo()
-  const windowSize = useWindowSize()
+  const { width: winWidth, height: winHeight } = useWindowSize()
 
   const [animated, setAnimated] = useState(false)
 
@@ -32,7 +34,7 @@ export default ({ componentId }: { componentId: string }) => {
   })
   // console.log('render pic')
 
-  const imgWidth = windowSize.width * 0.8
+  const imgWidth = Math.min(winWidth * 0.8, (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.58)
 
   return (
     <View style={styles.container}>

src/screens/PlayDetail/Vertical/Player/components/ControlBtn.tsx

@@ -1,58 +1,74 @@
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import { Icon } from '@/components/common/Icon'
 import { useTheme } from '@/store/theme/hook'
 // import { useIsPlay } from '@/store/player/hook'
 import { playNext, playPrev, togglePlay } from '@/core/player/player'
-import { scaleSizeW } from '@/utils/pixelRatio'
 import { useIsPlay } from '@/store/player/hook'
+import { createStyle } from '@/utils/tools'
+import { useLayout } from '@/utils/hooks'
+// import { scaleSizeW } from '@/utils/pixelRatio'
 
-const WIDTH = scaleSizeW(50)
+// const WIDTH = scaleSizeW(50)
 
-const PrevBtn = () => {
+const PrevBtn = ({ size }: { size: number }) => {
   const theme = useTheme()
   const handlePlayPrev = () => {
     void playPrev()
   }
   return (
-    <TouchableOpacity style={{ ...styles.cotrolBtn, width: WIDTH, height: WIDTH }} activeOpacity={0.5} onPress={handlePlayPrev}>
+    <TouchableOpacity style={{ ...styles.cotrolBtn, width: size, height: size }} activeOpacity={0.5} onPress={handlePlayPrev}>
-      <Icon name='prevMusic' color={theme['c-button-font']} size={38} />
+      <Icon name='prevMusic' color={theme['c-button-font']} rawSize={size * 0.7} />
     </TouchableOpacity>
   )
 }
-const NextBtn = () => {
+const NextBtn = ({ size }: { size: number }) => {
   const theme = useTheme()
   const handlePlayNext = () => {
     void playNext()
   }
   return (
-    <TouchableOpacity style={{ ...styles.cotrolBtn, width: WIDTH, height: WIDTH }} activeOpacity={0.5} onPress={handlePlayNext}>
+    <TouchableOpacity style={{ ...styles.cotrolBtn, width: size, height: size }} activeOpacity={0.5} onPress={handlePlayNext}>
-      <Icon name='nextMusic' color={theme['c-button-font']} size={38} />
+      <Icon name='nextMusic' color={theme['c-button-font']} rawSize={size * 0.7} />
     </TouchableOpacity>
   )
 }
 
-const TogglePlayBtn = () => {
+const TogglePlayBtn = ({ size }: { size: number }) => {
   const theme = useTheme()
   const isPlay = useIsPlay()
   return (
-    <TouchableOpacity style={{ ...styles.cotrolBtn, width: WIDTH, height: WIDTH }} activeOpacity={0.5} onPress={togglePlay}>
+    <TouchableOpacity style={{ ...styles.cotrolBtn, width: size, height: size }} activeOpacity={0.5} onPress={togglePlay}>
-      <Icon name={isPlay ? 'pause' : 'play'} color={theme['c-button-font']} size={38} />
+      <Icon name={isPlay ? 'pause' : 'play'} color={theme['c-button-font']} rawSize={size * 0.7} />
     </TouchableOpacity>
   )
 }
 
 export default () => {
+  const { onLayout, height, width } = useLayout()
+  const size = Math.min(height * 0.95, width * 0.5 * 0.3)
+
   return (
-    <>
+    <View style={styles.conatiner} onLayout={onLayout}>
-      <PrevBtn />
+      <PrevBtn size={size} />
-      <TogglePlayBtn />
+      <TogglePlayBtn size={size}/>
-      <NextBtn />
+      <NextBtn size={size} />
-    </>
+    </View>
   )
 }
 
 
-const styles = StyleSheet.create({
+const styles = createStyle({
+  conatiner: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    flex: 1,
+    paddingLeft: '2%',
+    paddingRight: '2%',
+    // paddingTop: '8.6%',
+    // paddingBottom: '8.6%',
+    // backgroundColor: 'rgba(0, 0, 0, .1)',
+  },
   cotrolBtn: {
     justifyContent: 'center',
     alignItems: 'center',

src/screens/PlayDetail/Vertical/Player/components/MoreBtn/index.tsx

@@ -24,7 +24,7 @@ const styles = createStyle({
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-around',
     // backgroundColor: 'rgba(0,0,0,0.1)',
   },
 })

src/screens/PlayDetail/Vertical/Player/index.tsx

@@ -15,9 +15,7 @@ export default memo(() => {
       <View style={styles.status}>
         <PlayInfo />
       </View>
-      <View style={styles.control}>
+      <ControlBtn />
-        <ControlBtn />
-      </View>
       <View style={{ ...styles.info }} >
         <MoreBtn />
       </View>
@@ -27,6 +25,7 @@ export default memo(() => {
 
 const styles = createStyle({
   container: {
+    flex: 1,
     width: '100%',
     // paddingTop: progressContentPadding,
     // marginTop: -progressContentPadding,
@@ -34,33 +33,20 @@ const styles = createStyle({
     padding: 15,
     // backgroundColor: AppColors.primary,
     // backgroundColor: 'red',
+    flexDirection: 'column',
   },
   info: {
+    flex: 0,
     flexDirection: 'row',
     paddingBottom: 5,
-    justifyContent: 'flex-end',
+    // justifyContent: 'flex-end',
   },
   status: {
     marginTop: 10,
     flexDirection: 'column',
-    flexGrow: 1,
+    flex: 0,
-    flexShrink: 1,
     paddingLeft: 5,
     justifyContent: 'space-evenly',
-  },
+    // backgroundColor: 'rgba(0, 0, 0, .1)',
-  control: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    flexGrow: 0,
-    flexShrink: 0,
-    paddingLeft: '10%',
-    paddingRight: '10%',
-    paddingTop: '8.6%',
-    paddingBottom: '8.6%',
-  },
-  row: {
-    flexDirection: 'row',
-    flexGrow: 0,
-    flexShrink: 0,
   },
 })

src/screens/PlayDetail/Vertical/components/Header.tsx

@@ -13,7 +13,7 @@ import { HEADER_HEIGHT as _HEADER_HEIGHT, NAV_SHEAR_NATIVE_IDS } from '@/config/
 import commonState from '@/store/common/state'
 import SettingPopup, { type SettingPopupType } from '../../components/SettingPopup'
 
-const HEADER_HEIGHT = scaleSizeH(_HEADER_HEIGHT)
+export const HEADER_HEIGHT = scaleSizeH(_HEADER_HEIGHT)
 
 
 const Title = () => {

src/screens/PlayDetail/Vertical/index.tsx

@@ -122,5 +122,7 @@ const styles = StyleSheet.create({
   },
   player: {
     flex: 0,
+    height: '38%',
+    // backgroundColor: 'rgba(0,0,0,0.1)',
   },
 })