sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix more build errors

Browse source
This commit is contained in:
Darren Clarke 2023-03-15 12:17:43 +00:00
parent 1bdc1e60db
commit 30ce47826f
61 changed files with 1161 additions and 541 deletions
Download patch file Download diff file Expand all files Collapse all files

30
apps/metamigo-frontend/components/voice/providers/ProviderCreate.tsx
View file

@ -7,27 +7,25 @@ import {
} from "react-admin";
import { ProviderKindInput } from "./shared";
import TextField from "@material-ui/core/TextField";
// import TextField from "@material-ui/core/TextField";
const TwilioCredentialsInput = () => (
/* const TwilioCredentialsInput = () => (
<span>
<TextField name="accountSid" label="Account Sid" />
<TextField name="authToken" label="Auth Token" />
</span>
); */
const ProviderCreate = (props: CreateProps) => (
<Create {...props} title="Create Providers">
<SimpleForm>
<ProviderKindInput />
<TextInput source="name" />
<TextInput source="credentials.accountSid" />
<TextInput source="credentials.apiKeySid" />
<PasswordInput source="credentials.apiKeySecret" />
</SimpleForm>
</Create>
);
const ProviderCreate = (props: CreateProps) => {
return (
<Create {...props} title="Create Providers">
<SimpleForm>
<ProviderKindInput />
<TextInput source="name" />
<TextInput source="credentials.accountSid" />
<TextInput source="credentials.apiKeySid" />
<PasswordInput source="credentials.apiKeySecret" />
</SimpleForm>
</Create>
);
};
export default ProviderCreate;

28
apps/metamigo-frontend/components/voice/providers/ProviderEdit.tsx
View file

@ -9,23 +9,21 @@ import { ProviderKindInput } from "./shared";
const ProviderTitle = ({ record }: { record?: any }) => {
let title = "";
if (record) title = record.name ? record.name : record.email;
if (record) title = record.name ?? record.email;
return <span>Provider {title}</span>;
};
const ProviderEdit = (props: EditProps) => {
return (
<Edit title={<ProviderTitle />} {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<ProviderKindInput disabled />
<TextInput source="name" />
<TextInput source="credentials.accountSid" />
<TextInput source="credentials.apiKeySid" />
<PasswordInput source="credentials.apiKeySecret" />
</SimpleForm>
</Edit>
);
};
const ProviderEdit = (props: EditProps) => (
<Edit title={<ProviderTitle />} {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<ProviderKindInput disabled />
<TextInput source="name" />
<TextInput source="credentials.accountSid" />
<TextInput source="credentials.apiKeySid" />
<PasswordInput source="credentials.apiKeySecret" />
</SimpleForm>
</Edit>
);
export default ProviderEdit;

1
apps/metamigo-frontend/components/voice/providers/index.ts
View file

@ -1,3 +1,4 @@
/* eslint-disable import/no-anonymous-default-export */
import ProviderIcon from "@material-ui/icons/Business";
import ProviderList from "./ProviderList";
import ProviderEdit from "./ProviderEdit";

29
apps/metamigo-frontend/components/voice/voicelines/MicInput.tsx
View file

@ -8,14 +8,13 @@ import { makeStyles, useTheme } from "@material-ui/core/styles";
import AudioPlayer from "material-ui-audio-player";
import { useStopwatch } from "react-timer-hook";
import style from "./MicInput.module.css";
//import type { ReactMicProps } from "react-mic";
// import type { ReactMicProps } from "react-mic";
const ReactMic = dynamic<any>(
// eslint-disable-next-line promise/prefer-await-to-then
() => {
throw new Error(
"MIC INPUT FEATURE IS DISABLED"
); /*return import("react-mic").then((mod) => mod.ReactMic);*/
); /* return import("react-mic").then((mod) => mod.ReactMic); */
},
{ ssr: false }
);
@ -58,7 +57,7 @@ const MicInput = (props: any) => {
field: { value, onChange },
} = useInput(props);
let [record, setRecorder] = useState({ record: false });
const [record, setRecorder] = useState({ record: false });
const decodedValue = resultToDataUri(value);
const startRecording = () => {
setRecorder({ record: true });
@ -71,7 +70,9 @@ const MicInput = (props: any) => {
pause();
};
async function onData(recordedBlob: any) {}
async function onData(recordedBlob: any) {
console.log({ recordedBlob });
}
async function onStop(recordedBlob: any) {
const result = await blobToResult(recordedBlob.blob);
@ -84,16 +85,14 @@ const MicInput = (props: any) => {
.toString()
.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
const useStyles = makeStyles((theme) => {
return {
volumeIcon: {
display: "none",
},
mainSlider: {
display: "none",
},
};
});
const useStyles = makeStyles(() => ({
volumeIcon: {
display: "none",
},
mainSlider: {
display: "none",
},
}));
return (
<div className="MuiFormControl-marginDense RaFormInput-input-40">

62
apps/metamigo-frontend/components/voice/voicelines/VoiceLineCreate.tsx
View file

@ -17,38 +17,36 @@ import {
} from "./shared";
import MicInput from "./MicInput";
const VoiceLineCreate = (props: CreateProps) => {
return (
<Create {...props} title="Create Voice Line" transform={populateNumber}>
<SimpleForm>
<ReferenceInput
label="Provider"
source="providerId"
reference="voiceProviders"
validate={[required()]}
>
<SelectInput optionText={(p) => `${p.kind}: ${p.name}`} />
</ReferenceInput>
<FormDataConsumer subscription={{ values: true }}>
{AvailableNumbersInput}
</FormDataConsumer>
<SelectInput
source="language"
choices={TwilioLanguages.languages}
validate={[required()]}
/>
<FormDataConsumer subscription={{ values: true }}>
{VoiceInput}
</FormDataConsumer>
const VoiceLineCreate = (props: CreateProps) => (
<Create {...props} title="Create Voice Line" transform={populateNumber}>
<SimpleForm>
<ReferenceInput
label="Provider"
source="providerId"
reference="voiceProviders"
validate={[required()]}
>
<SelectInput optionText={(p) => `${p.kind}: ${p.name}`} />
</ReferenceInput>
<FormDataConsumer subscription={{ values: true }}>
{AvailableNumbersInput}
</FormDataConsumer>
<SelectInput
source="language"
choices={TwilioLanguages.languages}
validate={[required()]}
/>
<FormDataConsumer subscription={{ values: true }}>
{VoiceInput}
</FormDataConsumer>
<FormDataConsumer subscription={{ values: true }}>
{PromptInput}
</FormDataConsumer>
<BooleanInput source="audioPromptEnabled" />
<MicInput source="promptAudio" />
</SimpleForm>
</Create>
);
};
<FormDataConsumer subscription={{ values: true }}>
{PromptInput}
</FormDataConsumer>
<BooleanInput source="audioPromptEnabled" />
<MicInput source="promptAudio" />
</SimpleForm>
</Create>
);
export default VoiceLineCreate;

56
apps/metamigo-frontend/components/voice/voicelines/VoiceLineEdit.tsx
View file

@ -15,37 +15,35 @@ import MicInput from "./MicInput";
const VoiceLineTitle = ({ record }: { record?: any }) => {
let title = "";
if (record) title = record.name ? record.name : record.email;
if (record) title = record.name ?? record.email;
return <span>VoiceLine {title}</span>;
};
const VoiceLineEdit = (props: EditProps) => {
return (
<Edit title={<VoiceLineTitle />} {...props}>
<SimpleForm>
<ReferenceInput
disabled
label="Provider"
source="providerId"
reference="providers"
validate={[required()]}
>
<SelectInput optionText={(p) => `${p.kind}: ${p.name}`} />
</ReferenceInput>
<TextInput disabled source="providerLineSid" />
<TextInput disabled source="number" />
<SelectInput source="language" choices={TwilioLanguages.languages} />
<FormDataConsumer subscription={{ values: true }}>
{VoiceInput}
</FormDataConsumer>
<FormDataConsumer subscription={{ values: true }}>
{PromptInput}
</FormDataConsumer>
<BooleanInput source="audioPromptEnabled" />
<MicInput source="promptAudio" />
</SimpleForm>
</Edit>
);
};
const VoiceLineEdit = (props: EditProps) => (
<Edit title={<VoiceLineTitle />} {...props}>
<SimpleForm>
<ReferenceInput
disabled
label="Provider"
source="providerId"
reference="providers"
validate={[required()]}
>
<SelectInput optionText={(p) => `${p.kind}: ${p.name}`} />
</ReferenceInput>
<TextInput disabled source="providerLineSid" />
<TextInput disabled source="number" />
<SelectInput source="language" choices={TwilioLanguages.languages} />
<FormDataConsumer subscription={{ values: true }}>
{VoiceInput}
</FormDataConsumer>
<FormDataConsumer subscription={{ values: true }}>
{PromptInput}
</FormDataConsumer>
<BooleanInput source="audioPromptEnabled" />
<MicInput source="promptAudio" />
</SimpleForm>
</Edit>
);
export default VoiceLineEdit;

60
apps/metamigo-frontend/components/voice/voicelines/shared.tsx
View file

@ -1,3 +1,4 @@
/* eslint-disable react/display-name */
import React, { useState, useEffect } from "react";
import PlayIcon from "@material-ui/icons/PlayCircleFilled";
import {
@ -25,7 +26,7 @@ const tts = async (providerId: any): Promise<TTSProvider> => {
return (voice, language, prompt): Promise<void> =>
new Promise((resolve) => {
if (!voice || !language || !prompt) resolve();
const Device = twilioClient.Device;
const { Device } = twilioClient;
const device = new Device();
const silence = `${absoluteUrl().origin}/static/silence.mp3`;
device.setup(token, {
@ -39,7 +40,7 @@ const tts = async (providerId: any): Promise<TTSProvider> => {
outgoing: silence,
},
});
device.on("ready", function (device: any) {
device.on("ready", (device: any) => {
device.connect({ language, voice, prompt });
});
device.on("disconnect", () => resolve());
@ -69,14 +70,14 @@ export const TextToSpeechButton = ({ form }: any) => {
useEffect(() => {
(async () => {
setPlayText({
func: async () => {
async func() {
setLoading(true);
if (ttsProvider) await ttsProvider.provider(voice, language, prompt);
setLoading(false);
},
});
})();
}, [prompt, language, voice, ttsProvider?.provider]);
}, [prompt, language, voice, ttsProvider, ttsProvider?.provider]);
const disabled = !(providerId && prompt?.length >= 2 && voice && language);
/* TODO add this back to IconButtonwhen we know how to extend MUI theme and appease typescript
@ -90,19 +91,17 @@ export const TextToSpeechButton = ({ form }: any) => {
);
};
export const PromptInput = (form: any, ...rest: any[]) => {
return (
<TextInput
source="promptText"
multiline
options={{ fullWidth: true }}
InputProps={{ endAdornment: <TextToSpeechButton form={form} /> }}
{...rest}
/>
);
};
export const PromptInput = (form: any, ...rest: any[]) => (
<TextInput
source="promptText"
multiline
options={{ fullWidth: true }}
InputProps={{ endAdornment: <TextToSpeechButton form={form} /> }}
{...rest}
/>
);
const validateVoice = (args: any, values: any) => {
const validateVoice = (_args: any, values: any) => {
if (!values.language) return "validation.language";
if (!values.voice) return "validation.voice";
// @ts-expect-error
@ -145,25 +144,20 @@ const getAvailableNumbers = async (providerId: string) => {
}
};
const sidToNumber = (sid: any) => {
return availableNumbers
.filter(({ id }) => id === sid)
.map(({ name }) => name)[0];
};
const sidToNumber = (sid: any) =>
availableNumbers.filter(({ id }) => id === sid).map(({ name }) => name)[0];
export const populateNumber = (data: any) => {
return {
...data,
number: sidToNumber(data.providerLineSid),
};
};
export const populateNumber = (data: any) => ({
...data,
number: sidToNumber(data.providerLineSid),
});
const hasNumbers = (
args: any,
value: any,
values: any,
translate: any,
...props: any[]
_args: any,
_value: any,
_values: any,
_translate: any,
..._props: any[]
) => {
if (noAvailableNumbers) return "validation.noAvailableNumbers";
@ -197,7 +191,7 @@ export const AvailableNumbersInput = (form: any, ...rest: any[]) => {
notify("validation.noAvailableNumbers", { type: "error" });
setLoading(false);
}
}, [form && form.formData ? form.formData.providerId : undefined]);
}, [form, notify, translate]);
return (
<>