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

testing audio playing which looks like it is

Browse Source
This commit is contained in:
Arjun Patel
2022-01-15 23:47:32 -08:00
parent 54fd98b1a9
commit c765bea753
4 changed files with 88 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/TeamVoiceLine.tsx
+9 -1
View File
@@ -170,7 +170,7 @@ export default function TeamVoiceLine() {
key={i}
className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${
tmember.id == audioContext.selectedTeammate
? "bg-white scale-150 z-20"
? "bg-white scale-150 z-20 translate-x-2/4"
: ""
}`}
>
@@ -245,6 +245,14 @@ export default function TeamVoiceLine() {
)}
</Tooltip>
<Tooltip title="press space to play last convo">
<button className="ml-2 h-10 border-green-400 border-2 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
<span className="text-sm text-green-500 font-bold">
SPACE
</span>
</button>
</Tooltip>
<BsThreeDots className="text-black ml-2 hover:cursor-pointer" />
</>
) : (
contexts/audioContext.tsx
+33 -1
View File
@@ -3,6 +3,8 @@ import toast from "react-hot-toast";
import { KeyCode } from "../globals/keycode";
import MicRecorder from "mic-recorder-to-mp3";
import AudioPlayer from "react-h5-audio-player";
interface AudioContextInterface {
selectedTeammate: string; // can only have one selected
selectTeamMember: Function;
@@ -227,6 +229,9 @@ export default function AudioContextProvider({ children }) {
[isRecording, selectedTeammate]
);
const testAudioClip =
"https://firebasestorage.googleapis.com/v0/b/nirvana-ccf04.appspot.com/o/messages%2F0E248EA9-AABC-4921-A06B-F1330DFBEE4A.m4a?alt=media&token=9cc81944-96a8-449f-a08f-50925d776565";
const handleKeyboardShortcut = useCallback(
(event) => {
if (event.repeat) {
@@ -261,6 +266,8 @@ export default function AudioContextProvider({ children }) {
toast("Invalid keyboard shortcut.");
}
// todo play message if pressing space
// todo if we press the same shortcut twice, deactive selected user
},
[
@@ -292,8 +299,33 @@ export default function AudioContextProvider({ children }) {
setSelectedTeamMember(userId);
}
const [startPlaying, setStartPlaying] = useState<Boolean>(false);
useEffect(() => {
setTimeout(
function () {
//Start the timer
setStartPlaying(true);
}.bind(this),
2000
);
});
return (
<AudioContext.Provider value={value}>{children}</AudioContext.Provider>
<AudioContext.Provider value={value}>
{children}
{/* player for audio messages */}
{startPlaying ? (
<AudioPlayer
autoPlay
src={testAudioClip}
onPlay={(e) => console.log("onPlay")}
/>
) : (
<></>
)}
</AudioContext.Provider>
);
}
package-lock.json
Generated
+45
View File
@@ -15,6 +15,7 @@
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-h5-audio-player": "^3.8.1",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-moment": "^1.1.1"
@@ -1777,6 +1778,16 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"node_modules/@iconify/icons-mdi": {
"version": "1.1.42",
"resolved": "https://registry.npmjs.org/@iconify/icons-mdi/-/icons-mdi-1.1.42.tgz",
"integrity": "sha512-YHX2Z0s+5Y5EQlBbQ2xQV9pI+RmTr4EwRaqtTEPjfP5g8cekQzR7A8aSohLtgq6m+nziDagIROFFZIFzkS+LJw=="
},
"node_modules/@iconify/react": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-1.1.4.tgz",
"integrity": "sha512-oxq8IMOq8q3nKGiDHbQPC8FcFuBsKve68JWBo140d5LRnj0bv5TB/FE/y01ZSvEZ7PlI2HIrnb2qivPN8kTDgw=="
},
"node_modules/@napi-rs/triples": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz",
@@ -7778,6 +7789,20 @@
"react": "17.0.2"
}
},
"node_modules/react-h5-audio-player": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/react-h5-audio-player/-/react-h5-audio-player-3.8.1.tgz",
"integrity": "sha512-dMW/eAsOxnJtKthiMqE5Qo87QxOlqlbTu3NYqR63CxLvIntUpWRJhPsmsVa4+I5jj0ZSwpPRxvfZyhhJmBemMA==",
"dependencies": {
"@babel/runtime": "^7.10.2",
"@iconify/icons-mdi": "^1.0.46",
"@iconify/react": "^1.1.3"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0",
"react-dom": "^16.3.0 || ^17.0.0"
}
},
"node_modules/react-hot-toast": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
@@ -10680,6 +10705,16 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"@iconify/icons-mdi": {
"version": "1.1.42",
"resolved": "https://registry.npmjs.org/@iconify/icons-mdi/-/icons-mdi-1.1.42.tgz",
"integrity": "sha512-YHX2Z0s+5Y5EQlBbQ2xQV9pI+RmTr4EwRaqtTEPjfP5g8cekQzR7A8aSohLtgq6m+nziDagIROFFZIFzkS+LJw=="
},
"@iconify/react": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-1.1.4.tgz",
"integrity": "sha512-oxq8IMOq8q3nKGiDHbQPC8FcFuBsKve68JWBo140d5LRnj0bv5TB/FE/y01ZSvEZ7PlI2HIrnb2qivPN8kTDgw=="
},
"@napi-rs/triples": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz",
@@ -15213,6 +15248,16 @@
"scheduler": "^0.20.2"
}
},
"react-h5-audio-player": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/react-h5-audio-player/-/react-h5-audio-player-3.8.1.tgz",
"integrity": "sha512-dMW/eAsOxnJtKthiMqE5Qo87QxOlqlbTu3NYqR63CxLvIntUpWRJhPsmsVa4+I5jj0ZSwpPRxvfZyhhJmBemMA==",
"requires": {
"@babel/runtime": "^7.10.2",
"@iconify/icons-mdi": "^1.0.46",
"@iconify/react": "^1.1.3"
}
},
"react-hot-toast": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
package.json
+1
View File
@@ -17,6 +17,7 @@
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-h5-audio-player": "^3.8.1",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-moment": "^1.1.1"