From fd2cd38e4d02d72462e101d37594f714fc811668 Mon Sep 17 00:00:00 2001
From: Sandra Larsson <Sandra.larsson@eyevinn.se>
Date: Thu, 19 Dec 2024 09:07:39 +0100
Subject: [PATCH] fix: only keep volume controls on desktop (#257)

---
 src/assets/icons/icon.tsx                     |  6 ---
 src/assets/icons/minus.svg                    |  3 --
 src/assets/icons/plus.svg                     |  3 --
 .../production-line/production-line.tsx       | 22 +++--------
 .../volume-slider/volume-slider.tsx           | 39 +------------------
 5 files changed, 7 insertions(+), 66 deletions(-)
 delete mode 100644 src/assets/icons/minus.svg
 delete mode 100644 src/assets/icons/plus.svg

diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx
index 93693b3..bbb6faa 100644
--- 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
deleted file mode 100644
index eacef25..0000000
--- a/src/assets/icons/minus.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white">
-  <path d="M200-440v-80h560v80H200Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
deleted file mode 100644
index be10a07..0000000
--- a/src/assets/icons/plus.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white">
-  <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
index 09aa40a..7e356d1 100644
--- 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
index e7f0fbd..84af14e 100644
--- 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>
   );
 };