fixed width

2 files changed, 25 insertions, 23 deletions

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index d27990bd6..b1777bfa0 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -538,7 +538,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = "0px";
             this.props.Document.isATOn = true;
             this._isAuthoring = true;
-            this.toAuthoring(); 
+            this.toAuthoring();
         }
     }
 
@@ -561,37 +561,37 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     @action
     findLongestTime = () => {
-        let longestTime:number = 0; 
+        let longestTime: number = 0;
         this.mapOfTracks.forEach(track => {
             if (track) {
                 const lastTime = track.getLastRegionTime();
-                if (this.children.length !== 0 ){
-                    if (longestTime <= lastTime){
-                        longestTime = lastTime; 
+                if (this.children.length !== 0) {
+                    if (longestTime <= lastTime) {
+                        longestTime = lastTime;
                     }
                 }
             } else {
                 //TODO: remove undefineds and duplicates
             }
         });
-        console.log(longestTime); 
-        return longestTime; 
+        // console.log(longestTime); 
+        return longestTime;
     }
 
-    @action 
+    @action
     toAuthoring = () => {
-        let longestTime = this.findLongestTime(); 
+        let longestTime = this.findLongestTime();
         if (longestTime === 0) longestTime = 1;
-        const adjustedTime = Math.ceil(longestTime / 100000) * 100000; 
-        console.log(adjustedTime); 
-        this._totalLength = KeyframeFunc.convertPixelTime(adjustedTime, "mili", "pixel", this._tickSpacing, this._tickIncrement); 
-        this._time = adjustedTime; 
+        const adjustedTime = Math.ceil(longestTime / 100000) * 100000;
+        // console.log(adjustedTime); 
+        this._totalLength = KeyframeFunc.convertPixelTime(adjustedTime, "mili", "pixel", this._tickSpacing, this._tickIncrement);
+        this._time = adjustedTime;
     }
 
-    @action 
+    @action
     toPlay = () => {
-        const longestTime = this.findLongestTime(); 
-        this._time = longestTime; 
+        const longestTime = this.findLongestTime();
+        this._time = longestTime;
         this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
     }
 
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index a587e1138..e3a276737 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -26,6 +26,8 @@ interface TimelineOverviewProps {
 export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @observable private _visibleRef = React.createRef<HTMLDivElement>();
     @observable private _scrubberRef = React.createRef<HTMLDivElement>();
+    @observable private authoringContainer = React.createRef<HTMLDivElement>();
+    @observable private playbackContainer = React.createRef<HTMLDivElement>();
     @observable private overviewBarWidth: number = 0;
     @observable private playbarWidth: number = 0;
     @observable private activeOverviewWidth: number = 0;
@@ -57,8 +59,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     setOverviewWidth() {
-        const width1 = $("#timelineOverview").width();
-        const width2 = $("#timelinePlay").width();
+        const width1 = this.authoringContainer.current?.clientWidth;
+        const width2 = this.playbackContainer.current?.clientWidth;
         if (width1 && width1 !== 0) this.overviewBarWidth = width1;
         if (width2 && width2 !== 0) this.playbarWidth = width2;
 
@@ -143,24 +145,24 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
         const percentScrubberStart = this.currentX / this.props.time;
         let scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
-        if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth; 
+        if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth;
 
         const percentBarStart = this.visibleStart / this.props.time;
         const barStart = percentBarStart * this.activeOverviewWidth;
 
-        let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth; 
-        if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth; 
+        let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth;
+        if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth;
 
         const timeline = this.props.isAuthoring ? [
 
-            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
+            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}>
                 <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: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                 </div>
             </div>
         ] : [
-                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay">
+                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}>
                     <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
                 <div className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>