diff --git a/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx b/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx index 66d0959471..b1cf40b1c9 100644 --- a/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx +++ b/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx @@ -40,13 +40,6 @@ function TtsConfigsEditRulePage(props: Props) { const [modifiedEventResponse, setModifiedEventResponse] = useState({}); const [ruleIsDisabled, setRuleIsDisabled] = useState(false); - // ========== ??? ========== - - // TODO: GET RID OF THIS - const [eventResponseType, setEventResponseType] = useState(EventResponseType.TtsSingleVoice); - // TODO: GET RID OF THIS - const [ttsModelToken, setTtsModelToken] = useState(''); - const getTwitchEventRule = useCallback(async (token: string) => { const response = await GetTwitchEventRule(token); @@ -61,15 +54,6 @@ function TtsConfigsEditRulePage(props: Props) { setModifiedEventResponse(response.twitch_event_rule.event_response); setRuleIsDisabled(response.twitch_event_rule.rule_is_disabled); - // TODO: MOVE THIS - 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 } @@ -79,26 +63,14 @@ function TtsConfigsEditRulePage(props: Props) { getTwitchEventRule(token); }, [getTwitchEventRule, token]); - 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; - } - - setTtsModelToken(token); - } - const updateModifiedEventMatchPredicate = (predicate: EventMatchPredicate) => { setModifiedEventMatchPredicate(predicate); } + const updateModifiedEventResponse = (response: EventResponse) => { + setModifiedEventResponse(response); + } + const handleFormSubmit = async (ev: React.FormEvent) : Promise => { ev.preventDefault(); @@ -161,18 +133,16 @@ function TtsConfigsEditRulePage(props: Props) { twitchEventCategory={twitchEventRule.event_category} serverEventMatchPredicate={serverEventMatchPredicate} updateModifiedEventMatchPredicate={updateModifiedEventMatchPredicate} - allTtsModels={props.allTtsModels} - allTtsModelsByToken={props.allTtsModelsByToken} />

This is the rule:

diff --git a/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx index 2c7f6b2f00..82e609d15a 100644 --- a/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react'; -import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels'; import { BitsRuleType } from './types/BitsRuleType'; import { TwitchEventCategory } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/TwitchEventCategory'; import { EventMatchPredicate } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventMatchPredicate'; @@ -22,10 +21,6 @@ interface EventMatchPredicateBuilderComponentProps { // Updates sent back up the tree updateModifiedEventMatchPredicate: (predicate: EventMatchPredicate) => void, - - // FakeYou voices - allTtsModels: TtsModelListItem[], - allTtsModelsByToken: Map, }; function EventMatchPredicateBuilderComponent(props: EventMatchPredicateBuilderComponentProps) { diff --git a/packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx b/packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx index 9d418cb53e..131dc06085 100644 --- a/packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx @@ -1,13 +1,16 @@ import React, { useEffect, useState } from 'react'; import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels'; -import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink'; import { TtsSingleVoiceForm } from './TtsSingleVoiceForm'; import { EventResponseType } from './EventResponseType'; +import { EventResponse } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse'; interface EventResponseComponentProps { - // Form state communicated upstream - ttsModelToken: string, - setTtsModelToken: (token: string) => void, + // Original response from server. + // (also immutable for sanity and because we may lose info on UI changes) + serverEventResponse: EventResponse, + + // Updates sent back up the tree + updateModifiedEventResponse: (response: EventResponse) => void, // FakeYou voices allTtsModels: TtsModelListItem[], @@ -15,14 +18,52 @@ interface EventResponseComponentProps { }; function EventResponseComponent(props: EventResponseComponentProps) { + // ========== Core UI flow ========== + const [eventResponseType, setEventResponseType] = useState(EventResponseType.TtsSingleVoice); + // ========== Cached Values for Editing ========== + + const [selectedTtsModelTokens, setSelectedTtsModelTokens] = useState([]); + + // NB: useState is not always setting from props correctly (after several re-renders) + // The following answers suggests using useEffect: + // https://stackoverflow.com/a/54866051 (less clear by also using useState(), but good comments) + // https://stackoverflow.com/a/62982753 + useEffect(() => { + let newEventResponseType = EventResponseType.TtsSingleVoice; + + if (!!props.serverEventResponse.tts_single_voice) { + newEventResponseType = EventResponseType.TtsSingleVoice; + } else if (!!props.serverEventResponse.tts_random_voice) { + newEventResponseType = EventResponseType.TtsRandomVoice; + } + + setEventResponseType(newEventResponseType); + + }, [props.serverEventResponse]); + const handleChangedEventResponseType = (ev: React.FormEvent) : boolean => { const value = (ev.target as HTMLSelectElement).value; const responseType = value as EventResponseType; setEventResponseType(responseType); return true; } + + const handleChangedTtsModelToken = (token: string) => { + // We may be only updating to a single token, but we want to be able to navigate back to + // the "random voices" view, etc. + let updatedTokens = [... selectedTtsModelTokens]; + + if (updatedTokens.length > 1) { + updatedTokens[0] = token; + } else if (updatedTokens.length === 0) { + updatedTokens.push(token); + } + + setSelectedTtsModelTokens(updatedTokens); + } + return ( <>

3) Pick how to respond

@@ -47,10 +88,10 @@ function EventResponseComponent(props: EventResponseComponentProps) {

4) Configure the response


diff --git a/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx b/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx index a87cdbfdbb..3ad4313aae 100644 --- a/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx @@ -3,9 +3,8 @@ import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsMod import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink'; interface TtsSingleVoiceFormProps { - // Storyteller TTS configs - ttsModelToken: string, - setTtsModelToken: (token: string) => void, + selectedTtsModelTokens: string[], + updateSelectedTtsModelToken: (token: string) => void, // FakeYou voices allTtsModels: TtsModelListItem[], @@ -20,8 +19,8 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) { // https://stackoverflow.com/a/54866051 (less clear by also using useState(), but good comments) // https://stackoverflow.com/a/62982753 useEffect(() => { - setTtsModelToken(props.ttsModelToken); - }, [props.ttsModelToken]); + //setTtsModelToken(props.ttsModelToken); + }, []); const handleModelSelect = (ev: React.FormEvent) : boolean => { @@ -32,7 +31,7 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) { } setTtsModelToken(value); - props.setTtsModelToken(value); + //props.setTtsModelToken(value); return true; }