kinda works

3 files changed, 50 insertions, 15 deletions

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index fc1a0ec3b..c52669879 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -14,6 +14,7 @@ import { TimelineOverview } from "./TimelineOverview";
 import { FieldViewProps } from "../nodes/FieldView";
 import { KeyframeFunc } from "./Keyframe";
 import { Utils } from "../../../Utils";
+import { createPromiseCapability } from "../../../../deploy/assets/pdf.worker";
 
 
 /**
@@ -470,7 +471,7 @@ 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>
-                    <div className="totalTime">1:40.07</div>
+                    <div className="totalTime">{this.toReadTime(this._time)}</div>
                 </>
             );
         }
@@ -478,7 +479,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             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 className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: ${this.toReadTime(this._time)}`}</div>
                 </div>
             );
         }
@@ -524,7 +525,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = `${-this._containerHeight}px`;
             this.props.Document.isATOn = false;
             this._isAuthoring = false;
-            this.tracks();
+            this.toPlay();
         } else {
             //turning on authoring mode...
             roundToggle.style.transform = "translate(20px, 0px)";
@@ -534,6 +535,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = "0px";
             this.props.Document.isATOn = true;
             this._isAuthoring = true;
+            this.toAuthoring(); 
         }
     }
 
@@ -555,18 +557,40 @@ export class Timeline extends React.Component<FieldViewProps> {
     @observable private mapOfTracks: (Track | null)[] = [];
 
     @action
-    tracks = () => {
-        console.log(this.mapOfTracks.length);
+    findLongestTime = () => {
+        let longestTime:number = 0; 
         this.mapOfTracks.forEach(track => {
-            console.log(track); 
             if (track) {
-                const region = track.getLastRegion();
-                console.log(region.time); 
+                const lastTime = track.getLastRegionTime();
+                if (this.children.length !== 0 ){
+                    if (longestTime <= lastTime){
+                        longestTime = lastTime; 
+                    }
+                }
             } else {
-
+                //TODO: remove undefineds and duplicates
             }
         });
+        return longestTime; 
+    }
+
+    @action 
+    toAuthoring = () => {
+        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; 
+    }
+
+    @action 
+    toPlay = () => {
+        const longestTime = this.findLongestTime(); 
+        this._time = longestTime; 
+        this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
     }
+
     /**
      * if you have any question here, just shoot me an email or text. 
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 94bbe7074..a587e1138 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -142,11 +142,15 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const visibleBarWidth = percentVisible * this.activeOverviewWidth;
 
         const percentScrubberStart = this.currentX / this.props.time;
-        const scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
+        let scrubberStart = this.props.currentBarX / this.props.totalLength * 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; 
+
         const timeline = this.props.isAuthoring ? [
 
             <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
@@ -159,7 +163,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 <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.playbarWidth}px` }}></div>
+                <div className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>
             ];
         return (
             <div className="timeline-flex">
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 9f63b3562..69e65fbcf 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -81,10 +81,17 @@ export class Track extends React.Component<IProps> {
     ////////////////////////////////
 
 
-    getLastRegion = () => {
-        console.log(this.regions.length); 
-        console.log((this.regions[this.regions.length - 1] as Doc).time); 
-        return this.regions[this.regions.length - 1] as Doc; 
+    getLastRegionTime =  () => {
+        let lastTime:number = 0; 
+        let lastRegion:(Doc | undefined); 
+        DocListCast(this.regions).forEach(region => {
+            const time = NumCast(region.time); 
+            if (lastTime <= time) {
+                lastTime = time; 
+                lastRegion = region; 
+            }
+        }); 
+        return lastRegion ? lastTime + NumCast(lastRegion.duration) : 0;  
     }
 
     /**