diff --git a/packages/desktop/package.json b/packages/desktop/package.json index 4d30e16..8dc6e81 100644 --- a/packages/desktop/package.json +++ b/packages/desktop/package.json @@ -109,6 +109,7 @@ "mongodb": "^4.4.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-hot-toast": "^2.2.0", "react-hotkeys": "^2.0.0", "react-icons": "^4.3.1", "react-query": "^3.34.16", diff --git a/packages/desktop/src/controller/sockets.tsx b/packages/desktop/src/controller/sockets.tsx new file mode 100644 index 0000000..3505dfe --- /dev/null +++ b/packages/desktop/src/controller/sockets.tsx @@ -0,0 +1,14 @@ +import SocketChannels from "@nirvana/core/sockets/channels"; +import { socket } from "../nirvanaApp"; +import { useEffect } from "react"; +export default function useSocketData() { + useEffect(() => { + socket.on( + SocketChannels.SEND_AUDIO_CLIP, + (relationshipId: string, audioChunks: any) => { + console.log(relationshipId); + console.log(audioChunks); + } + ); + }, []); +} diff --git a/packages/desktop/src/nirvanaApp.tsx b/packages/desktop/src/nirvanaApp.tsx index 88e7411..231e07d 100644 --- a/packages/desktop/src/nirvanaApp.tsx +++ b/packages/desktop/src/nirvanaApp.tsx @@ -23,7 +23,7 @@ function NirvanaApp() { - + diff --git a/packages/desktop/src/pages/Home/selectedConversation/index.tsx b/packages/desktop/src/pages/Home/selectedConversation/index.tsx index 6200411..4292221 100644 --- a/packages/desktop/src/pages/Home/selectedConversation/index.tsx +++ b/packages/desktop/src/pages/Home/selectedConversation/index.tsx @@ -1,3 +1,5 @@ +import { FaMicrophone, FaPlay, FaWindowClose } from "react-icons/fa"; +import { GlobalHotKeys, KeyMap } from "react-hotkeys"; import { Querytypes, useConversationDetails, @@ -5,11 +7,10 @@ import { useSendContactRequest, useUpdateRelationshipState, } from "../../../controller"; +import { useEffect, useState } from "react"; import { $selectedConversation } from "../../../controller/recoil"; import { Dimensions } from "../../../electron/constants"; -import { FaWindowClose } from "react-icons/fa"; -import { GlobalHotKeys } from "react-hotkeys"; import { RelationshipState } from "@nirvana/core/models/relationship.model"; import SocketChannels from "@nirvana/core/sockets/channels"; import UpdateRelationshipStateRequest from "@nirvana/core/requests/updateRelationshipState.request"; @@ -17,7 +18,7 @@ import UserStatusText from "../../../components/User/userStatusText"; import moment from "moment"; import { queryClient } from "../../../nirvanaApp"; import { socket } from "../../../nirvanaApp"; -import { useEffect } from "react"; +import toast from "react-hot-toast"; import { useRecoilState } from "recoil"; export default function SelectedConversation() { @@ -29,6 +30,37 @@ export default function SelectedConversation() { useConversationDetails(selectedConvo); const { mutate: sendContactRequest } = useSendContactRequest(); const { mutate: updateRelationshipState } = useUpdateRelationshipState(); + const [isRecording, setIsRecording] = useState(false); + + const [hasMicPermissions, sethasMicPermissions] = useState(false); + + // audio handling + // setting up recording permissions + useEffect(() => { + try { + // checking for permissions for recording + // won't work in https!!! + navigator.mediaDevices + .getUserMedia({ audio: true }) + .then((stream) => { + // stop playing anything + // stopBothVideoAndAudio(stream); + + console.log("Permission Granted"); + sethasMicPermissions(true); + }) + .catch((e) => { + console.log("Permission Denied"); + toast.error( + "Please make sure that you have connected a microphone and given permissions." + ); + sethasMicPermissions(false); + }); + } catch (error) { + console.log(error); + toast.error("something went wrong"); + } + }, []); useEffect(() => { // if selected, then change the bounds of this window as well @@ -128,6 +160,16 @@ export default function SelectedConversation() { } }; + const startRecording = async () => { + socketStartedSpeaking(); + setIsRecording(true); + }; + + const stopRecording = () => { + socketStopSpeaking(); + setIsRecording(false); + }; + // emit to room/conversation that someone started speaking const socketStartedSpeaking = () => { // send the room name and the update type @@ -155,12 +197,28 @@ export default function SelectedConversation() { const handleClose = () => { setSelectedConvo(null); }; - const keyMap = { CLOSE_SELECTED_CONVO: "esc" }; - const handlers = { CLOSE_SELECTED_CONVO: handleClose }; + const keyMap: KeyMap = { + CLOSE_SELECTED_CONVO: "esc", + START_RECORDING: { + name: "START RECORDING", + sequence: "r", + action: "keydown", + }, + STOP_RECORDING: { + name: "STOP RECORDING", + sequence: "r", + action: "keyup", + }, + }; + const handlers = { + CLOSE_SELECTED_CONVO: handleClose, + START_RECORDING: startRecording, + STOP_RECORDING: stopRecording, + }; return ( <> - +
{/* close marker */} @@ -195,6 +253,20 @@ export default function SelectedConversation() { + + + + {isRecording ? ( + + ) : ( + + )} + + + + + +
); diff --git a/yarn.lock b/yarn.lock index a801978..6e70d85 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3991,6 +3991,11 @@ globby@^11.0.1, globby@^11.0.4: merge2 "^1.4.1" slash "^3.0.0" +goober@^2.1.1: + version "2.1.8" + resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.8.tgz#e592c04d093cb38f77b38cfcb012b7811c85765e" + integrity sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ== + google-auth-library@^5.9.2: version "5.10.1" resolved "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.10.1.tgz" @@ -6703,6 +6708,13 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-hot-toast@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9" + integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g== + dependencies: + goober "^2.1.1" + react-hotkeys@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"