change(ui): add loader bar on timeline, fix metadata on session load, add exceptions archive for logger

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));
 

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<HTMLDivElement>(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();

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}
-          <div className={stl.timeline} ref={timelineRef} />
+          <div className={stl.timeline} ref={timelineRef}>
+            {devtoolsLoading || !ready ? <div className={stl.stripes} /> : null}
+          </div>
 
           {events.map((e) => (
             <div

frontend/app/components/Session_/Player/Controls/timeline.module.css

@@ -141,6 +141,8 @@
   align-items: center;
 }
 
+
+
 .clickRage {
   position: absolute;
   width: 2px;
@@ -211,3 +213,22 @@
     border-right: solid 5px transparent;
   }
 }
+
+
+.stripes {
+  background-size: 30px 30px;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
+  animation: animate-stripes 1.5s linear infinite;
+  animation-direction: reverse;
+}
+
+@keyframes animate-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}

frontend/app/dev/console.js

@@ -7,6 +7,7 @@ export const options = {
 	},
 	enableCrash: false,
 	verbose: false,
+	exceptionsLogs: []
 }
 
 const storedString = localStorage.getItem(KEY)

frontend/app/logger/index.js

@@ -13,11 +13,13 @@ function warn(...args) {
   if (!window.env.PRODUCTION || options.verbose) {
     console.warn(...args);
   }
+  options.exceptionsLogs.push(args)
 }
 
 function error(...args) {
   if (!window.env.PRODUCTION || options.verbose) {
     console.error(...args);
+    options.exceptionsLogs.push(args)
   }
 }
 
@@ -33,6 +35,8 @@ function group(groupName, ...args) {
       console.groupCollapsed(groupName);
     }
     console.log(...args);
+
+    options.exceptionsLogs.push(args)
   }
 }
 

frontend/app/player/player/Animator.ts

@@ -129,9 +129,15 @@ export default class Animator {
   }
 
   play() {
-    cancelAnimationFrame(this.animationFrameRequestId)
-    this.store.update({ playing: true })
-    this.startAnimation()
+    if (!this.store.get().ready) {
+      cancelAnimationFrame(this.animationFrameRequestId)
+      this.store.update({ playing: true })
+      this.startAnimation()
+    } else {
+      setTimeout(() => {
+        this.play()
+      }, 250)
+    }
   }
 
   pause() {

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 }) {

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