aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx32
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;
}