Merge branch 'main' into readmeUPDATE

Author: LegendaryMichael

docs/imaging_etcher.md

@@ -15,6 +15,9 @@ Download and install the latest version of RPIBoot from [here](https://github.co
 Download and install (if necessary) the latest version of Etcher from [etcher.io](https://etcher.io/), on windows use the portable version.
 
 ## 4. Connect your AmpliPi to your computer
+
+  **VERY IMPORTANT:** Please connect the USB cable to your computer FIRST before connecting the other side of the cable to the service port of the AmpliPro. Certain older units with TFT displays (not EINK) were susceptible to ESD damage on the USB service port. Connecting the cable to the computer first will mitigate this risk.
+  
   Unplug your AmpliPi from power and then connect your AmpliPi to your computer via the service port using the micro USB cable. Once connected, plug your AmpliPi back into power.
 
   ![connected to service port](imgs/flashing/plugged_sp.jpg)

web/src/components/List/ListItem/ListItem.jsx

@@ -9,11 +9,12 @@ const ListItem = ({
     children,
     onClick,
     nameFontSize,
-    footer
+    footer,
+    columns
 }) => {
     return (
         <div
-            className="list-item-container"
+            className={columns ? "list-item-container columns" : "list-item-container"}
             onClick={onClick != undefined ? onClick : () => {}}
             style={{ cursor: onClick != undefined ? "pointer" : "default" }}
         >
@@ -33,10 +34,12 @@ ListItem.propTypes = {
     onClick: PropTypes.func.isRequired,
     nameFontSize: PropTypes.string.isRequired,
     footer: PropTypes.any,
+    columns: PropTypes.bool,
 };
 ListItem.defaultProps = {
     onClick: undefined,
     nameFontSize: "2rem",
+    columns: true,
 };
 
 export default ListItem;

web/src/components/List/ListItem/ListItem.scss

@@ -1,19 +1,21 @@
 @use "src/general.scss";
 
 .list-item-container {
-  display: grid;
-  grid-template-columns: 0fr 2fr 1fr;
-  grid-template-rows: 1fr;
   align-items: center;
   padding: 0.5rem;
   border-bottom: 1px solid general.$secondary;
   @include general.button-hover;
 }
-
 .list-item-container:last-child {
   border-bottom: none;
 }
 
+.columns{
+  display: grid;
+  grid-template-columns: 0fr 2fr 1fr;
+  grid-template-rows: 1fr;
+}
+
 .list-item-child {
   display: flex;
   flex-direction: row;

web/src/components/PresetsModal/PresetsModal.jsx

@@ -45,7 +45,7 @@ const PresetItem = ({ index, onClick, presetState }) => {
     // show spinner if presetState is 'loading'
     return (
         <>
-            <ListItem onClick={() => onClick(index)}>
+            <ListItem onClick={() => onClick(index)} columns={false}>
                 <div className="preset-name-and-last-used">
                     <div>{name}</div>
                     <div className="preset-item-last-used">{last_used}</div>

web/src/components/PresetsModal/PresetsModal.scss

@@ -8,6 +8,9 @@
 
 .presets-modal-card {
   max-height: 75vh;
+  width: 90vw;
+  max-width: 30rem;
+  text-overflow: wrap;
   overflow: hidden;
   display: flex;
   flex-direction: column;

web/src/components/StreamsModal/StreamsModal.scss

@@ -6,3 +6,7 @@
   border-radius: 20%;
   margin-right: 0.6rem;
 }
+
+.streams-modal-item-text {
+  font-size: 1.5rem
+}

web/src/main.jsx

@@ -85,14 +85,17 @@ const darkTheme = createTheme({
             light: '#e3f2fd',
             dark: '#42a5f5',
             contrastText: '#fff',
-          },
+        },
         mode: "dark",
         background: {
             paper: "#2a2a2a", // TODO: no good way of getting this from scss...
         },
     },
     typography: {
-        fontFamily: "open sans"
+        fontFamily: "open sans",
+        body1: {  // Override the default generated class for all mui components, allowing them to be styled on a per-instance css level instead of hardcoding 16px font for some things
+            fontSize: 'inherit',
+        },
     },
     components: {
         MuiCssBaseline: {
@@ -102,10 +105,11 @@ const darkTheme = createTheme({
                     color: '#ffffff';
                 }
             `,
-        }
+        },
     }
 });
 
+
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
         <ThemeProvider theme={darkTheme}>

web/src/pages/Settings/Presets/CreatePresetModal/CreatePresetModal.jsx

@@ -14,6 +14,8 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 
+let is_streamer = false;
+
 const setCheckedRecur = (dict, checked) => {
     dict.checked = checked;
     dict.content.forEach((it) => setCheckedRecur(it, checked));
@@ -108,7 +110,7 @@ const buildTreeDict = (status, showInactive = false) => {
 
     const statusClone = JSON.parse(JSON.stringify(status));
     const sourceDicts = statusClone.sources
-        .filter((source) => showInactive || getSourceInputType(source) !== "none")
+        .filter((source) => showInactive || getSourceInputType(source) !== "none" && getSourceInputType(source) !== "unknown")
         .map(dictWithOptions);
     const top = baseDict(false, "All", sourceDicts);
     return top;
@@ -125,14 +127,15 @@ const StructuredDictAsTree = ({ dict, depth = 0, path = [] }) => {
     let entries = [];
     let i = 0;
     for (const d of dict.content) {
-        entries.push(
-            <StructuredDictAsTree
-                key={i}
-                dict={d}
-                depth={depth + 1}
-                path={[...path, i]}
-            />
-        );
+        let e = <StructuredDictAsTree
+            key={i}
+            dict={d}
+            depth={depth + 1}
+            path={[...path, i]}
+        />
+        if(!is_streamer || (is_streamer && depth === 0)) {  // depth=0 only applies to the 4 streamer outputs. This is necessary so that the tree can still save the state of the Stream checkbox without displaying it.
+            entries.push(e)
+        }
         i += 1;
     }
 
@@ -200,6 +203,7 @@ const CreatePresetModal = ({ onClose }) => {
         const newTree = buildTreeDict(status);
         setTree(newTree);
     }, []);
+    is_streamer = useStatusStore((s) => s.status.info.is_streamer);
 
     const savePreset = () => {
     // create preset