having one solution for different components of app
This commit is contained in:
Arjun Patel
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
getAuth,
|
||||
GoogleAuthProvider,
|
||||
onAuthStateChanged,
|
||||
signInWithPopup,
|
||||
signOut,
|
||||
User,
|
||||
} from "firebase/auth";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import Loading from "../components/Loading";
|
||||
import firebase from "../services/firebaseService";
|
||||
import cookie from "js-cookie";
|
||||
|
||||
const AuthContext = React.createContext(null);
|
||||
const googleProvider = new GoogleAuthProvider();
|
||||
|
||||
const auth = getAuth();
|
||||
|
||||
export function AuthProvider({ children }) {
|
||||
const [currUser, setCurrUser] = useState();
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = onAuthStateChanged(auth, async (user) => {
|
||||
setLoading(true);
|
||||
|
||||
console.log("change in auth");
|
||||
if (user) {
|
||||
setCurrUser(user);
|
||||
|
||||
// set the token in the cookies for ssr verification
|
||||
const token = await user.getIdToken();
|
||||
// nookies.set(undefined, "token", token, { path: "/" });
|
||||
cookie.set("auth", token);
|
||||
} else {
|
||||
// nookies.set(undefined, "token", "", { path: "/" });
|
||||
cookie.remove("auth");
|
||||
|
||||
setCurrUser(null);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
const signInGoogle = () => {
|
||||
return signInWithPopup(auth, googleProvider)
|
||||
.then((res) => {
|
||||
// This gives you a Google Access Token. You can use it to access the Google API.
|
||||
const credential = GoogleAuthProvider.credentialFromResult(res);
|
||||
|
||||
const token = credential.accessToken;
|
||||
// The signed-in user info.
|
||||
const user = res.user;
|
||||
|
||||
setCurrUser(user);
|
||||
|
||||
console.log(user);
|
||||
})
|
||||
.catch((error) => {
|
||||
// Handle Errors here.
|
||||
const errorCode = error.code;
|
||||
const errorMessage = error.message;
|
||||
// The email of the user's account used.
|
||||
const email = error.email;
|
||||
// The AuthCredential type that was used.
|
||||
const credential = GoogleAuthProvider.credentialFromError(error);
|
||||
console.log(error);
|
||||
toast.error("something went wrong");
|
||||
});
|
||||
};
|
||||
|
||||
const logOut = async () => {
|
||||
setLoading(true);
|
||||
|
||||
console.log("logging user out");
|
||||
|
||||
Promise.resolve(await signOut(auth));
|
||||
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
const value = {
|
||||
currUser,
|
||||
signInGoogle,
|
||||
logOut,
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={value}>
|
||||
{!loading && children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// custom hook to use the authUserContext and access currUser
|
||||
export function useAuth() {
|
||||
return useContext(AuthContext);
|
||||
}
|
||||
@@ -0,0 +1,646 @@
|
||||
import React, { useCallback, useContext, useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { KeyCode } from "../globals/keycode";
|
||||
import MicRecorder from "mic-recorder-to-mp3";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
import AudioPlayer from "react-h5-audio-player";
|
||||
import "react-h5-audio-player/lib/styles.css";
|
||||
import CloudStorageService from "../services/cloudStorageService";
|
||||
import { Message } from "../models/message";
|
||||
import { useAuth } from "./authContext";
|
||||
import { SendService } from "../services/sendService";
|
||||
import { useTeamDashboardContext } from "./teamDashboardContext";
|
||||
import isValidHttpUrl from "../helpers/urlHelper";
|
||||
import { GlobalHotKeys, KeyMap } from "react-hotkeys";
|
||||
import Announcement from "../models/announcement";
|
||||
|
||||
interface KeyboardContextInterface {
|
||||
selectedTeammate: string; // can only have one selected
|
||||
selectTeamMember: Function;
|
||||
|
||||
teamShortcutMappings: {};
|
||||
addTeamShortcutBinding: Function;
|
||||
|
||||
isRecording: Boolean; // can only record if someone is selected or maybe for an announcement
|
||||
isRecordingAnnouncement: boolean;
|
||||
|
||||
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[];
|
||||
|
||||
ctrlDown: boolean;
|
||||
|
||||
showModalType: ShowModalType;
|
||||
handleModalType: Function;
|
||||
pastedLink: string;
|
||||
|
||||
handleAddAudioToQueue: Function;
|
||||
}
|
||||
|
||||
export enum ShowModalType {
|
||||
createLink = "link",
|
||||
createRoom = "room",
|
||||
powerPlayer = "powerPlayer",
|
||||
na = "none",
|
||||
}
|
||||
|
||||
const KeyboardContext = React.createContext<KeyboardContextInterface | null>(
|
||||
null
|
||||
);
|
||||
|
||||
function stopBothVideoAndAudio(stream) {
|
||||
stream.getTracks().forEach(function (track) {
|
||||
if (track.readyState == "live") {
|
||||
track.stop();
|
||||
|
||||
console.log("stopped playing anything");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const cloudStorageService = new CloudStorageService();
|
||||
const sendService = new SendService();
|
||||
|
||||
export default function KeyboardContextProvider({ children }) {
|
||||
const { currUser } = useAuth();
|
||||
|
||||
// SECTION: set up for shortcuts and recording and such
|
||||
const [selectedTeammate, setSelectedTeamMember] = useState<string>(null); // id of selected teammate
|
||||
const [isRecording, setIsRecording] = useState<Boolean>(false);
|
||||
const [isRecordingAnnouncement, setIsRecordingAnnouncement] =
|
||||
useState<boolean>(false);
|
||||
const [hasRecPermit, setHasRecPermit] = useState<Boolean>(false);
|
||||
|
||||
const [ctrlDown, setCtrlDown] = useState<boolean>(false);
|
||||
|
||||
const [teamShortcutMappings, setTeamShortcutMappings] = useState<{}>({});
|
||||
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 [pastedLink, setPastedLink] = useState<string>(null);
|
||||
const [showModalType, setShowModalType] = useState<ShowModalType>(
|
||||
ShowModalType.na
|
||||
);
|
||||
|
||||
const handleModalType = (modalType: ShowModalType) => {
|
||||
handleResetView();
|
||||
setShowModalType(modalType);
|
||||
};
|
||||
|
||||
const [recorder, setRecorder] = useState<MicRecorder>(
|
||||
new MicRecorder({ bitRate: 128 })
|
||||
);
|
||||
|
||||
const [audioQueue, setAudioQueue] = useState<string[]>([]); // queue for the player to keep playing
|
||||
|
||||
// playing incoming messages
|
||||
const { allMessages, messagesByTeamMate, team } = useTeamDashboardContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (!allMessages.length) {
|
||||
toast("no message to play");
|
||||
return;
|
||||
}
|
||||
|
||||
// only play if it's incoming, as I listened to my message before sending it
|
||||
if (allMessages[0].receiverUserId == currUser.uid) {
|
||||
console.log("playing message");
|
||||
console.log(allMessages[0]);
|
||||
|
||||
// select the user
|
||||
setSelectedTeamMember(allMessages[0].senderUserId);
|
||||
|
||||
// start player on the bottom
|
||||
// autoplay message
|
||||
// add to the queue
|
||||
handleAddAudioToQueue([allMessages[0].audioDataUrl]);
|
||||
}
|
||||
}, [allMessages]);
|
||||
|
||||
// manage audio queue
|
||||
useEffect(() => {
|
||||
// every time queue changes,
|
||||
// setPlayerSrc as the next item if there is any to play it
|
||||
|
||||
if (audioQueue && audioQueue.length > 0) {
|
||||
toast("Adding Message to Queue");
|
||||
|
||||
// todo: edge case, if it's the same link again, then still play it somehow
|
||||
if (playerSrc == audioQueue[0]) {
|
||||
// play empty one and then add the next audio file
|
||||
setPlayerSrc("");
|
||||
|
||||
setTimeout(() => {
|
||||
setPlayerSrc(audioQueue[0]);
|
||||
}, 1000);
|
||||
} else {
|
||||
setPlayerSrc(audioQueue[0]);
|
||||
}
|
||||
}
|
||||
|
||||
if (!audioQueue || audioQueue.length == 0) {
|
||||
setPlayerSrc(null);
|
||||
}
|
||||
}, [audioQueue]);
|
||||
|
||||
// show toast when recording
|
||||
useEffect(() => {
|
||||
if (isRecordingAnnouncement || isRecording) {
|
||||
toast.loading("Recording...");
|
||||
} else {
|
||||
toast.dismiss();
|
||||
}
|
||||
}, [isRecording, isRecordingAnnouncement]);
|
||||
|
||||
const value: KeyboardContextInterface = {
|
||||
selectedTeammate,
|
||||
selectTeamMember,
|
||||
addTeamShortcutBinding,
|
||||
isRecording,
|
||||
isRecordingAnnouncement,
|
||||
teamShortcutMappings,
|
||||
|
||||
isMuted,
|
||||
isSilenceMode,
|
||||
muteOrUnmute,
|
||||
silenceOrLivenMode,
|
||||
|
||||
hasRecPermit,
|
||||
|
||||
audioInputDeviceId,
|
||||
audioOutputDeviceId,
|
||||
selectAudioOutput,
|
||||
selectAudioInput,
|
||||
|
||||
inputDevices,
|
||||
outputDevices,
|
||||
|
||||
ctrlDown,
|
||||
|
||||
pastedLink,
|
||||
handleModalType,
|
||||
showModalType,
|
||||
|
||||
handleAddAudioToQueue,
|
||||
};
|
||||
|
||||
function muteOrUnmute() {
|
||||
toast.success(isMuted ? "Unmuted" : "Muted");
|
||||
|
||||
setIsMuted((prevVal) => !prevVal);
|
||||
}
|
||||
|
||||
function silenceOrLivenMode() {
|
||||
toast.success(isSilenceMode ? "Unsilenced" : "Auto listen mode disabled");
|
||||
|
||||
setIseSilenceMode((prevVal) => !prevVal);
|
||||
}
|
||||
|
||||
function selectAudioOutput(deviceId: string) {
|
||||
toast.success("Changed output device");
|
||||
setAudioOutputDevice(deviceId);
|
||||
}
|
||||
|
||||
function selectAudioInput(deviceId: string) {
|
||||
toast.success("Changed input device");
|
||||
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);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
toast.error("Problem in setting up audio devices");
|
||||
}
|
||||
})();
|
||||
}, [hasRecPermit]);
|
||||
|
||||
// first load just force check if permissions enabled
|
||||
// through fake stream
|
||||
// todo: only call this when starting to record and do it with a usecallback
|
||||
useEffect(() => {
|
||||
try {
|
||||
// won't work in https!!!
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ audio: { deviceId: audioInputDeviceId } })
|
||||
.then((stream) => {
|
||||
// stop playing anything
|
||||
stopBothVideoAndAudio(stream);
|
||||
|
||||
console.log("Permission Granted");
|
||||
setHasRecPermit(true);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("Permission Denied");
|
||||
toast.error(
|
||||
"Please make sure that you have connected a microphone and given permissions."
|
||||
);
|
||||
setHasRecPermit(false);
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error("something went wrong");
|
||||
}
|
||||
}, []);
|
||||
|
||||
// set recording device
|
||||
useEffect(() => {
|
||||
setRecorder(
|
||||
new MicRecorder({ bitRate: 128, deviceId: audioInputDeviceId })
|
||||
);
|
||||
}, [audioInputDeviceId]); // change it everytime we change the input device
|
||||
|
||||
// SECTION: recording
|
||||
async function startRecording() {
|
||||
recorder
|
||||
.start()
|
||||
.then(() => {
|
||||
// toast.success("started recording");
|
||||
console.log("recording started");
|
||||
})
|
||||
.catch((e) =>
|
||||
toast.error("there was a problem in starting your recording")
|
||||
);
|
||||
}
|
||||
|
||||
async function stopRecording(): Promise<File> {
|
||||
return new Promise((resolve, reject) => {
|
||||
recorder
|
||||
.stop()
|
||||
.getMp3()
|
||||
.then(([buffer, blob]) => {
|
||||
const blobURL = URL.createObjectURL(blob);
|
||||
|
||||
const file = new File(buffer, uuidv4() + ".mp3", {
|
||||
type: blob.type,
|
||||
lastModified: Date.now(),
|
||||
});
|
||||
|
||||
const player = new Audio(URL.createObjectURL(file));
|
||||
player.onended = onEndedPlaying;
|
||||
player.play();
|
||||
|
||||
resolve(file);
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error.message);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onEndedPlaying(e) {
|
||||
// toast.success("finished playing");
|
||||
|
||||
// remove from queue and the queue manager will handle the rest
|
||||
setAudioQueue((prevQueue) => {
|
||||
let newQueue: string[] = [...prevQueue];
|
||||
newQueue.shift();
|
||||
return newQueue;
|
||||
});
|
||||
}
|
||||
|
||||
const handleKeyUp = useCallback(
|
||||
(event) => {
|
||||
// if was recording and released R, then stop recording and send message
|
||||
if (event.keyCode == KeyCode.R && selectedTeammate && isRecording) {
|
||||
console.log("stopped recording");
|
||||
setIsRecording(false);
|
||||
|
||||
const currReceiverUserId = selectedTeammate;
|
||||
|
||||
stopRecording()
|
||||
.then((file) => {
|
||||
console.log(file);
|
||||
|
||||
// upload to cloud storage
|
||||
return cloudStorageService.uploadMessageAudioFile(file);
|
||||
})
|
||||
.then((downloadUrl) => {
|
||||
console.log("file is stored: " + downloadUrl);
|
||||
|
||||
// send message to firestore
|
||||
const message = new Message();
|
||||
message.audioDataUrl = downloadUrl;
|
||||
message.senderUserId = currUser.uid;
|
||||
message.receiverUserId = currReceiverUserId;
|
||||
|
||||
return sendService.sendMessage(message);
|
||||
})
|
||||
.then(() => {
|
||||
toast.success("clip sent");
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error("Problem in sending clip");
|
||||
});
|
||||
|
||||
console.log("sending message to " + selectedTeammate);
|
||||
|
||||
handleResetView();
|
||||
} else if (event.keyCode == KeyCode.Ctrl) {
|
||||
setCtrlDown(false);
|
||||
}
|
||||
},
|
||||
[isRecording, selectedTeammate]
|
||||
);
|
||||
|
||||
const handleKeyboardShortcut = useCallback(
|
||||
(event) => {
|
||||
// no need to monitor repeats
|
||||
if (event.repeat) {
|
||||
return;
|
||||
}
|
||||
|
||||
// handle for when in modals, don't want any of this crap
|
||||
if (showModalType != ShowModalType.na) {
|
||||
return;
|
||||
}
|
||||
|
||||
// recording
|
||||
if (event.keyCode == KeyCode.R && !ctrlDown) {
|
||||
if (!audioInputDeviceId) {
|
||||
toast.error("No microphone selected");
|
||||
} else if (!hasRecPermit) {
|
||||
toast.error(
|
||||
"You did not allow microphone permissions in your browser!"
|
||||
);
|
||||
} else if (!selectedTeammate) {
|
||||
toast.error("Please select a team member or announcements first");
|
||||
} else if (isMuted) {
|
||||
toast.error("You are muted!");
|
||||
} else {
|
||||
// alright now you are good to go
|
||||
console.log("started recording");
|
||||
setIsRecording(true);
|
||||
startRecording();
|
||||
}
|
||||
}
|
||||
// if we have a valid user for such a shortcut, then go ahead...otherwise
|
||||
else if (teamShortcutMappings[event.keyCode]) {
|
||||
setSelectedTeamMember(teamShortcutMappings[event.keyCode]);
|
||||
} else if (event.keyCode == KeyCode.Escape) {
|
||||
handleResetView();
|
||||
} else if (event.keyCode == KeyCode.Space) {
|
||||
// listen to last message in convo
|
||||
if (isSilenceMode) {
|
||||
toast.error("you are in silence mode, please disable it first");
|
||||
} else if (!selectedTeammate) {
|
||||
toast.error("select a team member first to play");
|
||||
} else {
|
||||
// alright now you are good to play last message chunk in conversation with selected user
|
||||
|
||||
const arrayMessagesforUser: Message[] =
|
||||
messagesByTeamMate.get(selectedTeammate);
|
||||
if (
|
||||
messagesByTeamMate.has(selectedTeammate) &&
|
||||
arrayMessagesforUser &&
|
||||
arrayMessagesforUser.length > 0
|
||||
) {
|
||||
var convoChunk: string[] = [];
|
||||
console.log("playing from this cache");
|
||||
|
||||
// wait for x changes, and then break adding to the queue...I want to hear the past loop of conversation maybe
|
||||
const maxConvoChanges: number = 1;
|
||||
var convoChangeCount: number = 0;
|
||||
|
||||
var currTalkerId = arrayMessagesforUser[0].senderUserId;
|
||||
for (const audioMessage of arrayMessagesforUser) {
|
||||
if (audioMessage.senderUserId != currTalkerId) {
|
||||
convoChangeCount += 1;
|
||||
}
|
||||
|
||||
// heard enough of this convo
|
||||
if (convoChangeCount == maxConvoChanges) {
|
||||
break;
|
||||
}
|
||||
|
||||
convoChunk.push(audioMessage.audioDataUrl);
|
||||
currTalkerId = audioMessage.senderUserId;
|
||||
}
|
||||
|
||||
// reverse the chunk so that I listen to the messages in order
|
||||
convoChunk.reverse();
|
||||
|
||||
// add convo chunk to the queue player
|
||||
handleAddAudioToQueue(convoChunk);
|
||||
} else {
|
||||
toast("nothing to play");
|
||||
}
|
||||
}
|
||||
} else if (event.keyCode == KeyCode.Ctrl) {
|
||||
handleResetView();
|
||||
|
||||
setCtrlDown(true);
|
||||
} else if (event.keyCode == KeyCode.Q && ctrlDown) {
|
||||
toast("navigating to create google meet");
|
||||
|
||||
window.open(new URL("https://meet.google.com/"), "_blank");
|
||||
} else if (event.keyCode == KeyCode.V && ctrlDown) {
|
||||
toast("pasting link");
|
||||
|
||||
navigator.clipboard
|
||||
.readText()
|
||||
.then((text) => {
|
||||
console.log("Pasted content: ", text);
|
||||
|
||||
// check that the link is valid
|
||||
if (!isValidHttpUrl(text)) {
|
||||
toast.error("Not a valid link");
|
||||
return;
|
||||
}
|
||||
|
||||
// set it as we should show modal regardless now
|
||||
setPastedLink(text);
|
||||
|
||||
// see which modal to go to based on room vs. attachment
|
||||
// https://meet.google.com/soc-ebwc-rkt
|
||||
if (text.includes("meet.google.com")) {
|
||||
setShowModalType(ShowModalType.createRoom);
|
||||
} else {
|
||||
setShowModalType(ShowModalType.createLink);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed to read clipboard contents: ", err);
|
||||
toast.error("Please enable permissions for clipboard");
|
||||
});
|
||||
} else {
|
||||
// toast("Invalid keyboard shortcut.");
|
||||
console.log("no shortcut logged");
|
||||
}
|
||||
|
||||
// todo play message if pressing space
|
||||
|
||||
// todo if we press the same shortcut twice, deactive selected user
|
||||
},
|
||||
[
|
||||
selectedTeammate,
|
||||
audioInputDeviceId,
|
||||
hasRecPermit,
|
||||
isMuted,
|
||||
teamShortcutMappings,
|
||||
ctrlDown,
|
||||
showModalType,
|
||||
]
|
||||
);
|
||||
|
||||
function handleResetView() {
|
||||
setSelectedTeamMember(null);
|
||||
setShowModalType(ShowModalType.na);
|
||||
|
||||
setAudioQueue([]);
|
||||
}
|
||||
|
||||
// IMPORTANT: shortcut handlers need to be updated as the function has to have the fresh state
|
||||
useEffect(() => {
|
||||
console.log("updating event listeners");
|
||||
document.addEventListener("keydown", handleKeyboardShortcut);
|
||||
document.addEventListener("keyup", handleKeyUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyboardShortcut);
|
||||
document.removeEventListener("keyup", handleKeyUp);
|
||||
};
|
||||
}, [handleKeyboardShortcut, handleKeyUp]);
|
||||
|
||||
function addTeamShortcutBinding(keyCode: number, userId: string) {
|
||||
setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: userId }));
|
||||
}
|
||||
|
||||
function selectTeamMember(userId: string) {
|
||||
setSelectedTeamMember(userId);
|
||||
}
|
||||
|
||||
const [playerSrc, setPlayerSrc] = useState<string>(null);
|
||||
|
||||
function handleAddAudioToQueue(
|
||||
urls: string[],
|
||||
clearEverythingElse: boolean = false
|
||||
) {
|
||||
if (clearEverythingElse) {
|
||||
setAudioQueue(urls);
|
||||
} else {
|
||||
setAudioQueue((prevQueue) => [...prevQueue, ...urls]);
|
||||
}
|
||||
}
|
||||
|
||||
function startAnnouncement() {
|
||||
setIsRecordingAnnouncement(true);
|
||||
|
||||
startRecording();
|
||||
}
|
||||
|
||||
async function sendAnnouncement() {
|
||||
setIsRecordingAnnouncement(false);
|
||||
|
||||
try {
|
||||
const file = await stopRecording();
|
||||
|
||||
// confirm with user that he wants to make the announcement
|
||||
// before sending and all
|
||||
// show this 2 seconds after playing entire message
|
||||
setTimeout(async () => {
|
||||
if (
|
||||
confirm(
|
||||
"Send this announcement to team? OR just cancel and create a new one to restate something."
|
||||
)
|
||||
) {
|
||||
const downloadUrl = await cloudStorageService.uploadMessageAudioFile(
|
||||
file
|
||||
);
|
||||
|
||||
console.log("file is stored: " + downloadUrl);
|
||||
|
||||
// create announcement object and send to firestore
|
||||
const newAnnounce = new Announcement(
|
||||
downloadUrl,
|
||||
team.id,
|
||||
currUser.uid
|
||||
);
|
||||
|
||||
await sendService.sendAnnouncement(newAnnounce);
|
||||
|
||||
toast.success("clip sent");
|
||||
} else {
|
||||
toast.error("cancelled announcement");
|
||||
|
||||
return;
|
||||
}
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
toast.error("problem in sending");
|
||||
}
|
||||
}
|
||||
|
||||
const keyMap: KeyMap = {
|
||||
RECORD_ANNOUNCEMENT: "a",
|
||||
STOP_RECORDING_ANNOUNCEMENT: {
|
||||
name: "Stop recording",
|
||||
sequence: "a",
|
||||
action: "keyup",
|
||||
},
|
||||
};
|
||||
const handlers = {
|
||||
RECORD_ANNOUNCEMENT: startAnnouncement,
|
||||
STOP_RECORDING_ANNOUNCEMENT: sendAnnouncement,
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardContext.Provider value={value}>
|
||||
<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
|
||||
|
||||
{children}
|
||||
|
||||
{/* player for audio messages */}
|
||||
{playerSrc && (
|
||||
<AudioPlayer
|
||||
autoPlay
|
||||
src={playerSrc}
|
||||
onPlay={(e) => console.log("onPlay")}
|
||||
showSkipControls={true}
|
||||
onEnded={onEndedPlaying}
|
||||
className="w-screen flex flex-row"
|
||||
/>
|
||||
)}
|
||||
</KeyboardContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useKeyboardContext() {
|
||||
return useContext(KeyboardContext);
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
import {
|
||||
collection,
|
||||
doc,
|
||||
getFirestore,
|
||||
onSnapshot,
|
||||
orderBy,
|
||||
query,
|
||||
Unsubscribe,
|
||||
where,
|
||||
} from "firebase/firestore";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import Loading from "../components/Loading";
|
||||
import { compareStatus } from "../helpers/userHelper";
|
||||
import { Message } from "../models/message";
|
||||
import Room from "../models/room";
|
||||
import { Team } from "../models/team";
|
||||
import { TeamMember, TeamMemberStatus } from "../models/teamMember";
|
||||
import { User } from "../models/user";
|
||||
import { Collections } from "../services/collections";
|
||||
import TeamService from "../services/teamService";
|
||||
import UserService from "../services/userService";
|
||||
import { useAuth } from "./authContext";
|
||||
|
||||
interface TeamDashboardContextInterface {
|
||||
team: Team;
|
||||
teamMembers: TeamMember[];
|
||||
userTeamMember: TeamMember;
|
||||
|
||||
user: User; // REALTIME - 1
|
||||
|
||||
messagesByTeamMate: Map<string, Message[]>; // REALTIME: string of teammate userid and array of messages - 1
|
||||
allMessages: Message[]; // REALTIME: 1
|
||||
|
||||
teamUsers: User[]; // REALTIME teammates - n team members => n listeners
|
||||
teamUsersMap: {}; // map for easier getting teammate data
|
||||
}
|
||||
|
||||
const TeamDashboardContext =
|
||||
React.createContext<TeamDashboardContextInterface | null>(null);
|
||||
|
||||
// date of yesterday to check if messages are after yesterday
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
const teamService = new TeamService();
|
||||
const userService = new UserService();
|
||||
const db = getFirestore();
|
||||
|
||||
export function TeamDashboardContextProvider({ children }) {
|
||||
const { currUser } = useAuth();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
|
||||
const { teamid } = router.query;
|
||||
|
||||
// this context can only be used if it's a specific route: '/teams'
|
||||
if (!teamid) {
|
||||
router.push("/teams");
|
||||
}
|
||||
|
||||
// update this "global" object to send to children
|
||||
const [value, setValue] = useState<TeamDashboardContextInterface>(
|
||||
{} as TeamDashboardContextInterface
|
||||
);
|
||||
|
||||
// all main data
|
||||
useEffect(() => {
|
||||
var userListener: Unsubscribe;
|
||||
var unsubs: Unsubscribe[] = [] as Unsubscribe[];
|
||||
|
||||
(async function () {
|
||||
try {
|
||||
// SECTION: authentication
|
||||
if (!currUser) {
|
||||
console.log(
|
||||
"not authenticated...routing from dashboard to teams home"
|
||||
);
|
||||
router.push("/teams/login");
|
||||
return;
|
||||
}
|
||||
|
||||
// SECTION: get user details : realtime
|
||||
const returnedUser = await userService.getUser(currUser.uid);
|
||||
|
||||
const docRef = doc(db, Collections.users, currUser.uid);
|
||||
|
||||
userListener = onSnapshot(docRef, (doc) => {
|
||||
const updatedUser = doc.data() as User;
|
||||
|
||||
setValue((prevValue) => ({ ...prevValue, user: updatedUser }));
|
||||
});
|
||||
|
||||
setValue((prevValue) => ({ ...prevValue, user: returnedUser }));
|
||||
|
||||
// SECTION: getting team data and team member information
|
||||
if (typeof teamid !== "string") {
|
||||
console.log("not a proper query with teamid");
|
||||
router.push("/teams");
|
||||
return;
|
||||
}
|
||||
|
||||
// check if the team is a valid team and that user is in it
|
||||
const returnedTeam = await teamService.getTeam(teamid);
|
||||
if (!returnedTeam) {
|
||||
console.log("team doesnt exist");
|
||||
router.push("/teams");
|
||||
return;
|
||||
}
|
||||
setValue((prevValue) => ({ ...prevValue, team: returnedTeam }));
|
||||
|
||||
const returnedTeamMember = await teamService.getTeamMemberByUserId(
|
||||
teamid,
|
||||
currUser.uid
|
||||
);
|
||||
|
||||
// if you are not a member of this team, then get out of here
|
||||
// but have to check through email invite and userid
|
||||
if (
|
||||
returnedTeamMember &&
|
||||
returnedTeamMember.status == TeamMemberStatus.deleted
|
||||
) {
|
||||
console.log("user was deleted from team");
|
||||
router.push("/teams");
|
||||
return;
|
||||
}
|
||||
|
||||
// if there is no team member through user id,
|
||||
// give him last chance and see if he was invited
|
||||
if (!returnedTeamMember) {
|
||||
const invitedTeamMember =
|
||||
await teamService.getTeamMemberByEmailInvite(
|
||||
teamid,
|
||||
currUser.email
|
||||
);
|
||||
|
||||
if (!invitedTeamMember) {
|
||||
console.log("not invited to team either");
|
||||
router.push("/teams");
|
||||
return;
|
||||
}
|
||||
|
||||
// if I am new to the team but I was invited, and this is my first time, then activate me into the team
|
||||
// and proceed with showing the dashboard stuff
|
||||
|
||||
invitedTeamMember.status = TeamMemberStatus.activated;
|
||||
invitedTeamMember.userId = currUser.uid;
|
||||
await teamService.updateTeamMember(invitedTeamMember);
|
||||
|
||||
setValue((prevValue) => ({
|
||||
...prevValue,
|
||||
userTeamMember: invitedTeamMember,
|
||||
}));
|
||||
} else {
|
||||
setValue((prevValue) => ({
|
||||
...prevValue,
|
||||
userTeamMember: returnedTeamMember,
|
||||
}));
|
||||
}
|
||||
|
||||
// SECTION: get all teammembers for team, will have listeners in other subcomponents
|
||||
var teamMembers: TeamMember[] =
|
||||
await teamService.getTeamMembersByTeamId(returnedTeam.id);
|
||||
|
||||
teamMembers = teamMembers.filter(
|
||||
(element) => element.userId != currUser.uid
|
||||
);
|
||||
|
||||
// listeners for all teammates' status
|
||||
if (teamMembers) {
|
||||
teamMembers.map((tmember) => {
|
||||
if (tmember.status == TeamMemberStatus.activated) {
|
||||
const docRef = doc(db, Collections.users, tmember.userId);
|
||||
|
||||
const unsub = onSnapshot(docRef, (doc) => {
|
||||
const updatedteamMateUser = doc.data() as User;
|
||||
|
||||
// update map of team member users
|
||||
setTeamUsersMap((prevMap) => ({
|
||||
...prevMap,
|
||||
[updatedteamMateUser.id]: updatedteamMateUser,
|
||||
}));
|
||||
|
||||
// update array of team member users
|
||||
setTeamUsers((prevTeamUsers) => {
|
||||
const newTeamUsers = prevTeamUsers.filter(
|
||||
(tm) => tm.id != updatedteamMateUser.id
|
||||
);
|
||||
newTeamUsers.push(updatedteamMateUser);
|
||||
|
||||
// order users by status
|
||||
setTeamUsers(newTeamUsers.sort(compareStatus));
|
||||
|
||||
return newTeamUsers;
|
||||
});
|
||||
});
|
||||
|
||||
unsubs.push(unsub);
|
||||
}
|
||||
|
||||
return;
|
||||
});
|
||||
}
|
||||
|
||||
setValue((prevValue) => ({ ...prevValue, teamMembers }));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/");
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
})();
|
||||
|
||||
return () => {
|
||||
if (userListener) {
|
||||
userListener();
|
||||
}
|
||||
|
||||
unsubs.forEach((unsub) => {
|
||||
unsub();
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [teamUsers, setTeamUsers] = useState<User[]>([]);
|
||||
const [teamUsersMap, setTeamUsersMap] = useState<{}>({});
|
||||
|
||||
const [allMessages, setAllMessages] = useState<Message[]>([]);
|
||||
const [messagesByTeamMate, setMessagesByTeamMate] = useState<
|
||||
Map<string, Message[]>
|
||||
>(new Map());
|
||||
|
||||
// SECTION: REALTIME listener for all incoming messages
|
||||
useEffect(() => {
|
||||
// todo for new messages, change document.title
|
||||
|
||||
if (!currUser) {
|
||||
console.log("not authenticated...routing from dashboard to teams home");
|
||||
router.push("/teams/login");
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* QUERY:
|
||||
* - last 24 hours only
|
||||
* - any message that I have sent or received: relevant messages
|
||||
* - order by: date desc
|
||||
*/
|
||||
const q = query(
|
||||
collection(db, Collections.audioMessages),
|
||||
where("senderReceiver", "array-contains", currUser.uid),
|
||||
where("createdDate", ">", yesterday),
|
||||
orderBy("createdDate", "asc")
|
||||
);
|
||||
|
||||
// return unsubscribe
|
||||
return onSnapshot(q, (snapshot) => {
|
||||
snapshot.docChanges().forEach((change) => {
|
||||
// no need to process results again, just append to arrays instead
|
||||
// messages won't be deleted or updated really
|
||||
if (change.type === "added") {
|
||||
let newMessage = change.doc.data() as Message;
|
||||
|
||||
// update all messages array
|
||||
setAllMessages((prevMessages) => [newMessage, ...prevMessages]);
|
||||
|
||||
// update map of teammate to relevant messages
|
||||
setMessagesByTeamMate((prevMap) => {
|
||||
// if the map contains the teammate userid already, then cool, just unshift to that array
|
||||
var newMap: Map<string, Message[]> = new Map(
|
||||
prevMap.set("dummy", [] as Message[])
|
||||
);
|
||||
if (prevMap.has(newMessage.receiverUserId)) {
|
||||
newMap.set(newMessage.receiverUserId, [
|
||||
newMessage,
|
||||
...prevMap.get(newMessage.receiverUserId),
|
||||
]);
|
||||
} // if this is the first relevant message linked to this receiver,
|
||||
//then create a new array
|
||||
else {
|
||||
newMap.set(newMessage.receiverUserId, [newMessage]);
|
||||
}
|
||||
|
||||
// todo: if I am the receiver, still want to put it in the right conversation
|
||||
if (newMessage.receiverUserId == currUser.uid) {
|
||||
if (prevMap.has(newMessage.senderUserId)) {
|
||||
newMap.set(newMessage.senderUserId, [
|
||||
newMessage,
|
||||
...prevMap.get(newMessage.senderUserId),
|
||||
]);
|
||||
} else {
|
||||
newMap.set(newMessage.senderUserId, [newMessage]);
|
||||
}
|
||||
}
|
||||
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
if (change.type === "modified") {
|
||||
console.log("Modified message: ", change.doc.data());
|
||||
}
|
||||
if (change.type === "removed") {
|
||||
console.log("Removed message: ", change.doc.data());
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
const transformedValue = {
|
||||
...value,
|
||||
allMessages,
|
||||
messagesByTeamMate,
|
||||
teamUsers,
|
||||
teamUsersMap,
|
||||
};
|
||||
|
||||
return (
|
||||
<TeamDashboardContext.Provider value={transformedValue}>
|
||||
{children}
|
||||
</TeamDashboardContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTeamDashboardContext() {
|
||||
return useContext(TeamDashboardContext);
|
||||
}
|
||||
Reference in New Issue
Block a user