feat(CallScreen): enhance video call functionality and UI updates

- Integrated video call support by adding local and remote video stream handling.
- Implemented state management for video track detection in both local and peer streams.
- Updated UI to conditionally render video components based on the presence of video tracks.
- Added video toggle functionality to enable or disable local video during calls.
- Enhanced incoming call modal to display call type (voice or video).
- Refactored call store to manage call types and video state more effectively.

src/components/call/CallScreen.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  StatusBar,
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ Image,
+ StatusBar,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { callStore } from '../../stores/callStore';
@@ -17,19 +17,46 @@ const formatDuration = (seconds: number): string => {
   return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
 };
 
+
 const CallScreen: React.FC = () => {
   const currentCall = callStore((s) => s.currentCall);
   const callDuration = callStore((s) => s.callDuration);
   const peerStream = callStore((s) => s.peerStream);
+  const localStream = callStore((s) => s.localStream);
   const endCall = callStore((s) => s.endCall);
   const toggleMute = callStore((s) => s.toggleMute);
   const toggleSpeaker = callStore((s) => s.toggleSpeaker);
+  const toggleVideo = callStore((s) => s.toggleVideo);
   const isMinimized = callStore((s) => s.isMinimized);
   const toggleMinimize = callStore((s) => s.toggleMinimize);
 
+  // Track whether peer has video
+  const [hasPeerVideo, setHasPeerVideo] = useState(false);
+  // Track whether local has video
+  const [hasLocalVideo, setHasLocalVideo] = useState(false);
+
+  // Check peer stream for video tracks
+  useEffect(() => {
+    if (peerStream) {
+      const videoTracks = peerStream.getVideoTracks();
+      const hasVideo = videoTracks.length > 0 && videoTracks.some((t) => t.enabled);
+      setHasPeerVideo(hasVideo);
+    } else {
+      setHasPeerVideo(false);
+    }
+  }, [peerStream]);
+  // Check local stream for video tracks
+  useEffect(() => {
+    if (localStream) {
+      const videoTracks = localStream.getVideoTracks();
+      const hasVideo = videoTracks.length > 0 && videoTracks.some((t) => t.enabled);
+      setHasLocalVideo(hasVideo);
+    } else {
+      setHasLocalVideo(false);
+    }
+  }, [localStream]);
   // Don't render full screen when minimized or no call
   if (!currentCall || isMinimized) return null;
-
   const getStatusText = (): string => {
     switch (currentCall.status) {
       case 'ringing':
@@ -44,42 +71,50 @@ const CallScreen: React.FC = () => {
         return '';
     }
   };
-
   const handleEndCall = () => {
     endCall('hangup');
   };
-
   const handleToggleMute = () => {
     toggleMute();
   };
-
   const handleToggleSpeaker = () => {
     toggleSpeaker();
   };
-
+  const handleToggleVideo = () => {
+    toggleVideo();
+  };
   const handleMinimize = () => {
     toggleMinimize();
   };
-
+  // Determine if we should show video UI
+  const showRemoteVideo = hasPeerVideo;
+  const showLocalVideo = hasLocalVideo;
+  const isVideoCallActive = showRemoteVideo || showLocalVideo;
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
-
-      {/* Background - single consistent color */}
+      {/* Background */}
       <View style={styles.background} />
-
-      {/* Remote video preview */}
-      {peerStream && (
-        <View style={styles.remoteVideoContainer}>
+      {/* Remote video - full screen when peer has video */}
+      {showRemoteVideo && peerStream && (
+        <RTCView
+          streamURL={peerStream.toURL()}
+          style={styles.fullScreenVideo}
+          objectFit="cover"
+          mirror={false}
+        />
+      )}
+      {/* Local video - picture in picture */}
+      {showLocalVideo && localStream && (
+        <View style={styles.localVideoContainer}>
           <RTCView
-            streamURL={peerStream?.toURL()}
-            style={styles.remoteVideo}
+            streamURL={localStream.toURL()}
+            style={styles.localVideo}
             objectFit="cover"
-            mirror
+            mirror={true}
           />
         </View>
       )}
-
       {/* Top area: minimize button */}
       <View style={styles.topBar}>
         <TouchableOpacity
@@ -90,26 +125,35 @@ const CallScreen: React.FC = () => {
           <MaterialCommunityIcons name="chevron-down" size={28} color="#fff" />
         </TouchableOpacity>
       </View>
-
-      {/* Center: Peer info */}
-      <View style={styles.centerArea}>
-        <View style={styles.avatarOuter}>
-          {currentCall.peerAvatar ? (
-            <Image source={{ uri: currentCall.peerAvatar }} style={styles.avatar} />
-          ) : (
-            <View style={[styles.avatar, styles.avatarPlaceholder]}>
-              <Text style={styles.avatarText}>
-                {currentCall.peerName?.charAt(0).toUpperCase() || '?'}
-              </Text>
-            </View>
-          )}
+      {/* Center: Peer info - only show when no video */}
+      {!isVideoCallActive && (
+        <View style={styles.centerArea}>
+          <View style={styles.avatarOuter}>
+            {currentCall.peerAvatar ? (
+              <Image source={{ uri: currentCall.peerAvatar }} style={styles.avatar} />
+            ) : (
+              <View style={[styles.avatar, styles.avatarPlaceholder]}>
+                <Text style={styles.avatarText}>
+                  {currentCall.peerName?.charAt(0).toUpperCase() || '?'}
+                </Text>
+              </View>
+            )}
+          </View>
+          <Text style={styles.peerName} numberOfLines={1}>
+            {currentCall.peerName || '未知用户'}
+          </Text>
+          <Text style={styles.status}>{getStatusText()}</Text>
         </View>
-        <Text style={styles.peerName} numberOfLines={1}>
-          {currentCall.peerName || '未知用户'}
-        </Text>
-        <Text style={styles.status}>{getStatusText()}</Text>
-      </View>
-
+      )}
+      {/* Peer name overlay when video is active */}
+      {isVideoCallActive && (
+        <View style={styles.videoOverlayInfo}>
+          <Text style={styles.videoPeerName} numberOfLines={1}>
+            {currentCall.peerName || '未知用户'}
+          </Text>
+          <Text style={styles.videoStatus}>{getStatusText()}</Text>
+        </View>
+      )}
       {/* Bottom controls */}
       <View style={styles.controls}>
         <View style={styles.controlRow}>
@@ -130,7 +174,23 @@ const CallScreen: React.FC = () => {
               {currentCall.isMuted ? '取消静音' : '静音'}
             </Text>
           </TouchableOpacity>
-
+          {/* Video toggle */}
+          <TouchableOpacity
+            style={[styles.controlButton, hasLocalVideo && styles.controlButtonActive]}
+            onPress={handleToggleVideo}
+            activeOpacity={0.7}
+          >
+            <View style={[styles.controlCircle, hasLocalVideo && styles.controlCircleActive]}>
+              <MaterialCommunityIcons
+                name={hasLocalVideo ? 'video' : 'video-off'}
+                size={26}
+                color={hasLocalVideo ? '#333' : '#fff'}
+              />
+            </View>
+            <Text style={[styles.controlLabel, hasLocalVideo && styles.controlLabelActive]}>
+              {hasLocalVideo ? '关闭摄像头' : '打开摄像头'}
+            </Text>
+          </TouchableOpacity>
           {/* Speaker */}
           <TouchableOpacity
             style={[styles.controlButton, currentCall.isSpeakerOn && styles.controlButtonActive]}
@@ -149,7 +209,6 @@ const CallScreen: React.FC = () => {
             </Text>
           </TouchableOpacity>
         </View>
-
         {/* End call - prominent red button */}
         <TouchableOpacity
           style={styles.endCallButton}
@@ -188,6 +247,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     height: 44,
+    zIndex: 100,
   },
   topButton: {
     width: 44,
@@ -236,31 +296,63 @@ const styles = StyleSheet.create({
     color: 'rgba(255, 255, 255, 0.5)',
     letterSpacing: 0.3,
   },
-  remoteVideoContainer: {
-    position: 'absolute',
-    top: 70,
-    right: 20,
-    width: 100,
-    height: 140,
-    borderRadius: 14,
-    overflow: 'hidden',
+  fullScreenVideo: {
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: '#1A1A2E',
   },
-  remoteVideo: {
+  localVideoContainer: {
+    position: 'absolute',
+    top: 100,
+    right: 20,
+    width: 120,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: '#2A2A4E',
+    borderWidth: 2,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+    zIndex: 50,
+  },
+  localVideo: {
     width: '100%',
     height: '100%',
   },
+  videoOverlayInfo: {
+    position: 'absolute',
+    top: 100,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 50,
+  },
+  videoPeerName: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#FFFFFF',
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+  },
+  videoStatus: {
+    fontSize: 14,
+    color: 'rgba(255, 255, 255, 0.8)',
+    marginTop: 4,
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+  },
   controls: {
     position: 'absolute',
     bottom: 60,
     left: 0,
     right: 0,
     alignItems: 'center',
+    zIndex: 100,
   },
   controlRow: {
     flexDirection: 'row',
     justifyContent: 'center',
-    gap: 36,
+    gap: 24,
     marginBottom: 24,
   },
   controlButton: {
@@ -268,9 +360,9 @@ const styles = StyleSheet.create({
     width: 70,
   },
   controlCircle: {
-    width: CONTROL_CIRCLE_SIZE,
-    height: CONTROL_CIRCLE_SIZE,
-    borderRadius: CONTROL_CIRCLE_SIZE / 2,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
     backgroundColor: 'rgba(255, 255, 255, 0.12)',
     justifyContent: 'center',
     alignItems: 'center',
@@ -283,6 +375,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: 'rgba(255, 255, 255, 0.55)',
     marginTop: 8,
+    textAlign: 'center',
   },
   controlLabelActive: {
     color: '#FFFFFF',
@@ -292,9 +385,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   endCallCircle: {
-    width: END_CALL_SIZE,
-    height: END_CALL_SIZE,
-    borderRadius: END_CALL_SIZE / 2,
+    width: 64,
+    height: 64,
+    borderRadius: 32,
     backgroundColor: '#E54D42',
     justifyContent: 'center',
     alignItems: 'center',
@@ -306,4 +399,5 @@ const styles = StyleSheet.create({
   },
 });
 
+
 export default CallScreen;