From d25d26b8ae2cb4da959659ce3cec4db1c3ba3383 Mon Sep 17 00:00:00 2001
From: NlightN22 <oncharterliz@gmail.com>
Date: Fri, 3 May 2024 14:56:21 +0700
Subject: [PATCH] fix accordion play status when selected host and changed
 camera

---
 src/shared/components/accordion/DayAccordion.tsx     | 5 +++--
 src/shared/components/accordion/DayAccordionItem.tsx | 2 +-
 src/shared/components/accordion/DayPanel.tsx         | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/accordion/DayAccordion.tsx b/src/shared/components/accordion/DayAccordion.tsx
index bf26cea..a55d9d8 100644
--- a/src/shared/components/accordion/DayAccordion.tsx
+++ b/src/shared/components/accordion/DayAccordion.tsx
@@ -33,12 +33,13 @@ const DayAccordion = ({
     } else if (openedValue === value && recStore.playedItem === value) {
       recStore.playedItem = undefined;
     }
-  }, [openedValue, recStore]);
+  }, [openedValue, recStore.playedItem]);
 
   const dayItems = useMemo(() => {
     if (recordSummary && recordSummary.hours.length > 0 && hostName && host) {
       return recordSummary.hours.map(hour => {
-        const played = recordSummary.day + hour.hour === recStore.playedItem;
+        const item = hostName + camera.name +  recordSummary.day + hour.hour
+        const played = item === recStore.playedItem;
         return (
           <DayAccordionItemMemo
             camera={camera}
diff --git a/src/shared/components/accordion/DayAccordionItem.tsx b/src/shared/components/accordion/DayAccordionItem.tsx
index c9751e5..2533265 100644
--- a/src/shared/components/accordion/DayAccordionItem.tsx
+++ b/src/shared/components/accordion/DayAccordionItem.tsx
@@ -41,7 +41,7 @@ const DayAccordionItem = ({
 
     const hour = recordHour.hour
     const day = recordSummary.day
-    const item = day + hour
+    const item = hostName + cameraName +  day + hour
     const recordURL = proxyApi.recordingURL(
         hostName,
         cameraName,
diff --git a/src/shared/components/accordion/DayPanel.tsx b/src/shared/components/accordion/DayPanel.tsx
index a3f1d8d..52e1909 100644
--- a/src/shared/components/accordion/DayPanel.tsx
+++ b/src/shared/components/accordion/DayPanel.tsx
@@ -37,7 +37,7 @@ const DayPanel = ({
         <Accordion.Panel key={hour + 'Panel'}>
             {playedURL && playedURL === videoURL ? <VideoPlayer videoUrl={playedURL} /> : <></>}
             {cameraName && hostName ?
-                <Flex w='100%' justify='center' mb='0.5rem'>
+                <Flex w='100%' justify='center' mb='0.5rem' mt='1rem'>
                     <VideoDownloader
                         cameraName={cameraName}
                         hostName={hostName}