dnm-react-uploader - npm Package Compare versions

Comparing version 1.25.3 to 1.25.4

examples/index.js

@@ -36,3 +36,3 @@ import React from 'react';
             },
-            range: [10, 60]
+            range: [0, 60]
         };
@@ -39,0 +39,0 @@ }

package.json

 {
   "name": "dnm-react-uploader",
-  "version": "1.25.3",
+  "version": "1.25.4",
   "description": "React file uploader",
@@ -60,4 +60,4 @@ "main": "dist/dnm-react-uploader.umd.min.js",
   "dependencies": {
-    "@dschoon/react-waves": "^4.0.3",
     "@emotion/core": "^10.0.22",
+    "@wavesurfer/react": "^1.0.4",
     "browser-image-compression": "^2.0.0",
@@ -64,0 +64,0 @@ "deasync": "^0.1.20",

rollup.config.js

@@ -11,5 +11,5 @@ import babel from 'rollup-plugin-babel';
     es: [
-        'react', 
-        'react-dom', 
-        'prop-types', 
+        'react',
+        'react-dom',
+        'prop-types',
         'lodash-es/camelCase',
@@ -29,4 +29,5 @@ 'lodash-es/concat',
         'browser-image-compression',
+        '@wavesurfer/react'
     ],
-    umd: ['react', 'react-dom', 'prop-types', 'browser-image-compression']
+    umd: ['react', 'react-dom', 'prop-types', 'browser-image-compression', '@wavesurfer/react']
 };
@@ -45,2 +46,3 @@
             'browser-image-compression': 'imageCompression',
+            '@wavesurfer/react': 'WavesurferPlayer'
         } : null
@@ -47,0 +49,0 @@ },

src/components/Waveform.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactWaves, { Regions } from '@dschoon/react-waves';
+import WavesurferPlayer from '@wavesurfer/react'
+import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js';
 import debounce from 'lodash-es/debounce';
@@ -8,103 +9,89 @@
 
-    constructor(props) {
-      super(props);
-      this.wavesurfer = null;
-      this.onReady = this.onReady.bind(this);
-      this.getRegions = this.getRegions.bind(this);
-      this._redraw = this._redraw.bind(this);
-      this.redraw = debounce(this._redraw, 250);
+  constructor(props) {
+    super(props);
+    this.state = {
+      wavesurfer: null,
+      wavesurferRegions: null
     }
+    this._redraw = this._redraw.bind(this);
+    this.redraw = debounce(this._redraw, 250);
+  }
 
-    componentDidMount() {
-      window.addEventListener('resize', this.redraw);
-    }
+  componentDidMount() {
+    window.addEventListener('resize', this.redraw);
+  }
 
-    componentDidUpdate(prevProps) {
-      const { height } = this.props;
-      if (prevProps.height !== height) {
-        this.redraw();
-      }
+  componentDidUpdate(prevProps) {
+    const { height } = this.props;
+    if (prevProps.height !== height) {
+      this.redraw();
     }
+  }
 
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.redraw);
-    }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.redraw);
+  }
 
