98 lines
3.2 KiB
TypeScript
Executable File
98 lines
3.2 KiB
TypeScript
Executable File
import {Dialog} from '@common/ui/overlays/dialog/dialog';
|
|
import {DialogHeader} from '@common/ui/overlays/dialog/dialog-header';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {DialogBody} from '@common/ui/overlays/dialog/dialog-body';
|
|
import {DialogFooter} from '@common/ui/overlays/dialog/dialog-footer';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import {useDialogContext} from '@common/ui/overlays/dialog/dialog-context';
|
|
import {useForm} from 'react-hook-form';
|
|
import {Form} from '@common/ui/forms/form';
|
|
import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
|
|
import {useValueLists} from '@common/http/value-lists';
|
|
import {FormSelect, Option} from '@common/ui/forms/select/select';
|
|
import {useTrans} from '@common/i18n/use-trans';
|
|
import {message} from '@common/i18n/message';
|
|
import {VideoCaption} from '@app/titles/models/video';
|
|
import {FormFileEntryField} from '@common/ui/forms/input-field/file-entry-field';
|
|
import {FileUploadProvider} from '@common/uploads/uploader/file-upload-provider';
|
|
import {Disk} from '@common/uploads/types/backend-metadata';
|
|
|
|
interface Props {
|
|
caption?: VideoCaption;
|
|
}
|
|
export function CrupdateCaptionDialog({caption}: Props) {
|
|
const {close, formId} = useDialogContext();
|
|
const form = useForm({
|
|
defaultValues: {
|
|
language: 'en',
|
|
...caption,
|
|
},
|
|
});
|
|
return (
|
|
<Dialog>
|
|
<DialogHeader>
|
|
{caption ? (
|
|
<Trans message="Update caption" />
|
|
) : (
|
|
<Trans message="Add caption" />
|
|
)}
|
|
</DialogHeader>
|
|
<DialogBody>
|
|
<Form id={formId} form={form} onSubmit={newValues => close(newValues)}>
|
|
<FormTextField
|
|
name="name"
|
|
label={<Trans message="Name" />}
|
|
className="mb-24"
|
|
required
|
|
autoFocus
|
|
/>
|
|
<LanguageSelect />
|
|
<FileUploadProvider>
|
|
<FormFileEntryField
|
|
required={!caption}
|
|
name="url"
|
|
diskPrefix="captions"
|
|
disk={Disk.public}
|
|
allowedFileTypes={['.vtt']}
|
|
maxFileSize={1024 * 1024}
|
|
label={<Trans message="Caption file" />}
|
|
onChange={() => {
|
|
form.clearErrors();
|
|
}}
|
|
/>
|
|
</FileUploadProvider>
|
|
</Form>
|
|
</DialogBody>
|
|
<DialogFooter>
|
|
<Button onClick={() => close()}>
|
|
<Trans message="Cancel" />
|
|
</Button>
|
|
<Button form={formId} variant="flat" color="primary" type="submit">
|
|
{caption ? <Trans message="Update" /> : <Trans message="Add" />}
|
|
</Button>
|
|
</DialogFooter>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function LanguageSelect() {
|
|
const {trans} = useTrans();
|
|
const {data} = useValueLists(['languages']);
|
|
return (
|
|
<FormSelect
|
|
name="language"
|
|
selectionMode="single"
|
|
showSearchField
|
|
searchPlaceholder={trans(message('Search languages'))}
|
|
label={<Trans message="Language" />}
|
|
className="mb-24"
|
|
>
|
|
{data?.languages?.map(language => (
|
|
<Option value={language.code} key={language.code} capitalizeFirst>
|
|
<Trans message={language.name} />
|
|
</Option>
|
|
))}
|
|
</FormSelect>
|
|
);
|
|
}
|