diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx index f558c3103..8b884074c 100644 --- a/frontend/app/components/Session/LivePlayer.tsx +++ b/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; diff --git a/frontend/app/components/Session/LiveSession.js b/frontend/app/components/Session/LiveSession.js index 8f898b787..984d6b1d6 100644 --- a/frontend/app/components/Session/LiveSession.js +++ b/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 ( - + ); @@ -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)) ); diff --git a/frontend/app/duck/sessions.ts b/frontend/app/duck/sessions.ts index 576d8bc0f..f68d84119 100644 --- a/frontend/app/duck/sessions.ts +++ b/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; diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts index 413de0857..48b09c4f2 100644 --- a/frontend/app/player/web/assist/AssistManager.ts +++ b/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)