added doubleclick on clip button to switch to editing entire timeline vs. single click to edit just the clip. fixed some audio timeline bugs with printing out current time and time span when trimming. cleaned up audioWaveform bucket fields.

1 files changed, 41 insertions, 37 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 6a25ffaeb..bfc15cea8 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -16,7 +16,7 @@ import { makeInterface } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Cast, NumCast } from "../../../fields/Types";
 import { AudioField, nullAudio } from "../../../fields/URLField";
-import { emptyFunction, formatTime, OmitKeys } from "../../../Utils";
+import { emptyFunction, formatTime, OmitKeys, setupMoveUpEvents, returnFalse } from "../../../Utils";
 import { DocUtils } from "../../documents/Documents";
 import { Networking } from "../../Network";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
@@ -48,13 +48,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
     ViewBoxAnnotatableProps & FieldViewProps,
     AudioDocument
 >(AudioDocument) {
-    public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(AudioBox, fieldKey);
-    }
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); }
     public static Enabled = false;
     static playheadWidth = 40; // width of playhead
     static heightPercent = 75; // height of timeline in percent of height of audioBox.
     static Instance: AudioBox;
+    static ScopeAll = 2;
+    static ScopeClip = 1;
+    static ScopeNone = 0;
 
     _disposers: { [name: string]: IReactionDisposer } = {};
     _ele: HTMLAudioElement | null = null;
@@ -74,14 +75,19 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
     @observable _position: number = 0;
     @observable _waveHeight: Opt<number> = this.layoutDoc._height;
     @observable _paused: boolean = false;
-    @observable _trimming: boolean = false;
+    @observable _trimming: number = AudioBox.ScopeNone;
     @observable _trimStart: number = NumCast(this.layoutDoc.clipStart);
     @observable _trimEnd: number | undefined = Cast(this.layoutDoc.clipEnd, "number");
-    @computed get clipStart() { return NumCast(this.layoutDoc.clipStart); }
-    @computed get clipEnd() { return NumCast(this.layoutDoc.clipEnd, this.duration); }
-    @computed get trimStart() { return this._trimming ? this._trimStart : NumCast(this.layoutDoc.clipStart); }
+    @computed get clipStart() { return this._trimming === AudioBox.ScopeAll ? 0 : NumCast(this.layoutDoc.clipStart); }
+    @computed get clipDuration() {
+        return this._trimming === AudioBox.ScopeAll ? NumCast(this.dataDoc[`${this.fieldKey}-duration`]) :
+            NumCast(this.layoutDoc.clipEnd, this.clipStart + NumCast(this.dataDoc[`${this.fieldKey}-duration`])) - this.clipStart;
+    }
+    @computed get clipEnd() { return this.clipStart + this.clipDuration; }
+    @computed get trimStart() { return this._trimming !== AudioBox.ScopeNone ? this._trimStart : NumCast(this.layoutDoc.clipStart); }
+    @computed get trimDuration() { return this.trimEnd - this.trimStart; }
     @computed get trimEnd() {
-        return this._trimming && this._trimEnd !== undefined ? this._trimEnd : NumCast(this.layoutDoc.clipEnd, this.duration);
+        return this._trimming !== AudioBox.ScopeNone && this._trimEnd !== undefined ? this._trimEnd : NumCast(this.layoutDoc.clipEnd, this.clipDuration);
     }
 
     @computed get mediaState():
@@ -113,13 +119,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
     @computed get rawDuration() {
         return NumCast(this.dataDoc[`${this.fieldKey}-duration`]);
     }
-    @computed get duration() {
-        return NumCast(this.layoutDoc.clipEnd, NumCast(this.layoutDoc.clipStart) + NumCast(this.dataDoc[`${this.fieldKey}-duration`])) - NumCast(this.layoutDoc.clipStart);
-        // NumCast(this.dataDoc[`${this.fieldKey}-duration`]);
-    }
-    @computed get trimDuration() {
-        return this.trimEnd - this.trimStart;
-    }
     @computed get anchorDocs() {
         return DocListCast(this.dataDoc[this.annotationKey]);
     }
@@ -269,7 +268,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                 this._ele.currentTime = start;
                 this._ele.play();
                 runInAction(() => (this.mediaState = "playing"));
