adding control stuff for google meet

This commit is contained in:
Arjun Patel
2022-01-16 15:26:43 -08:00
parent a22e2954ba
commit 6ce8a9f0e0
2 changed files with 51 additions and 6 deletions
+32 -2
View File
@@ -1,11 +1,37 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { FaAngleDown, FaBell, FaClock, FaPlus, FaLink } from "react-icons/fa"; import { FaAngleDown, FaBell, FaClock, FaPlus, FaLink } from "react-icons/fa";
import { IoTimer } from "react-icons/io5"; import { IoTimer } from "react-icons/io5";
import { BsThreeDots } from "react-icons/bs"; import { BsThreeDots } from "react-icons/bs";
import Image from "next/image"; import Image from "next/image";
enum RoomTypeFilter {
all = "all",
live = "live",
scheduled = "scheduled",
recurring = "recurring",
expired = "expired",
}
enum RoomTimeFilter {
today = "today",
week = "week",
month = "month",
}
export default function DashboardRoom() { export default function DashboardRoom() {
// get rooms data realtime
useEffect(() => {
/**
* QUERY:
* all rooms in the past week
*
*/
});
// on CTRL + Q, new tab to google meet
// on CTRL + V, show modal to create meeting with the link
return ( return (
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md"> <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
{/* header */} {/* header */}
@@ -16,7 +42,7 @@ export default function DashboardRoom() {
className="right-1 rounded-lg py-1 px-2 ml-1 className="right-1 rounded-lg py-1 px-2 ml-1
shadow-md text-center text-white text-sm font-bold" shadow-md text-center text-white text-sm font-bold"
> >
CTRL + R CTRL + Q
</button> </button>
</span> </span>
@@ -37,6 +63,10 @@ export default function DashboardRoom() {
<span className="text-gray-300 hover:text-white hover:cursor-pointer"> <span className="text-gray-300 hover:text-white hover:cursor-pointer">
Recurring Recurring
</span> </span>
<span className="text-gray-300 hover:text-white hover:cursor-pointer">
Expired
</span>
</span> </span>
<span className="text-sm text-gray-300 flex flex-row items-center uppercase"> <span className="text-sm text-gray-300 flex flex-row items-center uppercase">
+19 -4
View File
@@ -41,6 +41,8 @@ interface AudioContextInterface {
inputDevices: MediaDeviceInfo[]; inputDevices: MediaDeviceInfo[];
outputDevices: MediaDeviceInfo[]; outputDevices: MediaDeviceInfo[];
ctrlDown: boolean;
} }
const AudioContext = React.createContext<AudioContextInterface | null>(null); const AudioContext = React.createContext<AudioContextInterface | null>(null);
@@ -66,6 +68,8 @@ export default function AudioContextProvider({ children }) {
const [isRecording, setIsRecording] = useState<Boolean>(false); const [isRecording, setIsRecording] = useState<Boolean>(false);
const [hasRecPermit, setHasRecPermit] = useState<Boolean>(false); const [hasRecPermit, setHasRecPermit] = useState<Boolean>(false);
const [ctrlDown, setCtrlDown] = useState<boolean>(false);
const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>({}); const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>({});
const [audioInputDeviceId, setAudioInputDevice] = useState<string>(null); // device id const [audioInputDeviceId, setAudioInputDevice] = useState<string>(null); // device id
const [audioOutputDeviceId, setAudioOutputDevice] = useState<string>(null); // device id const [audioOutputDeviceId, setAudioOutputDevice] = useState<string>(null); // device id
@@ -124,6 +128,8 @@ export default function AudioContextProvider({ children }) {
inputDevices, inputDevices,
outputDevices, outputDevices,
ctrlDown,
}; };
function muteOrUnmute() { function muteOrUnmute() {
@@ -259,11 +265,10 @@ export default function AudioContextProvider({ children }) {
// if there are still items in the player queue, then change the src and play the subsequent messages // if there are still items in the player queue, then change the src and play the subsequent messages
} }
// todo usecallback hook
const handleKeyUp = useCallback( const handleKeyUp = useCallback(
(event) => { (event) => {
console.log("on key up"); console.log("on key up");
console.log(event.keyCode);
// if was recording and released R, then stop recording and send message // if was recording and released R, then stop recording and send message
if (event.keyCode == KeyCode.R && selectedTeammate && isRecording) { if (event.keyCode == KeyCode.R && selectedTeammate && isRecording) {
@@ -300,6 +305,8 @@ export default function AudioContextProvider({ children }) {
console.log("sending message to " + selectedTeammate); console.log("sending message to " + selectedTeammate);
setSelectedTeamMember(null); setSelectedTeamMember(null);
} else if (event.keyCode == KeyCode.Ctrl) {
setCtrlDown(false);
} }
}, },
[isRecording, selectedTeammate] [isRecording, selectedTeammate]
@@ -312,10 +319,9 @@ export default function AudioContextProvider({ children }) {
} }
console.log(event.keyCode); console.log(event.keyCode);
console.log(selectedTeammate);
// recording // recording
if (event.keyCode == KeyCode.R) { if (event.keyCode == KeyCode.R && !ctrlDown) {
if (!audioInputDeviceId) { if (!audioInputDeviceId) {
toast.error("No microphone selected"); toast.error("No microphone selected");
} else if (!hasRecPermit) { } else if (!hasRecPermit) {
@@ -337,6 +343,7 @@ export default function AudioContextProvider({ children }) {
} else if (event.keyCode == KeyCode.Escape) { } else if (event.keyCode == KeyCode.Escape) {
setSelectedTeamMember(null); setSelectedTeamMember(null);
} else if (event.keyCode == KeyCode.Space) { } else if (event.keyCode == KeyCode.Space) {
// listen to last message in convo
if (isSilenceMode) { if (isSilenceMode) {
toast.error("you are in silence mode, please disable it first"); toast.error("you are in silence mode, please disable it first");
} else if (!selectedTeammate) { } else if (!selectedTeammate) {
@@ -358,6 +365,13 @@ export default function AudioContextProvider({ children }) {
toast("nothing to play"); toast("nothing to play");
} }
} }
} else if (event.keyCode == KeyCode.Ctrl) {
setCtrlDown(true);
toast("control down");
} else if (event.keyCode == KeyCode.Q && ctrlDown) {
toast("navigating to create google meet");
window.open(new URL("https://meet.google.com/"), "_blank");
} else { } else {
toast("Invalid keyboard shortcut."); toast("Invalid keyboard shortcut.");
} }
@@ -372,6 +386,7 @@ export default function AudioContextProvider({ children }) {
hasRecPermit, hasRecPermit,
isMuted, isMuted,
teamShortcutMappings, teamShortcutMappings,
ctrlDown,
] ]
); );