From f5201d2d6982a1fc500fabec0c192b3739c62cb8 Mon Sep 17 00:00:00 2001
From: Dave Horton <daveh@drachtio.org>
Date: Thu, 27 Jan 2022 08:07:22 -0500
Subject: [PATCH] Feature/wellsaid tts (#38)

* initial changes to support WellSaid TTS

* disable stt choice for WellSaid since they dont provide
---
 src/components/elements/Checkbox.js         |  1 +
 src/components/forms/ApplicationForm.js     | 20 +++++++++
 src/components/forms/SpeechForm.js          | 48 +++++++++++++++++++--
 src/data/SpeechSynthesisLanguageWellSaid.js | 39 +++++++++++++++++
 4 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 src/data/SpeechSynthesisLanguageWellSaid.js

diff --git a/src/components/elements/Checkbox.js b/src/components/elements/Checkbox.js
index 66694e7..8249ec2 100644
--- a/src/components/elements/Checkbox.js
+++ b/src/components/elements/Checkbox.js
@@ -111,6 +111,7 @@ const Checkbox = (props, ref) => {
         name={props.id}
         type="checkbox"
         checked={props.checked}
+        disabled={props.disabled}
         onChange={props.onChange}
         value={props.value}
         ref={inputRef}
diff --git a/src/components/forms/ApplicationForm.js b/src/components/forms/ApplicationForm.js
index ef4fa63..896ee7f 100644
--- a/src/components/forms/ApplicationForm.js
+++ b/src/components/forms/ApplicationForm.js
@@ -17,6 +17,7 @@ import SpeechRecognizerLanguageGoogle from '../../data/SpeechRecognizerLanguageG
 import SpeechRecognizerLanguageAws from '../../data/SpeechRecognizerLanguageAws';
 import SpeechRecognizerLanguageMicrosoft from '../../data/SpeechRecognizerLanguageMicrosoft';
 import SpeechSynthesisLanguageMicrosoft from '../../data/SpeechSynthesisLanguageMicrosoft';
+import SpeechSynthesisLanguageWellSaid from '../../data/SpeechSynthesisLanguageWellSaid';
 import Loader from '../blocks/Loader';
 import CopyableText from '../elements/CopyableText';
 
@@ -751,6 +752,10 @@ const ApplicationForm = props => {
                   ? SpeechSynthesisLanguageMicrosoft.find(l => (
                       l.code === speechSynthesisLanguage
                     ))
+                  : e.target.value === 'wellsaid'
+                  ? SpeechSynthesisLanguageWellSaid.find(l => (
+                      l.code === speechSynthesisLanguage
+                    ))
                   : SpeechSynthesisLanguageAws.find(l => (
                       l.code === speechSynthesisLanguage
                     ));
@@ -780,6 +785,7 @@ const ApplicationForm = props => {
               <option value="google">Google</option>
               <option value="aws">AWS</option>
               <option value="microsoft">Microsoft</option>
+              <option value="wellsaid">WellSaid</option>
             </Select>
             <Label middle htmlFor="speechSynthesisLanguage">Language</Label>
             <Select
@@ -807,6 +813,10 @@ const ApplicationForm = props => {
                   ? SpeechSynthesisLanguageMicrosoft.find(l => (
                       l.code === e.target.value
                     ))
+                    : speechSynthesisVendor === 'wellsaid'
+                  ? SpeechSynthesisLanguageWellSaid.find(l => (
+                      l.code === e.target.value
+                    ))
                   : SpeechSynthesisLanguageAws.find(l => (
                       l.code === e.target.value
                     ));
@@ -823,6 +833,10 @@ const ApplicationForm = props => {
                 SpeechSynthesisLanguageMicrosoft.map(l => (
                   <option key={l.code} value={l.code}>{l.name}</option>
                 ))
+              ) : speechSynthesisVendor === 'wellsaid' ? (
+                SpeechSynthesisLanguageWellSaid.map(l => (
+                  <option key={l.code} value={l.code}>{l.name}</option>
+                ))
               ) : (
                 SpeechSynthesisLanguageAws.map(l => (
                   <option key={l.code} value={l.code}>{l.name}</option>
@@ -849,6 +863,12 @@ const ApplicationForm = props => {
                   .map(m => m.voices.map(v => (
                     <option key={v.value} value={v.value}>{v.name}</option>
                   )))
+              ) : speechSynthesisVendor === 'wellsaid' ? (
+                SpeechSynthesisLanguageWellSaid
+                  .filter(l => l.code === speechSynthesisLanguage)
+                  .map(m => m.voices.map(v => (
+                    <option key={v.value} value={v.value}>{v.name}</option>
+                  )))
               ) : (
                 SpeechSynthesisLanguageAws
                     .filter(l => l.code === speechSynthesisLanguage)
diff --git a/src/components/forms/SpeechForm.js b/src/components/forms/SpeechForm.js
index 1a96302..0d5b456 100644
--- a/src/components/forms/SpeechForm.js
+++ b/src/components/forms/SpeechForm.js
@@ -70,6 +70,7 @@ const SpeechServicesAddEdit = (props) => {
   const refVendorGoogle = useRef(null);
   const refVendorAws = useRef(null);
   const refVendorMs = useRef(null);
+  const refVendorWellSaid = useRef(null);
   const refAccessKeyId = useRef(null);
   const refSecretAccessKey = useRef(null);
   const refUseForTts = useRef(null);
@@ -93,7 +94,8 @@ const SpeechServicesAddEdit = (props) => {
   // Invalid form inputs
   const [ invalidVendorGoogle,    setInvalidVendorGoogle    ] = useState(false);
   const [ invalidVendorAws,       setInvalidVendorAws       ] = useState(false);
-  const [ invalidVendorMs,        setInvalidVendorMs       ] = useState(false);
+  const [ invalidVendorMs,        setInvalidVendorMs        ] = useState(false);
+  const [ invalidVendorWellSaid,  setInvalidVendorWellSaid  ] = useState(false);
   const [ invalidAccessKeyId,     setInvalidAccessKeyId     ] = useState(false);
   const [ invalidSecretAccessKey, setInvalidSecretAccessKey ] = useState(false);
   const [ invalidUseForTts,       setInvalidUseForTts       ] = useState(false);
@@ -219,6 +221,7 @@ const SpeechServicesAddEdit = (props) => {
       setInvalidVendorGoogle(false);
       setInvalidVendorAws(false);
       setInvalidVendorMs(false);
+      setInvalidVendorWellSaid(false);
       setInvalidAccessKeyId(false);
       setInvalidSecretAccessKey(false);
       setInvalidUseForTts(false);
@@ -232,6 +235,7 @@ const SpeechServicesAddEdit = (props) => {
         setInvalidVendorGoogle(true);
         setInvalidVendorAws(true);
         setInvalidVendorMs(true);
+        setInvalidVendorWellSaid(true);
         if (!focusHasBeenSet) {
           refVendorGoogle.current.focus();
           focusHasBeenSet = true;
@@ -278,6 +282,15 @@ const SpeechServicesAddEdit = (props) => {
         }
       }
 
+      if (vendor === 'wellsaid' && !apiKey) {
+        errorMessages.push('Please provide an API key.');
+        setInvalidApiKey(true);
+        if (!focusHasBeenSet) {
+          refApiKey.current.focus();
+          focusHasBeenSet = true;
+        }
+      }
+
       if (errorMessages.length > 1) {
         setErrorMessage(errorMessages);
         return;
@@ -309,7 +322,7 @@ const SpeechServicesAddEdit = (props) => {
           service_key: vendor === 'google' ? JSON.stringify(serviceKey) : null,
           access_key_id: vendor === 'aws' ? accessKeyId : null,
           secret_access_key: vendor === 'aws' ? secretAccessKey : null,
-          api_key: vendor === 'microsoft' ? apiKey : null,
+          api_key: ['microsoft', 'wellsaid'].includes(vendor) ? apiKey : null,
           region: vendor === 'microsoft' ? region : null,
           use_for_tts: useForTts,
           use_for_stt: useForStt,
@@ -490,6 +503,17 @@ const SpeechServicesAddEdit = (props) => {
             ref={refVendorMs}
             disabled={type === 'edit'}
           />
+
+          <Radio
+            name="vendor"
+            id="wellsaid"
+            label="WellSaid"
+            checked={vendor === 'wellsaid'}
+            onChange={() => setVendor('wellsaid')}
+            invalid={invalidVendorWellSaid}
+            ref={refVendorWellSaid}
+            disabled={type === 'edit'}
+          />
         </InputGroup>
 
         <Label htmlFor="account">Used by</Label>
@@ -594,11 +618,25 @@ const SpeechServicesAddEdit = (props) => {
               ))}
             </Select>
           </>
+        ) :  vendor === 'wellsaid' ? (
+          <>
+            <Label htmlFor="apiKey">API Key</Label>
+            <Input
+              name="apiKey"
+              id="apiKey"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder=""
+              invalid={invalidApiKey}
+              ref={refApiKey}
+              disabled={type === 'edit'}
+            />
+          </>
         ) : (
           null
         )}
 
-        {vendor === 'google' || vendor === 'aws' || vendor === 'microsoft' ? (
+        {['google', 'aws', 'microsoft', 'wellsaid'].includes(vendor) ? (
           <>
             <div/>
             <Checkbox
@@ -617,13 +655,15 @@ const SpeechServicesAddEdit = (props) => {
               name="useForStt"
               id="useForStt"
               label="Use for speech-to-text"
+              disabled={'wellsaid' === vendor}
               checked={useForStt}
               onChange={e => setUseForStt(e.target.checked)}
               invalid={invalidUseForStt}
               ref={refUseForStt}
             />
           </>
-        ) : (
+        ) :
+        (
           null
         )}
 
diff --git a/src/data/SpeechSynthesisLanguageWellSaid.js b/src/data/SpeechSynthesisLanguageWellSaid.js
new file mode 100644
index 0000000..18d6dde
--- /dev/null
+++ b/src/data/SpeechSynthesisLanguageWellSaid.js
@@ -0,0 +1,39 @@
+export default [
+  {
+    code: 'en-US',
+    name: 'English (US)',
+    voices: [
+      { value: '3', name: 'Alana B.' },
+      { value: '4', name: 'Ramona J.' },
+      { value: '5', name: 'Ramona J. (promo)' },
+      { value: '7', name: 'Wade C.' },
+      { value: '8', name: 'Sofia H.' },
+      { value: '9', name: 'David D.' },
+      { value: '11', name: 'Isabel V.' },
+      { value: '12', name: 'Ava H.' },
+      { value: '13', name: 'Jeremy G.' },
+      { value: '14', name: 'Nicole L.' },
+      { value: '15', name: 'Paige L.' },
+      { value: '16', name: 'Tobin A.' },
+      { value: '17', name: 'Kai M.' },
+      { value: '18', name: 'Tristan F.' },
+      { value: '19', name: 'Patrick K.' },
+      { value: '20', name: 'Soifia H. (promo)' },
+      { value: '21', name: 'Damian P. (promo)' },
+      { value: '22', name: 'Jodi P. (promo)' },
+      { value: '23', name: 'Lee M. (promo)' },
+      { value: '24', name: 'Selene R. (promo)' },
+      { value: '26', name: 'Wade C. (promo)' },
+      { value: '27', name: 'Joe F.' },
+      { value: '28', name: 'Joe F. (promo)' },
+      { value: '29', name: 'Garry J. (character)' },
+      { value: '33', name: 'Jude D.' },
+      { value: '34', name: 'Eric S. (promo)' },
+      { value: '35', name: 'Chase J.' },
+      { value: '37', name: 'Steve B. (promo)' },
+      { value: '38', name: 'Bella B. (promo)' },
+      { value: '39', name: 'Tilda C. (promo)' },
+      { value: '41', name: 'Paul B. (promo)' }
+    ],
+  }
+];