Move song controls, preset and add buttons to bottom of the screen on…

… mobile Add many CSS breakpoints to ensure elements continue to work on the smallest screens Reformat player volume section Create "thumb space" for scrolling volume dropdown on mobile
micro-nova · Jan 3, 2025 · 9295e0f · 9295e0f
1 parent 80121fe
commit 9295e0f
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 ## 0.4.6
 * System
   * Automatically persist logs during (and for a short time after) updates
+* Webapp
+  * Move home screen, player page controls to bottom of screen on mobile
+  * Update CSS breakpoints to scale the player page better on the smallest of screens
+  * Reformat Player page volume controls to be more modern
 
 ## 0.4.5
 * Web App

diff --git a/web/src/components/CustomMarquee/CustomMarquee.jsx b/web/src/components/CustomMarquee/CustomMarquee.jsx
@@ -42,14 +42,13 @@ export default function CustomMarquee(props) {
         }
     }
 
-    let resizeTimout;
+    let resizeTimeout;  // Your IDE will say this is unused, it's actually used to make sure the timeout below is limited to one instance at a time by taking up a specific variable
     function handleResize(){
         if(!resizeCooldown.current){
             resizeCooldown.current = true;
 
             assessMarquee()
-
-            resizeTimout = setTimeout(()=>{resizeCooldown.current = false;}, 1000) // set a cooldown for resize checks to avoid excessive renders
+            resizeTimeout = setTimeout(()=>{resizeCooldown.current = false;}, 1000)
         }
     }
     window.addEventListener("resize", handleResize()); // Doesn't call assessMarquee directly to avoid calling thousands of times per second when resizing window

