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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React UI components for Ermis Chat",
   "author": "Ermis",
   "homepage": "https://ermis.network/",
@@ -20,7 +20,7 @@
     "/src"
   ],
   "dependencies": {
-    "@ermis-network/ermis-chat-sdk": "*",
+    "@ermis-network/ermis-chat-sdk": "2.0.1",
     "react-ts-audio-recorder": "^1.1.4",
     "virtua": "^0.48.8",
     "frimousse": "^0.3.0"

package/src/components/Channel.tsx

@@ -38,9 +38,6 @@ export const Channel: React.FC<ChannelProps> = React.memo(({
   // Force re-render when channel info is updated via WS
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
   useEffect(() => {
-
-    console.log('---activeChannel--', activeChannel)
-
     if (!activeChannel) return;
     const sub = activeChannel.on('channel.updated', () => setChannelUpdateCount((c) => c + 1));
     return () => sub.unsubscribe();

package/src/components/ChannelActions.tsx

@@ -216,9 +216,14 @@ export function computeDefaultActions(
         isDanger: true,
         onClick: async (ch) => {
           try {
-            await ch.removeMembers([currentUserId]);
+            if (ch.data?.mls_enabled) {
+              await ch.leaveChannelE2ee(currentUserId);
+            } else {
+              await ch.removeMembers([currentUserId]);
+            }
           } catch (e) {
             console.error('Error leaving channel', e);
+            throw e;
           }
         },
       });

package/src/components/ChannelHeader.tsx

@@ -47,9 +47,9 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
   const { isPending } = usePendingState(activeChannel, client.userID);
   const callContext = useContext(ErmisCallContext);
 
-  const isSkipped = client.userID 
-    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) || 
-      isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
+  const isSkipped = client.userID
+    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) ||
+    isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
     : false;
 
   const actionDisabled = isPending || isSkipped;
@@ -89,26 +89,7 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
     [image, activeChannel?.data?.image, channelUpdateCount],
   );
 
-  const teamName = useMemo(() => {
-    if (!activeChannel) return undefined;
-    
-    // If it's a topic, derive from parent_cid
-    const parentCid = activeChannel.data?.parent_cid as string | undefined;
-    if (parentCid && client.activeChannels[parentCid]) {
-      return client.activeChannels[parentCid].data?.name || client.activeChannels[parentCid].cid;
-    }
-
-    // If it's a topics-enabled team channel (the general proxy), the proxy overrides data.name.
-    // We can pull the original name from the SDK cache.
-    if (hasTopicsEnabled(activeChannel)) {
-      const rawChannel = client.activeChannels[activeChannel.cid];
-      if (rawChannel && rawChannel.data?.name && rawChannel.data.name !== activeChannel.data?.name) {
-        return rawChannel.data.name;
-      }
-    }
-    
-    return undefined;
-  }, [activeChannel, client.activeChannels]);
+  const teamName = undefined;
 
   // ── Online Status (direct friend channels only) ──
   const currentUserId = client.userID;
@@ -172,12 +153,12 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
     <div className={`ermis-channel-header${className ? ` ${className}` : ''}`}>
       {activeChannel.data?.parent_cid ? (
         <div className="ermis-channel-header__topic-avatar">
-          {channelImage && typeof channelImage === 'string' && channelImage.startsWith('emoji://') 
-            ? channelImage.replace('emoji://', '') 
+          {channelImage && typeof channelImage === 'string' && channelImage.startsWith('emoji://')
+            ? channelImage.replace('emoji://', '')
             : '#'}
         </div>
       ) : (
-        <AvatarComponent image={channelImage} name={teamName || channelName} size={32} />
+        <AvatarComponent image={channelImage} name={teamName || channelName} size={44} />
       )}
 
       <div className="ermis-channel-header__info">
@@ -185,11 +166,6 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
           renderTitle(activeChannel)
         ) : (
           <div className="ermis-channel-header__title-container">
-            {teamName && (
-              <div className="ermis-channel-header__team-name">
-                {teamName}
-              </div>
-            )}
             <div className="ermis-channel-header__name">{channelName}</div>
           </div>
         )}
@@ -230,7 +206,7 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
                 </svg>
               </button>
             )}
