From 9e4d644c5977c781b4822ba065cec6e92977de10 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 5 Feb 2020 10:16:42 -0500
Subject: about to pull

---
 src/client/views/animationtimeline/Timeline.scss   | 28 ++++++++++++++++++++--
 src/client/views/animationtimeline/Timeline.tsx    | 21 +++++++++++++---
 .../views/animationtimeline/TimelineOverview.scss  |  9 ++++++-
 .../views/animationtimeline/TimelineOverview.tsx   | 19 +++++++--------
 4 files changed, 61 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index dbdade03f..ce8c845df 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -43,6 +43,8 @@ $timelineDark: #77a1aa;
         .time-box {
             margin-left: 5px;
             display: flex;
+            justify-content: center;
+            align-items: center;
         }
 
         .mode-box {
@@ -61,6 +63,12 @@ $timelineDark: #77a1aa;
         }
     }
 
+    .overview-tool {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     .animation-text {
         // font-size: 16px;
         height: auto;
@@ -179,13 +187,14 @@ $timelineDark: #77a1aa;
 
         .trackbox {
             top: 30px;
-            // TODO: where is this 30px coming from?
             height: calc(100% - 30px);
             // height: 100%;
+            // height: 100%;
             width: 100%;
             border-top: 2px solid black;
             border-bottom: 2px solid black;
             overflow: hidden;
+            // overflow-y: scroll;
             background-color: white;
             position: absolute;
             // box-shadow: -10px 0px 10px 10px red;
@@ -193,10 +202,25 @@ $timelineDark: #77a1aa;
 
     }
 
+    .currentTime {
+        // background: red;
+        font-size: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        top: 40px;
+        position: relative;
+        width: 100px;
+        margin-left: 20px;
+    }
+
     .title-container {
-        margin-top: 80px;
+        // margin-top: 80px;
+        margin-top: 40px;
         margin-left: 20px;
         height: calc(100% - 100px - 30px);
+        // height: 100%;
         width: 100px;
         background-color: white;
         overflow: hidden;
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index f0ca1c0ab..ae2dfafc9 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -312,6 +312,7 @@ export class Timeline extends React.Component<FieldViewProps> {
         e.preventDefault();
         e.stopPropagation();
         let offset = e.clientY - this._timelineContainer.current!.getBoundingClientRect().bottom;
+        // let offset = 0;
         if (this._containerHeight + offset <= this.MIN_CONTAINER_HEIGHT) {
             this._containerHeight = this.MIN_CONTAINER_HEIGHT;
         } else if (this._containerHeight + offset >= this.MAX_CONTAINER_HEIGHT) {
@@ -326,7 +327,10 @@ export class Timeline extends React.Component<FieldViewProps> {
      */
     @action
     toReadTime = (time: number): string => {
-        const inSeconds = time / 1000;
+        time = time / 1000;
+        var inSeconds = Math.round((time * 100)) / 100;
+        // var inSeconds = parseFloat(time.toFixed(2));
+        // const inSeconds = (Math.floor(time) / 1000);
         let min: (string | number) = Math.floor(inSeconds / 60);
         let sec: (string | number) = inSeconds % 60;
 
@@ -451,7 +455,8 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }}>{lengthString}</div>
-                        <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                        <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: !this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                        <div style={{ width: "100%", backgroundColor: "red", display: !this.props.Document.isATOn ? "flex" : "none" }}>Hello there</div>
                     </div>
                 </div>
             </div>
@@ -541,13 +546,22 @@ export class Timeline extends React.Component<FieldViewProps> {
         }
     }
 
+    // @computed
+    getCurrentTime = () => {
+        let current = KeyframeFunc.convertPixelTime(this._currentBarX, "mili", "time", this._tickSpacing, this._tickIncrement);
+        // console.log(this._currentBarX)
+        return this.toReadTime(current); ``
+        // return (Math.floor(current) / 1000)
+        // return current / 1000.0;
+    }
+
 
     /**
      * if you have any question here, just shoot me an email or text. 
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
      */
     render() {
-        // console.log(this.props.PanelWidth());
+        console.log(this.props.Document.isATOn);
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
@@ -568,6 +582,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                                     {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} />)}
                                 </div>
                             </div>
+                            <div className="currentTime">Current: {this.getCurrentTime()}</div>
                             <div key="timeline_title" className="title-container" ref={this._titleContainer}>
                                 {DocListCast(this.children).map(doc => <div style={{ height: `${(this._titleHeight)}px` }} className="datapane" onPointerOver={() => { Doc.BrushDoc(doc); }} onPointerOut={() => { Doc.UnBrushDoc(doc); }}><p>{doc.title}</p></div>)}
                             </div>
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index a0b9d462b..283163ea7 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -8,6 +8,13 @@ $timelineDark: #77a1aa;
     margin-right: 10px;
 }
 
+.timeline-flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
 .timeline-overview-container {
     // padding: 0px;
     margin-right: 5px;
@@ -93,7 +100,7 @@ $timelineDark: #77a1aa;
     height: 4px;
     width: 0px;
     z-index: 1000;
-    background-color: $timelineColor;
+    background-color: $timelineDark;
     border-radius: 20px;
     margin-top: -4px;
     cursor: pointer;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 9a881264f..65fd8ff62 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -56,8 +56,11 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @action
     setOverviewWidth() {
         let width = $("#timelineOverview").width();
+        // console.log($("timelineOverview"))
         if (width) this.overviewBarWidth = width;
         else this.overviewBarWidth = 0;
+
+        // console.log(this.overviewBarWidth)
     }
 
     @action
@@ -124,20 +127,14 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         this.visibleTime = vis;
         this.currentX = x;
         this.visibleStart = start;
+        // console.log("getting times")
+        // console.log(x)
+        // console.log(start)
     }
 
     render() {
-
+        this.setOverviewWidth();
         this.getTimes();
-        // calculates where everything should fall based on its size
-        // let percentVisible = this.props.visibleLength / this.props.totalLength;
-        // let visibleBarWidth = percentVisible * this.overviewBarWidth;
-
-        // let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
-        // let scrubberStart = percentScrubberStart * this.overviewBarWidth;
-
-        // let percentBarStart = this.props.visibleStart / this.props.totalLength;
-        // let barStart = percentBarStart * this.overviewBarWidth;
 
         let percentVisible = this.visibleTime / this.props.time;
         let visibleBarWidth = percentVisible * this.overviewBarWidth;
@@ -163,9 +160,11 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div>
             ];
         return (
+            <div className = "timeline-flex">
             <div className="timelineOverview-bounding">
                 {timeline}
             </div>
+            </div>
         );
     }
 
-- 
cgit v1.2.3-70-g09d2