@ermis-network/ermis-chat-react 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React UI components for Ermis Chat",
   "author": "Ermis",
   "homepage": "https://ermis.network/",
@@ -20,7 +20,7 @@
     "/src"
   ],
   "dependencies": {
-    "@ermis-network/ermis-chat-sdk": "1.0.0",
+    "@ermis-network/ermis-chat-sdk": "1.0.3",
     "virtua": "^0.48.8"
   },
   "peerDependencies": {

package/src/components/ChannelHeader.tsx

@@ -1,10 +1,9 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useContext } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { usePendingState } from '../hooks/usePendingState';
-import { useBannedState } from '../hooks/useBannedState';
-import { useBlockedState } from '../hooks/useBlockedState';
 import { Avatar } from './Avatar';
 import type { ChannelHeaderProps } from '../types';
+import { ErmisCallContext } from '../context/ErmisCallContext';
 
 export type { ChannelHeaderProps } from '../types';
 
@@ -28,9 +27,15 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
   subtitle,
   renderRight,
   renderTitle,
+  renderAudioCallButton,
+  renderVideoCallButton,
+  audioCallTitle = 'Audio Call',
+  videoCallTitle = 'Video Call',
+  CallBadgeComponent,
 }) => {
-  const { activeChannel, client } = useChatClient();
+  const { activeChannel, client, enableCall } = useChatClient();
   const { isPending } = usePendingState(activeChannel, client.userID);
+  const callContext = useContext(ErmisCallContext);
 
   const actionDisabled = isPending;
 
@@ -73,11 +78,47 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
       </div>
 
       {/* renderRight exposes actionDisabled for consumers to disable UI features natively */}
-      {renderRight && (
-        <div className="ermis-channel-header__actions">
-          {renderRight(activeChannel, actionDisabled)}
-        </div>
-      )}
+      <div className="ermis-channel-header__actions">
+        {enableCall && callContext && activeChannel?.type === 'messaging' && !isPending && (
+          <>
+            {renderAudioCallButton ? (
+              renderAudioCallButton(() => callContext.createCall('audio', activeChannel.cid || ''), actionDisabled)
+            ) : (
+              <button
+                className="ermis-btn ermis-btn--icon"
+                disabled={actionDisabled}
+                onClick={() => callContext.createCall('audio', activeChannel.cid || '')}
+                title={audioCallTitle}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+                </svg>
+              </button>
+            )}
+            
+            {renderVideoCallButton ? (
+              renderVideoCallButton(() => callContext.createCall('video', activeChannel.cid || ''), actionDisabled)
+            ) : (
+              <button
+                className="ermis-btn ermis-btn--icon"
+                disabled={actionDisabled}
+                onClick={() => callContext.createCall('video', activeChannel.cid || '')}
+                title={videoCallTitle}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            )}
+          </>
+        )}
+        {/* C8: Active call badge */}
+        {enableCall && callContext && callContext.callStatus && CallBadgeComponent && (
+          <CallBadgeComponent callType={callContext.callType} />
+        )}
+        {renderRight && renderRight(activeChannel, actionDisabled)}
+      </div>
     </div>
   );
 });

package/src/components/ChannelList.tsx

