wx44wx/pipecat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving the layout from the bot ready react native demo.

Browse Source
This commit is contained in:
Filipi Fuchter
2025-01-30 10:31:04 -03:00
parent a48e5d0714
commit 75ca0571bb
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
examples/bot-ready-signalling/client/react-native/src/App.js vendored
View File

@@ -86,20 +86,20 @@ const CallScreen = () => {
<View style={styles.statusBar}> <View style={styles.statusBar}>
<Text>Status: <Text style={styles.status}>{connectionStatus}</Text></Text> <Text>Status: <Text style={styles.status}>{connectionStatus}</Text></Text>
<View style={styles.controls}> <View style={styles.controls}>
<Button title="Connect" onPress={connect} disabled={isConnected} /> <Button
<Button title="Disconnect" onPress={disconnect} disabled={!isConnected} /> title={isConnected ? "Disconnect" : "Connect"}
onPress={isConnected ? disconnect : connect}
/>
</View> </View>
</View> </View>
<View style={styles.debugPanel}> <View style={styles.debugPanel}>
<Text style={styles.debugTitle}>Debug Info</Text> <Text style={styles.debugTitle}>Debug Info</Text>
<View style={styles.debugLog}> <ScrollView style={styles.debugLog}>
<ScrollView style={styles.debugLog}> {logs.map((logEntry, index) => (
{logs.map((logEntry, index) => ( <Text key={index} style={styles.logText}>{logEntry}</Text>
<Text key={index} style={styles.logText}>{logEntry}</Text> ))}
))} </ScrollView>
</ScrollView>
</View>
</View> </View>
</View> </View>
</SafeAreaView> </SafeAreaView>
@@ -108,13 +108,13 @@ const CallScreen = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
safeArea: { flex: 1, backgroundColor: '#f0f0f0', padding: 20 }, safeArea: { flex: 1, backgroundColor: '#f0f0f0', padding: 20 },
container: { flex: 1, maxWidth: 1200, margin: 'auto' }, container: { flex: 1, margin: 20 },
statusBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, backgroundColor: '#fff', borderRadius: 8, marginBottom: 20 }, statusBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, backgroundColor: '#fff', borderRadius: 8, marginBottom: 20 },
status: { fontWeight: 'bold' }, status: { fontWeight: 'bold' },
controls: { flexDirection: 'row', gap: 10 }, controls: { flexDirection: 'row', gap: 10 },
debugPanel: { backgroundColor: '#fff', borderRadius: 8, padding: 20 }, debugPanel: { height: '80%', backgroundColor: '#fff', borderRadius: 8, padding: 20},
debugTitle: { fontSize: 16, fontWeight: 'bold' }, debugTitle: { fontSize: 16, fontWeight: 'bold' },
debugLog: { height: 200, overflow: 'scroll', backgroundColor: '#f8f8f8', padding: 10, borderRadius: 4, fontFamily: 'monospace', fontSize: 12, lineHeight: 1.4 }, debugLog: { height: '100%', overflow: 'scroll', backgroundColor: '#f8f8f8', padding: 10, borderRadius: 4, fontFamily: 'monospace', fontSize: 12, lineHeight: 1.4 },
}); });
export default CallScreen; export default CallScreen;