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

finished demo although can touch it up

Browse Source
This commit is contained in:
Arjun Patel
2022-01-20 23:12:28 -08:00
parent 8cd3b2d767
commit e41768e764
3 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/demo/Announcements.tsx
+62 -31
View File
@@ -4,16 +4,41 @@ import { UserStatus } from "../../models/user";
import Image from "next/image";
import { Tooltip } from "antd";
import { DemoStep, IVoiceDemoProps } from "./VoiceLineConceptDemo";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
export default function Announcements(props: IVoiceDemoProps) {
const isAnnouncementsTurn =
props.demoStep == DemoStep.playAnnouncement ||
props.demoStep == DemoStep.resolveAnnouncement;
props.demoStep == DemoStep.doneDemo;
const [showAnnouncement, setShowAnnouncement] = useState<boolean>(false);
useEffect(() => {
if (props.demoStep == DemoStep.playAnnouncement) {
setTimeout(function () {
setShowAnnouncement(true);
var audio = new Audio(
"https://firebasestorage.googleapis.com/v0/b/nirvana-for-business.appspot.com/o/messages%2Fbb649032-64cc-46f7-b0b1-bcb57704a0a7.mp3?alt=media&token=919c596b-c829-4c70-85ce-134d5c348730"
);
audio.play();
toast.success("Live Announcement from Arjun");
}, 2000);
setTimeout(function () {
props.handleChangeDemoStep(DemoStep.doneDemo);
toast.success("done with the demo!");
}, 9000);
}
}, [props.demoStep]);
return (
<section
className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl ${
!isAnnouncementsTurn ? "blur-sm" : ""
isAnnouncementsTurn ? " z-20 " : "blur-sm"
}`}
>
<span className="flex flex-row justify-start items-center pb-5">
@@ -54,6 +79,40 @@ export default function Announcements(props: IVoiceDemoProps) {
</span>
<div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
{/* arjun's announcement */}
<span
className={`flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center transition-all duration-300 ${
showAnnouncement ? "animate-pulse bg-orange-500" : "hidden "
}`}
>
<span className="relative mr-2 grid items-center justify-items-center">
<span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
<Image
src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
alt="profile"
width={50}
height={50}
/>
</span>
<span className="flex flex-col items-baseline mr-5">
<span className="text-md font-semibold text-gray-600">Arjun</span>
<span className="text-xs text-gray-400">2 seconds ago</span>
<span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
<span>engineering</span>
</span>
</span>
<Tooltip
title={"Announcements should be resolved to keep the team focused."}
>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaCheck className="text-lg text-gray-500" />
</button>
</Tooltip>
</span>
{/* adriana's announcement */}
<span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
<span className="relative mr-2 grid items-center justify-items-center">
@@ -69,45 +128,17 @@ export default function Announcements(props: IVoiceDemoProps) {
<span className="flex flex-col items-baseline">
<span className="text-md font-semibold text-gray-600">Adriana</span>
<span className="text-xs text-gray-400">5 minutes ago</span>
<span className="text-xs text-gray-400">30 minutes ago</span>
<span className="text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center">
<span>blockers</span>
</span>
</span>
</span>
{/* arjun's announcement */}
<span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
<span className="relative mr-2 grid items-center justify-items-center">
<span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
<Image
src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
alt="profile"
width={50}
height={50}
/>
</span>
<span className="flex flex-col items-baseline mr-5">
<span className="text-md font-semibold text-gray-600">Arjun</span>
<span className="text-xs text-gray-400">30 minutes ago</span>
<span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
<span>engineering</span>
</span>
</span>
<Tooltip title={"Resolve"}>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaCheck className="text-lg text-gray-500" />
</button>
</Tooltip>
<Tooltip title={"Play"}>
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
<FaPlay className="text-lg text-gray-500" />
</button>
</Tooltip>
</span>
</div>
</section>
components/demo/TeamVoiceLine.tsx
+29 -8
View File
@@ -84,7 +84,8 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
const isVoiceLineTurn =
props.demoStep == DemoStep.playIncomingMessage ||
props.demoStep == DemoStep.hearReply ||
props.demoStep == DemoStep.sendReply;
props.demoStep == DemoStep.sendReply ||
props.demoStep == DemoStep.doneDemo;
useEffect(() => {
if (props.demoStep == DemoStep.playIncomingMessage) {
@@ -100,7 +101,14 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
}, 10000);
} else if (props.demoStep == DemoStep.sendReply) {
} else if (props.demoStep == DemoStep.hearReply) {
toast.success("Paul heard it live!");
var audio = new Audio(
"https://firebasestorage.googleapis.com/v0/b/nirvana-for-business.appspot.com/o/deep%20fakes%2Fvocodes_728915c1-eb1f-4f16-8f70-c7b0c2235b3e.wav?alt=media&token=76afd74c-7499-4bd8-9c10-dd6ff4f81c48"
);
audio.play();
setTimeout(function () {
props.handleChangeDemoStep(DemoStep.playAnnouncement);
}, 6000);
}
}, [props.demoStep]);
@@ -116,6 +124,12 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
toast.success("Paul heard it live!");
setIsRecording(false);
setTimeout(function () {
toast.success("Mark is talking...");
props.handleChangeDemoStep(DemoStep.hearReply);
}, 3000);
}
const keyMap: KeyMap = {
@@ -132,7 +146,7 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
<section
className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl transition-all duration-300 ${
!isVoiceLineTurn ? "blur-sm" : ""
}`}
} ${props.demoStep == DemoStep.doneDemo ? "z-30" : ""}`}
>
{/* keyboard shortcut handler */}
<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
@@ -157,13 +171,18 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
<span
key={i}
className={`flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 rounded-lg ${
friend.name == "Paul" ? "bg-orange-500 bg-opacity-20" : ""
(friend.name == "Paul" &&
props.demoStep == DemoStep.playIncomingMessage) ||
(friend.name == "Mark" && props.demoStep == DemoStep.hearReply)
? "bg-orange-500 bg-opacity-20"
: ""
}`}
>
<span
className={`relative flex mr-2 shrink-0 ${
friend.name == "Paul" &&
props.demoStep == DemoStep.playIncomingMessage
(friend.name == "Paul" &&
props.demoStep == DemoStep.playIncomingMessage) ||
(friend.name == "Mark" && props.demoStep == DemoStep.hearReply)
? "animate-pulse"
: ""
}`}
@@ -190,8 +209,10 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
{friend.name}{" "}
</span>
{friend.name == "Paul" &&
props.demoStep == DemoStep.playIncomingMessage ? (
{(friend.name == "Paul" &&
props.demoStep == DemoStep.playIncomingMessage) ||
(friend.name == "Mark" &&
props.demoStep == DemoStep.hearReply) ? (
<FaArrowCircleDown className="text-orange-500 text-xl animate-bounce" />
) : (
<></>
components/demo/VoiceLineConceptDemo.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export enum DemoStep {
sendReply = "send reply",
hearReply = "hear reply",
playAnnouncement = "play announcement",
resolveAnnouncement = "resolve announcement",
doneDemo = "done with demo",
}
export interface IVoiceDemoProps {