diff --git a/evi/evi-react-native/App.tsx b/evi/evi-react-native/App.tsx index 2ea92d0a..272331a7 100644 --- a/evi/evi-react-native/App.tsx +++ b/evi/evi-react-native/App.tsx @@ -8,7 +8,6 @@ import { SafeAreaView, LayoutAnimation, } from "react-native"; -import { useEvent } from 'expo' // We use Hume's low-level typescript SDK for this example. // The React SDK (@humeai/voice-react) does not support React Native. @@ -22,6 +21,7 @@ import { HumeClient, type Hume } from "hume"; // The provided native module is a good starting place, but you should // modify it to fit the audio recording needs of your specific app. import NativeAudio, { AudioEventPayload } from "./modules/audio"; +import VoiceIsolationModePrompt from "./VoiceIsolationModePrompt"; // Represents a chat message in the chat display. interface ChatEntry { @@ -55,6 +55,8 @@ const App = () => { const [isConnected, setIsConnected] = useState(false); const [isMuted, setIsMuted] = useState(false); const [chatEntries, setChatEntries] = useState([]); + const [showVoiceIsolationPrompt, setShowVoiceIsolationPrompt] = useState(false); + const [currentMicMode, setCurrentMicMode] = useState("Standard"); const humeRef = useRef(null); const addChatEntry = (entry: ChatEntry) => { setChatEntries((prev) => [...prev, entry]); @@ -95,6 +97,14 @@ const App = () => { return; } + const micMode = await NativeAudio.getMicrophoneMode(); + setCurrentMicMode(micMode); + + if (micMode !== "N/A" && micMode !== "Voice Isolation") { + setShowVoiceIsolationPrompt(true); + return + } + const chatSocket = hume.empathicVoice.chat.connect({ configId: process.env.EXPO_PUBLIC_HUME_CONFIG_ID, }); @@ -142,50 +152,42 @@ const App = () => { }; const handleDisconnect = async () => { + if (chatSocketRef.current) { + chatSocketRef.current.close(); + chatSocketRef.current = null; + } try { await NativeAudio.stopRecording(); - await NativeAudio.stopPlayback(); } catch (error) { console.error("Error while stopping recording", error); } - if (chatSocketRef.current) { - chatSocketRef.current.close(); - } + + await NativeAudio.stopPlayback(); }; useEffect(() => { if (isConnected) { - handleConnect().catch((error) => { - console.error("Error while connecting:", error); - }); + handleConnect() } else { - handleDisconnect().catch((error) => { - console.error("Error while disconnecting:", error); - }); + handleDisconnect() } const onUnmount = () => { - NativeAudio.stopRecording().catch((error: any) => { - console.error("Error while stopping recording", error); - }); - if ( - chatSocketRef.current && - chatSocketRef.current.readyState === WebSocket.OPEN - ) { - chatSocketRef.current?.close(); + if (chatSocketRef.current) { + chatSocketRef.current.close(); + chatSocketRef.current = null; } + + NativeAudio.stopRecording(); + NativeAudio.stopPlayback(); }; return onUnmount; }, [isConnected]); useEffect(() => { if (isMuted) { - NativeAudio.mute().catch((error) => { - console.error("Error while muting", error); - }); + NativeAudio.mute(); } else { - NativeAudio.unmute().catch((error) => { - console.error("Error while unmuting", error); - }); + NativeAudio.unmute(); } }, [isMuted]); @@ -290,6 +292,12 @@ const App = () => { /> + + setShowVoiceIsolationPrompt(false)} + /> ); }; diff --git a/evi/evi-react-native/VoiceIsolationModePrompt.tsx b/evi/evi-react-native/VoiceIsolationModePrompt.tsx new file mode 100644 index 00000000..2d397b2d --- /dev/null +++ b/evi/evi-react-native/VoiceIsolationModePrompt.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { + View, + Text, + Button, + Linking, + Platform, + Modal, +} from 'react-native'; +import NativeAudio from './modules/audio'; + +interface VoiceIsolationModePromptProps { + isVisible: boolean; + currentMode: string; + onDismiss: () => void; +} + +const VoiceIsolationModePrompt: React.FC = ({ + isVisible, + currentMode, + onDismiss, +}) => { + const handleOpenSettings = async () => { + if (Platform.OS === 'ios') { + try { + await NativeAudio.showMicrophoneModes(); + } catch (error) { + // Fallback to general settings if the API is not available + Linking.openSettings(); + } + } else { + Linking.openSettings(); + } + onDismiss(); + }; + + const handleShowMeHow = () => { + const supportUrl = 'https://support.apple.com/en-us/101993'; + Linking.openURL(supportUrl); + }; + + return ( + + + + Enable voice isolation for the best experience + + + Your device is currently using a {currentMode} microphone mode. + Enabling voice isolation will provide the best audio experience + in a noisy setting. + + +