Add Voice Wave Animation for recording and show recorded text

This commit is contained in:
Ceda EI 2021-01-04 03:45:09 +05:30
parent 08e5c2e3d2
commit 031c1ede21
4 changed files with 93 additions and 5 deletions

View File

@ -1,12 +1,15 @@
import React from "react"; import React from "react";
import { useSelector, useDispatch } from "react-redux"; 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 { setPlugin, selectCore } from "./coreSlice";
import { selectVoice } from "./voiceSlice";
import VoiceBars from "./components/VoiceBars";
import plugins from "./plugins"; import plugins from "./plugins";
function Core() { function Core() {
const coreState = useSelector(selectCore); const coreState = useSelector(selectCore);
const voiceState = useSelector(selectVoice);
const dispatch = useDispatch(); const dispatch = useDispatch();
const plugin = plugins[coreState.plugin]; const plugin = plugins[coreState.plugin];
const props = { const props = {
@ -15,6 +18,12 @@ function Core() {
}; };
const dummyButtons = ["Maps", "Home Devices", "Phone"]; const dummyButtons = ["Maps", "Home Devices", "Phone"];
return <> 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) : ( {plugin ? React.createElement(plugin, props, null) : (
<Box <Box
align="center" align="center"
@ -23,10 +32,10 @@ function Core() {
justify="center" justify="center"
direction="column" direction="column"
alignContent="center" alignContent="center"
height="100vh" height="95vh"
> >
<Clock size="xxlarge" /> <Clock size="xxlarge" />
<Clock size="xxlarge" type="digital" /> <Clock size="xxlarge" type="digital" /> :
<Box direction="row" margin="1.5em" wrap={true}> <Box direction="row" margin="1.5em" wrap={true}>
<Button onClick={() => dispatch(setPlugin("petMode"))} primary <Button onClick={() => dispatch(setPlugin("petMode"))} primary
label="Pet Mode" /> label="Pet Mode" />

View File

@ -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;

View File

@ -56,7 +56,7 @@ function Accident(props) {
justify="center" justify="center"
direction="column" direction="column"
alignContent="center" alignContent="center"
height="100vh" height="95vh"
> >
{ {
time === 0 ? time === 0 ?

View File

@ -11,7 +11,7 @@ function GenericPageWithIcon(props) {
justify="center" justify="center"
direction="column" direction="column"
alignContent="center" alignContent="center"
height="100vh" height="95vh"
> >
{props.icon} {props.icon}
<Heading>{props.title}</Heading> <Heading>{props.title}</Heading>