From d7899a2f45cce06fc547dba85e763f481e8384eb Mon Sep 17 00:00:00 2001 From: unknown <106490582+lovegaoshi@users.noreply.github.com> Date: Sat, 23 Sep 2023 10:33:33 -0700 Subject: [PATCH] refactor: TrackInfo --- src/components/background/GroupView.tsx | 3 +- src/components/background/MainBackground.tsx | 2 +- src/components/player/Lyric.tsx | 2 +- src/components/player/TrackInfo/TrackInfo.tsx | 94 ++--------- .../player/TrackInfo/TrackInfoTemplate.tsx | 147 ++++++++++++++++++ src/components/player/View.tsx | 2 +- src/components/player/index.ts | 1 - src/components/playlist/PlaylistList.tsx | 2 +- .../setting/appearances/SkinSettings.tsx | 2 +- src/components/setting/useRenderSetting.tsx | 3 +- yarn.lock | 7 +- 11 files changed, 172 insertions(+), 93 deletions(-) create mode 100644 src/components/player/TrackInfo/TrackInfoTemplate.tsx diff --git a/src/components/background/GroupView.tsx b/src/components/background/GroupView.tsx index a9e7e4ab..515fff1f 100644 --- a/src/components/background/GroupView.tsx +++ b/src/components/background/GroupView.tsx @@ -1,10 +1,11 @@ +import React from 'react'; import { View, StyleSheet } from 'react-native'; import { useNoxSetting } from '@hooks/useSetting'; import { Text } from 'react-native-paper'; interface Props { title?: string; - children: JSX.Element; + children: React.JSX.Element; } export default (props: Props) => { diff --git a/src/components/background/MainBackground.tsx b/src/components/background/MainBackground.tsx index e8da5ba1..16c1770f 100644 --- a/src/components/background/MainBackground.tsx +++ b/src/components/background/MainBackground.tsx @@ -52,7 +52,7 @@ export const resolveBackgroundImage = async ( } }; -const MainBackground = (props: { children: JSX.Element }) => { +const MainBackground = (props: { children: React.JSX.Element }) => { const playerStyle = useNoxSetting(state => state.playerStyle); const isLandscape = useIsLandscape(); const mobileHeight = Dimensions.get('window').height; diff --git a/src/components/player/Lyric.tsx b/src/components/player/Lyric.tsx index 275d3227..82bfaddb 100644 --- a/src/components/player/Lyric.tsx +++ b/src/components/player/Lyric.tsx @@ -20,7 +20,7 @@ import logger from '@utils/Logger'; const LYRIC_OFFSET_INTERVAL = 0.5; interface ModalContainerProps { - children: JSX.Element[]; + children: React.JSX.Element[]; visible: boolean; onRequestClose: () => void; } diff --git a/src/components/player/TrackInfo/TrackInfo.tsx b/src/components/player/TrackInfo/TrackInfo.tsx index 3320e6ab..5ac463ec 100644 --- a/src/components/player/TrackInfo/TrackInfo.tsx +++ b/src/components/player/TrackInfo/TrackInfo.tsx @@ -1,7 +1,6 @@ -import React, { useCallback, useState, useRef } from 'react'; +import React, { useState, useRef } from 'react'; import { StyleSheet, - Text, View, Dimensions, Animated, @@ -10,35 +9,21 @@ import { import type { Track } from 'react-native-track-player'; import Image from 'react-native-fast-image'; +import TrackInfoTemplate from './TrackInfoTemplate'; import { useNoxSetting } from '@hooks/useSetting'; -import { getCurrentTPQueue } from '@stores/playingList'; import { LyricView } from '../Lyric'; -import SongMenuButton from './SongMenuButton'; -import FavReloadButton from './FavReloadButton'; -export const TrackInfo: React.FC<{ +interface Props { track?: Track; -}> = ({ track }) => { + windowWidth?: number; +} +const TrackInfo: React.FC = ({ track, windowWidth }) => { const playerSetting = useNoxSetting(state => state.playerSetting); - const playerStyle = useNoxSetting(state => state.playerStyle); - const currentPlayingList = useNoxSetting(state => state.currentPlayingList); const [isImageVisible, setIsImageVisible] = useState(true); const opacity = useRef(new Animated.Value(1)).current; const dimension = Dimensions.get('window'); - const albumArtSize = Math.min(dimension.width, dimension.height); - - const getTrackLocation = () => { - const currentTPQueue = getCurrentTPQueue(); - return track?.song - ? `#${ - currentPlayingList.songList.findIndex( - song => song.id === track.song.id - ) + 1 - } - ${ - currentTPQueue.findIndex(song => song.id === track.song.id) + 1 - }/${currentTPQueue.length}` - : ''; - }; + const albumArtSize = + windowWidth || Math.min(dimension.width, dimension.height); const onImagePress = () => { console.log('TrackInfo: Image Clicked - '); @@ -69,7 +54,7 @@ export const TrackInfo: React.FC<{ }; return ( - + <> - - {track?.title} - - - - - - - - {track?.artist} - - - {currentPlayingList.title} - - - {getTrackLocation()} - - - - - - - + ); }; +export default TrackInfo; + const styles = StyleSheet.create({ container: { alignItems: 'center', @@ -157,33 +116,4 @@ const styles = StyleSheet.create({ lyric: { opacity: 1, }, - titleText: { - fontSize: 18, - fontWeight: '600', - color: 'grey', - marginTop: 15, - paddingHorizontal: 5, - }, - artistText: { - fontSize: 16, - fontWeight: '200', - }, - infoContainer: { - flexDirection: 'row', - }, - favoriteButtonContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - artistInfoContainer: { - flex: 4, - justifyContent: 'center', - alignItems: 'center', - }, - songMenuButtonContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, }); diff --git a/src/components/player/TrackInfo/TrackInfoTemplate.tsx b/src/components/player/TrackInfo/TrackInfoTemplate.tsx new file mode 100644 index 00000000..80e8fd0e --- /dev/null +++ b/src/components/player/TrackInfo/TrackInfoTemplate.tsx @@ -0,0 +1,147 @@ +import React from 'react'; +import { + StyleSheet, + Text, + View, + Dimensions, + Animated, + TouchableWithoutFeedback, +} from 'react-native'; +import type { Track } from 'react-native-track-player'; +import Image from 'react-native-fast-image'; + +import { useNoxSetting } from '@hooks/useSetting'; +import { getCurrentTPQueue } from '@stores/playingList'; +import SongMenuButton from './SongMenuButton'; +import FavReloadButton from './FavReloadButton'; + +interface Props { + track?: Track; + windowWidth?: number; + onImagePress?: () => void; + children?: React.JSX.Element; +} +const TrackInfoTemplate: React.FC = ({ + track, + windowWidth, + onImagePress = () => undefined, + children, +}) => { + const playerSetting = useNoxSetting(state => state.playerSetting); + const playerStyle = useNoxSetting(state => state.playerStyle); + const currentPlayingList = useNoxSetting(state => state.currentPlayingList); + const dimension = Dimensions.get('window'); + const albumArtSize = + windowWidth || Math.min(dimension.width, dimension.height); + + const getTrackLocation = () => { + const currentTPQueue = getCurrentTPQueue(); + return track?.song + ? `#${ + currentPlayingList.songList.findIndex( + song => song.id === track.song.id + ) + 1 + } - ${ + currentTPQueue.findIndex(song => song.id === track.song.id) + 1 + }/${currentTPQueue.length}` + : ''; + }; + + const AlbumArt = () => ( + + + + + + ); + + return ( + + {children || } + + {track?.title} + + + + + + + + {track?.artist} + + + {currentPlayingList.title} + + + {getTrackLocation()} + + + + + + + + ); +}; + +export default TrackInfoTemplate; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + }, + artwork: { + marginTop: 15, + opacity: 1, + }, + lyric: { + opacity: 1, + }, + titleText: { + fontSize: 18, + fontWeight: '600', + color: 'grey', + marginTop: 15, + paddingHorizontal: 5, + }, + artistText: { + fontSize: 16, + fontWeight: '200', + }, + infoContainer: { + flexDirection: 'row', + }, + favoriteButtonContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + artistInfoContainer: { + flex: 4, + justifyContent: 'center', + alignItems: 'center', + }, + songMenuButtonContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); diff --git a/src/components/player/View.tsx b/src/components/player/View.tsx index 058b6bfa..773b90ea 100644 --- a/src/components/player/View.tsx +++ b/src/components/player/View.tsx @@ -11,7 +11,7 @@ import { ParamListBase } from '@react-navigation/native'; import { DrawerNavigationProp } from '@react-navigation/drawer'; import { useTranslation } from 'react-i18next'; -import { TrackInfo } from './'; +import TrackInfo from './TrackInfo/TrackInfo'; import { SetupService, AdditionalPlaybackService } from 'services'; import PlayerTopInfo from './PlayerTopInfo'; import { useNoxSetting } from '@hooks/useSetting'; diff --git a/src/components/player/index.ts b/src/components/player/index.ts index f3db062b..68a800b9 100644 --- a/src/components/player/index.ts +++ b/src/components/player/index.ts @@ -1,4 +1,3 @@ export * from './PlayerControls'; export * from './PlayPauseButton'; export * from './Progress'; -export * from './TrackInfo/TrackInfo'; diff --git a/src/components/playlist/PlaylistList.tsx b/src/components/playlist/PlaylistList.tsx index 3a5a0587..85fc6989 100644 --- a/src/components/playlist/PlaylistList.tsx +++ b/src/components/playlist/PlaylistList.tsx @@ -35,7 +35,7 @@ const { getState } = noxPlayingList; interface BackgroundProps { song: NoxMedia.Song; current?: boolean; - children: JSX.Element; + children: React.JSX.Element; } const SongBackground = (props: BackgroundProps) => { return props.current ? ( diff --git a/src/components/setting/appearances/SkinSettings.tsx b/src/components/setting/appearances/SkinSettings.tsx index 663bf154..377cec89 100644 --- a/src/components/setting/appearances/SkinSettings.tsx +++ b/src/components/setting/appearances/SkinSettings.tsx @@ -66,7 +66,7 @@ const BuiltInThemes: DisplayTheme[] = [ ]; const GestureWrapper = (props: { - children: JSX.Element; + children: React.JSX.Element; gesture: PanGesture; }) => { if (Platform.OS === 'ios') { diff --git a/src/components/setting/useRenderSetting.tsx b/src/components/setting/useRenderSetting.tsx index 1b6816de..8b81538c 100644 --- a/src/components/setting/useRenderSetting.tsx +++ b/src/components/setting/useRenderSetting.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { useTranslation } from 'react-i18next'; import { View, Text, StyleSheet } from 'react-native'; import { @@ -21,7 +22,7 @@ import { SettingEntry } from './SetttingEntries'; * @returns */ interface SetttingListInterface { - icon?: string | (() => JSX.Element); + icon?: string | (() => React.JSX.Element); settingName: string; onPress: () => void; settingCategory?: string; diff --git a/yarn.lock b/yarn.lock index 570fd193..52adec5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11108,9 +11108,10 @@ react-is@^17.0.1: resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -"react-native-app-auth@git+https://github.com/lovegaoshi/react-native-app-auth.git": - version "7.0.0-rc2" - resolved "git+https://github.com/lovegaoshi/react-native-app-auth.git#687cf242ca4a7708c659552244f65e0fd9b493a0" +react-native-app-auth@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/react-native-app-auth/-/react-native-app-auth-7.0.0.tgz#12ebbe249c47dd915783ed322785ee5e893dc7bd" + integrity sha512-rJAdt5oG2sV1AJxZJvJnyv/Ecl0xVMGqR40ybvX5YL/RA1nG7FaPvaM9zTrXyajyj/pJR8WaN8EszdW8C3jAgw== dependencies: "@changesets/cli" "^2.26.1" invariant "2.2.4"