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

package/src/hooks/useScrollToMessage.ts

@@ -4,6 +4,7 @@ import { formatMessage } from '@ermis-network/ermis-chat-sdk';
 import type { VListHandle } from 'virtua';
 import { dedupMessages } from './useLoadMessages';
 import { useChatClient } from './useChatClient';
+import { getDateKey } from '../utils';
 
 export type UseScrollToMessageOptions = {
   vlistRef: React.RefObject<VListHandle | null>;
@@ -23,6 +24,23 @@ export type UseScrollToMessageReturn = {
   jumpToLatest: () => void;
 };
 
+function getRenderedMessageIndex(messages: FormatMessageResponse[], messageId: string): number {
+  let renderedIndex = 0;
+
+  for (let i = 0; i < messages.length; i += 1) {
+    const message = messages[i];
+    const prevMessage = i > 0 ? messages[i - 1] : null;
+    const showDateSeparator =
+      !prevMessage || getDateKey(message.created_at) !== getDateKey(prevMessage.created_at);
+
+    if (showDateSeparator) renderedIndex += 1;
+    if (message.id === messageId) return renderedIndex;
+    renderedIndex += 1;
+  }
+
+  return -1;
+}
+
 export function useScrollToMessage({
   vlistRef,
   messagesRef,
@@ -60,7 +78,14 @@ export function useScrollToMessage({
       // Case 1: message is already in current list
       const idx = messagesRef.current.findIndex((m) => m.id === messageId);
       if (idx !== -1) {
-        vlistRef.current?.scrollToIndex(idx, { align: 'center', smooth: true });
+        const renderedIdx = getRenderedMessageIndex(messagesRef.current, messageId);
+        if (renderedIdx !== -1) {
+          jumpingRef.current = true;
+          vlistRef.current?.scrollToIndex(renderedIdx, { align: 'center', smooth: true });
+          setTimeout(() => {
+            jumpingRef.current = false;
+          }, 500);
+        }
         highlight(messageId);
         return;
       }
@@ -93,14 +118,14 @@ export function useScrollToMessage({
 
         // Wait for VList to render, then jump while hidden, then fade in
         setTimeout(() => {
-          const newIdx = unique.findIndex((m: any) => m.id === messageId);
-          if (newIdx === -1) {
+          const renderedIdx = getRenderedMessageIndex(unique, messageId);
+          if (renderedIdx === -1) {
             jumpingRef.current = false;
             if (vlistEl) vlistEl.style.opacity = '1';
             return;
           }
 
-          vlistRef.current?.scrollToIndex(newIdx, { align: 'center' });
+          vlistRef.current?.scrollToIndex(renderedIdx, { align: 'center' });
 
           setTimeout(() => {
             if (vlistEl) {

package/src/hooks/useStickerPicker.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+export type UseStickerPickerOptions = {
+  activeChannel?: Channel | null;
+  stickerIframeUrl?: string;
+};
+
+export function useStickerPicker({
+  activeChannel,
+  stickerIframeUrl = 'https://sticker.ermis.network',
+}: UseStickerPickerOptions) {
+  const [stickerPickerOpen, setStickerPickerOpen] = useState(false);
+
+  const toggleStickerPicker = useCallback(() => {
+    setStickerPickerOpen((prev) => !prev);
+  }, []);
+
+  const closeStickerPicker = useCallback(() => {
+    setStickerPickerOpen(false);
+  }, []);
+
+  const handleStickerSend = useCallback(
+    async (stickerUrl: string) => {
+      if (!activeChannel) return;
+      try {
+        await activeChannel.sendMessage({
+          text: '',
+          attachments: [],
+          sticker_url: stickerUrl,
+        });
+        setStickerPickerOpen(false);
+      } catch (error) {
+        console.error('Failed to send sticker', error);
+      }
+    },
+    [activeChannel],
+  );
+
+  useEffect(() => {
+    if (!stickerPickerOpen) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const stickerUrl = event.data?.data?.content?.url;
+      if (!stickerUrl || typeof stickerUrl !== 'string') return;
+      const fullUrl = `${stickerIframeUrl}/${stickerUrl}`;
+      handleStickerSend(fullUrl);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [stickerPickerOpen, stickerIframeUrl, handleStickerSend]);
+
+  return {
+    stickerPickerOpen,
+    toggleStickerPicker,
+    closeStickerPicker,
+    handleStickerSend,
+  };
+}

package/src/hooks/useTopicGroupUpdates.ts

@@ -0,0 +1,235 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
+import { isDirectChannel } from '../channelTypeUtils';
+import { getLastMessagePreview } from '../utils';
+import { SystemMessageTranslations, SignalMessageTranslations } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+
+/** Preview data for the most recent message across the topic group */
+export type LatestMessagePreview = {
+  text: React.ReactNode;
+  user: string;
+  timestamp?: string | Date;
+  /** Topic name if the message came from a sub-topic, null if from general/parent */
+  sourceName: string | null;
+};
+
+export type TopicGroupUpdatesOptions = {
+  deletedMessageLabel?: React.ReactNode;
+  stickerMessageLabel?: React.ReactNode;
+  photoMessageLabel?: React.ReactNode;
+  videoMessageLabel?: React.ReactNode;
+  voiceRecordingMessageLabel?: React.ReactNode;
+  fileMessageLabel?: React.ReactNode;
+  encryptedMessageLabel?: React.ReactNode;
+  encryptedMessageUnavailableLabel?: React.ReactNode;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+};
+
+/**
+ * Hook encapsulating realtime logic for a topic-enabled channel group.
+ *
+ * Subscribes to message and pin events on the parent channel AND all its
+ * topics to compute:
+ * - sorted topics list (pinned first, then by last activity)
+ * - aggregated unread count across parent + all topics
+ * - boolean flag indicating if any unread exists
+ * - latest message preview across parent + all topics
+ */
+export function useTopicGroupUpdates(
+  channel: Channel,
+  currentUserId?: string,
+  options?: TopicGroupUpdatesOptions
+): {
+  topics: Channel[];
+  aggregatedUnreadCount: number;
+  hasUnread: boolean;
+  updateCount: number;
+  latestMessagePreview: LatestMessagePreview | null;
+} {
+  const { client: chatClient, activeChannel } = useChatClient();
+  const [updateCount, setUpdateCount] = useState(0);
+  const bump = useCallback(() => setUpdateCount((c) => c + 1), []);
+
+  // Subscribe to realtime events on parent + all topics
+  useEffect(() => {
+    const subs: { unsubscribe: () => void }[] = [];
+    const client = channel.getClient();
+    const isTopicGroupCid = (cid?: string) => {
+      if (!cid) return false;
+      if (cid === channel.cid) return true;
+      return (channel.state?.topics || []).some((topic: Channel) => topic.cid === cid);
+    };
+    const handleE2eePreviewUpdate = (event: any) => {
+      if (isTopicGroupCid(event?.cid)) {
+        bump();
+      }
+    };
+
+    // Parent channel events
+    subs.push(channel.on('message.new', bump));
+    subs.push(channel.on('message.read', bump));
+    subs.push(channel.on('message.deleted', bump));
+    subs.push(channel.on('channel.updated', bump));
+    subs.push(channel.on('channel.topic.created', bump));
+    subs.push(channel.on('channel.pinned', bump));
+    subs.push(channel.on('channel.unpinned', bump));
+    subs.push(client.on('e2ee.message_decrypted' as any, handleE2eePreviewUpdate));
+    subs.push(client.on('e2ee.local_messages_loaded' as any, handleE2eePreviewUpdate));
+    subs.push(client.on('e2ee.post_join_sync' as any, handleE2eePreviewUpdate));
+
+    // Topic children events
+    const currentTopics = channel.state?.topics || [];
+    currentTopics.forEach((t: Channel) => {
+      subs.push(t.on('message.new', bump));
+      subs.push(t.on('message.read', bump));
+      subs.push(t.on('message.deleted', bump));
+      subs.push(t.on('channel.updated', bump));
+      subs.push(t.on('channel.deleted', bump));
+      subs.push(t.on('channel.pinned', bump));
+      subs.push(t.on('channel.unpinned', bump));
+    });
+
+    return () => {
+      subs.forEach((s) => s.unsubscribe());
+    };
+  }, [channel, channel.state?.topics, channel.state?.topics?.length, bump]);
+
+  // Helper: get sort timestamp for a channel/topic
+  const getTopicTime = (t: Channel): number => {
+    const lastMsg = t.state?.latestMessages?.slice(-1)[0];
+    if (lastMsg?.created_at) return new Date(lastMsg.created_at).getTime();
+    if (t.data?.last_message_at) return new Date(t.data.last_message_at as string | Date).getTime();
+    if (t.data?.created_at) return new Date(t.data.created_at as string | Date).getTime();
+    return 0;
+  };
+
+  // Helper: check if user is excluded from unread counting
+  const isExcludedUser = (ch: Channel): boolean => {
+    const client = ch.getClient();
+    const activeCh = client.activeChannels[ch.cid] || ch;
+    const ms = activeCh.state?.membership as Record<string, unknown> | undefined;
+    if (!ms) return false;
+    const isBannedSelf = Boolean(ms.banned);
+    
+    // Topic support: check parent channel's ban status
+    const parentCid = activeCh.data?.parent_cid as string | undefined;
+    const parentChannel = parentCid ? client.activeChannels[parentCid] : undefined;
+    const isBannedParent = Boolean(parentChannel?.state?.membership?.banned);
+    
+    const isBanned = isBannedSelf || isBannedParent;
+    const isBlocked = isDirectChannel(activeCh) && Boolean(ms.blocked);
+    const isPending = isPendingMember(ms.channel_role as string);
+    const isSkipped = isSkippedMember(ms.channel_role as string);
+    return isBanned || isBlocked || isPending || isSkipped;
+  };
+
+  // Helper: get unread count for a channel (reads from SDK state directly)
+  const getUnreadCount = (ch: Channel): number => {
+    if (!currentUserId || isExcludedUser(ch)) return 0;
+    // Primary: use the SDK's tracked unreadCount from activeChannels to avoid stale state
+    const client = ch.getClient();
+    const activeCh = client.activeChannels[ch.cid] || ch;
+    const state = activeCh.state as unknown as Record<string, unknown> | undefined;
+    const count = (state?.unreadCount as number) ?? 0;
+    return count;
+  };
+
+  // Sort topics: pinned first → last activity descending
+  const topics = useMemo(() => {
+    const allTopics = channel.state?.topics || [];
+    const client = channel.getClient();
+    const upToDateTopics = allTopics.map(t => client.activeChannels[t.cid] || t);
+    return upToDateTopics.sort((a: Channel, b: Channel) => {
+      const aPinned = a.data?.is_pinned === true;
+      const bPinned = b.data?.is_pinned === true;
+      if (aPinned && !bPinned) return -1;
+      if (!aPinned && bPinned) return 1;
+      return getTopicTime(b) - getTopicTime(a);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel.state?.topics, updateCount]);
+
+  // Aggregated unread count across parent + all topics
+  const aggregatedUnreadCount = useMemo(() => {
+    const client = channel.getClient();
+    const activeParent = client.activeChannels[channel.cid] || channel;
+    
+    // Ignore the currently active channel's unread count to match UI behavior
+    // where active channels don't show unread badges.
+    const activeChannelCid = Object.values(client.activeChannels || {}).find(c => c.state && c.cid === activeChannel?.cid)?.cid || activeChannel?.cid;
+    
+    let total = 0;
+    if (activeParent.cid !== activeChannelCid) {
+      total += getUnreadCount(activeParent);
+    }
+
+    const allTopics = channel.state?.topics || [];
+    allTopics.forEach((topic: Channel) => {
+      const activeTopic = client.activeChannels[topic.cid] || topic;
+      if (activeTopic.cid !== activeChannelCid) {
+        total += getUnreadCount(activeTopic);
+      }
+    });
+
+    return total;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel, channel.state?.topics, currentUserId, updateCount, activeChannel?.cid]);
+
+  const hasUnread = aggregatedUnreadCount > 0;
+
+  // Latest message preview across parent + all topics (Option B: prefix topic name)
+  const latestMessagePreview = useMemo((): LatestMessagePreview | null => {
+    // If banned from the main group, hide previews for all sub-items
+    if (isExcludedUser(channel)) return null;
+
+    const allChannels = [channel, ...(channel.state?.topics || [])];
+
+    let bestTime = 0;
+    let bestChannel: Channel | null = null;
+
+    for (const ch of allChannels) {
+      const time = getTopicTime(ch);
+      if (time > bestTime) {
+        bestTime = time;
+        bestChannel = ch;
+      }
+    }
+
+    if (!bestChannel) return null;
+
+    const preview = getLastMessagePreview(bestChannel, currentUserId, options);
+    if (!preview.text && !preview.user) return null;
+
+    // sourceName is non-null only when the message comes from a sub-topic (not the parent/general)
+    const isFromSubTopic = bestChannel !== channel;
+    const sourceName = isFromSubTopic ? (bestChannel.data?.name as string || null) : null;
+
+    return {
+      text: preview.text,
+      user: preview.user,
+      timestamp: preview.timestamp,
+      sourceName,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    channel,
+    channel.state?.topics,
+    currentUserId,
+    updateCount,
+    options?.deletedMessageLabel,
+    options?.stickerMessageLabel,
+    options?.photoMessageLabel,
+    options?.videoMessageLabel,
+    options?.voiceRecordingMessageLabel,
+    options?.fileMessageLabel,
+    options?.encryptedMessageLabel,
+    options?.encryptedMessageUnavailableLabel,
+    options?.systemMessageTranslations,
+    options?.signalMessageTranslations,
+  ]);
+
+  return { topics, aggregatedUnreadCount, hasUnread, updateCount, latestMessagePreview };
+}

package/src/index.ts

@@ -7,6 +7,11 @@ export type { ChatProviderProps, ChatContextValue, Theme } from './context/ChatP
 
 // Hooks
 export { useChatClient } from './hooks/useChatClient';
+export { useChatUser } from './hooks/useChatUser';
+export { useInviteChannels } from './hooks/useInviteChannels';
+export { useContactChannels } from './hooks/useContactChannels';
+export { useInviteCount } from './hooks/useInviteCount';
+export { useContactCount } from './hooks/useContactCount';
 export { useChannel } from './hooks/useChannel';
 export type { UseChannelReturn } from './hooks/useChannel';
 export { useChannelListUpdates } from './hooks/useChannelListUpdates';
@@ -17,14 +22,32 @@ export { useOnlineStatus } from './hooks/useOnlineStatus';
 export type { OnlineStatus } from './hooks/useOnlineStatus';
 export { useOnlineUsers } from './hooks/useOnlineUsers';
 export { usePendingState } from './hooks/usePendingState';
+export { usePreviewState } from './hooks/usePreviewState';
+export { useTopicGroupUpdates } from './hooks/useTopicGroupUpdates';
+export { useDragAndDrop } from './hooks/useDragAndDrop';
+export { useMessageSend } from './hooks/useMessageSend';
+export { useFileUpload } from './hooks/useFileUpload';
+export { useE2eeFileUpload } from './hooks/useE2eeFileUpload';
+export { useE2eeAttachmentRenderer } from './hooks/useE2eeAttachmentRenderer';
+export { usePendingE2eeSends } from './hooks/usePendingE2eeSends';
+export { useEmojiPicker } from './hooks/useEmojiPicker';
+export { useStickerPicker } from './hooks/useStickerPicker';
+export type { UseStickerPickerOptions } from './hooks/useStickerPicker';
+export { useChannelCapabilities } from './hooks/useChannelCapabilities';
+export { useChannelMembers, useChannelProfile } from './hooks/useChannelData';
 
 // Components
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
 
-export { ChannelList, ChannelItem, ChannelTopicGroup } from './components/ChannelList';
+export { ChannelList, ChannelItem, ChannelRow, DefaultPinnedIcon } from './components/ChannelList';
 export type { ChannelListProps, ChannelItemProps } from './components/ChannelList';
 
+export { FlatTopicGroupItem } from './components/FlatTopicGroupItem';
+export type { TopicPillProps, TopicListProps } from './types';
+
+export { TopicList } from './components/TopicList';
+
 export { DefaultChannelActions, computeDefaultActions } from './components/ChannelActions';
 export type { ChannelAction, ChannelActionsProps } from './types';
 
@@ -54,7 +77,7 @@ export { MessageActionsBox } from './components/MessageActionsBox';
 export type { MessageActionsBoxProps } from './types';
 
 export { Dropdown, closeAllDropdowns } from './components/Dropdown';
-export type { DropdownProps } from './components/Dropdown';
+export type { DropdownProps } from './types';
 
 export { MessageReactions } from './components/MessageReactions';
 export type { MessageReactionsProps, ReactionUser, LatestReaction } from './types';
@@ -63,7 +86,19 @@ export { MessageQuickReactions } from './components/MessageQuickReactions';
 
 export { useMessageActions } from './hooks/useMessageActions';
 
-export { formatTime, getDateKey, formatDateLabel, getMessageUserId, replaceMentionsForPreview } from './utils';
+export {
+  formatTime,
+  getDateKey,
+  formatDateLabel,
+  getMessageUserId,
+  replaceMentionsForPreview,
+  getLastMessagePreview,
+  buildUserMap,
+  removeAccents,
+  formatRelativeDate,
+  countWords,
+} from './utils';
+export { getAvatarGradient } from './utils/avatarColors';
 export {
   isGroupChannel,
   isDirectChannel,
@@ -100,8 +135,10 @@ export {
   isLinkPreviewAttachment,
   isImage,
   isVideo,
+  MESSAGE_DISPLAY_TYPES,
+  isDeletedDisplayMessage,
 } from './messageTypeUtils';
-export type { MessageType, AttachmentType } from './messageTypeUtils';
+export type { MessageType, AttachmentType, MessageDisplayType } from './messageTypeUtils';
 
 export {
   defaultMessageRenderers,
@@ -134,7 +171,10 @@ export type { FilePreviewItem, FilesPreviewProps } from './components/FilesPrevi
 export { MentionSuggestions } from './components/MentionSuggestions';
 export type { MentionSuggestionsProps } from './components/MentionSuggestions';
 
-export { useMentions } from './hooks/useMentions';
+export { EditPreview } from './components/EditPreview';
+export { PreviewOverlay } from './components/PreviewOverlay';
+
+export { useMentions, getMentionHtml } from './hooks/useMentions';
 export type { MentionMember, MentionPayload, UseMentionsOptions, UseMentionsReturn } from './hooks/useMentions';
 
 export { useScrollToMessage } from './hooks/useScrollToMessage';
@@ -143,9 +183,13 @@ export type { UseScrollToMessageOptions, UseScrollToMessageReturn } from './hook
 export { useLoadMessages, dedupMessages } from './hooks/useLoadMessages';
 export type { UseLoadMessagesOptions, UseLoadMessagesReturn } from './hooks/useLoadMessages';
 
-export { useChannelMessages } from './hooks/useChannelMessages';
+export { useChannelMessages, markChannelAsFullyQueried } from './hooks/useChannelMessages';
 export type { UseChannelMessagesOptions } from './hooks/useChannelMessages';
 
+export { useForwardMessage } from './hooks/useForwardMessage';
+export { useRecoveryPin } from './hooks/useRecoveryPin';
+export type { UseRecoveryPinReturn, RecoveryPinStatus, RecoveryRestoredMessage, RecoveryStatusInfo } from './hooks/useRecoveryPin';
+
 export { QuotedMessagePreview } from './components/QuotedMessagePreview';
 export type { QuotedMessagePreviewProps } from './components/QuotedMessagePreview';
 export { ReplyPreview } from './components/ReplyPreview';
@@ -167,6 +211,11 @@ export {
   DefaultChannelInfoCover,
   DefaultChannelInfoActions,
   DefaultChannelInfoTabs,
+  MessageSearchPanel,
+  HighlightedText,
+  useMessageSearch,
+  ChannelSettingsPanel,
+  useChannelSettings,
 } from './components/ChannelInfo';
 
 export { Modal } from './components/Modal';
@@ -177,6 +226,7 @@ export type {
   ChannelInfoCoverProps,
   ChannelInfoActionsProps,
   ChannelInfoTabsProps,
+  ChannelInfoTabHeaderProps,
   ChannelInfoMemberItemProps,
   ChannelInfoMediaItemProps,
   ChannelInfoLinkItemProps,
@@ -188,6 +238,11 @@ export type {
   AddMemberModalProps,
   AddMemberUserItemProps,
   AddMemberButtonProps,
+  EditChannelModalProps,
+  EditChannelData,
+  TopicModalProps,
+  MessageSearchPanelProps,
+  ChannelSettingsPanelProps,
 } from './types';
 
 export { UserPicker } from './components/UserPicker';
@@ -195,6 +250,24 @@ export type { UserPickerProps, UserPickerUser, UserPickerItemProps, UserPickerSe
 
 export { CreateChannelModal } from './components/CreateChannelModal';
 export type { CreateChannelModalProps } from './types';
+export {
+  RecoveryPinSetup,
+  RecoveryPinRestore,
+  RecoveryPinChange,
+  RecoveryStatus,
+  RecoveryGap,
+  RecoveryGate,
+  RecoveryRestoreProgress,
+} from './components/RecoveryPin';
+export type {
+  RecoveryPinSetupProps,
+  RecoveryPinRestoreProps,
+  RecoveryPinChangeProps,
+  RecoveryStatusProps,
+  RecoveryGapProps,
+  RecoveryGateProps,
+  RecoveryRestoreProgressProps,
+} from './components/RecoveryPin';
 
 // Call Components
 export { ErmisCallContext } from './context/ErmisCallContext';

package/src/messageTypeUtils.ts

@@ -24,7 +24,7 @@ export function isSystemMessage(message: any): boolean {
 }
 
 export function isStickerMessage(message: any): boolean {
-  return message?.type === MESSAGE_TYPES.STICKER;
+  return message?.type === MESSAGE_TYPES.STICKER || Boolean(message?.sticker_url);
 }
 
 export function isRegularMessage(message: any): boolean {
@@ -62,3 +62,29 @@ export function isImage(attachment: any): boolean {
 export function isVideo(attachment: any): boolean {
   return !!(isVideoAttachment(attachment) || (!attachment.type && attachment.mime_type?.startsWith('video/')));
 }
+
+export function isAudioAttachment(attachment: any): boolean {
+  return attachment?.type === ATTACHMENT_TYPES.AUDIO;
+}
+
+export function isAudio(attachment: any): boolean {
+  return !!(
+    isAudioAttachment(attachment) ||
+    isVoiceRecordingAttachment(attachment) ||
+    attachment.mime_type?.startsWith('audio/') ||
+    attachment.file_name?.toLowerCase().endsWith('.mp3') ||
+    attachment.title?.toLowerCase().endsWith('.mp3')
+  );
+}
+
+export const MESSAGE_DISPLAY_TYPES = {
+  NORMAL: 'normal',
+  DELETED: 'deleted',
+} as const;
+
+export type MessageDisplayType = (typeof MESSAGE_DISPLAY_TYPES)[keyof typeof MESSAGE_DISPLAY_TYPES] | string;
+
+/** Check if a message was deleted for current user (display_type === 'deleted') */
+export function isDeletedDisplayMessage(message: any): boolean {
+  return message?.display_type === MESSAGE_DISPLAY_TYPES.DELETED;
+}

package/src/styles/_base.css

@@ -23,7 +23,6 @@
 }
 
 .ermis-avatar--fallback {
-  background: linear-gradient(135deg, var(--ermis-accent) 0%, var(--ermis-accent-hover) 100%);
   color: #fff;
   font-weight: 600;
   font-family: var(--ermis-font-family);

package/src/styles/_call-ui.css

@@ -187,6 +187,12 @@
   transform: scale(0.95);
 }
 
+.ermis-call-ui__action-circle:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
 .ermis-call-ui__action-circle--reject {
   background-color: var(--ermis-color-danger);
   box-shadow: 0 4px 20px rgba(239, 68, 68, 0.35);
@@ -242,7 +248,7 @@
 .ermis-call-ui__video-remote {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .ermis-call-ui__video-local {
@@ -268,7 +274,7 @@
 .ermis-call-ui__video-local-stream {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   transform: scaleX(-1);
 }
 
@@ -325,6 +331,39 @@
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 }
 
+/* Video call status bar: mic-muted icon + duration timer in one row */
+.ermis-call-ui__video-timer {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: var(--ermis-radius-full);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: var(--ermis-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  user-select: none;
+}
+
+.ermis-call-ui__video-timer-mic {
+  display: flex;
+  align-items: center;
+  color: #f87171; /* red-400 */
+}
+
+.ermis-call-ui__video-timer-mic svg {
+  width: 16px;
+  height: 16px;
+}
+
 /* -- Audio Layout -- */
 .ermis-call-ui__audio-container {
   text-align: center;
@@ -741,3 +780,21 @@
     transform: none;
   }
 }
+
+/* ============================================================
+   SPINNER
+   ============================================================ */
+.ermis-call-ui__spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #ffffff;
+  animation: ermis-call-spin 0.8s linear infinite;
+}
+
+@keyframes ermis-call-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}