From 72be865c5f140df010b6278d003a39b6739454e7 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Wed, 12 Apr 2023 17:17:34 +0200 Subject: [PATCH] change(player): fix typos; priority for 1st dom file --- .../Session/IOSPlayer/Performance.js | 2 +- .../Session/Layout/ToolPanel/Performance.tsx | 8 +-- .../Session_/Performance/Performance.tsx | 8 +-- frontend/app/player/web/MessageManager.ts | 61 +++++++++++++------ .../web/managers/PerformanceTrackManager.ts | 20 +++--- frontend/app/player/web/network/loadFiles.ts | 5 +- 6 files changed, 65 insertions(+), 39 deletions(-) diff --git a/frontend/app/components/Session/IOSPlayer/Performance.js b/frontend/app/components/Session/IOSPlayer/Performance.js index 42d19888f..92957d8fe 100644 --- a/frontend/app/components/Session/IOSPlayer/Performance.js +++ b/frontend/app/components/Session/IOSPlayer/Performance.js @@ -44,7 +44,7 @@ export default observer(({ player }) => { diff --git a/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx b/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx index c5ae6f809..c00d39a95 100644 --- a/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx +++ b/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx @@ -220,12 +220,12 @@ export default class Performance extends React.PureComponent { render() { const { performanceChartTime, - avaliability = {}, + availability = {}, hiddenScreenMarker = true, } = this.props; - const { fps, cpu, heap, nodes, memory, battery } = avaliability; - const avaliableCount = [ fps, cpu, heap, nodes, memory, battery ].reduce((c, av) => av ? c + 1 : c, 0); - const height = avaliableCount === 0 ? "0" : `${100 / avaliableCount}%`; + const { fps, cpu, heap, nodes, memory, battery } = availability; + const availableCount = [ fps, cpu, heap, nodes, memory, battery ].reduce((c, av) => av ? c + 1 : c, 0); + const height = availableCount === 0 ? "0" : `${100 / availableCount}%`; return ( <> diff --git a/frontend/app/components/Session_/Performance/Performance.tsx b/frontend/app/components/Session_/Performance/Performance.tsx index 2d251a9fd..330defb26 100644 --- a/frontend/app/components/Session_/Performance/Performance.tsx +++ b/frontend/app/components/Session_/Performance/Performance.tsx @@ -187,7 +187,7 @@ function Performance({ performanceChartData, connType, connBandwidth, - performanceAvaliability: avaliability, + performanceAvailability: availability, } = store.get(); React.useState(() => { @@ -212,9 +212,9 @@ function Performance({ } }; - const { fps, cpu, heap, nodes } = avaliability; - const avaliableCount = [fps, cpu, heap, nodes].reduce((c, av) => (av ? c + 1 : c), 0); - const height = avaliableCount === 0 ? '0' : `${100 / avaliableCount}%`; + const { fps, cpu, heap, nodes } = availability; + const availableCount = [fps, cpu, heap, nodes].reduce((c, av) => (av ? c + 1 : c), 0); + const height = availableCount === 0 ? '0' : `${100 / availableCount}%`; return ( diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index 104a9365a..9cb4a3edf 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/frontend/app/player/web/MessageManager.ts @@ -52,7 +52,7 @@ export interface State extends ScreenState, ListsState { connBandwidth?: number, location?: string, performanceChartTime?: number, - performanceAvaliability?: PerformanceTrackManager['avaliability'] + performanceAvailability?: PerformanceTrackManager['availability'] domContentLoadedTime?: { time: number, value: number }, domBuildingTime?: number, @@ -191,7 +191,7 @@ export default class MessageManager { private onFileReadSuccess = () => { const stateToUpdate : Partial= { performanceChartData: this.performanceTrackManager.chartData, - performanceAvaliability: this.performanceTrackManager.avaliability, + performanceAvailability: this.performanceTrackManager.availability, ...this.lists.getFullListsState(), } if (this.activityManager) { @@ -250,33 +250,58 @@ export default class MessageManager { this.waitingForFiles = true + // TODO: refactor this stuff; split everything to async/await + const loadMethod = this.session.domURL && this.session.domURL.length > 0 ? { url: this.session.domURL, parser: () => createNewParser(true, 'dom') } : { url: this.session.mobsUrl, parser: () => createNewParser(false, 'dom')} - loadFiles(loadMethod.url, loadMethod.parser()) - // EFS fallback - .catch((e) => requestEFSDom(this.session.sessionId) + const parser = loadMethod.parser() + + /** + * We load first dom mobfile before the rest + * to speed up time to replay + * but as a tradeoff we have to have some copy-paste + * for the devtools file + * */ + loadFiles([loadMethod.url[0]], parser) + .then(() => { + if (loadMethod.url.length > 1) { + loadFiles([loadMethod.url[1]], parser, true) + } + if (!isClickmap) { + this.loadDevtools(createNewParser) + } + }) + /** + * EFS fallback for unprocessed sessions (which are live) + * */ + .catch(() => { + requestEFSDom(this.session.sessionId) .then(createNewParser(false, 'domEFS')) + .catch(this.onFileReadFailed) + if (!isClickmap) { + this.loadDevtools(createNewParser) + } + } ) .then(this.onFileReadSuccess) - .catch(this.onFileReadFailed) .finally(this.onFileReadFinally); + } - // load devtools (TODO: start after the first DOM file download) - if (isClickmap) return; + loadDevtools(createNewParser: (shouldDecrypt: boolean, file: string) => (b: Uint8Array) => Promise) { this.state.update({ devtoolsLoading: true }) loadFiles(this.session.devtoolsURL, createNewParser(true, 'devtools')) - // EFS fallback - .catch(() => - requestEFSDevtools(this.session.sessionId) - .then(createNewParser(false, 'devtoolsEFS')) - ) - .then(() => { - this.state.update(this.lists.getFullListsState()) // TODO: also in case of dynamic update through assist - }) - .catch(e => logger.error("Can not download the devtools file", e)) - .finally(() => this.state.update({ devtoolsLoading: false })) + // EFS fallback + .catch(() => + requestEFSDevtools(this.session.sessionId) + .then(createNewParser(false, 'devtoolsEFS')) + ) + .then(() => { + this.state.update(this.lists.getFullListsState()) // TODO: also in case of dynamic update through assist + }) + .catch(e => logger.error("Can not download the devtools file", e)) + .finally(() => this.state.update({ devtoolsLoading: false })) } resetMessageManagers() { diff --git a/frontend/app/player/web/managers/PerformanceTrackManager.ts b/frontend/app/player/web/managers/PerformanceTrackManager.ts index 98ce2c0b9..bec1652c3 100644 --- a/frontend/app/player/web/managers/PerformanceTrackManager.ts +++ b/frontend/app/player/web/managers/PerformanceTrackManager.ts @@ -15,9 +15,9 @@ export default class PerformanceTrackManager extends ListWalker = []; private isHidden: boolean = false; private timeCorrection: number = 0; - private heapAvaliable: boolean = false; - private fpsAvaliable: boolean = false; - private cpuAvaliable: boolean = false; + private heapAvailable: boolean = false; + private fpsAvailable: boolean = false; + private cpuAvailable: boolean = false; private prevTime: number | null = null; private prevNodesCount: number = 0; @@ -29,7 +29,7 @@ export default class PerformanceTrackManager extends ListWalker 0 && msg.frames >= 0) { - if (msg.frames > 0) { this.fpsAvaliable = true; } + if (msg.frames > 0) { this.fpsAvailable = true; } fps = msg.frames*1e3/timePassed; // Multiply by 1e3 as time in ms; fps = Math.min(fps,60); // What if 120? TODO: alert if more than 60 if (this.chart.length === 1) { @@ -38,7 +38,7 @@ export default class PerformanceTrackManager extends ListWalker 0 && msg.ticks >= 0) { - this.cpuAvaliable = true; + this.cpuAvailable = true; let tickRate = msg.ticks * 30 / timePassed; if (tickRate > 1) { tickRate = 1; @@ -53,7 +53,7 @@ export default class PerformanceTrackManager extends ListWalker 0; + this.heapAvailable = this.heapAvailable || msg.usedJSHeapSize > 0; this.chart.push({ usedHeap: msg.usedJSHeapSize, totalHeap: msg.totalJSHeapSize, @@ -109,11 +109,11 @@ export default class PerformanceTrackManager extends ListWalker void, -): Promise { + canSkip: boolean = false, +): Promise { if (!urls.length) { throw NO_URLS } try { for (let url of urls) { const response = await window.fetch(url) - const data = await processAPIStreamResponse(response, url !== urls[0]) + const data = await processAPIStreamResponse(response, urls.length > 1 ? url !== urls[0] : canSkip) onData(data) } } catch(e) {