Adding Room type with Converse.js replacing jitsi

.gitignore

@@ -18,6 +18,9 @@ app/email_config.sh
 app/config/overrides
 app/client/styles/themes/_active.scss
 
+# Node Modules
+app/client/node_modules/
+
 # Flask
 .DS_Store
 .env

app/client/jsx/ChatStreamRoom.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect } from "react";
+import Config from './Config.jsx';
+
+/**
+ * This component is used to render a Converse.js chat component on the
+ * left side and an IFrame on the right. While this component does have
+ * the jitsi-video class in the render it is only for placement: there
+ * is no jitsi video in this component.
+ *
+ * This component works in conjunction with the CHATSTREAM room type.
+ *
+ * @param props a combo of roomData and jitsiData
+ * @returns
+ */
+export const ChatStreamRoom = ({
+  id: roomId,
+  name: roomName,
+  displayName,
+  iframeOptions: { src },
+}) => {
+  // register the 'jitsi-plugin' and initialize converse and cleanup after close
+  useEffect(() => {
+    let logout = null;
+    let plugins = null;
+
+    // configure the 'jitsi-plugin' to get our hands on the converse api logout
+    try {
+      window.converse.plugins.add("jitsi-plugin", {
+        initialize: function () {
+          logout = this._converse.api.user.logout;
+          plugins = this._converse.pluggable.plugins;
+
+          // this._converse.api.listen.on("chatRoomViewInitialized", () => {
+          //   const title = document.querySelector(".chatbox-title__text");
+          //   const dd = document.querySelector(".chatbox-title__buttons");
+
+          //   title.innerHTML = roomName;
+          //   dd.remove();
+          // });
+        },
+      });
+    } catch (error) {
+      // do nothing since the plugin is already registered
+      console.error("Well, that didn't work");
+    }
+
+    // initialize converse
+    window.converse.initialize({
+      authentication: "anonymous",
+      auto_login: true,
+      auto_join_rooms: [
+        { jid: `${roomId}@muc.party.jitsi`, nick: displayName },
+      ],
+      bosh_service_url: `${Config.baseUrl}jitsi/http-bind`,
+      jid: "guest.party.jitsi",
+      singleton: true,
+      hide_offline_users: true,
+      clear_cache_on_logout: true,
+      whitelisted_plugins: ["jitsi-plugin"],
+      view_mode: "embedded",
+    });
+
+    // use MutationObserver to restucture the chatbox
+    const observer = new MutationObserver((muts) => {
+      if(document.querySelector('.chatbox-title__buttons')  !== null ) {
+        const title = document.querySelector(".chatbox-title__text");
+        const dd = document.querySelector(".chatbox-title__buttons");
+
+        title.innerHTML = roomName;
+        dd.remove();
+
+        observer.disconnect();
+      }
+    })
+
+    observer.observe(document, {childList: true, attributes: true, subtree: true})
+
+    // listen to beforeunload to logout and cleanup
+    window.addEventListener("beforeunload", () => {
+      plugins["jitsi-plugin"] = undefined;
+      logout();
+    });
+
+    // call the converse api logout at cleanup
+    return () => {
+      plugins["jitsi-plugin"] = undefined;
+      logout();
+    };
+  }, []);
+
+  return (
+    <div className="iframe-room">
+      <div className="jitsi-video"></div>
+      <div className="iframe-section">
+        <iframe src={src} height="100%" width="100%" frameBorder="0px"></iframe>
+      </div>
+    </div>
+  );
+};

app/client/jsx/Room.jsx

@@ -17,6 +17,7 @@ import { PokeNotification } from './Poke.jsx'
 import { WebSocketApi } from './WebAPI.jsx'
 import LocalStorage from './LocalStorage.jsx'
 import Config from './Config.jsx'
+import { ChatStreamRoom } from './ChatStreamRoom.jsx'
 
 class Room extends Component {
     /*
@@ -38,6 +39,7 @@ class Room extends Component {
         this.roomTypesWithMap = {
             JITSI: true,
             IFRAME: true,
+            CHATSTREAM: true,
             CONTENT: true,
             IMAGEMAP: true
         }
@@ -46,6 +48,7 @@ class Room extends Component {
         this.roomTypesWithDoors = {
             JITSI: true,
             IFRAME: true,
+            CHATSTREAM: true,
             IMAGEMAP: true
         }
 
@@ -85,10 +88,14 @@ class Room extends Component {
             hideVideo: roomData.hideVideo,
             disableSharing: roomData.type === 'IFRAME'
         }
+
+        const combo = { ...roomData, ...jitsiData };
+
         return {
             ART: <ArtRoom jitsiData={jitsiData} art={roomData.art}></ArtRoom>,
             JITSI: <JitsiVideo jitsiData={jitsiData}></JitsiVideo>,
             IFRAME: <IFrameRoom jitsiData={jitsiData} iframeOptions={roomData.iframeOptions}></IFrameRoom>,
+            CHATSTREAM: <ChatStreamRoom {...combo}></ChatStreamRoom>,
             ADVENTURE: <Adventure options={roomData} onClick={this.onAdventureClick.bind(this)}></Adventure>,
             IMAGEMAP: <ImageMapRoom imageMapOptions={roomData.imageMapOptions}></ImageMapRoom>
         }[roomData.type]

app/client/styles/main.scss

@@ -42,6 +42,7 @@
 @import 'pages/room',
 'pages/artRoom',
 'pages/iframeRoom',
+"pages/chatStreamRoom",
 'pages/exit',
 'pages/map',
 'pages/imageMapRoom';

app/client/styles/pages/_chatStreamRoom.scss

@@ -0,0 +1,60 @@
+$mobile_landscape_height: 450px !default;
+$mobile_portrait_length: 480px !default;
+
+#conversejs {
+  position: absolute !important;
+  top: 10% !important;
+  bottom: auto !important;
+  width: 45vw !important;
+  left: 1vw !important;
+  height: 66% !important;
+  z-index: 9 !important;
+
+  .badge,
+  .chat-info,
+  .hide-occupants {
+    display: none !important;
+  }
+
+  .chat-head {
+    background-color: $background-color !important;
+  }
+
+  .chat-textarea:focus {
+    outline-color: $background-color !important;
+  }
+
+  .occupants-heading {
+    color: $background-color !important;
+  }
+
+  .occupant-status {
+    vertical-align: sub;
+  }
+
+  .occupant-nick {
+    font-size: 0.9rem;
+  }
+
+  .chatroom {
+    converse-chat-toolbar {
+      border-top: 2px solid $background-color !important;
+
+      button:focus {
+        outline-color: $background-color !important;
+      }
+
+      svg {
+        fill: $background-color !important;
+      }
+    }
+  }
+
+  .separator {
+    border-bottom: 2px solid $background-color !important;
+  }
+
+  .send-button {
+    background-color: $background-color !important;
+  }
+}

app/config/schema/rooms.proto

@@ -18,6 +18,7 @@ enum RoomType {
     IMAGEMAP = 4;
     ART = 5;
     REDIRECT = 6;
+    CHATSTREAM = 7;
 }
 
 message Room {
@@ -93,6 +94,11 @@ message Room {
     // The page to redirect to
     // Required for redirect rooms.
     string route = 16;
+
+    // CHATSTREAM ROOMS ONLY
+    // Options related to the bosh service
+    // Required for chat streaming rooms.
+    string boshUrl = 17;
 }
 
 message NavDirections {