From a243e1e034d4f2b5dc177758c926a1ae277e9153 Mon Sep 17 00:00:00 2001
From: Matt Bruce <mbrucedogs@gmail.com>
Date: Fri, 18 Jul 2025 16:53:50 -0500
Subject: [PATCH] Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

---
 src/components/common/PlayerControls.tsx | 8 ++++----
 src/redux/selectors.ts                   | 6 ++++++
 src/redux/store.ts                       | 9 +++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/common/PlayerControls.tsx b/src/components/common/PlayerControls.tsx
index d4611e2..dc49d38 100644
--- a/src/components/common/PlayerControls.tsx
+++ b/src/components/common/PlayerControls.tsx
@@ -3,7 +3,7 @@ import { IonCard, IonCardContent, IonChip, IonIcon } from '@ionic/react';
 import { playOutline, pauseOutline, stopOutline, play, pause, stop } from 'ionicons/icons';
 import ActionButton from './ActionButton';
 import { useAppSelector } from '../../redux';
-import { selectPlayerState, selectIsAdmin, selectQueue } from '../../redux';
+import { selectPlayerState, selectIsAdmin, selectQueueLength } from '../../redux';
 import { playerService } from '../../firebase/services';
 import { selectControllerName } from '../../redux';
 import { debugLog } from '../../utils/logger';
@@ -19,13 +19,13 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
   const playerState = useAppSelector(selectPlayerState);
   const isAdmin = useAppSelector(selectIsAdmin);
   const controllerName = useAppSelector(selectControllerName);
-  const queue = useAppSelector(selectQueue);
+  const queueLength = useAppSelector(selectQueueLength);
   const { showSuccess, showError } = useToast();
 
   // Debug logging
   debugLog('PlayerControls - playerState:', playerState);
   debugLog('PlayerControls - isAdmin:', isAdmin);
-  debugLog('PlayerControls - queue length:', Object.keys(queue).length);
+  debugLog('PlayerControls - queue length:', queueLength);
 
   const handlePlay = async () => {
     if (!controllerName) return;
@@ -69,7 +69,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
   }
 
   const currentState = playerState?.state || PlayerState.stopped;
-  const hasSongsInQueue = Object.keys(queue).length > 0;
+  const hasSongsInQueue = queueLength > 0;
 
   debugLog('PlayerControls - currentState:', currentState);
   debugLog('PlayerControls - hasSongsInQueue:', hasSongsInQueue);
diff --git a/src/redux/selectors.ts b/src/redux/selectors.ts
index 63ac12d..b00c61a 100644
--- a/src/redux/selectors.ts
+++ b/src/redux/selectors.ts
@@ -156,4 +156,10 @@ export const selectQueueWithUserInfo = createSelector(
       ...item,
       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
 ); 
\ No newline at end of file
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 644d615..376b625 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -8,6 +8,15 @@ export const store = configureStore({
     controller: controllerReducer,
     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;