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

package/src/components/ChannelInfo/MediaGridItem.tsx

@@ -1,90 +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"
-              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"
-          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 }: { row: AttachmentItem[], onClick: (url: string) => void }) => {
-  return (
-    <div className="ermis-channel-info__media-grid-row">
-      {row.map(item => (
-        <MediaGridItem 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';

package/src/components/ChannelInfo/MemberListItem.tsx

@@ -74,9 +74,8 @@ export const MemberListItem = React.memo(({
     </div>
   );
 }, (prev, next) => {
-  return prev.member?.user_id === next.member?.user_id &&
-         prev.member?.channel_role === next.member?.channel_role &&
-         prev.member?.banned === next.member?.banned &&
+  return prev.member === next.member &&
+         prev.AvatarComponent === next.AvatarComponent &&
          prev.canRemove === next.canRemove &&
          prev.canBan === next.canBan &&
          prev.canUnban === next.canUnban &&

package/src/components/ChannelInfo/MessageSearchPanel.tsx

@@ -1,17 +1,19 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useRef, useCallback, useMemo, useEffect } from 'react';
 import type { Channel } from '@ermis-network/ermis-chat-sdk';
-import { useChatClient } from '../../hooks/useChatClient';
-import { replaceMentionsForPreview, buildUserMap, formatRelativeDate } from '../../utils';
+import { replaceMentionsForPreview, formatRelativeDate } from '../../utils';
 import { Avatar } from '../Avatar';
-import { Panel } from '../Panel';
-import type { AvatarProps, SearchResultMessage, MessageSearchPanelProps } from '../../types';
+import { Panel as DefaultPanel } from '../Panel';
+import { useChatComponents } from '../../context/ChatComponentsContext';
+import { useChatClient } from '../../hooks/useChatClient';
+import type { MessageSearchPanelProps } from '../../types';
+import { useMessageSearch } from './useMessageSearch';
+import { removeAccents } from '../../utils';
 
 /* ----------------------------------------------------------
    Highlight utility (Accent-insensitive)
    ---------------------------------------------------------- */
-const removeAccents = (str: string) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 
-const HighlightedText: React.FC<{ text: string; term: string }> = React.memo(({ text, term }) => {
+export const HighlightedText: React.FC<{ text: string; term: string }> = React.memo(({ text, term }) => {
   if (!term.trim()) return <>{text}</>;
 
   const cleanTerm = removeAccents(term).toLowerCase();
@@ -58,136 +60,40 @@ export const MessageSearchPanel: React.FC<MessageSearchPanelProps> = React.memo(
   AvatarComponent = Avatar,
   placeholder = 'Search messages...',
   title = 'Search Messages',
-  emptyText = 'No messages found',
+  emptyText = 'No messages found.',
   loadingText = 'Searching...',
   debounceMs = 500,
 }) => {
   const { setJumpToMessageId } = useChatClient();
-
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<SearchResultMessage[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const offsetRef = useRef(0);
-  const queryRef = useRef('');
-
-  // Reset all state when the channel changes (or panel closes)
-  useEffect(() => {
-    setQuery('');
-    setResults([]);
-    setLoading(false);
-    setHasMore(false);
-    setLoadingMore(false);
-    offsetRef.current = 0;
-    queryRef.current = '';
-  }, [channel?.cid, isOpen]);
+  const { PanelComponent } = useChatComponents();
+  const Panel = PanelComponent || DefaultPanel;
+
+  const {
+    query,
+    setQuery,
+    results,
+    loading,
+    hasMore,
+    loadingMore,
+    handleInputChange,
+    handleScroll,
+    resetSearch,
+    userMaps,
+  } = useMessageSearch({ channel, isOpen, debounceMs });
 
   // Auto-focus the input when panel opens
+  const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 300);
     }
   }, [isOpen]);
 
-  // Debounced search
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setQuery(value);
-
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-
-    if (!value.trim()) {
-      setResults([]);
-      setLoading(false);
-      setHasMore(false);
-      offsetRef.current = 0;
-      queryRef.current = '';
-      return;
-    }
-
-    setLoading(true);
-
-    debounceRef.current = setTimeout(async () => {
-      queryRef.current = value;
-      offsetRef.current = 0;
-
-      try {
-        const response = await channel.searchMessage(value, 0);
-        // Only apply if this is still the latest query
-        if (queryRef.current !== value) return;
-
-        if (!response) {
-          setResults([]);
-          setHasMore(false);
-        } else {
-          setResults(response.messages || []);
-          setHasMore((response.messages?.length || 0) >= 25);
-        }
-      } catch (err) {
-        console.error('Search failed:', err);
-        setResults([]);
-        setHasMore(false);
-      } finally {
-        setLoading(false);
-      }
-    }, debounceMs);
-  }, [channel, debounceMs]);
-
-  // Infinite scroll: load more results
-  const handleLoadMore = useCallback(async () => {
-    if (loadingMore || !hasMore || !queryRef.current) return;
-
-    setLoadingMore(true);
-    const nextOffset = offsetRef.current + 25; // offset skips records, limit is 25
-
-    try {
-      const response = await channel.searchMessage(queryRef.current, nextOffset);
-
-      if (!response || !response.messages?.length) {
-        setHasMore(false);
-      } else {
-        offsetRef.current = nextOffset;
-        setResults((prev) => [...prev, ...response.messages]);
-        setHasMore(response.messages.length >= 25);
-      }
-    } catch (err) {
-      console.error('Load more search results failed:', err);
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [channel, hasMore, loadingMore]);
-
-  // Scroll handler for infinite scroll
-  const handleScroll = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-
-    const threshold = 100;
-    if (el.scrollTop + el.clientHeight >= el.scrollHeight - threshold) {
-      handleLoadMore();
-    }
-  }, [handleLoadMore]);
-
   // Click a result -> jump to that message
   const handleResultClick = useCallback((messageId: string) => {
     setJumpToMessageId(messageId);
   }, [setJumpToMessageId]);
 
-  // Derived userMap for resolving mentions, with a lowercase variant for fast lookup
-  const userMaps = useMemo(() => {
-    const original = buildUserMap(channel.state);
-    const lower: typeof original = {};
-    for (const [id, name] of Object.entries(original)) {
-      lower[id.toLowerCase()] = name;
-    }
-    return { original, lower };
-  }, [channel.state]);
-
   return (
     <Panel isOpen={isOpen} onClose={onClose} title={title} className="ermis-search-panel">
       {/* Search Input now inside body */}
@@ -209,11 +115,7 @@ export const MessageSearchPanel: React.FC<MessageSearchPanelProps> = React.memo(
             <button
               className="ermis-search-panel__input-clear"
               onClick={() => {
-                setQuery('');
-                setResults([]);
-                setHasMore(false);
-                offsetRef.current = 0;
-                queryRef.current = '';
+                resetSearch();
                 inputRef.current?.focus();
               }}
               aria-label="Clear"
@@ -228,7 +130,6 @@ export const MessageSearchPanel: React.FC<MessageSearchPanelProps> = React.memo(
       </div>
 
       <div
-        ref={scrollRef}
         className="ermis-search-panel__results"
         onScroll={handleScroll}
       >

package/src/components/ChannelInfo/States.tsx

@@ -28,7 +28,7 @@ export const TabEmptyState: React.FC<{ label: string }> = React.memo(({ label })
 ));
 (TabEmptyState as any).displayName = 'TabEmptyState';
 
-export const TabLoadingState: React.FC = React.memo(() => (
+export const TabLoadingState: React.FC<{ tab?: string }> = React.memo(() => (
   <div className="ermis-channel-info__media-loading">
     <div className="ermis-channel-info__media-spinner" />
   </div>

package/src/components/ChannelInfo/index.ts

@@ -1,10 +1,13 @@
 export * from './ChannelInfo';
 export * from './ChannelInfoTabs';
+export * from './useChannelInfoTabs';
 export * from './EditChannelModal';
 export * from './MessageSearchPanel';
+export * from './useMessageSearch';
 export * from './MediaGridItem';
 export * from './LinkListItem';
 export * from './FileListItem';
 export * from './MemberListItem';
 export * from './States';
 export * from './ChannelSettingsPanel';
+export * from './useChannelSettings';