fix: Critical issues for mobile compatibility

scripts/index_d_ts

@@ -1864,6 +1864,7 @@ declare module '@sendbird/uikit-react/ui/Dropdown' {
 declare module '@sendbird/uikit-react/ui/EmojiReactions' {
   import type { EmojiCategory } from '@sendbird/chat';
   import type { FileMessage, UserMessage } from '@sendbird/chat/message';
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
   interface EmojiContainer {
     emojiCategories: Array<EmojiCategory>;
@@ -1873,6 +1874,7 @@ declare module '@sendbird/uikit-react/ui/EmojiReactions' {
     className?: string | Array<string>;
     userId: string;
     message: UserMessage | FileMessage;
+    channel: GroupChannel;
     emojiContainer: EmojiContainer;
     memberNicknamesMap: Map<string, string>;
     spaceFromTrigger?: Record<string, unknown>;

src/hooks/VoiceRecorder/index.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import {
+  BROWSER_SUPPORT_MIME_TYPE_LIST,
   VOICE_MESSAGE_FILE_NAME,
   VOICE_MESSAGE_MIME_TYPE,
   VOICE_RECORDER_AUDIO_BITS,
-  VOICE_RECORDER_MIME_TYPE,
 } from '../../utils/consts';
 import useSendbirdStateContext from '../useSendbirdStateContext';
 
@@ -37,6 +37,11 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(null);
   const [isRecordable, setIsRecordable] = useState<boolean>(false);
 
+  const browserSupportMimeType = BROWSER_SUPPORT_MIME_TYPE_LIST.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) ?? '';
+  if (!browserSupportMimeType) {
+    logger.error('VoiceRecorder: Browser does not support mimeType', { mimmeTypes: BROWSER_SUPPORT_MIME_TYPE_LIST });
+  }
+
   const [webAudioUtils, setWebAudioUtils] = useState(null);
   useEffect(() => {
     if (isVoiceMessageEnabled && !webAudioUtils) {
@@ -62,7 +67,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
         logger.info('VoiceRecorder: Succeeded getting media stream.', stream);
         setIsRecordable(true);
         const mediaRecorder = new MediaRecorder(stream, {
-          mimeType: VOICE_RECORDER_MIME_TYPE,
+          mimeType: browserSupportMimeType,
           audioBitsPerSecond: VOICE_RECORDER_AUDIO_BITS,
         });
         mediaRecorder.ondataavailable = (e) => { // when recording stops

src/hooks/useLongPress.tsx

@@ -50,6 +50,7 @@ interface PressHandlers<T> {
 interface Options {
   delay?: number;
   shouldPreventDefault?: boolean;
+  shouldStopPropagation?: boolean;
 }
 
 interface UseLongPressType<T> {
@@ -67,6 +68,7 @@ export default function useLongPress<T>({
 }: PressHandlers<T>, {
   delay = DEFAULT_DURATION,
   shouldPreventDefault = true,
+  shouldStopPropagation = false,
 }: Options = {}): UseLongPressType<T> {
   const { isMobile } = useMediaQueryContext();
   const [longPressTriggered, setLongPressTriggered] = useState(false);
@@ -81,6 +83,9 @@ export default function useLongPress<T>({
       ...e,
     };
     setDragTriggered(false);
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
     if (shouldPreventDefault && e.target) {
       e.target.addEventListener(
         'touchend',
@@ -96,7 +101,7 @@ export default function useLongPress<T>({
       onLongPress(clonedEvent);
       setLongPressTriggered(true);
     }, delay);
-  }, [onLongPress, delay, shouldPreventDefault, isMobile]);
+  }, [onLongPress, delay, shouldPreventDefault, shouldStopPropagation, isMobile]);
 
   const clear = useCallback((
     e: React.MouseEvent<T> | React.TouchEvent<T>,

src/lib/MediaQueryContext.tsx

@@ -11,7 +11,7 @@ const MediaQueryContext = React.createContext({
 
 export interface MediaQueryProviderProps {
   children: React.ReactElement;
-  mediaQueryBreakPoint?: string;
+  mediaQueryBreakPoint?: string | boolean;
   logger?: Logger;
 }
 

src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx

@@ -283,6 +283,7 @@ export default function ParentMessageInfoItem({
           <EmojiReactions
             userId={currentUserId}
             message={message}
+            channel={currentChannel}
             isByMe={false}
             emojiContainer={emojiContainer}
             memberNicknamesMap={nicknamesMap}

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -77,6 +77,8 @@ export default function ParentMessageInfo({
         setShowMobileMenu(true);
       }
     },
+  }, {
+    shouldPreventDefault: false,
   });
 
   // Edit message

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -101,6 +101,8 @@ export default function ThreadListItemContent({
         setShowMobileMenu(true);
       }
     },
+  }, {
+    shouldPreventDefault: false,
   });
 
   return (
@@ -267,6 +269,7 @@ export default function ThreadListItemContent({
               <EmojiReactions
                 userId={userId}
                 message={message as UserMessage | FileMessage}
+                channel={channel}
                 isByMe={isByMe}
                 emojiContainer={emojiContainer}
                 memberNicknamesMap={nicknamesMap}

src/types.d.ts

@@ -9,6 +9,14 @@ import type {
 export type ReplyType = 'NONE' | 'QUOTE_REPLY' | 'THREAD';
 export type Nullable<T> = T | null;
 
+export type SpaceFromTriggerType = {
+  x: number,
+  y: number,
+  top?: number,
+  left?: number,
+  height?: number,
+};
+
 export interface UserListQuery {
   hasNext?: boolean;
   next(): Promise<Array<User>>;

src/ui/ContextMenu/EmojiListItems.tsx

@@ -2,7 +2,9 @@ import React, { ReactElement, ReactNode, RefObject, useEffect, useRef, useState
 import { createPortal } from 'react-dom';
 
 import SortByRow from '../SortByRow';
+import { Nullable } from '../../types';
 
+const defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
 type SpaceFromTrigger = { x: number, y: number };
 type ReactionStyle = { left: number, top: number };
 export interface EmojiListItemsProps {
@@ -13,15 +15,15 @@ export interface EmojiListItemsProps {
   spaceFromTrigger?: SpaceFromTrigger;
 }
 
-const EmojiListItems = ({
+export const EmojiListItems = ({
   children,
   parentRef,
   parentContainRef,
   spaceFromTrigger = { x: 0, y: 0 },
   closeDropdown,
-}: EmojiListItemsProps): ReactElement => {
+}: EmojiListItemsProps): Nullable<ReactElement> => {
   const [reactionStyle, setReactionStyle] = useState<ReactionStyle>({ left: 0, top: 0 });
-  const reactionRef = useRef(null);
+  const reactionRef: RefObject<HTMLUListElement> = useRef(null);
 
   /* showParent & hideParent */
   useEffect(() => {
@@ -52,7 +54,7 @@ const EmojiListItems = ({
   useEffect(() => {
     const spaceFromTriggerX = spaceFromTrigger?.x || 0;
     const spaceFromTriggerY = spaceFromTrigger?.y || 0;
-    const parentRect = parentRef?.current?.getBoundingClientRect();
+    const parentRect = parentRef?.current?.getBoundingClientRect() ?? defaultParentRect;
     const x = parentRect.x || parentRect.left;
     const y = parentRect.y || parentRect.top;
     const reactionStyle = {
@@ -84,33 +86,37 @@ const EmojiListItems = ({
     }
   }, []);
 
-  return (
-    createPortal(
-      <>
-        <div className="sendbird-dropdown__menu-backdrop" />
-        <ul
-          className="sendbird-dropdown__reaction-bar"
-          ref={reactionRef}
-          style={{
-            display: 'inline-block',
-            position: 'fixed',
-            left: `${Math.round(reactionStyle.left)}px`,
-            top: `${Math.round(reactionStyle.top)}px`,
-          }}
-        >
-          <SortByRow
-            className="sendbird-dropdown__reaction-bar__row"
-            maxItemCount={8}
-            itemWidth={44}
-            itemHeight={40}
+  const rootElement = document.getElementById('sendbird-emoji-list-portal');
+  if (rootElement) {
+    return (
+      createPortal(
+        <>
+          <div className="sendbird-dropdown__menu-backdrop" />
+          <ul
+            className="sendbird-dropdown__reaction-bar"
+            ref={reactionRef}
+            style={{
+              display: 'inline-block',
+              position: 'fixed',
+              left: `${Math.round(reactionStyle.left)}px`,
+              top: `${Math.round(reactionStyle.top)}px`,
+            }}
           >
-            {children}
-          </SortByRow>
-        </ul>
-      </>,
-      document.getElementById('sendbird-emoji-list-portal'),
-    )
-  );
+            <SortByRow
+              className="sendbird-dropdown__reaction-bar__row"
+              maxItemCount={8}
+              itemWidth={44}
+              itemHeight={40}
+            >
+              {children}
+            </SortByRow>
+          </ul>
+        </>,
+        rootElement,
+      )
+    );
+  }
+  return null;
 };
 
 export default EmojiListItems;

src/ui/ContextMenu/MenuItems.tsx

@@ -5,7 +5,7 @@ interface MenuItemsProps {
   className?: string;
   style?: Record<string, string>;
   openLeft?: boolean;
-  children: React.ReactElement | Array<React.ReactElement>;
+  children: React.ReactElement | Array<React.ReactElement> | React.ReactNode;
   parentRef: React.RefObject<HTMLElement>;
   parentContainRef: React.RefObject<HTMLElement>;
   closeDropdown: () => void;

src/ui/EmojiReactions/AddReactionBadgeItem.tsx

@@ -0,0 +1,42 @@
+import React, {
+  KeyboardEvent,
+  MouseEvent,
+  TouchEvent,
+} from 'react';
+import ReactionBadge from '../ReactionBadge';
+import Icon, { IconColors, IconTypes } from '../Icon';
+import useLongPress from '../../hooks/useLongPress';
+
+export interface AddReactionBadgeItemProps {
+  onClick: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
+}
+
+export const AddReactionBadgeItem = ({
+  onClick,
+}: AddReactionBadgeItemProps): React.ReactElement => {
+  const onlyClick = useLongPress({
+    onLongPress: () => { /* noop */ },
+    onClick,
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true,
+  });
+
+  return (
+    <div
+      className="sendbird-emoji-reactions__add-reaction-badge"
+      {...onlyClick}
+    >
+      <ReactionBadge
+        isAdd
+      >
+        <Icon
+          type={IconTypes.EMOJI_MORE}
+          fillColor={IconColors.ON_BACKGROUND_3}
+          width="20px"
+          height="20px"
+        />
+      </ReactionBadge>
+    </div>
+  );
+};

src/ui/EmojiReactions/ReactionItem.tsx

@@ -0,0 +1,89 @@
+import React, { useContext } from 'react';
+
+import { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
+
+import Tooltip from '../Tooltip';
+import TooltipWrapper from '../TooltipWrapper';
+import ReactionBadge from '../ReactionBadge';
+import ImageRenderer from '../ImageRenderer';
+import Icon, { IconTypes } from '../Icon';
+import { useMediaQueryContext } from '../../lib/MediaQueryContext';
+import useLongPress from '../../hooks/useLongPress';
+import { LocalizationContext } from '../../lib/LocalizationContext';
+import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
+import { getEmojiTooltipString, isReactedBy } from '../../utils';
+import { useMessageContext } from '../../modules/Message/context/MessageProvider';
+import { Emoji } from '@sendbird/chat';
+
+type Props = {
+  reaction: Reaction;
+  memberNicknamesMap: Map<string, string>;
+  setEmojiKey: React.Dispatch<React.SetStateAction<string>>;
+  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;
+  emojisMap: Map<string, Emoji>;
+};
+
+export default function ReactionItem({
+  reaction,
+  memberNicknamesMap,
+  setEmojiKey,
+  toggleReaction,
+  emojisMap,
+}: Props) {
+  const store = useSendbirdStateContext();
+  const { isMobile } = useMediaQueryContext();
+  const messageStore = useMessageContext();
+  const message = messageStore?.message as UserMessage;
+  const { stringSet } = useContext(LocalizationContext);
+
+  const userId = store.config.userId;
+  const reactedByMe = isReactedBy(userId, reaction);
+
+  const handleOnClick = () => {
+    setEmojiKey('');
+    toggleReaction?.((message), reaction.key, reactedByMe);
+  };
+  const longPress = useLongPress({
+    onLongPress: () => {
+      setEmojiKey(reaction.key);
+    },
+    onClick: handleOnClick,
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true,
+  });
+
+  return (
+    <TooltipWrapper
+      className="sendbird-emoji-reactions__reaction-badge"
+      hoverTooltip={(reaction.userIds.length > 0) ? (
+        <Tooltip>
+          {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}
+        </Tooltip>
+      ) : <></>}
+    >
+      <div
+        {...(
+          isMobile
+            ? longPress
+            : { onClick: handleOnClick }
+        )}
+      >
+        <ReactionBadge
+          count={reaction.userIds.length}
+          selected={reactedByMe}
+        >
+          <ImageRenderer
+            circle
+            url={emojisMap.get(reaction?.key)?.url || ''}
+            width="20px"
+            height="20px"
+            defaultComponent={(
+              <Icon width="20px" height="20px" type={IconTypes.QUESTION} />
+            )}
+          />
+        </ReactionBadge>
+      </div>
+    </TooltipWrapper>
+  );
+}