Fixed: Could not receive frame N. TypeError: Cannot read properties of undefined (#4187)

* Fixed issue with async frames fetching

* Updated versions and changelog

CHANGELOG.md

@@ -56,10 +56,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added intelligent function when paste labels to another task (<https://github.com/openvinotoolkit/cvat/pull/4161>)
 - Uncaught TypeError: this.el.node.getScreenCTM() is null in Firefox (<https://github.com/openvinotoolkit/cvat/pull/4175>)
 - Bug: canvas is busy when start playing, start resizing a shape and do not release the mouse cursor (<https://github.com/openvinotoolkit/cvat/pull/4151>)
+- Bug: could not receive frame N. TypeError: Cannot read properties of undefined (reding "filename") (<https://github.com/openvinotoolkit/cvat/pull/4187>)
 - Fixed tus upload error over https (<https://github.com/openvinotoolkit/cvat/pull/4154>)
 - Auth token key is not returned when registering without email verification (<https://github.com/openvinotoolkit/cvat/pull/4092>)
 
-
 ### Security
 - Updated ELK to 6.8.22 which uses log4j 2.17.0 (<https://github.com/openvinotoolkit/cvat/pull/4052>)
 

cvat-core/package-lock.json

 {
   "name": "cvat-core",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cvat-core",
-      "version": "4.1.0",
+      "version": "4.1.1",
       "license": "MIT",
       "dependencies": {
         "axios": "^0.21.4",

cvat-core/package.json

 {
   "name": "cvat-core",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "babel.config.js",
   "scripts": {

cvat-core/src/frames.js

-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -477,31 +477,47 @@
 
             let bufferedFrames = new Set();
 
+            // if we send one request to get frame 1 with filling the buffer
+            // then quicky send one more request to get frame 1
+            // frame 1 will be already decoded and written to buffer
+            // the second request gets frame 1 from the buffer, removes it from there and returns
+            // after the first request finishes decoding it tries to get frame 1, but failed
+            // because frame 1 was already removed from the buffer by the second request
+            // to prevent this behavior we do not write decoded frames to buffer till the end of decoding all chunks
+            const buffersToBeCommited = [];
+            const commitBuffers = () => {
+                for (const buffer of buffersToBeCommited) {
+                    this._buffer = {
+                        ...this._buffer,
+                        ...buffer,
+                    };
+                }
+            };
+
             // Need to decode chunks in sequence
             // eslint-disable-next-line no-async-promise-executor
             return new Promise(async (resolve, reject) => {
-                for (const chunkIdx in this._requestedChunks) {
-                    if (Object.prototype.hasOwnProperty.call(this._requestedChunks, chunkIdx)) {
-                        try {
-                            const chunkFrames = await this.requestOneChunkFrames(chunkIdx);
-                            if (chunkIdx in this._requestedChunks) {
-                                bufferedFrames = new Set([...bufferedFrames, ...chunkFrames]);
-                                this._buffer = {
-                                    ...this._buffer,
-                                    ...this._requestedChunks[chunkIdx].buffer,
-                                };
-                                delete this._requestedChunks[chunkIdx];
-                                if (Object.keys(this._requestedChunks).length === 0) {
-                                    resolve(bufferedFrames);
-                                }
-                            } else {
-                                reject(chunkIdx);
-                                break;
+                for (const chunkIdx of Object.keys(this._requestedChunks)) {
+                    try {
+                        const chunkFrames = await this.requestOneChunkFrames(chunkIdx);
+                        if (chunkIdx in this._requestedChunks) {
+                            bufferedFrames = new Set([...bufferedFrames, ...chunkFrames]);
+
+                            buffersToBeCommited.push(this._requestedChunks[chunkIdx].buffer);
+                            delete this._requestedChunks[chunkIdx];
+                            if (Object.keys(this._requestedChunks).length === 0) {
+                                commitBuffers();
+                                resolve(bufferedFrames);
                             }
-                        } catch (error) {
-                            reject(error);
+                        } else {
+                            commitBuffers();
+                            reject(chunkIdx);
                             break;
                         }
+                    } catch (error) {
+                        commitBuffers();
+                        reject(error);
+                        break;
                     }
                 }
             });
@@ -524,7 +540,7 @@
 
         async require(frameNumber, taskID, jobID, fillBuffer, frameStep) {
             for (const frame in this._buffer) {
-                if (frame < frameNumber || frame >= frameNumber + this._size * frameStep) {
+                if (+frame < frameNumber || +frame >= frameNumber + this._size * frameStep) {
                     delete this._buffer[frame];
                 }
             }
@@ -563,7 +579,6 @@
             } else if (fillBuffer) {
                 this.clear();
                 await this.makeFillRequest(frameNumber, frameStep, fillBuffer ? null : 1);
-
                 frame = this._buffer[frameNumber];
             } else {
                 this.clear();

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -49,6 +49,7 @@ interface StateToProps {
     frameStep: number;
     frameSpeed: FrameSpeed;
     frameDelay: number;
+    frameFetching: boolean;
     playing: boolean;
     saving: boolean;
     canvasIsReady: boolean;
@@ -89,7 +90,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
         annotation: {
             player: {
                 playing,
-                frame: { filename: frameFilename, number: frameNumber, delay: frameDelay },
+                frame: {
+                    filename: frameFilename, number: frameNumber, delay: frameDelay, fetching: frameFetching,
+                },
             },
             annotations: {
                 saving: { uploading: saving, statuses: savingStatuses, forceExit },
@@ -112,6 +115,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         frameStep,
         frameSpeed,
         frameDelay,
+        frameFetching,
         playing,
         canvasIsReady,
         saving,
@@ -484,13 +488,14 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
             frameSpeed,
             frameNumber,
             frameDelay,
+            frameFetching,
             playing,
             canvasIsReady,
             onSwitchPlay,
             onChangeFrame,
         } = this.props;
 
-        if (playing && canvasIsReady) {
+        if (playing && canvasIsReady && !frameFetching) {
             if (frameNumber < jobInstance.stopFrame) {
                 let framesSkipped = 0;
                 if (frameSpeed === FrameSpeed.Fast && frameNumber + 1 < jobInstance.stopFrame) {