Browse Source

split seek/status to player slice

master
jeffvli 3 years ago
parent
commit
12e3ae3735
  1. 4
      src/components/card/Card.tsx
  2. 2
      src/components/library/AlbumView.tsx
  3. 2
      src/components/library/ArtistView.tsx
  4. 5
      src/components/player/NowPlayingView.tsx
  5. 17
      src/components/player/Player.tsx
  6. 19
      src/components/player/PlayerBar.tsx
  7. 2
      src/components/starred/StarredView.tsx
  8. 29
      src/components/viewtypes/ListViewTable.tsx
  9. 7
      src/main.dev.js
  10. 63
      src/redux/playQueueSlice.ts
  11. 67
      src/redux/playerSlice.ts

4
src/components/card/Card.tsx

@ -21,6 +21,7 @@ import {
Overlay, Overlay,
HoverControlButton, HoverControlButton,
} from './styled'; } from './styled';
import { setStatus } from '../../redux/playerSlice';
const Card = ({ const Card = ({
onClick, onClick,
@ -48,18 +49,21 @@ const Card = ({
if (playClick.type === 'playlist') { if (playClick.type === 'playlist') {
const res = await getPlaylist(playClick.id); const res = await getPlaylist(playClick.id);
dispatch(setPlayQueue(res.entry)); dispatch(setPlayQueue(res.entry));
dispatch(setStatus('PLAYING'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
} }
if (playClick.type === 'album') { if (playClick.type === 'album') {
const res = await getAlbum(playClick.id); const res = await getAlbum(playClick.id);
dispatch(setPlayQueue(res.song)); dispatch(setPlayQueue(res.song));
dispatch(setStatus('PLAYING'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
} }
if (playClick.type === 'artist') { if (playClick.type === 'artist') {
const res = await getAlbum(playClick.id); const res = await getAlbum(playClick.id);
dispatch(setPlayQueue(res.song)); dispatch(setPlayQueue(res.song));
dispatch(setStatus('PLAYING'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
} }
}; };

2
src/components/library/AlbumView.tsx

@ -27,6 +27,7 @@ import ListViewType from '../viewtypes/ListViewType';
import Loader from '../loader/Loader'; import Loader from '../loader/Loader';
import GenericPageHeader from '../layout/GenericPageHeader'; import GenericPageHeader from '../layout/GenericPageHeader';
import { TagLink } from './styled'; import { TagLink } from './styled';
import { setStatus } from '../../redux/playerSlice';
interface AlbumParams { interface AlbumParams {
id: string; id: string;
@ -73,6 +74,7 @@ const AlbumView = () => {
dispatch(clearSelected()); dispatch(clearSelected());
dispatch(setPlayQueue(newPlayQueue)); dispatch(setPlayQueue(newPlayQueue));
dispatch(setStatus('PLAYING'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
}; };

2
src/components/library/ArtistView.tsx

@ -28,6 +28,7 @@ import Loader from '../loader/Loader';
import GenericPageHeader from '../layout/GenericPageHeader'; import GenericPageHeader from '../layout/GenericPageHeader';
import CustomTooltip from '../shared/CustomTooltip'; import CustomTooltip from '../shared/CustomTooltip';
import { TagLink } from './styled'; import { TagLink } from './styled';
import { setStatus } from '../../redux/playerSlice';
interface ArtistParams { interface ArtistParams {
id: string; id: string;
@ -85,6 +86,7 @@ const ArtistView = () => {
dispatch(clearSelected()); dispatch(clearSelected());
dispatch(setPlayQueue(newPlayQueue)); dispatch(setPlayQueue(newPlayQueue));
dispatch(setStatus('PLAYING'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
}; };

5
src/components/player/NowPlayingView.tsx

@ -22,6 +22,7 @@ import GenericPage from '../layout/GenericPage';
import GenericPageHeader from '../layout/GenericPageHeader'; import GenericPageHeader from '../layout/GenericPageHeader';
import ListViewType from '../viewtypes/ListViewType'; import ListViewType from '../viewtypes/ListViewType';
import Loader from '../loader/Loader'; import Loader from '../loader/Loader';
import { resetPlayer, setStatus } from '../../redux/playerSlice';
const NowPlayingView = () => { const NowPlayingView = () => {
const tableRef = useRef<any>(); const tableRef = useRef<any>();
@ -77,8 +78,10 @@ const NowPlayingView = () => {
dispatch(setPlayerVolume({ player: 2, volume: 0 })); dispatch(setPlayerVolume({ player: 2, volume: 0 }));
dispatch(clearSelected()); dispatch(clearSelected());
dispatch(resetPlayer());
dispatch(setPlayerIndex(rowData)); dispatch(setPlayerIndex(rowData));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
dispatch(setStatus('PLAYING'));
}; };
if (!playQueue) { if (!playQueue) {
@ -114,6 +117,8 @@ const NowPlayingView = () => {
<Button <Button
onClick={() => { onClick={() => {
dispatch(clearPlayQueue()); dispatch(clearPlayQueue());
dispatch(resetPlayer());
dispatch(setStatus('PAUSED'));
}} }}
> >
Clear queue Clear queue

17
src/components/player/Player.tsx

@ -17,13 +17,13 @@ import {
incrementPlayerIndex, incrementPlayerIndex,
setCurrentPlayer, setCurrentPlayer,
setPlayerVolume, setPlayerVolume,
setCurrentSeek,
setIsFading, setIsFading,
setAutoIncremented, setAutoIncremented,
resetPlayer, resetPlayQueue,
fixPlayer2Index, fixPlayer2Index,
setCurrentIndex, setCurrentIndex,
} from '../../redux/playQueueSlice'; } from '../../redux/playQueueSlice';
import { resetPlayer, setCurrentSeek } from '../../redux/playerSlice';
import cacheSong from '../shared/cacheSong'; import cacheSong from '../shared/cacheSong';
const Player = ({ children }: any, ref: any) => { const Player = ({ children }: any, ref: any) => {
@ -31,6 +31,7 @@ const Player = ({ children }: any, ref: any) => {
const player2Ref = useRef<any>(); const player2Ref = useRef<any>();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const playQueue = useAppSelector((state) => state.playQueue); const playQueue = useAppSelector((state) => state.playQueue);
const player = useAppSelector((state) => state.player);
const cacheSongs = settings.getSync('cacheSongs'); const cacheSongs = settings.getSync('cacheSongs');
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
@ -44,7 +45,7 @@ const Player = ({ children }: any, ref: any) => {
})); }));
useEffect(() => { useEffect(() => {
if (playQueue.status === 'PLAYING') { if (player.status === 'PLAYING') {
if (playQueue.currentPlayer === 1) { if (playQueue.currentPlayer === 1) {
try { try {
player1Ref.current.audioEl.current.play(); player1Ref.current.audioEl.current.play();
@ -62,7 +63,7 @@ const Player = ({ children }: any, ref: any) => {
player1Ref.current.audioEl.current.pause(); player1Ref.current.audioEl.current.pause();
player2Ref.current.audioEl.current.pause(); player2Ref.current.audioEl.current.pause();
} }
}, [playQueue.currentPlayer, playQueue.status]); }, [playQueue.currentPlayer, player.status]);
const handleListen1 = () => { const handleListen1 = () => {
const fadeDuration = Number(settings.getSync('fadeDuration')) || 0; const fadeDuration = Number(settings.getSync('fadeDuration')) || 0;
@ -188,6 +189,7 @@ const Player = ({ children }: any, ref: any) => {
playQueue.repeat === 'none' && playQueue.repeat === 'none' &&
playQueue.player1.index > playQueue.player2.index playQueue.player1.index > playQueue.player2.index
) { ) {
dispatch(resetPlayQueue());
dispatch(resetPlayer()); dispatch(resetPlayer());
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
setTimeout(() => { setTimeout(() => {
@ -196,6 +198,7 @@ const Player = ({ children }: any, ref: any) => {
}, 200); }, 200);
} else { } else {
if (!playQueue.autoIncremented) { if (!playQueue.autoIncremented) {
dispatch(resetPlayer());
dispatch(incrementCurrentIndex('none')); dispatch(incrementCurrentIndex('none'));
dispatch(setCurrentIndex(playQueue.entry[playQueue.player2.index])); dispatch(setCurrentIndex(playQueue.entry[playQueue.player2.index]));
dispatch(setAutoIncremented(true)); dispatch(setAutoIncremented(true));
@ -225,6 +228,7 @@ const Player = ({ children }: any, ref: any) => {
playQueue.repeat === 'none' && playQueue.repeat === 'none' &&
playQueue.player2.index > playQueue.player1.index playQueue.player2.index > playQueue.player1.index
) { ) {
dispatch(resetPlayQueue());
dispatch(resetPlayer()); dispatch(resetPlayer());
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
setTimeout(() => { setTimeout(() => {
@ -233,6 +237,7 @@ const Player = ({ children }: any, ref: any) => {
}, 200); }, 200);
} else { } else {
if (!playQueue.autoIncremented) { if (!playQueue.autoIncremented) {
dispatch(resetPlayer());
dispatch(incrementCurrentIndex('none')); dispatch(incrementCurrentIndex('none'));
dispatch(setCurrentIndex(playQueue.entry[playQueue.player1.index])); dispatch(setCurrentIndex(playQueue.entry[playQueue.player1.index]));
dispatch(setAutoIncremented(true)); dispatch(setAutoIncremented(true));
@ -275,7 +280,7 @@ const Player = ({ children }: any, ref: any) => {
useEffect(() => { useEffect(() => {
const playStatus = const playStatus =
playQueue.status !== 'PLAYING' && playQueue.entry.length > 0 player.status !== 'PLAYING' && playQueue.entry.length > 0
? '(Paused)' ? '(Paused)'
: ''; : '';
const songTitle = playQueue.entry[playQueue.currentIndex]?.title const songTitle = playQueue.entry[playQueue.currentIndex]?.title
@ -285,7 +290,7 @@ const Player = ({ children }: any, ref: any) => {
: 'sonixd'; : 'sonixd';
setTitle(`${playStatus} ${songTitle}`); setTitle(`${playStatus} ${songTitle}`);
}, [playQueue.currentIndex, playQueue.entry, playQueue.status]); }, [playQueue.currentIndex, playQueue.entry, player.status]);
return ( return (
<> <>

19
src/components/player/PlayerBar.tsx

@ -17,12 +17,12 @@ import {
decrementCurrentIndex, decrementCurrentIndex,
setVolume, setVolume,
setPlayerVolume, setPlayerVolume,
setStatus,
fixPlayer2Index, fixPlayer2Index,
toggleRepeat, toggleRepeat,
toggleDisplayQueue, toggleDisplayQueue,
setStar, setStar,
} from '../../redux/playQueueSlice'; } from '../../redux/playQueueSlice';
import { setStatus, resetPlayer } from '../../redux/playerSlice';
import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { useAppDispatch, useAppSelector } from '../../redux/hooks';
import Player from './Player'; import Player from './Player';
import CustomTooltip from '../shared/CustomTooltip'; import CustomTooltip from '../shared/CustomTooltip';
@ -37,6 +37,7 @@ const keyCodes = {
const PlayerBar = () => { const PlayerBar = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const playQueue = useAppSelector((state) => state.playQueue); const playQueue = useAppSelector((state) => state.playQueue);
const player = useAppSelector((state) => state.player);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [seek, setSeek] = useState(0); const [seek, setSeek] = useState(0);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@ -51,8 +52,8 @@ const PlayerBar = () => {
const history = useHistory(); const history = useHistory();
useEffect(() => { useEffect(() => {
setSeek(playQueue.currentSeek); setSeek(player.currentSeek);
}, [playQueue.currentSeek]); }, [player.currentSeek]);
useEffect(() => { useEffect(() => {
if (isDragging) { if (isDragging) {
@ -70,16 +71,18 @@ const PlayerBar = () => {
}, [isDragging, manualSeek, playQueue.currentPlayer]); }, [isDragging, manualSeek, playQueue.currentPlayer]);
const handleClickNext = () => { const handleClickNext = () => {
dispatch(resetPlayer());
dispatch(incrementCurrentIndex('usingHotkey')); dispatch(incrementCurrentIndex('usingHotkey'));
}; };
const handleClickPrevious = () => { const handleClickPrevious = () => {
dispatch(resetPlayer());
dispatch(decrementCurrentIndex('usingHotkey')); dispatch(decrementCurrentIndex('usingHotkey'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
}; };
const handleClickPlayPause = () => { const handleClickPlayPause = () => {
dispatch(setStatus(playQueue.status === 'PLAYING' ? 'PAUSED' : 'PLAYING')); dispatch(setStatus(player.status === 'PLAYING' ? 'PAUSED' : 'PLAYING'));
}; };
const handleVolumeSlider = (e: number) => { const handleVolumeSlider = (e: number) => {
@ -395,13 +398,11 @@ const PlayerBar = () => {
<PlayerControlIcon <PlayerControlIcon
tabIndex={0} tabIndex={0}
icon={ icon={
playQueue.status === 'PLAYING' player.status === 'PLAYING' ? 'pause-circle' : 'play-circle'
? 'pause-circle'
: 'play-circle'
} }
spin={ spin={
playQueue.currentSeekable <= playQueue.currentSeek && player.currentSeekable <= player.currentSeek &&
playQueue.status === 'PLAYING' player.status === 'PLAYING'
} }
size="3x" size="3x"
onClick={handleClickPlayPause} onClick={handleClickPlayPause}

2
src/components/starred/StarredView.tsx

@ -18,6 +18,7 @@ import GenericPageHeader from '../layout/GenericPageHeader';
import Loader from '../loader/Loader'; import Loader from '../loader/Loader';
import ListViewType from '../viewtypes/ListViewType'; import ListViewType from '../viewtypes/ListViewType';
import GridViewType from '../viewtypes/GridViewType'; import GridViewType from '../viewtypes/GridViewType';
import { setStatus } from '../../redux/playerSlice';
const StarredView = () => { const StarredView = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -80,6 +81,7 @@ const StarredView = () => {
const newPlayQueue = data.song.slice([e.index], data.song.length); const newPlayQueue = data.song.slice([e.index], data.song.length);
dispatch(clearSelected()); dispatch(clearSelected());
dispatch(setPlayQueue(newPlayQueue)); dispatch(setPlayQueue(newPlayQueue));
dispatch(setStatus('PLAYING'));
dispatch(fixPlayer2Index()); dispatch(fixPlayer2Index());
}; };

29
src/components/viewtypes/ListViewTable.tsx

@ -112,7 +112,10 @@ const ListViewTable = ({
}) })
} }
className={ className={
rowData.id === playQueue?.currentSongId ? 'active' : '' rowData.id === playQueue?.currentSongId &&
playQueue.currentIndex === rowIndex
? 'active'
: ''
} }
style={ style={
multiSelect?.selected.find( multiSelect?.selected.find(
@ -149,7 +152,10 @@ const ListViewTable = ({
}) })
} }
className={ className={
rowData.id === playQueue?.currentSongId ? 'active' : '' rowData.id === playQueue?.currentSongId &&
playQueue.currentIndex === rowIndex
? 'active'
: ''
} }
style={ style={
multiSelect?.selected.find( multiSelect?.selected.find(
@ -258,11 +264,6 @@ const ListViewTable = ({
<RsuiteLinkButton <RsuiteLinkButton
subtitle="true" subtitle="true"
appearance="link" appearance="link"
className={
rowData.id === playQueue?.currentSongId
? 'active'
: ''
}
onClick={() => { onClick={() => {
history.push( history.push(
`/library/artist/${rowData.artistId}` `/library/artist/${rowData.artistId}`
@ -355,7 +356,12 @@ const ListViewTable = ({
}) })
} }
className={ className={
rowData.id === playQueue?.currentSongId ? 'active' : '' rowData.id === playQueue?.currentSongId &&
(column.dataKey === 'title' ||
column.dataKey === 'name') &&
playQueue.currentIndex === rowIndex
? 'active'
: ''
} }
style={ style={
multiSelect?.selected.find( multiSelect?.selected.find(
@ -382,11 +388,6 @@ const ListViewTable = ({
column.dataKey === 'artist' ? ( column.dataKey === 'artist' ? (
<RsuiteLinkButton <RsuiteLinkButton
appearance="link" appearance="link"
className={
rowData.id === playQueue?.currentSongId
? 'active'
: ''
}
onClick={() => { onClick={() => {
if (column.dataKey === 'album') { if (column.dataKey === 'album') {
history.push(`/library/album/${rowData.albumId}`); history.push(`/library/album/${rowData.albumId}`);
@ -414,7 +415,7 @@ const ListViewTable = ({
size="lg" size="lg"
fixedWidth fixedWidth
style={{ style={{
color: rowData?.starred ? '#1179ac' : undefined, color: rowData?.starred ? '#1179ac' : '#E8EAEF',
cursor: 'pointer', cursor: 'pointer',
}} }}
onClick={() => handleFavorite(rowData)} onClick={() => handleFavorite(rowData)}

7
src/main.dev.js

@ -20,11 +20,10 @@ import {
triggerAlias, triggerAlias,
replayActionMain, replayActionMain,
} from 'electron-redux'; } from 'electron-redux';
import playerReducer from './redux/playerSlice'; import playerReducer, { resetPlayer, setStatus } from './redux/playerSlice';
import playQueueReducer, { import playQueueReducer, {
decrementCurrentIndex, decrementCurrentIndex,
incrementCurrentIndex, incrementCurrentIndex,
setStatus,
fixPlayer2Index, fixPlayer2Index,
} from './redux/playQueueSlice'; } from './redux/playQueueSlice';
import multiSelectReducer from './redux/multiSelectSlice'; import multiSelectReducer from './redux/multiSelectSlice';
@ -112,7 +111,7 @@ const createWindow = async () => {
globalShortcut.register('MediaPlayPause', () => { globalShortcut.register('MediaPlayPause', () => {
const storeValues = store.getState(); const storeValues = store.getState();
if (storeValues.playQueue.entry.length >= 1) { if (storeValues.playQueue.entry.length >= 1) {
if (storeValues.playQueue.status === 'PAUSED') { if (storeValues.player.status === 'PAUSED') {
store.dispatch(setStatus('PLAYING')); store.dispatch(setStatus('PLAYING'));
} else { } else {
store.dispatch(setStatus('PAUSED')); store.dispatch(setStatus('PAUSED'));
@ -123,6 +122,7 @@ const createWindow = async () => {
globalShortcut.register('MediaNextTrack', () => { globalShortcut.register('MediaNextTrack', () => {
const storeValues = store.getState(); const storeValues = store.getState();
if (storeValues.playQueue.entry.length >= 1) { if (storeValues.playQueue.entry.length >= 1) {
store.dispatch(resetPlayer());
store.dispatch(incrementCurrentIndex('usingHotkey')); store.dispatch(incrementCurrentIndex('usingHotkey'));
} }
}); });
@ -130,6 +130,7 @@ const createWindow = async () => {
globalShortcut.register('MediaPreviousTrack', () => { globalShortcut.register('MediaPreviousTrack', () => {
const storeValues = store.getState(); const storeValues = store.getState();
if (storeValues.playQueue.entry.length >= 1) { if (storeValues.playQueue.entry.length >= 1) {
store.dispatch(resetPlayer());
store.dispatch(decrementCurrentIndex('usingHotkey')); store.dispatch(decrementCurrentIndex('usingHotkey'));
store.dispatch(fixPlayer2Index()); store.dispatch(fixPlayer2Index());
} }

63
src/redux/playQueueSlice.ts

@ -30,14 +30,6 @@ interface Entry {
} }
export interface PlayQueue { export interface PlayQueue {
status: string;
currentIndex: number;
currentSongId: string;
currentPlayer: number;
currentSeek: number;
currentSeekable: number;
isFading: boolean;
autoIncremented: boolean;
player1: { player1: {
index: number; index: number;
volume: number; volume: number;
@ -46,6 +38,11 @@ export interface PlayQueue {
index: number; index: number;
volume: number; volume: number;
}; };
currentIndex: number;
currentSongId: string;
currentPlayer: number;
isFading: boolean;
autoIncremented: boolean;
volume: number; volume: number;
isLoading: boolean; isLoading: boolean;
repeat: string; repeat: string;
@ -55,14 +52,6 @@ export interface PlayQueue {
} }
const initialState: PlayQueue = { const initialState: PlayQueue = {
status: 'PAUSED',
currentIndex: 0,
currentSongId: '',
currentPlayer: 1,
currentSeek: 0,
currentSeekable: 0,
isFading: false,
autoIncremented: false,
player1: { player1: {
index: 0, index: 0,
volume: 0.5, volume: 0.5,
@ -71,6 +60,11 @@ const initialState: PlayQueue = {
index: 1, index: 1,
volume: 0, volume: 0,
}, },
currentIndex: 0,
currentSongId: '',
currentPlayer: 1,
isFading: false,
autoIncremented: false,
volume: 0.5, volume: 0.5,
isLoading: false, isLoading: false,
repeat: 'none', repeat: 'none',
@ -79,17 +73,11 @@ const initialState: PlayQueue = {
entry: [], entry: [],
}; };
// TODO: Needs refactoring due to rapid experimental changes to add gapless playback
const resetPlayerDefaults = (state: PlayQueue) => { const resetPlayerDefaults = (state: PlayQueue) => {
state.currentSeek = 0;
state.currentSeekable = 0;
state.isFading = false; state.isFading = false;
state.currentIndex = 0; state.currentIndex = 0;
state.currentSongId = ''; state.currentSongId = '';
state.currentPlayer = 1; state.currentPlayer = 1;
state.currentSeek = 0;
state.currentSeekable = 0;
state.player1.index = 0; state.player1.index = 0;
state.player1.volume = state.volume; state.player1.volume = state.volume;
state.player2.index = 0; state.player2.index = 0;
@ -100,16 +88,9 @@ const playQueueSlice = createSlice({
name: 'nowPlaying', name: 'nowPlaying',
initialState, initialState,
reducers: { reducers: {
resetPlayer: (state) => { resetPlayQueue: (state) => {
resetPlayerDefaults(state); resetPlayerDefaults(state);
state.currentSongId = state.entry[0].id; state.currentSongId = state.entry[0].id;
state.status = 'PAUSED';
},
setStatus: (state, action: PayloadAction<string>) => {
if (state.entry.length >= 1) {
state.status = action.payload;
}
}, },
setAutoIncremented: (state, action: PayloadAction<boolean>) => { setAutoIncremented: (state, action: PayloadAction<boolean>) => {
@ -151,14 +132,6 @@ const playQueueSlice = createSlice({
state.volume = action.payload; state.volume = 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>) => { setCurrentPlayer: (state, action: PayloadAction<number>) => {
if (action.payload === 1) { if (action.payload === 1) {
state.currentPlayer = 1; state.currentPlayer = 1;
@ -169,8 +142,6 @@ const playQueueSlice = createSlice({
incrementCurrentIndex: (state, action: PayloadAction<string>) => { incrementCurrentIndex: (state, action: PayloadAction<string>) => {
if (state.entry.length >= 1) { if (state.entry.length >= 1) {
state.currentSeek = 0;
state.currentSeekable = 0;
if (state.currentIndex < state.entry.length - 1) { if (state.currentIndex < state.entry.length - 1) {
state.currentIndex += 1; state.currentIndex += 1;
if (action.payload === 'usingHotkey') { if (action.payload === 'usingHotkey') {
@ -242,8 +213,6 @@ const playQueueSlice = createSlice({
(track) => track.id === action.payload.id (track) => track.id === action.payload.id
); );
state.currentSeek = 0;
state.currentSeekable = 0;
state.isFading = false; state.isFading = false;
state.player1.index = findIndex; state.player1.index = findIndex;
state.player1.volume = state.volume; state.player1.volume = state.volume;
@ -271,8 +240,6 @@ const playQueueSlice = createSlice({
decrementCurrentIndex: (state, action: PayloadAction<string>) => { decrementCurrentIndex: (state, action: PayloadAction<string>) => {
if (state.entry.length >= 1) { if (state.entry.length >= 1) {
state.currentSeek = 0;
state.currentSeekable = 0;
if (state.currentIndex > 0) { if (state.currentIndex > 0) {
state.currentIndex -= 1; state.currentIndex -= 1;
if (action.payload === 'usingHotkey') { if (action.payload === 'usingHotkey') {
@ -316,9 +283,6 @@ const playQueueSlice = createSlice({
state.entry = []; state.entry = [];
resetPlayerDefaults(state); resetPlayerDefaults(state);
if (state.status !== 'PLAYING') {
state.status = 'PLAYING';
}
state.currentSongId = action.payload[0].id; state.currentSongId = action.payload[0].id;
action.payload.map((entry: any) => state.entry.push(entry)); action.payload.map((entry: any) => state.entry.push(entry));
}, },
@ -329,7 +293,6 @@ const playQueueSlice = createSlice({
clearPlayQueue: (state) => { clearPlayQueue: (state) => {
state.entry = []; state.entry = [];
state.status = 'PAUSED';
resetPlayerDefaults(state); resetPlayerDefaults(state);
}, },
@ -423,16 +386,14 @@ export const {
moveUp, moveUp,
moveDown, moveDown,
setCurrentPlayer, setCurrentPlayer,
setStatus,
setPlayerVolume, setPlayerVolume,
setVolume, setVolume,
setCurrentSeek,
setIsFading, setIsFading,
setAutoIncremented, setAutoIncremented,
toggleRepeat, toggleRepeat,
toggleShuffle, toggleShuffle,
toggleDisplayQueue, toggleDisplayQueue,
resetPlayer, resetPlayQueue,
setStar, setStar,
} = playQueueSlice.actions; } = playQueueSlice.actions;
export default playQueueSlice.reducer; export default playQueueSlice.reducer;

67
src/redux/playerSlice.ts

@ -1,64 +1,39 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface Player { interface Player {
url?: string; status: string;
playStatus?: string; currentSeek: number;
playFromPosition?: number; currentSeekable: number;
volume?: number;
isLoading?: boolean;
} }
const initialState: Player = { const initialState: Player = {
url: '', status: 'PAUSED',
playStatus: 'STOPPED', currentSeek: 0,
playFromPosition: 0, currentSeekable: 0,
volume: 100,
isLoading: false,
}; };
const playerSlice = createSlice({ const playerSlice = createSlice({
name: 'player', name: 'player',
initialState, initialState,
reducers: { reducers: {
togglePlayback: (state, action: PayloadAction<Player>) => { resetPlayer: (state) => {
if (state.playStatus === 'PAUSED' || state.playStatus === 'STOPPED') { state.currentSeek = 0;
state.playStatus = 'PLAYING'; state.currentSeekable = 0;
} else {
state.playStatus = 'PAUSED';
}
state.url = action.payload.url!;
},
startPlayback: (state: any, action: PayloadAction<Player>) => {
state.url = action.payload.url;
state.playStatus = 'PLAYING';
state.playFromPosition = 0;
},
stopPlayback: (state) => {
state.playStatus = 'STOPPED';
}, },
pausePlayback: (state) => {
state.playStatus = 'PAUSED'; setStatus: (state, action: PayloadAction<string>) => {
}, state.status = action.payload;
resetPlayback: () => initialState,
setIsLoading: (state: any, action: PayloadAction<Player>) => {
state.isLoading = action.payload.isLoading;
},
setVolume: (state, action: PayloadAction<Player>) => {
state.volume = action.payload.volume!;
}, },
setPlayFromPosition: (state, action: PayloadAction<Player>) => {
state.playFromPosition = action.payload.playFromPosition!; setCurrentSeek: (
state,
action: PayloadAction<{ seek: number; seekable: number }>
) => {
state.currentSeek = action.payload.seek;
state.currentSeekable = action.payload.seekable;
}, },
}, },
}); });
export const { export const { setStatus, setCurrentSeek, resetPlayer } = playerSlice.actions;
togglePlayback,
startPlayback,
stopPlayback,
pausePlayback,
resetPlayback,
setIsLoading,
setVolume,
setPlayFromPosition,
} = playerSlice.actions;
export default playerSlice.reducer; export default playerSlice.reducer;

Loading…
Cancel
Save