From 740c5ffd94c9c636c1a55af3767449bbfaedac8f Mon Sep 17 00:00:00 2001 From: lyswhut Date: Wed, 22 Dec 2021 18:06:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=AA=E5=B1=8F=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E8=AF=A6=E6=83=85=E9=A1=B5=E6=8C=89=E9=92=AE=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PlayDetail/Landscape/ControlBtn.js | 23 +++++++++++-------- .../Landscape/MoreBtn/MusicAddBtn.js | 10 ++++---- .../Landscape/MoreBtn/PlayModeBtn.js | 10 ++++---- .../Landscape/MoreBtn/TimeoutExit.js | 10 ++++---- .../PlayDetail/Landscape/MoreBtn/index.js | 11 ++++++--- .../PlayDetail/Landscape/PlayBar/Progress.js | 8 ++++--- .../PlayDetail/Landscape/PlayBar/index.js | 18 ++++++++------- 7 files changed, 52 insertions(+), 38 deletions(-) diff --git a/src/screens/PlayDetail/Landscape/ControlBtn.js b/src/screens/PlayDetail/Landscape/ControlBtn.js index 0182c4b..e3d759a 100644 --- a/src/screens/PlayDetail/Landscape/ControlBtn.js +++ b/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(() => ( - + - ), [playPrev, theme]) + ), [playPrev, theme, width]) const togglePlay = useCallback(playStatus => { switch (playStatus) { @@ -45,14 +49,14 @@ export default ({ playNextModes }) => { }, []) const btnPlay = useMemo(() => ( togglePlay(playStatus)}> - + - ), [playStatus, theme, togglePlay]) + ), [playStatus, theme, togglePlay, width]) const btnNext = useMemo(() => ( - + - ), [playNext, theme]) + ), [playNext, theme, width]) return ( @@ -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, - height: 52, + width: '33.33%', + aspectRatio: 1, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/PlayDetail/Landscape/MoreBtn/MusicAddBtn.js b/src/screens/PlayDetail/Landscape/MoreBtn/MusicAddBtn.js index 3e49a61..cc7dab6 100644 --- a/src/screens/PlayDetail/Landscape/MoreBtn/MusicAddBtn.js +++ b/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 ( <> - + { const styles = StyleSheet.create({ cotrolBtn: { - marginRight: 5, - width: 28, - height: 28, + marginRight: '1%', + width: '25%', + aspectRatio: 1, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/PlayDetail/Landscape/MoreBtn/PlayModeBtn.js b/src/screens/PlayDetail/Landscape/MoreBtn/PlayModeBtn.js index a4cd907..253c33f 100644 --- a/src/screens/PlayDetail/Landscape/MoreBtn/PlayModeBtn.js +++ b/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 ( - + ) }) const styles = StyleSheet.create({ cotrolBtn: { - marginRight: 5, - width: 28, - height: 28, + marginRight: '1%', + width: '25%', + aspectRatio: 1, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/PlayDetail/Landscape/MoreBtn/TimeoutExit.js b/src/screens/PlayDetail/Landscape/MoreBtn/TimeoutExit.js index 60276da..bceb841 100644 --- a/src/screens/PlayDetail/Landscape/MoreBtn/TimeoutExit.js +++ b/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 ( <> - + { const styles = StyleSheet.create({ cotrolBtn: { - marginRight: 5, - width: 28, - height: 28, + marginRight: '1%', + width: '25%', + aspectRatio: 1, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/PlayDetail/Landscape/MoreBtn/index.js b/src/screens/PlayDetail/Landscape/MoreBtn/index.js index 48c289e..ae5c0e4 100644 --- a/src/screens/PlayDetail/Landscape/MoreBtn/index.js +++ b/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 ( - - - + + + ) } @@ -17,6 +21,7 @@ export default () => { const styles = StyleSheet.create({ container: { + width: '40%', flexShrink: 0, flexGrow: 0, flexDirection: 'row', diff --git a/src/screens/PlayDetail/Landscape/PlayBar/Progress.js b/src/screens/PlayDetail/Landscape/PlayBar/Progress.js index 868a36d..87072b7 100644 --- a/src/screens/PlayDetail/Landscape/PlayBar/Progress.js +++ b/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 progressHeight = 3 -const progressDotSize = 10 +const { width } = getWindowSise() +const progressContentPadding = width * 0.0140625 +const progressHeight = width * 0.0046875 +const progressDotSize = progressHeight * 4 const styles = StyleSheet.create({ progress: { width: '100%', diff --git a/src/screens/PlayDetail/Landscape/PlayBar/index.js b/src/screens/PlayDetail/Landscape/PlayBar/index.js index 0c91f41..3345a77 100644 --- a/src/screens/PlayDetail/Landscape/PlayBar/index.js +++ b/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 {timeStr} + return {timeStr} } -const PlayTimeMax = memo(({ timeStr }) => { +const PlayTimeMax = memo(({ timeStr, size }) => { const theme = useGetter('common', 'theme') - return {timeStr} + return {timeStr} }) 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 ( @@ -28,9 +30,9 @@ export default () => { - - / - + + / +