From 42f4f82ccd6546ab40f2927bc64e055f0addf92c Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 24 Feb 2022 01:47:45 -0500 Subject: [PATCH] MASSIVE REFACTOR WIP - TOTALLY BROKEN --- .../tts_configs/TtsConfigsEditRulePage.tsx | 261 +++++++++--------- .../EventMatchPredicateBuilderComponent.tsx | 206 ++++++++++++++ .../BitsCheermoteNameExactMatchForm.tsx | 2 +- .../BitsCheermotePrefixSpendThresholdForm.tsx | 2 +- .../subforms}/BitsSpendThresholdForm.tsx | 2 +- .../ChannelPointsRewardNameExactMatchForm.tsx | 0 .../types/BitsRuleType.ts} | 6 - .../types/ChannelPointsRuleType.ts | 5 + .../EventResponseComponent.tsx | 88 ++++++ 9 files changed, 435 insertions(+), 137 deletions(-) create mode 100644 packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx rename packages/storyteller/src/pages/tts_configs/{components => event_match_predicate_builder/subforms}/BitsCheermoteNameExactMatchForm.tsx (97%) rename packages/storyteller/src/pages/tts_configs/{components => event_match_predicate_builder/subforms}/BitsCheermotePrefixSpendThresholdForm.tsx (98%) rename packages/storyteller/src/pages/tts_configs/{components => event_match_predicate_builder/subforms}/BitsSpendThresholdForm.tsx (97%) rename packages/storyteller/src/pages/tts_configs/{components => event_match_predicate_builder/subforms}/ChannelPointsRewardNameExactMatchForm.tsx (100%) rename packages/storyteller/src/pages/tts_configs/{components/RuleTypes.ts => event_match_predicate_builder/types/BitsRuleType.ts} (62%) create mode 100644 packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/ChannelPointsRuleType.ts create mode 100644 packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx diff --git a/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx b/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx index 7747744f08..a5dd5e91e7 100644 --- a/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx +++ b/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx @@ -9,14 +9,15 @@ import { faAngleLeft, faSave } from '@fortawesome/free-solid-svg-icons'; import { EventMatchPredicate } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventMatchPredicate'; import { EventResponse } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse'; import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels'; -import { BitsCheermoteNameExactMatchForm } from './components/BitsCheermoteNameExactMatchForm'; -import { BitsSpendThresholdForm } from './components/BitsSpendThresholdForm'; -import { BitsCheermotePrefixSpendThresholdForm } from './components/BitsCheermotePrefixSpendThresholdForm'; +import { BitsCheermoteNameExactMatchForm } from './event_match_predicate_builder/subforms/BitsCheermoteNameExactMatchForm'; +import { BitsSpendThresholdForm } from './event_match_predicate_builder/subforms/BitsSpendThresholdForm'; +import { BitsCheermotePrefixSpendThresholdForm } from './event_match_predicate_builder/subforms/BitsCheermotePrefixSpendThresholdForm'; import { TwitchEventCategory } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/TwitchEventCategory'; -import { BitsRuleType } from './components/RuleTypes'; -import { ChannelPointsRewardNameExactMatchForm } from './components/ChannelPointsRewardNameExactMatchForm'; -import { TtsSingleVoiceForm } from './event_response_builder/TtsSingleVoiceForm'; +import { ChannelPointsRewardNameExactMatchForm } from './event_match_predicate_builder/subforms/ChannelPointsRewardNameExactMatchForm'; import { EventResponseType } from './event_response_builder/EventResponseType'; +import { EventResponseComponent } from './event_response_builder/EventResponseComponent'; +import { BitsRuleType } from './event_match_predicate_builder/types/BitsRuleType'; +import { EventMatchPredicateBuilderComponent } from './event_match_predicate_builder/EventMatchPredicateBuilderComponent'; interface Props { sessionWrapper: SessionWrapper, @@ -124,92 +125,92 @@ function TtsConfigsEditRulePage(props: Props) { getTwitchEventRule(token); }, [getTwitchEventRule, token]); - const updateBitsRuleType = (ev: React.FormEvent) : boolean => { - const value = (ev.target as HTMLSelectElement).value; - const ruleType = value as BitsRuleType; +// const updateBitsRuleType = (ev: React.FormEvent) : boolean => { +// const value = (ev.target as HTMLSelectElement).value; +// const ruleType = value as BitsRuleType; +// +// let predicate : EventMatchPredicate = {}; +// +// switch (ruleType) { +// case BitsRuleType.BitsCheermoteNameExactMatch: +// predicate.bits_cheermote_name_exact_match = { +// cheermote_name: cheerNameOrPrefix, +// } +// break; +// case BitsRuleType.BitsCheermotePrefixSpendThreshold: +// predicate.bits_cheermote_prefix_spend_threshold = { +// cheermote_prefix: cheerNameOrPrefix, +// minimum_bits_spent: minimumBitsSpent, +// } +// break; +// case BitsRuleType.BitsSpendThreshold: +// predicate.bits_spend_threshold = { +// minimum_bits_spent: minimumBitsSpent, +// } +// break; +// } +// +// setBitsRuleType(ruleType); +// setEventMatchPredicate(predicate); +// +// return true; +// } - let predicate : EventMatchPredicate = {}; +// const updateCheerNameOrPrefix = (nameOrPrefix: string) => { +// let predicate : EventMatchPredicate = {}; +// +// switch (bitsRuleType) { +// case BitsRuleType.BitsCheermoteNameExactMatch: +// predicate.bits_cheermote_name_exact_match = { +// cheermote_name: nameOrPrefix, +// } +// break; +// case BitsRuleType.BitsCheermotePrefixSpendThreshold: +// predicate.bits_cheermote_prefix_spend_threshold = { +// cheermote_prefix: nameOrPrefix, +// minimum_bits_spent: minimumBitsSpent, +// } +// break; +// case BitsRuleType.BitsSpendThreshold: +// predicate.bits_spend_threshold = { +// minimum_bits_spent: minimumBitsSpent, +// } +// break; +// } +// +// setCheerNameOrPrefix(nameOrPrefix); +// setEventMatchPredicate(predicate); +// } - switch (ruleType) { - case BitsRuleType.BitsCheermoteNameExactMatch: - predicate.bits_cheermote_name_exact_match = { - cheermote_name: cheerNameOrPrefix, - } - break; - case BitsRuleType.BitsCheermotePrefixSpendThreshold: - predicate.bits_cheermote_prefix_spend_threshold = { - cheermote_prefix: cheerNameOrPrefix, - minimum_bits_spent: minimumBitsSpent, - } - break; - case BitsRuleType.BitsSpendThreshold: - predicate.bits_spend_threshold = { - minimum_bits_spent: minimumBitsSpent, - } - break; - } +// const updateMinimumBitsSpent = (minimumSpent: number) => { +// let predicate : EventMatchPredicate = {}; +// +// switch (bitsRuleType) { +// case BitsRuleType.BitsCheermoteNameExactMatch: +// predicate.bits_cheermote_name_exact_match = { +// cheermote_name: cheerNameOrPrefix, +// } +// break; +// case BitsRuleType.BitsCheermotePrefixSpendThreshold: +// predicate.bits_cheermote_prefix_spend_threshold = { +// cheermote_prefix: cheerNameOrPrefix, +// minimum_bits_spent: minimumSpent, +// } +// break; +// case BitsRuleType.BitsSpendThreshold: +// predicate.bits_spend_threshold = { +// minimum_bits_spent: minimumSpent, +// } +// break; +// } +// +// setMinimumBitsSpent(minimumSpent); +// setEventMatchPredicate(predicate); +// } - setBitsRuleType(ruleType); - setEventMatchPredicate(predicate); - - return true; - } - - const updateCheerNameOrPrefix = (nameOrPrefix: string) => { - let predicate : EventMatchPredicate = {}; - - switch (bitsRuleType) { - case BitsRuleType.BitsCheermoteNameExactMatch: - predicate.bits_cheermote_name_exact_match = { - cheermote_name: nameOrPrefix, - } - break; - case BitsRuleType.BitsCheermotePrefixSpendThreshold: - predicate.bits_cheermote_prefix_spend_threshold = { - cheermote_prefix: nameOrPrefix, - minimum_bits_spent: minimumBitsSpent, - } - break; - case BitsRuleType.BitsSpendThreshold: - predicate.bits_spend_threshold = { - minimum_bits_spent: minimumBitsSpent, - } - break; - } - - setCheerNameOrPrefix(nameOrPrefix); - setEventMatchPredicate(predicate); - } - - const updateMinimumBitsSpent = (minimumSpent: number) => { - let predicate : EventMatchPredicate = {}; - - switch (bitsRuleType) { - case BitsRuleType.BitsCheermoteNameExactMatch: - predicate.bits_cheermote_name_exact_match = { - cheermote_name: cheerNameOrPrefix, - } - break; - case BitsRuleType.BitsCheermotePrefixSpendThreshold: - predicate.bits_cheermote_prefix_spend_threshold = { - cheermote_prefix: cheerNameOrPrefix, - minimum_bits_spent: minimumSpent, - } - break; - case BitsRuleType.BitsSpendThreshold: - predicate.bits_spend_threshold = { - minimum_bits_spent: minimumSpent, - } - break; - } - - setMinimumBitsSpent(minimumSpent); - setEventMatchPredicate(predicate); - } - - const updateRewardName = (name: string) => { - setRewardName(name); - } +// const updateRewardName = (name: string) => { +// setRewardName(name); +// } const updateTtsModelToken = (token: string) => { let response : EventResponse = {}; @@ -260,38 +261,38 @@ function TtsConfigsEditRulePage(props: Props) { return

Loading...

; } - let ruleTypeForm = <> - - if (twitchEventCategory === TwitchEventCategory.Bits) { - switch (bitsRuleType) { - case BitsRuleType.BitsCheermoteNameExactMatch: - ruleTypeForm = ; - break; - case BitsRuleType.BitsCheermotePrefixSpendThreshold: - ruleTypeForm = - break; - case BitsRuleType.BitsSpendThreshold: - ruleTypeForm = ; - break; - } - - } else if (twitchEventCategory === TwitchEventCategory.ChannelPoints) { - ruleTypeForm = ; - } +// let ruleTypeForm = <> +// +// if (twitchEventCategory === TwitchEventCategory.Bits) { +// switch (bitsRuleType) { +// case BitsRuleType.BitsCheermoteNameExactMatch: +// ruleTypeForm = ; +// break; +// case BitsRuleType.BitsCheermotePrefixSpendThreshold: +// ruleTypeForm = +// break; +// case BitsRuleType.BitsSpendThreshold: +// ruleTypeForm = ; +// break; +// } +// +// } else if (twitchEventCategory === TwitchEventCategory.ChannelPoints) { +// ruleTypeForm = ; +// } // NB: This is a hypothetical version of what we'll update to let renderRule : TwitchEventRule = { @@ -319,7 +320,8 @@ function TtsConfigsEditRulePage(props: Props) {
-

