1 files changed, 20 insertions, 10 deletions
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 38b823cbc..4741969dc 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -6,11 +6,11 @@ import "./TimelineOverview.scss";
 
 
 interface TimelineOverviewProps{
-    scale: number; 
     totalLength: number; 
     visibleLength:number; 
     visibleStart:number;
-    currentBarX:number; 
+    currentBarX:number;
+    isAuthoring: boolean;  
     changeCurrentBarX: (pixel:number) => void; 
     movePanX: (pixel:number) => any;
 }
@@ -37,8 +37,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onPanX = (e: PointerEvent) => {
         e.stopPropagation(); 
         e.preventDefault(); 
-        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH * this.props.scale) + e.movementX; 
-        this.props.movePanX((movX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength); 
+        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH) + e.movementX; 
+        this.props.movePanX((movX / (this.DEFAULT_WIDTH )) * this.props.totalLength); 
     }
 
     @action
@@ -66,7 +66,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let scrubberRef = this._scrubberRef.current!; 
         let left = scrubberRef.getBoundingClientRect().left; 
         let offsetX = Math.round(e.clientX - left); 
-        this.props.changeCurrentBarX(((offsetX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength) + this.props.currentBarX); 
+        this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); 
     }
 
     @action
@@ -78,12 +78,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 
     render(){
+        let timeline = this.props.isAuthoring ? [
+            <div key="timeline-overview-container" className="timeline-overview-container">
+                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${(Math.round(this.props.visibleStart) / Math.round(this.props.totalLength)) * 296}px`, width:`${(Math.round(this.props.visibleLength) / Math.round(this.props.totalLength)) * 296}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) * 294}px`}} onPointerDown={this.onScrubberDown}>
+                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+                </div>            
+            </div>
+        ] : [
+            <div className="timeline-play-bar">
+                <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>
+        ]; 
         return(
-            <div key="timeline-overview-container" className="timeline-overview-container" style={{height: `${this.DEFAULT_HEIGHT * this.props.scale * 0.8}px` ,width:`${this.DEFAULT_WIDTH * this.props.scale}`}}>
-                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* this.DEFAULT_WIDTH * this.props.scale}px`, width:`${(this.props.visibleLength / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`}} onPointerDown={this.onPointerDown}></div>
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`, marginTop: `${-this.DEFAULT_HEIGHT * this.props.scale * 0.8}px`}} onPointerDown={this.onScrubberDown}>
-                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head" style={{}}></div>
-                </div>
+            <div>
+                {timeline}
             </div>
         ); 
     }