From f2cd253bc3d717173a4c9dbf60530a818da53368 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Tue, 12 Mar 2024 10:13:10 +0100
Subject: [PATCH] fix(ui): fix assist console resize (#1942)

---
 .../Player/LivePlayer/LivePlayerInst.tsx      | 84 ++++++++++++-------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
index 930a368f4..ef3630df8 100644
--- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
@@ -1,14 +1,18 @@
+import {
+  debounceUpdate,
+  getDefaultPanelHeight,
+} from 'Components/Session/Player/ReplayPlayer/PlayerInst';
 import React from 'react';
 import { connect } from 'react-redux';
 import { findDOMNode } from 'react-dom';
 import cn from 'classnames';
 import LiveControls from './LiveControls';
 import ConsolePanel from 'Shared/DevTools/ConsolePanel';
-import { observer } from 'mobx-react-lite'
+import { observer } from 'mobx-react-lite';
 import Overlay from './Overlay';
 import stl from 'Components/Session_/Player/player.module.css';
 import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
-import { CONSOLE } from "Duck/components/player";
+import { CONSOLE } from 'Duck/components/player';
 
 interface IProps {
   closedLive: boolean;
@@ -18,16 +22,13 @@ interface IProps {
 }
 
 function Player(props: IProps) {
-  const {
-    closedLive,
-    fullView,
-    isMultiview,
-    bottomBlock,
-  } = props;
+  const defaultHeight = getDefaultPanelHeight();
+  const [panelHeight, setPanelHeight] = React.useState(defaultHeight);
+  const { closedLive, fullView, isMultiview, bottomBlock } = props;
   // @ts-ignore TODO
   const playerContext = React.useContext<ILivePlayerContext>(PlayerContext);
   const screenWrapper = React.useRef<HTMLDivElement>(null);
-  const ready = playerContext.store.get().ready
+  const ready = playerContext.store.get().ready;
 
   React.useEffect(() => {
     if (!props.closedLive || isMultiview) {
@@ -46,37 +47,58 @@ function Player(props: IProps) {
   if (!playerContext.player) return null;
 
   const maxWidth = '100vw';
+
+  const handleResize = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = panelHeight;
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaY = e.clientY - startY;
+      const diff = startHeight - deltaY;
+      const max = diff > window.innerHeight / 2 ? window.innerHeight / 2 : diff;
+      const newHeight = Math.max(50, max);
+      setPanelHeight(newHeight);
+      debounceUpdate(newHeight);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
   return (
-    <div
-      className={cn(stl.playerBody, 'flex flex-1 flex-col relative')}
-    >
+    <div className={cn(stl.playerBody, 'flex flex-1 flex-col relative')}>
       <div className="relative flex-1 overflow-hidden">
         <Overlay closedLive={closedLive} />
         <div className={cn(stl.screenWrapper, stl.checkers)} ref={screenWrapper} />
       </div>
       {bottomBlock === CONSOLE ? (
-        <div style={{ maxWidth, width: '100%' }}>
-          <ConsolePanel isLive />
+        <div style={{ maxWidth, width: '100%', height: panelHeight, position: 'relative', overflow: 'hidden' }}>
+          <div
+            onMouseDown={handleResize}
+            className={'w-full h-2 cursor-ns-resize absolute top-0 left-0 z-20'}
+          >
+            <ConsolePanel isLive />
+          </div>
         </div>
       ) : null}
-      {!fullView && !isMultiview ? (
-        <LiveControls
-          jump={playerContext.player.jump}
-        />
-      ) : null}
+      {!fullView && !isMultiview ? <LiveControls jump={playerContext.player.jump} /> : null}
     </div>
   );
 }
 
-export default connect(
-  (state: any) => {
-    const isAssist = window.location.pathname.includes('/assist/');
-    return {
-      sessionId: state.getIn(['sessions', 'current']).sessionId,
-      bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-      closedLive:
-        !!state.getIn(['sessions', 'errors']) ||
-        (isAssist && !state.getIn(['sessions', 'current']).live),
-    };
-  }
-)(observer(Player));
+export default connect((state: any) => {
+  const isAssist = window.location.pathname.includes('/assist/');
+  return {
+    sessionId: state.getIn(['sessions', 'current']).sessionId,
+    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
+    closedLive:
+      !!state.getIn(['sessions', 'errors']) ||
+      (isAssist && !state.getIn(['sessions', 'current']).live),
+  };
+})(observer(Player));