From f380eccc68a59caa8a681c056da278ce79846346 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 4 Jun 2023 16:02:40 -0700
Subject: [PATCH] Improve responsive styles for playerbar

---
 .../player/components/center-controls.tsx     | 34 ++++++++++++++-----
 .../player/components/left-controls.tsx       | 21 +++++++-----
 .../features/player/components/playerbar.tsx  | 14 +++++---
 .../player/components/right-controls.tsx      | 22 +++++++-----
 .../player/hooks/use-right-controls.ts        |  2 +-
 5 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index 53f2f5b4..f7723d68 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -43,13 +43,6 @@ interface CenterControlsProps {
   playersRef: any;
 }
 
-const ControlsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 35px;
-`;
-
 const ButtonsContainer = styled.div`
   display: flex;
   gap: 0.5rem;
@@ -58,14 +51,20 @@ const ButtonsContainer = styled.div`
 
 const SliderContainer = styled.div`
   display: flex;
+  width: 95%;
   height: 20px;
 `;
 
 const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
+  display: flex;
   flex: 1;
-  align-self: center;
+  align-self: flex-end;
+  justify-content: center;
   max-width: 50px;
-  text-align: center;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 
 const SliderWrapper = styled.div`
@@ -75,6 +74,23 @@ const SliderWrapper = styled.div`
   height: 100%;
 `;
 
+const ControlsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+
+  @media (max-width: 768px) {
+    ${ButtonsContainer} {
+      gap: 0;
+    }
+
+    ${SliderValueWrapper} {
+      display: none;
+    }
+  }
+`;
+
 export const CenterControls = ({ playersRef }: CenterControlsProps) => {
   const queryClient = useQueryClient();
   const [isSeeking, setIsSeeking] = useState(false);
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index d8a39774..d3278c03 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -20,13 +20,6 @@ import { LibraryItem } from '/@/renderer/api/types';
 import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
 
-const LeftControlsContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding-left: 1rem;
-`;
-
 const ImageWrapper = styled.div`
   position: relative;
   display: flex;
@@ -85,11 +78,23 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
   }
 `;
 
+const LeftControlsContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-left: 1rem;
+
+  @media (max-width: 640px) {
+    ${ImageWrapper} {
+      display: none;
+    }
+  }
+`;
+
 export const LeftControls = () => {
   const { setSideBar } = useAppStoreActions();
   const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
   const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-  // const hideImage = useAppStore((state) => state.sidebar.image);
   const { image, collapsed } = useSidebarStore();
   const hideImage = image && !collapsed;
   const currentSong = useCurrentSong();
diff --git a/src/renderer/features/player/components/playerbar.tsx b/src/renderer/features/player/components/playerbar.tsx
index b970eafe..67a0a155 100644
--- a/src/renderer/features/player/components/playerbar.tsx
+++ b/src/renderer/features/player/components/playerbar.tsx
@@ -25,20 +25,25 @@ const PlayerbarContainer = styled.div`
 `;
 
 const PlayerbarControlsGrid = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
   gap: 1rem;
   height: 100%;
+
+  @media (max-width: 768px) {
+    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.5fr);
+  }
 `;
 
 const RightGridItem = styled.div`
   align-self: center;
-  width: calc(100% / 3);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 `;
 
 const LeftGridItem = styled.div`
-  width: calc(100% / 3);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 `;
@@ -47,8 +52,9 @@ const CenterGridItem = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  align-items: center;
   justify-content: center;
-  width: calc(100% / 3);
+  width: 100%;
   height: 100%;
   overflow: hidden;
 `;
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 56629717..d87f20fd 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { Flex, Group } from '@mantine/core';
-import { useHotkeys } from '@mantine/hooks';
+import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import {
   RiVolumeUpFill,
@@ -26,6 +26,7 @@ import { Rating } from '/@/renderer/components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
 export const RightControls = () => {
+  const isMinWidth = useMediaQuery('(max-width: 480px)');
   const volume = useVolume();
   const muted = useMuted();
   const server = useCurrentServer();
@@ -181,16 +182,19 @@ export const RightControls = () => {
             tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
             variant="secondary"
             onClick={handleMute}
-          />
-          <PlayerbarSlider
-            max={100}
-            min={0}
-            size={6}
-            value={volume}
-            w="60px"
-            onChange={handleVolumeSlider}
             onWheel={handleVolumeWheel}
           />
+          {!isMinWidth ? (
+            <PlayerbarSlider
+              max={100}
+              min={0}
+              size={6}
+              value={volume}
+              w="60px"
+              onChange={handleVolumeSlider}
+              onWheel={handleVolumeWheel}
+            />
+          ) : null}
         </Group>
       </Group>
       <Group h="calc(100% / 3)" />
diff --git a/src/renderer/features/player/hooks/use-right-controls.ts b/src/renderer/features/player/hooks/use-right-controls.ts
index ceb1c142..ee6c44ee 100644
--- a/src/renderer/features/player/hooks/use-right-controls.ts
+++ b/src/renderer/features/player/hooks/use-right-controls.ts
@@ -79,7 +79,7 @@ export const useRightControls = () => {
   }, [setVolume, volume, volumeWheelStep]);
 
   const handleVolumeWheel = useCallback(
-    (e: WheelEvent<HTMLDivElement>) => {
+    (e: WheelEvent<HTMLDivElement | HTMLButtonElement>) => {
       let volumeToSet;
       if (e.deltaY > 0) {
         volumeToSet = calculateVolumeDown(volume, volumeWheelStep);