Merge branch 'monika_animation' of https://github.com/browngraphicslab/Dash-Web into monika_animation

3 files changed, 52 insertions, 30 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 9e90cc764..fc1a0ec3b 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -326,15 +326,18 @@ export class Timeline extends React.Component<FieldViewProps> {
     @action
     toReadTime = (time: number): string => {
         time = time / 1000;
-        const inSeconds = Math.round((time * 100)) / 100;
+        const inSeconds = Math.round(time * 100) / 100;
+
+        // console.log(inSeconds)
         // var inSeconds = parseFloat(time.toFixed(2));
         // const inSeconds = (Math.floor(time) / 1000);
         const min: (string | number) = Math.floor(inSeconds / 60);
-        let sec: (string | number) = inSeconds % 60;
+        let sec: (string | number) = (Math.round((inSeconds % 60) * 100) / 100);
 
         if (Math.floor(sec / 10) === 0) {
             sec = "0" + sec;
         }
+        // sec = Number.parseFloat(sec).toFixed(2);
         return `${min}:${sec}`;
     }
 
@@ -434,6 +437,8 @@ export class Timeline extends React.Component<FieldViewProps> {
             lengthString = "";
         }
 
+        // let rightInfo = this.timeIndicator;
+
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
                 <div className="playbackControls">
@@ -453,15 +458,32 @@ export class Timeline extends React.Component<FieldViewProps> {
                         </div>
                     </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" 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>
+                        {this.timeIndicator(lengthString)}
                     </div>
                 </div>
             </div>
         );
     }
 
+    timeIndicator(lengthString: string) {
+        if (this.props.Document.isATOn) {
+            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>
+                    <div className="totalTime">1:40.07</div>
+                </>
+            );
+        }
+        else {
+            return (
+                <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>
+            );
+        }
+    }
+
     /**
      * manual time input (kinda broken right now)
      */
@@ -527,10 +549,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;
     }
 
     @observable private mapOfTracks: (Track | null)[] = [];
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index b8c639825..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,9 +132,6 @@ 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() {
@@ -139,27 +139,27 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         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">