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

adding devices and all of the little enhancements

Browse Source
This commit is contained in:
Arjun Patel
2022-01-15 21:51:21 -08:00
parent 595bda75ad
commit 2f6165eab9
2 changed files with 240 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/Header.tsx
+121 -24
View File
@@ -13,13 +13,15 @@ import {
FaAngleDown,
FaCheck,
FaDatabase,
FaMicrophoneAltSlash,
FaVolumeMute,
} from "react-icons/fa";
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
import router from "next/router";
import Moment from "react-moment";
import { User } from "../../models/user";
import { generateGreetings } from "../../helpers/dateTime";
import { Dropdown, Menu } from "antd";
import { Dropdown, Menu, Tooltip } from "antd";
import { useRouter } from "next/router";
import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
import { toast } from "react-hot-toast";
@@ -28,6 +30,7 @@ import { useEffect, useState } from "react";
import TeamService from "../../services/teamService";
import { Team } from "../../models/team";
import Loading from "../Loading";
import { useAudioContext } from "../../contexts/audioContext";
const teamService = new TeamService();
@@ -36,9 +39,25 @@ export default function Header() {
const { team, user, userTeamMember } = useTeamDashboardContext();
const router = useRouter();
const { teamid } = router.query;
const {
hasRecPermit,
audioInputDeviceId,
audioOutputDeviceId,
selectAudioOutput,
selectAudioInput,
inputDevices,
outputDevices,
isMuted,
isSilenceMode,
muteOrUnmute,
silenceOrLivenMode,
} = useAudioContext();
const [usersTeams, setUserTeams] = useState<Team[]>(null);
// get team data for the team dropdown
useEffect(() => {
(async function () {
try {
@@ -79,6 +98,28 @@ export default function Header() {
toast.error("You are not a team admin!");
}
const searchBar = (
<div className="pt-2 flex flex-row relative items-center">
<button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
<FaSearch className="text-white" />
</button>
<input
className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
type="search"
name="search"
placeholder="Search"
/>
<button
className="absolute right-1 rounded-lg py-1 px-2 ml-1
shadow-md text-center text-white text-sm font-bold"
>
CTRL + K
</button>
</div>
);
const TeamsMenu = (
<Menu key={2} title="teams">
<Menu.Item onClick={handleAdminRoute} key={1} icon={<FaDatabase />}>
@@ -130,28 +171,82 @@ export default function Header() {
</Menu>
);
const searchBar = (
<div className="pt-2 flex flex-row relative items-center">
<button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
<FaSearch className="text-white" />
</button>
<input
className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
type="search"
name="search"
placeholder="Search"
/>
<button
className="absolute right-1 rounded-lg py-1 px-2 ml-1
shadow-md text-center text-white text-sm font-bold"
>
CTRL + K
</button>
</div>
const audioInputDropMenu = (
<Menu title="audio input">
{inputDevices.map((device, i) => {
return (
<Menu.Item
key={device.deviceId}
icon={device.deviceId == audioInputDeviceId ? <FaCheck /> : <></>}
>
<button>{device.label}</button>
</Menu.Item>
);
})}
</Menu>
);
const audioOutputDropMenu = (
<Menu title="audio ouput">
{outputDevices.map((device, i) => {
return (
<Menu.Item
key={device.deviceId}
icon={device.deviceId == audioOutputDeviceId ? <FaCheck /> : <></>}
>
<button>{device.label}</button>
</Menu.Item>
);
})}
</Menu>
);
function renderAudioInput() {
if (!hasRecPermit) {
return (
<Tooltip title="enable mic permissions">
<span>
<FaMicrophoneAltSlash className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
</span>
</Tooltip>
);
}
if (isMuted) {
return (
<span onClick={muteOrUnmute}>
<FaMicrophoneAltSlash className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
</span>
);
}
return (
<Dropdown overlay={audioInputDropMenu}>
<span onClick={muteOrUnmute}>
<FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
</span>
</Dropdown>
);
}
function renderAudioOutput() {
if (isSilenceMode) {
return (
<span onClick={silenceOrLivenMode}>
<FaVolumeMute className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
</span>
);
}
return (
<Dropdown overlay={audioOutputDropMenu}>
<span onClick={silenceOrLivenMode}>
<FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
</span>
</Dropdown>
);
}
const today = new Date();
const periodOfDay = generateGreetings();
return (
@@ -180,9 +275,11 @@ export default function Header() {
<span className="flex flex-row items-center space-x-5">
{/* search bar */}
<FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
<FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
<FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
{/* <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" /> */}
{renderAudioOutput()}
{renderAudioInput()}
{/* teams menu */}
contexts/audioContext.tsx
+119 -21
View File
@@ -5,7 +5,7 @@ import MicRecorder from "mic-recorder-to-mp3";
interface AudioContextInterface {
selectedTeammate: string; // can only have one selected
setSelectedTeamMember: Function;
selectTeamMember: Function;
teamShortcutMappings: {};
addTeamShortcutBinding: Function;
@@ -18,14 +18,35 @@ interface AudioContextInterface {
isMuted: Boolean;
isSilenceMode: Boolean; // won't automatically listen to notifications or sounds
muteOrUnmute: Function;
silenceOrLivenMode: Function;
hasRecPermit: Boolean; // permission to record or not
audioInputDeviceId: string;
audioOutputDeviceId: string;
selectAudioOutput: Function;
selectAudioInput: Function;
inputDevices: MediaDeviceInfo[];
outputDevices: MediaDeviceInfo[];
}
const AudioContext = React.createContext<AudioContextInterface | null>(null);
const Mp3Recorder = new MicRecorder({ bitRate: 128 });
function stopBothVideoAndAudio(stream) {
stream.getTracks().forEach(function (track) {
if (track.readyState == "live") {
track.stop();
console.log("stopped playing anything");
}
});
}
export default function AudioContextProvider({ children }) {
// SECTION: set up for shortcuts and recording and such
const [selectedTeammate, setSelectedTeamMember] = useState<string>(null); // id of selected teammate
@@ -33,20 +54,99 @@ export default function AudioContextProvider({ children }) {
const [hasRecPermit, setHasRecPermit] = useState<Boolean>(false);
const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>(null);
const [audioInputDeviceId, setAudioInputDevice] = useState<string>(null); // device id
const [audioOutputDeviceId, setAudioOutputDevice] = useState<string>(null); // device id
const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
const [outputDevices, setOutputDevices] = useState<MediaDeviceInfo[]>([]);
const [isMuted, setIsMuted] = useState<Boolean>(false);
const [isSilenceMode, setIseSilenceMode] = useState<Boolean>(false);
const value: AudioContextInterface = {
selectedTeammate,
selectTeamMember,
addTeamShortcutBinding,
isRecording,
teamShortcutMappings,
isMuted,
isSilenceMode,
muteOrUnmute,
silenceOrLivenMode,
hasRecPermit,
audioInputDeviceId,
audioOutputDeviceId,
selectAudioOutput,
selectAudioInput,
inputDevices,
outputDevices,
};
function muteOrUnmute() {
setIsMuted((prevVal) => !prevVal);
}
function silenceOrLivenMode() {
setIseSilenceMode((prevVal) => !prevVal);
}
function selectAudioOutput(deviceId: string) {
setAudioOutputDevice(deviceId);
}
function selectAudioInput(deviceId: string) {
setAudioInputDevice(deviceId);
}
// set up audio
useEffect(() => {
(async function () {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const inputDevices: MediaDeviceInfo[] = devices.filter(
(d) => d.kind == "audioinput"
);
setAudioInputDevice(inputDevices ? inputDevices[0].deviceId : null);
setInputDevices(inputDevices);
const outputDevices: MediaDeviceInfo[] = devices.filter(
(d) => d.kind == "audiooutput"
);
setAudioOutputDevice(outputDevices ? outputDevices[0].deviceId : null);
setOutputDevices(outputDevices);
console.log(devices);
} catch (e) {
console.log(e);
toast.error("Problem in setting up audio devices");
}
})();
}, []);
useEffect(() => {
navigator.mediaDevices
.getUserMedia({ audio: true })
.then(() => {
.getUserMedia({ audio: { deviceId: audioInputDeviceId } })
.then((stream) => {
// stop playing anything
stopBothVideoAndAudio(stream);
console.log("Permission Granted");
setHasRecPermit(true);
})
.catch(() => {
.catch((e) => {
console.log("Permission Denied");
toast.error("Please make sure that you have connected a microphone.");
setHasRecPermit(false);
});
}, []);
}, [audioInputDeviceId]); // change it everytime we change the input device
// shortcut handlers need to be updated as the function has to have the fresh state
useEffect(() => {
document.addEventListener("keydown", handleKeyboardShortcut);
document.addEventListener("keyup", handleKeyUp);
@@ -55,10 +155,10 @@ export default function AudioContextProvider({ children }) {
document.removeEventListener("keydown", handleKeyboardShortcut);
document.removeEventListener("keyup", handleKeyUp);
};
}, [teamShortcutMappings]);
}, [teamShortcutMappings, selectedTeammate]);
// SECTION: recording
function startRecording() {
async function startRecording() {
if (!hasRecPermit) {
toast.error("You did not allow recording permission!");
} else {
@@ -73,7 +173,7 @@ export default function AudioContextProvider({ children }) {
}
// everything to do with audio file
function stopRecording() {
async function stopRecording() {
Mp3Recorder.stop()
.getMp3()
.then(([buffer, blob]) => {
@@ -95,13 +195,15 @@ export default function AudioContextProvider({ children }) {
function handleKeyUp(event) {
console.log("on key up");
console.log(selectedTeammate); // use this to send the message to the right person
// if was recording and released R, then stop recording
if (event.keyCode == KeyCode.R && selectedTeammate) {
console.log("stopped recording");
setIsRecording(false);
setSelectedTeamMember(null);
// stopRecording();
stopRecording();
}
}
@@ -112,13 +214,16 @@ export default function AudioContextProvider({ children }) {
console.log(event.keyCode);
console.log(selectedTeammate);
console.log(teamShortcutMappings);
// recording
if (event.keyCode == KeyCode.R && selectedTeammate) {
if (!audioInputDeviceId) {
toast.error("No microphone selected");
}
console.log("started recording");
setIsRecording(true);
// startRecording();
startRecording();
}
// if we have a valid user for such a shortcut, then go ahead...otherwise
else if (teamShortcutMappings[event.keyCode]) {
@@ -136,16 +241,9 @@ export default function AudioContextProvider({ children }) {
setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: userId }));
}
const value: AudioContextInterface = {
selectedTeammate,
setSelectedTeamMember,
addTeamShortcutBinding,
isRecording,
teamShortcutMappings,
isMuted: false,
isSilenceMode: false,
hasRecPermit,
};
function selectTeamMember(userId: string) {
setSelectedTeamMember(userId);
}
console.log(value);