From fb9cbca164800c26baee2d0bde171e9e052b7866 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 9 Feb 2020 14:55:25 -0500 Subject: taking out right information --- package-lock.json | 142 +++++++++++++++--------- package.json | 4 +- src/client/views/animationtimeline/Timeline.tsx | 23 +++- 3 files changed, 111 insertions(+), 58 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.tsx b/src/client/views/animationtimeline/Timeline.tsx index 2ac7e6c92..e4af43e0a 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -433,6 +433,8 @@ export class Timeline extends React.Component { lengthString = ""; } + // let rightInfo = this.timeIndicator; + return (
@@ -452,15 +454,30 @@ export class Timeline extends React.Component {
-
{lengthString}
- -
Current: {this.getCurrentTime()}
+ {this.timeIndicator(lengthString)} + {/* {rightInfo} */}
); } + timeIndicator(lengthString: string) { + if (this.props.Document.isATOn) { + return ( + <> +
{lengthString}
+ + + ); + } + else { + return ( +
Current: {this.getCurrentTime()}
+ ); + } + } + /** * manual time input (kinda broken right now) */ -- cgit v1.2.3-70-g09d2 From 61d4938de06a09687eca4a1549d48b1009aa4134 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 9 Feb 2020 15:07:55 -0500 Subject: rounding fix --- src/client/views/animationtimeline/Timeline.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index e4af43e0a..cbdbd07b149 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 { @action toReadTime = (time: number): string => { time = time / 1000; - var 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); - let min: (string | number) = Math.floor(inSeconds / 60); - let sec: (string | number) = inSeconds % 60; + const min: (string | number) = Math.floor(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}`; } -- cgit v1.2.3-70-g09d2 From 79f70eebe0a29f8f3d759eff82dd3446ac3d5ed1 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 9 Feb 2020 16:14:04 -0500 Subject: done with ui bugs --- src/client/views/animationtimeline/Timeline.scss | 3 ++ src/client/views/animationtimeline/Timeline.tsx | 11 +++--- .../views/animationtimeline/TimelineOverview.tsx | 45 +++++++++++----------- 3 files changed, 30 insertions(+), 29 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 e0f70dd43..3c4c5c93f 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -458,7 +458,6 @@ export class Timeline extends React.Component {
{this.timeIndicator(lengthString)} - {/* {rightInfo} */}
@@ -470,13 +469,16 @@ export class Timeline extends React.Component { return ( <>
{lengthString}
- +
1:40.07
); } else { return ( -
Current: {this.getCurrentTime()}
+
+
{`Current: ${this.getCurrentTime()}`}
+
{`Total: 1:40.07`}
+
); } } @@ -543,10 +545,7 @@ export class Timeline extends React.Component { // @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; } diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 66f6a9482..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{ @observable private _visibleRef = React.createRef(); @observable private _scrubberRef = React.createRef(); @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{ @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{ 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{ 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{ 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,38 +132,34 @@ export class TimelineOverview extends React.Component{ this.visibleTime = vis; this.currentX = x; this.visibleStart = start; - // console.log("getting times") - // console.log(x) - // console.log(start) } render() { - console.log("RERENDERED!"); this.setOverviewWidth(); 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 ? [ -
+
, -
+
] : [ -
-
+
+
, -
+
]; return (
-- cgit v1.2.3-70-g09d2