Fix: re-rendering player

sawyerf · Dec 26, 2024 · 73bc9d2 · 73bc9d2
1 parent 3e0b31f
commit 73bc9d2
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 39 deletions.
diff --git a/App.js b/App.js
@@ -10,7 +10,7 @@ import { HomeStack, SearchStack, PlaylistsStack, SettingsStack } from '~/screens
 
 import { ConfigContext, SetConfigContext, getConfig } from '~/contexts/config';
 import { getSettings, SettingsContext, SetSettingsContext } from '~/contexts/settings';
-import { initPlayer, initService } from '~/utils/player';
+import { initPlayer } from '~/utils/player';
 import { SongContext, defaultSong, songReducer } from '~/contexts/song';
 import { ThemeContext, getTheme } from '~/contexts/theme';
 
@@ -107,6 +107,4 @@ const App = () => {
   );
 }
 
-initService()
-
 export default App;
diff --git a/app/components/player/BoxDesktopPlayer.js b/app/components/player/BoxDesktopPlayer.js
@@ -5,17 +5,18 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 import { ConfigContext } from '~/contexts/config';
 import { SongContext } from '~/contexts/song';
 import { ThemeContext } from '~/contexts/theme';
-import { nextSong, pauseSong, resumeSong, previousSong, setPosition, secondToTime, setVolume, getVolume, updateVolume, setRepeat } from '~/utils/player';
+import { nextSong, pauseSong, resumeSong, previousSong, setPosition, secondToTime, setVolume, getVolume, updateVolume, setRepeat, updateTime } from '~/utils/player';
 import { urlCover } from '~/utils/api';
 import IconButton from '~/components/button/IconButton';
 import ImageError from '~/components/ImageError';
 import SlideBar from '~/components/button/SlideBar';
 
