feat: add progress slider

Author: zeevenn

apps/mobile/modules/player/FullPlayer.tsx

@@ -36,36 +36,6 @@ export default function FullPlayer() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-  },
-  page: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-  },
-  pageTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  pageSubtitle: {
-    fontSize: 16,
-    opacity: 0.7,
-  },
-  trackInfo: {
-    alignItems: 'center',
-    marginBottom: 40,
-    width: '100%',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  artist: {
-    fontSize: 18,
-    textAlign: 'center',
-    opacity: 0.7,
+    paddingHorizontal: 28,
   },
 })

apps/mobile/modules/player/FullPlayerArtwork.tsx

@@ -23,10 +23,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
   },
   artwork: {
-    width: screenWidth - 48,
+    width: screenWidth - 56,
     aspectRatio: 1,
     borderRadius: 16,
     marginBottom: 40,
@@ -37,6 +36,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.3,
     shadowRadius: 8,
-    elevation: 8,
+    elevation: 2,
   },
 })

apps/mobile/modules/player/FullPlayerControl.tsx

@@ -1,14 +1,22 @@
-import { playerController, PlayMode, usePlayerStore } from '@flow/player'
-import { useCallback } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { formatDuration } from '@flow/core'
+import { playerController, PlayMode, useDisplayTrack, usePlayerStore } from '@flow/player'
+import Slider from '@react-native-community/slider'
+import { useCallback, useState } from 'react'
+import { Dimensions, StyleSheet, View } from 'react-native'
 import { IconButton, Text, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+const { width: screenWidth } = Dimensions.get('screen')
+
 export default function FullPlayerControl() {
   const { bottom } = useSafeAreaInsets()
   const { colors } = useTheme()
+  const displayTrack = useDisplayTrack()
   const isPlaying = usePlayerStore.use.isPlaying()
   const mode = usePlayerStore.use.mode()
+  const position = usePlayerStore.use.position()
+  const [isSliding, setIsSliding] = useState(false)
+  const [sliderValue, setSliderValue] = useState(0)
 
   const handlePlayPause = useCallback(() => {
     if (isPlaying) {
@@ -27,8 +35,48 @@ export default function FullPlayerControl() {
     playerController.prev()
   }, [])
 
+  const handleSliderChange = useCallback((value: number) => {
+    setSliderValue(value)
+  }, [])
+
+  const handleSliderSlidingComplete = useCallback((value: number) => {
+    setIsSliding(false)
+    if (displayTrack?.duration && displayTrack.duration > 0) {
+      const newPosition = value * displayTrack.duration
+      playerController.seekTo(newPosition)
+    }
+  }, [displayTrack?.duration])
+
+  const handleSliderSlidingStart = useCallback(() => {
+    setIsSliding(true)
+  }, [])
+
+  // 更新滑块值
+  const currentSliderValue = isSliding ? sliderValue : (displayTrack?.duration && displayTrack.duration > 0 ? position / displayTrack.duration : 0)
+
   return (
     <View style={[styles.container, { paddingBottom: bottom + 36 }]}>
+      <View>
+        <Slider
+          style={styles.slider}
+          value={currentSliderValue}
+          minimumTrackTintColor={colors.primary}
+          maximumTrackTintColor={colors.outline}
+          thumbTintColor={colors.primary}
+          onValueChange={handleSliderChange}
+          onSlidingComplete={handleSliderSlidingComplete}
+          onSlidingStart={handleSliderSlidingStart}
+        />
+        <View style={styles.timeTextContainer}>
+          <Text style={[styles.timeText, { color: colors.onSurfaceVariant }]}>
+            {formatDuration(position)}
+          </Text>
+          <Text style={[styles.timeText, { color: colors.onSurfaceVariant }]}>
+            {formatDuration(displayTrack?.duration ?? 0)}
+          </Text>
+        </View>
+      </View>
+
       <View style={styles.controls}>
         <IconButton
           icon="skip-previous"
@@ -62,6 +110,18 @@ const styles = StyleSheet.create({
   container: {
     gap: 20,
   },
+  slider: {
+    alignSelf: 'center',
+    width: screenWidth - 24,
+  },
+  timeTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  timeText: {
+    fontSize: 12,
+    textAlign: 'center',
+  },
   controls: {
     flexDirection: 'row',
     alignItems: 'center',

apps/mobile/modules/player/FullPlayerHeader.tsx

@@ -19,7 +19,6 @@ export default function FullPlayerHeader() {
 const styles = StyleSheet.create({
   container: {
     marginTop: -16,
-    paddingHorizontal: 24,
   },
   artist: {
     opacity: 0.7,

apps/mobile/package.json

@@ -18,6 +18,7 @@
     "@flow/store": "workspace:*",
     "@gorhom/bottom-sheet": "^5.1.6",
     "@nodefinity/react-native-music-library": "0.7.1",
+    "@react-native-community/slider": "4.5.7",
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/drawer": "^7.3.12",
     "@react-navigation/elements": "^2.3.8",
@@ -50,7 +51,7 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-tab-view": "^4.1.1",
-    "react-native-track-player": "github:dribble-njr/react-native-track-player"
+    "react-native-track-player": "4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/player/src/playerController.rn.ts

@@ -192,5 +192,16 @@ export const playerController: PlayerController = {
       logger.error('syncCurrentIndex error:', error)
     }
   },
+
+  async seekTo(position: number) {
+    try {
+      await TrackPlayer.seekTo(position)
+      const setPosition = usePlayerStore.getState().setPosition
+      setPosition(position)
+    }
+    catch (error) {
+      logger.error('seekTo error:', error)
+    }
+  },
   // #endregion
 }

packages/player/src/playerController.ts

@@ -18,6 +18,8 @@ export interface PlayerController {
   setMode: (mode: PlayMode) => void
 
   syncCurrentIndex: (index: number) => void
+
+  seekTo: (position: number) => void
 }
 
 export declare const playerController: PlayerController

packages/player/src/playerStore.ts

@@ -16,6 +16,7 @@ interface PlayerStore {
   currentIndex: number
   mode: PlayMode
   isPlaying: boolean
+  position: number
 }
 
 interface PlayerStoreActions {
@@ -38,6 +39,9 @@ interface PlayerStoreActions {
 
   // sync
   setCurrentIndex: (index: number) => void
+
+  // progress
+  setPosition: (position: number) => void
 }
 
 function shuffle<T>(array: T[]): T[] {
@@ -57,6 +61,7 @@ const playerStoreBase = create<PlayerStore & PlayerStoreActions>()(
       currentIndex: 0,
       mode: PlayMode.ORDERED,
       isPlaying: false,
+      position: 0,
 
       // Add a track to the queue's end
       addToQueue: (track) => {
@@ -203,6 +208,10 @@ const playerStoreBase = create<PlayerStore & PlayerStoreActions>()(
       setCurrentIndex: (index) => {
         set({ currentIndex: index })
       },
+
+      setPosition: (position) => {
+        set({ position })
+      },
     }),
     {
       name: 'player-store',

packages/player/src/services/playbackService.rn.ts

@@ -1,5 +1,7 @@
+import { logger } from '@flow/core'
 import TrackPlayer, { Event } from 'react-native-track-player'
 import { playerController } from '../playerController'
+import { usePlayerStore } from '../playerStore'
 
 export async function PlaybackService() {
   TrackPlayer.addEventListener(Event.RemotePlay, () => {
@@ -19,8 +21,16 @@ export async function PlaybackService() {
   })
 
   TrackPlayer.addEventListener(Event.PlaybackActiveTrackChanged, (event) => {
+    logger.info('PlaybackActiveTrackChanged', event)
     if (event.index !== undefined) {
       playerController.syncCurrentIndex(event.index)
     }
   })
+
+  TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, (event) => {
+    const { position } = event
+    const setPosition = usePlayerStore.getState().setPosition
+
+    setPosition(position)
+  })
 }

packages/player/src/services/setupService.rn.ts

@@ -31,6 +31,7 @@ export function getTrackPlayerOptions(options?: UpdateOptions) {
       Capability.SkipToNext,
       Capability.SkipToPrevious,
     ],
+    progressUpdateEventInterval: 1,
     ...options,
   }
 }