From f2520985bf34ba08da3d2e7ae3a7719538bab801 Mon Sep 17 00:00:00 2001
From: lovegaoshi <106490582+lovegaoshi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:05:00 -0800
Subject: [PATCH] chore: refactor

---
 src/components/miniplayer/MiniControls.tsx    | 34 +++----------------
 .../player/controls/PlayPauseButton.tsx       | 23 +++----------
 .../player/controls/PlayerControls.tsx        |  2 +-
 src/hooks/usePlaybackState.ts                 | 30 ++++++++++++++++
 4 files changed, 41 insertions(+), 48 deletions(-)
 create mode 100644 src/hooks/usePlaybackState.ts

diff --git a/src/components/miniplayer/MiniControls.tsx b/src/components/miniplayer/MiniControls.tsx
index 339f65fba..a42d505bc 100644
--- a/src/components/miniplayer/MiniControls.tsx
+++ b/src/components/miniplayer/MiniControls.tsx
@@ -1,9 +1,4 @@
-import TrackPlayer, {
-  usePlaybackState,
-  State,
-  usePlayWhenReady,
-} from 'react-native-track-player';
-import { useDebouncedValue } from 'hooks';
+import TrackPlayer from 'react-native-track-player';
 import { ActivityIndicator, IconButton, Text } from 'react-native-paper';
 import { Dimensions, TouchableWithoutFeedback, View } from 'react-native';
 import Animated, {
@@ -13,6 +8,7 @@ import Animated, {
 
 import { fadePause } from '@utils/RNTPUtils';
 import useTPControls from '@hooks/useTPControls';
+import usePlaybackState from '@hooks/usePlaybackState';
 import { styles } from '../style';
 import { useTrackStore } from '@hooks/useActiveTrack';
 import { MinPlayerHeight } from './Constants';
@@ -96,37 +92,17 @@ export default ({ miniplayerHeight, expand }: Props) => {
 
 const PlayPauseButton = () => {
   const playerStyle = useNoxSetting(state => state.playerStyle);
-  const playback = usePlaybackState();
-  const playWhenReady = usePlayWhenReady();
-  const isLoading = useDebouncedValue(
-    playback.state === State.Loading, // || state === State.Buffering
-    250,
-  );
-  const isErrored = playback.state === State.Error;
-  const isEnded = playback.state === State.Ended;
-  const showPause = playWhenReady && !(isErrored || isEnded);
-  const showBuffering = isErrored || (playWhenReady && isLoading);
+  const { showPause, showBuffering } = usePlaybackState();
 
   if (showBuffering) {
     return <ActivityIndicator size={IconSize - 8} style={iconContainerStyle} />;
   }
-
-  if (showPause) {
-    return (
-      <IconButton
-        iconColor={playerStyle.colors.primary}
-        icon="pause"
-        size={IconSize}
-        onPress={fadePause}
-      />
-    );
-  }
   return (
     <IconButton
       iconColor={playerStyle.colors.primary}
-      icon="play"
+      icon={showPause ? 'pause' : 'play'}
       size={IconSize}
-      onPress={TrackPlayer.play}
+      onPress={showPause ? fadePause : TrackPlayer.play}
     />
   );
 };
diff --git a/src/components/player/controls/PlayPauseButton.tsx b/src/components/player/controls/PlayPauseButton.tsx
index f4613cb2a..fc69bd80c 100644
--- a/src/components/player/controls/PlayPauseButton.tsx
+++ b/src/components/player/controls/PlayPauseButton.tsx
@@ -2,32 +2,19 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Image } from 'expo-image';
 import { ActivityIndicator } from 'react-native-paper';
-import TrackPlayer, {
-  State,
-  usePlayWhenReady,
-} from 'react-native-track-player';
+import TrackPlayer from 'react-native-track-player';
 
-import { useDebouncedValue } from 'hooks';
+import usePlaybackState from '@hooks/usePlaybackState';
 import { useNoxSetting } from '@stores/useApp';
 import LottieButtonAnimated from '@components/buttons/LottieButtonAnimated';
 import { fadePause } from '@utils/RNTPUtils';
 
 interface Props {
-  state: State | undefined;
   iconSize?: number;
 }
-export const PlayPauseButton: React.FC<Props> = ({ state, iconSize = 50 }) => {
+export const PlayPauseButton: React.FC<Props> = ({ iconSize = 50 }) => {
   const playerStyle = useNoxSetting(state => state.playerStyle);
-  const playWhenReady = usePlayWhenReady();
-  const isLoading = useDebouncedValue(
-    state === State.Loading, // || state === State.Buffering
-    250,
-  );
-
-  const isErrored = state === State.Error;
-  const isEnded = state === State.Ended;
-  const showPause = playWhenReady && !(isErrored || isEnded);
-  const showBuffering = isErrored || (playWhenReady && isLoading);
+  const { showPause, showBuffering } = usePlaybackState();
   const iconContainerStyle = { width: iconSize + 16, height: iconSize + 16 };
 
   if (showBuffering) {
@@ -44,7 +31,7 @@ export const PlayPauseButton: React.FC<Props> = ({ state, iconSize = 50 }) => {
     <LottieButtonAnimated
       src={require('@assets/lottie/PauseGoAndBack.json')}
       size={iconSize}
-      onPress={showPause ? fadePause : () => TrackPlayer.play()}
+      onPress={showPause ? fadePause : TrackPlayer.play}
       clicked={!showPause}
       strokes={['Play', 'Play 2', 'Pause', 'Pause 3']}
     />
diff --git a/src/components/player/controls/PlayerControls.tsx b/src/components/player/controls/PlayerControls.tsx
index 307401481..9166ad468 100644
--- a/src/components/player/controls/PlayerControls.tsx
+++ b/src/components/player/controls/PlayerControls.tsx
@@ -32,7 +32,7 @@ export const PlayerControls: React.FC = () => {
           style={{ backgroundColor: undefined }}
         />
         <View style={styles.btnSpacer} />
-        <PlayPauseButton state={playback.state} />
+        <PlayPauseButton />
         <View style={styles.btnSpacer} />
         <LottieButton
           src={require('@assets/lottie/skip-forwards.json')}
diff --git a/src/hooks/usePlaybackState.ts b/src/hooks/usePlaybackState.ts
new file mode 100644
index 000000000..58b8dfe05
--- /dev/null
+++ b/src/hooks/usePlaybackState.ts
@@ -0,0 +1,30 @@
+import {
+  usePlaybackState,
+  State,
+  usePlayWhenReady,
+} from 'react-native-track-player';
+import { useDebouncedValue } from 'hooks';
+
+const NotLoading = [State.Paused, State.Playing, State.Stopped, State.Ended];
+
+export default () => {
+  const playback = usePlaybackState();
+  const playWhenReady = usePlayWhenReady();
+  const isLoading = useDebouncedValue(
+    !NotLoading.includes(playback.state!),
+    250,
+  );
+  const isErrored = playback.state === State.Error;
+  const isEnded = playback.state === State.Ended;
+  const showPause = playWhenReady && !(isErrored || isEnded);
+  const showBuffering = isErrored || (playWhenReady && isLoading);
+
+  return {
+    isLoading,
+    isErrored,
+    isEnded,
+    showPause,
+    showBuffering,
+    playback,
+  };
+};