From a150619d08fc6eb2a97c07bbdf9f2fd460c0c86c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:30:12 +0200
Subject: [PATCH] Make the button icon change
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/button/Button.tsx                 | 15 +++++++++++----
 src/video-grid/VideoTile.jsx          |  3 ++-
 src/video-grid/VideoTileContainer.jsx |  1 +
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index f1ba94b..5ade524 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -30,7 +30,7 @@ import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
 import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { TooltipTrigger } from "../Tooltip";
-import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
+import { VolumeIcon } from "./VolumeIcon";
 
 export type ButtonVariant =
   | "default"
@@ -239,11 +239,18 @@ export function InviteButton({
   );
 }
 
-export function AudioButton(props: Omit<Props, "variant">) {
+interface AudioButtonProps extends Omit<Props, "variant"> {
+  /**
+   * A number between 0 and 1
+   */
+  volume: number;
+}
+
+export function AudioButton({ volume, ...rest }: AudioButtonProps) {
   return (
     <TooltipTrigger tooltip={() => "Local volume"}>
-      <Button variant="icon" {...props}>
-        <AudioIcon />
+      <Button variant="icon" {...rest}>
+        <VolumeIcon volume={volume} />
       </Button>
     </TooltipTrigger>
   );
diff --git a/src/video-grid/VideoTile.jsx b/src/video-grid/VideoTile.jsx
index 286d301..f6103e1 100644
--- a/src/video-grid/VideoTile.jsx
+++ b/src/video-grid/VideoTile.jsx
@@ -38,6 +38,7 @@ export const VideoTile = forwardRef(
       mediaRef,
       onOptionsPress,
       showOptions,
+      localVolume,
       ...rest
     },
     ref
@@ -86,7 +87,7 @@ export const VideoTile = forwardRef(
               styles.audioButton
             )}
           >
-            <AudioButton onPress={onOptionsPress} />
+            <AudioButton volume={localVolume} onPress={onOptionsPress} />
           </div>
         )}
         <video ref={mediaRef} playsInline disablePictureInPicture />
diff --git a/src/video-grid/VideoTileContainer.jsx b/src/video-grid/VideoTileContainer.jsx
index be7567e..c18fa4c 100644
--- a/src/video-grid/VideoTileContainer.jsx
+++ b/src/video-grid/VideoTileContainer.jsx
@@ -82,6 +82,7 @@ export function VideoTileContainer({
         avatar={getAvatar && getAvatar(member, width, height)}
         onOptionsPress={onOptionsPress}
         showOptions={!item.callFeed.isLocal()}
+        localVolume={localVolume}
         {...rest}
       />
       {videoTileSettingsModalState.isOpen && (