Merge pull request #135 from Chatmosphere/Chat-and-Stage

Chat and stage - first implementation

src/addons/Chat/index.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useState } from 'react'
+import styled from 'styled-components'
+import Card from "../../components/common/Card"
+import { useConferenceStore } from '../../store/ConferenceStore'
+import { MdMessage } from 'react-icons/md'
+
+const SendButton = styled.button`
+
+`
+const Input = styled.div`
+	position:absolute;
+	bottom: 10px;
+	right: 10px;
+	left: 10px;
+	display: flex;
+	border-radius: 4px;
+	height: 48px;
+	flex-direction: row;
+	background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(220, 222, 225, 1);
+	justify-content: space-between;
+`
+const StyledTextarea = styled.textarea`
+	display: table-cell; 
+	vertical-align: middle;
+	resize: none;
+	margin: 5px;
+	flex-grow: 3;
+	border: none;
+	outline: none;
+`
+
+const ContentArea = styled.div`
+	position: absolute;
+	right: 15px;
+	left: 15px;
+	top: 80px;
+	bottom: 80px;
+	overflow: scroll;
+`
+
+const ChatElement = styled.div`
+	margin-bottom:15px;
+	width: 100%;
+	text-align: left;
+`
+
+
+const UserName = styled.div`
+	color: #79809a;
+  font-size: 1em;
+  line-height: 1.2em;
+	padding: 0 0 3px 0;
+	font-weight: bolder;
+	`
+const MessageText = styled.p`
+		color: #272a35;
+		font-size: 1em;
+		line-height: 1.2em;
+		margin: 0;
+		padding: 0;
+	`
+const Button = styled.button`
+	border: none;
+	height: 50px;
+	width: 50px;
+	font-size: 1.4rem;
+	line-height: 1.4rem;
+	border-radius:50px;
+	background: none;
+	:hover {
+		background-color:#fefefe;
+	}
+	:active {
+		background-color:#efefef;
+	}
+`
+
+const Label = styled.span`
+	border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+`
+
+
+const Modal = ({callback}) => {
+
+	const conference = useConferenceStore(store => store.conferenceObject)
+	const users = useConferenceStore(store => store.users, (oldState, newState) => Object.keys(oldState).length === Object.keys(newState).length)
+	const messages = useConferenceStore(store => store.messages)
+
+	const sendMessage = useCallback((msg) => {
+		const el = document.querySelector<HTMLInputElement>('#chatInput')
+		const txt = el?.value
+		if(txt)	{
+			el.value = ""
+			conference?.sendTextMessage(txt)
+		}
+		// document.querySelector<HTMLInputElement>('#chatInput').value = ''
+	},[conference])
+
+
+	return (
+		<Card title="Chat" callback={callback}>
+			<ContentArea>
+				{
+					messages.map((message, key) => {
+						if(users[message.id]) {
+							return (
+								<ChatElement key={key}>
+									<UserName>
+										{users?.[message.id].user._displayName}
+									</UserName>
+									<MessageText>
+										{message.text}
+									</MessageText>
+								</ChatElement>
+							)
+						}
+						return (<ChatElement key={key}>
+							<UserName>
+								You
+							</UserName>
+							<MessageText>
+								{message.text}
+							</MessageText>
+						</ChatElement>)
+					})
+				}
+			</ContentArea>
+
+			<Input>
+				<StyledTextarea id="chatInput"/>
+				<SendButton onClick={sendMessage}>Send</SendButton>
+			</Input>
+		</Card>
+	)
+}
+
+
+const Chat = () => {
+
+  const	[show, toggleShow] = useState(false)
+
+	return (
+		<>
+		<Button onClick={() => toggleShow(!show)}><MdMessage /> <Label>Chat</Label></Button>
+		{show && <Modal callback={() => toggleShow(!show)} />}
+		</>
+	)
+}
+
+export default Chat

src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from "react"
+import React from "react"
 import styled from 'styled-components'
