aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json142
-rw-r--r--package.json4
-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
5 files changed, 143 insertions, 85 deletions
diff --git a/package-lock.json b/package-lock.json
index 1f87e1493..5684789c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6533,9 +6533,9 @@
"dev": true
},
"https-proxy-agent": {
- "version": "2.2.2",
- "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
- "integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
+ "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
"requires": {
"agent-base": "^4.3.0",
"debug": "^3.1.0"
@@ -8844,9 +8844,9 @@
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
},
"npm": {
- "version": "6.13.6",
- "resolved": "https://registry.npmjs.org/npm/-/npm-6.13.6.tgz",
- "integrity": "sha512-NomC08kv7HIl1FOyLOe9Hp89kYsOsvx52huVIJ7i8hFW8Xp65lDwe/8wTIrh9q9SaQhA8hTrfXPh3BEL3TmMpw==",
+ "version": "6.13.7",
+ "resolved": "https://registry.npmjs.org/npm/-/npm-6.13.7.tgz",
+ "integrity": "sha512-X967EKTT407CvgrWFjXusnPh0VLERcmR9hZFSVgkEquOomZkvpwLJ5zrQ3qrG9SpPLKJE4bPLUu76exKQ4a3Cg==",
"requires": {
"JSONStream": "^1.3.5",
"abbrev": "~1.1.1",
@@ -8854,7 +8854,7 @@
"ansistyles": "~0.1.3",
"aproba": "^2.0.0",
"archy": "~1.0.0",
- "bin-links": "^1.1.6",
+ "bin-links": "^1.1.7",
"bluebird": "^3.5.5",
"byte-size": "^5.0.1",
"cacache": "^12.0.3",
@@ -8897,7 +8897,7 @@
"libnpmorg": "^1.0.1",
"libnpmsearch": "^2.0.2",
"libnpmteam": "^1.0.2",
- "libnpx": "^10.2.0",
+ "libnpx": "^10.2.2",
"lock-verify": "^2.1.0",
"lockfile": "^1.0.4",
"lodash._baseindexof": "*",
@@ -8916,7 +8916,7 @@
"mississippi": "^3.0.0",
"mkdirp": "~0.5.1",
"move-concurrently": "^1.0.1",
- "node-gyp": "^5.0.5",
+ "node-gyp": "^5.0.7",
"nopt": "~4.0.1",
"normalize-package-data": "^2.5.0",
"npm-audit-report": "^1.3.2",
@@ -9113,7 +9113,7 @@
}
},
"bin-links": {
- "version": "1.1.6",
+ "version": "1.1.7",
"bundled": true,
"requires": {
"bluebird": "^3.5.3",
@@ -9593,7 +9593,7 @@
}
},
"env-paths": {
- "version": "1.0.0",
+ "version": "2.2.0",
"bundled": true
},
"err-code": {
@@ -9896,7 +9896,7 @@
}
},
"get-caller-file": {
- "version": "1.0.2",
+ "version": "1.0.3",
"bundled": true
},
"get-stream": {
@@ -10091,7 +10091,7 @@
}
},
"invert-kv": {
- "version": "1.0.0",
+ "version": "2.0.0",
"bundled": true
},
"ip": {
@@ -10249,10 +10249,10 @@
"bundled": true
},
"lcid": {
- "version": "1.0.0",
+ "version": "2.0.0",
"bundled": true,
"requires": {
- "invert-kv": "^1.0.0"
+ "invert-kv": "^2.0.0"
}
},
"libcipm": {
@@ -10411,7 +10411,7 @@
}
},
"libnpx": {
- "version": "10.2.0",
+ "version": "10.2.2",
"bundled": true,
"requires": {
"dotenv": "^5.0.1",
@@ -10541,15 +10541,30 @@
"ssri": "^6.0.0"
}
},
+ "map-age-cleaner": {
+ "version": "0.1.3",
+ "bundled": true,
+ "requires": {
+ "p-defer": "^1.0.0"
+ }
+ },
"meant": {
"version": "1.0.1",
"bundled": true
},
"mem": {
- "version": "1.1.0",
+ "version": "4.3.0",
"bundled": true,
"requires": {
- "mimic-fn": "^1.0.0"
+ "map-age-cleaner": "^0.1.1",
+ "mimic-fn": "^2.0.0",
+ "p-is-promise": "^2.0.0"
+ },
+ "dependencies": {
+ "mimic-fn": {
+ "version": "2.1.0",
+ "bundled": true
+ }
}
},
"mime-db": {
@@ -10563,10 +10578,6 @@
"mime-db": "~1.35.0"
}
},
- "mimic-fn": {
- "version": "1.2.0",
- "bundled": true
- },
"minimatch": {
"version": "3.0.4",
"bundled": true,
@@ -10644,6 +10655,10 @@
"version": "0.0.7",
"bundled": true
},
+ "nice-try": {
+ "version": "1.0.5",
+ "bundled": true
+ },
"node-fetch-npm": {
"version": "2.0.2",
"bundled": true,
@@ -10654,33 +10669,20 @@
}
},
"node-gyp": {
- "version": "5.0.5",
+ "version": "5.0.7",
"bundled": true,
"requires": {
- "env-paths": "^1.0.0",
- "glob": "^7.0.3",
- "graceful-fs": "^4.1.2",
- "mkdirp": "^0.5.0",
- "nopt": "2 || 3",
- "npmlog": "0 || 1 || 2 || 3 || 4",
- "request": "^2.87.0",
- "rimraf": "2",
- "semver": "~5.3.0",
+ "env-paths": "^2.2.0",
+ "glob": "^7.1.4",
+ "graceful-fs": "^4.2.2",
+ "mkdirp": "^0.5.1",
+ "nopt": "^4.0.1",
+ "npmlog": "^4.1.2",
+ "request": "^2.88.0",
+ "rimraf": "^2.6.3",
+ "semver": "^5.7.1",
"tar": "^4.4.12",
- "which": "1"
- },
- "dependencies": {
- "nopt": {
- "version": "3.0.6",
- "bundled": true,
- "requires": {
- "abbrev": "1"
- }
- },
- "semver": {
- "version": "5.3.0",
- "bundled": true
- }
+ "which": "^1.3.1"
}
},
"nopt": {
@@ -10874,12 +10876,38 @@
"bundled": true
},
"os-locale": {
- "version": "2.1.0",
+ "version": "3.1.0",
"bundled": true,
"requires": {
- "execa": "^0.7.0",
- "lcid": "^1.0.0",
- "mem": "^1.1.0"
+ "execa": "^1.0.0",
+ "lcid": "^2.0.0",
+ "mem": "^4.0.0"
+ },
+ "dependencies": {
+ "cross-spawn": {
+ "version": "6.0.5",
+ "bundled": true,
+ "requires": {
+ "nice-try": "^1.0.4",
+ "path-key": "^2.0.1",
+ "semver": "^5.5.0",
+ "shebang-command": "^1.2.0",
+ "which": "^1.2.9"
+ }
+ },
+ "execa": {
+ "version": "1.0.0",
+ "bundled": true,
+ "requires": {
+ "cross-spawn": "^6.0.0",
+ "get-stream": "^4.0.0",
+ "is-stream": "^1.1.0",
+ "npm-run-path": "^2.0.0",
+ "p-finally": "^1.0.0",
+ "signal-exit": "^3.0.0",
+ "strip-eof": "^1.0.0"
+ }
+ }
}
},
"os-tmpdir": {
@@ -10894,10 +10922,18 @@
"os-tmpdir": "^1.0.0"
}
},
+ "p-defer": {
+ "version": "1.0.0",
+ "bundled": true
+ },
"p-finally": {
"version": "1.0.0",
"bundled": true
},
+ "p-is-promise": {
+ "version": "2.1.0",
+ "bundled": true
+ },
"p-limit": {
"version": "1.2.0",
"bundled": true,
@@ -11872,14 +11908,14 @@
"bundled": true
},
"yargs": {
- "version": "11.0.0",
+ "version": "11.1.1",
"bundled": true,
"requires": {
"cliui": "^4.0.0",
"decamelize": "^1.1.1",
"find-up": "^2.1.0",
"get-caller-file": "^1.0.1",
- "os-locale": "^2.0.0",
+ "os-locale": "^3.1.0",
"require-directory": "^2.1.1",
"require-main-filename": "^1.0.1",
"set-blocking": "^2.0.0",
@@ -17955,7 +17991,7 @@
},
"wrap-ansi": {
"version": "2.1.0",
- "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
"requires": {
"string-width": "^1.0.1",
diff --git a/package.json b/package.json
index 155026d2c..5b2818c33 100644
--- a/package.json
+++ b/package.json
@@ -176,7 +176,7 @@
"nodemailer": "^5.1.1",
"nodemon": "^1.19.4",
"normalize.css": "^8.0.1",
- "npm": "^6.13.6",
+ "npm": "^6.13.7",
"p-limit": "^2.2.0",
"passport": "^0.4.0",
"passport-google-oauth20": "^2.0.0",
@@ -226,8 +226,8 @@
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"solr-node": "^1.2.1",
- "tiny-timer": "^1.3.0",
"standard-http-error": "^2.0.1",
+ "tiny-timer": "^1.3.0",
"typescript-collections": "^1.3.3",
"url-loader": "^1.1.2",
"uuid": "^3.4.0",
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 21:09:43 +0000