-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[NDD-309] 목소리 사운드 바 기능 추가 (4h/3h) (#161)
* feat: microphone의 volume을 통제 할 수 있는 util 함수 구현 * feat: useMedia hook 에서 인자로 받아 VolumeStatus 컴포넌트 구현 1. createMicrophoneAudioController 적용을 통해서 해당 컴포넌트 "내부"에서만 mic 요소 연결 2. useMedia hook 을 통해서 해당 요소에 media 속성 연결 3. 2번을 수행하고 나니 불필요하게 useMedia를 통해서 두번 요청하는것이 아닌가...? 라는 생각이 들어서 media에 대한 전역상태를 선언하는것이 필요할것이란 생각이 들었음, 이번엔 적용하지 않지만 꼭 진행할 예정 4. UI 상 우리의 테마 컬러에 따라서 동적으로 div 태그의 높이를 조절하도록 구현 + (색) * feat: Header 내부에서 volume에 대한 적용 완료 * chore: audioMonitor의 주석 추가
- Loading branch information
Showing
4 changed files
with
141 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
FE/src/components/interviewPage/InterviewHeader/VolumeStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import useMedia from '@hooks/useMedia'; | ||
import { createMicrophoneVolumeMonitor } from '@/utils/media'; | ||
import { useEffect, useState } from 'react'; | ||
import { css } from '@emotion/react'; | ||
|
||
const VolumeStatus: React.FC = () => { | ||
const { media, startMedia, stopMedia } = useMedia(); | ||
const [audioVolume, setAudioVolume] = useState<number>(0); | ||
|
||
useEffect(() => { | ||
if (!media) { | ||
void startMedia(); | ||
return; | ||
} | ||
|
||
const { startMonitoring, stopMonitoring } = createMicrophoneVolumeMonitor( | ||
media, | ||
setAudioVolume | ||
); | ||
|
||
startMonitoring(); | ||
|
||
return () => { | ||
stopMonitoring(); | ||
stopMedia(); | ||
}; | ||
}, [media, startMedia, stopMedia]); | ||
|
||
const getVolumeDivColor = () => { | ||
const green = Math.floor(Math.random() * 256) | ||
.toString(16) | ||
.padStart(2, '0'); | ||
|
||
return `#00${green}FF`; | ||
}; | ||
|
||
const colors = Array.from({ length: 6 }, getVolumeDivColor); | ||
|
||
const getRandomHeight = () => { | ||
return Math.max(10, audioVolume * (0.5 + Math.random() / 2)); | ||
}; | ||
|
||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
align-items: end; | ||
justify-content: space-between; | ||
width: 30px; | ||
height: 30px; | ||
`} | ||
> | ||
{colors.map((color, index) => ( | ||
<div | ||
key={index} | ||
css={css` | ||
width: 4px; | ||
background-color: ${color}; | ||
height: ${getRandomHeight()}%; | ||
transition: | ||
height 0.3s ease, | ||
background-color 0.3s ease; | ||
`} | ||
/> | ||
))} | ||
</div> | ||
); | ||
}; | ||
export default VolumeStatus; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
export { default as IntervieweeName } from './IntervieweeName'; | ||
export { default as RecordStatus } from './RecordStatus'; | ||
export { default as RecordTimer } from './RecordTimer'; | ||
export { default as VolumeStatus } from './VolumeStatus'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters