Fix/UI kit 3053/modify issues on voice message

exports.js

@@ -11,6 +11,12 @@ export default {
   useSendbirdStateContext: 'src/hooks/useSendbirdStateContext.tsx',
   withSendbird: 'src/lib/SendbirdSdkContext.jsx',
 
+  // Voice message
+  'VoiceRecorder/context': 'src/hooks/VoiceRecorder/index.tsx',
+  'VoiceRecorder/useVoiceRecorder': 'src/hooks/VoiceRecorder/useVoiceRecorder.tsx',
+  'VoicePlayer/context': 'src/hooks/VoicePlayer/index.tsx',
+  'VoicePlayer/useVoicePlayer': 'src/hooks/VoicePlayer/useVoicePlayer.tsx',
+
   // handlers - experimental
   'handlers/ConnectionHandler': 'src/lib/handlers/ConnectionHandler.ts',
   'handlers/GroupChannelHandler': 'src/lib/handlers/GroupChannelHandler.ts',
@@ -20,6 +26,7 @@ export default {
 
   // utils
   'utils/message/getOutgoingMessageState': 'src/utils/exports/getOutgoingMessageState.ts',
+  'utils/message/isVoiceMessage': 'src/utils/isVoiceMessage.ts',
 
   // ChannelList
   ChannelList: 'src/smart-components/ChannelList/index.tsx',
@@ -159,6 +166,8 @@ export default {
   'ui/OpenchannelThumbnailMessage': 'src/ui/OpenchannelThumbnailMessage/index.tsx',
   'ui/OpenchannelUserMessage': 'src/ui/OpenchannelUserMessage/index.tsx',
   'ui/PlaceHolder': 'src/ui/PlaceHolder/index.tsx',
+  'ui/PlaybackTime': 'src/ui/PlaybackTime/index.tsx',
+  'ui/ProgressBar': 'src/ui/ProgressBar/index.tsx',
   'ui/QuoteMessage': 'src/ui/QuoteMessage/index.tsx',
   'ui/QuoteMessageInput': 'src/ui/QuoteMessageInput/index.tsx',
   'ui/ReactionBadge': 'src/ui/ReactionBadge/index.tsx',
@@ -173,5 +182,7 @@ export default {
   'ui/UnknownMessageItemBody': 'src/ui/UnknownMessageItemBody/index.tsx',
   'ui/UserListItem': 'src/ui/UserListItem/index.tsx',
   'ui/UserProfile': 'src/ui/UserProfile/index.tsx',
+  'ui/VoiceMessgeInput': 'src/ui/VoiceMessageInput/index.tsx',
+  'ui/VoiceMessageItemBody': 'src/ui/VoiceMessageItemBody.tsx',
   'ui/Word': 'src/ui/Word/index.tsx',
 };

package.json

@@ -9,7 +9,6 @@
   "files": [
     "release/**/*",
     "dist/**/*",
-    "package-lock.json",
     "LICENSE",
     "CHANGELOG.md"
   ],
@@ -52,6 +51,7 @@
     "@sendbird/chat": "^4.2.3",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
+    "lamejs": "^1.2.1",
     "prop-types": "^15.7.2"
   },
   "bugs": {

scripts/index_d_ts

@@ -518,6 +518,9 @@ declare module "SendbirdUIKitGlobal" {
     renderMessageInput?: () => React.ReactNode | React.ReactElement;
     renderTypingIndicator?: () => React.ReactNode | React.ReactElement;
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
 
   export type CoreMessageType = AdminMessage | UserMessage | FileMessage;
@@ -576,6 +579,9 @@ declare module "SendbirdUIKitGlobal" {
     // value is removed when channelURL changes
     value?: string;
     ref?: React.MutableRefObject<any>;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   };
 
   export type MessageListProps = {
@@ -984,6 +990,9 @@ declare module "SendbirdUIKitGlobal" {
     renderCustomSeparator?: () => React.ReactElement;
     renderParentMessageInfoPlaceholder?: (type: ParentMessageStateTypes) => React.ReactElement;
     renderThreadListPlaceHolder?: (type: ThreadListStateTypes) => React.ReactElement;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
 
   type EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
@@ -1030,6 +1039,9 @@ declare module "SendbirdUIKitGlobal" {
 
   export interface ThreadMessageInputProps {
     className?: string;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
 
   /**
@@ -2009,6 +2021,9 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     onMentionedUserIdsUpdated?: (userIds: Array<string>) => void,
     onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
   const MessageInput: React.FC<MessageInputProps>;
   export default MessageInput;

src/hooks/VoicePlayer/index.tsx

@@ -0,0 +1,132 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import {
+  VoicePlayerEvent,
+  VoicePlayerEventParams,
+  VoicePlayerEventStorage,
+  VoicePlayerEventTypes,
+} from './voicePlayerEvent';
+
+const noop = () => {/* noop */ };
+
+// VoicePlayerProvider interface
+export interface VoicePlayerProps {
+  children: React.ReactElement;
+}
+export interface VoicePlayerPlayProps {
+  audioFile: File;
+  playbackTime: number;
+  groupKey: string;
+}
+export interface VoicePlayerContext {
+  play: (props: VoicePlayerPlayProps) => void;
+  stop: (groupKey?: string) => void;
+  addEventHandler: (props: VoicePlayerEvent) => void;
+  removeEventHandler: (groupKey: string, handlerId: string) => void;
+}
+
+const VoicePlayerContext = createContext<VoicePlayerContext>({
+  play: noop,
+  stop: noop,
+  addEventHandler: noop,
+  removeEventHandler: noop,
+});
+
+export const VoicePlayerProvider = ({
+  children,
+}: VoicePlayerProps): React.ReactElement => {
+  const [eventStorage, setEventStorage] = useState<VoicePlayerEventStorage>({});
+  const [currentPlayer, setAudioPlayer] = useState<HTMLAudioElement>(null);
+  const [currentGroupKey, setCurrentGroupKey] = useState<string>('');
+
+  const addEventHandler = (event: VoicePlayerEvent): void => {
+    const { groupKey } = event;
+    setEventStorage((storage) => {
+      if (!storage?.[groupKey]) {
+        storage[groupKey] = [];
+      }
+      storage?.[groupKey].push(event);
+      return storage;
+    });
+  };
+  const removeEventHandler = (groupKey: string, handlerId: string): void => {
+    setEventStorage((storage) => {
+      if (!Array.isArray(storage?.[groupKey])) {
+        return storage;
+      }
+      return ({
+        ...storage,
+        [groupKey]: storage[groupKey].filter(({ id }) => id !== handlerId),
+      });
+    });
+  };
+  const triggerEvent = useCallback((eventType: VoicePlayerEventTypes, payload: VoicePlayerEventParams): void => {
+    const { groupKey } = payload;
+    if (Array.isArray(eventStorage?.[groupKey])) {
+      eventStorage[groupKey].map((playerEvent) => {
+        playerEvent?.[eventType]?.(payload);
+      });
+    }
+  }, [eventStorage]);
+  const clearStates = (): void => {
+    setAudioPlayer(null);
+    setCurrentGroupKey('');
+  };
+
+  const stop = useCallback((groupKey?: string): void => {
+    if (groupKey === undefined || (groupKey?.length > 0 && groupKey === currentGroupKey)) {
+      currentPlayer?.pause();
+      clearStates();
+    }
+  }, [currentPlayer, currentGroupKey]);
+  const play = ({
+    audioFile,
+    playbackTime,
+    groupKey,
+  }: VoicePlayerPlayProps): void => {
+    if (currentPlayer || currentGroupKey) {
+      stop();
+    }
+
+    const audioPlayer = new Audio(URL?.createObjectURL?.(audioFile));
+    audioPlayer.currentTime = playbackTime;
+    audioPlayer.volume = 1;
+    audioPlayer.loop = false;
+    audioPlayer.onplaying = () => {
+      triggerEvent(VoicePlayerEventTypes.STARTED, {
+        groupKey,
+        playbackTime: audioPlayer?.currentTime,
+        duration: audioPlayer?.duration,
+      });
+    };
+    audioPlayer.onpause = () => {
+      triggerEvent(VoicePlayerEventTypes.STOPPED, {
+        groupKey,
+        playbackTime: audioPlayer?.currentTime,
+        duration: audioPlayer?.duration,
+      });
+    };
+    audioPlayer.ontimeupdate = () => {
+      triggerEvent(VoicePlayerEventTypes.TIME_UPDATED, {
+        groupKey,
+        playbackTime: audioPlayer?.currentTime,
+        duration: audioPlayer?.duration,
+      });
+    };
+    audioPlayer?.play();
+    setAudioPlayer(audioPlayer);
+    setCurrentGroupKey(groupKey);
+  };
+
+  return (
+    <VoicePlayerContext.Provider value={{
+      play,
+      stop,
+      addEventHandler,
+      removeEventHandler,
+    }}>
+      {children}
+    </VoicePlayerContext.Provider>
+  );
+};
+
+export const useVoicePlayerContext = (): VoicePlayerContext => useContext(VoicePlayerContext);