diff --git a/src/components/player/PlayerBar/components/PlayInfo.tsx b/src/components/player/PlayerBar/components/PlayInfo.tsx index 79a4ea7..1e95b52 100644 --- a/src/components/player/PlayerBar/components/PlayInfo.tsx +++ b/src/components/player/PlayerBar/components/PlayInfo.tsx @@ -10,6 +10,7 @@ import Text from '@/components/common/Text' import { COMPONENT_IDS } from '@/config/constant' import { usePageVisible } from '@/store/common/hook' import { scaleSizeH, scaleSizeW, scaleSizeWR } from '@/utils/pixelRatio' +import { useBufferProgress } from '@/plugins/player' const FONT_SIZE = 13 const PADDING_TOP_RAW = 1.8 @@ -32,6 +33,7 @@ export default ({ isHome }: { isHome: boolean }) => { const theme = useTheme() const [autoUpdate, setAutoUpdate] = useState(true) const { maxPlayTimeStr, nowPlayTimeStr, progress, maxPlayTime } = useProgress(autoUpdate) + const buffered = useBufferProgress() usePageVisible([COMPONENT_IDS.home], useCallback((visible) => { if (isHome) setAutoUpdate(visible) }, [isHome])) @@ -48,7 +50,7 @@ export default ({ isHome }: { isHome: boolean }) => { - + ) diff --git a/src/components/player/Progress.tsx b/src/components/player/Progress.tsx index 02ec7b2..fdcb804 100644 --- a/src/components/player/Progress.tsx +++ b/src/components/player/Progress.tsx @@ -20,11 +20,11 @@ const DefaultBar = memo(() => { }}> }) -// const BufferedBar = memo(({ bufferedProgress }) => { -// // console.log(bufferedProgress) -// const theme = useTheme() -// return -// }) +const BufferedBar = memo(({ progress }: { progress: number }) => { + // console.log(bufferedProgress) + const theme = useTheme() + return +}) const PreassBar = memo(({ onDragState, setDragProgress, onSetProgress }: { onDragState: (drag: boolean) => void @@ -67,9 +67,10 @@ const PreassBar = memo(({ onDragState, setDragProgress, onSetProgress }: { }) -const Progress = ({ progress, duration, paddingTop }: { +const Progress = ({ progress, duration, buffered, paddingTop }: { progress: number duration: number + buffered: number paddingTop?: number }) => { // const { progress } = usePlayTimeBuffer() @@ -91,7 +92,7 @@ const Progress = ({ progress, duration, paddingTop }: { - {/* */} + { draging ? ( diff --git a/src/components/player/ProgressBar.tsx b/src/components/player/ProgressBar.tsx index bc97c48..27cf84d 100644 --- a/src/components/player/ProgressBar.tsx +++ b/src/components/player/ProgressBar.tsx @@ -11,14 +11,14 @@ import { Icon } from '@/components/common/Icon' const DefaultBar = memo(() => { const theme = useTheme() - return + return }) -// const BufferedBar = memo(({ bufferedProgress }) => { -// // console.log(bufferedProgress) -// const theme = useTheme() -// return -// }) +const BufferedBar = memo(({ progress }: { progress: number }) => { + // console.log(bufferedProgress) + const theme = useTheme() + return +}) const PreassBar = memo(({ onDragState, setDragProgress, onSetProgress }: { @@ -62,11 +62,12 @@ const PreassBar = memo(({ onDragState, setDragProgress, onSetProgress }: { }) -const Progress = ({ progress, duration }: { +const Progress = ({ progress, duration, buffered }: { progress: number duration: number + buffered: number }) => { - // const { progress } = usePlayTimeBuffer() + // const { progress: bufferProgress } = usePlayTimeBuffer() const theme = useTheme() const [draging, setDraging] = useState(false) const [dragProgress, setDragProgress] = useState(0) @@ -94,7 +95,7 @@ const Progress = ({ progress, duration }: { - {/* */} + { draging ? ( diff --git a/src/plugins/player/hook.ts b/src/plugins/player/hook.ts index 736d5fa..1900b67 100644 --- a/src/plugins/player/hook.ts +++ b/src/plugins/player/hook.ts @@ -111,3 +111,78 @@ export function useProgress(updateInterval: number) { return state } + +export function useBufferProgress() { + const [progress, setProgress] = useState(0) + + useEffect(() => { + let isUnmounted = false + let preBuffered = 0 + let duration = 0 + let interval: NodeJS.Timer | null = null + + const clearItv = () => { + if (!interval) return + clearInterval(interval) + interval = null + } + const updateBuffer = async() => { + const buffered = await (duration ? TrackPlayer.getBufferedPosition() : Promise.all([TrackPlayer.getBufferedPosition(), TrackPlayer.getDuration()]).then(([buffered, _duration]) => { + duration = _duration + return buffered + })) + // console.log('updateBuffer', buffered, duration, buffered > 0, buffered == duration) + // After the asynchronous code is executed, if the component has been uninstalled, do not update the status + if (buffered > 0 && buffered == duration) clearItv() + if (buffered == preBuffered || isUnmounted) return + preBuffered = buffered + setProgress(duration ? (buffered / duration) : 0) + } + + const sub = TrackPlayer.addEventListener(Event.PlaybackState, data => { + switch (data.state) { + case State.None: + // console.log('state', 'None') + setProgress(0) + break + // case State.Ready: + // console.log('state', 'Ready') + // break + // case State.Stopped: + // console.log('state', 'Stopped') + // break + // case State.Paused: + // console.log('state', 'Paused') + // break + // case State.Playing: + // console.log('state', 'Playing') + // break + case State.Buffering: + // console.log('state', 'Buffering') + clearItv() + duration = 0 + interval = setInterval(updateBuffer, 1000) + void updateBuffer() + break + // case State.Connecting: + // console.log('state', 'Connecting') + // break + // default: + // console.log('playback-state', data) + // break + } + }) + + void updateBuffer() + void TrackPlayer.getState().then((state) => { + if (state == State.Buffering) interval = setInterval(updateBuffer, 1000) + }) + return () => { + isUnmounted = true + sub.remove() + clearItv() + } + }, []) + + return progress +} diff --git a/src/plugins/player/index.ts b/src/plugins/player/index.ts index ed070de..1e22f11 100644 --- a/src/plugins/player/index.ts +++ b/src/plugins/player/index.ts @@ -65,4 +65,5 @@ export { updateMetaData, onStateChange, isEmpty, + useBufferProgress, } from './utils' diff --git a/src/plugins/player/playList.ts b/src/plugins/player/playList.ts index a174afa..29a5377 100644 --- a/src/plugins/player/playList.ts +++ b/src/plugins/player/playList.ts @@ -228,7 +228,7 @@ const debounceUpdateMetaInfoTools = { if (!musicInfo) return // isDelayRun = false void fn(musicInfo) - }, 1500) + }, 1000) } else { isDelayRun = true void fn(musicInfo) diff --git a/src/plugins/player/utils.ts b/src/plugins/player/utils.ts index cb6661a..f1d5cf8 100644 --- a/src/plugins/player/utils.ts +++ b/src/plugins/player/utils.ts @@ -4,12 +4,12 @@ import { playMusic as handlePlayMusic } from './playList' // import { PlayerMusicInfo } from '@/store/modules/player/playInfo' -export { useProgress } from './hook' +export { useBufferProgress } from './hook' const emptyIdRxp = /\/\/default$/ const tempIdRxp = /\/\/default$|\/\/default\/\/restorePlay$/ export const isEmpty = (trackId = global.lx.playerTrackId) => { - console.log(trackId) + // console.log(trackId) return !trackId || emptyIdRxp.test(trackId) } export const isTempId = (trackId = global.lx.playerTrackId) => !trackId || tempIdRxp.test(trackId) diff --git a/src/screens/PlayDetail/Horizontal/Player/PlayInfo.tsx b/src/screens/PlayDetail/Horizontal/Player/PlayInfo.tsx index c2d2711..7f4ff10 100644 --- a/src/screens/PlayDetail/Horizontal/Player/PlayInfo.tsx +++ b/src/screens/PlayDetail/Horizontal/Player/PlayInfo.tsx @@ -7,6 +7,7 @@ import { useProgress } from '@/store/player/hook' import { useTheme } from '@/store/theme/hook' import { createStyle } from '@/utils/tools' import Text from '@/components/common/Text' +import { useBufferProgress } from '@/plugins/player' // const FONT_SIZE = 13 @@ -24,6 +25,7 @@ const PlayTimeMax = memo(({ timeStr }: { timeStr: string }) => { export default () => { const theme = useTheme() const { maxPlayTimeStr, nowPlayTimeStr, progress, maxPlayTime } = useProgress() + const buffered = useBufferProgress() // console.log('render playInfo') return ( @@ -36,7 +38,7 @@ export default () => { / - + ) } diff --git a/src/screens/PlayDetail/Vertical/Player/components/PlayInfo.tsx b/src/screens/PlayDetail/Vertical/Player/components/PlayInfo.tsx index fddee6e..4fbaf4d 100644 --- a/src/screens/PlayDetail/Vertical/Player/components/PlayInfo.tsx +++ b/src/screens/PlayDetail/Vertical/Player/components/PlayInfo.tsx @@ -7,6 +7,7 @@ import { useProgress } from '@/store/player/hook' import { useTheme } from '@/store/theme/hook' import { createStyle } from '@/utils/tools' import Text from '@/components/common/Text' +import { useBufferProgress } from '@/plugins/player' // const FONT_SIZE = 13 @@ -23,11 +24,13 @@ const PlayTimeMax = memo(({ timeStr }: { timeStr: string }) => { export default () => { const { maxPlayTimeStr, nowPlayTimeStr, progress, maxPlayTime } = useProgress() + const buffered = useBufferProgress() + // console.log('render playInfo') return ( <> - + diff --git a/src/utils/hooks/index.js b/src/utils/hooks/index.js index 940e9d7..6904c69 100644 --- a/src/utils/hooks/index.js +++ b/src/utils/hooks/index.js @@ -4,7 +4,7 @@ export { default as useWindowSize } from './useWindowSize' export { default as useHorizontalMode } from './useHorizontalMode' export { default as useDeviceOrientation } from './useDeviceOrientation' -export { default as usePlayTime } from './usePlayTime' +// export { default as usePlayTime } from './usePlayTime' export { default as useAssertApiSupport } from './useAssertApiSupport' export { useDrag } from './useDrag' export { useUnmounted } from './useUnmounted' diff --git a/src/utils/hooks/usePlayTime.js b/src/utils/hooks/usePlayTime.js index 73319e6..250d3ec 100644 --- a/src/utils/hooks/usePlayTime.js +++ b/src/utils/hooks/usePlayTime.js @@ -1,19 +1,19 @@ // import { useMemo } from 'react' -import { useProgress } from '@/plugins/player/utils' -import { formatPlayTime2 } from '@/utils' -// import { useGetter } from '@/store' -// import { STATE_PLAYING, STATE_BUFFERING } from 'react-native-track-player' +// import { useProgress } from '@/plugins/player/utils' +// import { formatPlayTime2 } from '@/utils' +// // import { useGetter } from '@/store' +// // import { STATE_PLAYING, STATE_BUFFERING } from 'react-native-track-player' -export default () => { - const { position, buffered, duration } = useProgress(250) - // const isGettingUrl = useGetter('player', 'isGettingUrl') +// export default () => { +// const { position, buffered, duration } = useProgress(250) +// // const isGettingUrl = useGetter('player', 'isGettingUrl') - return { - curTimeStr: formatPlayTime2(position), - maxTimeStr: formatPlayTime2(duration), - time: position, - duration, - bufferedProgress: duration ? buffered / duration * 100 : 100, - progress: duration ? position / duration * 100 : 0, - } -} +// return { +// curTimeStr: formatPlayTime2(position), +// maxTimeStr: formatPlayTime2(duration), +// time: position, +// duration, +// bufferedProgress: duration ? buffered / duration * 100 : 100, +// progress: duration ? position / duration * 100 : 0, +// } +// } diff --git a/src/utils/log.ts b/src/utils/log.ts index 8657204..fb5d1fa 100644 --- a/src/utils/log.ts +++ b/src/utils/log.ts @@ -13,7 +13,7 @@ const logTools = { async initLogFile() { try { let isExists = await existsFile(logPath) - console.log(isExists) + // console.log(isExists) if (!isExists) await writeFile(logPath, '') if (this.tempLog?.length) this.writeLog(this.tempLog.map(m => `${m.time} ${m.type} ${m.text}`).join('\n----lx log----\n')) this.tempLog = null