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

@@ -2,6 +2,7 @@
"expo": {
"name": "RN Simple Chatbot",
"slug": "simple-chatbot-demo",
"newArchEnabled": false,
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/pipecat.png",

View File

@@ -11,7 +11,7 @@
"dependencies": {
"@config-plugins/react-native-webrtc": "^10.0.0",
"@daily-co/config-plugin-rn-daily-js": "0.0.7",
"@daily-co/react-native-daily-js": "^0.73.0",
"@daily-co/react-native-daily-js": "^0.76.0",
"@daily-co/react-native-webrtc": "^118.0.3-daily.2",
"@react-native-async-storage/async-storage": "1.24.0",
"@react-navigation/native": "^7.0.14",
@@ -26,7 +26,7 @@
"react-native-background-timer": "^2.4.1",
"react-native-gesture-handler": "^2.25.0",
"react-native-get-random-values": "^1.11.0",
"@pipecat-ai/react-native-daily-transport": "^0.3.2",
"@pipecat-ai/react-native-daily-transport": "^0.3.5",
"react-native-safe-area-context": "^5.4.0",
"react-native-screens": "^4.10.0",
"react-native-toast-message": "^2.3.0"

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',

View File

@@ -775,10 +775,10 @@
dependencies:
expo-build-properties "~0.8.3"
"@daily-co/daily-js@^0.76.0":
version "0.76.0"
resolved "https://registry.yarnpkg.com/@daily-co/daily-js/-/daily-js-0.76.0.tgz#5b45fae585de3175985fc008af0fdd022989844b"
integrity sha512-v3yPJ6oxz/CViHM1R78YMc7b9cLsTD+G4OxwvVIRX5vfqjn0tFhisqBwdzGK4MGAI/IdnE4oNahuPWAPpKwysA==
"@daily-co/daily-js@^0.79.0":
version "0.79.0"
resolved "https://registry.yarnpkg.com/@daily-co/daily-js/-/daily-js-0.79.0.tgz#6628c145951f9951ea213c65e916d6e8a3934b45"
integrity sha512-Ii/Zi6cfTl2EZBpX8msRPNkkCHcajA+ErXpbN2Xe2KySd1Nb4IzC/QWJlSl9VA9pIlYPQicRTDoZnoym/0uEAw==
dependencies:
"@babel/runtime" "^7.12.5"
"@sentry/browser" "^8.33.1"
@@ -786,12 +786,12 @@
dequal "^2.0.3"
events "^3.1.0"
"@daily-co/react-native-daily-js@^0.73.0":
version "0.73.0"
resolved "https://registry.yarnpkg.com/@daily-co/react-native-daily-js/-/react-native-daily-js-0.73.0.tgz#12b7eb7ad2868f6741c3ad720e1c88fd5864b160"
integrity sha512-T8FA7fDq+eXRG7XHYwHJIZUxHE44SCRWCvOaY53W5qBy3GABjGENNE5WxUqdzQVOuXC6jEaVZcCtJielkQwR8g==
"@daily-co/react-native-daily-js@^0.76.0":
version "0.76.0"
resolved "https://registry.yarnpkg.com/@daily-co/react-native-daily-js/-/react-native-daily-js-0.76.0.tgz#63a7f55bce975e8af30ca3f7ac4a8018e935bb5e"
integrity sha512-/W8FJVIKAF8wgZMJdPyNaRw06r4UHh4MYNlMQS8eQMmIdskFN7kLL3Vpd/9qm3VaH65Aev6RH/n4X/p/yoc4Ug==
dependencies:
"@daily-co/daily-js" "^0.76.0"
"@daily-co/daily-js" "^0.79.0"
"@types/react-native-background-timer" "^2.0.0"
base-64 "^1.0.0"
react-native-url-polyfill "^1.1.2"
@@ -1248,7 +1248,7 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
"@pipecat-ai/client-js@^0.3.2":
"@pipecat-ai/client-js@^0.3.5":
version "0.3.5"
resolved "https://registry.yarnpkg.com/@pipecat-ai/client-js/-/client-js-0.3.5.tgz#70610e093097784dbfd777f071a5f21a601cd15f"
integrity sha512-qmhnDjwY2XUtLjww35ShsYf5TF9BCuAk0tIj0oHjpTe6v6QOlgKQt8JVCAdc32p5ycouzSZOeDFtBd2aNWuq1g==
@@ -1259,12 +1259,12 @@
typed-emitter "^2.1.0"
uuid "^10.0.0"
"@pipecat-ai/react-native-daily-transport@^0.3.2":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@pipecat-ai/react-native-daily-transport/-/react-native-daily-transport-0.3.2.tgz#a8cbee24e41937f48a279b5f0b5b9784bb5b543a"
integrity sha512-KSTcE8ziDo8HS4/mkQeEOhg1YnCyH/z6RRzcFryYKQo0XkeEZ3UwPM+9L9cJFyuG/wu/UYI+R0gqcwPiqQvuEA==
"@pipecat-ai/react-native-daily-transport@^0.3.5":
version "0.3.5"
resolved "https://registry.yarnpkg.com/@pipecat-ai/react-native-daily-transport/-/react-native-daily-transport-0.3.5.tgz#b88fff52ff498049cc5889816ab528791073c8f3"
integrity sha512-L/Ynj6PACy2//Q9Yv3UqTfvf7070LhcavKI67yy0tSQ0wj8C7l2OIziPIAm8woP2BNGbaP7J88M5QRfPOp9F4Q==
dependencies:
"@pipecat-ai/client-js" "^0.3.2"
"@pipecat-ai/client-js" "^0.3.5"
"@pkgjs/parseargs@^0.11.0":
version "0.11.0"