change(player): cleanup assist sockets on unmount (#1110)

* change(player): cleanup assist sockets on unmount

* change(player): remove memo

frontend/app/components/Session/LivePlayer.tsx

@@ -14,7 +14,6 @@ import APIClient from 'App/api_client';
 
 interface Props {
   session: Session;
-  loadingCredentials: boolean;
   assistCredentials: RTCIceServer[];
   isEnterprise: boolean;
   userEmail: string;
@@ -27,7 +26,6 @@ interface Props {
 
 function LivePlayer({
   session,
-  loadingCredentials,
   userEmail,
   userName,
   isMultiview,
@@ -42,7 +40,8 @@ function LivePlayer({
   const usedSession = isMultiview ? customSession! : session;
 
   useEffect(() => {
-    if (loadingCredentials || !usedSession.sessionId) return;
+    let playerInst: ILivePlayerContext['player'];
+    if (!usedSession.sessionId || contextValue.player !== undefined) return;
     const sessionWithAgentData = {
       ...usedSession,
       agentInfo: {
@@ -57,14 +56,22 @@ function LivePlayer({
             makeAutoObservable(state)
           );
           setContextValue({ player, store });
+          playerInst = player;
         })
     } else {
       const [player, store] = createLiveWebPlayer(sessionWithAgentData, null, (state) =>
         makeAutoObservable(state)
       );
       setContextValue({ player, store });
+      playerInst = player;
     }
-  }, [session.sessionId]);
+
+    return () => {
+      playerInst?.clean?.();
+      // @ts-ignore default empty
+      setContextValue(defaultContextValue);
+    }
+  }, [usedSession.sessionId]);
 
   // LAYOUT (TODO: local layout state - useContext or something..)
   useEffect(() => {
@@ -75,12 +82,6 @@ function LivePlayer({
     ) {
       setFullView(true);
     }
-
-    return () => {
-      contextValue.player?.clean?.();
-      // @ts-ignore default empty
-      setContextValue(defaultContextValue)
-    }
   }, []);
 
   if (!contextValue.player) return null;

frontend/app/components/Session/LiveSession.js

@@ -8,14 +8,17 @@ import { Loader } from 'UI';
 import withPermissions from 'HOCs/withPermissions';
 import LivePlayer from './LivePlayer';
 import { clearLogs } from 'App/dev/console';
+import { toast } from 'react-toastify';
 
 function LiveSession({
     sessionId,
-    loading,
     fetchSession,
     fetchSlackList,
     hasSessionsPath,
+    session,
+    fetchFailed,
 }) {
+    const [initialLoading, setInitialLoading] = React.useState(true);
     usePageTitle('OpenReplay Assist');
 
     useEffect(() => {
@@ -31,8 +34,18 @@ function LiveSession({
         }
     }, [sessionId, hasSessionsPath]);
 
+    useEffect(() => {
+        if (fetchFailed) {
+            toast.error('Error getting live session');
+            setInitialLoading(false);
+        }
+        if (session.sessionId) {
+            setInitialLoading(false);
+        }
+    }, [session.sessionId, fetchFailed]);
+
     return (
-        <Loader className="flex-1" loading={loading}>
+        <Loader className="flex-1" loading={initialLoading}>
             <LivePlayer />
         </Loader>
     );
@@ -56,7 +69,7 @@ export default withPermissions(
                 .pathname.includes('/sessions');
             return {
                 sessionId,
-                loading: state.getIn(['sessions', 'loading']),
+                fetchFailed: state.getIn(['sessions', 'fetchFailed']),
                 session: state.getIn(['sessions', 'current']),
                 hasSessionsPath: hasSessiosPath && !isAssist,
             };
@@ -65,5 +78,5 @@ export default withPermissions(
             fetchSession,
             fetchSlackList,
         }
-    )(LiveSession)
+    )(React.memo(LiveSession))
 );

frontend/app/duck/sessions.ts

@@ -83,6 +83,7 @@ const initObj = {
     lastPlayedSessionId: null,
     timeLineTooltip: { time: 0, offset: 0, isVisible: false, timeStr: '' },
     createNoteTooltip: { time: 0, isVisible: false, isEdit: false, note: null },
+    fetchFailed: false,
 }
 
 const initialState = Map(initObj);
@@ -141,6 +142,8 @@ const reducer = (state = initialState, action: IAction) => {
               .set('visitedEvents', List())
               .set('host', '');
         }
+        case FETCH.FAILURE:
+            return state.set('fetchFailed', true);
         case FETCH.SUCCESS: {
             // TODO: more common.. or TEMP filters', 'appliedFilter
             const events = action.filter.events;

frontend/app/player/web/assist/AssistManager.ts

@@ -286,6 +286,7 @@ export default class AssistManager {
     this.remoteControl?.clean()
     this.callManager?.clean()
     this.socket?.close()
+    this.socket = null
     this.clearDisconnectTimeout()
     this.clearInactiveTimeout()
     this.socketCloseTimeout && clearTimeout(this.socketCloseTimeout)