Assist test cred (#225)

* change(ui) - assist get credetials

* change(ui) - removed type

* change(ui) - removed type

frontend/app/api_client.js

@@ -80,6 +80,7 @@ export default class APIClient {
       path !== '/targets_temp' &&
       !path.includes('/metadata/session_search') &&
       !path.includes('/watchdogs/rules') &&
+      !path.includes('/assist/credentials') &&
       !!this.siteId &&
       siteIdRequiredPaths.some(sidPath => path.startsWith(sidPath))
     ) {

frontend/app/components/Session/LivePlayer.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Loader } from 'UI';
 import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
+import { withRequest } from 'HOCs'
 import { 
   PlayerProvider,
   connectPlayer,
@@ -30,17 +31,24 @@ const InitLoader = connectPlayer(state => ({
 }))(Loader);
 
 
-function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt }) {
+function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, loadingCredentials, assistCredendials, request }) {
   useEffect(() => {
-    initPlayer(session, jwt);
+    if (!loadingCredentials) {
+      initPlayer(session, jwt, assistCredendials);
+    }
     return () => cleanPlayer()
-  }, [ session.sessionId ]);
+  }, [ session.sessionId, loadingCredentials, assistCredendials ]);
 
   // LAYOUT (TODO: local layout state - useContext or something..)
-  useEffect(() => () => {
-    toggleFullscreen(false);
-    closeBottomBlock();
+  useEffect(() => {
+    request();
+    return () => {
+      toggleFullscreen(false);
+      closeBottomBlock();
+    }
   }, [])
+
+
   return (
     <PlayerProvider>
       <InitLoader className="flex-1 p-3">
@@ -54,14 +62,18 @@ function WebPlayer ({ showAssist, session, toggleFullscreen, closeBottomBlock, l
   );
 }
 
-
-export default connect(state => ({
-  session: state.getIn([ 'sessions', 'current' ]),
-  showAssist: state.getIn([ 'sessions', 'showChatWindow' ]),
-  jwt: state.get('jwt'),
-  fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-}), {
-  toggleFullscreen,
-  closeBottomBlock,
-})(WebPlayer) 
-
+export default withRequest({
+  initialData: null,
+	endpoint: '/assist/credentials',
+	dataWrapper: data => data,
+	dataName: 'assistCredendials',
+  loadingName: 'loadingCredentials',
+})(connect(
+  state => ({
+    session: state.getIn([ 'sessions', 'current' ]),
+    showAssist: state.getIn([ 'sessions', 'showChatWindow' ]),
+    jwt: state.get('jwt'),
+    fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
+  }),
+  { toggleFullscreen, closeBottomBlock },
+)(WebPlayer));

frontend/app/components/hocs/withPermissions.js

@@ -3,7 +3,7 @@ import { NoPermission } from 'UI';
 
 export default (requiredPermissions, className) => BaseComponent => 
 @connect((state, props) => ({
-  permissions: state.getIn([ 'user', 'account', 'permissions' ]),
+  permissions: state.getIn([ 'user', 'account', 'permissions' ]) || [],
   isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
 }))
 class extends React.PureComponent {

frontend/app/player/MessageDistributor/MessageDistributor.ts

@@ -118,11 +118,11 @@ export default class MessageDistributor extends StatedScreen {
   private navigationStartOffset: number = 0;
   private lastMessageTime: number = 0;
 
-	constructor(private readonly session: any /*Session*/, jwt: string) {
+	constructor(private readonly session: any /*Session*/, jwt: string, config) {
     super();
     this.pagesManager = new PagesManager(this, this.session.isMobile)
     this.mouseManager = new MouseManager(this);
-    this.assistManager = new AssistManager(session, this);
+    this.assistManager = new AssistManager(session, this, config);
 
     this.sessionStart = this.session.startedAt;
 

frontend/app/player/MessageDistributor/managers/AssistManager.ts

@@ -117,10 +117,8 @@ function resolveCSS(baseURL: string, css: string): string {
   return rewriteCSSLinks(css, rawurl => resolveURL(baseURL, rawurl));
 }
 
-
 export default class AssistManager {
-  constructor(private session, private md: MessageDistributor) {}
-
+  constructor(private session, private md: MessageDistributor, private config) {}
 
   private setStatus(status: ConnectionStatus) {
     if (status === ConnectionStatus.Connecting) {
@@ -150,13 +148,22 @@ export default class AssistManager {
     }
     this.setStatus(ConnectionStatus.Connecting)
     import('peerjs').then(({ default: Peer }) => {
-      // @ts-ignore
-      const peer = new Peer({
+      const _config = {
         // @ts-ignore
         host: new URL(window.ENV.API_EDP).host,
         path: '/assist',
         port:  location.protocol === 'https:' ? 443 : 80,
-      });
+      }
+
+      if (this.config) {
+        _config['config'] = {
+          iceServers: this.config,
+          sdpSemantics: 'unified-plan',
+          iceTransportPolicy: 'relay',
+        };
+      }
+      
+      const peer = new Peer(_config);
       this.peer = peer;
       peer.on('error', e => {
         if (e.type !== 'peer-unavailable') {

frontend/app/player/singletone.js

@@ -28,11 +28,11 @@ document.addEventListener("visibilitychange", function() {
   }
 });
 
-export function init(session, jwt) {
+export function init(session, jwt, config) {
   const live = session.live;
   const endTime = !live && session.duration.valueOf();
 
-  instance = new Player(session, jwt);
+  instance = new Player(session, jwt, config);
   update({
     initialized: true,
     live,