feat: DEV-1713: Audio View (#503)

* Migrate audio to Timeline (WIP)

* Migrating audio (WIP 2)

* Extending the timeline

* New Audio UI + Pinch-to-zoom

* Volume controls and refactoring

* Enable cursor hiding

* Fixes and tuning

* Remove FF

* Refactor

* Range click to set value

* UX improvements

* Audio fixes WIP

* fix: DEV-1766: Unable to destroy Wavesurfer

* Add Y-axis zoom
Fix some styles using auto-prefixer

* Cleanup

* Fix image flex layout

* Fix image flex layout (column)

* fix: DEV-1811: Playback speed range

* fix: DEV-1818: Horizontal scroll

* fix: DEV-1813: Start over on play when the playback is finished

Author: nick-skriabin

examples/audio_regions/config.xml

@@ -1,7 +1,7 @@
 <View>
   <Header value="Select regions:"></Header>
   <Labels name="label" toName="audio" choice="multiple">
-    <Label value="Beat" background="yellow"></Label>
+    <Label value="Beat" background="#98C84E"></Label>
     <Label value="Voice" background="red"></Label>
     <Label value="Guitar" background="blue"></Label>
     <Label value="Other"></Label>

package.json

@@ -41,12 +41,16 @@
     "@types/chroma-js": "^2.1.3",
     "@types/jest": "^27.0.1",
     "@types/keymaster": "^1.6.30",
+    "@types/lodash.ismatch": "^4.4.6",
+    "@types/nanoid": "^3.0.0",
     "@types/react-dom": "^17.0.11",
     "@types/strman": "^2.0.0",
+    "@types/wavesurfer.js": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "antd": "^4.3.3",
     "array-move": "^1.0.0",
+    "autoprefixer": "^10.4.2",
     "babel-jest": "^27.1.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.0",
@@ -86,10 +90,13 @@
     "mobx": "^5.15.4",
     "mobx-react": "^6",
     "mobx-state-tree": "^3.16.0",
-    "nanoid": "^2.1.11",
+    "nanoid": "^3.3.0",
     "node-fetch": "^2.6.1",
     "node-sass": "^6.0.1",
     "pleasejs": "^0.4.2",
+    "postcss": "^8.4.6",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.4.1",
     "prettier": "^1.19.1",
     "puppeteer": "^3.3.0",
     "raw-loader": "^4.0.2",
@@ -115,7 +122,7 @@
     "ts-jest": "^27.0.5",
     "typescript": "^4.2.3",
     "url-loader": "^4.1.1",
-    "wavesurfer.js": "^3.3.3",
+    "wavesurfer.js": "^6.0.1",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.2.1",
@@ -176,20 +183,29 @@
     "env": {
       "test": {
         "presets": [
-          ["@babel/preset-env", {
-            "targets": {
-              "node": "current"
+          [
+            "@babel/preset-env",
+            {
+              "targets": {
+                "node": "current"
+              }
             }
-          }],
-          ["@babel/preset-react", {
-            "runtime": "automatic"
-          }],
+          ],
+          [
+            "@babel/preset-react",
+            {
+              "runtime": "automatic"
+            }
+          ],
           "@babel/preset-typescript"
         ],
         "plugins": [
-          ["@babel/plugin-transform-react-jsx", {
-            "runtime": "automatic"
-          }]
+          [
+            "@babel/plugin-transform-react-jsx",
+            {
+              "runtime": "automatic"
+            }
+          ]
         ]
       }
     }

public/files/barradeen-emotional.mp3

@@ -56,6 +56,7 @@
           }
       })(window, document);
     </script>
+
     <script>
       domReady(function () {
         var ls = new LabelStudio("label-studio", {

public/index.html

@@ -19,6 +19,8 @@ export { ReactComponent as LsExpand } from "./expand.svg";
 export { ReactComponent as LsCollapse } from "./collapse.svg";
 export { ReactComponent as LsDate } from "./date.svg";
 export { ReactComponent as IconPlusCircle } from "./plus_circle.svg";
+export { ReactComponent as IconSlow } from "./slow.svg";
+export { ReactComponent as IconFast } from "./fast.svg";
 
 export { ReactComponent as IconCheck } from "./check.svg";
 export { ReactComponent as IconCross } from "./cross.svg";
@@ -27,6 +29,11 @@ export { ReactComponent as IconPlayerPause } from "./player/pause.svg";
 export { ReactComponent as IconPlayerPlay } from "./player/play.svg";
 export { ReactComponent as IconPlayerStep } from "./player/step.svg";
 
+export { ReactComponent as IconVolumeMute } from "./volume-mute.svg";
+export { ReactComponent as IconVolumeHalf } from "./volume-half.svg";
+export { ReactComponent as IconVolumeFull } from "./volume-full.svg";
+
+// Tools
 export { ReactComponent as IconBrushTool } from './tools/brush-tool.svg';
 export { ReactComponent as IconBrushToolSmart } from './tools/brush-tool-smart.svg';
 export { ReactComponent as IconCircleTool } from './tools/circle-tool.svg';
@@ -42,8 +49,8 @@ export { ReactComponent as IconHandTool } from './tools/hand-tool.svg';
 export { ReactComponent as IconBrightnessTool } from "./tools/brightness-tool.svg";
 export { ReactComponent as IconContrastTool } from "./tools/contrast-tool.svg";
 
-export { ReactComponent as IconMagnifyTool } from './tools/magnify-tool.svg';
-export { ReactComponent as IconMinifyTool } from './tools/minify-tool.svg';
+export { ReactComponent as IconZoomIn } from './tools/magnify-tool.svg';
+export { ReactComponent as IconZoomOut } from './tools/minify-tool.svg';
 export { ReactComponent as IconMoveTool } from './tools/move-tool.svg';
 export { ReactComponent as IconRotateLeftTool } from './tools/rotate-left-tool.svg';
 export { ReactComponent as IconRotateRightTool } from './tools/rotate-right-tool.svg';