From c765bea7537162b933a9bec6e08366124fb9cb3d Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Sat, 15 Jan 2022 23:47:32 -0800 Subject: [PATCH] testing audio playing which looks like it is --- components/Dashboard/TeamVoiceLine.tsx | 10 +++++- contexts/audioContext.tsx | 34 ++++++++++++++++++- package-lock.json | 45 ++++++++++++++++++++++++++ package.json | 1 + 4 files changed, 88 insertions(+), 2 deletions(-) diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index 0f0d905..0bac0de 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/components/Dashboard/TeamVoiceLine.tsx @@ -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() { )} + + + + ) : ( diff --git a/contexts/audioContext.tsx b/contexts/audioContext.tsx index b23b660..5c24b52 100644 --- a/contexts/audioContext.tsx +++ b/contexts/audioContext.tsx @@ -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(false); + + useEffect(() => { + setTimeout( + function () { + //Start the timer + setStartPlaying(true); + }.bind(this), + 2000 + ); + }); + return ( - {children} + + {children} + {/* player for audio messages */} + + {startPlaying ? ( + console.log("onPlay")} + /> + ) : ( + <> + )} + ); } diff --git a/package-lock.json b/package-lock.json index 63309ae..5eb861d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index bb28255..91413ab 100644 --- a/package.json +++ b/package.json @@ -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"