Add history mode, downloads (rough draft)

vocodes/src/App.tsx

@@ -11,6 +11,8 @@ import { UsageComponent } from './modes/usage/UsageComponent';
 import { Speaker, SPEAKERS } from './Speakers';
 import { ExtrasMode } from './modes/speak/extras/ExtrasComponent';
 import { Spectrogram } from './modes/speak/extras/Spectrogram';
+import { Utterance } from './model/utterance';
+import { HistoryComponent } from './modes/history/HistoryComponent';
 
 interface Props {}
 
@@ -39,6 +41,7 @@ interface State {
   speaker: Speaker,
   currentSpectrogram?: Spectrogram,
   spectrogramMode: SpectrogramMode,
+  utterances: Utterance[],
 }
 
 class App extends React.Component<Props, State> {
@@ -50,6 +53,7 @@ class App extends React.Component<Props, State> {
       extrasMode: ExtrasMode.SPEAKER_INFO,
       speaker: SPEAKERS[0],
       spectrogramMode: SpectrogramMode.VIRIDIS,
+      utterances: [],
     };
   }
 
@@ -97,6 +101,12 @@ class App extends React.Component<Props, State> {
     this.setState({ spectrogramMode: spectrogramMode });
   }
 
+  appendUtterance = (utterance: Utterance) => {
+    let utterances = this.state.utterances.slice();
+    utterances.push(utterance);
+    this.setState({ utterances: utterances });
+  }
+
   public render() {
     let component;
     switch (this.state.mode) {
@@ -110,8 +120,12 @@ class App extends React.Component<Props, State> {
           changeExtrasModeCallback={this.switchExtrasMode}
           spectrogramMode={this.state.spectrogramMode}
           changeSpectrogramMode={this.setSpectrogramMode}
+          appendUtteranceCallback={this.appendUtterance}
           />;
         break;
+      case Mode.HISTORY_MODE:
+        component = <HistoryComponent utterances={this.state.utterances} />
+        break;
       case Mode.USAGE_MODE:
         component = <UsageComponent resetModeCallback={this.resetMode} />;
         break;

vocodes/src/AppMode.ts

@@ -1,8 +1,8 @@
 enum Mode {
   SPEAK_MODE,
+  HISTORY_MODE,
   USAGE_MODE,
   NEWS_MODE,
-  HISTORY_MODE,
   HELP_WANTED_MODE,
   TERMS_MODE,
 }

vocodes/src/model/utterance.ts

@@ -0,0 +1,17 @@
+import { Speaker } from "../Speakers";
+
+class Utterance {
+  originalText: string;
+  speaker: Speaker;
+  howl: Howl;
+  base64data: string;
+
+  constructor(originalText: string, speaker: Speaker, howl: Howl, base64data: string) {
+    this.originalText = originalText;
+    this.speaker = speaker;
+    this.howl = howl;
+    this.base64data = base64data;
+  }
+}
+
+export { Utterance }

vocodes/src/modes/history/HistoryComponent.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Utterance } from '../../model/utterance';
+import { PastUtterance } from './PastUtterance';
+
+interface Props {
+  utterances: Utterance[],
+}
+
+interface State {
+}
+
+class HistoryComponent extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  public render() {
+    const utterances = this.props.utterances.map((utterance) => {
+      return <PastUtterance utterance={utterance} />
+    });
+    return (
+      <div>
+        {utterances}
+      </div>
+    )
+  }
+}
+
+export { HistoryComponent }

vocodes/src/modes/history/PastUtterance.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Utterance } from "../../model/utterance";
+
+interface Props {
+  utterance: Utterance,
+}
+
+interface State {
+}
+
+class PastUtterance extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  play = () => {
+    this.props.utterance.howl.play();
+  }
+
+  public render() {
+    let url = `data:audio/wav;base64,${this.props.utterance.base64data}`;
+    return (
+      <div>
+        <h3>{this.props.utterance.speaker.getName()}</h3>
+        {this.props.utterance.originalText}
+        <br/>
+        <button onClick={this.play}>Play</button>
+        <a href={url} download="vocodes.wav">Download</a>
+      </div>
+    )
+  }
+}
+
+export { PastUtterance }

