Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

This commit is contained in:
Matt Bruce 2025-07-18 16:53:50 -05:00
parent bdb57f46ed
commit a243e1e034
3 changed files with 19 additions and 4 deletions

View File

@ -3,7 +3,7 @@ import { IonCard, IonCardContent, IonChip, IonIcon } from '@ionic/react';
import { playOutline, pauseOutline, stopOutline, play, pause, stop } from 'ionicons/icons'; import { playOutline, pauseOutline, stopOutline, play, pause, stop } from 'ionicons/icons';
import ActionButton from './ActionButton'; import ActionButton from './ActionButton';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectPlayerState, selectIsAdmin, selectQueue } from '../../redux'; import { selectPlayerState, selectIsAdmin, selectQueueLength } from '../../redux';
import { playerService } from '../../firebase/services'; import { playerService } from '../../firebase/services';
import { selectControllerName } from '../../redux'; import { selectControllerName } from '../../redux';
import { debugLog } from '../../utils/logger'; import { debugLog } from '../../utils/logger';
@ -19,13 +19,13 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
const playerState = useAppSelector(selectPlayerState); const playerState = useAppSelector(selectPlayerState);
const isAdmin = useAppSelector(selectIsAdmin); const isAdmin = useAppSelector(selectIsAdmin);
const controllerName = useAppSelector(selectControllerName); const controllerName = useAppSelector(selectControllerName);
const queue = useAppSelector(selectQueue); const queueLength = useAppSelector(selectQueueLength);
const { showSuccess, showError } = useToast(); const { showSuccess, showError } = useToast();
// Debug logging // Debug logging
debugLog('PlayerControls - playerState:', playerState); debugLog('PlayerControls - playerState:', playerState);
debugLog('PlayerControls - isAdmin:', isAdmin); debugLog('PlayerControls - isAdmin:', isAdmin);
debugLog('PlayerControls - queue length:', Object.keys(queue).length); debugLog('PlayerControls - queue length:', queueLength);
const handlePlay = async () => { const handlePlay = async () => {
if (!controllerName) return; if (!controllerName) return;
@ -69,7 +69,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
} }
const currentState = playerState?.state || PlayerState.stopped; const currentState = playerState?.state || PlayerState.stopped;
const hasSongsInQueue = Object.keys(queue).length > 0; const hasSongsInQueue = queueLength > 0;
debugLog('PlayerControls - currentState:', currentState); debugLog('PlayerControls - currentState:', currentState);
debugLog('PlayerControls - hasSongsInQueue:', hasSongsInQueue); debugLog('PlayerControls - hasSongsInQueue:', hasSongsInQueue);

View File

@ -157,3 +157,9 @@ export const selectQueueWithUserInfo = createSelector(
isCurrentUser: item.singer.name === currentSinger, isCurrentUser: item.singer.name === currentSinger,
})) }))
); );
// Memoized selector for queue length to prevent unnecessary re-renders
export const selectQueueLength = createSelector(
[selectQueue],
(queue) => Object.keys(queue).length
);

View File

@ -8,6 +8,15 @@ export const store = configureStore({
controller: controllerReducer, controller: controllerReducer,
auth: authReducer, auth: authReducer,
}, },
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
// Completely disable serializable state check in development
serializableCheck: false,
// Disable immutable check for large data objects
immutableCheck: {
ignoredPaths: ['controller.songs', 'controller.queue', 'controller.history', 'controller.favorites', 'controller.newSongs', 'controller.topPlayed', 'controller.songList', 'controller.singers'],
},
}),
}); });
export type RootState = AppRootState; export type RootState = AppRootState;