-            
+
             {renderVideoCallButton ? (
               renderVideoCallButton(() => callContext.createCall('video', activeChannel.cid || ''), actionDisabled)
             ) : (

package/src/components/ChannelInfo/AddMemberModal.tsx

@@ -40,7 +40,13 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({
     if (selectedUsers.length === 0 || isAdding) return;
     try {
       setIsAdding(true);
-      await channel.addMembers(selectedUsers.map(u => u.id));
+      const memberIds = selectedUsers.map(u => u.id);
+      const encryptionManager = channel.getClient().encryptionManager;
+      if (channel.data?.mls_enabled && encryptionManager?.initialized && channel.id && channel.cid) {
+        await encryptionManager.addMembers(channel.type, channel.id, channel.cid, memberIds);
+      } else {
+        await channel.addMembers(memberIds);
+      }
       onClose();
     } catch (err) {
       console.error('Failed to add members:', err);

package/src/components/ChannelInfo/ChannelInfo.tsx

@@ -326,6 +326,14 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
   const parentCid = channel?.data?.parent_cid as string | undefined;
   const parentChannel = parentCid && client ? client.activeChannels[parentCid] : undefined;
   let parentChannelName = parentChannel?.data?.name || (parentCid ? 'Unknown' : undefined);
+  const e2eeChannel = parentChannel || channel;
+  const isE2ee = Boolean(e2eeChannel?.data?.mls_enabled);
+  const [isRotatingKey, setIsRotatingKey] = useState(false);
+  const [isEnablingE2ee, setIsEnablingE2ee] = useState(false);
+  const encryptionEpoch =
+    isE2ee && e2eeChannel?.cid && typeof client?.encryptionManager?.getEpoch === 'function'
+      ? client.encryptionManager.getEpoch(e2eeChannel.cid)
+      : undefined;
 
   const handleDeleteChannel = useCallback(async () => {
     if (onDeleteChannelProp) return onDeleteChannelProp();
@@ -341,9 +349,14 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     if (onLeaveChannelProp) return onLeaveChannelProp();
     if (!channel || !currentUserId) return;
     try {
-      await channel.removeMembers([currentUserId]);
+      if (channel.data?.mls_enabled) {
+        await channel.leaveChannelE2ee(currentUserId);
+      } else {
+        await channel.removeMembers([currentUserId]);
+      }
     } catch (e) {
       console.error("Error leaving channel", e);
+      throw e;
     }
   }, [channel, currentUserId, onLeaveChannelProp]);
 
@@ -351,9 +364,18 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     if (onRemoveMemberProp) return onRemoveMemberProp(memberId);
     if (!channel) return;
     try {
-      await channel.removeMembers([memberId]);
+      const encryptionManager = channel.getClient().encryptionManager;
+      if (channel.data?.mls_enabled) {
+        if (!encryptionManager?.initialized || !channel.id || !channel.cid) {
+          throw new Error('[E2EE] Cannot remove member from E2EE channel before encryption is initialized');
+        }
+        await encryptionManager.evictMember(channel.type, channel.id, channel.cid, memberId);
+      } else {
+        await channel.removeMembers([memberId]);
+      }
     } catch (e) {
       console.error("Error removing member", e);
+      throw e;
     }
   }, [channel, onRemoveMemberProp]);
 
@@ -393,6 +415,54 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     try { await channel.unblockUser(); } catch (e) { console.error('Error unblocking user', e); }
   }, [channel, onUnblockUserProp]);
 
+  const handleRotateKey = useCallback(async () => {
+    if (!e2eeChannel?.cid || !client?.encryptionManager?.initialized || parentCid) return;
+    try {
+      setIsRotatingKey(true);
+      await client.encryptionManager.keyRotation(e2eeChannel.cid);
+    } catch (e) {
+      console.error('Error rotating E2EE key', e);
+    } finally {
+      setIsRotatingKey(false);
+    }
+  }, [client, e2eeChannel?.cid, parentCid]);
+
+  const handleEnableE2ee = useCallback(async () => {
+    if (!channel?.id || !channel?.cid || !client?.encryptionManager?.initialized || parentCid || isE2ee) return;
+    try {
+      setIsEnablingE2ee(true);
+      const memberUserIds = Object.keys(channel.state?.members || {});
+      const recoveryPolicy = (channel.data as any)?.e2ee_recovery_policy || 'member_assisted';
+      const result = await client.encryptionManager.enableE2ee(
+        channel.type,
+        channel.id,
+        channel.cid,
+        memberUserIds,
+        recoveryPolicy,
+      );
+      channel.data = {
+        ...channel.data,
+        mls_enabled: true,
+        e2ee_recovery_policy:
+          result?.channel?.e2ee_recovery_policy || result?.e2ee_recovery_policy || recoveryPolicy,
+        mls_enabled_at: result?.channel?.mls_enabled_at || result?.mls_enabled_at || new Date().toISOString(),
+        mls_epoch: result?.channel?.mls_epoch ?? result?.epoch ?? channel.data?.mls_epoch,
+      } as any;
+      channel.getClient().dispatchEvent({
+        type: 'channel.updated',
+        cid: channel.cid,
+        channel_type: channel.type,
+        channel_id: channel.id,
+        channel: channel.data,
+        user: channel.getClient().user,
+      } as any);
+    } catch (e) {
+      console.error('Error enabling E2EE', e);
+    } finally {
+      setIsEnablingE2ee(false);
+    }
+  }, [channel, client, parentCid, isE2ee]);
+
   const handlePinChannel = useCallback(async () => {
     if (onPinChannelProp) return onPinChannelProp();
     if (!channel) return;
@@ -515,6 +585,8 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
           isTeamChannel={isTeamChannel}
           parentChannelName={finalParentChannelName}
           isTopic={isTopic}
+          isE2ee={isE2ee}
+          encryptionEpoch={encryptionEpoch}
         />
 
         {isBanned && (
@@ -540,6 +612,7 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
           <>
             {!isPreviewMode && (
               <ActionsComponent
+                channel={channel}
                 onSearchClick={() => setShowSearchPanel(true)}
                 onSettingsClick={() => setShowSettingsPanel(true)}
                 onLeaveChannel={handleLeaveChannel}
@@ -560,6 +633,13 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
                 isPinned={isPinned}
                 topicsEnabled={channel?.data?.topics_enabled === true}
                 currentUserRole={currentUserRole}
+                isE2ee={isE2ee}
+                encryptionInitialized={Boolean(client?.encryptionManager?.initialized)}
+                encryptionEpoch={encryptionEpoch}
+                onRotateKey={!isTopic && isE2ee && canManageChannel(currentUserRole) ? handleRotateKey : undefined}
+                rotateKeyDisabled={isRotatingKey || isBlocked || isClosedTopic}
+                onEnableE2ee={!isTopic && !isE2ee && currentUserRole === CHANNEL_ROLES.OWNER ? handleEnableE2ee : undefined}
+                enableE2eeDisabled={isEnablingE2ee || isBlocked || isClosedTopic || !client?.encryptionManager?.initialized}
                 searchLabel={actionsSearchLabel}
                 settingsLabel={actionsSettingsLabel}
                 deleteLabel={actionsDeleteLabel}

package/src/components/ChannelInfo/EditChannelModal.tsx

@@ -122,7 +122,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
       // If consumer provides custom save handler, delegate entirely
       if (onSave) {
         if (selectedFile) {
-          const response = await channel.sendFile(selectedFile, selectedFile.name, selectedFile.type);
+          const response = await channel.uploadFilePresigned(selectedFile, selectedFile.name, selectedFile.type);
           (payload || {} as EditChannelData).image = response.file;
         }
         await onSave(payload || {});
@@ -135,7 +135,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
 
       // Upload image if changed
       if (selectedFile) {
-        const response = await channel.sendFile(selectedFile, selectedFile.name, selectedFile.type);
+        const response = await channel.uploadFilePresigned(selectedFile, selectedFile.name, selectedFile.type);
         finalPayload.image = response.file;
       }
 

package/src/components/ChannelInfo/MediaGridItem.tsx

@@ -1,100 +1,237 @@
-import React, { useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { preloadImage, isImagePreloaded } from '../../utils';
-import type { AttachmentItem } from '../../types';
+import type { AttachmentItem, MediaLightboxItem } from '../../types';
+import { MediaLightbox } from '../MediaLightbox';
+import { useChatClient } from '../../hooks/useChatClient';
+import { E2EE_PREVIEW_MAX_CONCURRENT, useE2eeAttachmentRenderer } from '../../hooks/useE2eeAttachmentRenderer';
 
-export const MediaGridItem: React.FC<{
+let activeChannelInfoPreviewLoads = 0;
+const queuedChannelInfoPreviewLoads: Array<() => void> = [];
+
+function scheduleChannelInfoPreviewLoad(load: () => Promise<unknown>): void {
+  const run = () => {
+    activeChannelInfoPreviewLoads += 1;
+    void load().finally(() => {
+      activeChannelInfoPreviewLoads = Math.max(0, activeChannelInfoPreviewLoads - 1);
+      const next = queuedChannelInfoPreviewLoads.shift();
+      if (next) next();
+    });
+  };
+  if (activeChannelInfoPreviewLoads < E2EE_PREVIEW_MAX_CONCURRENT) run();
+  else queuedChannelInfoPreviewLoads.push(run);
+}
+
+const E2eeMediaGridItem: React.FC<{
   item: AttachmentItem;
-  onClick: (url: string) => void;
-}> = React.memo(({ item, onClick }) => {
-  const src = item.thumb_url || item.url;
-  const alreadyCached = isImagePreloaded(src);
-  const [loaded, setLoaded] = useState(alreadyCached);
-  const imgRef = React.useRef<HTMLImageElement>(null);
+}> = ({ item }) => {
+  const { activeChannel } = useChatClient();
+  const previewRef = useRef<HTMLDivElement | null>(null);
+  const manifest = item.e2ee_manifest;
+  const preview = useE2eeAttachmentRenderer(activeChannel, manifest, 'preview');
+  const original = useE2eeAttachmentRenderer(activeChannel, manifest, 'original');
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const hasPreview = Boolean(manifest?.assets.some((asset) => asset.kind === 'preview'));
+  const isVideo = item.attachment_type === 'video';
+  const isImage = item.attachment_type === 'image';
+
+  useEffect(() => {
+    if (!manifest || !hasPreview || preview.url || preview.loading || preview.error) return;
+    const element = previewRef.current;
+    if (!element || typeof IntersectionObserver === 'undefined') {
+      scheduleChannelInfoPreviewLoad(preview.load);
+      return;
+    }
+    let scheduled = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (scheduled) return;
+        if (entries.some((entry) => entry.isIntersecting)) {
+          scheduled = true;
+          observer.disconnect();
+          scheduleChannelInfoPreviewLoad(preview.load);
+        }
+      },
+      { rootMargin: '120px' },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [hasPreview, manifest, preview.error, preview.load, preview.loading, preview.url]);
 
-  // Trigger background preload (no-op if already cached)
-  useMemo(() => { preloadImage(src); }, [src]);
+  const progressLabel = original.progress?.percentage
+    ? `${original.progress.phase} ${original.progress.percentage}%`
+    : original.loading
+    ? original.progress?.phase || 'Loading'
+    : undefined;
 
-  // Fallback checks for browser cache when JS preload didn't catch it
-  React.useEffect(() => {
-    if (!loaded && imgRef.current?.complete) {
-      setLoaded(true);
+  const openOriginal = useCallback(async () => {
+    if (!manifest) return;
+    if (isImage || isVideo) {
+      setLightboxOpen(true);
+      if (isVideo && !original.streamUrl && !original.streamLoading) {
+        void original.loadStream().then((streamUrl) => {
+          if (!streamUrl && !original.url && !original.loading) void original.load();
+        });
+      } else if (!original.url && !original.loading && !original.streamUrl) void original.load();
+      return;
     }
-  }, [loaded, src]);
+    await original.download(item.file_name);
+  }, [isImage, isVideo, item.file_name, manifest, original]);
 
-  const isVideo = item.attachment_type === 'video';
+  const lightboxItems = useMemo<MediaLightboxItem[]>(
+    () => [
+      {
+        type: isVideo ? 'video' : 'image',
+        src: original.streamUrl || original.url,
+        posterSrc: preview.url,
+        alt: item.file_name,
+        loading: original.loading || (lightboxOpen && !original.streamUrl && !original.url && !original.error),
+        progressLabel,
+        download: async () => {
+          await original.download(item.file_name);
+        },
+        onPlaybackError: async () => {
+          await original.disposeStream();
+          if (!original.url && !original.loading) await original.load();
+        },
+        onDispose: original.disposeStream,
+      },
+    ],
+    [isVideo, item.file_name, lightboxOpen, original, preview.url, progressLabel],
+  );
 
   return (
-    <div
-      className="ermis-channel-info__media-item"
-      onClick={() => onClick(item.url)}
-      title={item.file_name}
-    >
-      {/* Shimmer placeholder while loading */}
-      {!loaded && <div className="ermis-channel-info__media-shimmer" />}
-
-      {isVideo ? (
-        <div className="ermis-channel-info__media-video-thumb">
-          {item.thumb_url ? (
-            <img
-              ref={imgRef}
-              src={item.thumb_url}
-              alt={item.file_name || 'video'}
-              loading="lazy"
-              decoding="async"
-              onLoad={() => setLoaded(true)}
-              style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
-            />
-          ) : (
-            <video
-              src={item.url}
-              preload="metadata"
-              onLoadedData={() => setLoaded(true)}
-              style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
-            />
+    <div className="ermis-channel-info__media-item" onClick={openOriginal} ref={previewRef} title={item.file_name}>
+      {!preview.url && <div className="ermis-channel-info__media-shimmer" />}
+      {preview.url ? (
+        <div className={isVideo ? 'ermis-channel-info__media-video-thumb' : undefined}>
+          <img src={preview.url} alt={item.file_name || 'encrypted media'} loading="lazy" decoding="async" />
+          {(isVideo || original.loading) && (
+            <div className="ermis-channel-info__media-play-icon">
+              {original.loading ? (
+                <span className="ermis-channel-info__media-spinner" />
+              ) : (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                  <polygon points="5 3 19 12 5 21 5 3" />
+                </svg>
+              )}
+            </div>
           )}
+        </div>
+      ) : (
+        <div className="ermis-channel-info__media-video-thumb">
           <div className="ermis-channel-info__media-play-icon">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
               <polygon points="5 3 19 12 5 21 5 3" />
             </svg>
           </div>
         </div>
-      ) : (
-        <img
-          ref={imgRef}
-          src={src}
-          alt={item.file_name || 'media'}
-          loading="lazy"
-          decoding="async"
-          onLoad={() => setLoaded(true)}
-          style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
-        />
+      )}
+      {lightboxOpen && (
+        <MediaLightbox items={lightboxItems} isOpen={lightboxOpen} onClose={() => setLightboxOpen(false)} />
       )}
     </div>
   );
-}, (prev, next) => prev.item.id === next.item.id);
+};
+
+export const MediaGridItem: React.FC<{
+  item: AttachmentItem;
+  onClick: (url: string) => void;
+}> = React.memo(
+  ({ item, onClick }) => {
+    if (item.e2ee_manifest || item.e2ee_manifest_missing) return <E2eeMediaGridItem item={item} />;
+    const src = item.thumb_url || item.url;
+    const alreadyCached = isImagePreloaded(src);
+    const [loaded, setLoaded] = useState(alreadyCached);
+    const imgRef = React.useRef<HTMLImageElement>(null);
+
+    // Trigger background preload (no-op if already cached)
+    useMemo(() => {
+      preloadImage(src);
+    }, [src]);
+
+    // Fallback checks for browser cache when JS preload didn't catch it
+    React.useEffect(() => {
+      if (!loaded && imgRef.current?.complete) {
+        setLoaded(true);
+      }
+    }, [loaded, src]);
+
+    const isVideo = item.attachment_type === 'video';
+
+    return (
+      <div className="ermis-channel-info__media-item" onClick={() => onClick(item.url)} title={item.file_name}>
+        {/* Shimmer placeholder while loading */}
+        {!loaded && <div className="ermis-channel-info__media-shimmer" />}
+
+        {isVideo ? (
+          <div className="ermis-channel-info__media-video-thumb">
+            {item.thumb_url ? (
+              <img
+                ref={imgRef}
+                src={item.thumb_url}
+                alt={item.file_name || 'video'}
+                loading="lazy"
+                decoding="async"
+                onLoad={() => setLoaded(true)}
+                style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+              />
+            ) : (
+              <video
+                src={item.url}
+                preload="metadata"
+                onLoadedData={() => setLoaded(true)}
+                style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+              />
+            )}
+            <div className="ermis-channel-info__media-play-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <polygon points="5 3 19 12 5 21 5 3" />
+              </svg>
+            </div>
+          </div>
+        ) : (
+          <img
+            ref={imgRef}
+            src={src}
+            alt={item.file_name || 'media'}
+            loading="lazy"
+            decoding="async"
+            onLoad={() => setLoaded(true)}
+            style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+          />
+        )}
+      </div>
+    );
+  },
+  (prev, next) => prev.item.id === next.item.id,
+);
 (MediaGridItem as any).displayName = 'MediaGridItem';
 
-export const MediaRow = React.memo(({
-  row,
-  onClick,
-  MediaItemComponent = MediaGridItem
-}: {
-  row: AttachmentItem[],
-  onClick: (url: string) => void,
-  MediaItemComponent?: React.ComponentType<{ item: AttachmentItem, onClick: (url: string) => void }>
-}) => {
-  return (
-    <div className="ermis-channel-info__media-grid-row">
-      {row.map(item => (
-        <MediaItemComponent key={item.id} item={item} onClick={onClick} />
-      ))}
-      {row.length < 3 && Array.from({ length: 3 - row.length }).map((_, i) => (
-        <div key={`empty-${i}`} className="ermis-channel-info__media-item ermis-channel-info__media-item--empty" />
-      ))}
-    </div>
-  );
-}, (prev, next) => {
-  if (prev.row.length !== next.row.length) return false;
-  return prev.row.every((item, i) => item.id === next.row[i].id);
-});
+export const MediaRow = React.memo(
+  ({
+    row,
+    onClick,
+    MediaItemComponent = MediaGridItem,
+  }: {
+    row: AttachmentItem[];
+    onClick: (url: string) => void;
+    MediaItemComponent?: React.ComponentType<{ item: AttachmentItem; onClick: (url: string) => void }>;
+  }) => {
+    return (
+      <div className="ermis-channel-info__media-grid-row">
+        {row.map((item) => (
+          <MediaItemComponent key={item.id} item={item} onClick={onClick} />
+        ))}
+        {row.length < 3 &&
+          Array.from({ length: 3 - row.length }).map((_, i) => (
+            <div key={`empty-${i}`} className="ermis-channel-info__media-item ermis-channel-info__media-item--empty" />
+          ))}
+      </div>
+    );
+  },
+  (prev, next) => {
+    if (prev.row.length !== next.row.length) return false;
+    return prev.row.every((item, i) => item.id === next.row[i].id);
+  },
+);
 (MediaRow as any).displayName = 'MediaRow';