Skip to content

Commit

Permalink
delay chatGPT voice feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@BlakeKaufman
BlakeKaufman committed Oct 4, 2024
1 parent 2b931a8 commit 5c0c202
Show file tree
Hide file tree
Showing 3 changed files with 508 additions and 505 deletions.
5 changes: 4 additions & 1 deletion app/components/admin/homeComponents/apps/chatGPT/chatGPTHome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,10 @@ export default function ChatGPTHome(props) {
onPress={() => {
if (userChatText.length === 0) {
Keyboard.dismiss();
navigate.navigate('ChatGPTVoiceFeature');
navigate.navigate('ErrorScreen', {
errorMessage: 'ChatGPT voice feature is coming soon.',
});
// navigate.navigate('ChatGPTVoiceFeature');

return;
}
Expand Down
256 changes: 128 additions & 128 deletions app/components/admin/homeComponents/apps/chatGPT/components/chatGPTSpeaking.js
View file
Original file line number Diff line number Diff line change
@@ -1,136 +1,136 @@
import React, {useRef, useEffect, useState} from 'react';
import {View, Animated, StyleSheet} from 'react-native';
import * as Speech from 'expo-speech';
import {CENTER, COLORS} from '../../../../../../constants';
// import React, {useRef, useEffect, useState} from 'react';
// import {View, Animated, StyleSheet} from 'react-native';
// import * as Speech from 'expo-speech';
// import {CENTER, COLORS} from '../../../../../../constants';

const AudioBars = ({
startListening,
chatGPTResponse,
isGettingResponse,
isPlayingResponse,
setIsUserSpeaking,
setIsPlayingResponse,
isUserSpeaking,
}) => {
const isInitialRender = useRef(true);
const animatedValues = useRef(
[...Array(5)].map(() => new Animated.Value(0.2)),
).current;
useEffect(() => {
console.log(isUserSpeaking, 'IS USER SPEAKING IN VOICE FUNCTION');
if (isInitialRender.current) {
isInitialRender.current = false;
return;
}
if (isUserSpeaking) {
setTimeout(() => {
startListening();
Speech.stop();
}, 500);
}
}, [isUserSpeaking, startListening]);
// const AudioBars = ({
// startListening,
// chatGPTResponse,
// isGettingResponse,
// isPlayingResponse,
// setIsUserSpeaking,
// setIsPlayingResponse,
// isUserSpeaking,
// }) => {
// const isInitialRender = useRef(true);
// const animatedValues = useRef(
// [...Array(5)].map(() => new Animated.Value(0.2)),
// ).current;
// useEffect(() => {
// console.log(isUserSpeaking, 'IS USER SPEAKING IN VOICE FUNCTION');
// if (isInitialRender.current) {
// isInitialRender.current = false;
// return;
// }
// if (isUserSpeaking) {
// setTimeout(() => {
// startListening();
// Speech.stop();
// }, 500);
// }
// }, [isUserSpeaking, startListening]);

useEffect(() => {
if (isPlayingResponse) {
Speech.speak(chatGPTResponse, {
onStart: startBarsAnimation,
onDone: () => {
setIsUserSpeaking(true);
setIsPlayingResponse(false);
stopBarsAnimation();
},
onStopped: stopBarsAnimation,
onError: stopBarsAnimation,
});
} else if (isGettingResponse) {
stopBarsAnimation();
}
}, [
isGettingResponse,
isPlayingResponse,
startBarsAnimation,
setIsUserSpeaking,
setIsPlayingResponse,
stopBarsAnimation,
chatGPTResponse,
]);
// useEffect(() => {
// if (isPlayingResponse) {
// Speech.speak(chatGPTResponse, {
// onStart: startBarsAnimation,
// onDone: () => {
// setIsUserSpeaking(true);
// setIsPlayingResponse(false);
// stopBarsAnimation();
// },
// onStopped: stopBarsAnimation,
// onError: stopBarsAnimation,
// });
// } else if (isGettingResponse) {
// stopBarsAnimation();
// }
// }, [
// isGettingResponse,
// isPlayingResponse,
// startBarsAnimation,
// setIsUserSpeaking,
// setIsPlayingResponse,
// stopBarsAnimation,
// chatGPTResponse,
// ]);

const startBarsAnimation = () => {
animatedValues.forEach(anim => {
Animated.loop(
Animated.sequence([
Animated.timing(anim, {
toValue: Math.random(), // Random height for the bar
duration: 600,
useNativeDriver: false,
}),
Animated.timing(anim, {
toValue: 0.2,
duration: 600,
useNativeDriver: false,
}),
Animated.timing(anim, {
toValue: Math.random(),
duration: 600,
useNativeDriver: false,
}),
Animated.timing(anim, {
toValue: 0.2,
duration: 600,
useNativeDriver: false,
}),
]),
).start();
});
};
// const startBarsAnimation = () => {
// animatedValues.forEach(anim => {
// Animated.loop(
// Animated.sequence([
// Animated.timing(anim, {
// toValue: Math.random(), // Random height for the bar
// duration: 600,
// useNativeDriver: false,
// }),
// Animated.timing(anim, {
// toValue: 0.2,
// duration: 600,
// useNativeDriver: false,
// }),
// Animated.timing(anim, {
// toValue: Math.random(),
// duration: 600,
// useNativeDriver: false,
// }),
// Animated.timing(anim, {
// toValue: 0.2,
// duration: 600,
// useNativeDriver: false,
// }),
// ]),
// ).start();
// });
// };

const stopBarsAnimation = () => {
animatedValues.forEach(anim => {
Animated.timing(anim, {
toValue: 0.2, // Reset to minimum height
duration: 300,
useNativeDriver: false,
}).start();
});
};
// const stopBarsAnimation = () => {
// animatedValues.forEach(anim => {
// Animated.timing(anim, {
// toValue: 0.2, // Reset to minimum height
// duration: 300,
// useNativeDriver: false,
// }).start();
// });
// };

if (isUserSpeaking) return <></>;
return (
<View style={styles.container}>
{animatedValues.map((anim, index) => (
<Animated.View
key={index}
style={[
styles.bar,
{
height: anim.interpolate({
inputRange: [0, 1],
outputRange: ['20%', '100%'],
}),
},
]}
/>
))}
</View>
);
};
// if (isUserSpeaking) return <></>;
// return (
// <View style={styles.container}>
// {animatedValues.map((anim, index) => (
// <Animated.View
// key={index}
// style={[
// styles.bar,
// {
// height: anim.interpolate({
// inputRange: [0, 1],
// outputRange: ['20%', '100%'],
// }),
// },
// ]}
// />
// ))}
// </View>
// );
// };

const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: 150,
// const styles = StyleSheet.create({
// container: {
// flexDirection: 'row',
// alignItems: 'center',
// justifyContent: 'center',
// height: 150,

alignSelf: 'center',
...CENTER,
},
bar: {
width: 15,
backgroundColor: COLORS.darkModeText,
marginHorizontal: 10,
borderRadius: 8,
},
});
// alignSelf: 'center',
// ...CENTER,
// },
// bar: {
// width: 15,
// backgroundColor: COLORS.darkModeText,
// marginHorizontal: 10,
// borderRadius: 8,
// },
// });

export default AudioBars;
// export default AudioBars;
Loading

0 comments on commit 5c0c202

Please sign in to comment.