Merge branch 'naafi-linking' of https://github.com/brown-dash/Dash-Web into naafi-linking

1 files changed, 71 insertions, 79 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index c79828470..93377f1dc 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -6,13 +6,11 @@ import {
     IReactionDisposer,
     observable,
     reaction,
-    runInAction,
+    runInAction
 } from "mobx";
 import { observer } from "mobx-react";
 import { DateField } from "../../../fields/DateField";
 import { Doc, DocListCast, Opt } from "../../../fields/Doc";
-import { documentSchema } from "../../../fields/documentSchemas";
-import { makeInterface } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Cast, NumCast } from "../../../fields/Types";
 import { AudioField, nullAudio } from "../../../fields/URLField";
@@ -26,26 +24,18 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import {
     ViewBoxAnnotatableComponent,
-    ViewBoxAnnotatableProps,
+    ViewBoxAnnotatableProps
 } from "../DocComponent";
+import { Colors } from "../global/globalEnums";
 import "./AudioBox.scss";
 import { FieldView, FieldViewProps } from "./FieldView";
 import { LinkDocPreview } from "./LinkDocPreview";
-import { faLessThan } from "@fortawesome/free-solid-svg-icons";
-import { Colors } from "../global/globalEnums";
 
 declare class MediaRecorder {
     constructor(e: any); // whatever MediaRecorder has
 }
-
-type AudioDocument = makeInterface<[typeof documentSchema]>;
-const AudioDocument = makeInterface(documentSchema);
-
 @observer
-export class AudioBox extends ViewBoxAnnotatableComponent<
-    ViewBoxAnnotatableProps & FieldViewProps,
-    AudioDocument
->(AudioDocument) {
+export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(AudioBox, fieldKey);
     }
@@ -70,7 +60,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
     @observable static _scrubTime = 0;
     @observable _markerEnd: number = 0;
     @observable _position: number = 0;
-    @observable _waveHeight: Opt<number> = this.layoutDoc._height;
+    @observable _waveHeight: Opt<number> = NumCast(this.layoutDoc._height);
     @observable _paused: boolean = false;
     @observable _trimming: boolean = false;
     @observable _trimStart: number = NumCast(this.layoutDoc.clipStart) ? NumCast(this.layoutDoc.clipStart) : 0;