-    _redraw() {
-        const { height } = this.props;
-        if (this.wavesurfer) {
-          this.wavesurfer.setHeight(height);
-          this.wavesurfer.drawBuffer();
-        }
+  _redraw() {
+    const { height } = this.props;
+    const { wavesurfer } = this.state;
+    if (wavesurfer) {
+      wavesurfer.setHeight(height);
+      wavesurfer.drawBuffer();
     }
+  }
 
-    onReady({ wavesurfer }) {
-      const { onReady } = this.props;
-      this.wavesurfer = wavesurfer;
-      this.wavesurfer.toggleInteraction();
-      this.redraw();
-      if (onReady) onReady(this.wavesurfer);
-    }
+  onReady = (wavesurfer) => {
+    const { onReady, range } = this.props;
+    const wavesurferRegions = wavesurfer.registerPlugin(Regions.create())
+    wavesurferRegions.addRegion({
+      id: 'cut',
+      start: range ? range[0] : 0,
+      end: range ? range[1] : 0,
+      color: 'rgba(146, 210, 117, 0.3)',
+      resize: false,
+      drag: false
+    })
+    onReady(wavesurfer);
+    this.redraw()
+    this.setState(({ wavesurfer, wavesurferRegions }));
+  }
 
-    getRegions() {
-        const { range } = this.props;
-        return range ? {
-            cut: {
-                id: 'cut',
-                start: range[0],
-                end: range[1],
-                color: 'rgba(146, 210, 117, 0.3)',
-                drag: false,
-                resize: false,
-            }
-        } : null;
-    }
- 
-    render () {
-        const { src, range, className, height } = this.props;
-        const regions = this.getRegions();
-        return (
-          <ReactWaves
-            audioFile={src}
-            className={className}
-            options={{
-              barGap: 3,
-              barWidth: 4,
-              barHeight: 2,
-              barRadius: 3,
-              cursorWidth: 0,
-              hideScrollbar: true,
-              height,
-              interact: false,
-              progressColor: '#46be8ae6',
-              waveColor: '#D1D6DA',
-            }}
-            zoom={0}
-            pos={0}
-            playing={false} 
-            onReady={this.onReady}
-          >
-            <Regions
-                regions={regions}
-            />
-          </ReactWaves>
-      )
-    }
+
+  render() {
+    const { src, className, height } = this.props;
+    return (
+      <div className={className}>
+        <WavesurferPlayer
+          key={src}
+          url={src}
+          cursorWidth={0}
+          height={height}
+          waveColor={'#D1D6DA'}
+          zoom={0}
+          hideScrollbar={true}
+          interact={false}
+          progressColor={'#46be8ae6'}
+          onReady={this.onReady}
+        />
+      </div>
+    )
   }
+}
 
-  
+
 Waveform.propTypes = {
-    className: PropTypes.string,
-    height: PropTypes.number,
-    onReady: PropTypes.func,
-    range: PropTypes.array,
-    src: PropTypes.string,
+  className: PropTypes.string,
+  height: PropTypes.number,
+  onReady: PropTypes.func,
+  range: PropTypes.array,
+  src: PropTypes.string,
 };
 
 Waveform.defaultProps = {
-    className: '',
-    height: 100,
-    onReady: () => null,
-    range: null,
-    src: null,
+  className: '',
+  height: 100,
+  onReady: () => null,
+  range: null,
+  src: null,
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

92

decreased by-24.59%

Number of medium supply chain risk alerts

9

decreased by-25%

Worsened metrics

Total package byte prevSize

548274

decreased by-68.05%

Number of package files

27

decreased by-6.9%

Lines of code

8294

decreased by-76.36%

Dependency changes

• + Added@wavesurfer/react@^1.0.4

• + Added@wavesurfer/react@1.0.7(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedwavesurfer.js@7.8.8(transitive)

• - Removed@dschoon/react-waves@^4.0.3

• - Removed@dschoon/react-waves@4.0.3(transitive)

• - Removed@jest/types@26.6.2(transitive)

• - Removed@types/istanbul-lib-coverage@2.0.6(transitive)

• - Removed@types/istanbul-lib-report@3.0.3(transitive)

• - Removed@types/istanbul-reports@3.0.4(transitive)

• - Removed@types/jest@26.0.24(transitive)

• - Removed@types/node@14.18.63(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@16.14.62(transitive)

• - Removed@types/react-dom@16.9.24(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removed@types/yargs@15.0.19(transitive)

• - Removed@types/yargs-parser@21.0.3(transitive)

• - Removedansi-regex@5.0.1(transitive)

• - Removedansi-styles@4.3.0(transitive)

• - Removedchalk@4.1.2(transitive)

• - Removedcolor-convert@2.0.1(transitive)

• - Removedcolor-name@1.1.4(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddiff-sequences@26.6.2(transitive)

• - Removedhas-flag@4.0.0(transitive)

• - Removedjest-diff@26.6.2(transitive)

• - Removedjest-get-type@26.3.0(transitive)

• - Removedpretty-format@26.6.2(transitive)

• - Removedreact-is@17.0.2(transitive)

• - Removedsupports-color@7.2.0(transitive)

• - Removedtypescript@4.9.5(transitive)

• - Removedwavesurfer.js@4.6.0(transitive)