opentok-text-chat - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/opentok-text-chat.js

@@ -97,2 +97,4 @@ /* global OTKAnalytics define */
   var _newMessages;
+  var _sentMessageHistory = [];
+  var _remoteParticipant = false;
 
@@ -117,2 +119,3 @@ // Reference to Accelerator Pack Common Layer
       '<div class="wms-messages-holder" id="messagesHolder">',
+      '<div class="wms-messages-alert hidden" id="messagesWaiting">Messsages will be delivered once your contact arrives</div>',
       '<div class="wms-message-item wms-message-sent">',
@@ -207,3 +210,11 @@ '</div>',
   var _sendMessage = function (recipient, message) {
+
     var deferred = new $.Deferred();
+
+    _sentMessageHistory.push({ recipient: recipient, message: message });
+    if (!_remoteParticipant) {
+      _showWaitingMessage();
+      deferred.resolve();
+    }
+
     var messageData = {
@@ -290,2 +301,12 @@ text: message,
 
+  var _showWaitingMessage = function () {
+    var el = document.getElementById('messagesWaiting');
+    el && el.classList.remove('hidden');
+  };
+
+  var _hideWaitingMessage = function () {
+    var el = document.getElementById('messagesWaiting');
+    el && el.classList.add('hidden');
+  };
+
   var _setupUI = function () {
@@ -347,2 +368,30 @@ var parent = document.querySelector(_this.options.textChatContainer) || document.body;
 
+  var _deliverUnsentMessages = function () {
+    _sentMessageHistory.forEach(function (message) {
+      _sendMessage(message.recipient, message.message);
+    });
+    _sentMessageHistory = [];
+  };
+
+  var _handleReadySignal = function (event) {
+    if (event.from.connectionId !== _session.connection.connectionId) {
+      _remoteParticipant = true;
+      _deliverUnsentMessages();
+    }
+  };
+
+  /**
+   * Send a signal to the other parties, letting them know that we are ready to receive
+   * messages and would like to recieve their message history
+   */
+  var _signalReady = function () {
+    var readySignal = { type: 'text-chat-ready', data: JSON.stringify({ ready: true }) };
+    _session.on('signal:text-chat-ready', _handleReadySignal);
+    _session.signal(readySignal, function (error) {
+      if (error) {
+        console.log('Error sending ready signal', error);
+      }
+    });
+  };
+
   var _initTextChat = function () {
@@ -355,2 +404,3 @@ _enabled = true;
     _session.on('signal:text-chat', _handleTextChat);
+    _signalReady();
     _log(_logEventData.actionStart, _logEventData.variationSuccess);
@@ -449,5 +499,20 @@ };
 
+  var _handleStreamCreated = function (event) {
+    if (event && event.stream.connection.connectionId !== _session.connection.connectionId) {
+      _remoteParticipant = true;
+      _hideWaitingMessage();
+    }
+  };
+
+  var _handleStreamDestroyed = function () {
+    if (_session.streams.length() < 2) {
+      _remoteParticipant = false;
+    }
+  };
+
   var _addEventListeners = function () {
 
     if (_accPack) {
+      _accPack.registerEventListener('streamCreated', _handleStreamCreated);
+      _accPack.registerEventListener('streamDestroyed', _handleStreamDestroyed);
 
@@ -468,3 +533,13 @@ _accPack.registerEventListener('startCall', function () {
       });
+    } else {
+      _session.on('streamCreated', _handleStreamCreated);
+      _session.on('streamDestroyed', _handleStreamDestroyed);
     }
+
+    /**
+     * We need to check for remote participants in case we were the last party to join and
+     * the session event fired before the text chat component was initialized.
+     */
+    _handleStreamCreated();
+
   };
@@ -471,0 +546,0 @@

dist/opentok-text-chat.min.js

@@ -1,1 +0,1 @@
-(function(){var e,t,n;"object"==typeof module&&"object"==typeof module.exports?(e=require("underscore"),t=require("jquery"),window.jQuery=t,window.moment=require("moment"),require("kuende-livestamp"),n=require("opentok-solutions-logging")):(e=this._,t=this.$,window.jQuery=t,window.moment=this.moment,n=this.OTKAnalytics);var i,s,a,o,r,c,d,m,l={clientVersion:"js-vsol-1.0.0",componentId:"textChatAccPack",name:"guidTextChatAccPack",actionInitialize:"Init",actionSendMessage:"SendMessage",actionReceiveMessage:"ReceiveMessage",actionMaximize:"Maximize",actionMinimize:"Minimize",actionSetMaxLength:"SetMaxLength",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},u=function(){var e=window.location.href,t={clientVersion:l.clientVersion,source:e,componentId:l.componentId,name:l.name};a=new n(t);var i={sessionId:s.id,connectionId:s.connection.connectionId,partnerId:s.apiKey};a.addSessionInfo(i)},v=function(e,t){var n={action:e,variation:t};a.logEvent(n)},g=!1,h=!1,p=!1,f=!1,w=function(e,t){m&&m.triggerEvent(e,t)},x=function(){return['<div class="wms-widget-wrapper">','<div class="wms-widget-chat wms-widget-extras" id="chatContainer">','<div class="wms-messages-header hidden" id="chatHeader">',"<span>Chat with</span>","</div>",'<div id="wmsChatWrap">','<div class="wms-messages-holder" id="messagesHolder">','<div class="wms-message-item wms-message-sent">',"</div>","</div>",'<div class="wms-send-message-box">','<input type="text" maxlength='+i.options.limitCharacterMessage+' class="wms-message-input" placeholder="Enter your message here" id="messageBox">','<button class="wms-icon-check" id="sendMessage" type="submit"></button>','<div class="wms-character-count"><span><span id="characterCount">0</span>/'+i.options.limitCharacterMessage+" characters</span></div>","</div>","</div>","</div>","</div>"].join("\n")},C=function(e){return!!c&&(c.sender.id===e.sender.id&&c.sender.id===e.sender.id)},y=function(){r.value="",t("#characterCount").text("0")},M=function(e){var t=['<div class="'+e.messageClass+'" >','<div class="wms-user-name-initial"> '+e.username[0]+"</div>",'<div class="wms-item-timestamp"> '+e.username+', <span data-livestamp=" '+new Date(e.time)+'" </span></div>','<div class="wms-item-text">',"<span> "+e.message+"</span>","</div>","</div>"].join("\n");return t},S=function(e,n,i,s){var a=o.id===e?"wms-message-item wms-message-sent":"wms-message-item",r=M({username:n,message:i,messageClass:a,time:s}),c=t(d);c.append(r),y(),c[0].scrollTop=c[0].scrollHeight},T=function(e){if(C(e)){t(".wms-item-text").last().append(["<span>",e.message,"</span>"].join(""));var n=t(d);n[0].scrollTop=n[0].scrollHeight,y()}else S(o.id,o.alias,e.message,e.sentOn);c=e,w("messageSent",e)},k=function(n){if(console.log(n.code,n.message),500===n.code){var s=e.template(t("#chatError").html());t(i.comms_elements.messagesView).append(s())}w("errorSendingMessage",n)},E=function(n,i){var a=new t.Deferred,r={text:i,sender:{id:o.id,alias:o.alias},sentOn:Date.now()};return v(l.actionSendMessage,l.variationAttempt),void 0===n?s.signal({type:"text-chat",data:JSON.stringify(r)},function(t){if(t){var n="Error sending a message. ";v(l.actionSendMessage,l.variationFailure),413===t.code?n+="The chat message is over size limit.":500===t.code&&(n+="Check your network connection."),a.reject(e.extend(e.omit(t,"message")),{message:n})}else console.log("Message sent"),v(l.actionSendMessage,l.variationSuccess),a.resolve(r)}):s.signal({type:"text-chat",data:JSON.stringify(r),to:n},function(e){e?(console.log("Error sending a message"),v(l.actionSendMessage,l.variationFailure),a.resolve(e)):(console.log("Message sent"),a.resolve(r),v(l.actionSendMessage,l.variationSuccess))}),a.promise()},I=function(n){e.isEmpty(n)||t.when(E(i._remoteParticipant,n)).then(function(){T({sender:{id:o.id,alias:o.alias},message:n,sentOn:Date.now()}),this.futureMessageNotice&&(this.futureMessageNotice=!1)},function(e){k(e)})},b=function(){var e=document.querySelector(i.options.textChatContainer)||document.body,n=document.createElement("section");n.innerHTML=x(),r=n.querySelector("#messageBox"),d=n.querySelector("#messagesHolder"),r.onkeyup=function(){t("#characterCount").text(r.value.length)},r.onkeydown=function(e){var t=13===e.which||13===e.keyCode;!e.shiftKey&&t&&(e.preventDefault(),I(r.value))},e.appendChild(n),document.getElementById("sendMessage").onclick=function(){I(r.value)},v(l.actionInitialize,l.variationSuccess)},j=function(e){v(l.actionReceiveMessage,l.variationAttempt);var n=JSON.parse(e.data);C(n)?t(".wms-item-text").last().append(["<span>",n.text,"</span>"].join("")):S(n.sender.id,n.sender.alias,n.text,n.sentOn),c=n,v(l.actionReceiveMessage,l.variationSuccess)},q=function(e){var t=s.connection.connectionId,n=e.from.connectionId;if(n!==t){var i=j(e);i&&"function"==typeof i&&i(e),w("messageReceived",e)}},A=function(){v(l.actionInitialize,l.variationAttempt),g=!0,h=!0,p=!0,b(),w("showTextChat"),s.on("signal:text-chat",q)},z=function(){v(l.actionMaximize,l.variationAttempt),document.querySelector(i.options.textChatContainer).classList.remove("hidden"),h=!0,w("showTextChat"),v(l.actionMaximize,l.variationSuccess)},L=function(){v(l.actionMinimize,l.variationAttempt),document.querySelector(i.options.textChatContainer).classList.add("hidden"),h=!1,w("hideTextChat"),v(l.actionMinimize,l.variationSuccess)},O=function(){var e=document.querySelector(i.options.controlsContainer),t=document.createElement("div");t.innerHTML='<div class="video-control circle text-chat enabled" id="enableTextChat"></div>';var n=t.firstChild;e.appendChild(n),f=!0,n.onclick=function(){p?h?L():z():A()}},H=function(t){if(!t.session)throw new Error("Text Chat Accelerator Pack requires an OpenTok session.");var n=function(e){var t=e||3;return Math.random().toString(36).substr(2,t)},i=function(){return[n(),s.id,n()].join("")};return s=e.property("session")(t),m=e.property("accPack")(t),o=e.defaults(t.sender||{},{id:i(),alias:["User",n()].join(" ")}),e.defaults(e.omit(t,["accPack","_sender"]),{limitCharacterMessage:160,controlsContainer:"#feedControls",textChatContainer:"#chatContainer"})},P=function(){var e=["showTextChat","hideTextChat","messageSent","errorSendingMessage","messageReceived"];m&&m.registerEvents(e)},D=function(){m&&(m.registerEventListener("startCall",function(){f?document.querySelector("#enableTextChat").classList.remove("hidden"):O()}),m.registerEventListener("endCall",function(){document.getElementById("enableTextChat").classList.add("hidden"),h&&L()}))},R=function(t){i=this,i.options=H(t),u(),e.property("_this.options.limitCharacterMessage")(t)&&(v(l.actionSetMaxLength,l.variationAttempt),v(l.actionSetMaxLength,l.variationSuccess)),O(),P(),D()};R.prototype={constructor:R,isEnabled:function(){return g},isDisplayed:function(){return h},showTextChat:function(){z()},hideTextChat:function(){L()}},"object"==typeof exports?module.exports=R:"function"==typeof define&&define.amd?define(function(){return R}):this.TextChatAccPack=R}).call(this);
+(function(){var e,t,n;"object"==typeof module&&"object"==typeof module.exports?(e=require("underscore"),t=require("jquery"),window.jQuery=t,window.moment=require("moment"),require("kuende-livestamp"),n=require("opentok-solutions-logging")):(e=this._,t=this.$,window.jQuery=t,window.moment=this.moment,n=this.OTKAnalytics);var s,i,a,o,r,c,d,l,u={clientVersion:"js-vsol-1.0.0",componentId:"textChatAccPack",name:"guidTextChatAccPack",actionInitialize:"Init",actionStart:"Start",actionEnd:"End",actionOpen:"OpenTC",actionClose:"CloseTC",actionSendMessage:"Send Msg",actionReceiveMessage:"Receive Msg",actionSetMaxLength:"SetMaxLength",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},m=function(){var e=window.location.href,t={clientVersion:u.clientVersion,source:e,componentId:u.componentId,name:u.name};a=new n(t);var s={sessionId:i.id,connectionId:i.connection.connectionId,partnerId:i.apiKey};a.addSessionInfo(s)},g=function(e,t){var n={action:e,variation:t};a.logEvent(n)},v=!1,h=!1,p=!1,f=!1,w=function(e,t){l&&l.triggerEvent(e,t)},C=function(){return['<div class="wms-widget-wrapper">','<div class="wms-widget-chat wms-widget-extras" id="chatContainer">','<div class="wms-messages-header hidden" id="chatHeader">',"<span>Chat with</span>","</div>",'<div id="wmsChatWrap">','<div class="wms-messages-holder" id="messagesHolder">','<div class="wms-message-item wms-message-sent">',"</div>","</div>",'<div class="wms-send-message-box">','<input type="text" maxlength='+s.options.limitCharacterMessage+' class="wms-message-input" placeholder="Enter your message here" id="messageBox">','<button class="wms-icon-check" id="sendMessage" type="submit"></button>','<div class="wms-character-count"><span><span id="characterCount">0</span>/'+s.options.limitCharacterMessage+" characters</span></div>","</div>","</div>","</div>","</div>"].join("\n")},x=function(e){return!!c&&(c.sender.id===e.sender.id&&c.sender.id===e.sender.id)},S=function(){r.value="",t("#characterCount").text("0")},y=function(e){var t=['<div class="'+e.messageClass+'" >','<div class="wms-user-name-initial"> '+e.username[0]+"</div>",'<div class="wms-item-timestamp"> '+e.username+', <span data-livestamp=" '+new Date(e.time)+'" </span></div>','<div class="wms-item-text">',"<span> "+e.message+"</span>","</div>","</div>"].join("\n");return t},M=function(e,n,s,i){var a=o.id===e?"wms-message-item wms-message-sent":"wms-message-item",r=y({username:n,message:s,messageClass:a,time:i}),c=t(d);c.append(r),S(),c[0].scrollTop=c[0].scrollHeight},T=function(e){if(x(e)){t(".wms-item-text").last().append(["<span>",e.message,"</span>"].join(""));var n=t(d);n[0].scrollTop=n[0].scrollHeight,S()}else M(o.id,o.alias,e.message,e.sentOn);c=e,w("messageSent",e)},E=function(n){if(console.log(n.code,n.message),500===n.code){var i=e.template(t("#chatError").html());t(s.comms_elements.messagesView).append(i())}w("errorSendingMessage",n)},k=function(n,s){var a=new t.Deferred,r={text:s,sender:{id:o.id,alias:o.alias},sentOn:Date.now()};return g(u.actionSendMessage,u.variationAttempt),void 0===n?i.signal({type:"text-chat",data:JSON.stringify(r)},function(t){if(t){var n="Error sending a message. ";g(u.actionSendMessage,u.variationFailure),413===t.code?n+="The chat message is over size limit.":500===t.code&&(n+="Check your network connection."),a.reject(e.extend(e.omit(t,"message")),{message:n})}else console.log("Message sent"),g(u.actionSendMessage,u.variationSuccess),a.resolve(r)}):i.signal({type:"text-chat",data:JSON.stringify(r),to:n},function(e){e?(console.log("Error sending a message"),g(u.actionSendMessage,u.variationFailure),a.resolve(e)):(console.log("Message sent"),a.resolve(r),g(u.actionSendMessage,u.variationSuccess))}),a.promise()},I=function(n){e.isEmpty(n)||t.when(k(s._remoteParticipant,n)).then(function(){T({sender:{id:o.id,alias:o.alias},message:n,sentOn:Date.now()}),this.futureMessageNotice&&(this.futureMessageNotice=!1)},function(e){E(e)})},b=function(){var e=document.querySelector(s.options.textChatContainer)||document.body,n=document.createElement("section");n.innerHTML=C(),r=n.querySelector("#messageBox"),d=n.querySelector("#messagesHolder"),r.onkeyup=function(){t("#characterCount").text(r.value.length)},r.onkeydown=function(e){var t=13===e.which||13===e.keyCode;!e.shiftKey&&t&&(e.preventDefault(),I(r.value))},e.appendChild(n),document.getElementById("sendMessage").onclick=function(){I(r.value)},g(u.actionInitialize,u.variationSuccess)},j=function(e){var n=JSON.parse(e.data);x(n)?t(".wms-item-text").last().append(["<span>",n.text,"</span>"].join("")):M(n.sender.id,n.sender.alias,n.text,n.sentOn),c=n,g(u.actionReceiveMessage,u.variationSuccess)},q=function(e){var t=i.connection.connectionId,n=e.from.connectionId;if(n!==t){var s=j(e);s&&"function"==typeof s&&s(e),w("messageReceived",e)}},O=function(){v=!0,h=!0,p=!0,b(),w("showTextChat"),i.on("signal:text-chat",q),g(u.actionStart,u.variationSuccess)},L=function(){document.querySelector(s.options.textChatContainer).classList.remove("hidden"),h=!0,w("showTextChat"),g(u.actionOpen,u.variationSuccess)},A=function(){document.querySelector(s.options.textChatContainer).classList.add("hidden"),h=!1,w("hideTextChat"),g(u.actionClose,u.variationSuccess),g(u.actionEnd,u.variationSuccess)},H=function(){var e=document.querySelector(s.options.controlsContainer),t=document.createElement("div");t.innerHTML='<div class="video-control circle text-chat enabled" id="enableTextChat"></div>';var n=t.firstChild;e.appendChild(n),f=!0,n.onclick=function(){p?h?A():L():O()}},P=function(t){if(!t.session)throw new Error("Text Chat Accelerator Pack requires an OpenTok session.");var n=function(e){var t=e||3;return Math.random().toString(36).substr(2,t)},s=function(){return[n(),i.id,n()].join("")};return i=e.property("session")(t),l=e.property("accPack")(t),o=e.defaults(t.sender||{},{id:s(),alias:["User",n()].join(" ")}),e.defaults(e.omit(t,["accPack","_sender"]),{limitCharacterMessage:160,controlsContainer:"#feedControls",textChatContainer:"#chatContainer"})},D=function(){var e=["showTextChat","hideTextChat","messageSent","errorSendingMessage","messageReceived"];l&&l.registerEvents(e)},N=function(){l&&(l.registerEventListener("startCall",function(){f?document.querySelector("#enableTextChat").classList.remove("hidden"):H()}),l.registerEventListener("endCall",function(){document.getElementById("enableTextChat").classList.add("hidden"),h&&A()}))},R=function(t){s=this,s.options=P(t),m(),e.property("_this.options.limitCharacterMessage")(t)&&g(u.actionSetMaxLength,u.variationSuccess),H(),D(),N()};R.prototype={constructor:R,isEnabled:function(){return v},isDisplayed:function(){return h},showTextChat:function(){L()},hideTextChat:function(){A()}},"object"==typeof exports?module.exports=R:"function"==typeof define&&define.amd?define(function(){return R}):this.TextChatAccPack=R}).call(this);

gulpfile.js

@@ -60,2 +60,2 @@ var gulp = require('gulp');
 
-gulp.task('dist', ['js-dev', 'css', 'zip']);
+gulp.task('dist', ['js', 'css', 'zip']);

package.json

 {
   "name": "opentok-text-chat",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "OpenTok text chat accelerator pack",
@@ -5,0 +5,0 @@ "main": "dist/opentok-text-chat.js",

No alert changes

Improved metrics

Total package byte prevSize

69436

increased by3.41%

Lines of code

1847

increased by3.53%

No dependency changes