优化分屏下的布局适配

android/app/src/main/java/cn/toside/music/mobile/userApi/Console.java

@@ -15,7 +15,7 @@ public class Console implements QuickJSContext.Console {
 
   private void sendLog(String type, String log) {
     Message message = this.eventHandler.obtainMessage();
-    message.what = 1001;
+    message.what = HandlerWhat.LOG;
     message.obj = new Object[]{type, log};
     Log.d("UserApi Log", "[" + type + "]" + log);
     this.eventHandler.sendMessage(message);

src/components/player/ProgressBar.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { View, PanResponder } from 'react-native'
 import { createStyle } from '@/utils/tools'
 import { useTheme } from '@/store/theme/hook'
-import { scaleSizeW } from '@/utils/pixelRatio'
+import { scaleSizeW, scaleSizeH } from '@/utils/pixelRatio'
 import { useDrag } from '@/utils/hooks'
 // import { AppColors } from '@/theme'
 
@@ -95,11 +95,9 @@ const Progress = ({ progress, duration }: {
       width: progressDotSize,
       height: progressDotSize,
       borderRadius: progressDotSize,
-      position: 'absolute',
       right: -progressDotSize / 2,
-      top: -(progressDotSize - progressHeight) / 2,
+      top: -(progressDotSize - progressHeightSize) / 2,
       backgroundColor: theme['c-primary-light-100'],
-      zIndex: 9,
     } as const
   }, [theme])
 
@@ -121,6 +119,7 @@ const Progress = ({ progress, duration }: {
 
 const progressContentPadding = 10
 const progressHeight = 3.6
+const progressHeightSize = scaleSizeH(progressHeight)
 let progressDotSize = Math.round(scaleSizeW(12))
 if (progressDotSize % 2 != 0) progressDotSize += 1
 const styles = createStyle({
@@ -137,12 +136,12 @@ const styles = createStyle({
     borderRadius: 4,
   },
   progressDot: {
-    width: progressDotSize,
-    height: progressDotSize,
-    borderRadius: progressDotSize,
+    // width: progressDotSize,
+    // height: progressDotSize,
+    // borderRadius: progressDotSize,
     position: 'absolute',
-    right: -progressDotSize / 2,
-    top: -(progressDotSize - progressHeight) / 2,
+    // right: -progressDotSize / 2,
+    // top: -(progressDotSize - progressHeight) / 2,
     zIndex: 9,
   },
   pressBar: {

src/screens/PlayDetail/Horizontal/Pic.tsx

@@ -61,10 +61,12 @@ export default memo(({ componentId }: { componentId: string }) => {
 
 const styles = createStyle({
   container: {
-    flex: 0,
+    flexShrink: 1,
+    flexGrow: 0,
     justifyContent: 'center',
     alignItems: 'center',
     // backgroundColor: 'rgba(0,0,0,0.1)',
+    overflow: 'hidden',
   },
   content: {
     // elevation: 3,

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

@@ -7,6 +7,7 @@ import { playNext, playPrev, togglePlay } from '@/core/player/player'
 import { useIsPlay } from '@/store/player/hook'
 import { useLayout } from '@/utils/hooks'
 import { marginLeft } from '../constant'
+import { BTN_WIDTH } from '../MoreBtn/Btn'
 
 // const WIDTH = scaleSizeW(48)
 
@@ -43,9 +44,10 @@ const TogglePlayBtn = ({ size }: { size: number }) => {
   )
 }
 
+const MIN_SIZE = BTN_WIDTH * 1.1
 export default () => {
   const { onLayout, height, width } = useLayout()
-  const size = Math.min(height * 0.65, (width - marginLeft) * 0.52 * 0.3) * global.lx.fontSize
+  const size = Math.max(Math.min(height * 0.65, (width - marginLeft) * 0.52 * 0.3) * global.lx.fontSize, MIN_SIZE)
   return (
     <View style={{ ...styles.content, gap: size * 0.5 }} onLayout={onLayout}>
       <PrevBtn size={size} />
@@ -58,7 +60,8 @@ export default () => {
 
 const styles = StyleSheet.create({
   content: {
-    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
     flexDirection: 'row',
     // paddingVertical: 8,
     gap: 22,

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

@@ -20,9 +20,8 @@ export default memo(() => {
 
 const styles = createStyle({
   container: {
-    flex: 1,
-    // flexShrink: 0,
-    // flexGrow: 1,
+    flexShrink: 0,
+    flexGrow: 1,
     marginLeft: marginLeftRaw,
     // paddingRight: 15,
     // backgroundColor: 'rgba(0,0,0,0.1)',

src/screens/PlayDetail/Horizontal/index.tsx

@@ -84,7 +84,8 @@ const styles = createStyle({
     // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   leftContent: {
-    flex: 0,
+    flexShrink: 1,
+    flexGrow: 0,
     marginLeft: marginLeftRaw,
     // flexDirection: 'row',
     // backgroundColor: 'rgba(0,0,0,0.1)',

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

@@ -6,9 +6,7 @@ import { playNext, playPrev, togglePlay } from '@/core/player/player'
 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)
+import { BTN_WIDTH } from './MoreBtn/Btn'
 
 const PrevBtn = ({ size }: { size: number }) => {
   const theme = useTheme()
@@ -43,9 +41,11 @@ const TogglePlayBtn = ({ size }: { size: number }) => {
   )
 }
 
+const MIN_SIZE = BTN_WIDTH * 1.2
+
 export default () => {
   const { onLayout, height, width } = useLayout()
-  const size = Math.min(height * 0.5, width * 0.4 * 0.33) * global.lx.fontSize
+  const size = Math.max(Math.min(height * 0.5, width * 0.4 * 0.33) * global.lx.fontSize, MIN_SIZE)
 
   return (
     <View style={styles.conatiner} onLayout={onLayout}>
@@ -62,11 +62,10 @@ const styles = createStyle({
     flexDirection: 'row',
     justifyContent: 'space-evenly',
     alignItems: 'center',
-    flex: 1,
-    paddingLeft: '4%',
-    paddingRight: '4%',
-    // paddingTop: '8.6%',
-    // paddingBottom: '8.6%',
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingHorizontal: '4%',
+    paddingVertical: 6,
     // backgroundColor: 'rgba(0, 0, 0, .1)',
   },
   cotrolBtn: {

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

@@ -25,7 +25,8 @@ export default memo(() => {
 
 const styles = createStyle({
   container: {
-    flex: 1,
+    flexShrink: 1,
+    flexGrow: 1,
     width: '100%',
     // paddingTop: progressContentPadding,
     // marginTop: -progressContentPadding,
@@ -38,7 +39,7 @@ const styles = createStyle({
   info: {
     flex: 0,
     flexDirection: 'row',
-    paddingBottom: 5,
+    // paddingBottom: 5,
     // justifyContent: 'flex-end',
   },
   status: {

src/screens/PlayDetail/Vertical/index.tsx

@@ -1,5 +1,5 @@
 import { memo, useState, useRef, useMemo, useEffect } from 'react'
-import { View, StyleSheet, AppState } from 'react-native'
+import { View, AppState } from 'react-native'
 
 import Header from './components/Header'
 // import Aside from './components/Aside'
@@ -76,7 +76,7 @@ export default memo(({ componentId }: { componentId: string }) => {
         <PagerView
           onPageSelected={onPageSelected}
           // onPageScrollStateChanged={onPageScrollStateChanged}
-          style={styles.pagerView}
+          style={{ flexGrow: 0, flexShrink: 1, height: `${64 * global.lx.fontSize}%` }}
         >
           <View collapsable={false}>
             <Pic componentId={componentId} />
@@ -89,7 +89,7 @@ export default memo(({ componentId }: { componentId: string }) => {
           <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 0 ? theme.secondary20 : theme.normal60 }}></View>
           <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 1 ? theme.secondary20 : theme.normal60 }}></View>
         </View> */}
-        <View style={{ flex: 0, height: `${36 * global.lx.fontSize}%` }} nativeID={NAV_SHEAR_NATIVE_IDS.playDetail_player}>
+        <View style={{ flexGrow: 1, flexShrink: 0 }} nativeID={NAV_SHEAR_NATIVE_IDS.playDetail_player}>
           <Player />
         </View>
       </View>
@@ -97,32 +97,32 @@ export default memo(({ componentId }: { componentId: string }) => {
   )
 })
 
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    flexShrink: 1,
-    backgroundColor: '#fff',
-  },
-  pagerView: {
-    flex: 1,
-  },
-  pageIndicator: {
-    flex: 0,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingTop: 10,
-    // backgroundColor: 'rgba(0,0,0,0.1)',
-  },
-  pageIndicatorItem: {
-    height: 3,
-    width: '5%',
-    marginLeft: 2,
-    marginRight: 2,
-    borderRadius: 2,
-  },
-  // player: {
-  //   flex: 0,
-  //   height: '36%',
-  //   // backgroundColor: 'rgba(0,0,0,0.1)',
-  // },
-})
+// const styles = StyleSheet.create({
+//   // container: {
+//   //   flexGrow: 1,
+//   //   flexShrink: 0,
+//   //   backgroundColor: '#fff',
+//   // },
+//   pagerView: {
+//     flex: 1,
+//   },
+//   pageIndicator: {
+//     flex: 0,
+//     flexDirection: 'row',
+//     justifyContent: 'center',
+//     paddingTop: 10,
+//     // backgroundColor: 'rgba(0,0,0,0.1)',
+//   },
+//   pageIndicatorItem: {
+//     height: 3,
+//     width: '5%',
+//     marginLeft: 2,
+//     marginRight: 2,
+//     borderRadius: 2,
+//   },
+//   // player: {
+//   //   flex: 0,
+//   //   height: '36%',
+//   //   // backgroundColor: 'rgba(0,0,0,0.1)',
+//   // },
+// })