From 595bda75ad4dad571b8c1dc857bd70a1f8c6a6c6 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sat, 15 Jan 2022 19:57:42 -0800 Subject: [PATCH] fixing some bugs as adding event listeners can't be changed as they put it in memory or something --- contexts/audioContext.tsx | 72 ++++++++++++++++++++++++++++++++--- package-lock.json | 80 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 148 insertions(+), 5 deletions(-) diff --git a/contexts/audioContext.tsx b/contexts/audioContext.tsx index e5346e8..b9c5845 100644 --- a/contexts/audioContext.tsx +++ b/contexts/audioContext.tsx @@ -1,6 +1,7 @@ import React, { useContext, useEffect, useState } from "react"; import toast from "react-hot-toast"; import { KeyCode } from "../globals/keycode"; +import MicRecorder from "mic-recorder-to-mp3"; interface AudioContextInterface { selectedTeammate: string; // can only have one selected @@ -17,16 +18,34 @@ interface AudioContextInterface { isMuted: Boolean; isSilenceMode: Boolean; // won't automatically listen to notifications or sounds + + hasRecPermit: Boolean; // permission to record or not } const AudioContext = React.createContext(null); +const Mp3Recorder = new MicRecorder({ bitRate: 128 }); + export default function AudioContextProvider({ children }) { // SECTION: set up for shortcuts and recording and such const [selectedTeammate, setSelectedTeamMember] = useState(null); // id of selected teammate const [isRecording, setIsRecording] = useState(false); + const [hasRecPermit, setHasRecPermit] = useState(false); - const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>({}); + const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>(null); + + useEffect(() => { + navigator.mediaDevices + .getUserMedia({ audio: true }) + .then(() => { + console.log("Permission Granted"); + setHasRecPermit(true); + }) + .catch(() => { + console.log("Permission Denied"); + setHasRecPermit(false); + }); + }, []); useEffect(() => { document.addEventListener("keydown", handleKeyboardShortcut); @@ -36,16 +55,53 @@ export default function AudioContextProvider({ children }) { document.removeEventListener("keydown", handleKeyboardShortcut); document.removeEventListener("keyup", handleKeyUp); }; - }, []); + }, [teamShortcutMappings]); + + // SECTION: recording + function startRecording() { + if (!hasRecPermit) { + toast.error("You did not allow recording permission!"); + } else { + Mp3Recorder.start() + .then(() => { + toast.success("started recording"); + }) + .catch((e) => + toast.error("there was a problem in starting your recording") + ); + } + } + + // everything to do with audio file + function stopRecording() { + Mp3Recorder.stop() + .getMp3() + .then(([buffer, blob]) => { + const blobURL = URL.createObjectURL(blob); + + const file = new File(buffer, "me-at-thevoice.mp3", { + type: blob.type, + lastModified: Date.now(), + }); + + const player = new Audio(URL.createObjectURL(file)); + player.play(); + + toast.success("Audio Clip Sent"); + }) + .catch((e) => toast.error("Problem in sending clip")); + } function handleKeyUp(event) { console.log("on key up"); // if was recording and released R, then stop recording - if (event.keyCode == KeyCode.R) { + if (event.keyCode == KeyCode.R && selectedTeammate) { console.log("stopped recording"); setIsRecording(false); setSelectedTeamMember(null); + + // stopRecording(); } } @@ -55,11 +111,14 @@ export default function AudioContextProvider({ children }) { } console.log(event.keyCode); + console.log(selectedTeammate); + console.log(teamShortcutMappings); // recording - if (event.keyCode == KeyCode.R) { + if (event.keyCode == KeyCode.R && selectedTeammate) { console.log("started recording"); setIsRecording(true); + // startRecording(); } // if we have a valid user for such a shortcut, then go ahead...otherwise else if (teamShortcutMappings[event.keyCode]) { @@ -74,7 +133,7 @@ export default function AudioContextProvider({ children }) { } function addTeamShortcutBinding(keyCode: number, userId: string) { - setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: [userId] })); + setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: userId })); } const value: AudioContextInterface = { @@ -85,8 +144,11 @@ export default function AudioContextProvider({ children }) { teamShortcutMappings, isMuted: false, isSilenceMode: false, + hasRecPermit, }; + console.log(value); + return ( {children} ); diff --git a/package-lock.json b/package-lock.json index 9fbb906..63309ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "firebase": "^9.6.2", "firebase-admin": "^10.0.1", "js-cookie": "^3.0.1", + "mic-recorder-to-mp3": "^2.2.2", "moment": "^2.29.1", "next": "12.0.7", "react": "17.0.2", @@ -5973,6 +5974,14 @@ "safe-buffer": "^5.0.1" } }, + "node_modules/lamejs": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz", + "integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==", + "dependencies": { + "use-strict": "1.0.1" + } + }, "node_modules/language-subtag-registry": { "version": "0.3.21", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz", @@ -6219,6 +6228,17 @@ "node": ">= 8" } }, + "node_modules/mic-recorder-to-mp3": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz", + "integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==", + "dependencies": { + "lamejs": "^1.2.0" + }, + "peerDependencies": { + "webrtc-adapter": ">=4.1.1" + } + }, "node_modules/micromatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", @@ -8052,6 +8072,12 @@ "compute-scroll-into-view": "^1.0.17" } }, + "node_modules/sdp": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.0.3.tgz", + "integrity": "sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==", + "peer": true + }, "node_modules/selenium-webdriver": { "version": "4.0.0-rc-1", "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-rc-1.tgz", @@ -8819,6 +8845,11 @@ "punycode": "^2.1.0" } }, + "node_modules/use-strict": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz", + "integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A=" + }, "node_modules/use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", @@ -8885,6 +8916,19 @@ "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==" }, + "node_modules/webrtc-adapter": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.1.1.tgz", + "integrity": "sha512-1yXevP7TeZGmklEXkvQVrZp3fOSJlLeXNGCA7NovQokxgP3/e2T3EVGL0eKU87S9vKppWjvRWqnJeSANEspOBg==", + "peer": true, + "dependencies": { + "sdp": "^3.0.2" + }, + "engines": { + "node": ">=6.0.0", + "npm": ">=3.10.0" + } + }, "node_modules/websocket-driver": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", @@ -13821,6 +13865,14 @@ "safe-buffer": "^5.0.1" } }, + "lamejs": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz", + "integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==", + "requires": { + "use-strict": "1.0.1" + } + }, "language-subtag-registry": { "version": "0.3.21", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz", @@ -14041,6 +14093,14 @@ "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "dev": true }, + "mic-recorder-to-mp3": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz", + "integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==", + "requires": { + "lamejs": "^1.2.0" + } + }, "micromatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", @@ -15354,6 +15414,12 @@ "compute-scroll-into-view": "^1.0.17" } }, + "sdp": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.0.3.tgz", + "integrity": "sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==", + "peer": true + }, "selenium-webdriver": { "version": "4.0.0-rc-1", "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-rc-1.tgz", @@ -15954,6 +16020,11 @@ "punycode": "^2.1.0" } }, + "use-strict": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz", + "integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A=" + }, "use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", @@ -16011,6 +16082,15 @@ "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==" }, + "webrtc-adapter": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.1.1.tgz", + "integrity": "sha512-1yXevP7TeZGmklEXkvQVrZp3fOSJlLeXNGCA7NovQokxgP3/e2T3EVGL0eKU87S9vKppWjvRWqnJeSANEspOBg==", + "peer": true, + "requires": { + "sdp": "^3.0.2" + } + }, "websocket-driver": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", diff --git a/package.json b/package.json index da52f6b..bb28255 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "firebase": "^9.6.2", "firebase-admin": "^10.0.1", "js-cookie": "^3.0.1", + "mic-recorder-to-mp3": "^2.2.2", "moment": "^2.29.1", "next": "12.0.7", "react": "17.0.2",