-                if (endTime !== this.duration) {
+                if (endTime !== this.clipDuration) {
                     this._play = setTimeout(
                         () => {
                             this._ended = fullPlay ? true : this._ended;
@@ -309,7 +308,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
             const [{ result }] = await Networking.UploadFilesToServer(e.data);
             if (!(result instanceof Error)) {
                 this.props.Document[this.props.fieldKey] = new AudioField(result.accessPaths.agnostic.client);
-                if (this._trimEnd === undefined) this._trimEnd = this.duration;
+                if (this._trimEnd === undefined) this._trimEnd = this.clipDuration;
             }
         };
         this._recordStart = new Date().getTime();
@@ -359,9 +358,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
         this.dataDoc[this.fieldKey + "-duration"] =
             (new Date().getTime() - this._recordStart - this.pauseTime) / 1000;
         this.mediaState = "paused";
-        this._trimEnd = this.duration;
+        this._trimEnd = this.clipDuration;
         this.layoutDoc.clipStart = 0;
-        this.layoutDoc.clipEnd = this.duration;
+        this.layoutDoc.clipEnd = this.clipDuration;
         this._stream?.getAudioTracks()[0].stop();
         const ind = DocUtils.ActiveRecordings.indexOf(this);
         ind !== -1 && DocUtils.ActiveRecordings.splice(ind, 1);
@@ -378,7 +377,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
     // for play button
     Play = (e?: any) => {
         let start;
-        if (this._ended || this._ele!.currentTime === this.duration) {
+        if (this._ended || this._ele!.currentTime === this.clipDuration) {
             start = NumCast(this.layoutDoc.clipStart);
             this._ended = false;
         }
@@ -494,11 +493,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
 
     // shows trim controls
     @action
-    startTrim = () => {
+    startTrim = (scope: number) => {
         if (this.mediaState === "playing") {
             this.Pause();
         }
-        this._trimming = true;
+        this._trimming = scope;
     }
 
     // hides trim controls and displays new clip
@@ -510,7 +509,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
         this.layoutDoc.clipStart = this.trimStart;
         this.layoutDoc.clipEnd = this.trimEnd;
         this.setAnchorTime(Math.max(Math.min(this.trimEnd, this._ele!.currentTime), this.trimStart));
-        this._trimming = false;
+        this._trimming = AudioBox.ScopeNone;
     });
 
     @action
@@ -579,15 +578,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                 rawDuration={this.rawDuration}
 
                 // this edits the entire waveform when trimming is activated
-                clipStart={this._trimming ? 0 : this.clipStart}
-                clipEnd={this._trimming ? this.rawDuration : this.clipEnd}
-                clipDuration={this._trimming ? this.rawDuration : this.duration}
+                clipStart={this._trimming === AudioBox.ScopeAll ? 0 : this.clipStart}
+                clipEnd={this._trimming === AudioBox.ScopeAll ? this.rawDuration : this.clipEnd}
+                clipDuration={this._trimming === AudioBox.ScopeAll ? this.rawDuration : this.clipDuration}
                 // this edits just the current waveform clip when trimming is activated
                 // clipStart={this.clipStart}
                 // clipEnd={this.clipEnd}
                 // clipDuration={this.duration}
 
-                trimming={this._trimming}
+                trimming={this._trimming !== AudioBox.ScopeNone}
                 trimStart={this.trimStartFunc}
                 trimEnd={this.trimEndFunc}
                 trimDuration={this.trimDurationFunc}
@@ -596,6 +595,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
             />
         );
     }
+    onClipPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => {
+            if (doubleTap) {
+                this.startTrim(AudioBox.ScopeAll);
+            } else {
+                this._trimming !== AudioBox.ScopeNone ? this.finishTrim() : this.startTrim(AudioBox.ScopeClip);
+            }
+        }));
+    }
 
     render() {
         const interactive =
@@ -697,11 +705,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                                 </div>
                                 <div
                                     className="audiobox-buttons"
-                                    title={this._trimming ? "finish" : "trim"}
-                                    onClick={this._trimming ? this.finishTrim : this.startTrim}
+                                    title={this._trimming !== AudioBox.ScopeNone ? "finish" : "trim"}
+                                    onPointerDown={this.onClipPointerDown}
                                 >
                                     <FontAwesomeIcon
-                                        icon={this._trimming ? "check" : "cut"}
+                                        icon={this._trimming !== AudioBox.ScopeNone ? "check" : "cut"}
                                         size={"1x"}
                                     />
                                 </div>
@@ -719,14 +727,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                                 </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)))}
+                                    {formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.clipStart)))}
                                 </div>
                                 <div className="audioBox-total-time">
-                                    {this._trimming || !this._trimEnd ?
-                                        formatTime(Math.round(NumCast(this.duration)))
-                                        : formatTime(Math.round(NumCast(this.trimDuration)))}
+                                    {formatTime(Math.round(NumCast(this.clipDuration)))}
                                 </div>
                             </div>
                         </div>