From 5daba47ac780f7dff8b3c1e0bf6a11ffbee0992d Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:08:18 +0000
Subject: [PATCH] fix(ui): Fix conditional hook rendering

---
 src/client/components/PlayData.tsx            |  7 +++---
 src/client/components/chakraPlayer/Player.tsx | 23 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index 3908f094..9196706a 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -45,9 +45,6 @@ export const PlayData = (props?: PlayInfoProps) => {
         dates = 'all'
     } = props ?? {};
 
-    if (play === undefined) {
-        return <EmptyPlayData />
-    }
 
     const [codeMode, setCodeMode] = useState(false);
 
@@ -55,6 +52,10 @@ export const PlayData = (props?: PlayInfoProps) => {
 
     const comparable = showCompare && final !== undefined;
 
+    if (play === undefined) {
+        return <EmptyPlayData />
+    }
+
     if (showCodeToggle) {
         code = (
             <IconButton variant="outline" size="xs" onClick={() => setCodeMode(!codeMode)}>
diff --git a/src/client/components/chakraPlayer/Player.tsx b/src/client/components/chakraPlayer/Player.tsx
index f705bbc7..f959623d 100644
--- a/src/client/components/chakraPlayer/Player.tsx
+++ b/src/client/components/chakraPlayer/Player.tsx
@@ -69,11 +69,6 @@ export const ChakraPlayer = (props: PlayerProps) => {
     const [positionBuffer, setProgressBuffer] = useState<undefined | number>(undefined);
     const [intervalId, setIntervalId] = useState<undefined | number>(undefined);
     const [lastUpdated, setLastUpdated] = useState<undefined | number>(undefined);
-
-    if(expiration !== undefined && dayjs().isAfter(dayjs(expiration))) {
-        return null;
-    }
-
     const playArt = art.track ?? art.album ?? art.artist ?? undefined;
 
     const isNowPlaying = nowPlaying || nowPlayingMode;
@@ -142,6 +137,10 @@ export const ChakraPlayer = (props: PlayerProps) => {
         return () => clearInterval(interval);
     },[setProgressBuffer, data, setIntervalId, setLastUpdated, isNowPlaying]);
 
+    if(expiration !== undefined && dayjs().isAfter(dayjs(expiration))) {
+        return null;
+    }
+
     const indeterminate = isNowPlaying || (calculated === 'playing' && data.position === undefined);
     const positionProgress = indeterminate || data.position === undefined || duration === undefined ? undefined : Math.trunc((data.position/duration) * 100);
     const bufferProgress = indeterminate || data.position === undefined || duration === undefined || positionBuffer === undefined ? undefined : Math.trunc((positionBuffer/duration) * 100);
@@ -227,14 +226,14 @@ type UsePlayerQueryOpts = {
     initData?: SourcePlayerJson
 }
 
-export function usePlayerQuery(componentId: number, platformId: string, opts: UsePlayerQueryOpts = {}) {
+export const usePlayerQuery = (componentId: number, platformId: string, opts: UsePlayerQueryOpts = {}) => {
     const { initData } = opts;
     const queryClient = useQueryClient();
     useEffect(() => {
         if (initData !== undefined && queryClient.getQueryData(tanQueries.players.single(componentId, platformId).queryKey) === undefined) {
             queryClient.setQueryData(tanQueries.players.single(componentId, platformId).queryKey, initData);
         }
-    }, [initData]);
+    }, [initData, componentId, platformId]);
 
     const client = useSSEContext<MsSseEvent<MsSseEventPayload<SourcePlayerJson>>>();
     useSSEEvent(client, "playerUpdate", (payload) => {
@@ -264,7 +263,7 @@ export const PlayersContainer = (props: { data: ComponentCommonApiJson, live?: b
             players = {}
         } = data;
 
-        let playerContainers: React.JSX.Element[] = [];
+        const playerContainers: React.JSX.Element[] = [];
         // const isSource = isComponentSourceApiJson(data);
         // const now = dayjs();
         if (Object.keys(players).length > 0) {
@@ -292,14 +291,14 @@ export const PlayersContainer = (props: { data: ComponentCommonApiJson, live?: b
             </Stack>;
 }
 
-function usePlayersQuery(componentId: number, players?: ComponentCommonApiJson['players']) {
+const usePlayersQuery = (componentId: number, players?: ComponentCommonApiJson['players']) => {
     const queryClient = useQueryClient();
 
     useEffect(() => {
         if(queryClient.getQueryData(tanQueries.players.list(componentId).queryKey) === undefined) {
             queryClient.setQueryData(tanQueries.players.list(componentId).queryKey, players ?? {});
         }
-    }, [players]);
+    }, [players, componentId]);
 
     const client = useSSEContext<MsSseEvent>();
     useSSEAnyEvent(client, (payload) => {
@@ -309,7 +308,7 @@ function usePlayersQuery(componentId: number, players?: ComponentCommonApiJson['
                     const playerPayload = payload.data as MsSseEventPayload<SourcePlayerJson>;
                     queryClient.setQueryData(tanQueries.players.list(componentId).queryKey, (old: Record<string, SourcePlayerJson>) => {
                         if(old[playerPayload.data.platformId] === undefined || 'expiration' in playerPayload.data) {
-                            let newData: Record<string, SourcePlayerJson> = {...old};
+                            const newData: Record<string, SourcePlayerJson> = {...old};
                             newData[playerPayload.data.platformId] = playerPayload.data;
                             return newData;
                         }
@@ -320,7 +319,7 @@ function usePlayersQuery(componentId: number, players?: ComponentCommonApiJson['
                     const playerPayload = payload.data as MsSseEventPayload<{platformId: string}>;
                     queryClient.setQueryData(tanQueries.players.list(componentId).queryKey, (old: Record<string, SourcePlayerJson>) => {
                         if(old[playerPayload.data.platformId] !== undefined) {
-                            let newData: Record<string, SourcePlayerJson> = {...old};
+                            const newData: Record<string, SourcePlayerJson> = {...old};
                             delete newData[playerPayload.data.platformId];
                             return newData;
                         }