From 5877b3e00d3e38464a549b7a2e78ce64a337d0c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Mar 2021 20:33:19 +0100
Subject: [PATCH] Add resizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/voip/CallViewForRoom.tsx | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index 7085cda21a..50fb889766 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 import CallHandler from '../../../CallHandler';
 import CallView from './CallView';
 import dis from '../../../dispatcher/dispatcher';
+import {Resizable} from "re-resizable";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 
 interface IProps {
@@ -80,11 +81,51 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
         return call;
     }
 
+    onResizeStart = () => {
+        this.props.resizeNotifier.startResizing();
+    }
+
+    onResize = () => {
+        this.props.resizeNotifier.notifyTimelineHeightChanged();
+    }
+
+    onResizeStop = () => {
+        this.props.resizeNotifier.stopResizing();
+    }
+
     public render() {
         if (!this.state.call) return null;
+        // We subtract 8 as it the margin-bottom of the mx_CallViewForRoom_ResizeWrapper
+        const maxHeight = this.props.maxVideoHeight - 8;
 
-        return <CallView call={this.state.call} pipMode={false}
-            onResize={this.props.onResize} maxVideoHeight={this.props.maxVideoHeight}
-        />;
+        return (
+            <div className="mx_CallViewForRoom">
+                <Resizable
+                    minHeight={300}
+                    maxHeight={maxHeight}
+                    enable={{
+                        top: false,
+                        right: false,
+                        bottom: true,
+                        left: false,
+                        topRight: false,
+                        bottomRight: false,
+                        bottomLeft: false,
+                        topLeft: false,
+                    }}
+                    onResizeStart={this.onResizeStart}
+                    onResize={this.onResize}
+                    onResizeStop={this.onResizeStop}
+                    className="mx_CallViewForRoom_ResizeWrapper"
+                    handleClasses={{bottom: "mx_CallViewForRoom_ResizeHandle"}}
+                >
+                    <CallView
+                        call={this.state.call}
+                        pipMode={false}
+                        onResize={this.props.onResize}
+                    />
+                </Resizable>
+            </div>
+        );
     }
 }