Bumping to use the latest version of @pipecat-ai/react-native-daily-transport, and removing code not needed.

This commit is contained in:
Filipi Fuchter
2025-05-08 18:18:00 -03:00
parent 277e2d7fc0
commit 46eed0a59a
5 changed files with 18 additions and 150 deletions

View File

@@ -1,113 +0,0 @@
import { View, Image, StyleSheet, LayoutChangeEvent, ImageStyle, ViewStyle } from 'react-native';
import React, { useMemo, useState } from 'react';
import { Icons } from '../theme/Assets';
import Colors from '../theme/Colors';
import { useVoiceClient } from '../context/VoiceClientContext';
import { VoiceClientVideoView } from '@pipecat-ai/react-native-daily-transport';
interface CameraButtonViewProps {
style?: ViewStyle; // Optional additional styles for the button container
}
const CameraButtonView: React.FC<CameraButtonViewProps> = ({ style }) => {
const { videoTrack, isCamEnabled } = useVoiceClient();
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
const onLayout = (event: LayoutChangeEvent) => {
const { width, height } = event.nativeEvent.layout;
setDimensions({ width, height });
};
const mediaComponent = useMemo(() => {
return (
<VoiceClientVideoView
videoTrack={videoTrack || null}
audioTrack={null}
mirror={true}
zOrder={1}
style={styles.media}
objectFit="cover"
/>
);
}, [videoTrack]);
const { width } = dimensions;
const circleSize = width * 0.9;
const innerCircleSize = width * 0.82;
return (
<View style={[styles.container, style]} onLayout={onLayout}>
<View
style={[
styles.outerCircle,
{ width: circleSize, height: circleSize, borderRadius: circleSize / 2 },
]}
>
{isCamEnabled ? (
<View style={[styles.videoView, { borderRadius: circleSize / 2 }]}>
{mediaComponent}
</View>
) : (
<>
<View
style={[
styles.innerCircle,
{
width: innerCircleSize,
height: innerCircleSize,
borderRadius: innerCircleSize / 2,
},
]}
/>
<Image
source={Icons.vision}
style={[
styles.image,
{
width: width * 0.3,
height: width * 0.3,
tintColor: 'green',
},
]}
resizeMode="contain"
/>
</>
)}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
} as ViewStyle,
outerCircle: {
borderWidth: 1,
borderColor: Colors.buttonsBorder,
justifyContent: 'center',
alignItems: 'center',
} as ViewStyle,
innerCircle: {
backgroundColor: Colors.disabledVision,
position: 'absolute',
} as ViewStyle,
videoView: {
aspectRatio: 1,
width: '100%',
height: '100%',
overflow: 'hidden',
} as ViewStyle,
image: {} as ImageStyle,
media: {
width: '100%',
height: '100%',
position: 'absolute',
},
});
export default CameraButtonView;

View File

@@ -15,7 +15,6 @@ import { MaterialIcons } from '@expo/vector-icons';
import WaveformView from '../components/WaveformView';
import MicrophoneView from '../components/MicrophoneView';
import CameraButtonView from '../components/CameraButtonView';
import { SafeAreaView } from 'react-native-safe-area-context';
import Colors from '../theme/Colors';
import CustomButton from '../theme/CustomButton';
@@ -50,11 +49,6 @@ const MeetingView: React.FC = () => {
style={styles.microphone}
/>
</TouchableOpacity>
<TouchableOpacity onPress={toggleCamInput}>
<CameraButtonView
style={styles.camera}
/>
</TouchableOpacity>
</View>
</View>
@@ -128,20 +122,6 @@ const styles = StyleSheet.create({
bottomPanel: {
paddingVertical: 10,
},
settingsButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#ccc', // Replace with Color.buttonsBorder equivalent
borderRadius: 12,
padding: 10,
marginBottom: 10,
},
settingsText: {
marginLeft: 5,
color: 'black',
},
endButton: {
flexDirection: 'row',
alignItems: 'center',