added change markers and formatted time and added resizer

4 files changed, 178 insertions, 4 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index b1da40287..8eb92f126 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -118,7 +118,7 @@
 
             .audiobox-timeline {
                 position: relative;
-                height: 100%;
+                height: 80%;
                 width: 100%;
                 background: white;
                 border: gray solid 1px;
@@ -184,6 +184,8 @@
                     background: gray;
                     border-radius: 5px;
                     box-shadow: black 2px 2px 1px;
+                    resize: horizontal;
+                    overflow: auto;
 
                     .audiobox-marker {
                         position: relative;
@@ -216,6 +218,15 @@
                     .audio-marker:hover {
                         border: orange 2px solid;
                     }
+
+                    .resizer {
+                        position: absolute;
+                        right: 0;
+                        cursor: ew-resize;
+                        height: 100%;
+                        width: 1px;
+                        z-index: 100;
+                    }
                 }
 
                 .audiobox-marker-container1:hover,
@@ -234,6 +245,20 @@
                     }
                 }
             }
+
+            .current-time {
+                position: absolute;
+                font-size: 12;
+                top: 70%;
+                left: 23%;
+            }
+
+            .total-time {
+                position: absolute;
+                left: 80%;
+                top: 70%;
+                font-size: 12;
+            }
         }
     }
 }
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 9a2baf85d..4dbcf7497 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -23,6 +23,7 @@ import { Networking } from "../../Network";
 import { LinkAnchorBox } from "./LinkAnchorBox";
 import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 import { RichTextField } from "../../../fields/RichTextField";
+import { AudioResizer } from "./AudioResizer";
 
 
 // testing testing 
@@ -60,6 +61,9 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
     _start: number = 0;
     _hold: boolean = false;
 
+    private _isPointerDown = false;
+    private _currMarker: any;
+
     @observable private _duration = 0;
     @observable private _rect: Array<any> = []
     @observable private _markers: Array<any> = [];
@@ -300,6 +304,85 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
         this._start = 0;
     }
 
+    onPointerDown = (e: React.PointerEvent, m: any): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        this._isPointerDown = true;
+        console.log("click");
+        this._currMarker = m;
+
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointerup", this.onPointerUp);
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        this._isPointerDown = false;
+
+        const rect = (e.target as any).getBoundingClientRect();
+        this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
+
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        console.log("drag");
+
+        if (!this._isPointerDown) {
+            return;
+        }
+
+        // let resize = document.getElementById("audiobox-marker-container1");
+
+        const rect = (e.target as any).getBoundingClientRect();
+        // let newWidth = parseFloat(`${(e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration)}%`);
+
+        // if (resize) {
+        //     console.log(parseFloat(resize.style.width));
+        //     console.log(newWidth);
+        //     console.log(e.movementX);
+        //     if (e.movementX < 0) {
+        //         resize.style.width = `${parseFloat(resize.style.width) - (newWidth)}%`;
+        //     } else {
+        //         resize.style.width = `${parseFloat(resize.style.width) + (newWidth)}%`;
+        //     }
+        // }
+
+        let newTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
+
+        this.changeMarker(this._currMarker, newTime);
+    }
+
+    @action
+    changeMarker = (m: any, time: any) => {
+        for (let i = 0; i < this._markers.length; i++) {
+            if (this.isSame(this._markers[i], m)) {
+                this._markers[i][1] = time;
+            }
+        }
+    }
+
+    isSame = (m1: any, m2: any) => {
+        if (m1[0] == m2[0] && m1[1] == m2[1]) {
+            return true;
+        }
+        return false;
+    }
+
+    formatTime = (time: number) => {
+        let hours = Math.floor(time / 60 / 60);
+        let minutes = Math.floor(time / 60) - (hours * 60);
+        let seconds = time % 60;
+
+        return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+    }
+
     render() {
         const interactive = this.active() ? "-interactive" : "";
         return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}>
@@ -357,13 +440,14 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
                                 }
                             }}>
                             {this._markers.map((m, i) => {
-                                let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false });
+                                // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false });
                                 let rect;
                                 (m.length > 1) ?
 
                                     rect =
-                                    <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} key={i} style={{ left: `${m[0] / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(m[1] - m[0]) / NumCast(this.dataDoc.duration, 1) * 100}%` }} onClick={e => { this.playFrom(m[0], m[1]); e.stopPropagation() }}>
+                                    <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} key={i} id={"audiobox-marker-container1"} style={{ left: `${m[0] / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(m[1] - m[0]) / NumCast(this.dataDoc.duration, 1) * 100}%` }} onClick={e => { this.playFrom(m[0], m[1]); e.stopPropagation() }} >
                                         {/* <FormattedTextBox {...this.props} key={"label" + i} Document={text} /> */}
+                                        <div className="resizer" onPointerDown={e => this.onPointerDown(e, m)}></div>
                                     </div>
                                     :
                                     rect =
@@ -372,7 +456,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
                                             Document={text}
                                             parentActive={returnTrue} /> */}
                                     </div>;
-                                return rect
+                                return rect;
                             })}
                             {DocListCast(this.dataDoc.links).map((l, i) => {
                                 let la1 = l.anchor1 as Doc;
@@ -408,6 +492,12 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
                             <div className="audiobox-current" style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%` }} />
                             {this.audio}
                         </div>
+                        <div className="current-time">
+                            {this.formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
+                        </div>
+                        <div className="total-time">
+                            {this.formatTime(Math.round(NumCast(this.layoutDoc.duration)))}
+                        </div>
                     </div>
                 </div>
             }
diff --git a/src/client/views/nodes/AudioResizer.scss b/src/client/views/nodes/AudioResizer.scss
new file mode 100644
index 000000000..892ad21e7
--- /dev/null
+++ b/src/client/views/nodes/AudioResizer.scss
@@ -0,0 +1,11 @@
+.resizer {
+    width: 0px;
+    height: 100%;
+    position: absolute;
+    right: 0px;
+    z-index: 999;
+    cursor: e-resize;
+    content: " ";
+    display: inline-block;
+    border-left: 20px solid transparent;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioResizer.tsx b/src/client/views/nodes/AudioResizer.tsx
new file mode 100644
index 000000000..f9ab8353f
--- /dev/null
+++ b/src/client/views/nodes/AudioResizer.tsx
@@ -0,0 +1,48 @@
+import { observer } from "mobx-react"
+import React = require("react");
+import "./AudioResizer.scss";
+
+@observer
+export class AudioResizer extends React.Component {
+    private _isPointerDown = false;
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        this._isPointerDown = true;
+        console.log("click");
+
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointerup", this.onPointerUp);
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        this._isPointerDown = false;
+
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        console.log("drag");
+
+        if (!this._isPointerDown) {
+            return;
+        }
+
+        let resize = document.getElementById("resizer");
+        if (resize) {
+            resize.style.right += e.movementX;
+        }
+    }
+
+    render() {
+        return <div className="resizer" onPointerDown={this.onPointerDown}></div>
+    }
+}
\ No newline at end of file