vocodes/src/modes/speak/Form.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { SpeakRequest } from './SpeakRequest';
 import { Speaker } from '../../Speakers';
 import { createColorMap, linearScale } from "@colormap/core";
-//import { VIRIDIS, CIVIDIS, PLASMA, INFERNO, MAGMA, BLACK_WHITE,  } from "@colormap/presets";
 import { MAGMA } from "@colormap/presets";
 import { Spectrogram } from './extras/Spectrogram';
 import { SpectrogramMode } from '../../App';
+import { Utterance } from '../../model/utterance';
 
 interface Props {
   currentSpeaker: Speaker,
@@ -19,6 +19,7 @@ interface Props {
   onPlayCallback: () => void,
   onStopCallback: () => void,
   updateSpectrogramCallback: (spectrogram: Spectrogram) => void,
+  appendUtteranceCallback: (utterance: Utterance) => void,
 }
 
 interface State {
@@ -37,8 +38,8 @@ class Form extends React.Component<Props, State> {
     };
   }
 
-  public speak(sentence: string, speaker: string) {
-    let request = new SpeakRequest(sentence, speaker);
+  public speak(sentence: string, speaker: Speaker) {
+    let request = new SpeakRequest(sentence, speaker.getSlug());
 
     console.log("Making SpeakRequest:", request);
 
@@ -107,6 +108,7 @@ class Form extends React.Component<Props, State> {
     .then(res => res.json())
     .then(res => {
       const data = `data:audio/wav;base64,${res.audio_base64}`;
+      (window as any).audio_base64 = res.audio_base64;
 
       // var image = new Image();
       // image.src = `data:image/bmp;base64,${res.spectrogram.bytes_base64}`;
@@ -160,6 +162,9 @@ class Form extends React.Component<Props, State> {
 
       sound.play();
 
+      const utterance = new Utterance(sentence, speaker, sound, res.audio_base64);
+      this.props.appendUtteranceCallback(utterance);
+
       (window as any).sound = sound;
     })
     .catch(e => {
@@ -195,8 +200,7 @@ class Form extends React.Component<Props, State> {
 
   handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
     ev.preventDefault();
-    let speaker = this.props.currentSpeaker.getSlug();
-    this.speak(this.state.text, speaker);
+    this.speak(this.state.text, this.props.currentSpeaker);
     return false;
   }
 

vocodes/src/modes/speak/SpeakComponent.tsx

@@ -7,6 +7,7 @@ import { Speaker } from '../../Speakers';
 import { ExtrasComponent, ExtrasMode } from './extras/ExtrasComponent';
 import { Spectrogram } from './extras/Spectrogram';
 import { SpectrogramMode } from '../../App';
+import { Utterance } from '../../model/utterance';
 
 enum StatusState {
   NONE,
@@ -24,6 +25,7 @@ interface Props {
   changeSpectrogramCallback: (spectrogram: Spectrogram) => void,
   changeExtrasModeCallback: (extrasMode: ExtrasMode) => void,
   changeSpectrogramMode: (spectrogramMode: SpectrogramMode) => void,
+  appendUtteranceCallback: (utterance: Utterance) => void,
 }
 
 interface State {
@@ -147,6 +149,7 @@ class SpeakComponent extends React.Component<Props, State> {
           onPlayCallback={this.onPlay}
           onStopCallback={this.onStop}
           updateSpectrogramCallback={this.props.changeSpectrogramCallback}
+          appendUtteranceCallback={this.props.appendUtteranceCallback}
           />
       </div>
     );

vocodes/src/navigation/TopNav.tsx

@@ -10,6 +10,7 @@ function TopNav(props: Props) {
   return (
     <nav>
       <a href="#speak" onClick={() => props.switchModeCallback(Mode.SPEAK_MODE)}>Speak</a>
+      <a href="#history" onClick={() => props.switchModeCallback(Mode.HISTORY_MODE)}>History</a>
       {/*<a onClick={() => props.switchModeCallback(Mode.HISTORY_MODE)}>Downloads</a>*/}
       <a href="#use" onClick={() => props.switchModeCallback(Mode.USAGE_MODE)}>Usage</a>
       <a href="#news" onClick={() => props.switchModeCallback(Mode.NEWS_MODE)}>News</a>