CCS-4933 Improved handling of incomming messages to allow different c…

…hat message formats

src/app/actions/ConferenceActions.js

@@ -19,6 +19,7 @@ import {Actions as ActiveSpeakerActions} from "./ActiveSpeakerActions"
 import { strings } from "../languages/localizedStrings.js";
 import { getVideoDeviceName } from "../libs/getVideoDeviceName";
 import { isElectron, isIOS } from "../libs/browserDetection";
+import userPlaceholder from "../../static/images/user-placeholder.png";
 import Autolinker from "autolinker";
 import {
   BROADCAST_KICK,
@@ -1748,7 +1749,33 @@ export class Actions {
       });
 
       VoxeetSDK.command.on("received", (participant, message) => {
-        const dataParsed = JSON.parse(message);
+        let dataParsed;
+        try{
+          dataParsed = JSON.parse(message);
+           /*Event if the message is not in the UX-Kit JSON style,
+            it still may parse with no error, e.g if the message is a single number
+           */
+          if(!dataParsed.title) throw new Error(); 
+
+        }catch(err){
+            /*Commands from uxkit are always in JSON format, so if the parser fails, that most likely means 
+            the message originates from a different client app connected to the same conference, but using 
+            a different, incompatible command schema.
+            If that happens, there are 2 possibilities: discard the message, or prints its contents as a chat message
+            Since all messages are assumed to be meaningfull, the better option is to log unparseable commands to chat 
+            */
+           dataParsed = {
+              title:CHAT_MESSAGE,
+              content: message,
+              type:"text/external",  //To display messages from external sources in different style
+              avatarUrl:participant.info.avatarUrl || userPlaceholder,
+              time:Date.now(), //This is slightly incorrect, as the timestamp should come from the sender
+              name: participant.info.name,
+              ownerId:participant.id
+           }
+
+        }
+
         switch (dataParsed.title) {
           case BROADCAST_KICK:
             if (VoxeetSDK.session.participant.id === dataParsed.userId) {

src/app/components/attendees/chat/MessageList.js

@@ -22,12 +22,10 @@ class ListRow extends Component {
 
   render() {
     const { chatOptions } = this.props;
-
     let time = new Intl.DateTimeFormat("en-US", {
       hour: "2-digit",
       minute: "2-digit",
     }).format(this.props.time);
-
     return (
       <div key={this.props.index} style={this.props.style}>
         <li ref={this.rowRef}>
@@ -57,13 +55,13 @@ class ListRow extends Component {
                 <img src={this.props.avatarUrl} />
               </div>
               <div>
-                <span className="chat-name">{this.props.name}</span>
+                <span className="chat-name">{this.props.name}{this.props.type === "text" ? "" : " (external)"}</span>
                 {!chatOptions.autoLinker ? (
-                  <div className="chat-content">{this.props.content}</div>
+                  <div className={this.props.type === "text" ? "chat-content" : "chat-content-external"}>{this.props.content}</div>
                 ) : (
                   <div
                     dangerouslySetInnerHTML={{ __html: this.props.content }}
-                    className="chat-content"
+                    className={this.props.type === "text" ? "chat-content" : "chat-content-external"}
                   />
                 )}
               </div>
@@ -138,6 +136,7 @@ class MessageList extends Component {
           myself={data[index].ownerId === currentUser.participant_id}
           setRowHeight={this.setRowHeight.bind(this)}
           chatOptions={chatOptions}
+          type={data[index].type}
         />
       );
     };

src/styles/components/AttendeesChat.less

@@ -182,6 +182,24 @@
     }
   }
 
+  .chat-content-external{
+    padding: 0.75rem 0.75rem 0.4rem 0.75rem;
+    // color: #777777;
+    color: #d8d8d8;
+    font-weight: 200;
+    font-size: 15px;
+    font-family: "DINNextLTPro-Regular";
+    border-radius: 16px 16px 16px 2px;
+    background-color: #1b6ba4;
+    // background-color: #ebebeb;
+    word-wrap: break-word;
+    text-align: left;
+    a {
+      color: #d8d8d8;
+      font-weight: 600;
+    }
+  }
+
   .chat-content-myself {
     color: #d8d8d8;
     font-weight: 200;