From c812f2faedf82ffb79b1efb3fc53ca118132b228 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 16 Jan 2023 11:50:33 +0100 Subject: [PATCH] change(ui): add loader bar on timeline, fix metadata on session load, add exceptions archive for logger --- .../Player/ReplayPlayer/PlayerBlockHeader.tsx | 5 +++++ .../Player/ReplayPlayer/PlayerInst.tsx | 9 ++++++-- .../Session_/Player/Controls/Timeline.tsx | 5 ++++- .../Player/Controls/timeline.module.css | 21 +++++++++++++++++++ frontend/app/dev/console.js | 1 + frontend/app/logger/index.js | 4 ++++ frontend/app/player/player/Animator.ts | 12 ++++++++--- frontend/app/player/web/MessageManager.ts | 13 ++++++------ .../app/player/web/messages/MFileReader.ts | 1 + 9 files changed, 58 insertions(+), 13 deletions(-) diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx index 8dd4a41a0..899593eb7 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx @@ -15,6 +15,7 @@ import Tabs from 'Components/Session/Tabs'; import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; import stl from './playerBlockHeader.module.css'; +import { fetchListActive as fetchMetadata } from 'Duck/customField'; const SESSIONS_ROUTE = sessionsRoute(); @@ -36,11 +37,14 @@ function PlayerBlockHeader(props: any) { location, history, sessionPath, + fetchMetadata, } = props; React.useEffect(() => { const queryParams = new URLSearchParams(location.search); setHideBack(queryParams.has('iframe') && queryParams.get('iframe') === 'true'); + + if (metaList.size === 0) fetchMetadata(); }, []); const backHandler = () => { @@ -139,6 +143,7 @@ const PlayerHeaderCont = connect( { toggleFavorite, setSessionPath, + fetchMetadata, } )(observer(PlayerBlockHeader)); diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx index faa2b3c48..cac7e87ec 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx @@ -58,17 +58,22 @@ function Player(props: IProps) { isClickmap, } = props; const playerContext = React.useContext(PlayerContext); + const isReady = playerContext.store.get().ready const screenWrapper = React.useRef(null); const bottomBlockIsActive = !fullscreen && bottomBlock !== NONE; + const [isAttached, setAttached] = React.useState(false); React.useEffect(() => { props.updateLastPlayedSession(props.sessionId); const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture - if (parentElement) { + if (parentElement && !isAttached) { playerContext.player.attach(parentElement); + setAttached(true) + } + if (isAttached && isReady) { playerContext.player.play(); } - }, []); + }, [isReady]); React.useEffect(() => { playerContext.player.scale(); diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index fea596066..ffffde0dd 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx @@ -40,6 +40,7 @@ function Timeline(props: IProps) { skipToIssue, ready, endTime, + devtoolsLoading, } = store.get() const { issues } = props; const notes = notesStore.sessionNotes @@ -162,7 +163,9 @@ function Timeline(props: IProps) { }} /> )) : null} -
+
+ {devtoolsLoading || !ready ?
: null} +
{events.map((e) => (
{ + this.play() + }, 250) + } } pause() { diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index 829327484..c6cf403c4 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/frontend/app/player/web/MessageManager.ts @@ -88,9 +88,7 @@ export default class MessageManager { messagesLoading: false, cssLoading: false, - get ready() { - return !this.messagesLoading && !this.cssLoading - }, + ready: false, lastMessageTime: 0, } @@ -125,7 +123,7 @@ export default class MessageManager { ) { this.pagesManager = new PagesManager(screen, this.session.isMobile, cssLoading => { screen.displayFrame(!cssLoading) - state.update({ cssLoading }) + state.update({ cssLoading, ready: !state.get().messagesLoading && !cssLoading }) }) this.mouseMoveManager = new MouseMoveManager(screen) @@ -191,11 +189,12 @@ export default class MessageManager { } private onFileReadFinally = () => { this.waitingForFiles = false - this.setMessagesLoading(false) + // this.setMessagesLoading(false) // this.state.update({ filesLoaded: true }) } private async loadMessages() { + this.setMessagesLoading(true) // TODO: reuseable decryptor instance const createNewParser = (shouldDecrypt=true) => { const decrypt = shouldDecrypt && this.session.fileKey @@ -216,7 +215,7 @@ export default class MessageManager { this.setMessagesLoading(false) }) } - this.setMessagesLoading(true) + this.waitingForFiles = true let fileReadPromise = this.session.domURL && this.session.domURL.length > 0 @@ -482,7 +481,7 @@ export default class MessageManager { setMessagesLoading(messagesLoading: boolean) { this.screen.display(!messagesLoading); - this.state.update({ messagesLoading }); + this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading }); } private setSize({ height, width }: { height: number, width: number }) { diff --git a/frontend/app/player/web/messages/MFileReader.ts b/frontend/app/player/web/messages/MFileReader.ts index 8c753979c..d1b131595 100644 --- a/frontend/app/player/web/messages/MFileReader.ts +++ b/frontend/app/player/web/messages/MFileReader.ts @@ -60,6 +60,7 @@ export default class MFileReader extends RawMessageReader { return null } this.logger.group("Openreplay: Skipping messages ", skippedMessage) + } this.pLastMessageID = this.p