@droppii-org/chat-mobile 0.2.7 → 0.2.8

package/src/components/messages/videoMessage/index.tsx

@@ -0,0 +1,120 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel } from '@droppii/libs';
+import ChatImageDimens, {
+  CHAT_IMAGE_VIEW_SOURCE,
+} from '../../../utils/chatImageDimens';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+const formatDuration = (durationMs: number): string => {
+  const totalSeconds = Math.floor(durationMs / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+};
+
+export const VideoMessage = memo(
+  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+    const videoElem = message?.videoElem;
+    const videoUrl = videoElem?.videoUrl;
+    const duration = videoElem?.duration;
+    const thumbnail = videoElem?.snapshotUrl;
+
+    const handlePress = useCallback(() => {
+      if (videoUrl && onMediaPress) {
+        onMediaPress([{ url: videoUrl, isVideo: true }], 0);
+      }
+    }, [videoUrl, onMediaPress]);
+
+    if (!videoUrl) {
+      return (
+        <KContainer.View style={messageStyles.wrapper}>
+          <KContainer.View
+            style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
+          >
+            <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+              📹 [Video unavailable]
+            </KLabel.Text>
+          </KContainer.View>
+        </KContainer.View>
+      );
+    }
+
+    const dimen = ChatImageDimens.getDimensions(
+      CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
+    );
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.Touchable
+          onPress={handlePress}
+          style={[
+            styles.videoContainer,
+            { width: dimen.width, height: dimen.height },
+          ]}
+        >
+          {thumbnail ? (
+            <KImage.Base
+              uri={thumbnail}
+              width={dimen.width}
+              height={dimen.height}
+              resizeMode="cover"
+            />
+          ) : (
+            <KContainer.View style={styles.videoBg} />
+          )}
+
+          <KContainer.View style={styles.playOverlay} center>
+            <KImage.VectorIcons
+              name="play-circle"
+              provider="MaterialCommunityIcons"
+              size={48}
+              color="white"
+            />
+          </KContainer.View>
+
+          {duration && (
+            <KContainer.View style={styles.durationBadge}>
+              <KLabel.Text typo="TextXsNormal" color="white">
+                {formatDuration(duration)}
+              </KLabel.Text>
+            </KContainer.View>
+          )}
+        </KContainer.Touchable>
+      </KContainer.View>
+    );
+  }
+);
+
+VideoMessage.displayName = 'VideoMessage';
+
+const styles = StyleSheet.create({
+  videoContainer: {
+    overflow: 'hidden',
+    borderRadius: 8,
+    backgroundColor: '#000',
+  },
+  videoBg: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  playOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  durationBadge: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+  },
+});

package/src/config/api-endpoints.ts

@@ -0,0 +1,72 @@
+/**
+ * API Endpoints Configuration
+ *
+ * Centralized endpoint management for all API calls.
+ * Can be overridden per environment or feature flag.
+ *
+ * Note: imageUpload is a relative path because ReactNativeBlobUtil.fetch()
+ * is used for image uploads (not axios). The full URL is constructed
+ * in the imageUpload service using the base URL from environment/config.
+ */
+
+export interface ApiEndpoints {
+  // Chat service (relative paths - used with axios baseURL)
+  urlMetadata: string;
+  // Image upload service (relative path - full URL constructed in imageUpload service)
+  imageUpload: string;
+}
+
+const DEFAULT_ENDPOINTS: ApiEndpoints = {
+  urlMetadata: '/chat-service/v1/utils/url-metadata',
+  imageUpload: '/uploader-service/v1/uploader/permanently',
+};
+
+let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };
+
+/**
+ * Get a specific API endpoint
+ * @param key - Endpoint key
+ * @returns Full endpoint URL
+ */
+export const getApiEndpoint = <K extends keyof ApiEndpoints>(
+  key: K
+): ApiEndpoints[K] => {
+  return endpoints[key];
+};
+
+/**
+ * Set a specific API endpoint (useful for testing/override)
+ * @param key - Endpoint key
+ * @param value - New endpoint URL
+ */
+export const setApiEndpoint = <K extends keyof ApiEndpoints>(
+  key: K,
+  value: ApiEndpoints[K]
+) => {
+  endpoints[key] = value;
+};
+
+/**
+ * Set all endpoints at once
+ * @param newEndpoints - New endpoints object
+ */
+export const setAllApiEndpoints = (newEndpoints: Partial<ApiEndpoints>) => {
+  endpoints = {
+    ...endpoints,
+    ...newEndpoints,
+  };
+};
+
+/**
+ * Reset to default endpoints
+ */
+export const resetApiEndpoints = () => {
+  endpoints = { ...DEFAULT_ENDPOINTS };
+};
+
+/**
+ * Get all endpoints (returns copy)
+ */
+export const getAllApiEndpoints = (): ApiEndpoints => ({
+  ...endpoints,
+});

