fix: only keep volume controls on desktop (#257)

Eyevinn · Dec 19, 2024 · fd2cd38 · fd2cd38
1 parent dbb153b
commit fd2cd38
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 66 deletions.
diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx
@@ -12,8 +12,6 @@ import RefreshSvg from "./refresh.svg?react";
 import Settings from "./settings.svg?react";
 import NoSound from "./no_sound.svg?react";
 import FullSound from "./full_sound.svg?react";
-import Minus from "./minus.svg?react";
-import Plus from "./plus.svg?react";
 import Headset from "./headset.svg?react";
 import UserSettings from "./user_settings.svg?react";
 import ChevronDown from "./chevron_down.svg?react";
@@ -51,10 +49,6 @@ export const NoSoundIcon = () => <NoSound />;
 
 export const FullSoundIcon = () => <FullSound />;
 
-export const MinusIcon = () => <Minus />;
-
-export const PlusIcon = () => <Plus />;
-
 export const UserSettingsIcon = () => <UserSettings />;
 
 export const ChevronDownIcon = () => <ChevronDown />;

diff --git a/src/assets/icons/minus.svg b/src/assets/icons/minus.svg
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -204,21 +204,11 @@ export const ProductionLine = ({
     setValue(newValue);
 
     audioElements?.forEach((audioElement) => {
-      console.log("Setting volume to: ", newValue);
       // eslint-disable-next-line no-param-reassign
       audioElement.volume = newValue;
     });
   };
 
-  const handleVolumeButtonClick = (type: "increase" | "decrease") => {
-    const newValue =
-      type === "increase"
-        ? Math.min(value + 0.05, 1)
-        : Math.max(value - 0.05, 0);
-    setValue(newValue);
-    // TODO: Fix for iOS
-  };
-
   useHotkeys(savedHotkeys.increaseVolumeHotkey || "u", () => {
     const newValue = Math.min(value + 0.05, 1);
     setValue(newValue);
@@ -503,12 +493,12 @@ export const ProductionLine = ({
               }}
             >
               <DisplayContainerHeader>Controls</DisplayContainerHeader>
-              <VolumeSlider
-                value={value}
-                handleInputChange={handleInputChange}
-                handleVolumeButtonClick={handleVolumeButtonClick}
-              />
-
+              {!isMobile && (
+                <VolumeSlider
+                  value={value}
+                  handleInputChange={handleInputChange}
+                />
+              )}
               <FlexContainer>
                 <FlexButtonWrapper className="first">
                   <UserControlBtn

diff --git a/src/components/volume-slider/volume-slider.tsx b/src/components/volume-slider/volume-slider.tsx
@@ -1,13 +1,6 @@
 import styled from "@emotion/styled";
 import { FC } from "react";
-import {
-  NoSoundIcon,
-  FullSoundIcon,
-  MinusIcon,
-  PlusIcon,
-} from "../../assets/icons/icon";
-import { isMobile } from "../../bowser";
-import { ActionButton } from "../landing-page/form-elements";
+import { NoSoundIcon, FullSoundIcon } from "../../assets/icons/icon";
 
 const SliderWrapper = styled.div`
   width: 100%;
@@ -50,24 +43,6 @@ const SliderThumb = styled.div<{ position: number }>`
   cursor: pointer;
 `;
 
-const VolumeButton = styled(ActionButton)`
-  background-color: #32383b;
-  width: 7rem;
-  align-items: center;
-  height: 4.5rem;
-  padding: 1.5rem;
-  cursor: pointer;
-  margin-top: 1rem;
-  border: 0.2rem solid #6d6d6d;
-`;
-
-const VolumeButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-`;
-
 const VolumeWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -78,13 +53,11 @@ const VolumeWrapper = styled.div`
 type TVolumeSliderProps = {
   value: number;
   handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  handleVolumeButtonClick: (type: "increase" | "decrease") => void;
 };
 
 export const VolumeSlider: FC<TVolumeSliderProps> = ({
   handleInputChange,
   value,
-  handleVolumeButtonClick,
 }) => {
   const thumbPosition = value * 100;
 
@@ -122,16 +95,6 @@ export const VolumeSlider: FC<TVolumeSliderProps> = ({
           </IconWrapper>
         </VolumeContainer>
       </VolumeWrapper>
-      {isMobile && (
-        <VolumeButtonContainer>
-          <VolumeButton onClick={() => handleVolumeButtonClick("decrease")}>
-            <MinusIcon />
-          </VolumeButton>
-          <VolumeButton onClick={() => handleVolumeButtonClick("increase")}>
-            <PlusIcon />
-          </VolumeButton>
-        </VolumeButtonContainer>
-      )}
     </SliderWrapper>
   );
 };