Add Voice Wave Animation for recording and show recorded text
This commit is contained in:
parent
08e5c2e3d2
commit
031c1ede21
15
src/Core.js
15
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" />
|
||||
|
|
|
@ -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;
|
|
@ -56,7 +56,7 @@ function Accident(props) {
|
|||
justify="center"
|
||||
direction="column"
|
||||
alignContent="center"
|
||||
height="100vh"
|
||||
height="95vh"
|
||||
>
|
||||
{
|
||||
time === 0 ?
|
||||
|
|
|
@ -11,7 +11,7 @@ function GenericPageWithIcon(props) {
|
|||
justify="center"
|
||||
direction="column"
|
||||
alignContent="center"
|
||||
height="100vh"
|
||||
height="95vh"
|
||||
>
|
||||
{props.icon}
|
||||
<Heading>{props.title}</Heading>
|
||||
|
|
Loading…
Reference in New Issue