From da2157616ca4e614dacbf26fb5fa6758b51a209e Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Wed, 19 Jun 2019 14:35:51 -0400
Subject: addable track

---
 src/client/views/nodes/Timeline.tsx | 90 +++++++++++++++++++++++++++++++++++--
 1 file changed, 86 insertions(+), 4 deletions(-)

(limited to 'src/client/views/nodes/Timeline.tsx')

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index f18d8f2a0..91e308f89 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -3,21 +3,103 @@ import * as ReactDOM from "react-dom";
 import "./Timeline.scss"; 
 import { CollectionSubView } from "../collections/CollectionSubView";
 import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
-import { observer } from "mobx-react";
+import { observer} from "mobx-react";
 import { Track } from "./Track";
-
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction } from "mobx";
+import { Cast } from "../../../new_fields/Types";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
+import { Self } from "../../../new_fields/FieldSymbols";
+import { Doc } from "../../../new_fields/Doc";
 
 @observer
 export class Timeline extends CollectionSubView(Document){
 
+    @observable private _scrubberbox = React.createRef<HTMLDivElement>()
+    @observable private _currentBarX:number = 0; 
+    @observable private _windSpeed:number = 1; 
+    @observable private _isPlaying:boolean = false; 
+    @observable private _boxLength:number = 0; 
+    @observable private _nodes:List<Doc> = new List<Doc>(); 
+    
+
+    private _reactionDisposers: IReactionDisposer[] = [];
+
+
+    @action
+    componentDidMount(){
+        let scrubber = this._scrubberbox.current!; 
+        this._boxLength = scrubber.getBoundingClientRect().width; 
+        let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
+        if (!children) {
+            return;
+        }
+        let childrenList = ((children[Self] as any).__fields) as List<Doc>;
+        this._nodes = childrenList;
+    }
+
+    componentWillUnmount(){
+
+
+    }
+
+    @action
+    onPlay = async (e: React.MouseEvent) => {
+        if (this._isPlaying) {
+            this._isPlaying = false;
+        } else {
+            this._isPlaying = true;
+            this.changeCurrentX();
+        }
+    }
+
+    @action
+    changeCurrentX = () => {
+        if (this._currentBarX >= this._boxLength && this._isPlaying) {
+            this._currentBarX = 0;
+        }
+        if (this._currentBarX <= this._boxLength && this._isPlaying) {
+            this._currentBarX = this._currentBarX + this._windSpeed;
+            setTimeout(this.changeCurrentX, 15);
+        }
+    }
+
+    @action
+    windForward = (e: React.MouseEvent) => {
+        if (this._windSpeed < 64) { //max speed is 32
+            this._windSpeed = this._windSpeed * 2;
+        }
+    }
+
+    @action
+    windBackward = (e: React.MouseEvent) => {
+        if (this._windSpeed > 1 / 16) { // min speed is 1/8
+            this._windSpeed = this._windSpeed / 2;
+        }
+    }
+
+    @action 
+    onScrubberDown = (e:React.PointerEvent) => {
+        let scrubberbox = this._scrubberbox.current!;
+        let left = scrubberbox.getBoundingClientRect().left;
+        let offsetX = Math.round(e.clientX - left);
+        this._currentBarX = offsetX; 
+    }
+
+
     render(){
         return (
             <div className="timeline-container">
                 <div className="toolbox">
-                    <button> Play </button>
+                <button onClick={this.windBackward}> {"<"}  </button>
+                    <button onClick={this.onPlay}> Play </button>
+                    <button onClick={this.windForward}> {">"} </button>
+                </div>  
+                <div className="scrubberbox" onPointerDown={this.onScrubberDown} ref ={this._scrubberbox}>
+                    <div className="scrubber" style={{transform:`translate(${this._currentBarX}px)`}}></div>
                 </div>
                 <div className="trackbox">
-                    <Track {...this.props}/>
+                    {this._nodes.map(doc => {return <Track {...this.props}/>})}
                 </div> 
             </div>
         ); 
-- 
cgit v1.2.3-70-g09d2