diff --git a/vocodes/src/App.tsx b/vocodes/src/App.tsx index b4b74688f9..cfdf232ead 100644 --- a/vocodes/src/App.tsx +++ b/vocodes/src/App.tsx @@ -40,6 +40,7 @@ interface State { currentSpectrogram?: Spectrogram, spectrogramMode: SpectrogramMode, utterances: Utterance[], + currentText: string, } class App extends React.Component { @@ -52,6 +53,7 @@ class App extends React.Component { speaker: SPEAKERS[0], spectrogramMode: SpectrogramMode.VIRIDIS, utterances: [], + currentText: '', }; } @@ -105,6 +107,10 @@ class App extends React.Component { this.setState({ utterances: utterances }); } + setText = (text: string) => { + this.setState({ currentText : text }); + } + public render() { let component; switch (this.state.mode) { @@ -113,12 +119,14 @@ class App extends React.Component { extrasMode={this.state.extrasMode} currentSpeaker={this.state.speaker} currentSpectrogram={this.state.currentSpectrogram} + currentText={this.state.currentText} changeSpeakerCallback={this.setSpeakerBySlug} changeSpectrogramCallback={this.updateSpectrogram} changeExtrasModeCallback={this.switchExtrasMode} spectrogramMode={this.state.spectrogramMode} changeSpectrogramMode={this.setSpectrogramMode} appendUtteranceCallback={this.appendUtterance} + setTextCallback={this.setText} />; break; case Mode.HISTORY_MODE: diff --git a/vocodes/src/modes/speak/Form.tsx b/vocodes/src/modes/speak/Form.tsx index 43a2e550ed..a6acef2ba4 100644 --- a/vocodes/src/modes/speak/Form.tsx +++ b/vocodes/src/modes/speak/Form.tsx @@ -11,6 +11,7 @@ import { Utterance } from '../../model/utterance'; interface Props { currentSpeaker: Speaker, spectrogramMode: SpectrogramMode, + currentText: string, clearStatusCallback: () => void, setHintMessage: (message: string) => void, onSpeakRequestCallback: () => void, @@ -20,10 +21,10 @@ interface Props { onStopCallback: () => void, updateSpectrogramCallback: (spectrogram: Spectrogram) => void, appendUtteranceCallback: (utterance: Utterance) => void, + setTextCallback: (text: string) => void, } interface State { - text: string, howl?: Howl, } @@ -33,9 +34,7 @@ class Form extends React.Component { constructor(props: Props) { super(props); - this.state = { - text: '', - }; + this.state = {}; } public speak(sentence: string, speaker: Speaker) { @@ -43,55 +42,6 @@ class Form extends React.Component { console.log("Making SpeakRequest:", request); - /*//const url = this.props.apiConfig.getEndpoint('/speak'); - const url = 'https://mumble.stream/speak'; - - this.props.onSpeakRequestCallback(); - let that = this; - - fetch(url, { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify(request), - }) - .then(res => res.blob()) - .then(blob => { - this.props.onSpeakSuccessCallback(); - - console.log(blob); - - const url = window.URL.createObjectURL(blob); - console.log(url); - - const sound = new Howl.Howl({ - src: [url], - format: 'wav', - // NB: Attempting to get this working on iPhone Safari - // https://github.com/goldfire/howler.js/issues/1093 - // Other issues cite needing to cache a single player - // across all user interaction events. - html5: true, - onplay: () => { - that.props.onPlayCallback(); - }, - onend: () => { - that.props.onStopCallback(); - }, - }); - - this.setState({howl: sound}); - sound.play(); - - (window as any).sound = sound; - }) - .catch(e => { - this.props.onSpeakErrorCallback(); - }); - */ - //const url = this.props.apiConfig.getEndpoint('/speak_spectrogram'); const url = 'https://mumble.stream/speak_spectrogram'; @@ -173,7 +123,7 @@ class Form extends React.Component { } clear() { - this.setState({text: ''}); + this.props.setTextCallback(''); } handleTextChange = (ev: React.FormEvent) => { @@ -193,14 +143,14 @@ class Form extends React.Component { this.props.clearStatusCallback(); } - this.setState({text: text}); + this.props.setTextCallback(text); return false; } handleFormSubmit = (ev: React.FormEvent) : boolean => { ev.preventDefault(); - this.speak(this.state.text, this.props.currentSpeaker); + this.speak(this.props.currentText, this.props.currentSpeaker); return false; } @@ -229,7 +179,7 @@ class Form extends React.Component {