update tts voice

packages/components/src/api/storyteller/twitch_event_rules/shared/EventResponse.ts

@@ -19,4 +19,4 @@ export interface EventResponse {
   // Respond with TTS
   tts_single_voice?: TtsSingleVoice,
   tts_random_voice?: TtsRandomVoice,
-}
+}

packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx

@@ -13,8 +13,10 @@ import { BitsCheermoteNameExactMatchForm } from './components/BitsCheermoteNameE
 import { BitsSpendThresholdForm } from './components/BitsSpendThresholdForm';
 import { BitsCheermotePrefixSpendThresholdForm } from './components/BitsCheermotePrefixSpendThresholdForm';
 import { TwitchEventCategory } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/TwitchEventCategory';
-import { BitsRuleType, ChannelPointsRuleType } from './components/RuleTypes';
+import { BitsRuleType } from './components/RuleTypes';
 import { ChannelPointsRewardNameExactMatchForm } from './components/ChannelPointsRewardNameExactMatchForm';
+import { TtsSingleVoiceForm } from './event_response_builder/TtsSingleVoiceForm';
+import { EventResponseType } from './event_response_builder/EventResponseType';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -39,7 +41,9 @@ function TtsConfigsEditRulePage(props: Props) {
   const [bitsRuleType, setBitsRuleType] = useState<BitsRuleType>(BitsRuleType.BitsCheermoteNameExactMatch);
   //const [channelPointsRuleType, setChannelPointsRuleType] = useState<ChannelPointsRuleType>(ChannelPointsRuleType.ChannelPointsRewardNameExactMatch);
 
-  // ===== Field values (editing) =====
+  const [eventResponseType, setEventResponseType] = useState<EventResponseType>(EventResponseType.TtsSingleVoice);
+
+  // ===== Predicate Field values (editing) =====
 
   // Used in:
   // BitsCheermoteNameExactMatch
@@ -55,6 +59,12 @@ function TtsConfigsEditRulePage(props: Props) {
   // ChannelPointsRewardNameExactMatch
   const [rewardName, setRewardName] = useState(''); 
 
+  // ===== Response Field values (editing) =====
+
+  // Used in:
+  // TtsSingleVoice
+  const [ttsModelToken, setTtsModelToken] = useState(''); 
+
   // ===== Field values (final) =====
 
   const [eventMatchPredicate, setEventMatchPredicate] = useState<EventMatchPredicate>({});
@@ -97,6 +107,14 @@ function TtsConfigsEditRulePage(props: Props) {
 
       setBitsRuleType(serverBitsRuleType);
 
+      if (!!response.twitch_event_rule.event_response.tts_single_voice) {
+        setEventResponseType(EventResponseType.TtsSingleVoice);
+        setTtsModelToken(response.twitch_event_rule.event_response.tts_single_voice.tts_model_token)
+      } else if (!!response.twitch_event_rule.event_response.tts_random_voice) {
+        setEventResponseType(EventResponseType.TtsRandomVoice);
+        // TODO
+      }
+
     } else if (GetTwitchEventRuleIsError(response))  {
       // TODO
     }
@@ -193,6 +211,25 @@ function TtsConfigsEditRulePage(props: Props) {
     setRewardName(name);
   }
 
+  const updateTtsModelToken = (token: string) => {
+    let response : EventResponse = {};
+
+    switch (eventResponseType) {
+      case EventResponseType.TtsSingleVoice:
+        response.tts_single_voice = {
+          tts_model_token: token,
+        }
+        break;
+      case EventResponseType.TtsRandomVoice:
+        break;
+    }
+
+    console.log(token);
+
+    setTtsModelToken(token);
+    setEventResponse(response);
+  }
+
   const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) : Promise<boolean> => {
     ev.preventDefault();
 
@@ -310,7 +347,13 @@ function TtsConfigsEditRulePage(props: Props) {
         <br />
 
         <h2 className="title is-4">3) Pick how to respond</h2>
-        <p>Todo</p>
+
+        <TtsSingleVoiceForm
+          allTtsModels={props.allTtsModels}
+          allTtsModelsByToken={props.allTtsModelsByToken}
+          setTtsModelToken={updateTtsModelToken}
+          ttsModelToken={ttsModelToken}
+          />
 
         <br />
         <br />

packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx

@@ -17,7 +17,13 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
 
   const handleModelSelect = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
     const value = (ev.target as HTMLSelectElement).value;
-    // check voice
+
+    if (!!value && !props.allTtsModelsByToken.has(value)) {
+      return false;
+    }
+
+    setTtsModelToken(value);
+    props.setTtsModelToken(value);
     return true;
   }
 
@@ -27,8 +33,11 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
         <label className="label">TTS Voice Model</label>
         <div className="control">
           <div className="select is-medium is-fullwidth">
-            <select>
-              <option value="*">Select a voice...</option>
+            <select
+              value={ttsModelToken}
+              onChange={handleModelSelect}
+              >
+              <option value="">Select a voice...</option>
               {props.allTtsModels.map(ttsModel => {
                 return (
                   <option
@@ -44,7 +53,8 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
 
       <article className="message">
         <div className="message-body">
-          <FakeYouExternalLink>Check out the voices at FakeYou</FakeYouExternalLink> to experiment with them and see how they sound. 
+          <FakeYouExternalLink>Check out the voices at FakeYou</FakeYouExternalLink> to search for voices, experiment with them,
+          and see how they sound. Sorry that this list is a nightmare to navigate. It will improve over time.
         </div>
       </article>
     </>