aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/animationtimeline/Timeline.scss3
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx35
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.tsx44
3 files changed, 52 insertions, 30 deletions
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index ce8c845df..a99d017f4 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -42,14 +42,17 @@ $timelineDark: #77a1aa;
.time-box {
margin-left: 5px;
+ min-width: 140px;
display: flex;
justify-content: center;
align-items: center;
+ // grid-column-start: line2;
}
.mode-box {
display: flex;
margin-left: 5px;
+ // grid-column-start: line3;
}
.overview-box {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 9e90cc764..fc1a0ec3b 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}`;
}
@@ -434,6 +437,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">
@@ -453,15 +458,32 @@ 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)}
</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>
+ <div className="totalTime">1:40.07</div>
+ </>
+ );
+ }
+ else {
+ 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>
+ );
+ }
+ }
+
/**
* manual time input (kinda broken right now)
*/
@@ -527,10 +549,7 @@ export class Timeline extends React.Component<FieldViewProps> {
// @computed
getCurrentTime = () => {
const current = KeyframeFunc.convertPixelTime(this._currentBarX, "mili", "time", this._tickSpacing, this._tickIncrement);
- // console.log(this._currentBarX)
return this.toReadTime(current);
- // return (Math.floor(current) / 1000)
- // return current / 1000.0;
}
@observable private mapOfTracks: (Track | null)[] = [];
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index b8c639825..94bbe7074 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -27,6 +27,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
@observable private _visibleRef = React.createRef<HTMLDivElement>();
@observable private _scrubberRef = React.createRef<HTMLDivElement>();
@observable private overviewBarWidth: number = 0;
+ @observable private playbarWidth: number = 0;
+ @observable private activeOverviewWidth: number = 0;
@observable private _authoringReaction?: IReactionDisposer;
@observable private visibleTime: number = 0;
@observable private currentX: number = 0;
@@ -55,12 +57,17 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
@action
setOverviewWidth() {
- const width = $("#timelineOverview").width();
- // console.log($("timelineOverview"))
- if (width) this.overviewBarWidth = width;
- // else this.overviewBarWidth = 0;
-
- // console.log(this.overviewBarWidth)
+ const width1 = $("#timelineOverview").width();
+ const width2 = $("#timelinePlay").width();
+ if (width1 && width1 !== 0) this.overviewBarWidth = width1;
+ if (width2 && width2 !== 0) this.playbarWidth = width2;
+
+ if (this.props.isAuthoring) {
+ this.activeOverviewWidth = this.overviewBarWidth;
+ }
+ else {
+ this.activeOverviewWidth = this.playbarWidth;
+ }
}
@action
@@ -78,9 +85,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
e.stopPropagation();
e.preventDefault();
const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
- // let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
- // this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
}
@action
@@ -95,12 +100,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
onScrubberDown = (e: React.PointerEvent) => {
e.preventDefault();
e.stopPropagation();
- // if (!this.props.isAuthoring) {
document.removeEventListener("pointermove", this.onScrubberMove);
document.removeEventListener("pointerup", this.onScrubberUp);
document.addEventListener("pointermove", this.onScrubberMove);
document.addEventListener("pointerup", this.onScrubberUp);
- // }
}
@action
@@ -110,7 +113,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
const scrubberRef = this._scrubberRef.current!;
const left = scrubberRef.getBoundingClientRect().left;
const offsetX = Math.round(e.clientX - left);
- this.props.changeCurrentBarX((((offsetX) / this.overviewBarWidth) * this.props.totalLength) + this.props.currentBarX);
+ this.props.changeCurrentBarX((((offsetX) / this.activeOverviewWidth) * this.props.totalLength) + this.props.currentBarX);
}
@action
@@ -129,9 +132,6 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
this.visibleTime = vis;
this.currentX = x;
this.visibleStart = start;
- // console.log("getting times")
- // console.log(x)
- // console.log(start)
}
render() {
@@ -139,27 +139,27 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
this.getTimes();
const percentVisible = this.visibleTime / this.props.time;
- const visibleBarWidth = percentVisible * this.overviewBarWidth;
+ const visibleBarWidth = percentVisible * this.activeOverviewWidth;
const percentScrubberStart = this.currentX / this.props.time;
- const scrubberStart = percentScrubberStart * this.overviewBarWidth;
+ const scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
const percentBarStart = this.visibleStart / this.props.time;
- const barStart = percentBarStart * this.overviewBarWidth;
+ const barStart = percentBarStart * this.activeOverviewWidth;
const timeline = this.props.isAuthoring ? [
- <div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
+ <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
<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: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px`}} onPointerDown={this.onScrubberDown}>
+ <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 className="timeline-play-bar" style={{ width: this.overviewBarWidth }}>
- <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px` }} onPointerDown={this.onScrubberDown}></div>
+ <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.overviewBarWidth}px` }}></div>
+ <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.playbarWidth}px` }}></div>
];
return (
<div className="timeline-flex">
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 10:49:13 +0000