1) Pick a type of rule

+{/* +

1) Pick what to match on

@@ -339,25 +341,28 @@ function TtsConfigsEditRulePage(props: Props) {

-

2) Configure matching

+

2) Configure the matching

{ruleTypeForm}

+*/} -

3) Pick how to respond

+ + + -
-
-

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 new file mode 100644 index 0000000000..fd57911049 --- /dev/null +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/EventMatchPredicateBuilderComponent.tsx @@ -0,0 +1,206 @@ +import React, { useEffect, useState } from 'react'; +import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels'; +import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink'; +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'; +import { BitsCheermoteNameExactMatchForm } from './subforms/BitsCheermoteNameExactMatchForm'; +import { BitsCheermotePrefixSpendThresholdForm } from './subforms/BitsCheermotePrefixSpendThresholdForm'; +import { BitsSpendThresholdForm } from './subforms/BitsSpendThresholdForm'; +import { ChannelPointsRewardNameExactMatchForm } from './subforms/ChannelPointsRewardNameExactMatchForm'; + +interface EventMatchPredicateBuilderComponentProps { + // CANNOT BE CHANGED AFTER CREATION + twitchEventCategory: TwitchEventCategory, + + // Storyteller TTS configs + + // FakeYou voices + allTtsModels: TtsModelListItem[], + allTtsModelsByToken: Map, +}; + +function EventMatchPredicateBuilderComponent(props: EventMatchPredicateBuilderComponentProps) { + // ========== Core UI flow ========== + + const [bitsRuleType, setBitsRuleType] = useState(BitsRuleType.BitsCheermoteNameExactMatch); + + + // ========== Cached Values for Editing ========== + + // Used in: + // BitsCheermoteNameExactMatch + // BitsCheermotePrefixSpendThreshold + const [cheerNameOrPrefix, setCheerNameOrPrefix] = useState(''); + + // Used in: + // BitsSpendThreshold + // BitsCheermotePrefixSpendThreshold + const [minimumBitsSpent, setMinimumBitsSpent] = useState(1); + + // Used in: + // ChannelPointsRewardNameExactMatch + const [rewardName, setRewardName] = useState(''); + + // Used in: + // TtsSingleVoice + const [ttsModelToken, setTtsModelToken] = useState(''); + + + const handleChangedBitsRuleType = (ev: React.FormEvent) : boolean => { + const value = (ev.target as HTMLSelectElement).value; + const ruleType = value as BitsRuleType; + + let predicate : EventMatchPredicate = {}; + + // TODO + //switch (ruleType) { + // case BitsRuleType.BitsCheermoteNameExactMatch: + // predicate.bits_cheermote_name_exact_match = { + // cheermote_name: cheerNameOrPrefix, + // } + // break; + // case BitsRuleType.BitsCheermotePrefixSpendThreshold: + // predicate.bits_cheermote_prefix_spend_threshold = { + // cheermote_prefix: cheerNameOrPrefix, + // minimum_bits_spent: minimumBitsSpent, + // } + // break; + // case BitsRuleType.BitsSpendThreshold: + // predicate.bits_spend_threshold = { + // minimum_bits_spent: minimumBitsSpent, + // } + // break; + //} + + setBitsRuleType(ruleType); + // TODO + //setEventMatchPredicate(predicate); + + return true; + } + + const updateCheerNameOrPrefix = (nameOrPrefix: string) => { + let predicate : EventMatchPredicate = {}; + + switch (bitsRuleType) { + case BitsRuleType.BitsCheermoteNameExactMatch: + predicate.bits_cheermote_name_exact_match = { + cheermote_name: nameOrPrefix, + } + break; + case BitsRuleType.BitsCheermotePrefixSpendThreshold: + predicate.bits_cheermote_prefix_spend_threshold = { + cheermote_prefix: nameOrPrefix, + minimum_bits_spent: minimumBitsSpent, + } + break; + case BitsRuleType.BitsSpendThreshold: + predicate.bits_spend_threshold = { + minimum_bits_spent: minimumBitsSpent, + } + break; + } + + setCheerNameOrPrefix(nameOrPrefix); + // TODO + //setEventMatchPredicate(predicate); + } + + const updateMinimumBitsSpent = (minimumSpent: number) => { + let predicate : EventMatchPredicate = {}; + + switch (bitsRuleType) { + case BitsRuleType.BitsCheermoteNameExactMatch: + predicate.bits_cheermote_name_exact_match = { + cheermote_name: cheerNameOrPrefix, + } + break; + case BitsRuleType.BitsCheermotePrefixSpendThreshold: + predicate.bits_cheermote_prefix_spend_threshold = { + cheermote_prefix: cheerNameOrPrefix, + minimum_bits_spent: minimumSpent, + } + break; + case BitsRuleType.BitsSpendThreshold: + predicate.bits_spend_threshold = { + minimum_bits_spent: minimumSpent, + } + break; + } + + setMinimumBitsSpent(minimumSpent); + // TODO + //setEventMatchPredicate(predicate); + } + + const updateRewardName = (name: string) => { + setRewardName(name); + } + + + let ruleTypeForm = <> + + if (props.twitchEventCategory === TwitchEventCategory.Bits) { + switch (bitsRuleType) { + case BitsRuleType.BitsCheermoteNameExactMatch: + ruleTypeForm = ; + break; + case BitsRuleType.BitsCheermotePrefixSpendThreshold: + ruleTypeForm = + break; + case BitsRuleType.BitsSpendThreshold: + ruleTypeForm = ; + break; + } + + } else if (props.twitchEventCategory === TwitchEventCategory.ChannelPoints) { + ruleTypeForm = ; + } + + return ( + <> +

