diff --git a/CHANGELOG.md b/CHANGELOG.md index 914612ab8..34d530eac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ * Webapp * Update Airplay icon to modern variant * Add gradient to background to break up the solid color + * 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 + * Add safeguards in an attempt to reduce volume slider misinputs ## 0.4.5 * Web App diff --git a/web/src/App.jsx b/web/src/App.jsx index 76622dbaa..a26a3ab16 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -222,13 +222,14 @@ Page.propTypes = { const App = ({ selectedPage }) => { return ( -
- -
- +
+
{/* Used to make sure the background doesn't stretch or stop prematurely on scrollable pages */} + +
+ +
+
- -
); }; App.propTypes = { diff --git a/web/src/App.scss b/web/src/App.scss index 3b2312461..395804bff 100644 --- a/web/src/App.scss +++ b/web/src/App.scss @@ -1,10 +1,17 @@ @use "src/general"; +.background-gradient { + background: general.$bg-gradient; + position: fixed; + z-index: -1; + height: 100vh; + width: 100vw; +} + .app { // display: flex; // width: 100vw; - height: 100vh; // Required to not have weird paneling with gradient backgrounds - background: general.$bg-gradient; + background: none; // padding-top: 0.6rem; // padding-bottom: 0.6rem; // padding: 0.6rem; diff --git a/web/src/components/CustomMarquee/CustomMarquee.jsx b/web/src/components/CustomMarquee/CustomMarquee.jsx index 72c4befe7..9bcaa22a8 100644 --- 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.scss b/web/src/components/GroupVolumeSlider/GroupVolumeSlider.scss index f6975cc3d..067767b52 100644 --- a/web/src/components/GroupVolumeSlider/GroupVolumeSlider.scss +++ b/web/src/components/GroupVolumeSlider/GroupVolumeSlider.scss @@ -23,5 +23,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 index 01e8cbc65..d116fc2c7 100644 --- 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 index ed3b965bf..973f47688 100644 --- 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 index 01c847eaf..655b18905 100644 --- 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/VolumeSlider/VolumeSlider.jsx b/web/src/components/VolumeSlider/VolumeSlider.jsx index dc9be5ddc..0b169271b 100644 --- a/web/src/components/VolumeSlider/VolumeSlider.jsx +++ b/web/src/components/VolumeSlider/VolumeSlider.jsx @@ -34,6 +34,31 @@ VolIcon.propTypes = { // generic volume slider used by other volume sliders const VolumeSlider = ({ vol, mute, setVol, setMute, disabled }) => { + const touchStart = React.useRef(0); + const isScrolling = React.useRef(false); + + const handleTouchStart = (e) => { + const touch = e.touches[0]; + touchStart.current = touch.clientY; + isScrolling.current = false; + }; + + const handleTouchMove = (e) => { + const touch = e.touches[0]; + const diff = touch.clientY - touchStart.current; + // Detect vertical drag, allow user to continue dragging within safe boundaries without needing to re-drag the slider + isScrolling.current = Math.abs(diff) > 15; + }; + + let volChangeTimeout; + const handleVolChange = (e, val) => { + volChangeTimeout = setTimeout(() => { + if (!isScrolling.current) { + setVol(val, true); + } + }, 100); + } + return (
@@ -45,29 +70,29 @@ const VolumeSlider = ({ vol, mute, setVol, setMute, disabled }) => { >
- { - if(isIOS() && e.type === "mousedown"){ - return; - } - setVol(val); - }} - onChangeCommitted={(e, val) => { - if(isIOS() && e.type === "mouseup"){ - return; - } - setVol(val, true); - }} - /> -
+ { + if (isIOS() && e.type === "mousedown") { + return; + } + handleVolChange(e, val); + }} + onChangeCommitted={(e, val) => { + if (isIOS() && e.type === "mouseup") { + return; + } + handleVolChange(e, val); + }} + /> + ); }; diff --git a/web/src/components/ZoneVolumeSlider/ZoneVolumeSlider.scss b/web/src/components/ZoneVolumeSlider/ZoneVolumeSlider.scss index 73669bc62..fe89a2af3 100644 --- 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) // 47px is the width of the dropdown icon + padding, this causes the child volume sliders to end in the same spot as the parent } diff --git a/web/src/pages/Home/Home.jsx b/web/src/pages/Home/Home.jsx index 215a53bf4..d12882577 100644 --- a/web/src/pages/Home/Home.jsx +++ b/web/src/pages/Home/Home.jsx @@ -55,11 +55,13 @@ const PresetAndAdd = ({ ); } else { return ( -
setPresetsModalOpen(true)} - > - Presets +
+
setPresetsModalOpen(true)} + > + Presets +
); } diff --git a/web/src/pages/Home/Home.scss b/web/src/pages/Home/Home.scss index 121fa8212..9c6b5aa0f 100644 --- 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 index 872ee214f..08c0d398c 100644 --- a/web/src/pages/Player/Player.jsx +++ b/web/src/pages/Player/Player.jsx @@ -62,8 +62,46 @@ const Player = () => { // 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)); + const mobile = window.matchMedia("(max-width: 435px)").matches + selectActiveSource(); + function DropdownArrow() { + if(mobile){ + if(expanded){ + return( + + ) + } else { + return( + + ) + } + } else { + if(expanded){ + return( + + ) + } else { + return( + + ) + } + } + } + return (
{streamsModalOpen && ( @@ -87,6 +125,7 @@ const Player = () => { { - - - - {/* There are many sub-divs classed player-inner here because formatting was strange otherwise */} -
-
-
-
-
-
+
+ +
{!alone && !is_streamer && zones.length > 0 && ( - - - setExpanded(!expanded)}> - {expanded ? ( - - ) : ( - - )} - + +
+ + setExpanded(!expanded)}> + + +
+ + {/* When expanded, take up max height to prevent constant resizes as more dropdowns expand */} +
+ +
)} -
); }; diff --git a/web/src/pages/Player/Player.scss b/web/src/pages/Player/Player.scss index 0da4b71a0..e7a1d12af 100644 --- a/web/src/pages/Player/Player.scss +++ b/web/src/pages/Player/Player.scss @@ -33,7 +33,23 @@ border-radius: 2.5%; } -.player-volume-slider { +.media-controls { + @media (max-width: 435px) { + position: fixed; + z-index: 0; + bottom: 129px + } +} + +.player-volume-container { + @media (max-width: 435px) { + position: fixed; + bottom: 65px; + z-index: 1; + } +} + +.player-volume-header { display: flex; flex-direction: row; align-items: center; @@ -41,6 +57,14 @@ 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 +76,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 + } +}