chore: Rename VoicePlayerStatus for separating object and type (#531)

* Rename VoicePlayerStatus for separating instance and type
* Use ModuleNameSpaces for type defining of Sdk instance

Author: HoonBaek

scripts/index_d_ts

@@ -1,3 +1,5 @@
+import { GroupChannelModule, ModuleNamespaces, OpenChannelModule } from '@sendbird/chat/lib/__definition';
+
 /**
  * Type Definitions for @sendbird/uikit-react@{{ version }}
  * homepage: https://sendbird.com/
@@ -147,7 +149,7 @@ declare module "SendbirdUIKitGlobal" {
   export type EveryMessage = ClientUserMessage | ClientFileMessage | ClientAdminMessage;
   export type ClientSentMessages = ClientUserMessage | ClientFileMessage;
 
-  export type GetSdk = SendbirdChat | SendbirdGroupChat | SendbirdOpenChat | undefined;
+  export type GetSdk = SendbirdChat & ModuleNamespaces<[GroupChannelModule, OpenChannelModule]> | undefined;
   export type GetConnect = (
     userId: string,
     accessToken?: string
@@ -483,13 +485,15 @@ declare module "SendbirdUIKitGlobal" {
     onCancel: () => void;
   };
 
-  export enum VoicePlayerStatus {
+  export enum VoicePlayerStatusType {
     IDLE = 'IDLE',
     PREPARING = 'PREPARING',
     READY_TO_PLAY = 'READY_TO_PLAY',
     PLAYING = 'PLAYING',
     COMPLETED = 'COMPLETED',
   }
+  // should be deprecated / for backward
+  export type VoicePlayerStatus = VoicePlayerStatusType;
 
   /**
    * Channel
@@ -1895,11 +1899,18 @@ declare module '@sendbird/uikit-react/ui/FileMessageItemBody' {
 }
 
 declare module '@sendbird/uikit-react/ui/VoiceMessageItemBody' {
+  enum VoicePlayerStatusType {
+    IDLE = 'IDLE',
+    PREPARING = 'PREPARING',
+    READY_TO_PLAY = 'READY_TO_PLAY',
+    PLAYING = 'PLAYING',
+    COMPLETED = 'COMPLETED',
+  }
   interface VoiceMessageItemBodyProps {
     minRecordTime?: number;
     maximumValue: number;
     currentValue?: number;
-    currentType: VoicePlayerStatus;
+    currentType: VoicePlayerStatusType;
   }
   type VoiceMessageItemBody = React.FC<VoiceMessageItemBodyProps>;
   export default VoiceMessageItemBody;

src/hooks/VoicePlayer/dux/initialState.ts

@@ -1,17 +1,19 @@
+import { ObjectValues } from '../../../utils/typeHelpers/objectValues';
 import { GroupKey } from '../utils';
 
-/* eslint-disable no-redeclare */
-export const VoicePlayerStatus = {
+export const VOICE_PLAYER_STATUS = {
   IDLE: 'IDLE',
   PREPARING: 'PREPARING',
   PLAYING: 'PLAYING',
   PAUSED: 'PAUSED',
   COMPLETED: 'COMPLETED',
 } as const;
-export type VoicePlayerStatus = typeof VoicePlayerStatus[keyof typeof VoicePlayerStatus];
+// VoicePlayerStatus should be deprecated / It's left for backward legacy
+export const VoicePlayerStatus = VOICE_PLAYER_STATUS;
+export type VoicePlayerStatusType = ObjectValues<typeof VOICE_PLAYER_STATUS>;
 
 export type AudioStorageUnit = {
-  playingStatus: VoicePlayerStatus;
+  playingStatus: VoicePlayerStatusType;
   audioFile: null | File;
   playbackTime: number;
   duration: number;
@@ -20,10 +22,9 @@ export const AudioUnitDefaultValue = (): AudioStorageUnit => ({
   audioFile: null,
   playbackTime: 0,
   duration: 1000,
-  playingStatus: VoicePlayerStatus.IDLE,
+  playingStatus: VOICE_PLAYER_STATUS.IDLE,
 });
 
-/* eslint-disable no-redeclare */
 export interface VoicePlayerInitialState {
   currentPlayer: null | HTMLAudioElement;
   currentGroupKey: string;

src/hooks/VoicePlayer/dux/reducer.ts

@@ -9,7 +9,7 @@ import {
   AudioStorageUnit,
   AudioUnitDefaultValue,
   VoicePlayerInitialState,
-  VoicePlayerStatus,
+  VOICE_PLAYER_STATUS,
 } from './initialState';
 
 type InitializeAudioUnitPayload = { groupKey: string };
@@ -37,7 +37,7 @@ export default function voicePlayerReducer(
     case INITIALIZE_AUDIO_UNIT: {
       const { groupKey } = action.payload as InitializeAudioUnitPayload;
       const audioUnit = (state.audioStorage?.[groupKey] ? state.audioStorage[groupKey] : AudioUnitDefaultValue()) as AudioStorageUnit;
-      audioUnit.playingStatus = VoicePlayerStatus.PREPARING;
+      audioUnit.playingStatus = VOICE_PLAYER_STATUS.PREPARING;
       return {
         ...state,
         audioStorage: {
@@ -58,7 +58,7 @@ export default function voicePlayerReducer(
       const { groupKey, audioFile } = action.payload as OnVoicePlayerPlayPayload;
       const audioUnit = (state.audioStorage?.[groupKey] ? state.audioStorage[groupKey] : AudioUnitDefaultValue()) as AudioStorageUnit;
       audioUnit.audioFile = audioFile;
-      audioUnit.playingStatus = VoicePlayerStatus.PLAYING;
+      audioUnit.playingStatus = VOICE_PLAYER_STATUS.PLAYING;
       return {
         ...state,
         audioStorage: {
@@ -70,7 +70,7 @@ export default function voicePlayerReducer(
     case ON_VOICE_PLAYER_PAUSE: {
       const { groupKey } = action.payload as OnVoicePlayerPausePayload;
       const audioUnit = (state.audioStorage?.[groupKey] ? state.audioStorage[groupKey] : AudioUnitDefaultValue()) as AudioStorageUnit;
-      audioUnit.playingStatus = VoicePlayerStatus.PAUSED;
+      audioUnit.playingStatus = VOICE_PLAYER_STATUS.PAUSED;
       const { currentTime, duration } = state.currentPlayer as HTMLAudioElement;
       if (audioUnit.playbackTime === audioUnit.duration) {
         audioUnit.playbackTime = 0;

src/hooks/VoicePlayer/useVoicePlayer.tsx

@@ -3,7 +3,7 @@ import { useVoicePlayerContext } from '.';
 import { VOICE_PLAYER_AUDIO_ID } from '../../utils/consts';
 import { useVoiceRecorderContext } from '../VoiceRecorder';
 
-import { AudioUnitDefaultValue, VoicePlayerStatus } from './dux/initialState';
+import { AudioUnitDefaultValue, VoicePlayerStatusType } from './dux/initialState';
 import { generateGroupKey } from './utils';
 
 export interface UseVoicePlayerProps {
@@ -19,7 +19,7 @@ export interface UseVoicePlayerContext {
   stop: (text?: string) => void;
   playbackTime: number;
   duration: number;
-  playingStatus: VoicePlayerStatus;
+  playingStatus: VoicePlayerStatusType;
 }
 
 export const useVoicePlayer = ({

src/modules/Channel/components/MessageInput/VoiceMessageInputWrapper.tsx

@@ -13,7 +13,7 @@ import Modal from '../../../../ui/Modal';
 import Button, { ButtonSizes, ButtonTypes } from '../../../../ui/Button';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { VOICE_RECORDER_DEFAULT_MIN } from '../../../../utils/consts';
-import { VoicePlayerStatus } from '../../../../hooks/VoicePlayer/dux/initialState';
+import { VOICE_PLAYER_STATUS } from '../../../../hooks/VoicePlayer/dux/initialState';
 import uuidv4 from '../../../../utils/uuid';
 
 export interface VoiceMessageInputWrapperProps {
@@ -87,7 +87,7 @@ export const VoiceMessageInputWrapper = ({
       if (recordingTime < minRecordingTime) {
         setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
         setAudioFile(null);
-      } else if (playingStatus === VoicePlayerStatus.PLAYING) {
+      } else if (playingStatus === VOICE_PLAYER_STATUS.PLAYING) {
         setVoiceInputState(VoiceMessageInputStatus.PLAYING);
       } else {
         setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY);

src/ui/VoiceMessageItemBody/index.tsx

@@ -9,7 +9,7 @@ import PlaybackTime from '../PlaybackTime';
 import Loader from '../Loader';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import { LabelTypography, LabelColors } from '../Label';
-import { VoicePlayerStatus } from '../../hooks/VoicePlayer/dux/initialState';
+import { VOICE_PLAYER_STATUS } from '../../hooks/VoicePlayer/dux/initialState';
 
 export interface VoiceMessageItemBodyProps {
   className?: string;
@@ -32,7 +32,7 @@ export const VoiceMessageItemBody = ({
     pause,
     playbackTime = 0,
     duration,
-    playingStatus = VoicePlayerStatus.IDLE,
+    playingStatus = VOICE_PLAYER_STATUS.IDLE,
   } = useVoicePlayer({
     channelUrl,
     key: `${message?.messageId}`,
@@ -63,7 +63,7 @@ export const VoiceMessageItemBody = ({
         colorType={isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY}
       />
       <div className="sendbird-voice-message-item-body__status-button">
-        {(playingStatus === VoicePlayerStatus.IDLE || playingStatus === VoicePlayerStatus.PAUSED) && (
+        {(playingStatus === VOICE_PLAYER_STATUS.IDLE || playingStatus === VOICE_PLAYER_STATUS.PAUSED) && (
           <div
             className="sendbird-voice-message-item-body__status-button__button"
             onClick={play}
@@ -76,7 +76,7 @@ export const VoiceMessageItemBody = ({
             />
           </div>
         )}
-        {playingStatus === VoicePlayerStatus.PREPARING && (
+        {playingStatus === VOICE_PLAYER_STATUS.PREPARING && (
           <Loader width="22.2px" height="22.2px">
             <Icon
               width="22.2px"
@@ -86,7 +86,7 @@ export const VoiceMessageItemBody = ({
             />
           </Loader>
         )}
-        {playingStatus === VoicePlayerStatus.PLAYING && (
+        {playingStatus === VOICE_PLAYER_STATUS.PLAYING && (
           <div
             className="sendbird-voice-message-item-body__status-button__button"
             onClick={() => { pause(); }}