diff --git a/web/src/components/GroupVolumeSlider/GroupVolumeSlider.jsx b/web/src/components/GroupVolumeSlider/GroupVolumeSlider.jsx
@@ -89,12 +89,12 @@ const GroupVolumeSlider = ({ groupId, sourceId, groupsLeft }) => {
                     onClick={() => setSlidersOpen(!slidersOpen)}
                 >
                     {slidersOpen ? (
-                        <KeyboardArrowUpIcon
+                        <KeyboardArrowDownIcon
                             className="group-slider-expand-button"
                             style={{ width: "3rem", height: "3rem" }}
                         />
                     ) : (
-                        <KeyboardArrowDownIcon
+                        <KeyboardArrowUpIcon
                             className="group-slider-expand-button"
                             style={{ width: "3rem", height: "3rem" }}
                         />

diff --git a/web/src/components/GroupVolumeSlider/GroupVolumeSlider.scss b/web/src/components/GroupVolumeSlider/GroupVolumeSlider.scss
@@ -6,6 +6,10 @@
 }
 
 .group-volume-children-container {
+  // Equates to the height of a single volume bar (with title) * 3 on desktop
+  // Previously also had a mobile version (204px) but mobile doesn't always show a scrollbar when needed (unlike desktop) so it was hard to tell when there was > 3
+  max-height: 168px;
+  overflow: auto;
   padding-left: 1rem;
 }
 
@@ -23,5 +27,4 @@
 
 .group-volume-slider {
   width: 100%;
-  margin: 0 1rem;
 }
diff --git a/web/src/components/MediaControl/MediaControl.scss b/web/src/components/MediaControl/MediaControl.scss
@@ -8,7 +8,6 @@
   justify-content: center;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  width: 90vw;
 }
 
 .media-inner {
@@ -19,6 +18,7 @@
 }
 
 .media-control {
+  font-size: 3.5rem;
   color: general.$controls-color;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -30,11 +30,11 @@
     padding-right: 1.25rem;
   }
 
-  @media (min-width: 365px) and (max-width: 425px) {
+  @media (min-width: 365px) and (max-width: 435px) {
     font-size: 2.5rem;
   }
 
-  @media (min-width: 425px) {
+  @media (min-width: 435px) {
     font-size: 3.5rem;
   }
 }

diff --git a/web/src/components/SongInfo/SongInfo.scss b/web/src/components/SongInfo/SongInfo.scss
@@ -10,6 +10,11 @@
 
   white-space: nowrap;
   overflow: hidden;
+
+  @media (max-width: 435px){
+    max-height: 50vh;
+    max-width: 50vh;
+  }
 }
 
 .artist-name {

diff --git a/web/src/components/StreamBar/StreamBar.scss b/web/src/components/StreamBar/StreamBar.scss
@@ -21,15 +21,26 @@
   color: general.$text-color;
   width: 100%;
   max-width: 80%; // Leave space for icon
-  font-size: 2.5rem;
   font-weight: medium;
   white-space: nowrap;
   overflow: hidden;
   @include general.header-font;
   padding: 0.5rem;
+  @media (max-height: 500px){
+    font-size: 1.5rem;
+  }
+  @media (min-height: 500px){
+    font-size: 2.5rem;
+  }
 }
 
 .stream-bar-icon {
-  width: 4rem;
-  height: 4rem;
+  @media (max-height: 500px){
+    width: 2rem;
+    height: 2rem;
+  }
+  @media (min-height: 500px){
+    width: 4rem;
+    height: 4rem;
+  }
 }
diff --git a/web/src/components/ZoneVolumeSlider/ZoneVolumeSlider.scss b/web/src/components/ZoneVolumeSlider/ZoneVolumeSlider.scss
@@ -3,4 +3,5 @@
 .zone-volume-container {
   @include general.header-font;
   font-size: 1rem;
+  max-width: calc(100% - 47px)
 }
diff --git a/web/src/pages/Home/Home.jsx b/web/src/pages/Home/Home.jsx
@@ -55,11 +55,13 @@ const PresetAndAdd = ({
         );
     } else {
         return (
-            <div
-                className="home-presets-button"
-                onClick={() => setPresetsModalOpen(true)}
-            >
-        Presets
+            <div className="home-presets-container">
+                <div
+                    className="home-presets-button"
+                    onClick={() => setPresetsModalOpen(true)}
+                >
+            Presets
+                </div>
             </div>
         );
     }

diff --git a/web/src/pages/Home/Home.scss b/web/src/pages/Home/Home.scss
@@ -2,7 +2,12 @@
 
 .home-outer {
   padding-top: 10px;
-  padding-bottom: 10px;
+  @media (max-width: 435px) {
+    padding-bottom: 85px;
+  }
+  @media (min-width: 435px) {
+    padding-bottom: 10px;
+  }
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -69,6 +74,12 @@
 }
 
 .home-presets-container {
+  @media (max-width: 435px) {
+    position: fixed;
+    bottom: 65px;
+  }
+
+  z-index: 1; // Needed to ensure that scrolling marquees do not appear on top of the presets button
   display: flex;
 
   flex-direction: row;

diff --git a/web/src/pages/Player/Player.jsx b/web/src/pages/Player/Player.jsx
@@ -87,6 +87,7 @@ const Player = () => {
                 </Grid>
                 <Grid item xs={2} sm={4} md={4} style={{maxWidth: "22rem"}}>
                     <Box
+                        className="album-art-container"
                         sx={{
                           display: 'flex',
                           justifyContent: 'center',
@@ -97,37 +98,36 @@ const Player = () => {
                     </Box>
                     <SongInfo sourceId={selectedSourceId} />
                 </Grid>
-                <Grid item xs={2} sm={4} md={4}>
-                    <MediaControl selectedSource={selectedSourceId} />
-                </Grid>
             </Grid>
-            {/* There are many sub-divs classed player-inner here because formatting was strange otherwise */}
-            <div className="player-inner">
-            </div>
-            <div className="player-inner">
-            </div>
-            <div className="player-inner">
-            </div>
 
+            <div className="media-controls">
+                <MediaControl selectedSource={selectedSourceId} />
+            </div>
             {!alone && !is_streamer && zones.length > 0 && (
-                <Card className="player-volume-slider">
-                    <CardVolumeSlider sourceId={selectedSourceId} />
-                    <IconButton onClick={() => setExpanded(!expanded)}>
-                        {expanded ? (
-                            <KeyboardArrowUpIcon
-                                className="player-volume-expand-button"
-                                style={{ width: "3rem", height: "3rem" }}
-                            />
-                        ) : (
-                            <KeyboardArrowDownIcon
-                                className="player-volume-expand-button"
-                                style={{ width: "3rem", height: "3rem" }}
-                            />
-                        )}
-                    </IconButton>
+                <Card className="player-volume-container">
+                    <div className="player-volume-header">
+                        <CardVolumeSlider sourceId={selectedSourceId} />
+                        <IconButton onClick={() => setExpanded(!expanded)}>
+                            {expanded ? (
+                                <KeyboardArrowDownIcon
+                                    className="player-volume-expand-button"
+                                    style={{ width: "3rem", height: "3rem" }}
+                                />
+                            ) : (
+                                <KeyboardArrowUpIcon
+                                    className="player-volume-expand-button"
+                                    style={{ width: "3rem", height: "3rem" }}
+                                />
+                            )}
+                        </IconButton>
+                    </div>
+
+                    {/* When expanded, take up max height to prevent constant resizes as more dropdowns expand */}
+                    <div className="player-volume-body" style={expanded ? {height: "100vh"} : {}}>
+                        <VolumeZones open={(expanded || alone)} sourceId={selectedSourceId} zones={zonesLeft} groups={usedGroups} groupsLeft={groupsLeft} />
+                    </div>
                 </Card>
             )}
-            <VolumeZones open={(expanded || alone)} sourceId={selectedSourceId} zones={zonesLeft} groups={usedGroups} groupsLeft={groupsLeft} />
         </div>
     );
 };

diff --git a/web/src/pages/Player/Player.scss b/web/src/pages/Player/Player.scss
@@ -33,14 +33,34 @@
   border-radius: 2.5%;
 }
 
-.player-volume-slider {
+.media-controls {
+  position: fixed;
+  z-index: 0;
+  bottom: 129px
+}
+
+.player-volume-container {
+  position: fixed;
+  bottom: 65px;
+  z-index: 1;
+}
+
+.player-volume-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: general.$controls-color;
   width: 90vw;
 }
 
+.player-volume-body {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  max-height: calc(85vh - 120px);
+  overflow-y: auto;
+}
+
 .player-volume-expand-button {
   color: general.$controls-color;
 }
@@ -52,3 +72,16 @@
   @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
+  }
+}