aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/src/components/forms/FrameRateForm.tsx
blob: 7c57daf2832cbc88d8a40f7c90f555f817ef117e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { FunctionComponent } from "react";
import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useSubtitleAction } from "@/apis/hooks";
import { useModals, withModal } from "@/modules/modals";
import { task } from "@/modules/task";
import FormUtils from "@/utilities/form";

const TaskName = "Changing Frame Rate";

function convertToAction(from: number, to: number) {
  return `change_FPS(from=${from},to=${to})`;
}

interface Props {
  selections: FormType.ModifySubtitle[];
  onSubmit?: VoidFunction;
}

const FrameRateForm: FunctionComponent<Props> = ({ selections, onSubmit }) => {
  const { mutateAsync } = useSubtitleAction();
  const modals = useModals();

  const form = useForm({
    initialValues: {
      from: 0,
      to: 0,
    },
    validate: {
      from: FormUtils.validation(
        (value) => value > 0,
        "The From value must be larger than 0",
      ),
      to: FormUtils.validation(
        (value) => value > 0,
        "The To value must be larger than 0",
      ),
    },
  });

  return (
    <form
      onSubmit={form.onSubmit(({ from, to }) => {
        const action = convertToAction(from, to);

        selections.forEach((s) =>
          task.create(s.path, TaskName, mutateAsync, {
            action,
            form: s,
          }),
        );

        onSubmit?.();
        modals.closeSelf();
      })}
    >
      <Stack>
        <Group gap="xs" grow>
          <NumberInput
            placeholder="From"
            decimalScale={2}
            fixedDecimalScale
            {...form.getInputProps("from")}
          ></NumberInput>
          <NumberInput
            placeholder="To"
            decimalScale={2}
            fixedDecimalScale
            {...form.getInputProps("to")}
          ></NumberInput>
        </Group>
        <Divider></Divider>
        <Button type="submit">Start</Button>
      </Stack>
    </form>
  );
};

export const FrameRateModal = withModal(FrameRateForm, "frame-rate-tool", {
  title: "Change Frame Rate",
});

export default FrameRateForm;