Make the button icon change

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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}>
+      <Button variant="icon" {...rest}>
-        <AudioIcon />
+        <VolumeIcon volume={volume} />
       </Button>
     </TooltipTrigger>
   );

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 />

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 && (