preserve selected voice

vocodes/src/App.tsx

@@ -14,6 +14,7 @@ import { W2lInferenceJob, W2lInferenceJobStateResponsePayload } from './jobs/W2l
 import { TtsModelUploadJob, TtsModelUploadJobStateResponsePayload } from './jobs/TtsModelUploadJobs';
 import { W2lTemplateUploadJob, W2lTemplateUploadJobStateResponsePayload } from './jobs/W2lTemplateUploadJobs';
 import { jobStateCanChange } from './jobs/JobStates';
+import { TtsModelListItem } from './v2/api/tts/ListTtsModels';
 
 enum MigrationMode {
   NEW_VOCODES,
@@ -45,6 +46,10 @@ interface State {
 
   // Current text entered
   textBuffer: string,
+
+  // List of voices (post-query) and current voice selected on main page
+  ttsModels: Array<TtsModelListItem>,
+  currentTtsModelSelected?: TtsModelListItem,
 }
 
 function newVocodes() {
@@ -74,6 +79,9 @@ class App extends React.Component<Props, State> {
       w2lTemplateUploadJobs: [],
 
       textBuffer: '',
+
+      ttsModels: [],
+      currentTtsModelSelected: undefined,
     }
   }
 
@@ -359,6 +367,14 @@ class App extends React.Component<Props, State> {
     this.setState({ textBuffer: '' });
   }
 
+  setTtsModels = (ttsModels: Array<TtsModelListItem>) => {
+    this.setState({ ttsModels: ttsModels });
+  }
+
+  setCurrentTtsModelSelected = (ttsModel: TtsModelListItem) => {
+    this.setState({ currentTtsModelSelected: ttsModel });
+  }
+
   public render() {
     if (this.state.migrationMode === MigrationMode.OLD_VOCODES) {
       return (
@@ -407,6 +423,12 @@ class App extends React.Component<Props, State> {
                     textBuffer={this.state.textBuffer}
                     setTextBuffer={this.setTextBuffer}
                     clearTextBuffer={this.clearTextBuffer}
+
+                    ttsModels={this.state.ttsModels}
+                    setTtsModels={this.setTtsModels}
+                    currentTtsModelSelected={this.state.currentTtsModelSelected}
+                    setCurrentTtsModelSelected={this.setCurrentTtsModelSelected}
+                    
                     />
                 </Route>
               </Switch>

vocodes/src/v2/view/NewVocodesContainer.tsx

@@ -35,6 +35,7 @@ import { W2lTemplateEditFc } from './w2l/w2l_template_edit/W2lTemplateEditFc';
 import { W2lResultDeleteFc } from './w2l/w2l_result_delete/W2lResultDeleteFc';
 import { W2lTemplateApproveFc } from './w2l/w2l_template_approve/W2lTemplateApproveFc';
 import { TtsModelListFc } from './tts/tts_model_list/TtsModelListFc';
+import { TtsModelListItem } from '../api/tts/ListTtsModels';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -55,6 +56,11 @@ interface Props {
   textBuffer: string,
   setTextBuffer: (textBuffer: string) => void,
   clearTextBuffer: () => void,
+
+  ttsModels: Array<TtsModelListItem>,
+  setTtsModels: (ttsVoices: Array<TtsModelListItem>) => void,
+  currentTtsModelSelected?: TtsModelListItem,
+  setCurrentTtsModelSelected: (ttsModel: TtsModelListItem) => void,
 }
 
 interface State {
@@ -276,6 +282,10 @@ class NewVocodesContainer extends React.Component<Props, State> {
                 textBuffer={this.props.textBuffer}
                 setTextBuffer={this.props.setTextBuffer}
                 clearTextBuffer={this.props.clearTextBuffer}
+                ttsModels={this.props.ttsModels}
+                setTtsModels={this.props.setTtsModels}
+                currentTtsModelSelected={this.props.currentTtsModelSelected}
+                setCurrentTtsModelSelected={this.props.setCurrentTtsModelSelected}
               />
             </Route>
 

vocodes/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { ApiConfig } from '../../../../common/ApiConfig';
 import { Link } from 'react-router-dom';
 import { SessionTtsInferenceResultListFc } from '../../_common/SessionTtsInferenceResultsListFc';
@@ -30,22 +30,27 @@ interface Props {
   textBuffer: string,
   setTextBuffer: (textBuffer: string) => void,
   clearTextBuffer: () => void,
+  ttsModels: Array<TtsModelListItem>,
+  setTtsModels: (ttsVoices: Array<TtsModelListItem>) => void,
+  // TODO: rename 'active'
+  currentTtsModelSelected?: TtsModelListItem,
+  setCurrentTtsModelSelected: (ttsModel: TtsModelListItem) => void,
 }
 
 function TtsModelListFc(props: Props) {
-  const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
 
-  const [selectedTtsModel, setSelectedTtsModel] = useState<TtsModelListItem|undefined>(undefined);
+  let { setTtsModels, setCurrentTtsModelSelected, currentTtsModelSelected } = props;
 
   const listModels = useCallback(async () => {
     const models = await ListTtsModels();
     if (models) {
       setTtsModels(models);
-      if (models.length > 0) {
-        setSelectedTtsModel(models[0]);
+      if (!currentTtsModelSelected && models.length > 0) {
+        const model = models[0];
+        setCurrentTtsModelSelected(model);
       }
     }
-  }, []);
+  }, [setTtsModels, setCurrentTtsModelSelected, currentTtsModelSelected]);
 
   useEffect(() => {
     listModels();
@@ -54,8 +59,11 @@ function TtsModelListFc(props: Props) {
   let listItems: Array<JSX.Element> = [];
 
   let defaultSelectValue = '';
+  if (props.currentTtsModelSelected) {
+    defaultSelectValue = props.currentTtsModelSelected.model_token;
+  }
 
-  ttsModels.forEach(m => {
+  props.ttsModels.forEach(m => {
     let option = (
       <option 
         key={m.model_token} 
@@ -86,9 +94,9 @@ function TtsModelListFc(props: Props) {
     const selectVoiceValue = (ev.target as HTMLSelectElement).value;
 
     // TODO: Inefficient.
-    ttsModels.forEach(model => {
+    props.ttsModels.forEach(model => {
       if (model.model_token === selectVoiceValue) {
-        setSelectedTtsModel(model);
+        props.setCurrentTtsModelSelected(model);
       }
     });
 
@@ -104,15 +112,15 @@ function TtsModelListFc(props: Props) {
   const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) => { 
     ev.preventDefault();
 
-    if (selectedTtsModel === undefined) {
+    if (!props.currentTtsModelSelected) {
       return false;
     }
 
-    if (props.textBuffer === undefined) {
+    if (!props.textBuffer) {
       return false;
     }
 
-    const modelToken = selectedTtsModel!.model_token;
+    const modelToken = props.currentTtsModelSelected!.model_token;
 
     const api = new ApiConfig();
     const endpointUrl = api.inferTts();
@@ -155,16 +163,16 @@ function TtsModelListFc(props: Props) {
 
   let directViewLink = <span />;
 
-  if (selectedTtsModel !== undefined) {
-    let modelLink = `/tts/${selectedTtsModel.model_token}`;
+  if (props.currentTtsModelSelected) {
+    let modelLink = `/tts/${props.currentTtsModelSelected.model_token}`;
     directViewLink = (
       <Link to={modelLink}>
-        See more details about the "<strong>{selectedTtsModel.title}</strong>" model 
-        by&nbsp;<strong>{selectedTtsModel.creator_display_name}</strong>&nbsp; 
+        See more details about the "<strong>{props.currentTtsModelSelected.title}</strong>" model 
+        by&nbsp;<strong>{props.currentTtsModelSelected.creator_display_name}</strong>&nbsp; 
         <GravatarFc 
           size={15}
-          username={selectedTtsModel.creator_display_name}
-          email_hash={selectedTtsModel.creator_gravatar_hash} /> 
+          username={props.currentTtsModelSelected.creator_display_name}
+          email_hash={props.currentTtsModelSelected.creator_gravatar_hash} /> 
       </Link>
     );
   }
@@ -176,12 +184,6 @@ function TtsModelListFc(props: Props) {
         Say stuff with your favorite characters.
       </h5>
 
-      {/*
-      <div className="content is-large">
-        {extraDetails}
-      </div>
-      */}
-
       <br />
 
       <form onSubmit={handleFormSubmit}>