diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/animationtimeline/Timeline.tsx | 32 |
1 files changed, 26 insertions, 6 deletions
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index dc381609e..e0f70dd43 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}`; } @@ -433,6 +436,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"> @@ -452,15 +457,30 @@ 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)} + {/* {rightInfo} */} </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> + <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} /> + </> + ); + } + else { + return ( + <div style={{ width: "100%", display: !this.props.Document.isATOn ? "flex" : "none" }}>Current: {this.getCurrentTime()}</div> + ); + } + } + /** * manual time input (kinda broken right now) */ @@ -524,7 +544,7 @@ export class Timeline extends React.Component<FieldViewProps> { getCurrentTime = () => { const current = KeyframeFunc.convertPixelTime(this._currentBarX, "mili", "time", this._tickSpacing, this._tickIncrement); // console.log(this._currentBarX) - return this.toReadTime(current); + return this.toReadTime(current); // return (Math.floor(current) / 1000) // return current / 1000.0; } |