-const BoxDesktopPlayer = ({ fullscreen, time }) => {
+const BoxDesktopPlayer = ({ fullscreen }) => {
 	const [song, songDispatch] = React.useContext(SongContext)
 	const [volume, setVol] = React.useState(getVolume())
 	const config = React.useContext(ConfigContext)
 	const theme = React.useContext(ThemeContext)
+	const time = updateTime()
 
 	React.useEffect(() => {
 		return updateVolume(setVol)

diff --git a/app/components/player/FullScreenPlayer.js b/app/components/player/FullScreenPlayer.js
@@ -5,7 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ConfigContext } from '~/contexts/config';
 import { SongContext } from '~/contexts/song';
 import { ThemeContext } from '~/contexts/theme';
-import { nextSong, previousSong, pauseSong, resumeSong, secondToTime, setRepeat } from '~/utils/player';
+import { nextSong, previousSong, pauseSong, resumeSong, secondToTime, setRepeat, updateTime } from '~/utils/player';
 import { parseLrc } from '~/utils/lrc';
 import { setPosition } from '~/utils/player';
 import { urlCover, getApi } from '~/utils/api';
@@ -21,13 +21,14 @@ const preview = {
 	LYRICS: 2
 }
 
-const FullScreenPlayer = ({ fullscreen, time }) => {
+const FullScreenPlayer = ({ fullscreen }) => {
 	const config = React.useContext(ConfigContext)
 	const theme = React.useContext(ThemeContext)
 	const [song, songDispatch] = React.useContext(SongContext)
 	const insets = useSafeAreaInsets();
 	const [lyrics, setLyrics] = React.useState([])
 	const [isPreview, setIsPreview] = React.useState(preview.COVER)
+	const time = updateTime()
 
 	React.useEffect(() => {
 		setIsPreview(preview.COVER)

diff --git a/app/components/player/Player.native.js b/app/components/player/Player.native.js
@@ -1,21 +1,20 @@
 import React from 'react';
+import { useProgress, Event, useTrackPlayerEvents, State } from 'react-native-track-player';
 
 import { SettingsContext } from '~/contexts/settings';
 import { SongContext } from '~/contexts/song';
 import BoxPlayer from './BoxPlayer';
 import FullScreenPlayer from './FullScreenPlayer';
 import BoxDesktopPlayer from './BoxDesktopPlayer';
-import { useProgress, Event, useTrackPlayerEvents, State } from 'react-native-track-player';
 
 const events = [
-  Event.PlaybackState,
+	Event.PlaybackState,
 	Event.PlaybackActiveTrackChanged,
 ];
 
 const Player = ({ state, fullscreen }) => {
 	const [song, songDispatch] = React.useContext(SongContext)
 	const settings = React.useContext(SettingsContext)
-	const progress = useProgress(500)
 
 	useTrackPlayerEvents(events, async (event) => {
 		if (event.type === Event.PlaybackState) {
@@ -30,8 +29,8 @@ const Player = ({ state, fullscreen }) => {
 	}, [state.index])
 
 	if (!song?.songInfo) return null
-	else if (fullscreen.value) return <FullScreenPlayer fullscreen={fullscreen} time={progress} />
-	else if (settings.isDesktop) return <BoxDesktopPlayer fullscreen={fullscreen} time={progress} />
+	else if (fullscreen.value) return <FullScreenPlayer fullscreen={fullscreen} />
+	else if (settings.isDesktop) return <BoxDesktopPlayer fullscreen={fullscreen} />
 	return <BoxPlayer fullscreen={fullscreen} />
 }
 

diff --git a/app/components/player/Player.web.js b/app/components/player/Player.web.js
@@ -2,27 +2,21 @@ import React from 'react';
 
 import { SettingsContext } from '~/contexts/settings';
 import { SongContext } from '~/contexts/song';
-import { updateTime } from '~/utils/player';
 import BoxPlayer from './BoxPlayer';
 import FullScreenPlayer from './FullScreenPlayer';
 import BoxDesktopPlayer from './BoxDesktopPlayer';
 
 const Player = ({ state, fullscreen }) => {
 	const [song, songDispatch] = React.useContext(SongContext)
 	const settings = React.useContext(SettingsContext)
-	const [time, setTime] = React.useState(null)
-
-	React.useEffect(() => {
-		return updateTime(setTime)
-	}, [])
 
 	React.useEffect(() => {
 		fullscreen.set(false)
 	}, [state.index])
 
 	if (!song?.songInfo) return null
-	else if (fullscreen.value) return <FullScreenPlayer fullscreen={fullscreen} time={time ? time : song} />
-	else if (settings.isDesktop) return <BoxDesktopPlayer fullscreen={fullscreen} time={time ? time : song} />
+	else if (fullscreen.value) return <FullScreenPlayer fullscreen={fullscreen} />
+	else if (settings.isDesktop) return <BoxDesktopPlayer fullscreen={fullscreen} />
 	return <BoxPlayer fullscreen={fullscreen} />
 }
 

diff --git a/app/utils/player.native.js b/app/utils/player.native.js
@@ -1,4 +1,4 @@
-import TrackPlayer, { AppKilledPlaybackBehavior, Capability, RepeatMode, State } from "react-native-track-player"
+import TrackPlayer, { AppKilledPlaybackBehavior, Capability, RepeatMode, State, useProgress } from "react-native-track-player"
 import { getApi, urlCover, urlStream } from './api';
 
 export const initService = async () => {
@@ -63,7 +63,6 @@ export const resumeSong = async () => {
 }
 
 export const playSong = async (config, songDispatch, queue, index) => {
-  const track = queue[index]
   const tracks = queue.map((track) => {
     return {
       ...track,
@@ -147,4 +146,6 @@ export const tuktuktuk = async (songDispatch) => {
 }
 
 export const updateVolume = (setVolume) => { }
-export const updateTime = (setTime) => { }
+export const updateTime = () => {
+  return useProgress(500)
+}
diff --git a/app/utils/player.web.js b/app/utils/player.web.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as serviceWorkerRegistration from '~/services/serviceWorkerRegistration';
 
 import { getApi, urlCover, urlStream } from './api';
@@ -75,21 +76,27 @@ export const initPlayer = async (songDispatch) => {
 	})
 }
 
-export const updateTime = (setTime) => {
-	const sound = audio()
-	const timeUpdateHandler = () => {
-		setTime({
-			position: audio().currentTime,
-			duration: audio().duration,
-		})
-	}
+export const updateTime = () => {
+	const [time, setTime] = React.useState({ position: 0, duration: 0 })
 
-	sound.addEventListener('timeupdate', timeUpdateHandler)
-	sound.addEventListener('durationchange', timeUpdateHandler)
-	return () => {
-		sound.removeEventListener('timeupdate', timeUpdateHandler)
-		sound.removeEventListener('durationchange', timeUpdateHandler)
-	}
+	React.useEffect(() => {
+		const sound = audio()
+		const timeUpdateHandler = () => {
+			setTime({
+				position: audio().currentTime,
+				duration: audio().duration,
+			})
+		}
+
+		sound.addEventListener('timeupdate', timeUpdateHandler)
+		sound.addEventListener('durationchange', timeUpdateHandler)
+		return () => {
+			sound.removeEventListener('timeupdate', timeUpdateHandler)
+			sound.removeEventListener('durationchange', timeUpdateHandler)
+		}
+	}, [])
+
+	return time
 }
 
 const downloadNextSong = async (config, queue, currentIndex) => {
@@ -205,5 +212,5 @@ export const tuktuktuk = (songDispatch) => {
 }
 
 export const setRepeat = async (songdispatch, action) => {
-  songdispatch({ type: 'setActionEndOfSong', action })
+	songdispatch({ type: 'setActionEndOfSong', action })
 }
diff --git a/index.js b/index.js
@@ -0,0 +1,8 @@
+import registerRootComponent from 'expo/build/launch/registerRootComponent';
+
+import App from './App';
+import { initService } from './app/utils/player';
+
+registerRootComponent(App);
+
+initService()
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "castafiore",
   "version": "2024.12.25",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index.js",
   "homepage": ".",
   "scripts": {
     "start": "expo start",