better modal switching behavior

vocodes/src/App.tsx

@@ -10,6 +10,7 @@ import { TopNav } from './navigation/TopNav';
 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';
 
 interface Props {}
 
@@ -17,6 +18,7 @@ interface State {
   mode: Mode,
   extrasMode: ExtrasMode,
   speaker: Speaker,
+  currentSpectrogram?: Spectrogram,
 }
 
 class App extends React.Component<Props, State> {
@@ -47,12 +49,27 @@ class App extends React.Component<Props, State> {
   }
 
   setSpeakerBySlug = (speakerSlug: string) : void => {
-    console.log('speaker', speakerSlug);
+    let selectedSpeaker = undefined;
+
     SPEAKERS.forEach(speaker => {
       if (speaker.slug === speakerSlug) {
-        this.setState({ speaker: speaker });
+        selectedSpeaker = speaker;
       }
     })
+
+    if (selectedSpeaker !== undefined) {
+      this.setState({ 
+        speaker: selectedSpeaker,
+        extrasMode: ExtrasMode.SPEAKER_INFO,
+      });
+    }
+  }
+
+  updateSpectrogram = (spectrogram: Spectrogram) => {
+    this.setState({ 
+      currentSpectrogram: spectrogram,
+      extrasMode: ExtrasMode.SPECTROGRAM,
+    });
   }
 
   public render() {
@@ -60,9 +77,11 @@ class App extends React.Component<Props, State> {
     switch (this.state.mode) {
       case Mode.SPEAK_MODE:
         component = <SpeakComponent 
-          currentSpeaker={this.state.speaker} 
-          changeSpeakerCallback={this.setSpeakerBySlug} 
           extrasMode={this.state.extrasMode}
+          currentSpeaker={this.state.speaker} 
+          currentSpectrogram={this.state.currentSpectrogram}
+          changeSpeakerCallback={this.setSpeakerBySlug} 
+          changeSpectrogramCallback={this.updateSpectrogram} 
           changeExtrasModeCallback={this.switchExtrasMode}
           />;
         break;

vocodes/src/modes/speak/SpeakComponent.tsx

@@ -16,9 +16,11 @@ enum StatusState {
 }
 
 interface Props {
-  currentSpeaker: Speaker,
   extrasMode: ExtrasMode,
+  currentSpeaker: Speaker,
+  currentSpectrogram?: Spectrogram,
   changeSpeakerCallback: (slug: string) => void,
+  changeSpectrogramCallback: (spectrogram: Spectrogram) => void,
   changeExtrasModeCallback: (extrasMode: ExtrasMode) => void,
 }
 
@@ -26,7 +28,6 @@ interface State {
   statusState: StatusState;
   statusMessage: string,
   isTalking: boolean,
-  currentSpectrogram?: Spectrogram,
 }
 
 class SpeakComponent extends React.Component<Props, State> {
@@ -37,7 +38,6 @@ class SpeakComponent extends React.Component<Props, State> {
       statusState: StatusState.NONE,
       statusMessage: '',
       isTalking: false,
-      currentSpectrogram: undefined,
     };
   }
 
@@ -111,10 +111,6 @@ class SpeakComponent extends React.Component<Props, State> {
     this.setState({ isTalking: false });
   }
 
-  updateSpectrogram = (spectrogram: Spectrogram) => {
-    this.setState({ currentSpectrogram: spectrogram });
-  }
-
   public render() {
     return (
       <div>
@@ -127,7 +123,7 @@ class SpeakComponent extends React.Component<Props, State> {
           <ExtrasComponent 
             extrasMode={this.props.extrasMode}
             currentSpeaker={this.props.currentSpeaker} 
-            currentSpectrogram={this.state.currentSpectrogram}
+            currentSpectrogram={this.props.currentSpectrogram}
             changeExtrasModeCallback={this.props.changeExtrasModeCallback}
             />
         </div>
@@ -145,7 +141,7 @@ class SpeakComponent extends React.Component<Props, State> {
           onSpeakErrorCallback={this.onSpeakError}
           onPlayCallback={this.onPlay}
           onStopCallback={this.onStop}
-          updateSpectrogramCallback={this.updateSpectrogram}
+          updateSpectrogramCallback={this.props.changeSpectrogramCallback}
           />
       </div>
     );