From b05c575211d2814ca24537ab1d5fc1a7e3acd7de Mon Sep 17 00:00:00 2001 From: lyswhut Date: Fri, 10 Nov 2023 15:23:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=92=AD=E6=94=BE=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E9=A1=B5=E6=AD=8C=E6=9B=B2=E5=B0=81=E9=9D=A2=E5=AF=B9?= =?UTF-8?q?=E5=B1=8F=E5=B9=95=E5=A4=A7=E5=B0=8F=E7=9A=84=E9=80=82=E9=85=8D?= =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=A8=AA=E5=B1=8F=E4=B8=8B=E7=9A=84?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E6=A0=8F=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish/changeLog.md | 1 + .../Home/Views/Setting/Horizontal/index.tsx | 2 +- .../Horizontal/{Player => }/MoreBtn/Btn.tsx | 0 .../{Player => }/MoreBtn/MusicAddBtn.tsx | 0 .../{Player => }/MoreBtn/PlayModeBtn.tsx | 0 .../{Player => }/MoreBtn/TimeoutExitBtn.tsx | 0 .../Horizontal/{Player => }/MoreBtn/index.tsx | 4 +- src/screens/PlayDetail/Horizontal/Pic.tsx | 16 +++--- .../Horizontal/Player/ControlBtn.tsx | 30 ++++++----- .../PlayDetail/Horizontal/Player/index.tsx | 23 +++----- .../Horizontal/components/Header.tsx | 2 +- src/screens/PlayDetail/Horizontal/constant.ts | 4 ++ src/screens/PlayDetail/Horizontal/index.tsx | 17 +++--- src/screens/PlayDetail/Vertical/Pic.tsx | 6 ++- .../Vertical/Player/components/ControlBtn.tsx | 52 ++++++++++++------- .../Player/components/MoreBtn/index.tsx | 2 +- .../PlayDetail/Vertical/Player/index.tsx | 28 +++------- .../PlayDetail/Vertical/components/Header.tsx | 2 +- src/screens/PlayDetail/Vertical/index.tsx | 2 + 19 files changed, 101 insertions(+), 90 deletions(-) rename src/screens/PlayDetail/Horizontal/{Player => }/MoreBtn/Btn.tsx (100%) rename src/screens/PlayDetail/Horizontal/{Player => }/MoreBtn/MusicAddBtn.tsx (100%) rename src/screens/PlayDetail/Horizontal/{Player => }/MoreBtn/PlayModeBtn.tsx (100%) rename src/screens/PlayDetail/Horizontal/{Player => }/MoreBtn/TimeoutExitBtn.tsx (100%) rename src/screens/PlayDetail/Horizontal/{Player => }/MoreBtn/index.tsx (95%) create mode 100644 src/screens/PlayDetail/Horizontal/constant.ts diff --git a/publish/changeLog.md b/publish/changeLog.md index 1464ec8..0af254e 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -8,6 +8,7 @@ - 添加是否忽略电池优化检查，用于提醒用户添加白名单，确保APP后台播放稳定性 - 在设置界面返回时，不再直接返回桌面，将回到进入设置界面前的界面，再非设置界面返回时才会返回桌面 - 更新播放栏进度条样式，进度条允许拖动调整进度 +- 优化播放详情页歌曲封面对屏幕大小的适配，修改横屏下的控制栏按钮布局 ### 修复 diff --git a/src/screens/Home/Views/Setting/Horizontal/index.tsx b/src/screens/Home/Views/Setting/Horizontal/index.tsx index c4bb71d..0b460e0 100644 --- a/src/screens/Home/Views/Setting/Horizontal/index.tsx +++ b/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: { diff --git a/src/screens/PlayDetail/Horizontal/Player/MoreBtn/Btn.tsx b/src/screens/PlayDetail/Horizontal/MoreBtn/Btn.tsx similarity index 100% rename from src/screens/PlayDetail/Horizontal/Player/MoreBtn/Btn.tsx rename to src/screens/PlayDetail/Horizontal/MoreBtn/Btn.tsx diff --git a/src/screens/PlayDetail/Horizontal/Player/MoreBtn/MusicAddBtn.tsx b/src/screens/PlayDetail/Horizontal/MoreBtn/MusicAddBtn.tsx similarity index 100% rename from src/screens/PlayDetail/Horizontal/Player/MoreBtn/MusicAddBtn.tsx rename to src/screens/PlayDetail/Horizontal/MoreBtn/MusicAddBtn.tsx diff --git a/src/screens/PlayDetail/Horizontal/Player/MoreBtn/PlayModeBtn.tsx b/src/screens/PlayDetail/Horizontal/MoreBtn/PlayModeBtn.tsx similarity index 100% rename from src/screens/PlayDetail/Horizontal/Player/MoreBtn/PlayModeBtn.tsx rename to src/screens/PlayDetail/Horizontal/MoreBtn/PlayModeBtn.tsx diff --git a/src/screens/PlayDetail/Horizontal/Player/MoreBtn/TimeoutExitBtn.tsx b/src/screens/PlayDetail/Horizontal/MoreBtn/TimeoutExitBtn.tsx similarity index 100% rename from src/screens/PlayDetail/Horizontal/Player/MoreBtn/TimeoutExitBtn.tsx rename to src/screens/PlayDetail/Horizontal/MoreBtn/TimeoutExitBtn.tsx diff --git a/src/screens/PlayDetail/Horizontal/Player/MoreBtn/index.tsx b/src/screens/PlayDetail/Horizontal/MoreBtn/index.tsx similarity index 95% rename from src/screens/PlayDetail/Horizontal/Player/MoreBtn/index.tsx rename to src/screens/PlayDetail/Horizontal/MoreBtn/index.tsx index 819b532..50a3190 100644 --- a/src/screens/PlayDetail/Horizontal/Player/MoreBtn/index.tsx +++ b/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, }, }) diff --git a/src/screens/PlayDetail/Horizontal/Pic.tsx b/src/screens/PlayDetail/Horizontal/Pic.tsx index aa5a43f..26138c6 100644 --- a/src/screens/PlayDetail/Horizontal/Pic.tsx +++ b/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 ( - + { musicInfo.pic @@ -51,10 +56,9 @@ export default memo(({ componentId }: { componentId: string }) => { ) }) -const styles = StyleSheet.create({ +const styles = createStyle({ container: { - flexGrow: 1, - flexShrink: 1, + flex: 0, justifyContent: 'center', alignItems: 'center', // backgroundColor: 'rgba(0,0,0,0.1)', diff --git a/src/screens/PlayDetail/Horizontal/Player/ControlBtn.tsx b/src/screens/PlayDetail/Horizontal/Player/ControlBtn.tsx index d1f91a3..420b852 100644 --- a/src/screens/PlayDetail/Horizontal/Player/ControlBtn.tsx +++ b/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 ( - - + + ) } @@ -26,8 +27,8 @@ const NextBtn = ({ size }: { size: number }) => { void playNext() } return ( - - + + ) } @@ -36,17 +37,17 @@ const TogglePlayBtn = ({ size }: { size: number }) => { const theme = useTheme() const isPlay = useIsPlay() return ( - - + + ) } export default () => { - const { onLayout, height } = useLayout() - const size = height * 0.55 + const { onLayout, height, width } = useLayout() + const size = Math.min(height * 0.65, (width - marginLeft) * 0.7 * 0.3) return ( - + @@ -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', diff --git a/src/screens/PlayDetail/Horizontal/Player/index.tsx b/src/screens/PlayDetail/Horizontal/Player/index.tsx index 561c22a..a40af98 100644 --- a/src/screens/PlayDetail/Horizontal/Player/index.tsx +++ b/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 ( - - - + ) @@ -21,21 +20,11 @@ export default memo(() => { const styles = createStyle({ container: { - flexShrink: 0, - flexGrow: 0, - paddingLeft: 15, + flex: 1, + // flexShrink: 0, + // 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, }, }) diff --git a/src/screens/PlayDetail/Horizontal/components/Header.tsx b/src/screens/PlayDetail/Horizontal/components/Header.tsx index 3577c96..aeb0821 100644 --- a/src/screens/PlayDetail/Horizontal/components/Header.tsx +++ b/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() diff --git a/src/screens/PlayDetail/Horizontal/constant.ts b/src/screens/PlayDetail/Horizontal/constant.ts new file mode 100644 index 0000000..842eae0 --- /dev/null +++ b/src/screens/PlayDetail/Horizontal/constant.ts @@ -0,0 +1,4 @@ +import { scaleSizeW } from '@/utils/pixelRatio' + +export const marginLeftRaw = 15 +export const marginLeft = scaleSizeW(marginLeftRaw) diff --git a/src/screens/PlayDetail/Horizontal/index.tsx b/src/screens/PlayDetail/Horizontal/index.tsx index 6bbafda..e79f88b 100644 --- a/src/screens/PlayDetail/Horizontal/index.tsx +++ b/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, - paddingLeft: 15, - flexDirection: 'column', + flex: 0, + marginLeft: marginLeftRaw, + // flexDirection: 'row', + // backgroundColor: 'rgba(0,0,0,0.1)', // alignItems: 'center', }, right: { diff --git a/src/screens/PlayDetail/Vertical/Pic.tsx b/src/screens/PlayDetail/Vertical/Pic.tsx index ad9398e..4821a96 100644 --- a/src/screens/PlayDetail/Vertical/Pic.tsx +++ b/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 ( diff --git a/src/screens/PlayDetail/Vertical/Player/components/ControlBtn.tsx b/src/screens/PlayDetail/Vertical/Player/components/ControlBtn.tsx index 29cd130..8cfaeba 100644 --- a/src/screens/PlayDetail/Vertical/Player/components/ControlBtn.tsx +++ b/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 ( - - + + ) } -const NextBtn = () => { +const NextBtn = ({ size }: { size: number }) => { const theme = useTheme() const handlePlayNext = () => { void playNext() } return ( - - + + ) } -const TogglePlayBtn = () => { +const TogglePlayBtn = ({ size }: { size: number }) => { const theme = useTheme() const isPlay = useIsPlay() return ( - - + + ) } export default () => { + const { onLayout, height, width } = useLayout() + const size = Math.min(height * 0.95, width * 0.5 * 0.3) + return ( - <> - - - - + + + + + ) } -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', diff --git a/src/screens/PlayDetail/Vertical/Player/components/MoreBtn/index.tsx b/src/screens/PlayDetail/Vertical/Player/components/MoreBtn/index.tsx index 2861d1b..c04b572 100644 --- a/src/screens/PlayDetail/Vertical/Player/components/MoreBtn/index.tsx +++ b/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)', }, }) diff --git a/src/screens/PlayDetail/Vertical/Player/index.tsx b/src/screens/PlayDetail/Vertical/Player/index.tsx index 596823c..9d11a8d 100644 --- a/src/screens/PlayDetail/Vertical/Player/index.tsx +++ b/src/screens/PlayDetail/Vertical/Player/index.tsx @@ -15,9 +15,7 @@ export default memo(() => { - - - + @@ -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, - flexShrink: 1, + flex: 0, paddingLeft: 5, justifyContent: 'space-evenly', - }, - 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, + // backgroundColor: 'rgba(0, 0, 0, .1)', }, }) diff --git a/src/screens/PlayDetail/Vertical/components/Header.tsx b/src/screens/PlayDetail/Vertical/components/Header.tsx index a5ac731..942708a 100644 --- a/src/screens/PlayDetail/Vertical/components/Header.tsx +++ b/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 = () => { diff --git a/src/screens/PlayDetail/Vertical/index.tsx b/src/screens/PlayDetail/Vertical/index.tsx index ac61b40..b4a97b7 100644 --- a/src/screens/PlayDetail/Vertical/index.tsx +++ b/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)', }, })