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,84 +69,86 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
 
   if (jitsiCallId) {
     return (
-      <div className="call">
+      <Draggable disabled={isJitsiRoom}>
-        <div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'} ref={openerRef}>
+        <div className="call">
-          {roomName}
+          <div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'} ref={openerRef}>
-        </div>
+            {roomName}
-        <div className="call_iframe">
+            <div className="call_buttons">
-          <JitsiMeeting
+              <Button
-            key={counter}
+                onClick={() => {
-            domain="meet.calyx.net"
+                  setJitsiCallId(null);
-            roomName={`${roomName} ${roomTimeline.roomId.replace(':matrix.org', '')}`}
+                  setRoomName('');
-            configOverwrite={{
+                  setRoomInfo({
-              disableReactions: true,
+                    roomTimeline: null,
-              disablePolls: true,
+                    eventId: null,
-              prejoinConfig: { enabled: false },
+                  });
-              liveStreaming: { enabled: false },
+                }}
+                className="close_button"
+              >
+                <img src={SearchIC} alt="hangup" />
+              </Button>
+            </div>
+          </div>
+          <div className="call_iframe">
+            <JitsiMeeting
+              key={counter}
+              domain="meet.calyx.net"
+              roomName={`${roomName} ${roomTimeline.roomId.replace(':matrix.org', '')}`}
+              configOverwrite={{
+                disableReactions: true,
+                disablePolls: true,
+                prejoinConfig: { enabled: false },
+                liveStreaming: { enabled: false },
 
-              constraints: {
+                constraints: {
-                video: {
+                  video: {
-                  height: {
+                    height: {
-                    ideal: 1080,
+                      ideal: 1080,
-                    max: 2160,
+                      max: 2160,
-                    min: 720,
+                      min: 720,
+                    },
                   },
                 },
-              },
+                maxBitratesVideo: {
-              maxBitratesVideo: {
+                  H264: {
-                H264: {
+                    low: 200000,
-                  low: 200000,
+                    standard: 500000,
-                  standard: 500000,
+                    high: 1500000,
-                  high: 1500000,
+                  },
+                  VP8: {
+                    low: 200000,
+                    standard: 500000,
+                    high: 1500000,
+                  },
+                  VP9: {
+                    low: 100000,
+                    standard: 300000,
+                    high: 1200000,
+                  },
                 },
-                VP8: {
+                desktopSharingFrameRate: {
-                  low: 200000,
+                  min: 30,
-                  standard: 500000,
+                  max: 60,
-                  high: 1500000,
                 },
-                VP9: {
+                resolution: 1080,
-                  low: 100000,
+              }}
-                  standard: 300000,
+              interfaceConfigOverwrite={{
-                  high: 1200000,
+                DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
-                },
+              }}
-              },
+              userInfo={{
-              desktopSharingFrameRate: {
+                displayName: getUsername(mx.getUserId()),
-                min: 30,
+              }}
-                max: 60,
+              onApiReady={(externalApi) => {
-              },
+                // here you can attach custom event listeners to the Jitsi Meet External API
-              resolution: 1080,
+                // you can also store it locally to execute commands
-            }}
+              }}
-            interfaceConfigOverwrite={{
+              getIFrameRef={(iframeRef) => {
-              DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
+                iframeRef.style.height = '96%';
-            }}
+              }}
-            userInfo={{
+            />
-              displayName: getUsername(mx.getUserId()),
+          </div>
-            }}
-            onApiReady={(externalApi) => {
-              // here you can attach custom event listeners to the Jitsi Meet External API
-              // you can also store it locally to execute commands
-            }}
-            getIFrameRef={(iframeRef) => {
-              iframeRef.style.height = '96%';
-            }}
-          />
         </div>
-        <div className="call_buttons">
+      </Draggable>
-          <Button
-            onClick={() => {
-              setJitsiCallId(null);
-              setRoomName('');
-              setRoomInfo({
-                roomTimeline: null,
-                eventId: null,
-              });
-            }}
-            className="close_button"
-          >
-            <img src={SearchIC} alt="hangup" />
-          </Button>
-        </div>
-      </div>
     );
   }
   return null;