@@ -310,7 +300,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
         );
         DocUtils.ActiveRecordings.push(this);
         this._recorder.ondataavailable = async (e: any) => {
+            console.log("Data available", e);
             const [{ result }] = await Networking.UploadFilesToServer(e.data);
+            console.log("Data result", result);
             if (!(result instanceof Error)) {
                 this.props.Document[this.props.fieldKey] = new AudioField(result.accessPaths.agnostic.client);
             }
@@ -336,8 +328,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                 (this.layoutDoc.dontAutoPlayFollowedLinks ? "" : "Don't") +
                 " play when link is selected",
             event: () =>
-                (this.layoutDoc.dontAutoPlayFollowedLinks =
-                    !this.layoutDoc.dontAutoPlayFollowedLinks),
+            (this.layoutDoc.dontAutoPlayFollowedLinks =
+                !this.layoutDoc.dontAutoPlayFollowedLinks),
             icon: "expand-arrows-alt",
         });
         funcs.push({
@@ -637,77 +629,77 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                                 </div>
                             </div>
                         ) : (
-                                <div
-                                    className={`audiobox-record${interactive}`}
-                                    style={{ backgroundColor: Colors.DARK_GRAY }}
-                                >
-                                    <FontAwesomeIcon icon="microphone" />
+                            <div
+                                className={`audiobox-record${interactive}`}
+                                style={{ backgroundColor: Colors.DARK_GRAY }}
+                            >
+                                <FontAwesomeIcon icon="microphone" />
                                 RECORD
-                                </div>
-                            )}
+                            </div>
+                        )}
                     </div>
                 ) : (
+                    <div
+                        className="audiobox-controls"
+                        style={{
+                            pointerEvents:
+                                this._isAnyChildContentActive || this.props.isContentActive()
+                                    ? "all"
+                                    : "none",
+                        }}
+                    >
+                        <div className="audiobox-dictation" />
                         <div
-                            className="audiobox-controls"
-                            style={{
-                                pointerEvents:
-                                    this._isAnyChildContentActive || this.props.isContentActive()
-                                        ? "all"
-                                        : "none",
-                            }}
+                            className="audiobox-player"
+                            style={{ height: `${AudioBox.heightPercent}%` }}
                         >
-                            <div className="audiobox-dictation" />
                             <div
-                                className="audiobox-player"
-                                style={{ height: `${AudioBox.heightPercent}%` }}
+                                className="audiobox-buttons"
+                                title={this.mediaState === "paused" ? "play" : "pause"}
+                                onClick={this.mediaState === "paused" ? this.Play : this.Pause}
                             >
-                                <div
-                                    className="audiobox-buttons"
-                                    title={this.mediaState === "paused" ? "play" : "pause"}
-                                    onClick={this.mediaState === "paused" ? this.Play : this.Pause}
-                                >
-                                    {" "}
-                                    <FontAwesomeIcon
-                                        icon={this.mediaState === "paused" ? "play" : "pause"}
-                                        size={"1x"}
-                                    />
-                                </div>
-                                <div
-                                    className="audiobox-buttons"
-                                    title={this._trimming ? "finish" : "trim"}
-                                    onClick={this._trimming ? this.finishTrim : this.startTrim}
-                                >
-                                    <FontAwesomeIcon
-                                        icon={this._trimming ? "check" : "cut"}
-                                        size={"1x"}
-                                    />
-                                </div>
-                                <div
-                                    className="audiobox-timeline"
-                                    style={{
-                                        top: 0,
-                                        height: `100%`,
-                                        left: AudioBox.playheadWidth,
-                                        width: `calc(100% - ${AudioBox.playheadWidth}px)`,
-                                        background: "white",
-                                    }}
-                                >
-                                    {this.renderTimeline}
-                                </div>
-                                {this.audio}
-                                <div className="audioBox-current-time">
-                                    {this._trimming ?
-                                        formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))
-                                        : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))}
-                                </div>
-                                <div className="audioBox-total-time">
-                                    {this._trimming || !this._trimEnd ?
-                                        formatTime(Math.round(NumCast(this.duration)))
-                                        : formatTime(Math.round(NumCast(this.trimDuration)))}
-                                </div>
+                                {" "}
+                                <FontAwesomeIcon
+                                    icon={this.mediaState === "paused" ? "play" : "pause"}
+                                    size={"1x"}
+                                />
+                            </div>
+                            <div
+                                className="audiobox-buttons"
+                                title={this._trimming ? "finish" : "trim"}
+                                onClick={this._trimming ? this.finishTrim : this.startTrim}
+                            >
+                                <FontAwesomeIcon
+                                    icon={this._trimming ? "check" : "cut"}
+                                    size={"1x"}
+                                />
+                            </div>
+                            <div
+                                className="audiobox-timeline"
+                                style={{
+                                    top: 0,
+                                    height: `100%`,
+                                    left: AudioBox.playheadWidth,
+                                    width: `calc(100% - ${AudioBox.playheadWidth}px)`,
+                                    background: "white",
+                                }}
+                            >
+                                {this.renderTimeline}
+                            </div>
+                            {this.audio}
+                            <div className="audioBox-current-time">
+                                {this._trimming ?
+                                    formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))
+                                    : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))}
+                            </div>
+                            <div className="audioBox-total-time">
+                                {this._trimming || !this._trimEnd ?
+                                    formatTime(Math.round(NumCast(this.duration)))
+                                    : formatTime(Math.round(NumCast(this.trimDuration)))}
                             </div>
                         </div>
-                    )}
+                    </div>
+                )}
             </div>
         );
     }