change(ui) - checking for fullScreen param and hide header and footer in assist

frontend/app/components/Session/LivePlayer.js

@@ -3,24 +3,19 @@ import { useEffect, useState } 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,
-  init as initPlayer,
-  clean as cleanPlayer,
-} from 'Player';
+import { withRequest } from 'HOCs';
+import { PlayerProvider, connectPlayer, init as initPlayer, clean as cleanPlayer } from 'Player';
 import withPermissions from 'HOCs/withPermissions';
 
 import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
 import PlayerBlock from '../Session_/PlayerBlock';
 import styles from '../Session_/session.module.css';
 
-const InitLoader = connectPlayer(state => ({
-  loading: !state.initialized
+const InitLoader = connectPlayer((state) => ({
+  loading: !state.initialized,
 }))(Loader);
 
-function LivePlayer ({
+function LivePlayer({
   session,
   toggleFullscreen,
   closeBottomBlock,
@@ -30,68 +25,88 @@ function LivePlayer ({
   request,
   isEnterprise,
   userEmail,
-  userName
+  userName,
 }) {
+  const [fullView, setFullView] = useState(false);
   useEffect(() => {
     if (!loadingCredentials) {
-
       const sessionWithAgentData = {
         ...session.toJS(),
         agentInfo: {
           email: userEmail,
           name: userName,
         },
-      }
+      };
       initPlayer(sessionWithAgentData, assistCredendials, true);
     }
-    return () => cleanPlayer()
-  }, [ session.sessionId, loadingCredentials, assistCredendials ]);
+    return () => cleanPlayer();
+  }, [session.sessionId, loadingCredentials, assistCredendials]);
 
   // LAYOUT (TODO: local layout state - useContext or something..)
   useEffect(() => {
+    const queryParams = new URLSearchParams(window.location.search);
+    if (queryParams.has('fullScreen') && queryParams.get('fullScreen') === 'true') {
+      setFullView(true);
+    }
+
     if (isEnterprise) {
       request();
     }
     return () => {
       toggleFullscreen(false);
       closeBottomBlock();
-    }
-  }, [])
+    };
+  }, []);
 
   const TABS = {
     EVENTS: 'User Steps',
     HEATMAPS: 'Click Map',
-  }
+  };
   const [activeTab, setActiveTab] = useState('');
 
   return (
     <PlayerProvider>
       <InitLoader className="flex-1 p-3">
-        <PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen}/>
-        <div className={ styles.session } data-fullscreen={fullscreen}>
-            <PlayerBlock />
+        {!fullView && (
+          <PlayerBlockHeader
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            tabs={TABS}
+            fullscreen={fullscreen}
+          />
+        )}
+        <div className={styles.session} data-fullscreen={fullscreen || fullView}>
+          <PlayerBlock fullView={fullView} />
         </div>
       </InitLoader>
     </PlayerProvider>
   );
-};
+}
 
 export default withRequest({
   initialData: null,
   endpoint: '/assist/credentials',
-  dataWrapper: data => data,
+  dataWrapper: (data) => data,
   dataName: 'assistCredendials',
   loadingName: 'loadingCredentials',
-})(withPermissions(['ASSIST_LIVE'], '', true)(connect(
-  state => {
-    return {
-      session: state.getIn([ 'sessions', 'current' ]),
-      showAssist: state.getIn([ 'sessions', 'showChatWindow' ]),
-      fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-      isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
-      userEmail: state.getIn(['user', 'account', 'email']),
-      userName: state.getIn(['user', 'account', 'name']),
-    }
-  },
-  { toggleFullscreen, closeBottomBlock },
-)(LivePlayer)));
+})(
+  withPermissions(
+    ['ASSIST_LIVE'],
+    '',
+    true
+  )(
+    connect(
+      (state) => {
+        return {
+          session: state.getIn(['sessions', 'current']),
+          showAssist: state.getIn(['sessions', 'showChatWindow']),
+          fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+          isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+          userEmail: state.getIn(['user', 'account', 'email']),
+          userName: state.getIn(['user', 'account', 'name']),
+        };
+      },
+      { toggleFullscreen, closeBottomBlock }
+    )(LivePlayer)
+  )
+);

frontend/app/components/Session_/Player/Player.js

@@ -95,6 +95,7 @@ export default class Player extends React.PureComponent {
       closedLive,
       bottomBlock,
       activeTab,
+      fullView = false,
     } = this.props;
 
     const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw';
@@ -127,7 +128,7 @@ export default class Player extends React.PureComponent {
             {bottomBlock === INSPECTOR && <Inspector />}
           </div>
         )}
-        <Controls {...PlayerControls} />
+        {!fullView && <Controls {...PlayerControls} /> }
       </div>
     );
   }

frontend/app/components/Session_/PlayerBlock.js

@@ -1,46 +1,36 @@
 import React from 'react';
-import cn from "classnames";
+import cn from 'classnames';
 import { connect } from 'react-redux';
-import {
-  NONE,
-} from 'Duck/components/player';
+import { NONE } from 'Duck/components/player';
 import Player from './Player';
 import SubHeader from './Subheader';
 
 import styles from './playerBlock.module.css';
 
-@connect(state => ({
-  fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-  bottomBlock: state.getIn([ 'components', 'player', 'bottomBlock' ]),
-  sessionId: state.getIn([ 'sessions', 'current', 'sessionId' ]),
-  disabled: state.getIn([ 'components', 'targetDefiner', 'inspectorMode' ]),
-  jiraConfig: state.getIn([ 'issues', 'list' ]).first(),
+@connect((state) => ({
+  fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+  bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+  sessionId: state.getIn(['sessions', 'current', 'sessionId']),
+  disabled: state.getIn(['components', 'targetDefiner', 'inspectorMode']),
+  jiraConfig: state.getIn(['issues', 'list']).first(),
 }))
 export default class PlayerBlock extends React.PureComponent {
   render() {
-    const {
-      fullscreen,
-      bottomBlock,
-      sessionId,
-      disabled,
-      activeTab,
-      jiraConfig,
-     } = this.props;
+    const { fullscreen, bottomBlock, sessionId, disabled, activeTab, jiraConfig, fullView = false } = this.props;
 
     return (
-      <div className={ cn(styles.playerBlock, "flex flex-col overflow-x-hidden") }>
-          {!fullscreen && <SubHeader
-            sessionId={sessionId}
-            disabled={disabled}
-            jiraConfig={jiraConfig}
-          />}
+      <div className={cn(styles.playerBlock, 'flex flex-col overflow-x-hidden')}>
+        {!fullscreen && !fullView && (
+          <SubHeader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
+        )}
         <Player
           className="flex-1"
-          bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
+          bottomBlockIsActive={!fullscreen && bottomBlock !== NONE}
           // bottomBlockIsActive={ true }
           bottomBlock={bottomBlock}
           fullscreen={fullscreen}
           activeTab={activeTab}
+          fullView={fullView}
         />
       </div>
     );