having one solution for different components of app
This commit is contained in:
Arjun Patel
@@ -0,0 +1,146 @@
|
||||
import { FaAngleDown, FaCheck, FaMicrophoneAlt, FaPlay } from "react-icons/fa";
|
||||
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.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%2Fb2858200-4a15-478a-b863-bdf88b26b2e4.mp3?alt=media&token=3ffc8955-50fa-4418-a146-1c73f56409d1"
|
||||
);
|
||||
audio.play();
|
||||
|
||||
toast.success("Harold's saying his update!");
|
||||
}, 2000);
|
||||
|
||||
setTimeout(function () {
|
||||
props.handleChangeDemoStep(DemoStep.doneDemo);
|
||||
|
||||
toast.success("done with the demo!");
|
||||
}, 11000);
|
||||
}
|
||||
}, [props.demoStep]);
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-32 backdrop-blur-xl ${
|
||||
isAnnouncementsTurn ? " z-20 " : "blur-sm"
|
||||
}`}
|
||||
>
|
||||
<span className="flex flex-row justify-start items-center pb-5">
|
||||
<span className="flex flex-col mr-20">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
ANNOUNCEMENTS
|
||||
{/* <button
|
||||
className="right-1 rounded-lg py-1 px-2 ml-1
|
||||
shadow-md text-center text-gray-400 text-sm font-bold"
|
||||
>
|
||||
CTRL + A
|
||||
</button> */}
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 text-xs">
|
||||
updates, pep talks, blockers, reminders
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* tab pane */}
|
||||
<span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
|
||||
<span className="underline underline-offset-8 decoration-gray-500 text-gray-500 hover:cursor-pointer">
|
||||
Active
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 hover:cursor-pointer">Resolved</span>
|
||||
</span>
|
||||
|
||||
<span className="text-sm text-gray-400 flex flex-row items-center">
|
||||
TODAY <FaAngleDown />
|
||||
</span>
|
||||
|
||||
<Tooltip title={"You can create announcements in the future."}>
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaMicrophoneAlt className="text-lg text-gray-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</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-29.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">Harold</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">
|
||||
<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-06.svg"}
|
||||
alt="profile"
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<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">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>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import Link from "next/link";
|
||||
import { FaAngleRight } from "react-icons/fa";
|
||||
|
||||
export default function LandingPageActionBar() {
|
||||
return (
|
||||
<span className="flex md:my-20 my-10 mx-auto md:flex-row flex-col items-center max-w-screen-md p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
|
||||
<span className="flex flex-col items-start text-3xl font-bold">
|
||||
<span>Ready to Focus?</span>
|
||||
<span className="text-teal-600">{"It's now or never."}</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-5 md:ml-auto">
|
||||
<Link href="/features">Features</Link>
|
||||
|
||||
<button
|
||||
onClick={() => window.open("/teams/login", "_blank")}
|
||||
className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center space-x-2"
|
||||
>
|
||||
<span>Get Started</span>
|
||||
<FaAngleRight />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
import { FaAngleDown, FaBell, FaClock, FaLink, FaPlus } from "react-icons/fa";
|
||||
import { IoTimer } from "react-icons/io5";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Rooms() {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* spontaneous bugs room */}
|
||||
<span className="shrink-0 h-[15rem] backdrop-blur-xl flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-1 flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline justify-start max-w-xs pr-10">
|
||||
<span className="text-gray-500 font-semibold mr-auto">
|
||||
bug fixing
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 overflow-wrap mb-auto h-full">
|
||||
were just fixing that jsx bug thats a paiiinnnn
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap mt-auto">
|
||||
<span className="text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center">
|
||||
<span>blockers</span>
|
||||
</span>
|
||||
|
||||
<span className="text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center">
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end space-y-1 justify-between h-full">
|
||||
<span
|
||||
className="text-xs bg-red-500
|
||||
text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center"
|
||||
>
|
||||
<FaClock />
|
||||
<span>live</span>
|
||||
</span>
|
||||
|
||||
{/* room attachments */}
|
||||
<span className="flex flex-row space-x-2">
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-gray-400" />
|
||||
</button>
|
||||
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-gray-400" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className="relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
<span className="-mr-4 relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">Arjun and Liam</span>
|
||||
<button className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded">
|
||||
👋 Leave
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* live room - design meeting */}
|
||||
<span className="shrink-0 h-[15rem] backdrop-blur-xl translate-x-32 -translate-y-32 flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-gray-500 font-semibold mr-auto">
|
||||
Shopping Cart Experience
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 overflow-wrap">
|
||||
lets finish the mockups @josh, @mark, and @arjun please step in
|
||||
for feedback
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>design</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end justify-between h-full">
|
||||
<span className="text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<FaClock />
|
||||
<span>scheduled</span>
|
||||
</span>
|
||||
<span className="text-gray-400 text-xs text-right mb-auto">
|
||||
afternoon
|
||||
</span>
|
||||
|
||||
{/* room attachments */}
|
||||
<span className="flex flex-row space-x-2">
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-gray-400" />
|
||||
</button>
|
||||
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 rounded hover:bg-opacity-40">
|
||||
<FaLink className="text-sm text-gray-400" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className="relative flex">
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image
|
||||
className=""
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={30}
|
||||
height={30}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="text-xs text-white">Adriana</span>
|
||||
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - demo */}
|
||||
<span className="shrink-0 h-[15rem] backdrop-blur-xl translate-x-30 -translate-y-60 flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-gray-500 font-semibold mr-auto">
|
||||
Sprint Demo
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 overflow-wrap">
|
||||
All hands on deck...lets have fun :)
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>scrum</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-center justify-start">
|
||||
<span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 text-xs text-center">
|
||||
biweekly fridays!
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
<button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaBell className="text-sm text-orange-500" />
|
||||
</button>
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />{" "}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - wine wednesdays */}
|
||||
<span className=" shrink-0 h-[15rem] backdrop-blur-xl translate-x-32 -translate-y-96 flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip">
|
||||
{/* header */}
|
||||
<span className="flex flex-row justify-between items-baseline space-x-1 p-5">
|
||||
{/* meeting details */}
|
||||
<span className="flex flex-col items-baseline max-w-xs pr-20">
|
||||
<span className="text-gray-500 font-semibold mr-auto">
|
||||
Wine Wednesdays
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 overflow-wrap">
|
||||
@JOSH YOU BETTER COME
|
||||
</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className="flex flex-row flex-wrap space-x-2">
|
||||
<span className="text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
|
||||
<span>party 🎉</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className="flex flex-col items-end">
|
||||
<span className="text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1">
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 text-xs text-center">
|
||||
Wedn. 7-9pm
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
|
||||
<button className="ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500">
|
||||
Join
|
||||
</button>
|
||||
|
||||
<button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaBell className="text-sm text-orange-500" />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
import { FaArrowCircleDown, FaPlus } from "react-icons/fa";
|
||||
import { UserStatus } from "../../models/user";
|
||||
|
||||
import Image from "next/image";
|
||||
import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
|
||||
import { DemoStep, IVoiceDemoProps } from "./VoiceLineConceptDemo";
|
||||
import { Popover, Tooltip } from "antd";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { KeyCode } from "../../globals/keycode";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { GlobalHotKeys, HotKeys, KeySequence, KeyMap } from "react-hotkeys";
|
||||
|
||||
let testFriends = [
|
||||
{
|
||||
name: "Harold",
|
||||
role: "engineer",
|
||||
systemAvatar: "29",
|
||||
status: UserStatus.online,
|
||||
},
|
||||
{
|
||||
name: "Emily",
|
||||
role: "engineer",
|
||||
systemAvatar: "02",
|
||||
status: UserStatus.online,
|
||||
},
|
||||
{
|
||||
name: "Paul",
|
||||
role: "architect",
|
||||
systemAvatar: "43",
|
||||
status: UserStatus.online,
|
||||
},
|
||||
{
|
||||
name: "Mark",
|
||||
role: "designer",
|
||||
systemAvatar: "04",
|
||||
status: UserStatus.busy,
|
||||
},
|
||||
];
|
||||
|
||||
function statusBubble(status: UserStatus) {
|
||||
switch (status) {
|
||||
case UserStatus.online:
|
||||
return (
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
);
|
||||
case UserStatus.busy:
|
||||
return (
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
|
||||
);
|
||||
case UserStatus.offline:
|
||||
return (
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPulse(status: UserStatus) {
|
||||
switch (status) {
|
||||
case UserStatus.online:
|
||||
return (
|
||||
<IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
|
||||
);
|
||||
case UserStatus.busy:
|
||||
return (
|
||||
<IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
|
||||
);
|
||||
case UserStatus.offline:
|
||||
return (
|
||||
<IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function TeamVoiceLine(props: IVoiceDemoProps) {
|
||||
const isVoiceLineTurn =
|
||||
props.demoStep == DemoStep.playIncomingMessage ||
|
||||
props.demoStep == DemoStep.hearReply ||
|
||||
props.demoStep == DemoStep.sendReply ||
|
||||
props.demoStep == DemoStep.doneDemo;
|
||||
|
||||
useEffect(() => {
|
||||
if (props.demoStep == DemoStep.playIncomingMessage) {
|
||||
// play audio of paul talking
|
||||
|
||||
var audio = new Audio(
|
||||
"https://firebasestorage.googleapis.com/v0/b/nirvana-for-business.appspot.com/o/messages%2F62ca7369-7c0c-4b3e-a382-12d4a237d1af.mp3?alt=media&token=b6d4acb0-afc9-4a9f-8c58-cf60a6079003"
|
||||
);
|
||||
audio.play();
|
||||
|
||||
setTimeout(function () {
|
||||
props.handleChangeDemoStep(DemoStep.sendReply);
|
||||
}, 10000);
|
||||
} else if (props.demoStep == DemoStep.sendReply) {
|
||||
} else if (props.demoStep == DemoStep.hearReply) {
|
||||
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]);
|
||||
|
||||
const [isRecording, setIsRecording] = useState<boolean>(false);
|
||||
|
||||
function startRecord(event) {
|
||||
setIsRecording(true);
|
||||
}
|
||||
|
||||
function endRecording(event) {
|
||||
toast.success("Paul heard it live!");
|
||||
|
||||
setIsRecording(false);
|
||||
|
||||
setTimeout(function () {
|
||||
toast.success("Mark is talking...");
|
||||
|
||||
props.handleChangeDemoStep(DemoStep.hearReply);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
const keyMap: KeyMap = {
|
||||
RECORD: "r",
|
||||
STOP_RECORDING: {
|
||||
name: "Stop recording",
|
||||
sequence: "r",
|
||||
action: "keyup",
|
||||
},
|
||||
};
|
||||
const handlers = { RECORD: startRecord, STOP_RECORDING: endRecording };
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl z-10 translate-y-24 translate-x-20 backdrop-blur-xl transition-all duration-300 ${
|
||||
!isVoiceLineTurn ? "blur-sm" : ""
|
||||
} ${props.demoStep == DemoStep.doneDemo ? "z-30" : ""}`}
|
||||
>
|
||||
{/* keyboard shortcut handler */}
|
||||
<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
|
||||
|
||||
<span className="flex flex-row justify-start items-center pb-5">
|
||||
<span className="flex flex-col">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
TEAM
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Tooltip title="You will be able to add team members to your voice line.">
|
||||
<button className="bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
|
||||
<FaPlus className="text-lg text-gray-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
{/* list of team members */}
|
||||
{testFriends.map((friend, i) => {
|
||||
return (
|
||||
<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" &&
|
||||
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 == "Mark" && props.demoStep == DemoStep.hearReply)
|
||||
? "animate-pulse"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
|
||||
{statusBubble(friend.status)}
|
||||
|
||||
<Image
|
||||
src={
|
||||
"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" +
|
||||
friend.systemAvatar +
|
||||
".svg"
|
||||
}
|
||||
alt="profile"
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col mr-10">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-sm text-gray-600 font-semibold">
|
||||
{friend.name}{" "}
|
||||
</span>
|
||||
|
||||
{(friend.name == "Paul" &&
|
||||
props.demoStep == DemoStep.playIncomingMessage) ||
|
||||
(friend.name == "Mark" &&
|
||||
props.demoStep == DemoStep.hearReply) ? (
|
||||
<FaArrowCircleDown className="text-orange-500 text-xl animate-bounce" />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
{friend.name == "Paul" &&
|
||||
props.demoStep == DemoStep.sendReply ? (
|
||||
<Tooltip
|
||||
title={
|
||||
"PRESS AND HOLD R (on your keyboard) to record a message and send"
|
||||
}
|
||||
visible={!isRecording}
|
||||
>
|
||||
<button
|
||||
className={`rounded-lg py-1 px-2 shadow-lg
|
||||
text-center text-sm font-bold ranimate-bounce ${
|
||||
isRecording
|
||||
? "bg-orange-500 text-white"
|
||||
: "text-orange-500"
|
||||
}`}
|
||||
>
|
||||
R
|
||||
</button>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<button
|
||||
className={`rounded-lg py-1 px-2 shadow-lg
|
||||
text-center text-sm font-bold ${
|
||||
friend.name == "Paul"
|
||||
? "text-orange-500"
|
||||
: "text-gray-200 "
|
||||
}`}
|
||||
>
|
||||
{i}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className={"text-xs span-sans text-gray-400"}>
|
||||
{friend.role}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{renderPulse(friend.status)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamVoiceLine;
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Tooltip } from "antd";
|
||||
import { useState } from "react";
|
||||
import { FaPlay } from "react-icons/fa";
|
||||
import Announcements from "./Announcements";
|
||||
import TeamVoiceLine from "./TeamVoiceLine";
|
||||
|
||||
export enum DemoStep {
|
||||
playDemo = "play demo",
|
||||
playIncomingMessage = "play incoming message",
|
||||
sendReply = "send reply",
|
||||
hearReply = "hear reply",
|
||||
playAnnouncement = "play announcement",
|
||||
doneDemo = "done with demo",
|
||||
}
|
||||
|
||||
export interface IVoiceDemoProps {
|
||||
demoStep: DemoStep;
|
||||
|
||||
handleChangeDemoStep: Function;
|
||||
}
|
||||
|
||||
export default function VoiceLineConceptDemo() {
|
||||
const [demoStep, setDemoStep] = useState<DemoStep>(DemoStep.playDemo);
|
||||
|
||||
function handleChangeStep(newStep: DemoStep) {
|
||||
setDemoStep(newStep);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TeamVoiceLine
|
||||
demoStep={demoStep}
|
||||
handleChangeDemoStep={handleChangeStep}
|
||||
/>
|
||||
|
||||
<Announcements
|
||||
demoStep={demoStep}
|
||||
handleChangeDemoStep={handleChangeStep}
|
||||
/>
|
||||
|
||||
{demoStep == DemoStep.playDemo ? (
|
||||
<Tooltip title={"Make sure to have your speakers on!"}>
|
||||
<button
|
||||
onClick={() => setDemoStep(DemoStep.playIncomingMessage)}
|
||||
className="absolute mx-auto my-auto left-1/2 top-1/2
|
||||
bg-gray-200 py-2 px-2 rounded font-semibold inline-flex items-center text-teal-600
|
||||
space-x-2 animate-bounce z-50"
|
||||
>
|
||||
<FaPlay /> <span>Play Demo</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setDemoStep(DemoStep.playDemo)}
|
||||
className="absolute right-0 bottom-0
|
||||
bg-gray-200 bg-opacity-30 py-2 px-2 rounded inline-flex items-center text-teal-600
|
||||
space-x-2"
|
||||
>
|
||||
<span>Reset Demo</span>
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user