Added chat support

2018-03-01 16:19:37 +01:00
parent 9a7e149c35
commit 494250153e
18 changed files with 617 additions and 7 deletions
@@ -0,0 +1,124 @@
+[data-component='ChatWidget'] {
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
+	margin: 0 10px 10px 0;
+	max-width: 300px;
+	position: fixed;
+	right: 0;
+	width: 90vw;
+	z-index: 9999;
+	
+	> .launcher {
+		align-self: flex-end;
+		margin-top: 10px;
+		background-position: center;
+		background-size: 70%;
+		background-repeat: no-repeat;
+		background-color: rgba(#000, 0.5);
+		background-image: url('/resources/images/chat-icon.svg');
+		cursor: pointer;
+		transition-property: opacity, background-color;
+		transition-duration: 0.15s;
+		border-radius: 100%;
+		height: 45px;
+		width: 45px;
+
+		&.focus {
+			outline: none;
+		}
+		
+		&.on {
+			background-color: rgba(#fff, 0.7);
+		}
+
+		&.disabled {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+	}
+}
+
+[data-component='Conversation'] {
+	border-radius: 5px;
+	box-shadow: 0px 2px 10px 1px #000;
+}
+
+[data-component='MessageList'] {
+	background-color: rgba(#fff, 0.9);
+	height: 50vh;
+	max-height: 350px;
+	overflow-y: scroll;
+	padding-top: 5px;
+	border-radius: 5px 5px 0px 0px;
+
+	> .message {
+		margin: 5px;
+		display: flex;
+		word-wrap: break-word;
+		color: rgba(#000, 1.0)
+
+		> .client {
+			background-color: rgba(#fff, 0.9);
+			border-radius: 5px;
+			padding: 6px;
+			max-width: 215px;
+			text-align: left;
+			margin-left: auto;
+
+			> .message-text {
+				font-size: 1.3vmin;
+				color: rgba(#000, 1.0);
+			}
+
+			> .message-time {
+				font-size: 1vmin;
+				color: rgba(#777, 1.0)
+			}
+		}
+
+		> .response {
+			background-color: rgba(#fff, 0.9);
+			border-radius: 5px;
+			padding: 6px;
+			max-width: 215px;
+			text-align: left;
+			font-size: 1.3vmin;
+
+			> .message-text {
+				font-size: 1.3vmin;
+				color: rgba(#000, 1.0);
+			}
+
+			> .message-time {
+				font-size: 1vmin;
+				color: rgba(#777, 1.0);
+			}
+		}
+	}
+}
+
+[data-component='Sender'] {
+	align-items: center;
+	display: flex;
+	background-color: rgba(#fff, 0.9);
+	height: 35px;
+	padding: 5px;
+	border-radius: 0 0 5px 5px;
+	
+	> .new-message {
+		width: 100%;
+		border: 0;
+		border-radius: 5px;
+		background-color: rgba(#fff, 0.9);
+		color: #000;
+		height: 30px;
+		padding-left: 10px;
+		font-size: 1.4vmin;
+
+		&.focus {
+			outline: none;
+		}
+	}
+}
+
@@ -30,7 +30,7 @@ body {
 	height: 100%;
 }

-#mediasoup-demo-app-container {
+#multiparty-meeting {
 	height: 100%;
 	width: 100%;

@@ -41,10 +41,11 @@ body {
 	@import './components/Peer';
 	@import './components/PeerView';
 	@import './components/Notifications';
+	@import './components/Chat';
 }

 // Hack to detect in JS the current media query
-#mediasoup-demo-app-media-query-detector {
+#multiparty-meeting-media-query-detector {
 	position: relative;
 	z-index: -1000;
 	bottom: 0;