refactor: Voice Player date structure #414

HoonBaek · 2023-03-01T09:45:13Z

For Internal Contributors

UIKIT-3263

Description Of Changes

Use dux pattern for voice player data structure
Add IDLE status to the VoicePlayerStatus
Use document&element to refer the Audio element in the unmount scope of useEffect in useVoicePlayer

Types Of Changes

What types of changes does your code introduce to this project?
Put an x in the boxes that apply_

…ialState

src/hooks/VoicePlayer/dux/actionTypes.ts

src/hooks/VoicePlayer/dux/initialState.ts

src/hooks/VoicePlayer/dux/reducer.ts

src/hooks/VoicePlayer/index.tsx

src/hooks/VoicePlayer/dux/reducer.ts

src/utils/consts.ts

src/hooks/VoicePlayer/dux/initialState.ts

HoonBaek · 2023-03-02T02:47:56Z

src/hooks/VoicePlayer/index.tsx

+    }).then((audioFile: File) => {
+      const currentAudioUnit = audioStorage[groupKey] || AudioUnitDefaultValue() as AudioStorageUnit;
+      const audioPlayer = new Audio(URL?.createObjectURL?.(audioFile));
+      audioPlayer.id = VOICE_PLAYER_AUDIO_ID;


Set id of Audio element

HoonBaek · 2023-03-02T02:48:22Z

src/hooks/VoicePlayer/index.tsx

+      const voicePlayerRoot = document.getElementById(VOICE_PLAYER_ROOT_ID);
+      voicePlayerRoot.appendChild(audioPlayer);


And append the Audio element to the root element

HoonBaek · 2023-03-02T02:48:36Z

src/hooks/VoicePlayer/index.tsx

-      removeEventHandler,
+      voicePlayerStore,
    }}>
+      <div id={VOICE_PLAYER_ROOT_ID} style={{ display: 'none' }} />


This is the root element

HoonBaek · 2023-03-02T02:49:09Z

src/hooks/VoicePlayer/useVoicePlayer.tsx

+      const voiceAudioPlayerElement = document.getElementById(VOICE_PLAYER_AUDIO_ID);
+      (voiceAudioPlayerElement as HTMLAudioElement)?.pause?.();


And get and use the Audio element to call pause here

EunSeo-Baek added 3 commits March 1, 2023 17:26

Apply dux to voice player state

285ee50

Remove event operation logic of voice player

91775e1

Migrate useVoicePlayer to apply new structure

1a6a018

HoonBaek self-assigned this Mar 1, 2023

HoonBaek changed the base branch from main to develop/Voice-message March 1, 2023 09:45

EunSeo-Baek added 3 commits March 1, 2023 19:21

Remove the voice player event operation legacy

e4ba6e3

Add new VoicePlayerStatus IDLE

182ac50

Apply VoicePlayerStatus to UI components

e262f1b

HoonBaek requested a review from sravan-s March 1, 2023 12:04

EunSeo-Baek added 4 commits March 1, 2023 21:17

Add validation check for playbackTime and duration of voicePlayerInit…

f712abe

…ialState

Do not pause VoicePlayer when change channel or thread

fcb3081

Apply VoicePlayerStatus to change the state of VoiceMessageInput

30b23e7

Pause AudioPlayer in useEffect unmount scope using document

6f9a1cf