more visualization changes

Author: davidliu

app/assistant/ui/AgentVisualization.tsx

@@ -1,5 +1,5 @@
 import { useVoiceAssistant } from "@livekit/components-react";
-import { BarVisualizer } from "@livekit/react-native";
+import { BarVisualizer, VideoTrack } from "@livekit/react-native";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 
 type AgentVisualizationProps = {
@@ -10,32 +10,47 @@ export default function AgentVisualization({
   style
 }: AgentVisualizationProps) {
   const { state, audioTrack, videoTrack } = useVoiceAssistant();
+
+  let videoView = ( videoTrack 
+    ? <VideoTrack 
+        trackRef={videoTrack} 
+        style={styles.videoTrack}
+      />
+    : null
+  )
   return (
-    <View style={style} >
+    <View style={[style, styles.container]} >
 
       <BarVisualizer
         state={state}
-        barCount={7}
+        barCount={5}
         options={{
-          minHeight: 0.5,
+          minHeight: 0.1,
+          barWidth: 12,
         }}
         trackRef={audioTrack}
         style={styles.voiceAssistant}
       />
-
+      {videoView}
     </View>
   );
 };
 
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  videoTrack: {
+    position: 'absolute',
     width: '100%',
     height: '100%',
-    alignItems: 'center',
+    zIndex: 1,
   },
   voiceAssistant: {
     width: '100%',
-    height: '100%',
+    height: '30%',
+    zIndex: 0,
   },
 });

app/assistant/ui/ControlBar.tsx

@@ -1,3 +1,6 @@
+import { TrackReference, useEnsureRoom, useLocalParticipant } from "@livekit/components-react";
+import { BarVisualizer } from "@livekit/react-native";
+import { useEffect, useState } from "react";
 import { ViewStyle, StyleSheet, View, Image, TouchableOpacity, StyleProp } from "react-native"
 
 type ControlBarProps = {
@@ -22,6 +25,22 @@ export default function ControlBar({
   options,
 }: ControlBarProps) {
 
+  const room = useEnsureRoom();
+  const { microphoneTrack, localParticipant } = useLocalParticipant();
+  const [trackRef, setTrackRef] = useState<TrackReference | undefined>(undefined);
+
+  useEffect(() => {
+    if (microphoneTrack) {
+      setTrackRef({
+        participant: localParticipant,
+        publication: microphoneTrack,
+        source: microphoneTrack.source,
+      })
+    } else {
+      setTrackRef(undefined)
+    }
+  }, [microphoneTrack, localParticipant])
+
   // Images
   var micImage = options.isMicEnabled
     ? require('@/assets/images/mic_24dp.png')
@@ -46,6 +65,16 @@ export default function ControlBar({
         onPress={() => options.onMicClick()}
       >
         <Image style={styles.icon} source={micImage} />
+        <BarVisualizer
+          barCount={3}
+          trackRef={trackRef}
+          style={styles.micVisualizer}
+          options= {{
+            minHeight: 0.1,
+            barColor: '#CCCCCC',
+            barWidth: 2,
+          }}
+        />
       </TouchableOpacity>
 
       <TouchableOpacity
@@ -93,6 +122,7 @@ const styles = StyleSheet.create({
   },
   button: {
     flex: 1,
+    flexDirection: 'row',
     height: 44,
     padding: 10,
     marginHorizontal: 4,
@@ -107,4 +137,8 @@ const styles = StyleSheet.create({
   icon: {
     width: 20,
   },
+  micVisualizer: {
+    width: 20,
+    height: 20,
+  }
 });

package-lock.json

@@ -20,7 +20,7 @@
     "@config-plugins/react-native-webrtc": "12.0.0",
     "@expo/vector-icons": "^14.1.0",
     "@livekit/components-react": "^2.8.1",
-    "@livekit/react-native": "^2.7.3",
+    "@livekit/react-native": "^2.7.6",
     "@livekit/react-native-expo-plugin": "^1.0.1",
     "@livekit/react-native-webrtc": "^125.0.9",
     "@react-navigation/bottom-tabs": "^7.2.0",