Updated patch build from main ae1a49fd91 (#2059)

* change(ui): fullView param to restrict to player content

* Increment frontend chart version

---------

Co-authored-by: Shekar Siri <sshekarsiri@gmail.com>
Co-authored-by: GitHub Action <action@github.com>

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);

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 activeTab={activeTab} />
+              <PlayerBlock activeTab={activeTab} fullView={fullView} />
             </div>
           </div>
           {activeTab !== '' && (

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)));

scripts/helmcharts/openreplay/charts/frontend/Chart.yaml

@@ -1,7 +1,6 @@
 apiVersion: v2
 name: frontend
 description: A Helm chart for Kubernetes
-
 # A chart can be either an 'application' or a 'library' chart.
 #
 # Application charts are a collection of templates that can be packaged into versioned archives
@@ -11,14 +10,12 @@ description: A Helm chart for Kubernetes
 # a dependency of application charts to inject those utilities and functions into the rendering
 # pipeline. Library charts do not define any templates and therefore cannot be deployed.
 type: application
-
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (frontends://semver.org/)
 version: 0.1.16
-
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-AppVersion: "v1.17.6"
+AppVersion: "v1.17.7"