修改横屏播放详情页按钮大小

src/screens/PlayDetail/Landscape/ControlBtn.js

@@ -3,6 +3,7 @@ import { View, StyleSheet, TouchableOpacity } from 'react-native'
 import Icon from '@/components/common/Icon'
 import { useGetter, useDispatch } from '@/store'
 import { STATUS } from '@/store/modules/player'
+import { useDimensions } from '@/utils/hooks'
 
 
 export default ({ playNextModes }) => {
@@ -22,11 +23,14 @@ export default ({ playNextModes }) => {
   //   setPlayNextMode(playNextModes[index] || '')
   // }, [setPlayNextMode, togglePlayMethod, playNextModes])
 
+  const { window } = useDimensions()
+  const width = useMemo(() => window.width * 0.4 * 0.56 * 0.33 * 0.56, [window.width])
+
   const btnPrev = useMemo(() => (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playPrev}>
-      <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={26} />
+      <Icon name='prevMusic' style={{ color: theme.secondary10 }} size={width} />
     </TouchableOpacity>
-  ), [playPrev, theme])
+  ), [playPrev, theme, width])
 
   const togglePlay = useCallback(playStatus => {
     switch (playStatus) {
@@ -45,14 +49,14 @@ export default ({ playNextModes }) => {
   }, [])
   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={26} />
+      <Icon name={playStatus == STATUS.playing ? 'pause' : 'play'} style={{ color: theme.secondary10 }} size={width} />
     </TouchableOpacity>
-  ), [playStatus, theme, togglePlay])
+  ), [playStatus, theme, togglePlay, width])
   const btnNext = useMemo(() => (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={playNext}>
-      <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={26} />
+      <Icon name='nextMusic' style={{ color: theme.secondary10 }} size={width} />
     </TouchableOpacity>
-  ), [playNext, theme])
+  ), [playNext, theme, width])
 
   return (
     <View style={styles.container}>
@@ -72,14 +76,15 @@ export default ({ playNextModes }) => {
 
 const styles = StyleSheet.create({
   container: {
-    flexGrow: 0,
+    flex: 0,
     flexDirection: 'row',
     paddingLeft: 15,
     // paddingRight: 15,
+    width: '56%',
   },
   cotrolBtn: {
-    width: 52,
+    width: '33.33%',
-    height: 52,
+    aspectRatio: 1,
     justifyContent: 'center',
     alignItems: 'center',
 

src/screens/PlayDetail/Landscape/MoreBtn/MusicAddBtn.js

@@ -5,7 +5,7 @@ import { useGetter, useDispatch } from '@/store'
 import MusicAddModal from '@/components/MusicAddModal'
 
 
-export default memo(() => {
+export default memo(({ width }) => {
   const theme = useGetter('common', 'theme')
   const [visibleMusicAddModal, setVisibleMusicAddModal] = useState(false)
   const playMusicInfo = useGetter('player', 'playMusicInfo')
@@ -22,7 +22,7 @@ export default memo(() => {
   return (
     <>
       <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={handleShowMusicAddModal}>
-        <Icon name="add-music" style={{ color: theme.normal30 }} size={22} />
+        <Icon name="add-music" style={{ color: theme.normal30 }} size={width} />
       </TouchableOpacity>
       <MusicAddModal
         visible={visibleMusicAddModal}
@@ -34,9 +34,9 @@ export default memo(() => {
 
 const styles = StyleSheet.create({
   cotrolBtn: {
-    marginRight: 5,
+    marginRight: '1%',
-    width: 28,
+    width: '25%',
-    height: 28,
+    aspectRatio: 1,
     justifyContent: 'center',
     alignItems: 'center',
 

src/screens/PlayDetail/Landscape/MoreBtn/PlayModeBtn.js

@@ -11,7 +11,7 @@ const playNextModes = [
   'singleLoop',
 ]
 
-export default memo(() => {
+export default memo(({ width }) => {
   const togglePlayMethod = useGetter('common', 'togglePlayMethod')
   const theme = useGetter('common', 'theme')
   const setPlayNextMode = useDispatch('common', 'setPlayNextMode')
@@ -67,16 +67,16 @@ export default memo(() => {
 
   return (
     <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={toggleNextPlayMode}>
-      <Icon name={playModeIcon} style={{ color: theme.normal30 }} size={22} />
+      <Icon name={playModeIcon} style={{ color: theme.normal30 }} size={width} />
     </TouchableOpacity>
   )
 })
 
 const styles = StyleSheet.create({
   cotrolBtn: {
-    marginRight: 5,
+    marginRight: '1%',
-    width: 28,
+    width: '25%',
-    height: 28,
+    aspectRatio: 1,
     justifyContent: 'center',
     alignItems: 'center',
 

src/screens/PlayDetail/Landscape/MoreBtn/TimeoutExit.js

@@ -40,7 +40,7 @@ const Status = ({ exitTime }) => {
   )
 }
 
-export default memo(() => {
+export default memo(({ width }) => {
   const theme = useGetter('common', 'theme')
   const [visibleAlert, setVisibleAlert] = useState(false)
   const { t } = useTranslation()
@@ -112,7 +112,7 @@ export default memo(() => {
   return (
     <>
       <TouchableOpacity style={{ ...styles.cotrolBtn }} activeOpacity={0.5} onPress={handleShowTimeoutAlert}>
-        <Icon name="alarm-snooze" style={{ color: timeInfo.active ? theme.secondary20 : theme.normal30 }} size={22} />
+        <Icon name="alarm-snooze" style={{ color: timeInfo.active ? theme.secondary20 : theme.normal30 }} size={width} />
       </TouchableOpacity>
       <ConfirmAlert
         visible={visibleAlert}
@@ -143,9 +143,9 @@ export default memo(() => {
 
 const styles = StyleSheet.create({
   cotrolBtn: {
-    marginRight: 5,
+    marginRight: '1%',
-    width: 28,
+    width: '25%',
-    height: 28,
+    aspectRatio: 1,
     justifyContent: 'center',
     alignItems: 'center',
 

src/screens/PlayDetail/Landscape/MoreBtn/index.js

@@ -3,13 +3,17 @@ import { View, StyleSheet } from 'react-native'
 import PlayModeBtn from './PlayModeBtn'
 import MusicAddBtn from './MusicAddBtn'
 import TimeoutExit from './TimeoutExit'
+import { useDimensions } from '@/utils/hooks'
 
 export default () => {
+  const { window } = useDimensions()
+  const width = useMemo(() => window.width * 0.4 * 0.4 * 0.3 * 0.6, [window.width])
+
   return (
     <View style={styles.container}>
-      <TimeoutExit />
+      <TimeoutExit width={width} />
-      <PlayModeBtn />
+      <PlayModeBtn width={width} />
-      <MusicAddBtn />
+      <MusicAddBtn width={width} />
     </View>
   )
 }
@@ -17,6 +21,7 @@ export default () => {
 
 const styles = StyleSheet.create({
   container: {
+    width: '40%',
     flexShrink: 0,
     flexGrow: 0,
     flexDirection: 'row',

src/screens/PlayDetail/Landscape/PlayBar/Progress.js

@@ -3,6 +3,7 @@ import { View, StyleSheet, TouchableOpacity, Pressable } from 'react-native'
 import { useLayout } from '@/utils/hooks'
 import { useGetter, useDispatch } from '@/store'
 // import { AppColors } from '@/theme'
+import { getWindowSise } from '@/utils/tools'
 
 
 const DefaultBar = memo(() => {
@@ -49,9 +50,10 @@ const Progress = ({ progress, bufferedProgress, duration }) => {
 }
 
 
-const progressContentPadding = 10
+const { width } = getWindowSise()
-const progressHeight = 3
+const progressContentPadding = width * 0.0140625
-const progressDotSize = 10
+const progressHeight = width * 0.0046875
+const progressDotSize = progressHeight * 4
 const styles = StyleSheet.create({
   progress: {
     width: '100%',

src/screens/PlayDetail/Landscape/PlayBar/index.js

@@ -1,24 +1,26 @@
 import React, { useCallback, memo, useMemo, useEffect } from 'react'
 import { Text, StyleSheet, View } from 'react-native'
-import { usePlayTime } from '@/utils/hooks'
+import { usePlayTime, useDimensions } from '@/utils/hooks'
 import { useGetter } from '@/store'
 
 import Progress from './Progress'
 import Status from './Status'
 
-const PlayTimeCurrent = ({ timeStr }) => {
+const PlayTimeCurrent = ({ timeStr, size }) => {
   const theme = useGetter('common', 'theme')
   // console.log(timeStr)
-  return <Text style={{ fontSize: 14, color: theme.normal10 }}>{timeStr}</Text>
+  return <Text style={{ fontSize: size, color: theme.normal10 }}>{timeStr}</Text>
 }
 
-const PlayTimeMax = memo(({ timeStr }) => {
+const PlayTimeMax = memo(({ timeStr, size }) => {
   const theme = useGetter('common', 'theme')
-  return <Text style={{ fontSize: 14, color: theme.normal10 }}>{timeStr}</Text>
+  return <Text style={{ fontSize: size, color: theme.normal10 }}>{timeStr}</Text>
 })
 
 export default () => {
   const { curTimeStr, maxTimeStr, progress, bufferedProgress, duration } = usePlayTime()
+  const { window } = useDimensions()
+  const size = useMemo(() => window.width * 0.4 * 0.4 * 0.14, [window.width])
 
   return (
     <View style={styles.container} nativeID="player">
@@ -28,9 +30,9 @@ export default () => {
           <Status />
         </View>
         <View style={{ flexGrow: 0, flexShrink: 0, flexDirection: 'row' }} >
-          <PlayTimeCurrent timeStr={curTimeStr} />
+          <PlayTimeCurrent size={size} timeStr={curTimeStr} />
-          <Text style={{ fontSize: 14 }}> / </Text>
+          <Text style={{ fontSize: size }}> / </Text>
-          <PlayTimeMax timeStr={maxTimeStr} />
+          <PlayTimeMax size={size} timeStr={maxTimeStr} />
         </View>
       </View>
     </View>