first commit

resources/client/admin/videos/crupdate/create-video-page.tsx

@@ -0,0 +1,75 @@
+import {useForm} from 'react-hook-form';
+import {Trans} from '@common/i18n/trans';
+import React, {ReactNode} from 'react';
+import {message} from '@common/i18n/message';
+import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
+import {
+  CreateVideoPayload,
+  useCreateVideo,
+} from '@app/admin/videos/requests/use-create-video';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {toast} from '@common/ui/toast/toast';
+import {CrupdateVideoForm} from '@app/admin/videos/crupdate/crupdate-video-form';
+import {Link, useParams} from 'react-router-dom';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
+
+interface Props {
+  children?: ReactNode;
+}
+export function CreateVideoPage({children}: Props) {
+  const {titleId, season, episode} = useParams();
+  const navigate = useNavigate();
+  const form = useForm<CreateVideoPayload>({
+    defaultValues: {
+      quality: 'regular',
+      language: 'en',
+      category: 'trailer',
+      type: 'embed',
+      title_id: titleId ? Number(titleId) : undefined,
+      season_num: season ? Number(season) : undefined,
+      episode_num: episode ? Number(episode) : undefined,
+    },
+  });
+  const createVideo = useCreateVideo(form);
+
+  return (
+    <CrupdateResourceLayout
+      onSubmit={values => {
+        createVideo.mutate(values, {
+          onSuccess: response => {
+            toast(message('Video created'));
+            if (titleId) {
+              navigate(`../`, {
+                relative: 'path',
+              });
+            } else {
+              navigate(`../${response.video.id}/edit`, {
+                relative: 'path',
+              });
+            }
+          },
+        });
+      }}
+      backButton={
+        titleId ? (
+          <IconButton
+            className="text-muted"
+            elementType={Link}
+            to="../"
+            relative="path"
+          >
+            <ArrowBackIcon />
+          </IconButton>
+        ) : undefined
+      }
+      form={form}
+      title={<Trans message="New video" />}
+      isLoading={createVideo.isPending}
+      disableSaveWhenNotDirty
+    >
+      {children}
+      <CrupdateVideoForm form={form} />
+    </CrupdateResourceLayout>
+  );
+}