fix(player): ensure that player is cleaned on unmount

frontend/app/components/Session/LivePlayer.tsx

@@ -25,6 +25,8 @@ interface Props {
   request: () => void;
 }
 
+let playerInst: ILivePlayerContext['player'] | undefined;
+
 function LivePlayer({
   session,
   userEmail,
@@ -39,10 +41,11 @@ function LivePlayer({
   const [fullView, setFullView] = useState(false);
   const openedFromMultiview = query?.get('multi') === 'true'
   const usedSession = isMultiview ? customSession! : session;
-  let playerInst: ILivePlayerContext['player'];
+
   const location = useLocation();
 
   useEffect(() => {
+    playerInst = undefined;
     if (!usedSession.sessionId || contextValue.player !== undefined) return;
     console.debug('creating live player for', usedSession.sessionId)
     const sessionWithAgentData = {
@@ -71,7 +74,7 @@ function LivePlayer({
 
     return () => {
       if (!location.pathname.includes('multiview') || !location.pathname.includes(usedSession.sessionId)) {
-        console.debug('unmount', usedSession.sessionId)
+        console.debug('cleaning live player for', usedSession.sessionId)
         playerInst?.clean?.();
         // @ts-ignore default empty
         setContextValue(defaultContextValue)

frontend/app/components/Session/WebPlayer.tsx

@@ -20,6 +20,8 @@ const TABS = {
   CLICKMAP: 'Click Map',
 };
 
+let playerInst: IPlayerContext['player'] | undefined;
+
 function WebPlayer(props: any) {
   const {
     session,
@@ -35,10 +37,10 @@ function WebPlayer(props: any) {
   const [visuallyAdjusted, setAdjusted] = useState(false);
   // @ts-ignore
   const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
-  let playerInst: IPlayerContext['player'];
   const params: { sessionId: string } = useParams()
 
   useEffect(() => {
+    playerInst = undefined
     if (!session.sessionId || contextValue.player !== undefined) return;
     fetchList('issues');
 
@@ -59,7 +61,7 @@ function WebPlayer(props: any) {
 
     const freeze = props.query.get('freeze')
     if (freeze) {
-      WebPlayerInst.freeze()
+      void WebPlayerInst.freeze()
     }
   }, [session.sessionId]);
 

frontend/app/player/web/MessageManager.ts

@@ -540,6 +540,8 @@ export default class MessageManager {
   // TODO: clean managers?
   clean() {
     this.state.update(MessageManager.INITIAL_STATE);
+    // @ts-ignore
+    this.pagesManager.reset();
   }
 
 }

frontend/app/player/web/WebPlayer.ts

@@ -154,6 +154,8 @@ export default class WebPlayer extends Player {
     this.screen.clean()
     // @ts-ignore
     this.screen = undefined;
+    // @ts-ignore
+    this.messageManager = undefined;
     window.removeEventListener('resize', this.scale)
   }
 }