Implement pip dragging

package-lock.json

@@ -34,6 +34,7 @@
         "react-dnd": "15.1.2",
         "react-dnd-html5-backend": "15.1.3",
         "react-dom": "17.0.2",
+        "react-draggable": "4.4.5",
         "react-google-recaptcha": "2.1.0",
         "react-modal": "3.16.1",
         "sanitize-html": "2.8.0",
@@ -1889,6 +1890,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4470,6 +4479,19 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",

package.json

@@ -44,6 +44,7 @@
     "react-dnd": "15.1.2",
     "react-dnd-html5-backend": "15.1.3",
     "react-dom": "17.0.2",
+    "react-draggable": "4.4.5",
     "react-google-recaptcha": "2.1.0",
     "react-modal": "3.16.1",
     "sanitize-html": "2.8.0",

src/app/organisms/room/JitsiRoom.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import './JitsiRoom.scss';
 import { JitsiMeeting } from '@jitsi/react-sdk';
 import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
+import Draggable from 'react-draggable';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -68,9 +69,25 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
 
   if (jitsiCallId) {
     return (
+      <Draggable disabled={isJitsiRoom}>
         <div className="call">
           <div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'} ref={openerRef}>
             {roomName}
+            <div className="call_buttons">
+              <Button
+                onClick={() => {
+                  setJitsiCallId(null);
+                  setRoomName('');
+                  setRoomInfo({
+                    roomTimeline: null,
+                    eventId: null,
+                  });
+                }}
+                className="close_button"
+              >
+                <img src={SearchIC} alt="hangup" />
+              </Button>
+            </div>
           </div>
           <div className="call_iframe">
             <JitsiMeeting
@@ -130,22 +147,8 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
               }}
             />
           </div>
-        <div className="call_buttons">
-          <Button
-            onClick={() => {
-              setJitsiCallId(null);
-              setRoomName('');
-              setRoomInfo({
-                roomTimeline: null,
-                eventId: null,
-              });
-            }}
-            className="close_button"
-          >
-            <img src={SearchIC} alt="hangup" />
-          </Button>
-        </div>
         </div>
+      </Draggable>
     );
   }
   return null;