fix: Clean up UI of voice message in mobile mode (#488)

Fix bugs
* Call `VoiceRecorder.cancel` when closing the VoiceMessageInputWrapper
* solved issue: VoicePlayer doesn't play after VoiceMessageInputWrapper
is closed
this is because VoicePlayer doesn't allow to play during recording, so
it should specify the recording is done

Fix styles
* Reduce the maximum width of a message because of overflow
* Fix the text-overflow on the channel preview
* Remove the div tag containing the string to apply the ellipsis on the
channel preview

Chore
* Fix typo `isSubmited` to `isSubmitted`
* Leave comments and Optimize the VoiceMessageInputWrapper
* Add a logger to find out the path through which AudioFile is obtained

Author: HoonBaek

src/hooks/VoicePlayer/index.tsx

@@ -93,12 +93,15 @@ export const VoicePlayerProvider = ({
       voicePlayerRoot.removeChild(voicePlayerAudioElement);
     }
 
+    logger.info('VoicePlayer: Start getting audio file.');
     new Promise((resolve) => {
       if (audioFile) {
         resolve(audioFile);
+        logger.info('VoicePlayer: Use the audioFile instance.');
       }
       if (audioStorage?.[groupKey]?.audioFile) {
-        resolve(audioStorage[groupKey].audioFile)
+        resolve(audioStorage[groupKey].audioFile);
+        logger.info('VoicePlayer: Get from the audioStorage.');
       }
       voicePlayerDispatcher({
         type: INITIALIZE_AUDIO_UNIT,
@@ -112,6 +115,7 @@ export const VoicePlayerProvider = ({
             type: VOICE_MESSAGE_MIME_TYPE,
           });
           resolve(audioFile);
+          logger.info('VoicePlayer: Get the audioFile from URL.');
         });
     }).then((audioFile: File) => {
       logger.info('VoicePlayer: Succeeded getting audio file.', audioFile);

src/smart-components/Channel/components/MessageInput/VoiceMessageInputWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import './voice-message-wrapper.scss';
 
@@ -27,10 +27,10 @@ export const VoiceMessageInputWrapper = ({
   onCancelClick,
   onSubmitClick,
 }: VoiceMessageInputWrapperProps): React.ReactElement => {
+  const uuid = useRef<string>(uuidv4()).current;
   const [audioFile, setAudioFile] = useState<File>(null);
-  const [uuid] = useState<string>(uuidv4());
   const [voiceInputState, setVoiceInputState] = useState<VoiceMessageInputStatus>(VoiceMessageInputStatus.READY_TO_RECORD);
-  const [isSubmited, setSubmit] = useState(false);
+  const [isSubmitted, setSubmit] = useState(false);
   const [isDisabled, setDisabled] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const { stringSet } = useLocalization();
@@ -73,13 +73,15 @@ export const VoiceMessageInputWrapper = ({
     }
   }, [channel?.myRole, channel?.isFrozen, channel?.myMutedState]);
 
+  // call onSubmitClick when submit button is clicked and recorded audio file is created
   useEffect(() => {
-    if (isSubmited && audioFile) {
+    if (isSubmitted && audioFile) {
       onSubmitClick(audioFile, recordingTime);
       setSubmit(false);
       setAudioFile(null);
     }
-  }, [isSubmited, audioFile, recordingTime]);
+  }, [isSubmitted, audioFile, recordingTime]);
+  // operate which control button should be displayed
   useEffect(() => {
     if (audioFile) {
       if (recordingTime < minRecordingTime) {
@@ -91,15 +93,18 @@ export const VoiceMessageInputWrapper = ({
         setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY);
       }
     }
-  }, [isSubmited, audioFile, recordingTime, playingStatus]);
+  }, [audioFile, recordingTime, playingStatus]);
 
   return (
     <div className="sendbird-voice-message-input-wrapper">
       <VoiceMessageInput
         currentValue={recordingStatus === VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime}
         maximumValue={recordingStatus === VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit}
         currentType={voiceInputState}
-        onCancelClick={onCancelClick}
+        onCancelClick={() => {
+          onCancelClick();
+          cancel();
+        }}
         onSubmitClick={() => {
           if (isDisabled) {
             setShowModal(true);

src/smart-components/ChannelList/components/ChannelPreview/channel-preview.scss

@@ -55,6 +55,7 @@
     margin-left: 16px;
     @include mobile() {
       position: relative;
+      max-width: calc(100% - 72px);
     }
 
     .sendbird-channel-preview__content__upper {

src/smart-components/ChannelList/components/ChannelPreview/index.tsx

@@ -114,9 +114,7 @@ const ChannelPreview: React.FC<ChannelPreviewInterface> = ({
                 type={LabelTypography.SUBTITLE_2}
                 color={LabelColors.ONBACKGROUND_1}
               >
-                <div>
-                  {channelName}
-                </div>
+                {channelName}
               </Label>
               <Label
                 className="sendbird-channel-preview__content__upper__header__total-members"

src/smart-components/OpenChannel/components/OpenChannelMessageList/index.tsx

@@ -1,7 +1,7 @@
 import './openchannel-message-list.scss';
 
 import React, { ReactElement, useRef, useState, useMemo } from 'react';
-import { FileMessage, UserMessage } from '@sendbird/chat/message';
+import { UserMessage } from '@sendbird/chat/message';
 import isSameDay from 'date-fns/isSameDay';
 
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';

src/ui/MessageContent/index.scss

@@ -15,7 +15,7 @@
   .sendbird-message-content__middle {
     max-width: 400px;
     @include mobile() {
-      max-width: calc(100vw - 100px);
+      max-width: calc(100vw - 140px);
     }
   }