From 8722fe67029f76f572eacd6e02d623690ca94793 Mon Sep 17 00:00:00 2001
From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com>
Date: Sun, 26 Jul 2020 22:08:13 -0700
Subject: added options to hide markers/labels

---
 src/client/documents/Documents.ts   |   1 +
 src/client/views/nodes/AudioBox.tsx | 110 ++++++++++++++++++++----------------
 src/fields/ScriptField.ts           |   1 -
 3 files changed, 62 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 170426db3..ffc22292e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -562,6 +562,7 @@ export namespace Docs {
 
             viewDoc.author = Doc.CurrentUserEmail;
             viewDoc.type !== DocumentType.LINK && DocUtils.MakeLinkToActiveAudio(viewDoc);
+            console.log("audio link!");
 
             return Doc.assign(viewDoc, delegateProps, true);
         }
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index bfa48578b..0cab0fc61 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -176,7 +176,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                 if (seekTimeInSeconds > -1) {
                     setTimeout(() => this.playFrom(0), -seekTimeInSeconds * 1000);
                 } else {
-                    console.log("dude");
                     this.pause();
                 }
             } else if (seekTimeInSeconds <= this._ele.duration) {
@@ -227,7 +226,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     specificContextMenu = (e: React.MouseEvent): void => {
         const funcs: ContextMenuProps[] = [];
         funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when document selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" });
-
+        funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" })
+        funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" })
+        funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" })
         ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
     }
 
@@ -433,8 +434,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                 console.log(counter);
             }
         }
-        console.log(counter);
-        console.log(this.dataDoc.markerAmount);
 
         if (this.dataDoc.markerAmount < counter) {
             this.dataDoc.markerAmount = counter;
@@ -503,9 +502,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     labelScript = () => AudioBox.LabelScript;
 
     // see if time is encapsulated by comparing time on both sides (for moving onto a new row in the timeline for the markers)
+    check = (e: React.PointerEvent) => {
+        if (e.target as HTMLElement === document.getElementById("timeline")) {
+            return true;
+        }
+    }
 
     render() {
-        trace();
+        //trace();
         const interactive = this.active() ? "-interactive" : "";
         return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}>
             {!this.path ?
@@ -568,56 +572,56 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                                 }
                             }}>
                             {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => {
-
                                 // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false });
                                 let rect;
                                 (!m.isLabel) ?
-
-                                    rect =
-                                    <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} title={`${this.formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${this.formatTime(Math.round(NumCast(m.audioEnd)))}`} key={i} id={"audiobox-marker-container1"} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / NumCast(this.dataDoc.duration, 1) * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 2) * 100}%`, top: `${this.isOverlap(m, i) * 1 / (this.dataDoc.markerAmount + 2) * 100}%` }} onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} >
-                                        <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div>
-                                        <DocumentView {...this.props}
-                                            Document={m}
-                                            pointerEvents={true}
-                                            NativeHeight={returnZero}
-                                            NativeWidth={returnZero}
-                                            rootSelected={returnFalse}
-                                            LayoutTemplate={undefined}
-                                            ContainingCollectionDoc={this.props.Document}
-                                            dontRegisterView={true}
-                                            removeDocument={undefined}
-                                            parentActive={returnTrue}
-                                            onClick={this.rangeScript}
-                                            ignoreAutoHeight={false}
-                                            bringToFront={emptyFunction}
-                                            scriptContext={this} />
-                                        {/* <LabelBox {... this.props} Document={m} /> */}
-                                        {/* <div className="click" onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)) }}></div> */}
-                                        <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div>
-                                    </div>
+                                    (this.layoutDoc.hideMarkers) ? (null) :
+                                        rect =
+                                        <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} title={`${this.formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${this.formatTime(Math.round(NumCast(m.audioEnd)))}`} key={i} id={"audiobox-marker-container1"} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / NumCast(this.dataDoc.duration, 1) * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 2) * 100}%`, top: `${this.isOverlap(m, i) * 1 / (this.dataDoc.markerAmount + 2) * 100}%` }} onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} >
+                                            <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div>
+                                            <DocumentView {...this.props}
+                                                Document={m}
+                                                pointerEvents={true}
+                                                NativeHeight={returnZero}
+                                                NativeWidth={returnZero}
+                                                rootSelected={returnFalse}
+                                                LayoutTemplate={undefined}
+                                                ContainingCollectionDoc={this.props.Document}
+                                                dontRegisterView={true}
+                                                removeDocument={undefined}
+                                                parentActive={returnTrue}
+                                                onClick={this.layoutDoc.playOnClick ? this.rangeScript : undefined}
+                                                ignoreAutoHeight={false}
+                                                bringToFront={emptyFunction}
+                                                scriptContext={this} />
+                                            {/* <LabelBox {... this.props} Document={m} /> */}
+                                            {/* <div className="click" onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)) }}></div> */}
+                                            <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div>
+                                        </div>
                                     :
