Browse Source

add seekable, fix media back

master
jeffvli 3 years ago
parent
commit
f8b05526d1
  1. 19
      src/components/player/Player.tsx
  2. 2
      src/main.dev.js
  3. 29
      src/redux/playQueueSlice.ts

19
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 }));
}
};

2
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`);

29
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<number>) => {
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<number>) => {
@ -108,6 +114,7 @@ const playQueueSlice = createSlice({
incrementCurrentIndex: (state, action: PayloadAction<string>) => {
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<string>) => {
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<Entry>) => {
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,

Loading…
Cancel
Save