adding control stuff for google meet
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user