-                                    rect =
-                                    <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container"} key={i} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%` }}>
-                                        <DocumentView {...this.props}
-                                            Document={m}
-                                            pointerEvents={true}
-                                            NativeHeight={returnZero}
-                                            NativeWidth={returnZero}
-                                            rootSelected={returnFalse}
-                                            LayoutTemplate={undefined}
-                                            ContainingCollectionDoc={this.props.Document}
-                                            dontRegisterView={true}
-                                            removeDocument={undefined}
-                                            parentActive={returnTrue}
-                                            onClick={this.labelScript}
-                                            ignoreAutoHeight={false}
-                                            bringToFront={emptyFunction}
-                                            scriptContext={this} />
-                                    </div>;
+                                    (this.layoutDoc.hideLabels) ? (null) :
+                                        rect =
+                                        <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container"} key={i} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%` }}>
+                                            <DocumentView {...this.props}
+                                                Document={m}
+                                                pointerEvents={true}
+                                                NativeHeight={returnZero}
+                                                NativeWidth={returnZero}
+                                                rootSelected={returnFalse}
+                                                LayoutTemplate={undefined}
+                                                ContainingCollectionDoc={this.props.Document}
+                                                dontRegisterView={true}
+                                                removeDocument={undefined}
+                                                parentActive={returnTrue}
+                                                onClick={this.layoutDoc.playOnClick ? this.labelScript : undefined}
+                                                ignoreAutoHeight={false}
+                                                bringToFront={emptyFunction}
+                                                scriptContext={this} />
+                                        </div>;
                                 return rect;
                             })}
                             {DocListCast(this.dataDoc.links).map((l, i) => {
-                                console.log("hi");
+
                                 let la1 = l.anchor1 as Doc;
                                 let la2 = l.anchor2 as Doc;
                                 let linkTime = NumCast(l.anchor2_timecode);
@@ -627,6 +631,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                                     linkTime = NumCast(l.anchor1_timecode);
                                 }
 
+                                if (la1.audioStart) {
+                                    linkTime = NumCast(la1.audioStart);
+                                }
+
+                                if (la2.audioStart) {
+                                    linkTime = NumCast(la2.audioStart);
+                                }
+
 
                                 return !linkTime ? (null) :
                                     <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container"} key={l[Id]} style={{ left: `${linkTime / NumCast(this.dataDoc.duration, 1) * 100}%` }} onClick={e => e.stopPropagation()}>
@@ -648,7 +660,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                                             onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); this.pause(); e.stopPropagation(); e.preventDefault(); } }} />
                                     </div>;
                             })}
-                            <div className="audiobox-current" id="current" onClick={e => { e.stopPropagation(); e.preventDefault(); console.log("hi"); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} />
+                            <div className="audiobox-current" id="current" onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} />
                             {this.audio}
 
                         </div>
diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts
index 4604a2132..bd08b2f32 100644
--- a/src/fields/ScriptField.ts
+++ b/src/fields/ScriptField.ts
@@ -53,7 +53,6 @@ async function deserializeScript(script: ScriptField) {
     if (script.script.originalScript === 'convertToButtons(dragData)') {
         return (script as any).script = (ScriptField.ConvertToButtons ?? (ScriptField.ConvertToButtons = ComputedField.MakeFunction('convertToButtons(dragData)', { dragData: "DocumentDragData" })))?.script;
     }
-    console.log(script.script.originalScript);
     const captures: ProxyField<Doc> = (script as any).captures;
     if (captures) {
         const doc = (await captures.value())!;
-- 
cgit v1.2.3-70-g09d2