talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixing some bugs as adding event listeners can't be changed as they put it in memory or something

Browse Source
This commit is contained in:
Arjun Patel
2022-01-15 19:57:42 -08:00
parent c9108a6d50
commit 595bda75ad
3 changed files with 148 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contexts/audioContext.tsx
+67 -5
View File
@@ -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<AudioContextInterface | null>(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<string>(null); // id of selected teammate
const [isRecording, setIsRecording] = useState<Boolean>(false);
const [hasRecPermit, setHasRecPermit] = useState<Boolean>(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 (
<AudioContext.Provider value={value}>{children}</AudioContext.Provider>
);
package-lock.json
Generated
+80
View File
@@ -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",
package.json
+1
View File
@@ -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",