From de402d4695a855e9342b2940d47965099187eeae Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 8 Apr 2024 16:50:18 +0200
Subject: [PATCH] change(ui): fullView param to restrict to player content

---
 .../app/components/Session/LivePlayer.tsx     |  2 +-
 .../Player/ReplayPlayer/PlayerContent.tsx     | 10 ++++--
 frontend/app/components/Session/WebPlayer.tsx | 36 +++++++++++--------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx
index d470cb9d1..97ceabbb2 100644
--- a/frontend/app/components/Session/LivePlayer.tsx
+++ b/frontend/app/components/Session/LivePlayer.tsx
@@ -107,7 +107,7 @@ function LivePlayer({
   useEffect(() => {
     const queryParams = new URLSearchParams(window.location.search);
     if (
-      (queryParams.has('fullScreen') && queryParams.get('fullScreen') === 'true') ||
+      (queryParams.has('fullScreen') && queryParams.get('fullScreen') === 'true') || (queryParams.has('fullView') && queryParams.get('fullView') === 'true') ||
       location.pathname.includes('multiview')
     ) {
       setFullView(true);
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx
index ae347eb38..ae8da605c 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import cn from 'classnames';
 import styles from 'Components/Session_/session.module.css';
@@ -22,6 +22,7 @@ interface IProps {
 
 function PlayerContent({ session, fullscreen, activeTab, setActiveTab }: IProps) {
   const { store } = React.useContext(PlayerContext)
+  const [fullView, setFullView] = React.useState(false)
 
   const {
     error,
@@ -29,6 +30,11 @@ function PlayerContent({ session, fullscreen, activeTab, setActiveTab }: IProps)
 
   const hasError = !!error
 
+  useEffect(() => {
+    const isFullView = new URLSearchParams(location.search).get('fullview')
+    setFullView(isFullView === 'true');
+  }, [session.sessionId]);
+
   const sessionDays = countDaysFrom(session.startedAt);
   return (
     <div className="relative">
@@ -60,7 +66,7 @@ function PlayerContent({ session, fullscreen, activeTab, setActiveTab }: IProps)
             style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)' } : undefined}
           >
             <div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
-              <PlayerBlock setActiveTab={setActiveTab} activeTab={activeTab} />
+              <PlayerBlock setActiveTab={setActiveTab} activeTab={activeTab} fullView={fullView} />
             </div>
           </div>
           {!fullscreen && activeTab !== '' ? (
diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index a0dcaa3b6..5d569e386 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -19,11 +19,11 @@ import { toast } from 'react-toastify';
 const TABS = {
   EVENTS: 'Activity',
   CLICKMAP: 'Click Map',
-  INSPECTOR: 'Tag',
+  INSPECTOR: 'Tag'
 };
 const UXTTABS = {
   EVENTS: TABS.EVENTS
-}
+};
 
 let playerInst: IPlayerContext['player'] | undefined;
 
@@ -36,6 +36,7 @@ function WebPlayer(props: any) {
   // @ts-ignore
   const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
   const params: { sessionId: string } = useParams();
+  const [fullView, setFullView] = useState(false);
 
   useEffect(() => {
     playerInst = undefined;
@@ -115,15 +116,20 @@ function WebPlayer(props: any) {
 
   useEffect(() => {
     if (uxtestingStore.isUxt()) {
-      setActiveTab('EVENTS')
+      setActiveTab('EVENTS');
     }
-  }, [uxtestingStore.isUxt()])
+  }, [uxtestingStore.isUxt()]);
 
   const onNoteClose = () => {
     setNoteItem(undefined);
     contextValue.player.play();
   };
 
+  useEffect(() => {
+    const isFullView = new URLSearchParams(location.search).get('fullview')
+    setFullView(isFullView === 'true');
+  }, [session.sessionId]);
+
   if (!session.sessionId)
     return (
       <Loader
@@ -133,20 +139,22 @@ function WebPlayer(props: any) {
           top: '50%',
           left: '50%',
           transform: 'translateX(-50%)',
-          height: 75,
+          height: 75
         }}
       />
     );
 
   return (
     <PlayerContext.Provider value={contextValue}>
-      <PlayerBlockHeader
-        // @ts-ignore TODO?
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        tabs={uxtestingStore.isUxt() ? UXTTABS : TABS}
-        fullscreen={fullscreen}
-      />
+      {!fullView && (
+        <PlayerBlockHeader
+          // @ts-ignore TODO?
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          tabs={uxtestingStore.isUxt() ? UXTTABS : TABS}
+          fullscreen={fullscreen}
+        />
+      )}
       {/* @ts-ignore  */}
       {contextValue.player ? (
         <PlayerContent
@@ -178,11 +186,11 @@ export default connect(
     fullscreen: state.getIn(['components', 'player', 'fullscreen']),
     showEvents: state.get('showEvents'),
     members: state.getIn(['members', 'list']),
-    startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
+    startedAt: state.getIn(['sessions', 'current']).startedAt || 0
   }),
   {
     toggleFullscreen,
     closeBottomBlock,
-    fetchList,
+    fetchList
   }
 )(withLocationHandlers()(observer(WebPlayer)));