package/src/config/attachment-priority.ts

@@ -0,0 +1,93 @@
+/**
+ * Configuration for attachment sending priority order
+ * AC2: Send mixed media with configurable priority
+ */
+
+export type AttachmentType = 'image' | 'video' | 'file' | 'text';
+
+export interface AttachmentPriorityConfig {
+  enabled: boolean;
+  order: AttachmentType[];
+  mergeStrategy: {
+    images: 'merge' | 'individual';
+    videos: 'merge' | 'individual';
+    files: 'merge' | 'individual';
+  };
+}
+
+// Default AC2 configuration
+export const DEFAULT_ATTACHMENT_PRIORITY: AttachmentPriorityConfig = {
+  enabled: true,
+  order: ['image', 'video', 'file', 'text'],
+  mergeStrategy: {
+    images: 'merge', // Multiple images merged into one message
+    videos: 'individual', // Videos always sent individually (never merged)
+    files: 'merge', // Multiple files merged into one message
+  },
+};
+
+// Alternative configurations
+export const ATTACHMENT_PRIORITY_PRESETS = {
+  // Send everything individually (no merging)
+  INDIVIDUAL: {
+    enabled: true,
+    order: ['image', 'video', 'file', 'text'],
+    mergeStrategy: {
+      images: 'individual',
+      videos: 'individual',
+      files: 'individual',
+    },
+  } as AttachmentPriorityConfig,
+
+  // Send videos first, then everything else
+  VIDEOS_FIRST: {
+    enabled: true,
+    order: ['video', 'image', 'file', 'text'],
+    mergeStrategy: {
+      images: 'merge',
+      videos: 'individual',
+      files: 'merge',
+    },
+  } as AttachmentPriorityConfig,
+
+  // Group by type - all media first, then text
+  MEDIA_FIRST: {
+    enabled: true,
+    order: ['image', 'video', 'file', 'text'],
+    mergeStrategy: {
+      images: 'merge',
+      videos: 'individual',
+      files: 'merge',
+    },
+  } as AttachmentPriorityConfig,
+
+  // Disabled - use original behavior
+  DISABLED: {
+    enabled: false,
+    order: [],
+    mergeStrategy: {
+      images: 'merge',
+      videos: 'individual',
+      files: 'merge',
+    },
+  } as AttachmentPriorityConfig,
+};
+
+/**
+ * Get attachment priority config
+ * Can be overridden via environment variable or per-user settings
+ */
+export function getAttachmentPriorityConfig(): AttachmentPriorityConfig {
+  // Can be extended to read from environment or user preferences
+  return DEFAULT_ATTACHMENT_PRIORITY;
+}
+
+/**
+ * Validate and normalize priority order
+ */
+export function validatePriorityOrder(
+  order: AttachmentType[]
+): AttachmentType[] {
+  const validTypes: AttachmentType[] = ['image', 'video', 'file', 'text'];
+  return order.filter((type) => validTypes.includes(type));
+}

package/src/config/configuration.ts

@@ -0,0 +1,50 @@
+/**
+ * Centralized Configuration
+ *
+ * Manages all API configuration in one place. Different services may use
+ * different protocols (axios, native HTTP), but they should all derive
+ * from the same base URL configuration.
+ */
+
+export interface AppConfig {
+  apiBaseUrl: string;
+}
+
+let config: AppConfig = {
+  apiBaseUrl: '',
+};
+
+/**
+ * Initialize the base URL configuration
+ * This should be called during app startup before any API calls
+ *
+ * @param apiBaseUrl - The base URL for all API services (e.g., 'https://api.example.com')
+ */
+export const initBaseUrl = (apiBaseUrl: string): void => {
+  if (!apiBaseUrl) {
+    if (__DEV__)
+      console.warn('[Configuration] Initializing with empty apiBaseUrl');
+  }
+  config.apiBaseUrl = apiBaseUrl;
+};
+
+/**
+ * Get the configured base URL
+ */
+export const getBaseUrl = (): string => {
+  return config.apiBaseUrl;
+};
+
+/**
+ * Reset configuration (useful for testing)
+ */
+export const resetBaseUrl = (): void => {
+  config = { apiBaseUrl: '' };
+};
+
+/**
+ * Check if base URL is configured
+ */
+export const isBaseUrlConfigured = (): boolean => {
+  return !!config.apiBaseUrl;
+};

package/src/config/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Library Configuration
+ * Provides convenient access to library configuration values
+ */
+
+import { getBaseUrl } from './configuration';
+
+/**
+ * Library Config object for easy access to configuration values
+ */
+export const Config = {
+  /**
+   * Get the configured API base URL
+   * @returns The base URL (e.g., 'https://api.example.com')
+   */
+  get BASE_URL(): string {
+    return getBaseUrl();
+  },
+};

