Fixed input numbers in player settings

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx

@@ -11,6 +11,8 @@ import Tooltip from 'antd/lib/tooltip';
 import InputNumber from 'antd/lib/input-number';
 import Text from 'antd/lib/typography/Text';
 
+import { clamp } from 'utils/math';
+
 interface Props {
     startFrame: number;
     stopFrame: number;
@@ -69,13 +71,7 @@ function PlayerNavigation(props: Props): JSX.Element {
                     // https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
                     onChange={(value: number | undefined) => {
                         if (typeof (value) === 'number') {
-                            setFrameInputValue(
-                                Math.max(
-                                    Math.min(
-                                        Number(value), stopFrame,
-                                    ), startFrame,
-                                ),
-                            );
+                            setFrameInputValue(clamp(value, stopFrame, startFrame));
                         }
                     }}
                     onBlur={() => {

cvat-ui/src/components/settings-page/player-settings.tsx

@@ -4,28 +4,17 @@
 
 import React from 'react';
 
-import {
-    Row,
-    Col,
-    Checkbox,
-    Slider,
-    Select,
-    InputNumber,
-    Icon,
-} from 'antd';
-
+import { Row, Col } from 'antd/lib/grid';
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import Slider from 'antd/lib/slider';
+import Select from 'antd/lib/select';
+import InputNumber from 'antd/lib/input-number';
+import Icon from 'antd/lib/icon';
 import Text from 'antd/lib/typography/Text';
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
-
-import {
-    BackJumpIcon,
-    ForwardJumpIcon,
-} from 'icons';
 
-import {
-    FrameSpeed,
-    GridColor,
-} from 'reducers/interfaces';
+import { clamp } from 'utils/math';
+import { BackJumpIcon, ForwardJumpIcon } from 'icons';
+import { FrameSpeed, GridColor } from 'reducers/interfaces';
 
 interface Props {
     frameStep: number;
@@ -78,18 +67,24 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
         onChangeSaturationLevel,
     } = props;
 
+    const minFrameStep = 2;
+    const maxFrameStep = 1000;
+    const minGridSize = 5;
+    const maxGridSize = 1000;
+
+
     return (
         <div className='cvat-player-settings'>
             <Row type='flex' align='bottom' className='cvat-player-settings-step'>
                 <Col>
                     <Text className='cvat-text-color'> Player step </Text>
                     <InputNumber
-                        min={2}
-                        max={1000}
+                        min={minFrameStep}
+                        max={maxFrameStep}
                         value={frameStep}
                         onChange={(value: number | undefined): void => {
-                            if (value) {
-                                onChangeFrameStep(value);
+                            if (typeof (value) === 'number') {
+                                onChangeFrameStep(clamp(value, minFrameStep, maxFrameStep));
                             }
                         }}
                     />
@@ -138,14 +133,14 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                 <Col span={8} className='cvat-player-settings-grid-size'>
                     <Text className='cvat-text-color'> Grid size </Text>
                     <InputNumber
-                        min={5}
-                        max={1000}
+                        min={minGridSize}
+                        max={maxGridSize}
                         step={1}
                         value={gridSize}
                         disabled={!grid}
                         onChange={(value: number | undefined): void => {
-                            if (value) {
-                                onChangeGridSize(value);
+                            if (typeof (value) === 'number') {
+                                onChangeGridSize(clamp(value, minGridSize, maxGridSize));
                             }
                         }}
                     />

cvat-ui/src/components/settings-page/workspace-settings.tsx

@@ -9,6 +9,8 @@ import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import InputNumber from 'antd/lib/input-number';
 import Text from 'antd/lib/typography/Text';
 
+import { clamp } from 'utils/math';
+
 interface Props {
     autoSave: boolean;
     autoSaveInterval: number;
@@ -63,10 +65,10 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
                                 onChangeAutoSaveInterval(
-                                    Math.max(
-                                        Math.min(
-                                            Number(value), maxAutoSaveInterval,
-                                        ), minAutoSaveInterval,
+                                    clamp(
+                                        value,
+                                        minAutoSaveInterval,
+                                        maxAutoSaveInterval,
                                     ) * 60 * 1000,
                                 );
                             }
@@ -100,13 +102,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         value={aamZoomMargin}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeAAMZoomMargin(
-                                    Math.max(
-                                        Math.min(
-                                            Number(value), maxAAMMargin,
-                                        ), minAAMMargin,
-                                    ),
-                                );
+                                onChangeAAMZoomMargin(clamp(value, minAAMMargin, maxAAMMargin));
                             }
                         }}
                     />

cvat-ui/src/utils/math.ts

+/* eslint-disable-next-line import/prefer-default-export */
+export function clamp(value: number, min: number, max: number): number {
+    return Math.max(Math.min(value, max), min);
+}