From ac6531fd3e127c17b7b67ae6a086e48ce910cf5c Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 18 Jan 2024 17:30:32 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EB=85=B9=EC=9D=8C=20=EC=A4=91=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useCreateTrack.ts | 2 +- client/src/hooks/useRecord.ts | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/client/src/hooks/useCreateTrack.ts b/client/src/hooks/useCreateTrack.ts index 9e53c02..f21f687 100644 --- a/client/src/hooks/useCreateTrack.ts +++ b/client/src/hooks/useCreateTrack.ts @@ -34,7 +34,7 @@ const useCreateTrack = ({ }; const handleTrackRemove = (audioId: AudioType["id"]) => { - stopRecord(); + stopRecord({ interrupted: true }); if (window.confirm("녹음된 트랙이 있어요. 정말 삭제할까요?")) { initRecord(); diff --git a/client/src/hooks/useRecord.ts b/client/src/hooks/useRecord.ts index 9e63d9f..eaa4791 100644 --- a/client/src/hooks/useRecord.ts +++ b/client/src/hooks/useRecord.ts @@ -6,7 +6,7 @@ interface MediaRecorderBaseResult { data: Blob | undefined; streamId: string | undefined; startRecord: () => void; - stopRecord: () => void; + stopRecord: (props?: { interrupted: boolean }) => void; initRecord: () => void; } @@ -65,12 +65,14 @@ const getMediaRecorder = async ({ const useRecord = (deviceId: ConstrainDOMString) => { const [isRecording, setIsRecording] = useState(false); const [isSuccess, setIsSuccess] = useState(false); + const [isInterrupted, setIsInterrupted] = useState(true); const dataRef = useRef(); const mediaRecorderRef = useRef(); const handleRecordStart = () => { setIsRecording(true); setIsSuccess(false); + setIsInterrupted(true); }; const handleRecordStop = (data: Blob) => { @@ -82,6 +84,7 @@ const useRecord = (deviceId: ConstrainDOMString) => { const initRecord = () => { dataRef.current = undefined; setIsSuccess(false); + setIsInterrupted(true); }; const startRecord = async () => { @@ -102,9 +105,16 @@ const useRecord = (deviceId: ConstrainDOMString) => { useEffect(() => {}, [isSuccess]); - const stopRecord = () => { + const stopRecord = (props?: { interrupted: boolean }) => { + // stopRecord({interrupted: true})인 경우에만 interrupted = true + const interrupted = props?.interrupted || false; + if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") { mediaRecorderRef.current.stop(); + + if (!interrupted) { + setIsInterrupted(false); + } } }; @@ -116,7 +126,7 @@ const useRecord = (deviceId: ConstrainDOMString) => { return { isRecording, - isSuccess, + isSuccess: isSuccess && !isInterrupted, data: dataRef.current, streamId: mediaRecorderRef.current?.stream.id, startRecord, From 53d5a62f517b08c9a0ce092037a5390e19d3c6a7 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 18 Jan 2024 17:31:51 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20track=20player=20=EC=9E=AC=EC=83=9D?= =?UTF-8?q?=20=EC=A1=B0=EA=B1=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 녹음 중이거나 트랙이 있는 경우에만 재생 - 트랙이 변경되면 초기화 --- client/src/hooks/useTrackPlayer.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/client/src/hooks/useTrackPlayer.ts b/client/src/hooks/useTrackPlayer.ts index 146e21f..abca35e 100644 --- a/client/src/hooks/useTrackPlayer.ts +++ b/client/src/hooks/useTrackPlayer.ts @@ -7,7 +7,7 @@ import useTrackTimer from "./useTrackTimer"; * TrackPlayer의 재생 시간과 오디오를 함께 조작(동기화)하기 위한 hook */ const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boolean }) => { - const { isAudioPlaying, changeAudioTime, playAudio, stopAudio, resetAudio } = useAudios(); + const { isAudioPlaying, changeAudioTime, playAudio, stopAudio, resetAudio, audioList } = useAudios(); const { trackTime, setTrackTime, startTrackTimer, stopTrackTimer, resetTrackTimer } = useTrackTimer(); // bpm에 따른 전체 마디 계산 @@ -41,6 +41,11 @@ const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boole // 오디오와 TrackPlayer 재생 시간 동기화 useEffect(() => { + if (audioList.length === 0 && !isRecording) { + return; + } + + // 녹음 중이거나 트랙이 있는 경우에만 TrackPlayer 재생 if (isAudioPlaying) { startTrackTimer(); } else { @@ -60,6 +65,11 @@ const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boole } }, [isRecording]); + // 트랙이 변경되면 TrackPlayer 초기화 + useEffect(() => { + resetTrackPlayer(); + }, [audioList]); + // 언마운트 시 TrackPlayer 초기화 useEffect(() => { return () => resetTrackPlayer(); From 9717478fed3e0caac79437c8a72245b4e21c8572 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 18 Jan 2024 17:32:25 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=85=B9=EC=9D=8C=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=20=ED=95=98=EB=8B=A8=20=EC=9E=AC=EC=83=9D=EB=B0=94=EC=97=90=20?= =?UTF-8?q?=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/blocks/ProjectSetting/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/blocks/ProjectSetting/index.tsx b/client/src/components/blocks/ProjectSetting/index.tsx index f1a81bf..37a166c 100644 --- a/client/src/components/blocks/ProjectSetting/index.tsx +++ b/client/src/components/blocks/ProjectSetting/index.tsx @@ -80,7 +80,7 @@ function ProjectSetting({ onProjectSubmit, trackTags }: ProjectSettingProps) { />
- +
);