random speaker button

vocodes/src/App.tsx

@@ -165,7 +165,7 @@ class App extends React.Component<Props, State> {
   }
 
   setSpeakerBySlug = (speakerSlug: string) : void => {
-    let selectedSpeaker = undefined;
+    let selectedSpeaker : Speaker | undefined = undefined;
 
     SPEAKERS.forEach(speaker => {
       if (speaker.slug === speakerSlug) {
@@ -173,12 +173,24 @@ class App extends React.Component<Props, State> {
       }
     })
 
-    if (selectedSpeaker !== undefined) {
-      this.setState({ 
-        speaker: selectedSpeaker,
-        extrasMode: ExtrasMode.SPEAKER_INFO,
-      });
+    if (selectedSpeaker === undefined) {
+      return;
     }
+
+    const speakers = SPEAKERS_BY_CATEGORY.get(this.state.currentSpeakerCategory) || [];
+
+    let isCategoryCorrect = speakers.find(speaker =>
+      speaker.getSlug() === selectedSpeaker!.getSlug()) !== undefined;
+
+    let category = isCategoryCorrect
+      ? this.state.currentSpeakerCategory
+      : CATEGORY_ALL;
+
+    this.setState({
+      speaker: selectedSpeaker,
+      extrasMode: ExtrasMode.SPEAKER_INFO,
+      currentSpeakerCategory: category,
+    });
   }
 
   updateSpectrogram = (spectrogram: Spectrogram) => {

vocodes/src/modes/speak/SpeakComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CategoryDropdown } from './dropdowns/CategoryDropdown';
 import { Form } from './Form';
-import { Speaker, SpeakerCategory } from '../../model/Speakers';
+import { Speaker, SpeakerCategory, SPEAKERS } from '../../model/Speakers';
 import { SpeakerDropdown } from './dropdowns/SpeakerDropdown';
 import { SpeakerInfo } from './extras/SpeakerInfo';
 import { Spectrogram } from './extras/Spectrogram';
@@ -140,6 +140,12 @@ class SpeakComponent extends React.Component<Props, State> {
     }
   }
 
+  selectRandomSpeaker = () => {
+    const index = Math.floor(Math.random() * SPEAKERS.length);
+    const speaker = SPEAKERS[index]!;
+    this.props.changeSpeakerCallback(speaker.getSlug());
+  }
+
   public render() {
     let speakerPictureOrSpectrogram;
     switch (this.props.extrasMode) {
@@ -174,11 +180,22 @@ class SpeakComponent extends React.Component<Props, State> {
 
     return (
       <section>
-        <CategoryDropdown 
-          currentSpeakerCategory={this.props.currentSpeakerCategory}
-          changeSpeakerCategoryCallback={this.props.changeSpeakerCategoryCallback}
-          />
+        <div className="columns is-mobile is-gapless">
+          <div className="column">
+            <CategoryDropdown
+              currentSpeakerCategory={this.props.currentSpeakerCategory}
+              changeSpeakerCategoryCallback={this.props.changeSpeakerCategoryCallback}
+              />
+          </div>
         
+          <div className="column">
+            <button
+              className="button is-light is-info"
+              onClick={this.selectRandomSpeaker}
+              >Random Speaker</button>
+          </div>
+        </div>
+
         <div className="columns is-mobile is-gapless">
 
           <SpeakerDropdown