package/src/core/index.ts

@@ -1,8 +1,32 @@
 import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import type { InitOptions } from '@droppii/openim-rn-client-sdk';
+import { initBaseUrl } from '../config/configuration';
 import { useUserListener } from './useUserListener';
 import { useChatListener } from './useChatListener';
 
-export const initChatSdk = OpenIMSDK.initSDK.bind(OpenIMSDK);
+export interface InitChatSdkOptions extends InitOptions {
+  /**
+   * Base URL for API services (image uploads, etc.)
+   * Will be set as the centralized configuration
+   */
+  apiBaseUrl?: string;
+}
+
+/**
+ * Initialize the chat SDK with optional base URL
+ * @param options - SDK initialization options + apiBaseUrl for centralized config
+ */
+export const initChatSdk = (options: InitChatSdkOptions) => {
+  const { apiBaseUrl, ...sdkOptions } = options;
+
+  // Initialize OpenIM SDK
+  OpenIMSDK.initSDK(sdkOptions);
+
+  // Initialize centralized base URL config for all services
+  if (apiBaseUrl) {
+    initBaseUrl(apiBaseUrl);
+  }
+};
 
 export const useChatSdk = () => {
   useUserListener();

package/src/core/useChatListener.ts

@@ -2,21 +2,11 @@ import OpenIMSDK, {
   OpenIMEvent,
   type ConversationItem,
   type GroupMemberItem,
-  type MessageItem,
-  type RevokedInfo,
 } from '@droppii/openim-rn-client-sdk';
 import { useCallback, useEffect } from 'react';
 import { useConversationStore } from '../store/conversation';
 
 export const useChatListener = () => {
-  const onRecvNewMessages = useCallback((messages: MessageItem[]) => {
-    console.log('onRecvNewMessages', messages);
-  }, []);
-
-  const onNewRecvMessageRevoked = useCallback((revokedInfo: RevokedInfo) => {
-    console.log('onNewRecvMessageRevoked', revokedInfo);
-  }, []);
-
   const onConversationChanged = useCallback(
     (conversations: ConversationItem[]) => {
       console.log('onConversationChanged', conversations);
@@ -41,10 +31,6 @@ export const useChatListener = () => {
   }, []);
 
   useEffect(() => {
-    // Message
-    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
-    OpenIMSDK.on(OpenIMEvent.OnNewRecvMessageRevoked, onNewRecvMessageRevoked);
-
     // Conversation
     OpenIMSDK.on(OpenIMEvent.OnConversationChanged, onConversationChanged);
     OpenIMSDK.on(OpenIMEvent.OnNewConversation, onNewConversation);
@@ -54,13 +40,6 @@ export const useChatListener = () => {
     OpenIMSDK.on(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
 
     return () => {
-      // Message
-      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
-      OpenIMSDK.off(
-        OpenIMEvent.OnNewRecvMessageRevoked,
-        onNewRecvMessageRevoked
-      );
-
       // Conversation
       OpenIMSDK.off(OpenIMEvent.OnConversationChanged, onConversationChanged);
       OpenIMSDK.off(OpenIMEvent.OnNewConversation, onNewConversation);

package/src/hooks/message/useSendMessage.ts

@@ -38,15 +38,22 @@ export const useSendMessage = () => {
         if (!file) continue;
       }
 
-      if (!!plainText && plainText.trim() !== '') {
-        const urls = extractUrls(plainText);
-        const isUrlMessage = urls.length > 0;
+      // Allow empty text if urlMetadata (preview link) is present
+      const hasText = !!plainText && plainText.trim() !== '';
+      const hasPreview = !!urlMetadata?.url;
+
+      if (hasText || hasPreview) {
+        const urls = hasText ? extractUrls(plainText) : [];
+        const isUrlMessage = urls.length > 0 || hasPreview;
         let message: MessageItem | null = null;
+
         if (isUrlMessage) {
-          message = await createUrlTextMessage(plainText, urls);
-        } else {
+          // Create URL message even with empty text if preview exists
+          message = await createUrlTextMessage(plainText || '', urls);
+        } else if (hasText) {
           message = await createTextMessage(plainText);
         }
+
         if (!message) return;
         messageList.push(message);
       }

package/src/hooks/useChatMessages.ts

@@ -175,15 +175,11 @@ export function useChatMessages({
 
     const handleNewMessages = (incoming: MessageItem[]) =>
       appendIncomingMessages(incoming);
-    const handleNewMessage = (incoming: MessageItem) =>
-      appendIncomingMessages([incoming]);
 
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
-    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
 
     return () => {
       OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
-      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
     };
   }, [appendIncomingMessages, conversationId, enabled]);