From e310c0fdcef6ac71ee492470d4ac689cbb094167 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Sat, 8 Feb 2020 12:54:07 -0500
Subject: small changes

---
 src/client/views/animationtimeline/Timeline.tsx          | 15 +++++++--------
 src/client/views/animationtimeline/TimelineOverview.scss |  2 +-
 src/client/views/animationtimeline/TimelineOverview.tsx  |  8 ++++++--
 3 files changed, 14 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index f74d4c71e..5d5e78652 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -453,7 +453,7 @@ 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", display: this.props.Document.isATOn ? "flex" : "none" }}>{lengthString}</div>
-                        <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} />
+                        <input className="time-input" disabled 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%", display: !this.props.Document.isATOn ? "flex" : "none" }}>Current: {this.getCurrentTime()}</div>
                     </div>
                 </div>
@@ -466,12 +466,12 @@ export class Timeline extends React.Component<FieldViewProps> {
      */
     @action
     private onTimeInput = (e: React.KeyboardEvent) => {
-        if (e.keyCode === 13) {
-            let timeInput = this._timeInputRef.current!;
-            this._time = parseInt(timeInput.value, 10);
-            this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
-            this.props.Document.AnimationLength = this._time;
-        }
+        // if (e.keyCode === 13) {
+        //     let timeInput = this._timeInputRef.current!;
+        //     this._time = parseInt(timeInput.value, 10);
+        //     this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
+        //     this.props.Document.AnimationLength = this._time;
+        // }
     }
 
 
@@ -535,7 +535,6 @@ export class Timeline extends React.Component<FieldViewProps> {
      * 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.Document.isATOn);
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 283163ea7..b54399307 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -72,7 +72,7 @@ $timelineDark: #77a1aa;
     position: relative;
     padding: 0px;
     margin: 0px;
-    width: 100%;
+    // width: 100%;
     height: 4px;
     background-color: $timelineColor;
     border-radius: 20px;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 7ff78955e..5d6378068 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -58,7 +58,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let width = $("#timelineOverview").width();
         // console.log($("timelineOverview"))
         if (width) this.overviewBarWidth = width;
-        else this.overviewBarWidth = 0;
+        // else this.overviewBarWidth = 0;
 
         // console.log(this.overviewBarWidth)
     }
@@ -95,10 +95,12 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onScrubberDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
+        if (!this.props.isAuthoring) {
         document.removeEventListener("pointermove", this.onScrubberMove);
         document.removeEventListener("pointerup", this.onScrubberUp);
         document.addEventListener("pointermove", this.onScrubberMove);
         document.addEventListener("pointerup", this.onScrubberUp);
+        }
     }
 
     @action
@@ -107,8 +109,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         e.stopPropagation();
         let scrubberRef = this._scrubberRef.current!;
         let left = scrubberRef.getBoundingClientRect().left;
+        // left = e.screenX;
         let offsetX = Math.round(e.clientX - left);
         this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX);
+        // this.props.changeCurrentBarX(e.screenX)
     }
 
     @action
@@ -154,7 +158,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 </div>
             </div>
         ] : [
-                <div className="timeline-play-bar">
+                <div className="timeline-play-bar" style={{ width: this.overviewBarWidth }}>
                     <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
                 <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div>
-- 
cgit v1.2.3-70-g09d2