Solution to issue #497

web/src/components/VolumeZones/VolumeZones.jsx

@@ -1,34 +1,14 @@
 import React from "react";
 import "./VolumesZones.scss";
-import { useStatusStore } from "@/App.jsx";
-import { getSourceZones } from "@/pages/Home/Home";
 import ZoneVolumeSlider from "../ZoneVolumeSlider/ZoneVolumeSlider";
 import GroupVolumeSlider from "../GroupVolumeSlider/GroupVolumeSlider";
 import Card from "../Card/Card";
 
-import { getFittestRep } from "@/utils/GroupZoneFiltering";
-
 import PropTypes from "prop-types";
 
-const VolumeZones = ({ sourceId }) => {
-    const zones = getSourceZones(
-        sourceId,
-        useStatusStore((s) => s.status.zones)
-    );
-    const groups = getSourceZones(
-        sourceId,
-        useStatusStore((s) => s.status.groups)
-    );
-
-    // compute the best representation of the zones and groups
-    const { zones: zonesLeft, groups: usedGroups } = getFittestRep(zones, groups);
-
-    const groupsLeft = groups.filter(
-        (g) => !usedGroups.map((ug) => ug.id).includes(g.id)
-    );
-
+const VolumeZones = ({ sourceId, open, zones, groups, groupsLeft }) => {
     const groupVolumeSliders = [];
-    for (const group of usedGroups) {
+    for (const group of groups) {
         groupVolumeSliders.push(
             <Card className="group-vol-card" key={group.id}>
                 <GroupVolumeSlider
@@ -41,23 +21,29 @@ const VolumeZones = ({ sourceId }) => {
     }
 
     const zoneVolumeSliders = [];
-    zonesLeft.forEach((zone) => {
+    zones.forEach((zone) => {
         zoneVolumeSliders.push(
             <Card className="zone-vol-card" key={zone.id}>
                 <ZoneVolumeSlider zoneId={zone.id} />
             </Card>
         );
     });
 
-    return (
-        <div className="volume-sliders-container">
-            {groupVolumeSliders}
-            {zoneVolumeSliders}
-        </div>
-    );
+    if(open){
+      return (
+          <div className="volume-sliders-container">
+              {groupVolumeSliders}
+              {zoneVolumeSliders}
+          </div>
+      );
+    }
 };
 VolumeZones.propTypes = {
     sourceId: PropTypes.any.isRequired,
+    open: PropTypes.bool.isRequired,
+    zones: PropTypes.array.isRequired,
+    groups: PropTypes.array.isRequired,
+    groupsLeft: PropTypes.array.isRequired,
 };
 
 export default VolumeZones;

web/src/pages/Player/Player.jsx

@@ -12,6 +12,9 @@ import { useState } from "react";
 import VolumeZones from "@/components/VolumeZones/VolumeZones";
 import Card from "@/components/Card/Card";
 import { getSourceInputType } from "@/utils/getSourceInputType";
+import { getSourceZones } from "@/pages/Home/Home";
+
+import { getFittestRep } from "@/utils/GroupZoneFiltering";
 
 const Player = () => {
     const selectedSourceId = usePersistentStore((s) => s.selectedSource);
@@ -31,7 +34,25 @@ const Player = () => {
                 <div className="player-stopped-message">No Player Selected!</div>
             </div>
         );
-    }
+    };
+
+    const zones = getSourceZones(
+        selectedSourceId,
+        useStatusStore((s) => s.status.zones)
+    );
+    const groups = getSourceZones(
+        selectedSourceId,
+        useStatusStore((s) => s.status.groups)
+    );
+
+    // compute the best representation of the zones and groups
+    const { zones: zonesLeft, groups: usedGroups } = getFittestRep(zones, groups);
+
+    const groupsLeft = groups.filter(
+        (g) => !usedGroups.map((ug) => ug.id).includes(g.id)
+    );
+    // This is a bootleg XOR statement, only works if there is exactly one zone or exactly one group, no more than that and not both
+    const alone = ((usedGroups.length == 1) || (zonesLeft.length == 1)) && !((usedGroups.length > 0) && (zonesLeft.length > 0));
 
     return (
         <div className="player-outer">
@@ -47,7 +68,7 @@ const Player = () => {
                 <MediaControl selectedSource={selectedSourceId} />
             </div>
 
-            <Card className="player-volume-slider">
+            {!alone && <Card className="player-volume-slider">
                 <CardVolumeSlider sourceId={selectedSourceId} />
                 <IconButton onClick={() => setExpanded(!expanded)}>
                     {expanded ? (
@@ -62,8 +83,8 @@ const Player = () => {
                         />
                     )}
                 </IconButton>
-            </Card>
-            {expanded && <VolumeZones sourceId={selectedSourceId} />}
+            </Card>}
+            <VolumeZones open={(expanded || alone)} sourceId={selectedSourceId} zones={zonesLeft} groups={usedGroups} groupsLeft={groupsLeft} />
         </div>
     );
 };

web/vite.config.js

@@ -2,7 +2,6 @@ import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import path from "path"
 import process from 'node:process';
-
 // set this to dev server url; this permits one to develop on localhost while
 // proxying API requests to an AmpliPi running elsewhere.
 const amplipiurl = process.env.AMPLIPI_URL || "http://127.0.0.1";