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

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { FormatMessageResponse, MessageLabel, Attachment, Channel, ChannelFilters, ChannelSort, ChannelQueryOptions } from '@ermis-network/ermis-chat-sdk';
+import type { FormatMessageResponse, MessageLabel, Attachment, Channel, ChannelFilters, ChannelSort, ChannelQueryOptions, UserCallInfo } from '@ermis-network/ermis-chat-sdk';
 import type { ErmisChat } from '@ermis-network/ermis-chat-sdk';
 
 /* ----------------------------------------------------------
@@ -43,6 +43,8 @@ export type ChatContextValue = {
   /** Message ID to jump/scroll to (set by search, cleared after scroll) */
   jumpToMessageId: string | null;
   setJumpToMessageId: (id: string | null) => void;
+  /** Indicates whether the direct call feature is enabled */
+  enableCall?: boolean;
 };
 
 export type ChatProviderProps = {
@@ -50,6 +52,185 @@ export type ChatProviderProps = {
   children: React.ReactNode;
   /** Initial theme, defaults to 'dark' */
   initialTheme?: Theme;
+  /** Enable direct call feature (Audio/Video). If enabled, configures internal CallProvider */
+  enableCall?: boolean;
+  /** Provide session ID to be used for call nodes */
+  callSessionId?: string;
+  /** Override the WebAssembly module path for Call Nodes */
+  callWasmPath?: string;
+  /** Override the relay URL for Call Nodes */
+  callRelayUrl?: string;
+  /** Custom Component to completely replace the default Call UI */
+  CallUIComponent?: React.ComponentType;
+  /** Path to the mp3 file for incoming call ringing */
+  incomingCallAudioPath?: string;
+  /** Path to the mp3 file for outgoing call ringing */
+  outgoingCallAudioPath?: string;
+  /** Called when a call is initiated by the local user */
+  onCallStart?: (callType: 'audio' | 'video', cid: string) => void;
+  /** Called when a call ends (includes duration in seconds) */
+  onCallEnd?: (duration: number) => void;
+  /** Called when a call error occurs */
+  onCallError?: (error: string) => void;
+  /** Called when an incoming call is received */
+  onIncomingCall?: (callerInfo: UserCallInfo) => void;
+  /** Called when the local user accepts an incoming call */
+  onCallAccepted?: () => void;
+  /** Called when the local user rejects an incoming call */
+  onCallRejected?: () => void;
+};
+
+/* ----------------------------------------------------------
+   Call Provider types
+   ---------------------------------------------------------- */
+export interface ErmisCallProviderProps {
+  children: React.ReactNode;
+  client: ErmisChat;
+  sessionId: string;
+  wasmPath?: string;
+  relayUrl?: string;
+  /** Called when a call is initiated by the local user */
+  onCallStart?: (callType: 'audio' | 'video', cid: string) => void;
+  /** Called when a call ends (includes duration in seconds) */
+  onCallEnd?: (duration: number) => void;
+  /** Called when a call error occurs */
+  onCallError?: (error: string) => void;
+  /** Called when an incoming call is received */
+  onIncomingCall?: (callerInfo: UserCallInfo) => void;
+  /** Called when the local user accepts an incoming call */
+  onCallAccepted?: () => void;
+  /** Called when the local user rejects an incoming call */
+  onCallRejected?: () => void;
+}
+
+/* ----------------------------------------------------------
+   Call UI types
+   ---------------------------------------------------------- */
+export type ErmisCallUIProps = {
+  /** Additional CSS class name */
+  className?: string;
+  incomingCallTitle?: (callType: string) => string;
+  outgoingCallTitle?: (callType: string) => string;
+  ongoingCallTitle?: (callType: string) => string;
+  isCallingYouLabel?: string;
+  ringingLabel?: string;
+  rejectCallLabel?: string;
+  acceptCallLabel?: string;
+  endCallLabel?: string;
+  cancelLabel?: string;
+  toggleMicTitle?: string;
+  toggleVideoTitle?: string;
+  shareScreenTitle?: string;
+  stopScreenShareTitle?: string;
+  /** Label shown during an active call (default: "Connected") */
+  connectedLabel?: string;
+  /** Label for the audio call type badge (default: "Audio Call") */
+  audioCallBadgeLabel?: string;
+  /** Label for the video call type badge (default: "Video Call") */
+  videoCallBadgeLabel?: string;
+  /** Tooltip for the fullscreen button (default: "Fullscreen") */
+  fullscreenTitle?: string;
+  /** Tooltip for the exit fullscreen button (default: "Exit Fullscreen") */
+  exitFullscreenTitle?: string;
+  /** Tooltip for the upgrade call button (default: "Request Video Upgrade") */
+  upgradeCallTitle?: string;
+  /** If true, suppress incoming call UI — useful for "Do Not Disturb" mode */
+  suppressIncomingCalls?: boolean;
+  /** Called on each second tick of the call duration timer */
+  onCallDurationChange?: (seconds: number) => void;
+  AvatarComponent?: React.ComponentType<AvatarProps>;
+  MicIcon?: React.ComponentType;
+  MicOffIcon?: React.ComponentType;
+  VideoIcon?: React.ComponentType;
+  VideoOffIcon?: React.ComponentType;
+  PhoneIcon?: React.ComponentType;
+  ScreenShareIcon?: React.ComponentType;
+  ScreenShareOffIcon?: React.ComponentType;
+  FullscreenIcon?: React.ComponentType;
+  ExitFullscreenIcon?: React.ComponentType;
+  /** Custom icon for the upgrade call button (audio → video) */
+  UpgradeCallIcon?: React.ComponentType;
+  incomingCallAudioPath?: string;
+  outgoingCallAudioPath?: string;
+  /** Replace the entire Ringing state view */
+  RingingComponent?: React.ComponentType<ErmisCallRingingProps>;
+  /** Replace the entire Connected Audio state view */
+  ConnectedAudioComponent?: React.ComponentType<ErmisCallConnectedAudioProps>;
+  /** Replace the entire Connected Video state view */
+  ConnectedVideoComponent?: React.ComponentType<ErmisCallConnectedVideoProps>;
+  /** Replace the entire Error state view */
+  ErrorComponent?: React.ComponentType<ErmisCallErrorProps>;
+  /** Replace the controls bar */
+  ControlsBarComponent?: React.ComponentType<ErmisCallControlsBarProps>;
+};
+
+/* ----------------------------------------------------------
+   Call sub-component prop types (for component slots)
+   ---------------------------------------------------------- */
+
+/** Props for the Ringing state view */
+export type ErmisCallRingingProps = {
+  peerInfo?: UserCallInfo;
+  callType: string;
+  isIncoming: boolean;
+  acceptCall: () => Promise<void>;
+  rejectCall: () => Promise<void>;
+  endCall: () => Promise<void>;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+  isCallingYouLabel: string;
+  ringingLabel: string;
+  rejectCallLabel: string;
+  acceptCallLabel: string;
+  endCallLabel: string;
+  audioCallBadgeLabel: string;
+  videoCallBadgeLabel: string;
+};
+
+/** Props for the Connected Audio state view */
+export type ErmisCallConnectedAudioProps = {
+  peerInfo?: UserCallInfo;
+  callDuration: number;
+  isRemoteMicMuted: boolean;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+  connectedLabel: string;
+  renderControls: () => React.ReactNode;
+};
+
+/** Props for the Connected Video state view */
+export type ErmisCallConnectedVideoProps = {
+  localVideoRef: React.RefObject<HTMLVideoElement | null>;
+  remoteVideoRef: React.RefObject<HTMLVideoElement | null>;
+  isRemoteMicMuted: boolean;
+  renderControls: () => React.ReactNode;
+};
+
+/** Props for the Error state view */
+export type ErmisCallErrorProps = {
+  errorMessage: string;
+  clearError: () => void;
+  cancelLabel: string;
+  PhoneIcon: React.ComponentType;
+};
+
+/** Props for the Controls bar */
+export type ErmisCallControlsBarProps = {
+  callType: string;
+  toggleMic: () => void;
+  toggleVideo: () => void;
+  toggleScreenShare: () => Promise<void>;
+  toggleFullscreen: () => void;
+  upgradeCall: () => Promise<void>;
+  endCall: () => Promise<void>;
+  isMicMuted: boolean;
+  isVideoMuted: boolean;
+  isScreenSharing: boolean;
+  isFullscreen: boolean;
+  audioDevices: MediaDeviceInfo[];
+  videoDevices: MediaDeviceInfo[];
+  selectedAudioDeviceId: string;
+  selectedVideoDeviceId: string;
+  switchAudioDevice: (id: string) => Promise<void>;
+  switchVideoDevice: (id: string) => Promise<void>;
 };
 
 /* ----------------------------------------------------------
@@ -96,6 +277,16 @@ export type ChannelHeaderProps = {
   renderRight?: (channel: Channel, actionDisabled?: boolean) => React.ReactNode;
   /** Override default title rendering */
   renderTitle?: (channel: Channel) => React.ReactNode;
+  /** Custom renderer for Audio Call button */
+  renderAudioCallButton?: (onClick: () => void, disabled: boolean) => React.ReactNode;
+  /** Custom renderer for Video Call button */
+  renderVideoCallButton?: (onClick: () => void, disabled: boolean) => React.ReactNode;
+  /** I18n label for the audio call button tooltip (default: "Audio Call") */
+  audioCallTitle?: string;
+  /** I18n label for the video call button tooltip (default: "Video Call") */
+  videoCallTitle?: string;
+  /** Custom component to show when a call is active (e.g. "Call in progress" badge) */
+  CallBadgeComponent?: React.ComponentType<{ callType: string }>;
 };
 
 /** Data passed to a fully custom HeaderComponent */
@@ -591,6 +782,7 @@ export interface ModalProps {
   footer?: React.ReactNode;
   maxWidth?: string;
   hideCloseButton?: boolean;
+  closeOnOutsideClick?: boolean;
 }
 
 /* ----------------------------------------------------------