done with ui bugs

3 files changed, 30 insertions, 29 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index ce8c845df..a99d017f4 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -42,14 +42,17 @@ $timelineDark: #77a1aa;
 
         .time-box {
             margin-left: 5px;
+            min-width: 140px;
             display: flex;
             justify-content: center;
             align-items: center;
+            // grid-column-start: line2;
         }
 
         .mode-box {
             display: flex;
             margin-left: 5px;
+            // grid-column-start: line3;
         }
 
         .overview-box {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index e0f70dd43..3c4c5c93f 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -458,7 +458,6 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         {this.timeIndicator(lengthString)}
-                        {/* {rightInfo} */}
                     </div>
                 </div>
             </div>
@@ -470,13 +469,16 @@ export class Timeline extends React.Component<FieldViewProps> {
             return (
                 <>
                     <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" 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 className="totalTime">1:40.07</div>
                 </>
             );
         }
         else {
             return (
-                <div style={{ width: "100%", display: !this.props.Document.isATOn ? "flex" : "none" }}>Current: {this.getCurrentTime()}</div>
+                <div style={{ flexDirection: "column" }}>
+                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Current: ${this.getCurrentTime()}`}</div>
+                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: 1:40.07`}</div>
+                </div>
             );
         }
     }
@@ -543,10 +545,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     // @computed
     getCurrentTime = () => {
         const 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;
     }
 
 
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 66f6a9482..94bbe7074 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -27,6 +27,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @observable private _visibleRef = React.createRef<HTMLDivElement>();
     @observable private _scrubberRef = React.createRef<HTMLDivElement>();
     @observable private overviewBarWidth: number = 0;
+    @observable private playbarWidth: number = 0;
+    @observable private activeOverviewWidth: number = 0;
     @observable private _authoringReaction?: IReactionDisposer;
     @observable private visibleTime: number = 0;
     @observable private currentX: number = 0;
@@ -55,12 +57,17 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     setOverviewWidth() {
-        const width = $("#timelineOverview").width();
-        // console.log($("timelineOverview"))
-        if (width) this.overviewBarWidth = width;
-        // else this.overviewBarWidth = 0;
-
-        // console.log(this.overviewBarWidth)
+        const width1 = $("#timelineOverview").width();
+        const width2 = $("#timelinePlay").width();
+        if (width1 && width1 !== 0) this.overviewBarWidth = width1;
+        if (width2 && width2 !== 0) this.playbarWidth = width2;
+
+        if (this.props.isAuthoring) {
+            this.activeOverviewWidth = this.overviewBarWidth;
+        }
+        else {
+            this.activeOverviewWidth = this.playbarWidth;
+        }
     }
 
     @action
@@ -78,9 +85,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         e.stopPropagation();
         e.preventDefault();
         const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
-        // let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
         this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
-        // this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
     }
 
     @action
@@ -95,12 +100,10 @@ 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
@@ -110,7 +113,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const scrubberRef = this._scrubberRef.current!;
         const left = scrubberRef.getBoundingClientRect().left;
         const offsetX = Math.round(e.clientX - left);
-        this.props.changeCurrentBarX((((offsetX) / this.overviewBarWidth) * this.props.totalLength) + this.props.currentBarX);
+        this.props.changeCurrentBarX((((offsetX) / this.activeOverviewWidth) * this.props.totalLength) + this.props.currentBarX);
     }
 
     @action
@@ -129,38 +132,34 @@ 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() {
-        console.log("RERENDERED!"); 
         this.setOverviewWidth();
         this.getTimes();
 
         const percentVisible = this.visibleTime / this.props.time;
-        const visibleBarWidth = percentVisible * this.overviewBarWidth;
+        const visibleBarWidth = percentVisible * this.activeOverviewWidth;
 
         const percentScrubberStart = this.currentX / this.props.time;
-        const scrubberStart = percentScrubberStart * this.overviewBarWidth;
+        const scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
 
         const percentBarStart = this.visibleStart / this.props.time;
-        const barStart = percentBarStart * this.overviewBarWidth;
+        const barStart = percentBarStart * this.activeOverviewWidth;
 
         const timeline = this.props.isAuthoring ? [
 
-            <div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
+            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
                 <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px`}} onPointerDown={this.onScrubberDown}>
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                 </div>
             </div>
         ] : [
-                <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) * this.overviewBarWidth}px` }} onPointerDown={this.onScrubberDown}></div>
+                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay">
+                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
-                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px` }}></div>
+                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.playbarWidth}px` }}></div>
             ];
         return (
             <div className="timeline-flex">