change(ui): support to hide devtools and events

frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx

@@ -24,6 +24,7 @@ const SESSIONS_ROUTE = sessionsRoute();
 // TODO props
 function PlayerBlockHeader(props: any) {
   const [hideBack, setHideBack] = React.useState(false);
+  const [isHideEvents, setHideEvents] = React.useState(false);
   const { player, store } = React.useContext(PlayerContext);
 
   const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false }
@@ -47,6 +48,9 @@ function PlayerBlockHeader(props: any) {
     const iframe = localStorage.getItem(IFRAME) || false;
     setHideBack(!!iframe && iframe === 'true');
 
+    const isHideEvents = new URLSearchParams(window.location.search).get('hideEvents');
+    setHideEvents(isHideEvents === 'true');
+
     if (metaList.size === 0) fetchMetadata();
   }, []);
 
@@ -110,6 +114,7 @@ function PlayerBlockHeader(props: any) {
           )}
         </div>
       </div>
+      {!isHideEvents && (
         <div className="relative border-l" style={{ minWidth: '270px' }}>
           <Tabs
             tabs={TABS}
@@ -126,6 +131,7 @@ function PlayerBlockHeader(props: any) {
             border={false}
           />
         </div>
+      )}
     </div>
   );
 }

frontend/app/components/Session_/Player/Controls/Controls.tsx

@@ -31,6 +31,7 @@ import PlayerControls from './components/PlayerControls';
 import styles from './controls.module.css';
 import XRayButton from 'Shared/XRayButton';
 import CreateNote from 'Components/Session_/Player/Controls/components/CreateNote';
+import { IFRAME } from 'App/constants/storageKeys';
 
 export const SKIP_INTERVALS = {
   2: 2e3,
@@ -61,6 +62,7 @@ function getStorageName(type: any) {
 
 function Controls(props: any) {
   const { player, store } = React.useContext(PlayerContext);
+  const [isHideDev, setHideDev] = React.useState(false);
 
   const {
     playing,
@@ -85,6 +87,11 @@ function Controls(props: any) {
 
   const disabled = disabledRedux || messagesLoading || inspectorMode || markedTargets;
 
+  React.useEffect(() => {
+    const isHideDev = new URLSearchParams(window.location.search).get('hideDev');
+    setHideDev(isHideDev === 'true');
+  }, []);
+
   const onKeyDown = (e: any) => {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
       return;
@@ -168,16 +175,19 @@ function Controls(props: any) {
             />
           </div>
 
-          <div className="flex items-center h-full">
-            <DevtoolsButtons
-              showStorageRedux={showStorageRedux}
-              disabledRedux={disabledRedux}
-              toggleBottomTools={toggleBottomTools}
-              bottomBlock={bottomBlock}
-              markedTargets={markedTargets}
-              messagesLoading={messagesLoading}
 
-            />
+          <div className="flex items-center h-full">
+            {!isHideDev && (
+              <DevtoolsButtons
+                showStorageRedux={showStorageRedux}
+                disabledRedux={disabledRedux}
+                toggleBottomTools={toggleBottomTools}
+                bottomBlock={bottomBlock}
+                markedTargets={markedTargets}
+                messagesLoading={messagesLoading}
+
+              />
+            )}
             <Tooltip title="Fullscreen" delay={0} placement="top-start" className="mx-4">
               <FullScreenButton
                 size={16}