@@ -18,6 +18,7 @@ export type { ChannelListProps, ChannelItemProps } from '../types';
  */
 function getLastMessagePreview(
   channel: Channel,
+  myUserId?: string,
 ): { text: string; user: string } {
   const lastMsg = channel.state?.latestMessages?.slice(-1)[0];
   if (!lastMsg) return { text: '', user: '' };
@@ -31,8 +32,8 @@ function getLastMessagePreview(
   }
 
   if (msgType === 'signal') {
-    const userMap = buildUserMap(channel.state);
-    return { text: parseSignalMessage(rawText, userMap), user: '' };
+    const result = parseSignalMessage(rawText, myUserId || '');
+    return { text: result?.text || rawText, user: '' };
   }
 
   // Display 'Sticker' if message is a sticker
@@ -206,7 +207,7 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   // Derive last message preview computation is deferred here, 
   // so it only executes when VList actually mounts this visible item
   const { text: rawLastMessageText, user: rawLastMessageUser } = useMemo(
-    () => getLastMessagePreview(channel),
+    () => getLastMessagePreview(channel, currentUserId),
     // Recompute if latestMessage changes or we get a force update
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [channel, channel.state?.latestMessages, updateCount]

package/src/components/ErmisCallProvider.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { CallStatus, ErmisCallNode, type UserCallInfo, type CallEventData } from '@ermis-network/ermis-chat-sdk';
+import { ErmisCallContext } from '../context/ErmisCallContext';
+import type { ErmisCallProviderProps } from '../types';
+
+export type { ErmisCallProviderProps } from '../types';
+
+export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
+  children,
+  client,
+  sessionId,
+  wasmPath = '/ermis_call_node_wasm_bg.wasm',
+  relayUrl = 'https://iroh-relay.ermis.network:8443',
+  onCallStart,
+  onCallEnd,
+  onCallError,
+  onIncomingCall,
+  onCallAccepted,
+  onCallRejected,
+}) => {
+  const [callNode, setCallNode] = useState<ErmisCallNode | null>(null);
+  const [callStatus, setCallStatus] = useState<CallStatus | ''>('');
+  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
+  const [callType, setCallType] = useState<string>('audio');
+  const [callerInfo, setCallerInfo] = useState<UserCallInfo | undefined>(undefined);
+  const [receiverInfo, setReceiverInfo] = useState<UserCallInfo | undefined>(undefined);
+  const [isIncoming, setIsIncoming] = useState<boolean>(false);
+  const [isMicMuted, setIsMicMuted] = useState(false);
+  const [isVideoMuted, setIsVideoMuted] = useState(true); // Default to true until a video track is added
+  const [audioDevices, setAudioDevices] = useState<MediaDeviceInfo[]>([]);
+  const [videoDevices, setVideoDevices] = useState<MediaDeviceInfo[]>([]);
+  const [selectedAudioDeviceId, setSelectedAudioDeviceId] = useState<string>('');
+  const [selectedVideoDeviceId, setSelectedVideoDeviceId] = useState<string>('');
+  const [isScreenSharing, setIsScreenSharing] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isRemoteMicMuted, setIsRemoteMicMuted] = useState(false);
+  const [isRemoteVideoMuted, setIsRemoteVideoMuted] = useState(false);
+
+  // Call duration timer (C7 — exposed via context)
+  const [callDuration, setCallDuration] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const startTimer = useCallback(() => {
+    setCallDuration(0);
+    timerRef.current = setInterval(() => {
+      setCallDuration((prev) => prev + 1);
+    }, 1000);
+  }, []);
+
+  const stopTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setCallDuration(0);
+  }, []);
+
+  useEffect(() => {
+    if (callStatus === CallStatus.CONNECTED) {
+      startTimer();
+    } else {
+      stopTimer();
+    }
+    return () => stopTimer();
+  }, [callStatus, startTimer, stopTimer]);
+
+  useEffect(() => {
+    if (!client || !sessionId) return;
+
+    // Create new call node instance
+    const node = new ErmisCallNode(client, sessionId, wasmPath, relayUrl);
+    setCallNode(node);
+
+    // Register Call Events
+    node.onCallEvent = (data: CallEventData) => {
+      setIsIncoming(data.type === 'incoming');
+      setCallType(data.callType);
+      setCallerInfo(data.callerInfo);
+      setReceiverInfo(data.receiverInfo);
+      // C1: Lifecycle callback — incoming call
+      if (data.type === 'incoming' && data.callerInfo) {
+        onIncomingCall?.(data.callerInfo);
+      }
+    };
+
+    node.onError = (error: string) => {
+      setErrorMessage(error);
+      // C1: Lifecycle callback — error
+      onCallError?.(error);
+    };
+    node.onDeviceChange = (audio, video) => {
+      setAudioDevices(audio);
+      setVideoDevices(video);
+    };
+    node.onScreenShareChange = (isSharing: boolean) => setIsScreenSharing(isSharing);
+
+    node.getDevices().then(({ audioDevices: a, videoDevices: v }) => {
+      setAudioDevices(a);
+      setVideoDevices(v);
+    });
+
+    node.onCallStatus = (status: string | null) => {
+      const parsedStatus = status as CallStatus | '';
+      setCallStatus(parsedStatus);
+      if (parsedStatus === CallStatus.ENDED || !parsedStatus) {
+        setLocalStream(null);
+        setRemoteStream(null);
+        setIsIncoming(false);
+        setCallStatus('');
+      }
+    };
+
+    node.onLocalStream = (stream: MediaStream) => {
+      setLocalStream(stream);
+      const audioTracks = stream.getAudioTracks();
+      setIsMicMuted(audioTracks.length === 0 || !audioTracks[0].enabled);
+      const videoTracks = stream.getVideoTracks();
+      setIsVideoMuted(videoTracks.length === 0 || !videoTracks[0].enabled);
+    };
+
+    node.onRemoteStream = (stream: MediaStream) => setRemoteStream(stream);
+
+    // Listen for remote peer transceiver state via data channel
+    node.onDataChannelMessage = (state: { audio_enable?: boolean; video_enable?: boolean }) => {
+      if (typeof state?.audio_enable === 'boolean') {
+        setIsRemoteMicMuted(!state.audio_enable);
+      }
+      if (typeof state?.video_enable === 'boolean') {
+        setIsRemoteVideoMuted(!state.video_enable);
+      }
+    };
+
+    // Listen for remote peer requesting to upgrade call (audio → video)
+    // Pattern 2: Automatically switch UI layout to video without prompting.
+    node.onUpgradeCall = () => {
+      setCallType('video');
+      // Note: We don't turn on our own camera automatically.
+    };
+
+    return () => {
+      const cleanup = async () => {
+        try {
+          await node.endCall();
+        } catch (e) { } // ignore during unmount
+      };
+      cleanup();
+    };
+  }, [client, sessionId, wasmPath, relayUrl, onIncomingCall, onCallError]);
+
+  const createCall = useCallback(async (type: 'audio' | 'video', cid: string) => {
+    if (!callNode) return;
+    setCallType(type);
+    setIsIncoming(false);
+    setCallStatus(CallStatus.RINGING);
+    await callNode.createCall(type, cid);
+    // C1: Lifecycle callback — call started
+    onCallStart?.(type, cid);
+  }, [callNode, onCallStart]);
+
+  const acceptCall = useCallback(async () => {
+    if (callNode) await callNode.acceptCall();
+    // C1: Lifecycle callback — call accepted
+    onCallAccepted?.();
+  }, [callNode, onCallAccepted]);
+
+  const rejectCall = useCallback(async () => {
+    if (callNode) await callNode.rejectCall();
+    setCallStatus('');
+    setIsIncoming(false);
+    // C1: Lifecycle callback — call rejected
+    onCallRejected?.();
+  }, [callNode, onCallRejected]);
+
+  const endCall = useCallback(async () => {
+    if (callNode) await callNode.endCall();
+    // C1: Lifecycle callback — call ended (capture duration before reset)
+    const duration = callDuration;
+    setCallStatus('');
+    setIsIncoming(false);
+    setLocalStream(null);
+    setRemoteStream(null);
+    onCallEnd?.(duration);
+  }, [callNode, callDuration, onCallEnd]);
+
+  const toggleScreenShare = useCallback(async () => {
+    if (!callNode) return;
+    if (isScreenSharing) {
+      await callNode.stopScreenShare();
+    } else {
+      await callNode.startScreenShare();
+    }
+  }, [callNode, isScreenSharing]);
+
+  const switchAudioDevice = useCallback(async (deviceId: string) => {
+    if (!callNode) return;
+    const success = await callNode.switchAudioDevice(deviceId);
+    if (success) setSelectedAudioDeviceId(deviceId);
+  }, [callNode]);
+
+  const switchVideoDevice = useCallback(async (deviceId: string) => {
+    if (!callNode) return;
+    const success = await callNode.switchVideoDevice(deviceId);
+    if (success) setSelectedVideoDeviceId(deviceId);
+  }, [callNode]);
+
+  const clearError = useCallback(() => setErrorMessage(null), []);
+
+  const upgradeCall = useCallback(async () => {
+    if (!callNode) return;
+    await callNode.upgradeCall();
+    setCallType('video');
+  }, [callNode]);
+
+  const toggleMic = useCallback(async () => {
+    if (!callNode || !localStream) return;
+    const newMutedState = !isMicMuted;
+    await callNode.toggleMic(!newMutedState);
+    setIsMicMuted(newMutedState);
+  }, [callNode, localStream, isMicMuted]);
+
+  const toggleVideo = useCallback(async () => {
+    if (!callNode) return;
+    if (localStream) {
+      if (localStream.getVideoTracks().length > 0) {
+        const newMutedState = !isVideoMuted;
+        await callNode.toggleCamera(!newMutedState);
+        setIsVideoMuted(newMutedState);
+      } else {
+        // One-way video case: we are in a video call but our camera is off (no track).
+        // Clicking toggle video should add our camera track via requestUpgradeCall.
+        // This avoids sending the UPGRADE_CALL signal to the backend again.
+        await callNode.requestUpgradeCall(true);
+        setIsVideoMuted(false);
+      }
+    }
+  }, [callNode, localStream, isVideoMuted]);
+
+  const value = {
+    callNode,
+    callStatus,
+    localStream,
+    remoteStream,
+    callType,
+    callerInfo,
+    receiverInfo,
+    isIncoming,
+    createCall,
+    acceptCall,
+    rejectCall,
+    endCall,
+    toggleMic,
+    toggleVideo,
+    isMicMuted,
+    isVideoMuted,
+    audioDevices,
+    videoDevices,
+    selectedAudioDeviceId,
+    selectedVideoDeviceId,
+    isScreenSharing,
+    errorMessage,
+    toggleScreenShare,
+    switchAudioDevice,
+    switchVideoDevice,
+    clearError,
+    isRemoteMicMuted,
+    isRemoteVideoMuted,
+    upgradeCall,
+    callDuration,
+  };
+
+  return (
+    <ErmisCallContext.Provider value={value}>
+      {children}
+    </ErmisCallContext.Provider>
+  );
+};
+
+ErmisCallProvider.displayName = 'ErmisCallProvider';