From e52a6b702bd4d5af9f67236073aed67c8538330e Mon Sep 17 00:00:00 2001 From: lyswhut Date: Tue, 27 Jul 2021 08:41:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PlayDetail/Portrait/{Player => }/Lyric.js | 0 .../PlayDetail/Portrait/{Player => }/Pic.js | 0 .../Portrait/Player/Player/index.js | 69 ---------- .../{Player => }/components/ControlBtn.js | 0 .../components/MoreBtn/MusicAddBtn.js | 0 .../components/MoreBtn/PlayModeBtn.js | 0 .../components/MoreBtn/TimeoutExit.js | 0 .../{Player => }/components/MoreBtn/index.js | 0 .../{Player => }/components/PlayInfo.js | 0 .../{Player => }/components/Progress.js | 0 .../Player/{Player => }/components/Status.js | 0 .../Player/{Player => }/components/Title.js | 0 .../PlayDetail/Portrait/Player/index.js | 127 +++++++----------- src/screens/PlayDetail/Portrait/index.js | 93 ++++++++++++- 14 files changed, 138 insertions(+), 151 deletions(-) rename src/screens/PlayDetail/Portrait/{Player => }/Lyric.js (100%) rename src/screens/PlayDetail/Portrait/{Player => }/Pic.js (100%) delete mode 100644 src/screens/PlayDetail/Portrait/Player/Player/index.js rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/ControlBtn.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/MoreBtn/MusicAddBtn.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/MoreBtn/PlayModeBtn.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/MoreBtn/TimeoutExit.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/MoreBtn/index.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/PlayInfo.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/Progress.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/Status.js (100%) rename src/screens/PlayDetail/Portrait/Player/{Player => }/components/Title.js (100%) diff --git a/src/screens/PlayDetail/Portrait/Player/Lyric.js b/src/screens/PlayDetail/Portrait/Lyric.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Lyric.js rename to src/screens/PlayDetail/Portrait/Lyric.js diff --git a/src/screens/PlayDetail/Portrait/Player/Pic.js b/src/screens/PlayDetail/Portrait/Pic.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Pic.js rename to src/screens/PlayDetail/Portrait/Pic.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/index.js b/src/screens/PlayDetail/Portrait/Player/Player/index.js deleted file mode 100644 index b504114..0000000 --- a/src/screens/PlayDetail/Portrait/Player/Player/index.js +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useCallback, memo, useMemo, useEffect } from 'react' -import { View, Text, StyleSheet } from 'react-native' -import { useLayout, useKeyboard } from '@/utils/hooks' -import { useGetter, useDispatch } from '@/store' -import { BorderWidths } from '@/theme' - -import Title from './components/Title' -import MoreBtn from './components/MoreBtn' -import PlayInfo from './components/PlayInfo' -import ControlBtn from './components/ControlBtn' - - -export default memo(({ playNextModes }) => { - // const { onLayout, ...layout } = useLayout() - const theme = useGetter('common', 'theme') - - return ( - - - - <MoreBtn /> - </View> - <View style={styles.status}> - <PlayInfo /> - </View> - <View style={styles.control}> - <ControlBtn playNextModes={playNextModes} /> - </View> - </View> - ) -}) - -const styles = StyleSheet.create({ - container: { - width: '100%', - // paddingTop: progressContentPadding, - // marginTop: -progressContentPadding, - // backgroundColor: 'rgba(0, 0, 0, .1)', - padding: 15, - // backgroundColor: AppColors.primary, - // backgroundColor: 'red', - }, - info: { - flexDirection: 'row', - paddingBottom: 10, - }, - status: { - flexDirection: 'column', - flexGrow: 1, - flexShrink: 1, - paddingLeft: 5, - justifyContent: 'space-evenly', - }, - control: { - flexDirection: 'row', - justifyContent: 'space-evenly', - flexGrow: 0, - flexShrink: 0, - paddingLeft: '15%', - paddingRight: '15%', - paddingTop: '10%', - paddingBottom: '8%', - }, - row: { - flexDirection: 'row', - flexGrow: 0, - flexShrink: 0, - }, -}) diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/ControlBtn.js b/src/screens/PlayDetail/Portrait/Player/components/ControlBtn.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/ControlBtn.js rename to src/screens/PlayDetail/Portrait/Player/components/ControlBtn.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/MusicAddBtn.js b/src/screens/PlayDetail/Portrait/Player/components/MoreBtn/MusicAddBtn.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/MusicAddBtn.js rename to src/screens/PlayDetail/Portrait/Player/components/MoreBtn/MusicAddBtn.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/PlayModeBtn.js b/src/screens/PlayDetail/Portrait/Player/components/MoreBtn/PlayModeBtn.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/PlayModeBtn.js rename to src/screens/PlayDetail/Portrait/Player/components/MoreBtn/PlayModeBtn.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/TimeoutExit.js b/src/screens/PlayDetail/Portrait/Player/components/MoreBtn/TimeoutExit.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/TimeoutExit.js rename to src/screens/PlayDetail/Portrait/Player/components/MoreBtn/TimeoutExit.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/index.js b/src/screens/PlayDetail/Portrait/Player/components/MoreBtn/index.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/MoreBtn/index.js rename to src/screens/PlayDetail/Portrait/Player/components/MoreBtn/index.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/PlayInfo.js b/src/screens/PlayDetail/Portrait/Player/components/PlayInfo.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/PlayInfo.js rename to src/screens/PlayDetail/Portrait/Player/components/PlayInfo.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/Progress.js b/src/screens/PlayDetail/Portrait/Player/components/Progress.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/Progress.js rename to src/screens/PlayDetail/Portrait/Player/components/Progress.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/Status.js b/src/screens/PlayDetail/Portrait/Player/components/Status.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/Status.js rename to src/screens/PlayDetail/Portrait/Player/components/Status.js diff --git a/src/screens/PlayDetail/Portrait/Player/Player/components/Title.js b/src/screens/PlayDetail/Portrait/Player/components/Title.js similarity index 100% rename from src/screens/PlayDetail/Portrait/Player/Player/components/Title.js rename to src/screens/PlayDetail/Portrait/Player/components/Title.js diff --git a/src/screens/PlayDetail/Portrait/Player/index.js b/src/screens/PlayDetail/Portrait/Player/index.js index 0d61d17..b504114 100644 --- a/src/screens/PlayDetail/Portrait/Player/index.js +++ b/src/screens/PlayDetail/Portrait/Player/index.js @@ -1,96 +1,69 @@ -import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react' -import { View, StyleSheet } from 'react-native' - -import Header from '../components/Header' -// import Aside from './components/Aside' -// import Main from './components/Main' -import Player from './Player' +import React, { useCallback, memo, useMemo, useEffect } from 'react' +import { View, Text, StyleSheet } from 'react-native' +import { useLayout, useKeyboard } from '@/utils/hooks' import { useGetter, useDispatch } from '@/store' -import PagerView from 'react-native-pager-view' -import Pic from './Pic' -import Lyric from './Lyric' -import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils' +import { BorderWidths } from '@/theme' -const LyricPage = ({ activeIndex }) => { - const initedRef = useRef(false) - const lyric = useMemo(() => <Lyric />, []) - switch (activeIndex) { - // case 3: - case 1: - if (!initedRef.current) initedRef.current = true - return lyric - default: - return initedRef.current ? lyric : null - } - // return activeIndex == 0 || activeIndex == 1 ? setting : null -} +import Title from './components/Title' +import MoreBtn from './components/MoreBtn' +import PlayInfo from './components/PlayInfo' +import ControlBtn from './components/ControlBtn' -// global.iskeep = false -export default memo(({ componentId }) => { + +export default memo(({ playNextModes }) => { + // const { onLayout, ...layout } = useLayout() const theme = useGetter('common', 'theme') - const [pageIndex, setPageIndex] = useState(0) - - const onPageSelected = useCallback(({ nativeEvent }) => { - setPageIndex(nativeEvent.position) - if (nativeEvent.position == 1) { - screenkeepAwake() - } else { - screenUnkeepAwake() - } - }, []) return ( - <> - <Header /> - <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}> - <PagerView - onPageSelected={onPageSelected} - // onPageScrollStateChanged={onPageScrollStateChanged} - style={styles.pagerView} - > - <View collapsable={false} style={styles.pageStyle}> - <Pic componentId={componentId} /> - </View> - <View collapsable={false} style={styles.pageStyle}> - <LyricPage activeIndex={pageIndex} /> - </View> - </PagerView> - <View style={styles.pageIndicator} nativeID="pageIndicator"> - <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={styles.player} nativeID="player"> - <Player /> - </View> + <View style={{ ...styles.container, backgroundColor: theme.primary }}> + <View style={{ ...styles.info }} > + <Title /> + <MoreBtn /> </View> - </> + <View style={styles.status}> + <PlayInfo /> + </View> + <View style={styles.control}> + <ControlBtn playNextModes={playNextModes} /> + </View> + </View> ) }) const styles = StyleSheet.create({ container: { + width: '100%', + // paddingTop: progressContentPadding, + // marginTop: -progressContentPadding, + // backgroundColor: 'rgba(0, 0, 0, .1)', + padding: 15, + // backgroundColor: AppColors.primary, + // backgroundColor: 'red', + }, + info: { + flexDirection: 'row', + paddingBottom: 10, + }, + status: { + flexDirection: 'column', flexGrow: 1, flexShrink: 1, - backgroundColor: '#fff', + paddingLeft: 5, + justifyContent: 'space-evenly', }, - pagerView: { - flex: 1, - }, - pageIndicator: { - flex: 0, + control: { flexDirection: 'row', - justifyContent: 'center', - paddingTop: 10, - // backgroundColor: 'rgba(0,0,0,0.1)', + justifyContent: 'space-evenly', + flexGrow: 0, + flexShrink: 0, + paddingLeft: '15%', + paddingRight: '15%', + paddingTop: '10%', + paddingBottom: '8%', }, - pageIndicatorItem: { - height: 3, - width: '5%', - marginLeft: 2, - marginRight: 2, - borderRadius: 2, - }, - player: { - flex: 0, + row: { + flexDirection: 'row', + flexGrow: 0, + flexShrink: 0, }, }) diff --git a/src/screens/PlayDetail/Portrait/index.js b/src/screens/PlayDetail/Portrait/index.js index b114279..4e7d89f 100644 --- a/src/screens/PlayDetail/Portrait/index.js +++ b/src/screens/PlayDetail/Portrait/index.js @@ -1,13 +1,96 @@ -import React, { useEffect, useCallback } from 'react' +import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react' import { View, StyleSheet } from 'react-native' -import { useGetter, useDispatch } from '@/store' +import Header from './components/Header' +// import Aside from './components/Aside' +// import Main from './components/Main' import Player from './Player' +import { useGetter, useDispatch } from '@/store' +import PagerView from 'react-native-pager-view' +import Pic from './Pic' +import Lyric from './Lyric' +import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils' + +const LyricPage = ({ activeIndex }) => { + const initedRef = useRef(false) + const lyric = useMemo(() => <Lyric />, []) + switch (activeIndex) { + // case 3: + case 1: + if (!initedRef.current) initedRef.current = true + return lyric + default: + return initedRef.current ? lyric : null + } + // return activeIndex == 0 || activeIndex == 1 ? setting : null +} + +// global.iskeep = false +export default memo(({ componentId }) => { + const theme = useGetter('common', 'theme') + const [pageIndex, setPageIndex] = useState(0) + + const onPageSelected = useCallback(({ nativeEvent }) => { + setPageIndex(nativeEvent.position) + if (nativeEvent.position == 1) { + screenkeepAwake() + } else { + screenUnkeepAwake() + } + }, []) -export default ({ componentId }) => { return ( <> - <Player componentId={componentId} /> + <Header /> + <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}> + <PagerView + onPageSelected={onPageSelected} + // onPageScrollStateChanged={onPageScrollStateChanged} + style={styles.pagerView} + > + <View collapsable={false} style={styles.pageStyle}> + <Pic componentId={componentId} /> + </View> + <View collapsable={false} style={styles.pageStyle}> + <LyricPage activeIndex={pageIndex} /> + </View> + </PagerView> + <View style={styles.pageIndicator} nativeID="pageIndicator"> + <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={styles.player} nativeID="player"> + <Player /> + </View> + </View> </> ) -} +}) + +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, + }, +})