Merge pull request #11 from klay2000/player-card-select

made clicking the player card only once just select the card
micro-nova · Apr 21, 2023 · 42a0d22 · 42a0d22
2 parents fafb47f + 6c6dbb8
commit 42a0d22
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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