From 73bc9d29dfe5d997c7b71351561b21d11202cb3a Mon Sep 17 00:00:00 2001 From: Sawyerf Date: Thu, 26 Dec 2024 23:57:50 +0100 Subject: [PATCH] Fix: re-rendering player --- App.js | 4 +-- app/components/player/BoxDesktopPlayer.js | 5 +-- app/components/player/FullScreenPlayer.js | 5 +-- app/components/player/Player.native.js | 9 +++--- app/components/player/Player.web.js | 10 ++---- app/utils/player.native.js | 7 +++-- app/utils/player.web.js | 37 ++++++++++++++--------- index.js | 8 +++++ package.json | 2 +- 9 files changed, 48 insertions(+), 39 deletions(-) create mode 100644 index.js diff --git a/App.js b/App.js index c2b7aa8..5136443 100755 --- 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; \ No newline at end of file diff --git a/app/components/player/BoxDesktopPlayer.js b/app/components/player/BoxDesktopPlayer.js index e24b1ee..0c2ef33 100644 --- 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 index b321021..51c5d3a 100644 --- 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 index 0f30caf..6538bac 100644 --- 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 - else if (settings.isDesktop) return + else if (fullscreen.value) return + else if (settings.isDesktop) return return } diff --git a/app/components/player/Player.web.js b/app/components/player/Player.web.js index a80c434..15fd336 100644 --- a/app/components/player/Player.web.js +++ b/app/components/player/Player.web.js @@ -2,7 +2,6 @@ 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'; @@ -10,19 +9,14 @@ 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 - else if (settings.isDesktop) return + else if (fullscreen.value) return + else if (settings.isDesktop) return return } diff --git a/app/utils/player.native.js b/app/utils/player.native.js index 4fbe64c..9224294 100644 --- 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) => { } \ No newline at end of file +export const updateTime = () => { + return useProgress(500) +} \ No newline at end of file diff --git a/app/utils/player.web.js b/app/utils/player.web.js index a1c7d38..12b6966 100644 --- 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 }) } \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..0bb4b61 --- /dev/null +++ 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() \ No newline at end of file diff --git a/package.json b/package.json index 5c6ed30..be393aa 100755 --- 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",