final improvements to audio waveform rendering.

2 files changed, 38 insertions, 51 deletions

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ac82f60e1..df3d3106e 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -559,10 +559,11 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             e.preventDefault();
             this._lassoFreehand = !this._lassoFreehand;
         }
-    })
+    });
 
     touchesLine(r1: { left: number, top: number, width: number, height: number }) {
-        for (var i = 0; i < this._lassoPts.length; i++) {
+        // @ts-ignore
+        for (let i = 0; i < this._lassoPts.length; i++) {
             const topLeft = this.Transform.transformPoint(this._lassoPts[i][0], this._lassoPts[i][1]);
             if (r1.left < topLeft[0] && topLeft[0] < r1.left + r1.width &&
                 r1.top < topLeft[1] && topLeft[1] < r1.top + r1.height) {
@@ -583,6 +584,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             let hasLeft = false;
             let hasBottom = false;
             let hasRight = false;
+            // @ts-ignore
             for (let i = 0; i < this._lassoPts.length; i++) {
                 const truePoint = this.Transform.transformPoint(this._lassoPts[i][0], this._lassoPts[i][1]);
                 hasLeft = hasLeft || (truePoint[0] > tl[0] && truePoint[0] < r1.left) && (truePoint[1] > r1.top && truePoint[1] < r1.top + r1.height);
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 785bb5ce8..c89e21312 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -1,34 +1,34 @@
 import React = require("react");
-import { FieldViewProps, FieldView } from './FieldView';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios";
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import "./AudioBox.scss";
-import { Cast, DateCast, NumCast, FieldValue, ScriptCast } from "../../../fields/Types";
-import { AudioField, nullAudio } from "../../../fields/URLField";
-import { ViewBoxAnnotatableComponent } from "../DocComponent";
-import { makeInterface, createSchema, listSpec } from "../../../fields/Schema";
-import { documentSchema } from "../../../fields/documentSchemas";
-import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero, formatTime, setupMoveUpEvents } from "../../../Utils";
-import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace, toJS } from "mobx";
+import Waveform from "react-audio-waveform";
 import { DateField } from "../../../fields/DateField";
-import { SelectionManager } from "../../util/SelectionManager";
 import { Doc, DocListCast, Opt } from "../../../fields/Doc";
-import { ContextMenuProps } from "../ContextMenuItem";
-import { ContextMenu } from "../ContextMenu";
+import { documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { DocumentView, DocumentViewProps } from "./DocumentView";
-import { Docs, DocUtils } from "../../documents/Documents";
+import { List } from "../../../fields/List";
+import { createSchema, listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField, ScriptField } from "../../../fields/ScriptField";
+import { Cast, DateCast, NumCast } from "../../../fields/Types";
+import { AudioField, nullAudio } from "../../../fields/URLField";
+import { emptyFunction, formatTime, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils, numberRange } from "../../../Utils";
+import { Docs, DocUtils } from "../../documents/Documents";
 import { Networking } from "../../Network";
-import { LinkAnchorBox } from "./LinkAnchorBox";
-import { List } from "../../../fields/List";
+import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { Scripting } from "../../util/Scripting";
-import Waveform from "react-audio-waveform";
-import axios from "axios";
+import { SelectionManager } from "../../util/SelectionManager";
 import { SnappingManager } from "../../util/SnappingManager";
-import { CurrentUserUtils } from "../../util/CurrentUserUtils";
-import { LinkDocPreview } from "./LinkDocPreview";
+import { ContextMenu } from "../ContextMenu";
+import { ContextMenuProps } from "../ContextMenuItem";
+import { ViewBoxAnnotatableComponent } from "../DocComponent";
+import "./AudioBox.scss";
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment";
+import { LinkAnchorBox } from "./LinkAnchorBox";
+import { LinkDocPreview } from "./LinkDocPreview";
 
 declare class MediaRecorder {
     // whatever MediaRecorder has
@@ -43,6 +43,7 @@ const AudioDocument = makeInterface(documentSchema, audioSchema);
 export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioDocument>(AudioDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); }
     public static Enabled = false;
+    public static NUMBER_OF_BUCKETS = 100;
 
     static Instance: AudioBox;
     static RangeScript: ScriptField;
@@ -508,7 +509,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     // returns the audio waveform
     @computed get waveform() {
         const audioBuckets = Cast(this.dataDoc.audioBuckets, listSpec("number"), []);
-        !audioBuckets.length && setTimeout(() => this.buckets());
+        !audioBuckets.length && setTimeout(() => this.createWaveformBuckets());
         return <Waveform
             color={"darkblue"}
             height={this._waveHeight}
@@ -516,39 +517,23 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
             // pos={this.layoutDoc._currentTimecode} need to correctly resize parent to make this work (not very necessary for function)
             pos={this.audioDuration}
             duration={this.audioDuration}
-            peaks={audioBuckets.length === 100 ? audioBuckets : undefined}
+            peaks={audioBuckets.length === AudioBox.NUMBER_OF_BUCKETS ? audioBuckets : undefined}
             progressColor={"blue"} />;
     }
 
     // decodes the audio file into peaks for generating the waveform
-    @action
-    buckets = async () => {
-        const audioCtx = new (window.AudioContext)();
-
+    createWaveformBuckets = async () => {
         axios({ url: this.path, responseType: "arraybuffer" })
-            .then(response => {
-                const audioData = response.data;
-
-                audioCtx.decodeAudioData(audioData, action(buffer => {
+            .then(response => (new (window.AudioContext)()).decodeAudioData(response.data,
+                action(buffer => {
                     const decodedAudioData = buffer.getChannelData(0);
-                    const NUMBER_OF_BUCKETS = 100;
-                    const bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS);
-                    let _buckets: number[] = [];
-                    for (let i = 0; i < NUMBER_OF_BUCKETS; i++) {
-                        const startingPoint = i * bucketDataSize;
-                        const endingPoint = i * bucketDataSize + bucketDataSize;
-                        let max = 0;
-                        for (let j = startingPoint; j < endingPoint; j++) {
-                            if (decodedAudioData[j] > max) {
-                                max = decodedAudioData[j];
-                            }
-                        }
-                        const size = Math.abs(max);
-                        _buckets.push(size / 2);
-                    }
-                    this.dataDoc.audioBuckets = new List<number>(_buckets);
-                }));
-            });
+                    const bucketDataSize = Math.floor(decodedAudioData.length / AudioBox.NUMBER_OF_BUCKETS);
+                    const brange = Array.from(Array(bucketDataSize));
+                    this.dataDoc.audioBuckets = new List<number>(
+                        numberRange(AudioBox.NUMBER_OF_BUCKETS).map(i =>
+                            brange.reduce((p, x, j) => Math.abs(Math.max(p, decodedAudioData[i * bucketDataSize + j])), 0) / 2));
+                }))
+            );
     }
 
     rangeScript = () => AudioBox.RangeScript;