Add In-App Chat into greenroom

Allowing presenter to chat with participants
RocketChat · Mar 12, 2022 · a6e9464 · a6e9464
1 parent a6b9dd9
commit a6e9464
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/app/.env.local.sample b/app/.env.local.sample
@@ -24,4 +24,6 @@ COOKIE_SECRET_PREVIOUS=
 # for development http://localhost:3000
 NEXT_PUBLIC_ROCKET_CHAT_HOST=required
 # id of the room where conf will take place
-NEXT_PUBLIC_ROCKET_CHAT_CONF_RID=required
+NEXT_PUBLIC_ROCKET_CHAT_CONF_RID=required
+# id of the greenroom
+NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RID=required
diff --git a/app/pages/virtualconf/greenroom/index.js b/app/pages/virtualconf/greenroom/index.js
@@ -1,29 +1,59 @@
+import { useState } from "react";
 import Head from "next/head";
+import Script from "next/script";
 import styles from "../../../styles/Mainstage.module.css";
 import { Container, Row, Col } from "react-bootstrap";
 import Jitsibroadcaster from '../../../components/clientsideonly/jitsibroadcaster'
+import InAppChat from "../../../components/inappchat/inappchat";
+import { Button } from "react-bootstrap";
 
-const Greenroom = () => {
+const greenroom_rid = process.env.NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RID;
+
+const Greenroom = ({ cookies }) => {
+	const [openChat, setOpenChat] = useState(false);
+
+  	const handleOpenChat = () => {
+    	setOpenChat((prevState) => !prevState);
+  	};
 	return (
 		<>
 			<Head>
 				<title>Conference Green Room</title>
 			</Head>
+			<Script
+          		src="https://cdn.jsdelivr.net/npm/[email protected]/lib/js/joypixels.min.js"
+          		strategy="afterInteractive"
+          		onLoad={() =>
+            		console.log(`script loaded correctly, joypixels`)
+          		}
+        	/>
 			<main className={styles.main}>
 				<div className={styles.container}>
 				</div>
+				{openChat ? (
+          			<InAppChat closeChat={handleOpenChat} cookies={cookies} rid={greenroom_rid} />
+        			) : (
+          			<Button style={{ float: 'right' }} onClick={handleOpenChat}>Open Chat</Button>
+        		)}
 				<Container>
 					<Row>
 						<Col>
 							<Jitsibroadcaster />
 						</Col>
 					</Row>
 				</Container>
-
 			</main>
 		</>
 
 	)
 }
 
 export default Greenroom;
+
+Greenroom.getInitialProps = ({ req }) => {
+	const cookies = req.cookies;
+
+	return {
+	  cookies,
+	};
+  };