first commit

resources/client/admin/videos/crupdate/crupdate-caption-dialog.tsx

@@ -0,0 +1,97 @@
+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>
+  );
+}