Spaces:
Paused
Paused
File size: 2,502 Bytes
a0fda44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { chatActions } from "../store/chatSlice";
import { useReactMediaRecorder } from "react-media-recorder";
import useSocket from "./useSocket";
import useSendMessage from "./useSendMessage";
import useUpload from "./useUpload";
import useCounter from "./useCounter";
const useRecorder = ({ currentChatRoom }) => {
const dispatch = useDispatch();
const { socketEmit } = useSocket();
const { sendMessage } = useSendMessage();
const [blob, setBlob] = useState();
const [recordSend, setRecordSend] = useState();
const { handleFileUpload } = useUpload(
(uploadData) => {
sendMessage({ url: uploadData.public_id, ...uploadData.extraFileData });
},
["audio"]
);
const { formattedTime, playCounter, startCounter, stopCounter } = useCounter({
showCentiseconds: true,
});
useEffect(() => {
if (recordSend) {
handleFileUpload({
target: {
files: [blob],
extraFileData: { duration: formattedTime.split(",")[0] },
},
});
setRecordSend(false);
} else {
dispatch(chatActions.resetMode());
}
stopCounter();
}, [blob]);
const {
startRecording: startMediaRecord,
stopRecording: stopMediaRecord,
resumeRecording: playMediaRecord,
pauseRecording: pauseMediaRecord,
} = useReactMediaRecorder({
video: false,
audio: true,
askPermissionOnMount: true,
blobPropertyBag: {
type: "audio/mp3",
},
onStop: (_, Blob) => {
setBlob(Blob);
dispatch(chatActions.setMode({ mode: "sending" }));
},
});
const startRecording = () => {
startMediaRecord();
socketEmit("user:recording", currentChatRoom._id);
startCounter();
dispatch(chatActions.setMode({ mode: "recording" }));
};
const endRecording = () => {
setRecordSend(true);
clearRecording();
};
const clearRecording = () => {
stopMediaRecord();
socketEmit("user:recordingStopped", currentChatRoom._id);
};
const playRecording = () => {
playMediaRecord();
playCounter(true);
socketEmit("user:recording", currentChatRoom._id);
};
const pauseRecording = () => {
pauseMediaRecord();
socketEmit("user:recording", currentChatRoom._id);
playCounter(false);
};
return {
formattedTime,
startRecording,
clearRecording,
endRecording,
playRecording,
pauseRecording,
};
};
export default useRecorder;
|