From 031c1ede21d9e845c32597e30f93c7d2a2d951c8 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Mon, 4 Jan 2021 03:45:09 +0530
Subject: [PATCH] Add Voice Wave Animation for recording and show recorded text

---
 src/Core.js                        | 15 ++++--
 src/components/VoiceBars.js        | 79 ++++++++++++++++++++++++++++++
 src/plugins/Accident.js            |  2 +-
 src/plugins/GenericPageWithIcon.js |  2 +-
 4 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 src/components/VoiceBars.js

diff --git a/src/Core.js b/src/Core.js
index 009ceea..d656a3b 100644
--- a/src/Core.js
+++ b/src/Core.js
@@ -1,12 +1,15 @@
 import React from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { Box, Button, Clock } from "grommet";
+import { Box, Button, Clock, Text } from "grommet";
 
 import { setPlugin, selectCore } from "./coreSlice";
+import { selectVoice } from "./voiceSlice";
+import VoiceBars from "./components/VoiceBars";
 import plugins from "./plugins";
 
 function Core() {
 	const coreState = useSelector(selectCore);
+	const voiceState = useSelector(selectVoice);
 	const dispatch = useDispatch();
 	const plugin = plugins[coreState.plugin];
 	const props = {
@@ -15,6 +18,12 @@ function Core() {
 	};
 	const dummyButtons = ["Maps", "Home Devices", "Phone"];
 	return <>
+		<Box height="5vh" background="light-1" justify="center" direction="row">
+			{voiceState.recording ? <VoiceBars style={{height: "100%"}}/>:
+				voiceState.text === null ? null:
+					<Text style={{paddingTop: "1em"}}>{voiceState.text}</Text>
+			}
+		</Box>
 		{plugin ? React.createElement(plugin, props, null) : (
 			<Box
 				align="center"
@@ -23,10 +32,10 @@ function Core() {
 				justify="center"
 				direction="column"
 				alignContent="center"
-				height="100vh"
+				height="95vh"
 			>
 				<Clock size="xxlarge" />
-				<Clock size="xxlarge" type="digital" />
+				<Clock size="xxlarge" type="digital" /> :
 				<Box direction="row" margin="1.5em" wrap={true}>
 					<Button onClick={() => dispatch(setPlugin("petMode"))} primary
 						label="Pet Mode" />
diff --git a/src/components/VoiceBars.js b/src/components/VoiceBars.js
new file mode 100644
index 0000000..0f3164c
--- /dev/null
+++ b/src/components/VoiceBars.js
@@ -0,0 +1,79 @@
+import React from "react";
+
+function VoiceBars() {
+	return (
+		<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px"}}>
+			<svg width="100vw" fill="none" version="1.1"
+				xmlns="http://www.w3.org/2000/svg">
+				<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+					<stop offset="0%" stopColor="#00B4DB" />
+					<stop offset="50%" stopColor="#224488" />
+					<stop offset="100%" stopColor="#0083B0" />
+				</linearGradient>
+				<path
+					fill="url(#grad1)"
+					d="
+					M0 67
+					C 273,183
+					822,-40
+					1920.00,106
+
+					V 359
+					H 0
+					V 67
+					Z">
+					<animate
+						repeatCount="indefinite"
+						fill="url(#grad1)"
+						attributeName="d"
+						dur="5s"
+						attributeType="XML"
+						values="
+						M0 77
+						C 473,283
+						822,-40
+						1920,116
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 473,-40
+						1222,283
+						1920,136
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 973,260
+						1722,-53
+						1920,120
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 473,283
+						822,-40
+						1920,116
+
+						V 359
+						H 0
+						V 67
+						Z
+						">
+					</animate>
+				</path>
+			</svg>
+		</div>
+	);
+}
+
+export default VoiceBars;
diff --git a/src/plugins/Accident.js b/src/plugins/Accident.js
index 9f31645..8f66c41 100644
--- a/src/plugins/Accident.js
+++ b/src/plugins/Accident.js
@@ -56,7 +56,7 @@ function Accident(props) {
 			justify="center"
 			direction="column"
 			alignContent="center"
-			height="100vh"
+			height="95vh"
 		>
 			{
 				time === 0 ?
diff --git a/src/plugins/GenericPageWithIcon.js b/src/plugins/GenericPageWithIcon.js
index b24a221..308571e 100644
--- a/src/plugins/GenericPageWithIcon.js
+++ b/src/plugins/GenericPageWithIcon.js
@@ -11,7 +11,7 @@ function GenericPageWithIcon(props) {
 			justify="center"
 			direction="column"
 			alignContent="center"
-			height="100vh"
+			height="95vh"
 		>
 			{props.icon}
 			<Heading>{props.title}</Heading>