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.
2026-03-28 00:56:52 +08:00
parent b19a2ced6f
commit f6176c945b
11 changed files with 790 additions and 268 deletions
--- a/src/components/call/CallScreen.tsx
+++ b/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;
--- a/src/components/call/IncomingCallModal.tsx
+++ b/src/components/call/IncomingCallModal.tsx
@@ -132,7 +132,9 @@ const IncomingCallModal: React.FC = () => {
          <Text style={styles.callerName} numberOfLines={1}>
            {incomingCall.callerName || '未知用户'}
          </Text>
-          <Text style={styles.callType}>来电通话</Text>
+          <Text style={styles.callType}>
+            {incomingCall.callType === 'video' ? '视频通话' : '语音通话'}
+          </Text>
        </View>

        {/* Bottom controls */}