refactor: TrackInfo

lovegaoshi · Sep 23, 2023 · d7899a2 · d7899a2
1 parent 96dae13
commit d7899a2
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<Props> = ({ 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 (
-    <View style={styles.container}>
+    <TrackInfoTemplate>
       <>
         <TouchableWithoutFeedback onPress={onImagePress}>
           <Animated.View
@@ -114,38 +99,12 @@ export const TrackInfo: React.FC<{
           </View>
         </TouchableWithoutFeedback>
       </>
-      <Text style={[styles.titleText, { color: playerStyle.colors.primary }]}>
-        {track?.title}
-      </Text>
-      <View style={styles.infoContainer}>
-        <View style={styles.favoriteButtonContainer}>
-          <FavReloadButton track={track} />
-        </View>
-        <View style={styles.artistInfoContainer}>
-          <Text
-            style={[styles.artistText, { color: playerStyle.colors.secondary }]}
-          >
-            {track?.artist}
-          </Text>
-          <Text
-            style={[styles.artistText, { color: playerStyle.colors.secondary }]}
-          >
-            {currentPlayingList.title}
-          </Text>
-          <Text
-            style={[styles.artistText, { color: playerStyle.colors.secondary }]}
-          >
-            {getTrackLocation()}
-          </Text>
-        </View>
-        <View style={styles.songMenuButtonContainer}>
-          <SongMenuButton track={track} />
-        </View>
-      </View>
-    </View>
+    </TrackInfoTemplate>
   );
 };
 
+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
@@ -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<Props> = ({
+  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 = () => (
+    <TouchableWithoutFeedback onPress={onImagePress}>
+      <Animated.View style={styles.container}>
+        <Image
+          style={[
+            styles.artwork,
+            { width: albumArtSize, height: albumArtSize },
+          ]}
+          source={
+            playerSetting.hideCoverInMobile
+              ? 0
+              : {
+                  uri: `${track?.artwork}`,
+                }
+          }
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+
+  return (
+    <View style={styles.container}>
+      {children || <AlbumArt />}
+      <Text style={[styles.titleText, { color: playerStyle.colors.primary }]}>
+        {track?.title}
+      </Text>
+      <View style={styles.infoContainer}>
+        <View style={styles.favoriteButtonContainer}>
+          <FavReloadButton track={track} />
+        </View>
+        <View style={styles.artistInfoContainer}>
+          <Text
+            style={[styles.artistText, { color: playerStyle.colors.secondary }]}
+          >
+            {track?.artist}
+          </Text>
+          <Text
+            style={[styles.artistText, { color: playerStyle.colors.secondary }]}
+          >
+            {currentPlayingList.title}
+          </Text>
+          <Text
+            style={[styles.artistText, { color: playerStyle.colors.secondary }]}
+          >
+            {getTrackLocation()}
+          </Text>
+        </View>
+        <View style={styles.songMenuButtonContainer}>
+          <SongMenuButton track={track} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"