Implement pip dragging
This commit is contained in:
parent
636e9ad6ef
commit
73374938f5
3 changed files with 98 additions and 72 deletions
22
package-lock.json
generated
22
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue