PrompterPage.js
2.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { Fragment } from 'react';
import axios from 'axios'
import {
GlobalStyles,
StyledApp,
StyledTeleprompter as Teleprompter,
Controls,
Buttons,
Button,
} from "../styles";
// import { withStyles, Typography, Paper, Button, TextField} from '@material-ui/core';
// const styles = theme => ({
// root: {
// '& .MuiTextField-root': {
// margin: theme.spacing(1),
// width: '100%',
// minWidth: 1080
// },
// },
// title: {
// marginTop: theme.spacing.unit * 5,
// textAlign: 'center',
// display: 'none',
// fontSize: '2.0rem',
// [theme.breakpoints.up('sm')]: {
// display: 'block',
// }
// },
// paper: {
// marginTop: theme.spacing.unit * 5,
// marginLeft: theme.spacing.unit * 20,
// marginRight: theme.spacing.unit * 20
// },
// button: {
// marginTop: theme.spacing.unit * 1,
// marginLeft: theme.spacing.unit * 20,
// fontSize: '1rem',
// },
// });
// const INITIAL_TEXT = ``;
function PrompterPage() {
const [listening, setListening] = React.useState(false);
const [words, setWords] = React.useState("".split(" "));
// const [words, setWords] = React.useState("");
const [progress, setProgress] = React.useState(0);
// Serverλ‘λΆν° Script λ°μμ΄
axios.get("api/script")
.then(res => { // .then : μλ΅(μνμ½λ200~300λ―Έλ§)μ±κ³΅μ
console.log(res.data);
setWords(res.data.split(" ")); // λ°μμ¨ Script λ¬Έμμ΄ μ²λ¦¬
})
.catch(error => {
console.log(error);
});
// const handleInput = (e) => {
// setWords(e.target.value.split(" "));
// progress && setProgress(0);
// };
const handleListening = () => {
if (listening) {
setListening(false);
} else {
setProgress(0);
setListening(true);
}
};
const handleReset = () => setProgress(0);
const handleChange = (progress) => setProgress(progress);
return (
<>
<GlobalStyles />
<StyledApp>
<Controls>
<Buttons>
<Button onClick={handleListening}>{listening ? "Stop" : "Start"}</Button>
<Button onClick={handleReset} disabled={listening} secondary>Reset</Button>
</Buttons>
</Controls>
<Teleprompter words={words} listening={listening} progress={progress} onChange={handleChange} />
</StyledApp>
</>
);
}
export default PrompterPage;