From 94f44a37621c5dc261dec3d509206de0276b1f26 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Fri, 21 May 2021 17:28:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E5=96=84=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 4 +- package-lock.json | 2 +- src/lang/en_us.json | 12 +-- src/lang/zh_cn.json | 2 + src/navigation/index.js | 13 +-- src/screens/Home/Setting/Player/index.js | 34 ++++---- .../PlayerPortrait/components/ControlBtn.js | 24 ++---- .../PlayerPortrait/components/Status.js | 6 +- .../Home/components/PlayerPortrait/index.js | 3 +- .../PlayDetail/Player/{Header.js => Lyric.js} | 0 src/screens/PlayDetail/{ => Player}/Pic.js | 1 + .../Player/Player/components/ControlBtn.js | 84 +++++++++++++++++++ .../Player/components/MoreBtn/MusicAddBtn.js | 47 +++++++++++ .../Player/components/MoreBtn/PlayModeBtn.js | 65 ++++++++++++++ .../Player/Player/components/MoreBtn/index.js | 24 ++++++ .../Player/Player/components/PlayInfo.js | 52 ++++++++++++ .../Player/Player/components/Status.js | 25 ++++++ .../Player/Player/components/Title.js | 35 ++++++++ src/screens/PlayDetail/Player/Player/index.js | 69 +++++++++++++++ src/screens/PlayDetail/Player/index.js | 6 +- src/screens/PlayDetail/index.js | 47 +---------- src/store/modules/common/action.js | 5 ++ src/store/modules/common/reducer.js | 13 +++ src/store/modules/player/action.js | 8 +- 24 files changed, 480 insertions(+), 101 deletions(-) rename src/screens/PlayDetail/Player/{Header.js => Lyric.js} (100%) rename src/screens/PlayDetail/{ => Player}/Pic.js (98%) create mode 100644 src/screens/PlayDetail/Player/Player/components/ControlBtn.js create mode 100644 src/screens/PlayDetail/Player/Player/components/MoreBtn/MusicAddBtn.js create mode 100644 src/screens/PlayDetail/Player/Player/components/MoreBtn/PlayModeBtn.js create mode 100644 src/screens/PlayDetail/Player/Player/components/MoreBtn/index.js create mode 100644 src/screens/PlayDetail/Player/Player/components/PlayInfo.js create mode 100644 src/screens/PlayDetail/Player/Player/components/Status.js create mode 100644 src/screens/PlayDetail/Player/Player/components/Title.js create mode 100644 src/screens/PlayDetail/Player/Player/index.js diff --git a/index.js b/index.js index 683d7c7..cbb619c 100644 --- a/index.js +++ b/index.js @@ -61,7 +61,7 @@ const init = () => { getPlayInfo().then(info => { if (!info) return global.restorePlayInfo = info - if (info.listId != LIST_ID_PLAY_TEMP && info.listId != LIST_ID_PLAY_LATER) { + if (info.listId != LIST_ID_PLAY_TEMP) { info.list = global.allList[info.listId] if (info.list) info.list = info.list.list } @@ -76,7 +76,7 @@ const init = () => { }) } -initNavigation(async() => { +initNavigation(() => { init().then(() => { navigations.pushHomeScreen() SplashScreen.hide() diff --git a/package-lock.json b/package-lock.json index 78e0586..65ed5f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "lx-music-mobile", - "version": "0.1.6", + "version": "0.1.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/lang/en_us.json b/src/lang/en_us.json index d6bbf60..c96e9cd 100644 --- a/src/lang/en_us.json +++ b/src/lang/en_us.json @@ -35,6 +35,8 @@ "collect_toplist": "Collection Toplist", "play_all": "Play all", "back": "Back", + "name": "Name: {{name}}", + "singer": "Artist: {{name}}", "cancel": "Cancel", "confirm": "Confirm", @@ -98,10 +100,10 @@ "theme_mid_autumn": "Mid-Autumn", "theme_naruto": "Naruto", - "version_label_latest_ver": "Latest version:", - "version_label_current_ver": "Current version:", - "version_label_change_log": "Update description:", - "version_label_history": "History version:", + "version_label_latest_ver": "Latest version: ", + "version_label_current_ver": "Current version: ", + "version_label_change_log": "Update description: ", + "version_label_history": "History version: ", "version_tip_checking": "Checking for updates...⏳", "version_tip_downloaded": "The installation package has been downloaded.", "version_tip_failed": "The download of the installation package failed. You can try again or go to the project address to manually download the new version update.", @@ -170,7 +172,7 @@ "setting_other": "Other", "setting_other_cache": "Cache management (including the cache of songs, lyrics, error logs, etc., it is not recommended to clean up if there is no problem related to song playback)", - "setting_other_cache_size": "Currently used cache size:", + "setting_other_cache_size": "Currently used cache size: ", "setting_other_cache_clear_btn": "Clear Cache", "setting_other_cache_clear_success_tip": "Cache clearing completed", "setting_other_log": "Error log (error log when the software crashes 💥)", diff --git a/src/lang/zh_cn.json b/src/lang/zh_cn.json index 0896906..5ead1e6 100644 --- a/src/lang/zh_cn.json +++ b/src/lang/zh_cn.json @@ -35,6 +35,8 @@ "collect_toplist": "收藏排行榜", "play_all": "播放全部", "back": "返回", + "name": "歌曲名：{{name}}", + "singer": "艺术家：{{name}}", "cancel": "取消", "confirm": "确认", diff --git a/src/navigation/index.js b/src/navigation/index.js index c3b6131..5b26dbd 100644 --- a/src/navigation/index.js +++ b/src/navigation/index.js @@ -3,14 +3,16 @@ import * as screenNames from './screenNames' import * as navigations from './navigation' import registerScreens from './registerScreens' +import { getStore } from '@/store' +import { action as commonAction } from '@/store/modules/common' -// let unRegisterEvent +let unRegisterEvent const init = callback => { // Register all screens on launch registerScreens() - // if (unRegisterEvent) unRegisterEvent() + if (unRegisterEvent) unRegisterEvent() Navigation.setDefaultOptions({ animations: { @@ -19,9 +21,10 @@ const init = callback => { }, }, }) - // unRegisterEvent = Navigation.events().registerCommandListener((name, params) => { - // console.log(name, params) - // }) + unRegisterEvent = Navigation.events().registerScreenPoppedListener(({ componentId }) => { + const store = getStore() + store.dispatch(commonAction.removeComponentId(componentId)) + }) Navigation.events().registerAppLaunchedListener(() => { console.log('Register app launched listener') callback() diff --git a/src/screens/Home/Setting/Player/index.js b/src/screens/Home/Setting/Player/index.js index 053ef81..d5acb50 100644 --- a/src/screens/Home/Setting/Player/index.js +++ b/src/screens/Home/Setting/Player/index.js @@ -9,43 +9,43 @@ import IsPlayHighQuality from './IsPlayHighQuality' import MaxCache from './MaxCache' import { useTranslation } from '@/plugins/i18n' -import DorpDownMenu from '@/components/common/DorpDownMenu' -import { useGetter, useDispatch } from '@/store' +// import DorpDownMenu from '@/components/common/DorpDownMenu' +// import { useGetter, useDispatch } from '@/store' -const playNextModes = [ - { label: '列表循环', action: 'listLoop' }, - { label: '列表随机', action: 'random' }, - { label: '顺序播放', action: 'list' }, - { label: '单曲循环', action: 'singleLoop' }, -] +// const playNextModes = [ +// { label: '列表循环', action: 'listLoop' }, +// { label: '列表随机', action: 'random' }, +// { label: '顺序播放', action: 'list' }, +// { label: '单曲循环', action: 'singleLoop' }, +// ] export default memo(() => { const { t } = useTranslation() // const [isShowModal, setIsShowModal] = useState(false) // const hideDialog = useCallback(() => setIsShowModal(false), [setIsShowModal]) - const togglePlayMethod = useGetter('common', 'togglePlayMethod') + // const togglePlayMethod = useGetter('common', 'togglePlayMethod') - const togglePlayMethodName = useMemo(() => { - const method = playNextModes.find(m => m.action == togglePlayMethod) - return method ? method.label : '未知' - }, [togglePlayMethod]) - const setPlayNextMode = useDispatch('common', 'setPlayNextMode') + // const togglePlayMethodName = useMemo(() => { + // const method = playNextModes.find(m => m.action == togglePlayMethod) + // return method ? method.label : '未知' + // }, [togglePlayMethod]) + // const setPlayNextMode = useDispatch('common', 'setPlayNextMode') // console.log(themeList) // const handlePress = id => { // setTheme(id) // // console.log(AppColors) // } - const handleToggleMethodPress = ({ action }) => setPlayNextMode(action) + // const handleToggleMethodPress = ({ action }) => setPlayNextMode(action) return (
- + {/* 播放歌曲切换方式 {togglePlayMethodName} - + */}
) }) diff --git a/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js b/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js index b49468e..8d266f7 100644 --- a/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js +++ b/src/screens/Home/components/PlayerPortrait/components/ControlBtn.js @@ -23,10 +23,8 @@ export default ({ playNextModes }) => { // }, [setPlayNextMode, togglePlayMethod, playNextModes]) const btnPrev = useMemo(() => ( - - - - + + ), [playPrev, theme]) @@ -46,18 +44,14 @@ export default ({ playNextModes }) => { } }, []) const btnPlay = useMemo(() => ( - togglePlay(playStatus)}> - - - + togglePlay(playStatus)}> + ), [playStatus, theme, togglePlay]) const btnNext = useMemo(() => ( - - - - - + + + ), [playNext, theme]) return ( @@ -80,8 +74,8 @@ const styles = StyleSheet.create({ cotrolBtn: { width: 32, height: 32, - lineHeight: 32, - textAlign: 'center', + justifyContent: 'center', + alignItems: 'center', // backgroundColor: '#ccc', shadowOpacity: 1, diff --git a/src/screens/Home/components/PlayerPortrait/components/Status.js b/src/screens/Home/components/PlayerPortrait/components/Status.js index dc66ca9..9ea771a 100644 --- a/src/screens/Home/components/PlayerPortrait/components/Status.js +++ b/src/screens/Home/components/PlayerPortrait/components/Status.js @@ -1,11 +1,11 @@ -import React, { useMemo } from 'react' +import React, { memo, useMemo } from 'react' import { Text } from 'react-native' import { useGetter } from '@/store' import { STATUS } from '@/store/modules/player' import { useLrcPlay } from '@/plugins/lyric' -export default () => { +export default memo(() => { const theme = useGetter('common', 'theme') const playStatus = useGetter('player', 'status') const statusText = useGetter('player', 'statusText') @@ -18,7 +18,7 @@ export default () => { : statusText ), [playStatus, statusText, text]) return {status} -} +}) // const styles = StyleSheet.create({ diff --git a/src/screens/Home/components/PlayerPortrait/index.js b/src/screens/Home/components/PlayerPortrait/index.js index 1d52742..9e15c89 100644 --- a/src/screens/Home/components/PlayerPortrait/index.js +++ b/src/screens/Home/components/PlayerPortrait/index.js @@ -14,6 +14,7 @@ export default memo(({ playNextModes }) => { // const { onLayout, ...layout } = useLayout() const { keyboardShown } = useKeyboard() const theme = useGetter('common', 'theme') + const componentIds = useGetter('common', 'componentIds') const playerComponent = useMemo(() => ( @@ -33,7 +34,7 @@ export default memo(({ playNextModes }) => { // console.log(layout) - return keyboardShown ? null : playerComponent + return (keyboardShown || componentIds.playDetail) ? null : playerComponent }) const styles = StyleSheet.create({ diff --git a/src/screens/PlayDetail/Player/Header.js b/src/screens/PlayDetail/Player/Lyric.js similarity index 100% rename from src/screens/PlayDetail/Player/Header.js rename to src/screens/PlayDetail/Player/Lyric.js diff --git a/src/screens/PlayDetail/Pic.js b/src/screens/PlayDetail/Player/Pic.js similarity index 98% rename from src/screens/PlayDetail/Pic.js rename to src/screens/PlayDetail/Player/Pic.js index 049f938..6e64a25 100644 --- a/src/screens/PlayDetail/Pic.js +++ b/src/screens/PlayDetail/Player/Pic.js @@ -46,5 +46,6 @@ const styles = StyleSheet.create({ }, img: { borderRadius: 4, + // opacity: 0, }, }) diff --git a/src/screens/PlayDetail/Player/Player/components/ControlBtn.js b/src/screens/PlayDetail/Player/Player/components/ControlBtn.js new file mode 100644 index 0000000..a996b71 --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/ControlBtn.js @@ -0,0 +1,84 @@ +import React, { useCallback, memo, useMemo, useEffect } from 'react' +import { Text, StyleSheet, TouchableOpacity } from 'react-native' +import Icon from '@/components/common/Icon' +import { useGetter, useDispatch } from '@/store' +import { STATUS } from '@/store/modules/player' + + +export default ({ playNextModes }) => { + const playStatus = useGetter('player', 'status') + const playNext = useDispatch('player', 'playNext') + const playPrev = useDispatch('player', 'playPrev') + // const playMusicInfo = useGetter('player', 'playMusicInfo') + const pauseMusic = useDispatch('player', 'pauseMusic') + const playMusic = useDispatch('player', 'playMusic') + const theme = useGetter('common', 'theme') + + // const togglePlayMethod = useGetter('common', 'togglePlayMethod') + // const setPlayNextMode = useDispatch('common', 'setPlayNextMode') + // const toggleNextPlayMode = useCallback(() => { + // let index = playNextModes.indexOf(togglePlayMethod) + // if (++index >= playNextModes.length) index = -1 + // setPlayNextMode(playNextModes[index] || '') + // }, [setPlayNextMode, togglePlayMethod, playNextModes]) + + const btnPrev = useMemo(() => ( + + + + ), [playPrev, theme]) + + const togglePlay = useCallback(playStatus => { + switch (playStatus) { + case STATUS.playing: + pauseMusic() + break + case STATUS.pause: + case STATUS.stop: + case STATUS.none: + playMusic() + break + // default: + // playMusic(playMusicInfo) + // break + } + }, []) + const btnPlay = useMemo(() => ( + togglePlay(playStatus)}> + + + ), [playStatus, theme, togglePlay]) + const btnNext = useMemo(() => ( + + + + ), [playNext, theme]) + + return ( + <> + {/* + + + + + */} + {btnPrev} + {btnPlay} + {btnNext} + + ) +} + + +const styles = StyleSheet.create({ + cotrolBtn: { + width: 42, + height: 42, + justifyContent: 'center', + alignItems: 'center', + + // backgroundColor: '#ccc', + shadowOpacity: 1, + textShadowRadius: 1, + }, +}) diff --git a/src/screens/PlayDetail/Player/Player/components/MoreBtn/MusicAddBtn.js b/src/screens/PlayDetail/Player/Player/components/MoreBtn/MusicAddBtn.js new file mode 100644 index 0000000..84bc8c3 --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/MoreBtn/MusicAddBtn.js @@ -0,0 +1,47 @@ +import React, { useCallback, memo, useMemo, useEffect, useState, useRef } from 'react' +import { Text, StyleSheet, TouchableOpacity } from 'react-native' +import Icon from '@/components/common/Icon' +import { useGetter, useDispatch } from '@/store' +import MusicAddModal from '@/components/MusicAddModal' + + +export default memo(() => { + const theme = useGetter('common', 'theme') + const [visibleMusicAddModal, setVisibleMusicAddModal] = useState(false) + const playMusicInfo = useGetter('player', 'playMusicInfo') + const selectedDataRef = useRef() + const hideMusicAddModal = () => { + setVisibleMusicAddModal(false) + } + + const handleShowMusicAddModal = () => { + selectedDataRef.current = playMusicInfo.musicInfo + setVisibleMusicAddModal(true) + } + + return ( + <> + + + + + + ) +}) + +const styles = StyleSheet.create({ + cotrolBtn: { + marginLeft: 5, + width: 32, + height: 32, + justifyContent: 'center', + alignItems: 'center', + + // backgroundColor: '#ccc', + shadowOpacity: 1, + textShadowRadius: 1, + }, +}) diff --git a/src/screens/PlayDetail/Player/Player/components/MoreBtn/PlayModeBtn.js b/src/screens/PlayDetail/Player/Player/components/MoreBtn/PlayModeBtn.js new file mode 100644 index 0000000..a9effd2 --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/MoreBtn/PlayModeBtn.js @@ -0,0 +1,65 @@ +import React, { useCallback, memo, useMemo, useEffect } from 'react' +import { Text, StyleSheet, TouchableOpacity } from 'react-native' +import Icon from '@/components/common/Icon' +import { useGetter, useDispatch } from '@/store' + +const playNextModes = [ + 'listLoop', + 'random', + 'list', + 'singleLoop', +] + +export default memo(() => { + const togglePlayMethod = useGetter('common', 'togglePlayMethod') + const theme = useGetter('common', 'theme') + const setPlayNextMode = useDispatch('common', 'setPlayNextMode') + + const toggleNextPlayMode = () => { + let index = playNextModes.indexOf(togglePlayMethod) + if (++index >= playNextModes.length) index = -1 + setPlayNextMode(playNextModes[index] || '') + } + + const playModeIcon = useMemo(() => { + let playModeIcon = null + switch (togglePlayMethod) { + case 'listLoop': + playModeIcon = 'list-loop' + break + case 'random': + playModeIcon = 'list-random' + break + case 'list': + playModeIcon = 'list-order' + break + case 'singleLoop': + playModeIcon = 'single-loop' + break + default: + playModeIcon = 'single' + break + } + return playModeIcon + }, [togglePlayMethod]) + + return ( + + + + ) +}) + +const styles = StyleSheet.create({ + cotrolBtn: { + marginLeft: 5, + width: 32, + height: 32, + justifyContent: 'center', + alignItems: 'center', + + // backgroundColor: '#ccc', + shadowOpacity: 1, + textShadowRadius: 1, + }, +}) diff --git a/src/screens/PlayDetail/Player/Player/components/MoreBtn/index.js b/src/screens/PlayDetail/Player/Player/components/MoreBtn/index.js new file mode 100644 index 0000000..db74c1f --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/MoreBtn/index.js @@ -0,0 +1,24 @@ +import React, { useCallback, memo, useMemo, useEffect } from 'react' +import { View, StyleSheet } from 'react-native' +import PlayModeBtn from './PlayModeBtn' +import MusicAddBtn from './MusicAddBtn' + +export default () => { + return ( + + + + + ) +} + + +const styles = StyleSheet.create({ + container: { + flexShrink: 0, + flexGrow: 0, + flexDirection: 'row', + alignItems: 'center', + // backgroundColor: 'rgba(0,0,0,0.1)', + }, +}) diff --git a/src/screens/PlayDetail/Player/Player/components/PlayInfo.js b/src/screens/PlayDetail/Player/Player/components/PlayInfo.js new file mode 100644 index 0000000..48c8e5b --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/PlayInfo.js @@ -0,0 +1,52 @@ +import React, { useCallback, memo, useMemo, useEffect } from 'react' +import { Text, StyleSheet, View } from 'react-native' +import { usePlayTime } from '@/utils/hooks' +import { useGetter } from '@/store' + +import Progress from '@/components/player/Progress' +import Status from './Status' + +const PlayTimeCurrent = ({ timeStr }) => { + const theme = useGetter('common', 'theme') + // console.log(timeStr) + return {timeStr} +} + +const PlayTimeMax = memo(({ timeStr }) => { + const theme = useGetter('common', 'theme') + return {timeStr} +}) + +export default () => { + const { curTimeStr, maxTimeStr, progress, bufferedProgress, duration } = usePlayTime() + + return ( + <> + + + + + + + + / + + + + + ) +} + + +const styles = StyleSheet.create({ + progress: { + flexGrow: 1, + flexShrink: 0, + flexDirection: 'column', + justifyContent: 'center', + // height: + // position: 'absolute', + // width: '100%', + // top: 0, + }, +}) diff --git a/src/screens/PlayDetail/Player/Player/components/Status.js b/src/screens/PlayDetail/Player/Player/components/Status.js new file mode 100644 index 0000000..43f2a45 --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/Status.js @@ -0,0 +1,25 @@ +import React, { memo, useMemo } from 'react' +import { Text } from 'react-native' +import { useGetter } from '@/store' +import { STATUS } from '@/store/modules/player' + + +export default memo(() => { + const theme = useGetter('common', 'theme') + const playStatus = useGetter('player', 'status') + const statusText = useGetter('player', 'statusText') + const status = useMemo(() => { + switch (playStatus) { + case STATUS.playing: + case STATUS.pause: + case STATUS.stop: + return '' + default: return statusText + } + }, [playStatus, statusText]) + return {status} +}) + +// const styles = StyleSheet.create({ + +// }) diff --git a/src/screens/PlayDetail/Player/Player/components/Title.js b/src/screens/PlayDetail/Player/Player/components/Title.js new file mode 100644 index 0000000..bb147a9 --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/components/Title.js @@ -0,0 +1,35 @@ +import React, { useCallback, memo, useMemo, useEffect } from 'react' +import { Text, View, StyleSheet } from 'react-native' +import { useGetter, useDispatch } from '@/store' +import { useTranslation } from '@/plugins/i18n' + +export default () => { + const theme = useGetter('common', 'theme') + const playMusicInfo = useGetter('player', 'playMusicInfo') + const { t } = useTranslation() + const titleInfo = useMemo(() => { + const info = { + name: '', + singer: '', + } + if (playMusicInfo) { + info.name = t('name', { name: playMusicInfo.musicInfo.name }) + info.singer = t('singer', { name: playMusicInfo.musicInfo.singer }) + } + return info + }, [playMusicInfo, t]) + // console.log(playMusicInfo) + return ( + + {titleInfo.name} + {titleInfo.singer} + + ) +} + +const styles = StyleSheet.create({ + container: { + flexShrink: 1, + flexGrow: 1, + }, +}) diff --git a/src/screens/PlayDetail/Player/Player/index.js b/src/screens/PlayDetail/Player/Player/index.js new file mode 100644 index 0000000..bc542a3 --- /dev/null +++ b/src/screens/PlayDetail/Player/Player/index.js @@ -0,0 +1,69 @@ +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/Player/index.js b/src/screens/PlayDetail/Player/index.js index 61f7e19..c93108a 100644 --- a/src/screens/PlayDetail/Player/index.js +++ b/src/screens/PlayDetail/Player/index.js @@ -1,10 +1,10 @@ import React, { useEffect, useCallback } from 'react' import { View, StyleSheet } from 'react-native' -import Header from './components/Header' +import Header from '../components/Header' // import Aside from './components/Aside' // import Main from './components/Main' -// import FooterPlayer from './components/FooterPlayer' +import Player from './Player' import { useGetter, useDispatch } from '@/store' import PagerView from 'react-native-pager-view' import Pic from './Pic' @@ -32,7 +32,7 @@ export default () => { </View> </PagerView> <View style={styles.player}> - + <Player /> </View> </View> </> diff --git a/src/screens/PlayDetail/index.js b/src/screens/PlayDetail/index.js index a7a83db..5a23239 100644 --- a/src/screens/PlayDetail/index.js +++ b/src/screens/PlayDetail/index.js @@ -1,59 +1,20 @@ import React, { useEffect, useCallback } from 'react' import { View, StyleSheet } from 'react-native' - -import Header from './components/Header' -// import Aside from './components/Aside' -// import Main from './components/Main' -// import FooterPlayer from './components/FooterPlayer' import { useGetter, useDispatch } from '@/store' -import PagerView from 'react-native-pager-view' -import Pic from './Pic' + +import Player from './Player' export default (props) => { - const theme = useGetter('common', 'theme') + // const theme = useGetter('common', 'theme') const setComponentId = useDispatch('common', 'setComponentId') useEffect(() => { setComponentId({ name: 'playDetail', id: props.componentId }) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - const onPageScrollStateChanged = useCallback(({ nativeEvent }) => { - // console.log(nativeEvent) - if (nativeEvent.pageScrollState != 'idle') return - console.log(nativeEvent.pageScrollState) - }, []) - return ( <> - <Header componentId={props.componentId} /> - <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}> - <PagerView - // onPageSelected={onPageSelected} - onPageScrollStateChanged={onPageScrollStateChanged} - style={styles.pagerView} - > - <View collapsable={false} key="1" style={styles.pageStyle}> - <Pic /> - </View> - </PagerView> - <View style={styles.player}> - - </View> - </View> + <Player /> </> ) } - -const styles = StyleSheet.create({ - container: { - flexGrow: 1, - flexShrink: 1, - backgroundColor: '#fff', - }, - pagerView: { - flex: 1, - }, - player: { - flex: 0, - }, -}) diff --git a/src/store/modules/common/action.js b/src/store/modules/common/action.js index e7621ee..8e66e6a 100644 --- a/src/store/modules/common/action.js +++ b/src/store/modules/common/action.js @@ -13,6 +13,7 @@ import { VERSION_STATUS } from '@/config/constant' export const TYPES = { updateSetting: null, setComponentId: null, + removeComponentId: null, setNavActiveIndex: null, setNavScreenName: null, setPlayNextMode: null, @@ -106,6 +107,10 @@ export const setComponentId = data => ({ type: TYPES.setComponentId, payload: data, }) +export const removeComponentId = id => ({ + type: TYPES.removeComponentId, + payload: id, +}) export const setNavActiveIndex = index => ({ type: TYPES.setNavActiveIndex, diff --git a/src/store/modules/common/reducer.js b/src/store/modules/common/reducer.js index 617239a..eeab9c3 100644 --- a/src/store/modules/common/reducer.js +++ b/src/store/modules/common/reducer.js @@ -65,6 +65,19 @@ const mutations = { }, } }, + [TYPES.removeComponentId](state, removeId) { + const newComponentIds = { ...state.componentIds } + for (const [name, id] of Object.entries(state.componentIds)) { + if (id == removeId) { + newComponentIds[name] = null + break + } + } + return { + ...state, + componentIds: newComponentIds, + } + }, [TYPES.setNavActiveIndex](state, index) { if (index === state.nav.activeIndex) return state return { diff --git a/src/store/modules/player/action.js b/src/store/modules/player/action.js index 2ceb1d7..1d5958d 100644 --- a/src/store/modules/player/action.js +++ b/src/store/modules/player/action.js @@ -15,17 +15,13 @@ import { destroy as msDestroy, } from '@/plugins/player/utils' import { getRandom } from '@/utils' -import { getMusicUrl, saveMusicUrl, getLyric, saveLyric, assertApiSupport, savePlayInfo } from '@/utils/tools' -import { setData } from '@/plugins/storage' -import { storageDataPrefix } from '@/config' +import { getMusicUrl, saveMusicUrl, getLyric, saveLyric, assertApiSupport, savePlayInfo, saveList } from '@/utils/tools' import { playInfo as playInfoGetter } from './getter' import { play as lrcPlay, setLyric, pause as lrcPause } from '@/plugins/lyric' import { action as listAction } from '@/store/modules/list' import { LIST_ID_PLAY_LATER } from '@/config/constant' // import { defaultList } from '../list/getter' -const listPrefix = storageDataPrefix.list - export const TYPES = { setPic: null, setList: null, @@ -474,7 +470,7 @@ export const getPic = musicInfo => (dispatch, getState) => { // picRequest = null dispatch({ type: TYPES.setPic, payload: { musicInfo, url } }) const state = getState() - if (state.player.listInfo.id) setData(listPrefix + state.player.listInfo.id, global.allList[state.player.listInfo.id]) + if (state.player.listInfo.id) saveList(global.allList[state.player.listInfo.id]) }).catch(err => { // picRequest = null return Promise.reject(err)