michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Implement pip dragging

Browse source
This commit is contained in:
IceDBorn 2023-03-24 07:24:27 +02:00
parent 636e9ad6ef
commit 73374938f5
3 changed files with 98 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

147
src/app/organisms/room/JitsiRoom.jsx
View file

@ -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">
<div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'} ref={openerRef}>
{roomName}
</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 },
<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
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: {
video: {
height: {
ideal: 1080,
max: 2160,
min: 720,
constraints: {
video: {
height: {
ideal: 1080,
max: 2160,
min: 720,
},
},
},
},
maxBitratesVideo: {
H264: {
low: 200000,
standard: 500000,
high: 1500000,
maxBitratesVideo: {
H264: {
low: 200000,
standard: 500000,
high: 1500000,
},
VP8: {
low: 200000,
standard: 500000,
high: 1500000,
},
VP9: {
low: 100000,
standard: 300000,
high: 1200000,
},
},
VP8: {
low: 200000,
standard: 500000,
high: 1500000,
desktopSharingFrameRate: {
min: 30,
max: 60,
},
VP9: {
low: 100000,
standard: 300000,
high: 1200000,
},
},
desktopSharingFrameRate: {
min: 30,
max: 60,
},
resolution: 1080,
}}
interfaceConfigOverwrite={{
DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
}}
userInfo={{
displayName: getUsername(mx.getUserId()),
}}
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%';
}}
/>
resolution: 1080,
}}
interfaceConfigOverwrite={{
DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
}}
userInfo={{
displayName: getUsername(mx.getUserId()),
}}
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>
<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;