diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx index 6659c20..57f1152 100644 --- a/src/components/player/Player.tsx +++ b/src/components/player/Player.tsx @@ -55,9 +55,18 @@ const Player = ({ children }: any, ref: any) => { const handleListen = () => { const fadeDuration = 10; const currentSeek = player1Ref.current?.audioEl.current?.currentTime || 0; + const seekable = + player1Ref.current.audioEl.current.seekable.length >= 1 + ? player1Ref.current.audioEl.current.seekable.end( + player1Ref.current.audioEl.current.seekable.length - 1 + ) + : 0; const duration = player1Ref.current?.audioEl.current?.duration; const fadeAtTime = duration - fadeDuration; + console.log(`seekable`, seekable); + console.log(`currentSeek`, currentSeek); + if (currentSeek >= fadeAtTime) { // Once fading starts, start playing player 2 and set current to 2 const timeLeft = duration - currentSeek; @@ -82,13 +91,19 @@ const Player = ({ children }: any, ref: any) => { } if (playQueue.currentPlayer === 1) { - dispatch(setCurrentSeek(currentSeek)); + dispatch(setCurrentSeek({ seek: currentSeek, seekable })); } }; const handleListen2 = () => { const fadeDuration = 10; const currentSeek = player2Ref.current?.audioEl.current?.currentTime || 0; + const seekable = + player2Ref.current.audioEl.current.seekable.length >= 1 + ? player2Ref.current.audioEl.current.seekable.end( + player2Ref.current.audioEl.current.seekable.length - 1 + ) + : 0; const duration = player2Ref.current?.audioEl.current?.duration; const fadeAtTime = duration - fadeDuration; @@ -116,7 +131,7 @@ const Player = ({ children }: any, ref: any) => { } if (playQueue.currentPlayer === 2) { - dispatch(setCurrentSeek(currentSeek)); + dispatch(setCurrentSeek({ seek: currentSeek, seekable })); } }; diff --git a/src/main.dev.js b/src/main.dev.js index 3fde0e4..b88ba85 100644 --- a/src/main.dev.js +++ b/src/main.dev.js @@ -25,6 +25,7 @@ import playQueueReducer, { decrementCurrentIndex, incrementCurrentIndex, setStatus, + fixPlayer2Index, } from './redux/playQueueSlice'; import multiSelectReducer from './redux/multiSelectSlice'; import MenuBuilder from './menu'; @@ -123,6 +124,7 @@ const createWindow = async () => { globalShortcut.register('MediaPreviousTrack', () => { store.dispatch(decrementCurrentIndex('usingHotkey')); + store.dispatch(fixPlayer2Index()); }); mainWindow.loadURL(`file://${__dirname}/index.html`); diff --git a/src/redux/playQueueSlice.ts b/src/redux/playQueueSlice.ts index 6865089..02060d5 100644 --- a/src/redux/playQueueSlice.ts +++ b/src/redux/playQueueSlice.ts @@ -35,6 +35,7 @@ export interface PlayQueue { currentSongId: string; currentPlayer: number; currentSeek: number; + currentSeekable: number; isFading: boolean; autoIncremented: boolean; player1: { @@ -57,6 +58,7 @@ const initialState: PlayQueue = { currentSongId: '', currentPlayer: 1, currentSeek: 0, + currentSeekable: 0, isFading: false, autoIncremented: false, player1: { @@ -93,8 +95,12 @@ const playQueueSlice = createSlice({ state.volume = action.payload; }, - setCurrentSeek: (state, action: PayloadAction) => { - state.currentSeek = action.payload; + setCurrentSeek: ( + state, + action: PayloadAction<{ seek: number; seekable: number }> + ) => { + state.currentSeek = action.payload.seek; + state.currentSeekable = action.payload.seekable; }, setCurrentPlayer: (state, action: PayloadAction) => { @@ -108,6 +114,7 @@ const playQueueSlice = createSlice({ incrementCurrentIndex: (state, action: PayloadAction) => { if (state.entry.length >= 1) { state.currentSeek = 0; + state.currentSeekable = 0; if (state.currentIndex < state.entry.length - 1) { state.currentIndex += 1; if (action.payload === 'usingHotkey') { @@ -149,6 +156,7 @@ const playQueueSlice = createSlice({ ); state.currentSeek = 0; + state.currentSeekable = 0; state.isFading = false; state.player1.index = findIndex; state.player1.volume = state.volume; @@ -173,12 +181,20 @@ const playQueueSlice = createSlice({ decrementCurrentIndex: (state, action: PayloadAction) => { if (state.entry.length >= 1) { state.currentSeek = 0; + state.currentSeekable = 0; if (state.currentIndex > 0) { state.currentIndex -= 1; if (action.payload === 'usingHotkey') { state.currentPlayer = 1; + state.isFading = false; + state.player1.volume = state.volume; state.player1.index = state.currentIndex; - state.player2.index = state.currentIndex + 1; + + // Set the index back to 0 here, while performing the index set on fixPlayer2Index + // when dispatching this reducer. We need to do this because when decrementing while + // the current player is player2, the current index of player2 will not change, + // which means that player2 will continue playing even after decrementing the song + state.player2.index = 0; } } @@ -186,6 +202,10 @@ const playQueueSlice = createSlice({ } }, + fixPlayer2Index: (state) => { + state.player2.index = state.currentIndex + 1; + }, + setCurrentIndex: (state, action: PayloadAction) => { const findIndex = state.entry.findIndex( (track) => track.id === action.payload.id @@ -204,6 +224,7 @@ const playQueueSlice = createSlice({ state.currentSongId = ''; state.currentPlayer = 1; state.currentSeek = 0; + state.currentSeekable = 0; state.player1.index = 0; state.player2.index = 1; @@ -226,6 +247,7 @@ const playQueueSlice = createSlice({ state.currentSongId = ''; state.currentPlayer = 1; state.currentSeek = 0; + state.currentSeekable = 0; state.player1.index = 0; state.player2.index = 1; }, @@ -311,6 +333,7 @@ export const { decrementCurrentIndex, incrementPlayerIndex, setPlayerIndex, + fixPlayer2Index, setCurrentIndex, setPlayQueue, clearPlayQueue,