fix(ui): fix duplicate assist creation on /credentials call

frontend/app/components/Session/LivePlayer.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import withRequest from 'HOCs/withRequest';
 import withPermissions from 'HOCs/withPermissions';
 import { PlayerContext, defaultContextValue, ILivePlayerContext } from './playerContext';
 import { makeAutoObservable } from 'mobx';
@@ -11,6 +10,7 @@ import PlayerBlock from './Player/LivePlayer/LivePlayerBlock';
 import styles from '../Session_/session.module.css';
 import Session from 'App/mstore/types/session';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
+import APIClient from 'App/api_client';
 
 interface Props {
   session: Session;
@@ -28,14 +28,12 @@ interface Props {
 function LivePlayer({
   session,
   loadingCredentials,
-  assistCredentials,
-  request,
-  isEnterprise,
   userEmail,
   userName,
   isMultiview,
   customSession,
-  query
+  query,
+  isEnterprise
 }: Props) {
   // @ts-ignore
   const [contextValue, setContextValue] = useState<ILivePlayerContext>(defaultContextValue);
@@ -52,13 +50,21 @@ function LivePlayer({
         name: userName,
       },
     };
-    const [player, store] = createLiveWebPlayer(sessionWithAgentData, assistCredentials, (state) =>
-      makeAutoObservable(state)
-    );
-    setContextValue({ player, store });
-
-    return () => player.clean();
-  }, [session.sessionId, assistCredentials]);
+    if (isEnterprise) {
+      new APIClient().get('/config/assist/credentials').then(r => r.json())
+        .then(({ data }) => {
+          const [player, store] = createLiveWebPlayer(sessionWithAgentData, data, (state) =>
+            makeAutoObservable(state)
+          );
+          setContextValue({ player, store });
+        })
+    } else {
+      const [player, store] = createLiveWebPlayer(sessionWithAgentData, null, (state) =>
+        makeAutoObservable(state)
+      );
+      setContextValue({ player, store });
+    }
+  }, [session.sessionId]);
 
   // LAYOUT (TODO: local layout state - useContext or something..)
   useEffect(() => {
@@ -70,8 +76,10 @@ function LivePlayer({
       setFullView(true);
     }
 
-    if (isEnterprise) {
-      request();
+    return () => {
+      contextValue.player?.clean?.();
+      // @ts-ignore default empty
+      setContextValue(defaultContextValue)
     }
   }, []);
 
@@ -98,13 +106,7 @@ function LivePlayer({
   );
 }
 
-export default withRequest({
-  initialData: null,
-  endpoint: '/assist/credentials',
-  dataName: 'assistCredentials',
-  loadingName: 'loadingCredentials',
-})(
-  withPermissions(
+export default withPermissions(
     ['ASSIST_LIVE'],
     '',
     true
@@ -121,4 +123,3 @@ export default withRequest({
       }
     )(withLocationHandlers()(LivePlayer))
   )
-);

frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx

@@ -12,9 +12,7 @@ function SessionListContainer({
   clearCurrentSession,
 }: {
   activeTab: string;
-  fetchMembers: () => void;
   members: object[];
-  clearCurrentSession: () => void;
 }) {
   React.useEffect(() => {
     clearCurrentSession()

frontend/app/player/create.ts

@@ -39,7 +39,7 @@ export function createClickMapPlayer(session: Record<string, any>, wrapStore?: (
 	return [player, store]
 }
 
-export function createLiveWebPlayer(session: Record<string, any>, config: RTCIceServer[], wrapStore?: (s:IWebLivePlayerStore) => IWebLivePlayerStore): [IWebLivePlayer, IWebLivePlayerStore] {
+export function createLiveWebPlayer(session: Record<string, any>, config: RTCIceServer[] | null, wrapStore?: (s:IWebLivePlayerStore) => IWebLivePlayerStore): [IWebLivePlayer, IWebLivePlayerStore] {
 	let store: WebLivePlayerStore = new SimpleStore<WebLiveState>({
 		...WebLivePlayer.INITIAL_STATE,
 	})

frontend/app/player/web/WebLivePlayer.ts

@@ -23,7 +23,7 @@ export default class WebLivePlayer extends WebPlayer {
   private lastMessageInFileTime = 0
   private lastMessageInFileIndex = 0
 
-  constructor(wpState: Store<typeof WebLivePlayer.INITIAL_STATE>, private session:any, config: RTCIceServer[]) {
+  constructor(wpState: Store<typeof WebLivePlayer.INITIAL_STATE>, private session:any, config: RTCIceServer[] | null) {
     super(wpState, session, true)
 
     this.assistManager = new AssistManager(

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

@@ -66,7 +66,7 @@ export default class AssistManager {
     private setMessagesLoading: (flag: boolean) => void,
     private handleMessage: (m: Message, index: number) => void,
     private screen: Screen,
-    private config: RTCIceServer[],
+    private config: RTCIceServer[] | null,
     private store: Store<typeof AssistManager.INITIAL_STATE>,
   ) {}
 

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

@@ -33,7 +33,7 @@ export default class Call {
 	constructor(
 		private store: Store<State>,
 		private socket: Socket,
-		private config: RTCIceServer[],
+		private config: RTCIceServer[] | null,
 		private peerID: string,
 	) {
 		socket.on('call_end', this.onRemoteCallEnd)