From 83c86dc5f2e92b3ee6a82c7401c8f3707e4f8297 Mon Sep 17 00:00:00 2001 From: IceDBorn Date: Tue, 21 Mar 2023 08:36:23 +0200 Subject: [PATCH] Create call component to keep it alive upon changing channels --- src/app/organisms/room/JitsiRoom.jsx | 133 +++++++++++++++++++++++++++ src/app/organisms/room/Room.jsx | 59 +----------- src/app/organisms/room/Room.scss | 4 + src/app/templates/client/Client.jsx | 4 + src/app/templates/client/Client.scss | 23 +++++ 5 files changed, 169 insertions(+), 54 deletions(-) create mode 100644 src/app/organisms/room/JitsiRoom.jsx diff --git a/src/app/organisms/room/JitsiRoom.jsx b/src/app/organisms/room/JitsiRoom.jsx new file mode 100644 index 00000000..0a93570d --- /dev/null +++ b/src/app/organisms/room/JitsiRoom.jsx @@ -0,0 +1,133 @@ +import React, { useState, useEffect, useRef } from 'react'; +import './Room.scss'; +import { JitsiMeeting } from '@jitsi/react-sdk'; + +import initMatrix from '../../../client/initMatrix'; +import cons from '../../../client/state/cons'; +import RoomTimeline from '../../../client/state/RoomTimeline'; +import navigation from '../../../client/state/navigation'; +import { openNavigation } from '../../../client/action/navigation'; +import { getUsername } from '../../../util/matrixUtil'; +import Button from '../../atoms/button/Button'; + +function JitsiRoom() { + const [roomInfo, setRoomInfo] = useState({ + roomTimeline: null, + eventId: null, + }); + const [activeCall, setActiveCall] = useState(false); + const [roomName, setRoomName] = useState(''); + const [roomId, setRoomId] = useState(''); + const openerRef = useRef(null); + + const mx = initMatrix.matrixClient; + + useEffect(() => { + const handleRoomSelected = (rId, pRoomId, eId) => { + roomInfo.roomTimeline?.removeInternalListeners(); + if (mx.getRoom(rId)) { + setRoomInfo({ + roomTimeline: new RoomTimeline(rId), + eventId: eId ?? null, + }); + } else { + // TODO: add ability to join room if roomId is invalid + setRoomInfo({ + roomTimeline: null, + eventId: null, + }); + } + }; + + navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected); + return () => { + navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected); + }; + }, [mx, roomInfo]); + + const { roomTimeline } = roomInfo; + if (roomTimeline === null) { + setTimeout(() => openNavigation()); + return null; + } + + if ( + roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent() + .topic === 'd38dd491fefa1cfffc27f9c57f2bdb4a' || + activeCall + ) { + if (!activeCall) { + setActiveCall(true); + if (roomName === '') { + setRoomName(roomTimeline.roomName); + } + } + return ( +
+ + + + { + // here you can attach custom event listeners to the Jitsi Meet External API + // you can also store it locally to execute commands + }} + /> +
+ ); + } + + if (!activeCall) { + return (
); + } +} + +export default JitsiRoom; diff --git a/src/app/organisms/room/Room.jsx b/src/app/organisms/room/Room.jsx index de05e17d..44209836 100644 --- a/src/app/organisms/room/Room.jsx +++ b/src/app/organisms/room/Room.jsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; import './Room.scss'; -import { JitsiMeeting } from '@jitsi/react-sdk'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; @@ -13,7 +12,7 @@ import Welcome from '../welcome/Welcome'; import RoomView from './RoomView'; import RoomSettings from './RoomSettings'; import PeopleDrawer from './PeopleDrawer'; -import { getUsername } from '../../../util/matrixUtil'; +import Button from '../../atoms/button/Button'; function Room() { const [roomInfo, setRoomInfo] = useState({ @@ -66,58 +65,10 @@ function Room() { 'd38dd491fefa1cfffc27f9c57f2bdb4a' ) { return ( - { - // here you can attach custom event listeners to the Jitsi Meet External API - // you can also store it locally to execute commands - }} - /> +
+ You are already in another call, do you want to switch to this one? + +
); } diff --git a/src/app/organisms/room/Room.scss b/src/app/organisms/room/Room.scss index 11a00074..f779cb71 100644 --- a/src/app/organisms/room/Room.scss +++ b/src/app/organisms/room/Room.scss @@ -17,3 +17,7 @@ display: none; } } + +.hiddenJitsiCall { + display:none !important; +} diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx index d83845b8..0ea34493 100644 --- a/src/app/templates/client/Client.jsx +++ b/src/app/templates/client/Client.jsx @@ -11,6 +11,7 @@ import ContextMenu, { MenuItem } from '../../atoms/context-menu/ContextMenu'; import IconButton from '../../atoms/button/IconButton'; import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu'; import Room from '../../organisms/room/Room'; +import JitsiRoom from '../../organisms/room/JitsiRoom'; import Windows from '../../organisms/pw/Windows'; import Dialogs from '../../organisms/pw/Dialogs'; import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener'; @@ -165,6 +166,9 @@ function Client() { onDragLeave={handleDragLeave} onDrop={handleDrop} > +
+ +
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss index d45bd61b..0ff5c644 100644 --- a/src/app/templates/client/Client.scss +++ b/src/app/templates/client/Client.scss @@ -19,6 +19,29 @@ @extend .cp-fx__item-one; } +.jitsi_room__wrapper { + display: grid; + position: absolute; + top: 20rem; + left: 55rem; + z-index: 2000; + border: 1px solid gray; + border-radius: 5px; +} + +.call_header{ + z-index: 2001; + cursor: move; + text-align: center; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.call{ + user-select: none; + background-color: darkgray; +} + @include screen.smallerThan(mobileBreakpoint) { .client__item-hidden { display: none;