1) Pick what to match on

+ +
+ +
+
+ +
+
+
+ +
+
+ +

2) Configure the matching

+ + {ruleTypeForm} + + + + ) +} + +export { EventMatchPredicateBuilderComponent } diff --git a/packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsCheermoteNameExactMatchForm.tsx similarity index 97% rename from packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx rename to packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsCheermoteNameExactMatchForm.tsx index 032f2e5307..c26c95f288 100644 --- a/packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsCheermoteNameExactMatchForm.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGem } from '@fortawesome/free-solid-svg-icons'; -import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers'; +import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../../twitch/Cheers'; interface BitsCheermoteNameExactMatchProps { cheerName: string, diff --git a/packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsCheermotePrefixSpendThresholdForm.tsx similarity index 98% rename from packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx rename to packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsCheermotePrefixSpendThresholdForm.tsx index ea12a28e8d..70125cf434 100644 --- a/packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsCheermotePrefixSpendThresholdForm.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGem } from '@fortawesome/free-solid-svg-icons'; -import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers'; +import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../../twitch/Cheers'; interface BitsCheermotePrefixSpendThresholdProps { cheerPrefix: string, diff --git a/packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsSpendThresholdForm.tsx similarity index 97% rename from packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx rename to packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsSpendThresholdForm.tsx index bce8be0cbd..5bbca2a8b6 100644 --- a/packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/BitsSpendThresholdForm.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGem } from '@fortawesome/free-solid-svg-icons'; -import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers'; +import { CHEER_BIT_LEVELS } from '../../../../twitch/Cheers'; interface BitsSpendThresholdFormProps { minimumBitsSpent: number, diff --git a/packages/storyteller/src/pages/tts_configs/components/ChannelPointsRewardNameExactMatchForm.tsx b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/ChannelPointsRewardNameExactMatchForm.tsx similarity index 100% rename from packages/storyteller/src/pages/tts_configs/components/ChannelPointsRewardNameExactMatchForm.tsx rename to packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/subforms/ChannelPointsRewardNameExactMatchForm.tsx diff --git a/packages/storyteller/src/pages/tts_configs/components/RuleTypes.ts b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/BitsRuleType.ts similarity index 62% rename from packages/storyteller/src/pages/tts_configs/components/RuleTypes.ts rename to packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/BitsRuleType.ts index 9b331fdf8d..b89d958ade 100644 --- a/packages/storyteller/src/pages/tts_configs/components/RuleTypes.ts +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/BitsRuleType.ts @@ -1,4 +1,3 @@ -// Rule types for the different types of event types // For bits / cheermotes export enum BitsRuleType { @@ -6,8 +5,3 @@ export enum BitsRuleType { BitsCheermotePrefixSpendThreshold = "bits_cheermote_prefix_spend_threshold", BitsSpendThreshold = "bits_spend_threshold", } - -// For channel points -export enum ChannelPointsRuleType { - ChannelPointsRewardNameExactMatch, -} diff --git a/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/ChannelPointsRuleType.ts b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/ChannelPointsRuleType.ts new file mode 100644 index 0000000000..b47cb82ad2 --- /dev/null +++ b/packages/storyteller/src/pages/tts_configs/event_match_predicate_builder/types/ChannelPointsRuleType.ts @@ -0,0 +1,5 @@ + +// For channel points +export enum ChannelPointsRuleType { + ChannelPointsRewardNameExactMatch, +} 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 new file mode 100644 index 0000000000..ad4f1e0657 --- /dev/null +++ b/packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx @@ -0,0 +1,88 @@ +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'; + +interface EventResponseComponentProps { + // Storyteller TTS configs + ttsModelToken: string, + setTtsModelToken: (token: string) => void, + + // FakeYou voices + allTtsModels: TtsModelListItem[], + allTtsModelsByToken: Map, +}; + +function EventResponseComponent(props: EventResponseComponentProps) { + const [eventResponseType, setEventResponseType] = useState(EventResponseType.TtsSingleVoice); + + const handleChangedEventResponseType = (ev: React.FormEvent) : boolean => { + const value = (ev.target as HTMLSelectElement).value; + const responseType = value as EventResponseType; + + // TODO: + //let predicate : EventMatchPredicate = {}; + + //switch (ruleType) { + // case BitsRuleType.BitsCheermoteNameExactMatch: + // predicate.bits_cheermote_name_exact_match = { + // cheermote_name: cheerNameOrPrefix, + // } + // break; + // case BitsRuleType.BitsCheermotePrefixSpendThreshold: + // predicate.bits_cheermote_prefix_spend_threshold = { + // cheermote_prefix: cheerNameOrPrefix, + // minimum_bits_spent: minimumBitsSpent, + // } + // break; + // case BitsRuleType.BitsSpendThreshold: + // predicate.bits_spend_threshold = { + // minimum_bits_spent: minimumBitsSpent, + // } + // break; + //} + + setEventResponseType(responseType); + //setEventMatchPredicate(predicate); + + return true; + } + return ( + <> +

3) Pick how to respond

+ +
+ +
+
+ +
+
+
+ +
+
+ +

4) Configure the response

+ + + +
+
+ + + ) +} + +export { EventResponseComponent }