Fixed ui failing in propagate confirmation

cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -4,17 +4,17 @@
 
 import React from 'react';
 
-import {
-    Modal,
-    InputNumber,
-} from 'antd';
-
+import Modal from 'antd/lib/modal';
+import InputNumber from 'antd/lib/input-number';
 import Text from 'antd/lib/typography/Text';
+import { clamp } from 'utils/math';
 
 interface Props {
     visible: boolean;
     propagateFrames: number;
     propagateUpToFrame: number;
+    stopFrame: number;
+    frameNumber: number;
     propagateObject(): void;
     cancel(): void;
     changePropagateFrames(value: number | undefined): void;
@@ -26,12 +26,16 @@ export default function PropagateConfirmComponent(props: Props): JSX.Element {
         visible,
         propagateFrames,
         propagateUpToFrame,
+        stopFrame,
+        frameNumber,
         propagateObject,
         changePropagateFrames,
         changeUpToFrame,
         cancel,
     } = props;
 
+    const minPropagateFrames = 1;
+
     return (
         <Modal
             okType='primary'
@@ -44,14 +48,37 @@ export default function PropagateConfirmComponent(props: Props): JSX.Element {
         >
             <div className='cvat-propagate-confirm'>
                 <Text>Do you want to make a copy of the object on</Text>
-                <InputNumber size='small' min={1} value={propagateFrames} onChange={changePropagateFrames} />
+                <InputNumber
+                    size='small'
+                    min={minPropagateFrames}
+                    value={propagateFrames}
+                    onChange={(value: number | undefined) => {
+                        if (typeof (value) === 'number') {
+                            changePropagateFrames(Math.floor(
+                                clamp(value, minPropagateFrames, Number.MAX_SAFE_INTEGER),
+                            ));
+                        }
+                    }}
+                />
                 {
                     propagateFrames > 1
                         ? <Text> frames </Text>
                         : <Text> frame </Text>
                 }
                 <Text>up to the </Text>
-                <InputNumber size='small' value={propagateUpToFrame} onChange={changeUpToFrame} />
+                <InputNumber
+                    size='small'
+                    value={propagateUpToFrame}
+                    min={frameNumber + 1}
+                    max={stopFrame}
+                    onChange={(value: number | undefined) => {
+                        if (typeof (value) === 'number') {
+                            changeUpToFrame(Math.floor(
+                                clamp(value, frameNumber + 1, stopFrame),
+                            ));
+                        }
+                    }}
+                />
                 <Text>frame</Text>
             </div>
         </Modal>

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

@@ -35,6 +35,9 @@ function PlayerNavigation(props: Props): JSX.Element {
     } = props;
 
     const [frameInputValue, setFrameInputValue] = useState<number | undefined>(frameNumber);
+    if (frameNumber !== frameInputValue) {
+        setFrameInputValue(frameNumber);
+    }
 
     return (
         <>
@@ -71,7 +74,9 @@ 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(clamp(value, stopFrame, startFrame));
+                            setFrameInputValue(Math.floor(
+                                clamp(value, stopFrame, startFrame),
+                            ));
                         }
                     }}
                     onBlur={() => {

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

@@ -84,7 +84,11 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                         value={frameStep}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeFrameStep(clamp(value, minFrameStep, maxFrameStep));
+                                onChangeFrameStep(
+                                    Math.floor(
+                                        clamp(value, minFrameStep, maxFrameStep),
+                                    ),
+                                );
                             }
                         }}
                     />
@@ -135,12 +139,13 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     <InputNumber
                         min={minGridSize}
                         max={maxGridSize}
-                        step={1}
                         value={gridSize}
                         disabled={!grid}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeGridSize(clamp(value, minGridSize, maxGridSize));
+                                onChangeGridSize(Math.floor(
+                                    clamp(value, minGridSize, maxGridSize),
+                                ));
                             }
                         }}
                     />

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

@@ -64,13 +64,13 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         value={Math.round(autoSaveInterval / (60 * 1000))}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeAutoSaveInterval(
+                                onChangeAutoSaveInterval(Math.floor(
                                     clamp(
                                         value,
                                         minAutoSaveInterval,
                                         maxAutoSaveInterval,
-                                    ) * 60 * 1000,
-                                );
+                                    ),
+                                ) * 60 * 1000);
                             }
                         }}
                     />
@@ -102,7 +102,9 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         value={aamZoomMargin}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeAAMZoomMargin(clamp(value, minAAMMargin, maxAAMMargin));
+                                onChangeAAMZoomMargin(Math.floor(
+                                    clamp(value, minAAMMargin, maxAAMMargin),
+                                ));
                             }
                         }}
                     />

cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -13,6 +13,7 @@ import {
 
 import { CombinedState } from 'reducers/interfaces';
 import PropagateConfirmComponent from 'components/annotation-page/standard-workspace/propagate-confirm';
+import { clamp } from 'utils/math';
 
 interface StateToProps {
     objectState: any | null;
@@ -88,23 +89,20 @@ class PropagateConfirmContainer extends React.PureComponent<Props> {
         propagateObject(jobInstance, objectState, frameNumber + 1, propagateUpToFrame);
     };
 
-    private changePropagateFrames = (value: number | undefined): void => {
+    private changePropagateFrames = (value: number): void => {
         const { changePropagateFrames } = this.props;
-        if (typeof (value) !== 'undefined') {
-            changePropagateFrames(value);
-        }
+        changePropagateFrames(value);
     };
 
-    private changeUpToFrame = (value: number | undefined): void => {
+    private changeUpToFrame = (value: number): void => {
         const {
             stopFrame,
             frameNumber,
             changePropagateFrames,
         } = this.props;
-        if (typeof (value) !== 'undefined') {
-            const propagateFrames = Math.max(0, Math.min(stopFrame, value)) - frameNumber;
-            changePropagateFrames(propagateFrames);
-        }
+
+        const propagateFrames = Math.max(0, Math.min(stopFrame, value)) - frameNumber;
+        changePropagateFrames(propagateFrames);
     };
 
     public render(): JSX.Element {
@@ -122,6 +120,8 @@ class PropagateConfirmContainer extends React.PureComponent<Props> {
             <PropagateConfirmComponent
                 visible={objectState !== null}
                 propagateUpToFrame={propagateUpToFrame}
+                stopFrame={stopFrame}
+                frameNumber={frameNumber}
                 propagateFrames={propagateUpToFrame - frameNumber}
                 propagateObject={this.propagateObject}
                 changePropagateFrames={this.changePropagateFrames}