From 6c6dbb81400f51fa3509a6fdd7c11f7b6cb52cc1 Mon Sep 17 00:00:00 2001
From: Klayton Smith II <klayton@micro-nova.com>
Date: Fri, 21 Apr 2023 16:16:19 -0400
Subject: [PATCH] made clicking the player card only once just select the card

---
 web2/src/App.jsx                              |  2 +-
 web2/src/components/PlayerCard/PlayerCard.jsx | 14 ++++++++---
 web2/src/pages/Home/Home.jsx                  | 23 ++-----------------
 3 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/web2/src/App.jsx b/web2/src/App.jsx
index b960e506c..a0aecae7f 100644
--- a/web2/src/App.jsx
+++ b/web2/src/App.jsx
@@ -213,7 +213,7 @@ function App({ selectedPage }) {
   const Page = () => {
       switch(selectedPage) {
       default:
-        return <Home selectedSource={selectedSource} setSelectedSource={(i)=>{setSelectedSource(i); setSelectedPage(1)}} />
+        return <Home selectedSource={selectedSource} setSelectedPage={setSelectedPage} setSelectedSource={setSelectedSource} />
       case 1:
         return <Player selectedSource={selectedSource} />
       case 2:
diff --git a/web2/src/components/PlayerCard/PlayerCard.jsx b/web2/src/components/PlayerCard/PlayerCard.jsx
index 19fc64635..38ba28c3b 100644
--- a/web2/src/components/PlayerCard/PlayerCard.jsx
+++ b/web2/src/components/PlayerCard/PlayerCard.jsx
@@ -9,11 +9,19 @@ import ZonesBadge from "../ZonesBadge/ZonesBadge";
 import StreamsModal from "../StreamsModal/StreamsModal";
 import ZonesModal from "../ZonesModal/ZonesModal";
 
-const PlayerCard = ({ sourceId, selectedSource, setSelectedSource }) => {
+const PlayerCard = ({ sourceId, selectedSource, setSelectedPage, setSelectedSource }) => {
   const [streamModalOpen, setStreamModalOpen] = useState(false);
   const [zoneModalOpen, setZoneModalOpen] = useState(false);
   const selected = selectedSource === sourceId
 
+  const select = () => {
+    if (selected) {
+      setSelectedPage(1)
+    }
+
+    setSelectedSource(sourceId)
+  }
+
   return (
     <Card selected={selected}>
       <div className="outer">
@@ -23,12 +31,12 @@ const PlayerCard = ({ sourceId, selectedSource, setSelectedSource }) => {
         <div className="content stream-name-container" onClick={()=>{setStreamModalOpen(true)}}>
           <StreamBadge sourceId={sourceId} />
         </div>
-        <div className="content album-art" onClick={() => setSelectedSource(sourceId)}>
+        <div className="content album-art" onClick={select}>
           <div>
             <PlayerImage sourceId={sourceId} />
           </div>
         </div>
-        <div className="content song-info" onClick={() => setSelectedSource(sourceId)}>
+        <div className="content song-info" onClick={select}>
           <SongInfo sourceId={sourceId} />
         </div>
         <div className="content vol">
diff --git a/web2/src/pages/Home/Home.jsx b/web2/src/pages/Home/Home.jsx
index c747e4bed..919665195 100644
--- a/web2/src/pages/Home/Home.jsx
+++ b/web2/src/pages/Home/Home.jsx
@@ -15,7 +15,7 @@ export const getSourceZones = (source_id, zones) => {
   return matches;
 };
 
-const Home = ({ selectedSource, setSelectedSource }) => {
+const Home = ({ selectedSource, setSelectedPage, setSelectedSource }) => {
   const sources = useStatusStore((s)=>s.status.sources)
   const clearSourceZones = useStatusStore((s)=>s.clearSourceZones)
   const [zonesModalOpen, setZonesModalOpen] = useState(false)
@@ -31,6 +31,7 @@ const Home = ({ selectedSource, setSelectedSource }) => {
           sourceId={source.id}
           selectedSource={selectedSource}
           setSelectedSource={setSelectedSource}
+          setSelectedPage={setSelectedPage}
         />
       )
       } else {
@@ -49,26 +50,6 @@ const Home = ({ selectedSource, setSelectedSource }) => {
   return (
     <div className="home-outer">
       <div className="home-view">
-        {/* <PlayerCard
-          sourceId={0}
-          selectedSource={selectedSource}
-          setSelectedSource={setSelectedSource}
-        />
-        <PlayerCard
-          sourceId={1}
-          selectedSource={selectedSource}
-          setSelectedSource={setSelectedSource}
-        />
-        <PlayerCard
-          sourceId={2}
-          selectedSource={selectedSource}
-          setSelectedSource={setSelectedSource}
-        />
-        <PlayerCard
-          sourceId={3}
-          selectedSource={selectedSource}
-          setSelectedSource={setSelectedSource}
-        /> */}
 
         {
           playerCards