-import { useAddonsStore } from "../../addons/addonsStore"
+import Chat from "../../addons/Chat"
 
 
 const Container = styled.div`
@@ -35,28 +35,27 @@ export const Footer: React.FC = ({ children }) => {
   return (
     <Container>
       <LeftBox></LeftBox>
-      <CenterBox id="footer_center">
-        {children}
-        <ConnectedFooterAddons />
+      <CenterBox>
+       {children}
       </CenterBox>
       <RightBox>
-
+        <Chat />
       </RightBox>
     </Container>
   )
 }
 
-const ConnectedFooterAddons = () => {
-  const footerEl = useAddonsStore(
-    useCallback((store) => store.footerElements, []),
-  )
-
-  return (
-    <>
-      {footerEl?.map((b) => {
-        console.log(b)
-        return b?.el
-      })}
-    </>
-  )
-}
+// const ConnectedFooterAddons = () => {
+//   const footerEl = useAddonsStore(
+//     useCallback((store) => store.footerElements, []),
+//   )
+//
+//   return (
+//     <>
+//       {footerEl?.map((b) => {
+//         console.log(b)
+//         return b?.el
+//       })}
+//     </>
+//   )
+// }

src/components/common/Card/index.tsx

@@ -26,13 +26,13 @@ const Close = styled.button`
 
 `
 
-export const Card = ({title, children}) => {
+export const Card = ({title, callback=()=>null, children}) => {
 
 	return (
 	<Box>
 		<Header>
 			<Title>{title}</Title>
-			<Close>Close</Close>
+			<Close onClick={callback}>Close</Close>
 		</Header>
 		{children}
 	</Box>

src/store/ConferenceStore.tsx

@@ -25,6 +25,7 @@ export const useConferenceStore = create<IConferenceStore>((set,get) => {
     users:{},
     displayName:"Friendly Sphere",
     error:undefined,
+    messages:[]
   }
 
   const produceAndSet = (callback:(newState:IConferenceStore)=>void)=>set(state => produce(state, newState => callback(newState)))
@@ -94,6 +95,10 @@ export const useConferenceStore = create<IConferenceStore>((set,get) => {
     conference?.setDisplayName(get().displayName)
   }
 
+  const _onMessageReceived = (id:string, text:string, nr:number) => {
+    set((store) => ({messages: [...store.messages, {id:id, text:text, nr:nr}]}))
+  }
+
   const _onParticipantPropertyChanged = (e:any) => {
     const id = e._id
     const props = e._properties
@@ -125,6 +130,8 @@ export const useConferenceStore = create<IConferenceStore>((set,get) => {
       conference.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, _onConferenceJoined)
       conference.on(JitsiMeetJS.events.conference.TRACK_MUTE_CHANGED, _onTrackMuteChanged);
       conference.on(JitsiMeetJS.events.conference.CONFERENCE_ERROR, _onConferenceError);
+      conference.on(JitsiMeetJS.events.conference.MESSAGE_RECEIVED, _onMessageReceived);
+      //conference.on(JitsiMeetJS.events.conference.DISPLAY_NAME_CHANGED, onUserNameChanged);
       conference.on(JitsiMeetJS.events.conference.PARTICIPANT_PROPERTY_CHANGED, _onParticipantPropertyChanged)
       conference.on(JitsiMeetJS.events.conference.DISPLAY_NAME_CHANGED, _onUserNameChanged);
       // conference.on(JitsiMeetJS.events.conference.TRACK_AUDIO_LEVEL_CHANGED, on_remote_track_audio_level_changed);
@@ -190,4 +197,4 @@ export const useConferenceStore = create<IConferenceStore>((set,get) => {
 if(process.env.NODE_ENV === 'development') {
   // @ts-ignore: Unreachable code error
 	mountStoreDevtool('ConferenceStore', useConferenceStore)
-}
+}

src/store/LocalStore.tsx

@@ -209,4 +209,4 @@ if (process.env.NODE_ENV === "development") {
   document.body.appendChild(root);
   // @ts-ignore: Unreachable code error
   mountStoreDevtool("LocalStore", useLocalStore, root)
-}
+}

src/store/index.d.ts

@@ -33,9 +33,10 @@ declare type IJitsiConference={
   setReceiverConstraints:(object)=>void
   leave:()=>void
   setLocalParticipantProperty:(key:string,value:any)=>void
+  sendTextMessage:(txt:string)=>void
 }
 
-declare type IJitsiEvents = {
+declare interface IJitsiEvents {
   track: {
     LOCAL_TRACK_STOPPED
     TRACK_AUDIO_OUTPUT_CHANGED
@@ -51,6 +52,7 @@ declare type IJitsiEvents = {
     CONFERENCE_ERROR
     PARTICIPANT_PROPERTY_CHANGED
     DISPLAY_NAME_CHANGED
+    MESSAGE_RECEIVED
   }
   connection: {
     CONNECTION_ESTABLISHED
@@ -136,6 +138,7 @@ declare type IConferenceStore = {
   setDisplayName:(name:string)=>void //why here?
   calculateVolume: (id:ID) => void // why here?
   calculateVolumes: (localPos:IVector2) => void // why here?
+  messages: Array<{id:string, text:string, nr:number}>
 }
 
 declare type IConnectionStore = {