From 11a2ea1b847a7dc6441dc68c5b89f5f8c537fa0e Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Thu, 20 Jan 2022 21:27:17 -0800 Subject: [PATCH] starting the demo but shortcuts and all taking time --- components/demo/Announcements.tsx | 53 +++++--- components/demo/TeamVoiceLine.tsx | 153 ++++++++++++++++++++--- components/demo/VoiceLineConceptDemo.tsx | 64 ++++++++++ pages/index.js | 85 +++++++------ pages/philosophy.tsx | 86 +++++++++++++ 5 files changed, 366 insertions(+), 75 deletions(-) create mode 100644 components/demo/VoiceLineConceptDemo.tsx create mode 100644 pages/philosophy.tsx diff --git a/components/demo/Announcements.tsx b/components/demo/Announcements.tsx index 07d7723..deb6715 100644 --- a/components/demo/Announcements.tsx +++ b/components/demo/Announcements.tsx @@ -2,44 +2,55 @@ 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"; + +export default function Announcements(props: IVoiceDemoProps) { + const isAnnouncementsTurn = + props.demoStep == DemoStep.playAnnouncement || + props.demoStep == DemoStep.resolveAnnouncement; -export default function Announcements() { return ( -
+
ANNOUNCEMENTS - + */} + + + + updates, pep talks, blockers, reminders {/* tab pane */} - + Active - - Resolved - + Resolved TODAY - - + + +
@@ -86,9 +97,17 @@ export default function Announcements() { - + + + + + + +
diff --git a/components/demo/TeamVoiceLine.tsx b/components/demo/TeamVoiceLine.tsx index b335977..6854545 100644 --- a/components/demo/TeamVoiceLine.tsx +++ b/components/demo/TeamVoiceLine.tsx @@ -1,8 +1,13 @@ -import { FaPlus } from "react-icons/fa"; +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"; let testFriends = [ { @@ -25,15 +30,13 @@ let testFriends = [ }, { name: "Mark", - role: "engineer", + role: "designer", systemAvatar: "04", status: UserStatus.busy, }, ]; function statusBubble(status: UserStatus) { - console.log(status); - switch (status) { case UserStatus.online: return ( @@ -75,9 +78,79 @@ function renderPulse(status: UserStatus) { } } -export default function TeamVoiceLine() { +export default function TeamVoiceLine(props: IVoiceDemoProps) { + const isVoiceLineTurn = + props.demoStep == DemoStep.playIncomingMessage || + props.demoStep == DemoStep.hearReply || + props.demoStep == DemoStep.sendReply; + + 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) { + toast.success("Paul heard it live!"); + } + }, [props.demoStep]); + + const [isRecording, setIsRecording] = useState(false); + + const handleKeyUp = useCallback( + (event) => { + if (event.repeat) { + return; + } + console.log("on key up"); + console.log(event.keyCode); + + if (isRecording && event.keyCode == KeyCode.R) { + setIsRecording(false); + } + }, + [isRecording] + ); + + const handleKeyDown = useCallback( + (event) => { + if (event.repeat) { + return; + } + console.log(event.keyCode); + + if (event.keyCode == KeyCode.R) { + setIsRecording(true); + } + }, + [isRecording] + ); + + useEffect(() => { + document.addEventListener("keydown", handleKeyDown); + document.addEventListener("keyup", handleKeyUp); + + return () => { + document.removeEventListener("keydown", handleKeyDown); + document.removeEventListener("keyup", handleKeyUp); + }; + }, [handleKeyDown, handleKeyUp]); + return ( -
+
console.log("yayayayay")} + > @@ -85,9 +158,11 @@ export default function TeamVoiceLine() { - + + + {/* list of team members */} @@ -95,11 +170,18 @@ export default function TeamVoiceLine() { return ( - + {statusBubble(friend.status)} @@ -121,12 +203,45 @@ export default function TeamVoiceLine() { {friend.name}{" "} - + + {friend.name == "Paul" && + props.demoStep == DemoStep.playIncomingMessage ? ( + + ) : ( + <> + )} + + {friend.name == "Paul" && + props.demoStep == DemoStep.sendReply ? ( + + + + ) : ( + + )} diff --git a/components/demo/VoiceLineConceptDemo.tsx b/components/demo/VoiceLineConceptDemo.tsx new file mode 100644 index 0000000..5c557f2 --- /dev/null +++ b/components/demo/VoiceLineConceptDemo.tsx @@ -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", + resolveAnnouncement = "resolve announcement", +} + +export interface IVoiceDemoProps { + demoStep: DemoStep; + + handleChangeDemoStep: Function; +} + +export default function VoiceLineConceptDemo() { + const [demoStep, setDemoStep] = useState(DemoStep.playDemo); + + function handleChangeStep(newStep: DemoStep) { + setDemoStep(newStep); + } + + return ( + <> + + + + + {demoStep == DemoStep.playDemo ? ( + + + + ) : ( + + )} + + ); +} diff --git a/pages/index.js b/pages/index.js index afc6f01..abd6687 100644 --- a/pages/index.js +++ b/pages/index.js @@ -10,6 +10,7 @@ import { import TeamVoiceLine from "../components/demo/TeamVoiceLine"; import Announcements from "../components/demo/Announcements"; import Rooms from "../components/demo/Rooms"; +import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo"; import MainLogo from "../components/MainLogo"; import { Divider } from "antd"; @@ -56,55 +57,61 @@ export default function Home() { -
- - No - - slacking - - - - threads - - +
+ + + No + slacking - - calendars - - - files - - - threads + + + threads + + + slacking + + + calendars + + + files + + + threads + + + + More + focus. + + + + Voice-first collaboration tool for scrum/agile teams. +

+ Skip slack and email, just talk to your team. + + + + + Email Us + + {getStartedButton} + - - More - focus. - - - - Voice-first collaboration tool for scrum/agile teams. -

- Skip slack and email, just talk to your team. - - - - - Email Us - - {getStartedButton} + +
{/* main mission */} -
+
Philosophy diff --git a/pages/philosophy.tsx b/pages/philosophy.tsx new file mode 100644 index 0000000..14212f2 --- /dev/null +++ b/pages/philosophy.tsx @@ -0,0 +1,86 @@ +import { Divider } from "antd"; +import { useRouter } from "next/router"; +import { FaAngleRight } from "react-icons/fa"; +import Rooms from "../components/demo/Rooms"; + +export default function Philosophy() { + const handleGetDemo = () => { + window.open("https://calendly.com/usenirvana/30min", "_blank"); + }; + + const router = useRouter(); + + const getStartedButton = ( + + ); + return ( + <> + {/* main mission */} +
+ + Philosophy + + + + In today's distracted world, we mistake adding software and tools + for productivity. + + + + At Nirvana, we are bringing work back to the basics. Voice first + communication because voice makes us human and less is more. An + experience as if your team was right next to you. + + + <> +
+ + {/* rooms concept */} +
+ + + + + Rooms + + + + See what's going on across the hall at a glance. + + + + + + Join Ben and Cathy's conversation to review design mockups or + jump into another room for wine Wednesdays! + + + + + + Why go back and forth through chat 100 times or schedule a meeting + tomorrow at 2pm? + + + + Jump into rooms and resolve issues quicker. + + +
+ + {/* action section */} +
+ + Ready to start working? + + {getStartedButton} +
+ + ); +}