add order by name and by quality options

vocodes/src/App.tsx

@@ -8,7 +8,7 @@ import { Footer } from './navigation/Footer';
 import { HistoryComponent } from './modes/history/HistoryComponent';
 import { Mode } from './AppMode';
 import { SpeakComponent } from './modes/speak/SpeakComponent';
-import { Speaker, SpeakerCategory, SPEAKERS, SPEAKER_CATEGORIES, CATEGORY_ALL, SPEAKERS_BY_CATEGORY } from './model/Speakers';
+import { Speaker, SpeakerCategory, SPEAKERS, SPEAKER_CATEGORIES, CATEGORY_ALL_BY_NAME, SPEAKERS_BY_CATEGORY } from './model/Speakers';
 import { Spectrogram } from './modes/speak/extras/Spectrogram';
 import { TermsComponent } from './modes/terms/TermsComponent';
 import { TopNav } from './navigation/TopNav';
@@ -107,7 +107,7 @@ class App extends React.Component<Props, State> {
       isHistoryCountBadgeVisible: false,
       currentText: '',
       textCharacterLimit: TEXT_CHARACTER_LIMIT_DEFAULT,
-      currentSpeakerCategory: CATEGORY_ALL,
+      currentSpeakerCategory: CATEGORY_ALL_BY_NAME,
       videoQueuePoller: new VideoQueuePoller(this.updateVideoQueueStats),
       videoJobPoller: new VideoJobPoller(this.updateVideoJob),
       videoQueueStats: VideoQueueStats.default(),
@@ -221,7 +221,7 @@ class App extends React.Component<Props, State> {
 
     let category = isCategoryCorrect
       ? this.state.currentSpeakerCategory
-      : CATEGORY_ALL;
+      : CATEGORY_ALL_BY_NAME;
 
     this.setState({
       speaker: selectedSpeaker,

vocodes/src/model/Speakers.ts

@@ -16,10 +16,13 @@ class SpeakerCategory {
   }
 }
 
-const CATEGORY_ALL: SpeakerCategory = new SpeakerCategory("All Voices", "all");
+const CATEGORY_ALL_BY_NAME: SpeakerCategory = new SpeakerCategory("All Voices (ordered by name)", "all");
+
+const CATEGORY_ALL_BY_QUALITY: SpeakerCategory = new SpeakerCategory("All Voices (ordered by quality)", "all-quality");
 
 const SPEAKER_CATEGORIES : Map<String, SpeakerCategory> = new Map([
-  ["all", CATEGORY_ALL],
+  ["all", CATEGORY_ALL_BY_NAME],
+  ["all-quality", CATEGORY_ALL_BY_QUALITY],
   ["cartoons", new SpeakerCategory("Cartoons and Anime", "cartoons")],
   ["celebrities", new SpeakerCategory("Celebrities", "celebrities")],
   ["games", new SpeakerCategory("Video Games", "games")],
@@ -77,7 +80,9 @@ class Speaker {
     let categories : SpeakerCategory[] = [];
 
     let inputCategories = json.categories || [];
-    inputCategories.push('all');
+
+    inputCategories.push(CATEGORY_ALL_BY_NAME.getSlug());
+    inputCategories.push(CATEGORY_ALL_BY_QUALITY.getSlug());
 
     if (inputCategories) {
       inputCategories.forEach((categoryName : string) => {
@@ -880,5 +885,6 @@ export {
   SPEAKERS,
   SPEAKER_CATEGORIES,
   SPEAKERS_BY_CATEGORY,
-  CATEGORY_ALL,
+  CATEGORY_ALL_BY_NAME,
+  CATEGORY_ALL_BY_QUALITY,
 };

vocodes/src/modes/speak/dropdowns/SpeakerDropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Speaker, SpeakerCategory, SPEAKERS_BY_CATEGORY } from "../../../model/Speakers";
+import { Speaker, SpeakerCategory, SPEAKERS_BY_CATEGORY, CATEGORY_ALL_BY_QUALITY } from "../../../model/Speakers";
 
 interface Props {
   currentSpeaker: Speaker,
@@ -23,7 +23,7 @@ class SpeakerDropdown extends React.Component<Props, State> {
   }
 
   public render() {
-    if (this.props.currentSpeakerCategory.getSlug() === 'all') {
+    if (this.props.currentSpeakerCategory.getSlug() === CATEGORY_ALL_BY_QUALITY.getSlug()) {
       return this.renderAllByQuality();
     } else {
       return this.renderSortedCategory();