React UI: Player in annotation view & settings page (cvat-ai#1018)

* Active player controls
* Setup packages
* Playing
* Fold/unfold sidebar, minor issues
* Improved cvat-canvas integration
* Resolved some issues
* Added cvat-canvas to Dockerfile.ui
* Fit canvas method
* Added annotation reducer
* Added annotation actions
* Added containers
* Added components
* cvat-canvas removed from dockerignore
* Added settings page
* Minor improvements
* Container for canvas wrapper
* Configurable grid
* Rotation
* fitCanvas added to readme
* Aligned table

Author: bsekachev

.dockerignore

@@ -6,6 +6,5 @@
 /.vscode
 /db.sqlite3
 /keys
-/cvat-canvas
 **/node_modules
 

Dockerfile.ui

@@ -22,22 +22,28 @@ RUN apt update && apt install -yq nodejs npm curl && \
     npm install -g n && n 10.16.3
 
 # Create output directories
-RUN mkdir /tmp/cvat-ui /tmp/cvat-core
+RUN mkdir /tmp/cvat-ui /tmp/cvat-core /tmp/cvat-canvas
 
 # Install dependencies
 COPY cvat-core/package*.json /tmp/cvat-core/
+COPY cvat-canvas/package*.json /tmp/cvat-canvas/
 COPY cvat-ui/package*.json /tmp/cvat-ui/
 
 # Install cvat-core dependencies
 WORKDIR /tmp/cvat-core/
 RUN npm install
 
+# Install cvat-canvas dependencies
+WORKDIR /tmp/cvat-canvas/
+RUN npm install
+
 # Install cvat-ui dependencies
 WORKDIR /tmp/cvat-ui/
 RUN npm install
 
 # Build source code
 COPY cvat-core/ /tmp/cvat-core/
+COPY cvat-canvas/ /tmp/cvat-canvas/
 COPY cvat-ui/ /tmp/cvat-ui/
 RUN npm run build
 

cvat-canvas/README.md

@@ -74,6 +74,7 @@ Canvas itself handles:
         activate(clientID: number, attributeID?: number): void;
         rotate(rotation: Rotation, remember?: boolean): void;
         focus(clientID: number, padding?: number): void;
+        fitCanvas(): void;
         fit(): void;
         grid(stepX: number, stepY: number): void;
 
@@ -99,7 +100,7 @@ Canvas itself handles:
 - Drawn texts have the class ```cvat_canvas_text```
 - Tags have the class ```cvat_canvas_tag```
 - Canvas image has ID ```cvat_canvas_image```
-- Grid on the canvas has ID ```cvat_canvas_grid_pattern```
+- Grid on the canvas has ID ```cvat_canvas_grid``` and ```cvat_canvas_grid_pattern```
 - Crosshair during a draw has class ```cvat_canvas_crosshair```
 
 ### Events
@@ -126,6 +127,7 @@ Standard JS events are used.
 
     // Put canvas to a html container
     htmlContainer.appendChild(canvas.html());
+    canvas.fitCanvas();
 
     // Next you can use its API methods. For example:
     canvas.rotate(window.Canvas.Rotation.CLOCKWISE90);
@@ -182,17 +184,18 @@ Than you can use it in TypeScript:
 
 ## API Reaction
 
-|            | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING |
-|------------|------|----------|-----------|---------|---------|---------|
-| html()     | +    | +        | +         | +       | +       | +       |
-| setup()    | +    | +        | +         | +       | +       | -       |
-| activate() | +    | -        | -         | -       | -       | -       |
-| rotate()   | +    | +        | +         | +       | +       | +       |
-| focus()    | +    | +        | +         | +       | +       | +       |
-| fit()      | +    | +        | +         | +       | +       | +       |
-| grid()     | +    | +        | +         | +       | +       | +       |
-| draw()     | +    | -        | -         | -       | -       | -       |
-| split()    | +    | -        | +         | -       | -       | -       |
-| group      | +    | +        | -         | -       | -       | -       |
-| merge()    | +    | -        | -         | -       | +       | -       |
-| cancel()   | -    | +        | +         | +       | +       | +       |
+|             | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING |
+|-------------|------|----------|-----------|---------|---------|---------|
+| html()      | +    | +        | +         | +       | +       | +       |
+| setup()     | +    | +        | +         | +       | +       | -       |
+| activate()  | +    | -        | -         | -       | -       | -       |
+| rotate()    | +    | +        | +         | +       | +       | +       |
+| focus()     | +    | +        | +         | +       | +       | +       |
+| fit()       | +    | +        | +         | +       | +       | +       |
+| fitCanvas() | +    | +        | +         | +       | +       | +       |
+| grid()      | +    | +        | +         | +       | +       | +       |
+| draw()      | +    | -        | -         | -       | -       | -       |
+| split()     | +    | -        | +         | -       | -       | -       |
+| group       | +    | +        | -         | -       | -       | -       |
+| merge()     | +    | -        | -         | -       | +       | -       |
+| cancel()    | -    | +        | +         | +       | +       | +       |