Implement conditional PiP support

src/app/organisms/room/JitsiRoom.jsx

@@ -12,7 +12,7 @@ import Button from '../../atoms/button/Button';
 
 const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a'
 
-function JitsiRoom() {
+function JitsiRoom({ setIsJitsiRoom }) {
   const [jitsiCallId, setJitsiCallId] = useState(null);
 
   const [roomInfo, setRoomInfo] = useState({
@@ -47,6 +47,8 @@ function JitsiRoom() {
           });
         }
       }
+
+      setIsJitsiRoom(topic === TOPIC_JITSI_CALL)
     };
 
     navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);

src/app/organisms/room/Room.jsx

@@ -13,7 +13,7 @@ import RoomView from './RoomView';
 import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
 
-function Room() {
+function Room({ isJitsiRoom }) {
   const [roomInfo, setRoomInfo] = useState({
     roomTimeline: null,
     eventId: null,
@@ -60,10 +60,7 @@ function Room() {
     return <Welcome />;
   }
 
-  const isJitsiChannel =
-    roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic ===
-    'd38dd491fefa1cfffc27f9c57f2bdb4a';
-  if (isJitsiChannel) {
+  if (isJitsiRoom) {
     return null;
   }
 

src/app/templates/client/Client.jsx

@@ -27,6 +27,7 @@ function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
+  const [isJitsiRoom, setIsJitsiRoom] = useState(false);
   const classNameHidden = 'client__item-hidden';
 
   const navWrapperRef = useRef(null);
@@ -161,6 +162,9 @@ function Client() {
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
 
+  const JITSI_ROOM_CLASS = 'jitsi_room__wrapper'
+  const ROOM_CLASS = `room__wrapper ${classNameHidden}`
+
   return (
     <div
       className="client-container"
@@ -169,14 +173,14 @@ function Client() {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="jitsi_room__wrapper">
-        <JitsiRoom />
-      </div>
       <div className="navigation__wrapper" ref={navWrapperRef}>
         <Navigation />
       </div>
-      <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
-        <Room />
+      <div className={isJitsiRoom ? ROOM_CLASS : JITSI_ROOM_CLASS}>
+        <JitsiRoom setIsJitsiRoom={setIsJitsiRoom} />
+      </div>
+      <div className={isJitsiRoom ? 'hidden' : ROOM_CLASS} ref={roomWrapperRef}>
+        <Room isJitsiRoom={isJitsiRoom} />
       </div>
       <Windows />
       <Dialogs />

src/app/templates/client/Client.scss

@@ -51,6 +51,10 @@
   }
 }
 
+.hidden {
+  display: none;
+}
+
 .loading-display {
   position: absolute;
   top: 0;