import { Meta, ArgTypes } from '@storybook/blocks';
import AudioInputVFControl from '../AudioInputVFControl';

<Meta title="SDK Components/MeetingControls/AudioInputVFControl" />

# AudioInputVFControl

The `AudioInputVFControl` component renders a `ControlBarButton` with pop over menu options to select through multiple audio input options,
and provides the option of Amazon Voice Focus on the bottom. This component must be used within `VoiceFocusProvider` and `MeetingProvider`.
Make sure you have set `enableWebAudio` as `true` in the meeting config or Amazon Voice Focus feature won't work.

When you click the device button, the local audio input toggles between muted/unmuted state. When you click Amazon Voice Focus button,
Amazon Voice Focus feature toggles between on/off state.

If you want to apply Amazon Voice Focus feature, try this `AudioInputVFControl`. If not, `AudioInputControl` is a better choice.

You can use it in the [ControlBar component](/docs/ui-components-controlbar--page) to build the meeting controls bar.

## Importing

```javascript
import { AudioInputVFControl } from 'amazon-chime-sdk-component-library-react';
```

## Usage
`joinInfo` here is the response of [CreateMeeting](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_CreateMeeting.html) 
from  [Amazon Chime SDK Meetings endpoint](https://docs.aws.amazon.com/chime-sdk/latest/dg/meeting-namespace-migration.html).
`joinInfo` is needed here so as to decide whether download Voice Focus or Echo Reduction model according to `CreatingMeetingResponse`.

```jsx
import React from 'react';
import {
  MeetingProvider,
  VoiceFocusProvider,
  AudioInputVFControl,
} from 'amazon-chime-sdk-component-library-react';

const enableWebAudio = true;
const meetingConfig = { enableWebAudio };
const joinInfo = { Meeting: {} }

function voiceFocusName(name: string): VoiceFocusModelName {
  if (name && ['default', 'ns_es'].includes(name)) {
    return name as VoiceFocusModelName;
  }
  return 'default';
}

function getVoiceFocusSpecName(): VoiceFocusModelName {
  if (
    joinInfo && 
    joinInfo.Meeting?.MeetingFeatures?.Audio?.EchoReduction === 'AVAILABLE'
  ) {
    return voiceFocusName('ns_es');
  }
  return voiceFocusName('default');
}

const vfConfigValue = {
  spec: {name: getVoiceFocusSpecName()},
  createMeetingResponse: joinInfo,
};

const App = () => {
  return (
    <VoiceFocusProvider {...vfConfigValue}>
      <MeetingProvider {...meetingConfig}>
        <AudioInputVFControl />
      </MeetingProvider>
    </VoiceFocusProvider>
  );
};
```

## Props

<ArgTypes of={AudioInputVFControl} />

### Dependencies

- `MeetingProvider`
- `VoiceFocusProvider`
- `useToggleLocalMute`
- `useAudioInputs`