-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
화상채팅 UI 수정
- Loading branch information
Showing
10 changed files
with
176 additions
and
39 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
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
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
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
57 changes: 57 additions & 0 deletions
57
...roviders)/(root)/[workspaceId]/video-channel/(main)/_components/DeviceMenu/DeviceMenu.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,57 @@ | ||
| 'use client'; | ||
| import Button from '@/components/Button'; | ||
| import Typography from '@/components/Typography'; | ||
| import SpeakerIcon from '@/icons/Volume2.svg'; | ||
| import SpeakerMuteIcon from '@/icons/VolumeX.svg'; | ||
| import { useState } from 'react'; | ||
| import useAudioOutput from '../../../_hooks/useAudioOutput'; | ||
|
|
||
| type DeviceMenueProps = { | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| const DeviceMenu = ({ onClose }: DeviceMenueProps) => { | ||
| const { devices, setAudioOutputDevice, toggleMute, isMuted } = useAudioOutput(); | ||
| const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null); | ||
|
|
||
| const handleDeviceChange = (deviceId: string) => { | ||
| setAudioOutputDevice(deviceId); | ||
| setSelectedDeviceId(deviceId); | ||
| }; | ||
| console.log(devices); | ||
| return ( | ||
| <div> | ||
| <Typography variant="Title18px" color="grey700Black"> | ||
| 오디오 장치 선택 | ||
| </Typography> | ||
| <ul className=""> | ||
| {devices.length === 0 && <li>오디오를 찾을 수 없습니다.</li>} | ||
| {devices.map((device) => ( | ||
| <li | ||
| key={device.deviceId} | ||
| onClick={() => handleDeviceChange(device.deviceId)} | ||
| className={`cursor-pointer hover:bg-gray-200 p-2 rounded flex items-center gap-3 ${ | ||
| selectedDeviceId === device.deviceId ? 'bg-blue-100' : '' | ||
| }`} | ||
| > | ||
| <SpeakerIcon className="w-[22px]" /> | ||
| <Typography variant="Body14px" color="grey600"> | ||
| {device.label || `Device ${device.deviceId}`} | ||
| </Typography> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| <div onClick={toggleMute} className="cursor-pointer rounded flex items-center gap-3 p-2 hover:bg-gray-200"> | ||
| <SpeakerMuteIcon className="w-[22px]" /> | ||
| <Typography variant="Body14px" color="grey600"> | ||
| 오디오 끔 | ||
| </Typography> | ||
| </div> | ||
| <Button theme="primary" isFullWidth className="mt-3" onClick={onClose}> | ||
| 다음 | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeviceMenu; |
1 change: 1 addition & 0 deletions
1
...app/(providers)/(root)/[workspaceId]/video-channel/(main)/_components/DeviceMenu/index.ts
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 @@ | ||
| export { default } from './DeviceMenu'; |
28 changes: 28 additions & 0 deletions
28
...oot)/[workspaceId]/video-channel/(main)/_components/DeviceMenuButton/DeviceMenuButton.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,28 @@ | ||
| import BottomSheet from '@/components/BottomSheet'; | ||
| import Typography from '@/components/Typography'; | ||
| import VolumeIcon from '@/icons/Volume2.svg'; | ||
| import { useState } from 'react'; | ||
| import DeviceMenu from '../DeviceMenu/DeviceMenu'; | ||
| const DeviceMenuButton = () => { | ||
| const [isOpen, setIsOpen] = useState<boolean>(false); | ||
|
|
||
| const handleClose = () => { | ||
| setIsOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <button onClick={() => setIsOpen(true)} className="flex flex-col items-center justify-center"> | ||
| <VolumeIcon className="w-[24px] h-[24px] bottom-0" /> | ||
| <Typography variant="Body12px" color="grey700Black"> | ||
| 스피커 | ||
| </Typography> | ||
| </button> | ||
| <BottomSheet isOpen={isOpen} onClose={handleClose}> | ||
| <DeviceMenu onClose={handleClose} /> | ||
| </BottomSheet> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeviceMenuButton; |
1 change: 1 addition & 0 deletions
1
...roviders)/(root)/[workspaceId]/video-channel/(main)/_components/DeviceMenuButton/index.ts
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 @@ | ||
| export { default } from './DeviceMenuButton'; |
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
51 changes: 51 additions & 0 deletions
51
src/app/(providers)/(root)/[workspaceId]/video-channel/_hooks/useAudioOutput.ts
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,51 @@ | ||
| import { RefObject, useEffect, useRef, useState } from 'react'; | ||
|
|
||
| interface Device { | ||
| deviceId: string; | ||
| kind: string; | ||
| label: string; | ||
| } | ||
|
|
||
| const useAudioOutput = () => { | ||
| const [devices, setDevices] = useState<Device[]>([]); | ||
| const [isMuted, setIsMuted] = useState(false); | ||
| const audioRef: RefObject<HTMLAudioElement> = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
| navigator.mediaDevices | ||
| .enumerateDevices() | ||
| .then((devices) => { | ||
| const audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput'); | ||
| setDevices(audioOutputDevices); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(`Error: ${err.name}: ${err.message}`); | ||
| }); | ||
| }, []); | ||
|
|
||
| const setAudioOutputDevice = (deviceId: string) => { | ||
| if (audioRef.current && typeof audioRef.current.sinkId !== 'undefined') { | ||
| audioRef.current | ||
| .setSinkId(deviceId) | ||
| .then(() => { | ||
| console.log(`Success, audio output device attached: ${deviceId}`); | ||
| }) | ||
| .catch((error) => { | ||
| console.error(`Error: ${error.name}: ${error.message}`); | ||
| }); | ||
| } else { | ||
| console.warn('Browser does not support output device selection.'); | ||
| } | ||
| }; | ||
|
|
||
| const toggleMute = () => { | ||
| if (audioRef.current) { | ||
| audioRef.current.muted = !audioRef.current.muted; | ||
| setIsMuted(audioRef.current.muted); | ||
| } | ||
| }; | ||
|
|
||
| return { audioRef, devices, setAudioOutputDevice, toggleMute, isMuted }; | ||
| }; | ||
|
|
||
| export default useAudioOutput; |