@ermis-network/ermis-chat-react 1.0.9 → 2.0.0

package/src/components/CreateChannelModal.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { Modal } from './Modal';
+import { Modal as DefaultModal } from './Modal';
 import { UserPicker } from './UserPicker';
 import { Avatar } from './Avatar';
 import { useChatClient } from '../hooks/useChatClient';
+import { useChatComponents } from '../context/ChatComponentsContext';
+import { markChannelAsFullyQueried } from '../hooks/useChannelMessages';
 import type { CreateChannelModalProps, UserPickerUser } from '../types';
 import { isDirectChannel } from '../channelTypeUtils';
 
@@ -26,8 +28,18 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   createButtonLabel = 'Create',
   creatingButtonLabel = 'Creating...',
   messageButtonLabel = 'Message',
+  nextButtonLabel = 'Next',
+  backButtonLabel = 'Back',
+  emptyStateLabel = 'No users found',
+  TabsComponent,
+  FooterComponent,
+  GroupFieldsComponent,
+  SearchInputComponent,
+  SelectedBoxComponent,
 }) => {
   const { client, setActiveChannel } = useChatClient();
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
   const currentUserId = client?.userID;
 
   /* ---------- State ---------- */
@@ -54,9 +66,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
     return Object.values(client.activeChannels).some((ch: any) => {
       if (isDirectChannel(ch) && ch.state?.members) {
         const membersList = Object.keys(ch.state.members);
-        return membersList.length === 2 && 
-               membersList.includes(currentUserId) && 
-               membersList.includes(targetUserId);
+        return membersList.length === 2 &&
+          membersList.includes(currentUserId) &&
+          membersList.includes(targetUserId);
       }
       return false;
     });
@@ -90,9 +102,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         const existingChannel = Object.values(client.activeChannels).find((ch: any) => {
           if (isDirectChannel(ch) && ch.state?.members) {
             const membersList = Object.keys(ch.state.members);
-            return membersList.length === 2 && 
-                   membersList.includes(currentUserId) && 
-                   membersList.includes(targetUserId);
+            return membersList.length === 2 &&
+              membersList.includes(currentUserId) &&
+              membersList.includes(targetUserId);
           }
           return false;
         });
@@ -114,7 +126,8 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         const response = (await createdChannel.create()) as any;
         if (response?.channel?.id) {
           createdChannel = client.channel('messaging', response.channel.id);
-          await createdChannel.watch();
+          await createdChannel.watch({ messages: { limit: 25, include_hidden_messages: true } });
+          markChannelAsFullyQueried(createdChannel.cid);
         }
       } else {
         // Group Channel
@@ -138,7 +151,8 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         const response = (await createdChannel.create()) as any;
         if (response?.channel?.id) {
           createdChannel = client.channel('team', response.channel.id);
-          await createdChannel.watch();
+          await createdChannel.watch({ messages: { limit: 25, include_hidden_messages: true } });
+          markChannelAsFullyQueried(createdChannel.cid);
         }
       }
 
@@ -169,7 +183,40 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   }, [selectedUsers, tab, name, step]);
 
   let footer;
-  if (tab === 'messaging') {
+  if (FooterComponent) {
+    footer = (
+      <FooterComponent
+        tab={tab}
+        step={step}
+        onCancel={() => {
+          if (tab === 'team' && step === 2) {
+            setError(null);
+            setStep(1);
+          } else {
+            onClose();
+          }
+        }}
+        onNext={() => {
+          setError(null);
+          setStep(2);
+        }}
+        onBack={() => {
+          setError(null);
+          setStep(1);
+        }}
+        onCreate={handleCreate}
+        isCreating={isCreating}
+        isValid={isValid}
+        hasExistingDirectChannel={hasExistingDirectChannel}
+        cancelButtonLabel={cancelButtonLabel}
+        createButtonLabel={createButtonLabel}
+        creatingButtonLabel={creatingButtonLabel}
+        messageButtonLabel={messageButtonLabel}
+        nextButtonLabel={nextButtonLabel}
+        backButtonLabel={backButtonLabel}
+      />
+    );
+  } else if (tab === 'messaging') {
     footer = (
       <div className="ermis-create-channel__footer">
         <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={onClose} disabled={isCreating}>{cancelButtonLabel}</button>
@@ -183,14 +230,14 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
       <div className="ermis-create-channel__footer">
         <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={onClose} disabled={isCreating}>{cancelButtonLabel}</button>
         <button className="ermis-create-channel__btn ermis-create-channel__btn--create" onClick={() => { setError(null); setStep(2); }} disabled={isCreating || !isValid}>
-          Next
+          {nextButtonLabel}
         </button>
       </div>
     );
   } else if (tab === 'team' && step === 2) {
     footer = (
       <div className="ermis-create-channel__footer">
-        <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={() => { setError(null); setStep(1); }} disabled={isCreating}>Back</button>
+        <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={() => { setError(null); setStep(1); }} disabled={isCreating}>{backButtonLabel}</button>
         <button className="ermis-create-channel__btn ermis-create-channel__btn--create" onClick={handleCreate} disabled={isCreating || !isValid}>
           {isCreating ? creatingButtonLabel : createButtonLabel}
         </button>
@@ -203,94 +250,125 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
       <div className="ermis-create-channel__body">
 
         {/* Type Toggle */}
-        <div className="ermis-create-channel__tabs">
-          <button
-            className={`ermis-create-channel__tab ${tab === 'messaging' ? 'ermis-create-channel__tab--active' : ''}`}
-            onClick={() => {
-              setTab('messaging');
-              setStep(1);
-              setSelectedUsers([]);
-              setError(null);
-            }}
-            disabled={isCreating}
-          >
-            {directTabLabel}
-          </button>
-          <button
-            className={`ermis-create-channel__tab ${tab === 'team' ? 'ermis-create-channel__tab--active' : ''}`}
-            onClick={() => {
-              setTab('team');
+        {TabsComponent ? (
+          <TabsComponent
+            activeTab={tab}
+            onTabChange={(t) => {
+              setTab(t);
               setStep(1);
               setSelectedUsers([]);
               setError(null);
             }}
             disabled={isCreating}
-          >
-            {groupTabLabel}
-          </button>
-        </div>
+            directTabLabel={directTabLabel}
+            groupTabLabel={groupTabLabel}
+          />
+        ) : (
+          <div className="ermis-create-channel__tabs">
+            <button
+              className={`ermis-create-channel__tab ${tab === 'messaging' ? 'ermis-create-channel__tab--active' : ''}`}
+              onClick={() => {
+                setTab('messaging');
+                setStep(1);
+                setSelectedUsers([]);
+                setError(null);
+              }}
+              disabled={isCreating}
+            >
+              {directTabLabel}
+            </button>
+            <button
+              className={`ermis-create-channel__tab ${tab === 'team' ? 'ermis-create-channel__tab--active' : ''}`}
+              onClick={() => {
+                setTab('team');
+                setStep(1);
+                setSelectedUsers([]);
+                setError(null);
+              }}
+              disabled={isCreating}
+            >
+              {groupTabLabel}
+            </button>
+          </div>
+        )}
 
         {/* Group Specific Fields - Step 1 */}
         {tab === 'team' && step === 1 && (
-          <>
-
-            <div className="ermis-create-channel__field">
-              <label className="ermis-create-channel__label">{groupNameLabel} <span style={{ color: 'var(--ermis-error)' }}>*</span></label>
-              <input
-                className="ermis-create-channel__input"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder={groupNamePlaceholder}
-                disabled={isCreating}
-                maxLength={100}
-              />
-            </div>
-
-            <div className="ermis-create-channel__field">
-              <label className="ermis-create-channel__label">{groupDescriptionLabel}</label>
-              <textarea
-                className="ermis-create-channel__textarea"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                placeholder={groupDescriptionPlaceholder}
-                disabled={isCreating}
-                maxLength={500}
-                rows={2}
-              />
-            </div>
-
-            <div className="ermis-create-channel__field ermis-create-channel__field--toggle">
-              <label className="ermis-create-channel__label">{groupPublicLabel}</label>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={isPublic}
-                className={`ermis-create-channel__toggle ${isPublic ? 'ermis-create-channel__toggle--on' : ''}`}
-                onClick={() => setIsPublic(v => !v)}
-                disabled={isCreating}
-              >
-                <span className="ermis-create-channel__toggle-thumb" />
-              </button>
-            </div>
-          </>
+          GroupFieldsComponent ? (
+            <GroupFieldsComponent
+              name={name}
+              onNameChange={setName}
+              description={description}
+              onDescriptionChange={setDescription}
+              isPublic={isPublic}
+              onPublicChange={setIsPublic}
+              disabled={isCreating}
+              groupNameLabel={groupNameLabel}
+              groupNamePlaceholder={groupNamePlaceholder}
+              groupDescriptionLabel={groupDescriptionLabel}
+              groupDescriptionPlaceholder={groupDescriptionPlaceholder}
+              groupPublicLabel={groupPublicLabel}
+            />
+          ) : (
+            <>
+              <div className="ermis-create-channel__field">
+                <label className="ermis-create-channel__label">{groupNameLabel} <span style={{ color: 'var(--ermis-error)' }}>*</span></label>
+                <input
+                  className="ermis-create-channel__input"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder={groupNamePlaceholder}
+                  disabled={isCreating}
+                  maxLength={100}
+                />
+              </div>
+
+              <div className="ermis-create-channel__field">
+                <label className="ermis-create-channel__label">{groupDescriptionLabel}</label>
+                <textarea
+                  className="ermis-create-channel__textarea"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder={groupDescriptionPlaceholder}
+                  disabled={isCreating}
+                  maxLength={500}
+                  rows={2}
+                />
+              </div>
+
+              <div className="ermis-create-channel__field ermis-create-channel__field--toggle">
+                <label className="ermis-create-channel__label">{groupPublicLabel}</label>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={isPublic}
+                  className={`ermis-create-channel__toggle ${isPublic ? 'ermis-create-channel__toggle--on' : ''}`}
+                  onClick={() => setIsPublic(v => !v)}
+                  disabled={isCreating}
+                >
+                  <span className="ermis-create-channel__toggle-thumb" />
+                </button>
+              </div>
+            </>
+          )
         )}
 
         {/* User Selection - Step 2 (Group) or Step 1 (Messaging) */}
         {((tab === 'team' && step === 2) || tab === 'messaging') && (
-          <div className="ermis-create-channel__users">
-            <div className="ermis-create-channel__users-title">
-              Members <span style={{ color: 'var(--ermis-error)' }}>*</span>
-            </div>
-            <div style={{ height: tab === 'team' ? '280px' : '400px', display: 'flex', flexDirection: 'column' }}>
-              <UserPicker
-                mode={tab === 'messaging' ? 'radio' : 'checkbox'}
-                onSelectionChange={setSelectedUsers}
-                initialSelectedUsers={selectedUsers}
-                AvatarComponent={AvatarComponent}
-                UserItemComponent={UserItemComponent as any}
-                searchPlaceholder={userSearchPlaceholder}
-              />
-            </div>
+          <div className={`ermis-create-channel__users ermis-create-channel__users--${tab}`}>
+            <UserPicker
+              key={tab}
+              mode={tab === 'messaging' ? 'radio' : 'checkbox'}
+              friendsOnly={tab === 'team'}
+              onSelectionChange={setSelectedUsers}
+              initialSelectedUsers={selectedUsers}
+              emptyText={emptyStateLabel}
+              AvatarComponent={AvatarComponent}
+              UserItemComponent={UserItemComponent as any}
+              SearchInputComponent={SearchInputComponent as any}
+              SelectedBoxComponent={SelectedBoxComponent as any}
+              searchPlaceholder={userSearchPlaceholder}
+            />
           </div>
         )}
 

package/src/components/Dropdown.tsx

@@ -9,22 +9,7 @@ export const closeAllDropdowns = () => {
   document.dispatchEvent(new CustomEvent(CLOSE_ALL_EVENT));
 };
 
-export interface DropdownProps {
-  /** Whether the dropdown is open */
-  isOpen: boolean;
-  /** Rect from getBoundingClientRect() of the anchor element */
-  anchorRect: DOMRect | null;
-  /** Callback when dropdown requests to close (e.g., click outside, scroll, Escape) */
-  onClose: () => void;
-  /** Dropdown menu content */
-  children: React.ReactNode;
-  /** Horizontal alignment relative to the anchor. Default: 'left' */
-  align?: 'left' | 'right';
-  /** Optional custom CSS class for the container */
-  className?: string;
-  /** Optional custom CSS style for the container */
-  style?: React.CSSProperties;
-}
+import type { DropdownProps } from '../types';
 
 export const Dropdown: React.FC<DropdownProps> = ({
   isOpen,

package/src/components/EditPreview.tsx

@@ -40,6 +40,7 @@ function getAttachmentSummary(attachments: any[]): string {
 export const EditPreview: React.FC<{
   message: FormatMessageResponse;
   onDismiss: () => void;
+  editingMessageLabel?: string;
 }> = React.memo(({
   message,
   onDismiss,

package/src/components/ErmisCallProvider.tsx

@@ -36,6 +36,9 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isRemoteMicMuted, setIsRemoteMicMuted] = useState(false);
   const [isRemoteVideoMuted, setIsRemoteVideoMuted] = useState(false);
+  const [isAccepting, setIsAccepting] = useState(false);
+  const [isRejecting, setIsRejecting] = useState(false);
+  const [isEnding, setIsEnding] = useState(false);
 
   // Call duration timer (C7 — exposed via context)
   const [callDuration, setCallDuration] = useState(0);
@@ -59,9 +62,15 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
   useEffect(() => {
     if (callStatus === CallStatus.CONNECTED) {
       startTimer();
+      setIsAccepting(false);
     } else {
       stopTimer();
     }
+    if (!callStatus) {
+      setIsAccepting(false);
+      setIsRejecting(false);
+      setIsEnding(false);
+    }
     return () => stopTimer();
   }, [callStatus, startTimer, stopTimer]);
 
@@ -92,12 +101,25 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
     node.onDeviceChange = (audio, video) => {
       setAudioDevices(audio);
       setVideoDevices(video);
+      const selected = node.getSelectedDevices();
+      if (selected.audioDevice) setSelectedAudioDeviceId(selected.audioDevice.deviceId);
+      else if (audio.length > 0) setSelectedAudioDeviceId(audio[0].deviceId);
+      
+      if (selected.videoDevice) setSelectedVideoDeviceId(selected.videoDevice.deviceId);
+      else if (video.length > 0) setSelectedVideoDeviceId(video[0].deviceId);
     };
+
     node.onScreenShareChange = (isSharing: boolean) => setIsScreenSharing(isSharing);
 
     node.getDevices().then(({ audioDevices: a, videoDevices: v }) => {
       setAudioDevices(a);
       setVideoDevices(v);
+      const selected = node.getSelectedDevices();
+      if (selected.audioDevice) setSelectedAudioDeviceId(selected.audioDevice.deviceId);
+      else if (a.length > 0) setSelectedAudioDeviceId(a[0].deviceId);
+      
+      if (selected.videoDevice) setSelectedVideoDeviceId(selected.videoDevice.deviceId);
+      else if (v.length > 0) setSelectedVideoDeviceId(v[0].deviceId);
     });
 
     node.onCallStatus = (status: string | null) => {
@@ -152,35 +174,56 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
     if (!callNode) return;
     setCallType(type);
     setIsIncoming(false);
-    setCallStatus(CallStatus.RINGING);
+    
+    // Tận dụng Local Cache: Phân giải thông tin đồng bộ ngay trước khi bật modal
+    callNode.prefillUserInfo(cid);
+    setCallerInfo(callNode.callerInfo);
+    setReceiverInfo(callNode.receiverInfo);
+
+    setCallStatus(CallStatus.PREPARING);
     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?.();
+    if (!callNode) return;
+    setIsAccepting(true);
+    try {
+      await callNode.acceptCall();
+      onCallAccepted?.();
+    } catch (e) {
+      setIsAccepting(false);
+    }
   }, [callNode, onCallAccepted]);
 
   const rejectCall = useCallback(async () => {
-    if (callNode) await callNode.rejectCall();
-    setCallStatus('');
-    setIsIncoming(false);
-    // C1: Lifecycle callback — call rejected
-    onCallRejected?.();
+    if (!callNode) return;
+    setIsRejecting(true);
+    try {
+      await callNode.rejectCall();
+      setCallStatus('');
+      setIsIncoming(false);
+      onCallRejected?.();
+    } finally {
+      setIsRejecting(false);
+    }
   }, [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);
+    if (!callNode) return;
+    setIsEnding(true);
+    try {
+      await callNode.endCall();
+      const duration = callDuration;
+      setCallStatus('');
+      setIsIncoming(false);
+      setLocalStream(null);
+      setRemoteStream(null);
+      onCallEnd?.(duration);
+    } finally {
+      setIsEnding(false);
+    }
   }, [callNode, callDuration, onCallEnd]);
 
   const toggleScreenShare = useCallback(async () => {
@@ -205,6 +248,14 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
   }, [callNode]);
 
   const clearError = useCallback(() => setErrorMessage(null), []);
+  const resetCall = useCallback(() => {
+    if (callNode) callNode.destroy();
+    setCallStatus('');
+    setErrorMessage(null);
+    setIsIncoming(false);
+    setCallDuration(0);
+    setCallType('audio');
+  }, [callNode]);
 
   const upgradeCall = useCallback(async () => {
     if (!callNode) return;
@@ -267,6 +318,10 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
     isRemoteVideoMuted,
     upgradeCall,
     callDuration,
+    isAccepting,
+    isRejecting,
+    isEnding,
+    resetCall,
   };
 
   return (

package/src/components/ErmisCallUI.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useCallContext } from '../hooks/useCallContext';
-import { Modal } from './Modal';
+import { Modal as DefaultModal } from './Modal';
 import { Avatar } from './Avatar';
+import { useChatComponents } from '../context/ChatComponentsContext';
 import { CallStatus } from '@ermis-network/ermis-chat-sdk';
 import type { ErmisCallUIProps } from '../types';
 
@@ -82,8 +83,14 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
     isRemoteMicMuted,
     upgradeCall,
     callDuration,
+    isAccepting,
+    isRejecting,
+    isEnding,
   } = useCallContext();
 
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
+
   const localVideoRef = useRef<HTMLVideoElement>(null);
   const remoteVideoRef = useRef<HTMLVideoElement>(null);
   const remoteAudioRef = useRef<HTMLAudioElement>(null);
@@ -259,6 +266,7 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
           isVideoMuted={isVideoMuted}
           isScreenSharing={isScreenSharing}
           isFullscreen={isFullscreen}
+          isEnding={isEnding}
           audioDevices={audioDevices}
           videoDevices={videoDevices}
           selectedAudioDeviceId={selectedAudioDeviceId}
@@ -341,15 +349,17 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
         )}
 
         {/* Fullscreen */}
-        <div className="ermis-call-ui__action-group">
-          <button
-            onClick={toggleFullscreen}
-            className="ermis-call-ui__control-btn"
-            data-tooltip={isFullscreen ? exitFullscreenTitle : fullscreenTitle}
-          >
-            {isFullscreen ? <FinalExitFullscreenIcon /> : <FinalFullscreenIcon />}
-          </button>
-        </div>
+        {callType === 'video' && (
+          <div className="ermis-call-ui__action-group">
+            <button
+              onClick={toggleFullscreen}
+              className="ermis-call-ui__control-btn"
+              data-tooltip={isFullscreen ? exitFullscreenTitle : fullscreenTitle}
+            >
+              {isFullscreen ? <FinalExitFullscreenIcon /> : <FinalFullscreenIcon />}
+            </button>
+          </div>
+        )}
 
         {/* Separator before end call */}
         <div className="ermis-call-ui__controls-separator" />
@@ -357,10 +367,11 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
         {/* End Call */}
         <button
           onClick={endCall}
+          disabled={isEnding}
           className="ermis-call-ui__control-btn ermis-call-ui__control-btn--danger"
           data-tooltip={endCallLabel}
         >
-          <FinalPhoneIcon />
+          {isEnding ? <div className="ermis-call-ui__spinner" /> : <FinalPhoneIcon />}
         </button>
       </div>
     );
@@ -388,6 +399,9 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
           endCallLabel={endCallLabel}
           audioCallBadgeLabel={audioCallBadgeLabel}
           videoCallBadgeLabel={videoCallBadgeLabel}
+          isAccepting={isAccepting}
+          isRejecting={isRejecting}
+          isEnding={isEnding}
         />
       );
     }
@@ -425,18 +439,24 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
               <div className="ermis-call-ui__ringing-action">
                 <button
                   onClick={rejectCall}
+                  disabled={isRejecting}
                   className="ermis-call-ui__action-circle ermis-call-ui__action-circle--reject"
                 >
-                  <FinalPhoneIcon />
+                  {isRejecting ? <div className="ermis-call-ui__spinner" /> : <FinalPhoneIcon />}
                 </button>
                 <span className="ermis-call-ui__action-label">{rejectCallLabel}</span>
               </div>
               <div className="ermis-call-ui__ringing-action">
                 <button
                   onClick={acceptCall}
+                  disabled={isAccepting}
                   className="ermis-call-ui__action-circle ermis-call-ui__action-circle--accept"
                 >
-                  {callType === 'video' ? <FinalVideoIcon /> : <FinalPhoneIcon />}
+                  {isAccepting ? (
+                    <div className="ermis-call-ui__spinner" />
+                  ) : (
+                    callType === 'video' ? <FinalVideoIcon /> : <FinalPhoneIcon />
+                  )}
                 </button>
                 <span className="ermis-call-ui__action-label">{acceptCallLabel}</span>
               </div>
@@ -445,9 +465,10 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
             <div className="ermis-call-ui__ringing-action">
               <button
                 onClick={endCall}
+                disabled={isEnding}
                 className="ermis-call-ui__action-circle ermis-call-ui__action-circle--reject"
               >
-                <FinalPhoneIcon />
+                {isEnding ? <div className="ermis-call-ui__spinner" /> : <FinalPhoneIcon />}
               </button>
               <span className="ermis-call-ui__action-label">{endCallLabel}</span>
             </div>
@@ -492,12 +513,14 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
                 className="ermis-call-ui__video-local-stream"
               />
             </div>
-            {/* Remote mic muted indicator */}
-            {isRemoteMicMuted && (
-              <div className="ermis-call-ui__remote-muted-badge">
-                <FinalMicOffIcon />
-              </div>
-            )}
+            {/* Call status bar: mic-muted indicator + duration timer */}
+            <div className="ermis-call-ui__video-timer">
+              {isRemoteMicMuted && (
+                <span className="ermis-call-ui__video-timer-mic"><FinalMicOffIcon /></span>
+              )}
+              <span className="ermis-call-ui__active-status-dot" />
+              <span>{formatDuration(callDuration)}</span>
+            </div>
             {/* Glassmorphism controls overlay */}
             <div className="ermis-call-ui__video-controls-overlay">
               {renderControls()}