fix(ui): properly clean player inst on unmount

frontend/app/components/Session/WebPlayer.tsx

@@ -61,7 +61,11 @@ function WebPlayer(props: any) {
       WebPlayerInst.freeze()
     }
 
-    return () => WebPlayerInst.clean();
+    return () => {
+      WebPlayerInst.clean();
+      // @ts-ignore
+      setContextValue(defaultContextValue);
+    }
   }, [session.sessionId]);
 
   React.useEffect(() => {

frontend/app/player/web/MessageManager.ts

@@ -223,7 +223,11 @@ export default class MessageManager {
         for (let msg = fileReader.readNext();msg !== null;msg = fileReader.readNext()) {
           msgs.push(msg)
         }
-        const sorted = msgs.sort((m1, m2) => m1.time - m2.time)
+        const sorted = msgs.sort((m1, m2) => {
+          // @ts-ignore
+          if (m1.time === m2.time) return m1._index - m2._index
+          return m1.time - m2.time
+        })
 
         let indx = sorted[0]._index
         let outOfOrderCounter = 0

frontend/app/player/web/Screen/Screen.ts

@@ -82,6 +82,12 @@ export default class Screen {
     this.cursor = new Cursor(this.overlay, isMobile) // TODO: move outside
   }
 
+  clean() {
+    this.screen.removeChild(this.iframe)
+    this.screen.removeChild(this.overlay)
+    this.screen.remove();
+  }
+
   attach(parentElement: HTMLElement) {
     if (this.parentElement) {
       this.parentElement = null

frontend/app/player/web/WebPlayer.ts

@@ -22,7 +22,7 @@ export default class WebPlayer extends Player {
   }
 
   private readonly inspectorController: InspectorController
-  protected readonly screen: Screen
+  protected screen: Screen
   protected readonly messageManager: MessageManager
 
   private targetMarker: TargetMarker
@@ -149,6 +149,9 @@ export default class WebPlayer extends Player {
 
   clean = () => {
     super.clean()
+    this.screen.clean()
+    // @ts-ignore
+    this.screen = undefined;
     window.removeEventListener('resize', this.scale)
   }
 }

frontend/app/player/web/managers/DOM/DOMManager.ts

@@ -120,7 +120,7 @@ export default class DOMManager extends ListWalker<Message> {
     }
     const parent = this.vElements.get(parentID) || this.vRoots.get(parentID)
     if (!parent) {
-      logger.error("Insert error. Parent node not found", parentID);
+      logger.error("Insert error. Parent node not found", parentID, this.vElements, this.vRoots);
       return;
     }
 
@@ -177,7 +177,7 @@ export default class DOMManager extends ListWalker<Message> {
       case MType.CreateDocument:
         doc = this.screen.document;
         if (!doc) {
-          logger.error("No root iframe document found", msg)
+          logger.error("No root iframe document found", msg, this.screen)
           return;
         }
         doc.open();