aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/Timeline.tsx
diff options
context:
space:
mode:
authorandrewdkim <adkim414@gmail.com>2019-06-19 14:35:51 -0400
committerandrewdkim <adkim414@gmail.com>2019-06-19 14:35:51 -0400
commitda2157616ca4e614dacbf26fb5fa6758b51a209e (patch)
tree1186e684697bbaca190ec7b536f79668772fc90c /src/client/views/nodes/Timeline.tsx
parent454dfcbcc7cf9ac8b859c3457c6e75efb1a2b12f (diff)
addable track
Diffstat (limited to 'src/client/views/nodes/Timeline.tsx')
-rw-r--r--src/client/views/nodes/Timeline.tsx90
1 files changed, 86 insertions, 4 deletions
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>
);