From cdb10e4c81c7392938e0536c5d28eb7a10dbc548 Mon Sep 17 00:00:00 2001
From: Steven Engelbert <steve@micro-nova.com>
Date: Thu, 9 Jan 2025 13:43:08 -0500
Subject: [PATCH] Remove unused stuff, optimize others

---
 web/src/App.jsx                               |  2 +-
 web/src/components/Card/Card.jsx              |  5 +--
 .../components/VolumeSlider/VolumeSlider.jsx  |  8 ++--
 web/src/pages/Home/Home.scss                  |  2 +-
 web/src/pages/Player/Player.jsx               | 41 ++++---------------
 web/src/pages/Player/Player.scss              | 13 ------
 6 files changed, 16 insertions(+), 55 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 47bf68bd3..2d3a7cd30 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -223,9 +223,9 @@ Page.propTypes = {
 const App = ({ selectedPage }) => {
     return (
             <div className="app">
+            <DisconnectedIcon />
             <div className="background-gradient"></div>  {/* Used to make sure the background doesn't stretch or stop prematurely on scrollable pages */}
                 <div className="app-body">
-                    <DisconnectedIcon />
                     <Page selectedPage={selectedPage} />
                 </div>
                 <MenuBar pageNumber={selectedPage} />
diff --git a/web/src/components/Card/Card.jsx b/web/src/components/Card/Card.jsx
index 45c9879c2..e74823f24 100644
--- a/web/src/components/Card/Card.jsx
+++ b/web/src/components/Card/Card.jsx
@@ -14,10 +14,9 @@ const Card = ({
     selectable,
     onClick,
 
-    primary,
     secondary,
 }) => {
-    const cName = `card ${className} ${selectable && !selected ? "selectable" : ""} ${selected ? "selected" : ""} ${primary ? "primary" : ""} ${secondary ? "secondary" : ""}`
+    const cName = `card ${className} ${selectable && !selected ? "selectable" : ""} ${selected ? "selected" : ""} ${secondary ? "secondary" : "primary"}`
     const onClickFun = onClick === null ? () => {} : onClick;
     const topTransparency = selected ? 0.25 : 0.4;
     const bottomTransparency = selected ? 0.25 : 0.9;
@@ -53,7 +52,6 @@ Card.propTypes = {
     selectable: PropTypes.bool,
     onClick: PropTypes.func,
 
-    primary: PropTypes.bool,
     secondary: PropTypes.bool,
 };
 
@@ -64,7 +62,6 @@ Card.defaultProps = {
     selectable: false,
     onClick: null,
 
-    primary: true,
     secondary: false,
 };
 
diff --git a/web/src/components/VolumeSlider/VolumeSlider.jsx b/web/src/components/VolumeSlider/VolumeSlider.jsx
index 8aa0ff904..8fa967f32 100644
--- a/web/src/components/VolumeSlider/VolumeSlider.jsx
+++ b/web/src/components/VolumeSlider/VolumeSlider.jsx
@@ -54,7 +54,7 @@ const VolumeSlider = ({ vol, mute, setVol, setMute, disabled }) => {
         isScrolling.current = (Math.abs(diffY) / Math.abs(diffX)) > 1.65;  // Equivalent to approximately 60 deg
     };
 
-    const handleVolChange = (e, val, force = false) => {
+    const handleVolChange = (val, force = false) => {
         if (!isScrolling.current) {
             setVol(val, force);
         }
@@ -80,17 +80,19 @@ const VolumeSlider = ({ vol, mute, setVol, setMute, disabled }) => {
                         value={vol}
                         onTouchStart={handleTouchStart}
                         onTouchMove={handleTouchMove}
+                        // https://github.com/mui/material-ui/issues/32737#issuecomment-2060439608
+                        // ios does some weird emulation of mouse events from touch events, ignore those
                         onChange={(e, val) => {
                             if (isIOS() && e.type === "mousedown") {
                                 return;
                             }
-                            handleVolChange(e, val);
+                            handleVolChange(val);
                         }}
                         onChangeCommitted={(e, val) => {
                             if (isIOS() && e.type === "mouseup") {
                                 return;
                             }
-                            handleVolChange(e, val, true);
+                            handleVolChange(val, true);
                         }}
                     />
                 </div>
diff --git a/web/src/pages/Home/Home.scss b/web/src/pages/Home/Home.scss
index 6712626a5..b56d9a10c 100644
--- a/web/src/pages/Home/Home.scss
+++ b/web/src/pages/Home/Home.scss
@@ -3,7 +3,7 @@
 .home-outer {
   padding-top: 10px;
   @media (max-width: 435px) {
-    padding-bottom: 85px;
+    padding-bottom: 85px;  // Used to ensure the screen is still scrollable to just above the PresetAndAdd component on mobile
   }
   @media (min-width: 435px) {
     padding-bottom: 10px;
diff --git a/web/src/pages/Player/Player.jsx b/web/src/pages/Player/Player.jsx
index 364c70291..de2cc48b6 100644
--- a/web/src/pages/Player/Player.jsx
+++ b/web/src/pages/Player/Player.jsx
@@ -67,39 +67,14 @@ const Player = () => {
     function DropdownArrow() {
         // If on mobile, inital dropdown is at the bottom of the screen and expands upwards so the arrow should point up
         // If on desktop, initial dropdown is in the middle of the screen and expands downwards so the arrow should point down
-        if(window.matchMedia("(max-width: 435px)").matches){
-            if(expanded){
-                return(
-                    <KeyboardArrowDownIcon
-                        className="player-volume-expand-button"
-                        style={{ width: "3rem", height: "3rem" }}
-                    />
-                )
-            } else {
-                return(
-                    <KeyboardArrowUpIcon
-                        className="player-volume-expand-button"
-                        style={{ width: "3rem", height: "3rem" }}
-                    />
-                )
-            }
-        } else {
-            if(expanded){
-                return(
-                    <KeyboardArrowUpIcon
-                        className="player-volume-expand-button"
-                        style={{ width: "3rem", height: "3rem" }}
-                    />
-                )
-            } else {
-                return(
-                    <KeyboardArrowDownIcon
-                        className="player-volume-expand-button"
-                        style={{ width: "3rem", height: "3rem" }}
-                    />
-                )
-            }
-        }
+        const isMobile = window.matchMedia("(max-width: 435px)").matches;
+        const Icon = isMobile ? (expanded ? KeyboardArrowDownIcon : KeyboardArrowUpIcon) : (expanded ? KeyboardArrowUpIcon : KeyboardArrowDownIcon);
+        return(
+            <Icon
+                className="player-volume-expand-button"
+                style={{ width: "3rem", height: "3rem" }}
+            />
+        )
     }
 
     return (
diff --git a/web/src/pages/Player/Player.scss b/web/src/pages/Player/Player.scss
index 5f008cb85..f1df1080c 100644
--- a/web/src/pages/Player/Player.scss
+++ b/web/src/pages/Player/Player.scss
@@ -105,16 +105,3 @@
   @include general.header-font;
   padding: 0.5rem;
 }
-
-.control-gap {
-  // Dynamically size the gap so that the controls are always at the bottom of the screen when screen is scrolled to the top of the page
-  @media(min-height: 800px) {
-    height: 7.5vh
-  }
-  @media(min-height: 850px) {
-    height: 10vh
-  }
-  @media(min-height: 875px) {
-    height: 12.5vh
-  }
-}