Browse Source

Optimize gapless playback

- Remove unused seekable attribute
- Remove seek/duration rounding calculation
master
jeffvli 3 years ago
parent
commit
2457300de2
  1. 1
      src/__tests__/App.test.tsx
  2. 26
      src/components/player/Player.tsx
  3. 9
      src/redux/playerSlice.ts

1
src/__tests__/App.test.tsx

@ -61,7 +61,6 @@ const playQueueState: PlayQueue = {
const playerState: Player = {
status: 'PAUSED',
currentSeek: 0,
currentSeekable: 0,
};
const miscState: General = {

26
src/components/player/Player.tsx

@ -35,24 +35,14 @@ const gaplessListenHandler = (
dispatch: any,
pollingInterval: number
) => {
const seek =
Math.round(currentPlayerRef.current.audioEl.current.currentTime * 100) /
100;
const duration =
Math.round(currentPlayerRef.current.audioEl.current.duration * 100) / 100;
const seekable =
currentPlayerRef.current.audioEl.current.seekable.length >= 1
? currentPlayerRef.current.audioEl.current.seekable.end(
currentPlayerRef.current.audioEl.current.seekable.length - 1
)
: 0;
const seek = currentPlayerRef.current?.audioEl.current?.currentTime || 0;
const duration = currentPlayerRef.current?.audioEl.current?.duration;
if (playQueue.currentPlayer === currentPlayer) {
dispatch(
setCurrentSeek({
seek,
seekable,
})
);
}
@ -60,7 +50,7 @@ const gaplessListenHandler = (
// Add a bit of leeway for the second track to start since the
// seek value doesn't always reach the duration
const durationPadding =
pollingInterval <= 10 ? 0.13 : pollingInterval <= 20 ? 0.14 : 0.15;
pollingInterval <= 10 ? 0.12 : pollingInterval <= 20 ? 0.13 : 0.15;
if (seek + durationPadding >= duration) {
nextPlayerRef.current.audioEl.current.play();
}
@ -80,12 +70,6 @@ const listenHandler = (
) => {
const currentSeek =
currentPlayerRef.current?.audioEl.current?.currentTime || 0;
const seekable =
currentPlayerRef.current.audioEl.current.seekable.length >= 1
? currentPlayerRef.current.audioEl.current.seekable.end(
currentPlayerRef.current.audioEl.current.seekable.length - 1
)
: 0;
const duration = currentPlayerRef.current?.audioEl.current?.duration;
const fadeAtTime = duration - fadeDuration;
@ -222,7 +206,7 @@ const listenHandler = (
}
}
if (playQueue.currentPlayer === player) {
dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
dispatch(setCurrentSeek({ seek: currentSeek }));
}
};

9
src/redux/playerSlice.ts

@ -3,13 +3,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
export interface Player {
status: string;
currentSeek: number;
currentSeekable: number;
}
const initialState: Player = {
status: 'PAUSED',
currentSeek: 0,
currentSeekable: 0,
};
const playerSlice = createSlice({
@ -18,19 +16,14 @@ const playerSlice = createSlice({
reducers: {
resetPlayer: (state) => {
state.currentSeek = 0;
state.currentSeekable = 0;
},
setStatus: (state, action: PayloadAction<string>) => {
state.status = action.payload;
},
setCurrentSeek: (
state,
action: PayloadAction<{ seek: number; seekable: number }>
) => {
setCurrentSeek: (state, action: PayloadAction<{ seek: number }>) => {
state.currentSeek = action.payload.seek;
state.currentSeekable = action.payload.seekable;
},
},
});

Loading…
Cancel
Save