@yomo/react-cursor-chat - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/cursor/cursor.d.ts

@@ -1,2 +0,3 @@
-import { MousePosition } from '../types';
+import { Presence } from '@yomo/presencejs';
+import { Latency, MousePosition } from '../types';
 export default class Cursor {
@@ -12,2 +13,4 @@ id: string;
     onMove(_mousePosition: MousePosition): void;
+    onGetLatency(_data: Latency): void;
+    subscribeLatency(yomo: Presence): import("rxjs").Subscription;
 }

dist/cursor/me.d.ts

@@ -8,2 +8,3 @@ import { Presence } from '@yomo/presencejs';
     private mousePositionSubscription;
+    private latencySubscription;
     constructor({ id, x, y, name, avatar, }: {
@@ -10,0 +11,0 @@ id: string;

dist/cursor/others.d.ts

@@ -6,2 +6,3 @@ import { Presence } from '@yomo/presencejs';
     private movementMessageSubscription;
+    private latencySubscription;
     constructor({ id, x, y, name, avatar, }: {
@@ -8,0 +9,0 @@ id: string;

dist/CursorChat.d.ts

 import React from 'react';
 import './styles/cursor-chat.less';
-declare const _default: React.MemoExoticComponent<({ socketURL, name, avatar, theme }: {
-    socketURL: string;
+declare const _default: React.MemoExoticComponent<({ presenceURL, presenceAuth, name, avatar, theme }: {
+    presenceURL: string;
+    presenceAuth: {
+        type: "publickey" | "token";
+        publicKey?: string | undefined;
+        endpoint?: "/api/auth" | undefined;
+    };
     name?: string | undefined;
@@ -6,0 +11,0 @@ avatar?: string | undefined;

dist/hooks/useOnlineCursor.d.ts

 import Me from '../cursor/me';
 import Others from '../cursor/others';
-declare const useOnlineCursor: ({ socketURL, name, avatar, }: {
-    socketURL: string;
+declare const useOnlineCursor: ({ presenceURL, presenceAuth, name, avatar, }: {
+    presenceURL: string;
+    presenceAuth: {
+        type: 'publickey' | 'token';
+        publicKey?: string;
+        endpoint?: string;
+    };
     name?: string | undefined;
@@ -6,0 +11,0 @@ avatar?: string | undefined;

dist/react-cursor-chat.cjs.development.js

@@ -903,2 +903,16 @@ 'use strict';
 
+  _proto.onGetLatency = function onGetLatency(_data) {};
+
+  _proto.subscribeLatency = function subscribeLatency(yomo) {
+    var _this = this;
+
+    return yomo.on$('latency').subscribe(function (data) {
+      if (data.id !== _this.id) {
+        return;
+      }
+
+      _this.onGetLatency(data);
+    });
+  };
+
   return Cursor;
@@ -937,2 +951,3 @@ }();
     this.mousePositionSubscription = this.subscribeMousePosition(yomo);
+    this.latencySubscription = _Cursor.prototype.subscribeLatency.call(this, yomo);
   };
@@ -967,3 +982,8 @@
 
-              _context.next = 6;
+              if (this.latencySubscription) {
+                this.latencySubscription.unsubscribe();
+                this.latencySubscription = undefined;
+              }
+
+              _context.next = 7;
               return new Promise(function (resolve) {
@@ -973,6 +993,6 @@ setTimeout(resolve, 500);
 
-            case 6:
+            case 7:
               return _context.abrupt("return", _context.sent);
 
-            case 7:
+            case 8:
             case "end":
@@ -1082,2 +1102,3 @@ return _context.stop();
     this.textMessageSubscription = this.subscribeTextMessage(yomo);
+    this.latencySubscription = _Cursor.prototype.subscribeLatency.call(this, yomo);
   };
@@ -1095,2 +1116,7 @@
     }
+
+    if (this.latencySubscription) {
+      this.latencySubscription.unsubscribe();
+      this.latencySubscription = undefined;
+    }
   };
@@ -1134,3 +1160,4 @@
 var useOnlineCursor = function useOnlineCursor(_ref) {
-  var socketURL = _ref.socketURL,
+  var presenceURL = _ref.presenceURL,
+      presenceAuth = _ref.presenceAuth,
       name = _ref.name,
@@ -1157,3 +1184,5 @@ avatar = _ref.avatar;
     setMe(me);
-    var yomo = new presencejs.Presence(socketURL);
+    var yomo = new presencejs.Presence(presenceURL, {
+      auth: presenceAuth
+    });
     yomo.on('connected', function () {
@@ -1271,2 +1300,35 @@ yomo.toRoom('001');
 
+var useLatency = function useLatency(cursor) {
+  var _useState = React.useState({
+    meshId: '',
+    latency: 0,
+    backgroundColor: 'green'
+  }),
+      latencyData = _useState[0],
+      setLatencyData = _useState[1];
+
+  React.useEffect(function () {
+    cursor.onGetLatency = function (data) {
+      if (data.latency) {
+        var backgroundColor = 'green';
+
+        if (data.latency > 100 && data.latency < 200) {
+          backgroundColor = '#FFB02A';
+        }
+
+        if (data.latency > 300) {
+          backgroundColor = 'red';
+        }
+
+        setLatencyData({
+          backgroundColor: backgroundColor,
+          meshId: data.meshId,
+          latency: data.latency
+        });
+      }
+    };
+  }, []);
+  return latencyData;
+};
+
 var MeCursor = function MeCursor(_ref) {
@@ -1285,2 +1347,3 @@ var cursor = _ref.cursor,
 
+  var latencyData = useLatency(cursor);
   var onKeydown = React.useCallback(function (e) {
@@ -1319,3 +1382,9 @@ if (e.code === 'Slash') {
       color: cursor.color
-    }), cursor.avatar && React__default.createElement("img", {
+    }), latencyData.latency > 0 && React__default.createElement("div", {
+      className: 'online-cursor-wrapper__latency'
+    }, "\uD83D\uDCCD ", latencyData.meshId, " ", React__default.createElement("span", {
+      style: {
+        backgroundColor: latencyData.backgroundColor
+      }
+    }, latencyData.latency, "ms")), cursor.avatar && React__default.createElement("img", {
       className: "online-cursor-wrapper__avatar",
@@ -1332,3 +1401,3 @@ src: cursor.avatar,
     })));
-  }, [showInput, inputValue]);
+  }, [showInput, inputValue, latencyData]);
 };
@@ -1345,2 +1414,3 @@
 
+  var latencyData = useLatency(cursor);
   React.useEffect(function () {
@@ -1357,3 +1427,9 @@ cursor.onTextMessage = function (msg) {
       color: cursor.color
-    }), cursor.avatar && React__default.createElement("img", {
+    }), latencyData.latency > 0 && React__default.createElement("div", {
+      className: 'online-cursor-wrapper__latency'
+    }, "\uD83D\uDCCD ", latencyData.meshId, " ", React__default.createElement("span", {
+      style: {
+        backgroundColor: latencyData.backgroundColor
+      }
+    }, latencyData.latency, "ms")), cursor.avatar && React__default.createElement("img", {
       className: "online-cursor-wrapper__avatar",
@@ -1365,7 +1441,8 @@ src: cursor.avatar,
     }, msg));
-  }, [msg]);
+  }, [msg, latencyData]);
 };
 
 var CursorChat = function CursorChat(_ref3) {
-  var socketURL = _ref3.socketURL,
+  var presenceURL = _ref3.presenceURL,
+      presenceAuth = _ref3.presenceAuth,
       name = _ref3.name,
@@ -1377,3 +1454,4 @@ avatar = _ref3.avatar,
   var _useOnlineCursor = useOnlineCursor({
-    socketURL: socketURL,
+    presenceURL: presenceURL,
+    presenceAuth: presenceAuth,
     name: name,
@@ -1380,0 +1458,0 @@ avatar: avatar

dist/react-cursor-chat.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),n=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,r=require("rxjs"),o=require("rxjs/operators"),i=require("@yomo/presencejs");function a(t,e,n,r,o,i,a){try{var s=t[i](a),u=s.value}catch(t){return void n(t)}s.done?e(u):Promise.resolve(u).then(r,o)}function s(t){return function(){var e=this,n=arguments;return new Promise((function(r,o){var i=t.apply(e,n);function s(t){a(i,r,o,s,u,"next",t)}function u(t){a(i,r,o,s,u,"throw",t)}s(void 0)}))}}function u(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,(Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var c,l=(function(t){var e=function(t){var e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function s(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,n){return t[e]=n}}function u(t,e,n,r){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new S(r||[]);return o._invoke=function(t,e,n){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return{value:void 0,done:!0}}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var s=x(a,n);if(s){if(s===l)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var u=c(t,e,n);if("normal"===u.type){if(r=n.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(r="completed",n.method="throw",n.arg=u.arg)}}}(t,n,i),o}function c(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var v={};s(v,o,(function(){return this}));var m=Object.getPrototypeOf,d=m&&m(m(L([])));d&&d!==e&&n.call(d,o)&&(v=d);var y=p.prototype=f.prototype=Object.create(v);function g(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){var r;this._invoke=function(o,i){function a(){return new e((function(r,a){!function r(o,i,a,s){var u=c(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,s)}))}s(u.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function x(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,x(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var r=c(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,l;var o=r.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function w(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(w,this),this.reset(!0)}function L(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:M}}function M(){return{value:void 0,done:!0}}return h.prototype=p,s(y,"constructor",p),s(p,"constructor",h),h.displayName=s(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,s(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(b.prototype),s(b.prototype,i,(function(){return this})),t.AsyncIterator=b,t.async=function(e,n,r,o,i){void 0===i&&(i=Promise);var a=new b(u(e,n,r,o),i);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),s(y,a,"Generator"),s(y,o,(function(){return this})),s(y,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=L,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var s=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(s&&u){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),E(n),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;E(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:L(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}}(c={exports:{}}),c.exports),f=function(){return window.getViewportSize||(window.onresize=function(){window.getViewportSize={width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}},window.onresize()),window.getViewportSize},h=function(){function t(t,e,n,r,o){this.id=t,this.x=e,this.y=n,this.name=r,this.avatar=o,this.color=function(t){for(var e=0,n=0;n<t.length;n++)e=t.charCodeAt(n)+((e<<5)-e);for(var r="#",o=0;o<3;o++)r+=("00"+(e>>8*o&255).toString(16)).slice(-2);return r}(t)}var e=t.prototype;return e.move=function(t,e){this.x=t,this.y=e},e.onMove=function(t){},t}(),p=function(t){function e(e){var n,r=e.name,o=e.avatar;return(n=t.call(this,e.id,e.x,e.y,void 0===r?"":r,void 0===o?"":o)||this).mousemoveSubscription=n.subscribeMousemove(),n}u(e,t);var n=e.prototype;return n.goOnline=function(t){this.yomo=t,this.online(t),this.onlineSubscription=this.subscribeOnline(t),this.mousePositionSubscription&&this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=this.subscribeMousePosition(t)},n.goOffline=function(){var t=s(l.mark((function t(){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.yomo&&this.yomo.send("offline",{id:this.id}),this.mousemoveSubscription&&(this.mousemoveSubscription.unsubscribe(),this.mousemoveSubscription=void 0),this.mousePositionSubscription&&(this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=void 0),this.onlineSubscription&&(this.onlineSubscription.unsubscribe(),this.onlineSubscription=void 0),t.next=6,new Promise((function(t){setTimeout(t,500)}));case 6:return t.abrupt("return",t.sent);case 7:case"end":return t.stop()}}),t,this)})));return function(){return t.apply(this,arguments)}}(),n.sendMessage=function(t){this.yomo&&this.yomo.send("text",{id:this.id,message:t})},n.online=function(t){t.send("online",{id:this.id,x:0,y:0,name:this.name,avatar:this.avatar})},n.subscribeOnline=function(t){var e=this;return t.on$("online").subscribe((function(){t.send("sync",{id:e.id,x:e.x,y:e.y,name:e.name,avatar:e.avatar})}))},n.subscribeMousemove=function(){var e=this;return r.fromEvent(document,"mousemove").subscribe((function(n){var r=n.clientX,o=n.clientY;t.prototype.move.call(e,r,o),e.onMove({mouseX:r,mouseY:o})}))},n.subscribeMousePosition=function(t){var e=this;return r.fromEvent(document,"mousemove").pipe(o.map((function(t){var n,r,o=(n=t.clientY,{scaleX:t.clientX/(r=f()).width,scaleY:n/r.height});return{id:e.id,x:o.scaleX,y:o.scaleY}}))).subscribe(t.ofRoom("001","movement"))},e}(h),v=function(t){function e(e){var n=e.name,r=e.avatar;return t.call(this,e.id,e.x,e.y,void 0===n?"":n,void 0===r?"":r)||this}u(e,t);var n=e.prototype;return n.goOnline=function(t){this.movementMessageSubscription=this.subscribeMovement(t),this.textMessageSubscription=this.subscribeTextMessage(t)},n.unsubscribe=function(){this.textMessageSubscription&&(this.textMessageSubscription.unsubscribe(),this.textMessageSubscription=void 0),this.movementMessageSubscription&&(this.movementMessageSubscription.unsubscribe(),this.movementMessageSubscription=void 0)},n.onTextMessage=function(t){},n.subscribeTextMessage=function(t){var e=this;return t.on$("text").pipe(o.filter((function(t){return t.id===e.id}))).subscribe((function(t){e.onTextMessage(t.message)}))},n.subscribeMovement=function(e){var n=this;return e.on$("movement").pipe(o.filter((function(t){return t.id===n.id})),o.map((function(t){return e=t.y,{mouseX:t.x*(n=f()).width,mouseY:e*n.height};var e,n}))).subscribe((function(e){var r=e.mouseX,o=e.mouseY;t.prototype.move.call(n,r,o),n.onMove({mouseX:r,mouseY:o})}))},e}(h),m=function(t){var n=t.socketURL,r=t.name,a=t.avatar,u=e.useState(null),c=u[0],f=u[1],h=e.useState(new Map),m=h[0],d=h[1];e.useEffect((function(){var t="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})),e=new p({id:t,x:0,y:0,name:r||"",avatar:a||""});f(e);var u=new i.Presence(n);u.on("connected",(function(){u.toRoom("001"),u.on$("online").pipe(o.filter((function(e){return e.id!==t}))).subscribe((function(t){d((function(e){if(e.has(t.id))return e;var n=new Map(e),r=new v(t);return r.goOnline(u),n.set(r.id,r),n}))})),u.on("offline",(function(t){d((function(e){var n=new Map(e),r=n.get(t.id);return r&&r.unsubscribe(),n.delete(t.id),n}))})),u.on$("sync").pipe(o.filter((function(e){return e.id!==t}))).subscribe((function(t){d((function(e){if(e.has(t.id))return e;var n=new Map(e),r=new v(t);return r.goOnline(u),n.set(r.id,r),n}))})),e.goOnline(u)}));var c=function(){var t=s(l.mark((function t(){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.goOffline();case 2:u.close();case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}();return window.addEventListener("unload",c),function(){c(),window.removeEventListener("unload",c)}}),[]);var y=[];return m.forEach((function(t){y.push(t)})),{me:c,others:y}},d=function(t){var n=e.useRef(null);return e.useEffect((function(){var e=function(t){n.current&&n.current.setAttribute("style","transform: translate3d("+t.mouseX+"px, "+t.mouseY+"px, 0);")};e({mouseX:t.x,mouseY:t.y}),t.onMove=function(t){e(t)}}),[t]),n},y=function(t){var r=t.cursor,o=t.theme,i=d(r),a=e.useState(!1),s=a[0],u=a[1],c=e.useState(""),l=c[0],f=c[1],h=e.useCallback((function(t){"Slash"===t.code&&u(!0),"Escape"===t.code&&(u(!1),f(""),r.sendMessage(""))}),[]),p=e.useCallback((function(t){var e=t.target.value;"/"!==e&&(f(e),r.sendMessage(e))}),[]);return e.useEffect((function(){return document.addEventListener("keydown",h),function(){document.removeEventListener("keydown",h)}}),[]),e.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(b,{color:r.color}),r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),s&&n.createElement("div",{className:"online-cursor-wrapper__input-box "+("light"===o?"light":"dark")},n.createElement("span",null,l),n.createElement("input",{autoFocus:!0,placeholder:"Say something",value:l,onChange:p})))}),[s,l])},g=function(t){var r=t.cursor,o=t.theme,i=d(r),a=e.useState(r.name),s=a[0],u=a[1];return e.useEffect((function(){r.onTextMessage=function(t){u(t)}}),[]),e.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(b,{color:r.color}),r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),s&&n.createElement("div",{className:"online-cursor-wrapper__text "+("light"===o?"light":"dark")},s))}),[s])};function b(t){var r=t.color;return e.useMemo((function(){return n.createElement("svg",{shapeRendering:"geometricPrecision",xmlns:"http://www.w3.org/2000/svg",fill:r},n.createElement("path",{fill:"#666",d:"M9.63 6.9a1 1 0 011.27-1.27l11.25 3.75a1 1 0 010 1.9l-4.68 1.56a1 1 0 00-.63.63l-1.56 4.68a1 1 0 01-1.9 0L9.63 6.9z"}),n.createElement("path",{stroke:"#fff",strokeWidth:"1.5",d:"M11.13 4.92a1.75 1.75 0 00-2.2 2.21l3.74 11.26a1.75 1.75 0 003.32 0l1.56-4.68a.25.25 0 01.16-.16L22.4 12a1.75 1.75 0 000-3.32L11.13 4.92z"}))}),[r])}exports.default=e.memo((function(t){var e=t.theme,r=void 0===e?"dark":e,o=m({socketURL:t.socketURL,name:t.name,avatar:t.avatar}),i=o.me;return i?n.createElement("div",{className:"online-cursor-wrapper"},o.others.map((function(t){return n.createElement(g,{key:t.id,cursor:t,theme:r})})),n.createElement(y,{cursor:i,theme:r})):null})),exports.useOnlineCursor=m,exports.useRenderPosition=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("rxjs"),o=require("rxjs/operators"),i=require("@yomo/presencejs");function a(e,t,n,r,o,i,a){try{var s=e[i](a),c=s.value}catch(e){return void n(e)}s.done?t(c):Promise.resolve(c).then(r,o)}function s(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function s(e){a(i,r,o,s,c,"next",e)}function c(e){a(i,r,o,s,c,"throw",e)}s(void 0)}))}}function c(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var u,l=(function(e){var t=function(e){var t=Object.prototype,n=t.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function s(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,n){return e[t]=n}}function c(e,t,n,r){var o=Object.create((t&&t.prototype instanceof f?t:f).prototype),i=new S(r||[]);return o._invoke=function(e,t,n){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return{value:void 0,done:!0}}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var s=x(a,n);if(s){if(s===l)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var c=u(e,t,n);if("normal"===c.type){if(r=n.done?"completed":"suspendedYield",c.arg===l)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(r="completed",n.method="throw",n.arg=c.arg)}}}(e,n,i),o}function u(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}e.wrap=c;var l={};function f(){}function h(){}function p(){}var d={};s(d,o,(function(){return this}));var v=Object.getPrototypeOf,m=v&&v(v(L([])));m&&m!==t&&n.call(m,o)&&(d=m);var y=p.prototype=f.prototype=Object.create(d);function b(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function g(e,t){var r;this._invoke=function(o,i){function a(){return new t((function(r,a){!function r(o,i,a,s){var c=u(e[o],e,i);if("throw"!==c.type){var l=c.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?t.resolve(f.__await).then((function(e){r("next",e,a,s)}),(function(e){r("throw",e,a,s)})):t.resolve(f).then((function(e){l.value=e,a(l)}),(function(e){return r("throw",e,a,s)}))}s(c.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function x(e,t){var n=e.iterator[t.method];if(void 0===n){if(t.delegate=null,"throw"===t.method){if(e.iterator.return&&(t.method="return",t.arg=void 0,x(e,t),"throw"===t.method))return l;t.method="throw",t.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var r=u(n,e.iterator,t.arg);if("throw"===r.type)return t.method="throw",t.arg=r.arg,t.delegate=null,l;var o=r.arg;return o?o.done?(t[e.resultName]=o.value,t.next=e.nextLoc,"return"!==t.method&&(t.method="next",t.arg=void 0),t.delegate=null,l):o:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,l)}function w(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function E(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function S(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(w,this),this.reset(!0)}function L(e){if(e){var t=e[o];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,i=function t(){for(;++r<e.length;)if(n.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t};return i.next=i}}return{next:M}}function M(){return{value:void 0,done:!0}}return h.prototype=p,s(y,"constructor",p),s(p,"constructor",h),h.displayName=s(p,a,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===h||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,p):(e.__proto__=p,s(e,a,"GeneratorFunction")),e.prototype=Object.create(y),e},e.awrap=function(e){return{__await:e}},b(g.prototype),s(g.prototype,i,(function(){return this})),e.AsyncIterator=g,e.async=function(t,n,r,o,i){void 0===i&&(i=Promise);var a=new g(c(t,n,r,o),i);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},b(y),s(y,a,"Generator"),s(y,o,(function(){return this})),s(y,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){for(;t.length;){var r=t.pop();if(r in e)return n.value=r,n.done=!1,n}return n.done=!0,n}},e.values=L,S.prototype={constructor:S,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!e)for(var t in this)"t"===t.charAt(0)&&n.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var t=this;function r(n,r){return a.type="throw",a.arg=e,t.next=n,r&&(t.method="next",t.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var s=n.call(i,"catchLoc"),c=n.call(i,"finallyLoc");if(s&&c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),l},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),E(n),l}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var o=r.arg;E(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,n){return this.delegate={iterator:L(e),resultName:t,nextLoc:n},"next"===this.method&&(this.arg=void 0),l}},e}(e.exports);try{regeneratorRuntime=t}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=t:Function("r","regeneratorRuntime = r")(t)}}(u={exports:{}}),u.exports),f=function(){return window.getViewportSize||(window.onresize=function(){window.getViewportSize={width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}},window.onresize()),window.getViewportSize},h=function(){function e(e,t,n,r,o){this.id=e,this.x=t,this.y=n,this.name=r,this.avatar=o,this.color=function(e){for(var t=0,n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t);for(var r="#",o=0;o<3;o++)r+=("00"+(t>>8*o&255).toString(16)).slice(-2);return r}(e)}var t=e.prototype;return t.move=function(e,t){this.x=e,this.y=t},t.onMove=function(e){},t.onGetLatency=function(e){},t.subscribeLatency=function(e){var t=this;return e.on$("latency").subscribe((function(e){e.id===t.id&&t.onGetLatency(e)}))},e}(),p=function(e){function t(t){var n,r=t.name,o=t.avatar;return(n=e.call(this,t.id,t.x,t.y,void 0===r?"":r,void 0===o?"":o)||this).mousemoveSubscription=n.subscribeMousemove(),n}c(t,e);var n=t.prototype;return n.goOnline=function(t){this.yomo=t,this.online(t),this.onlineSubscription=this.subscribeOnline(t),this.mousePositionSubscription&&this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=this.subscribeMousePosition(t),this.latencySubscription=e.prototype.subscribeLatency.call(this,t)},n.goOffline=function(){var e=s(l.mark((function e(){return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return this.yomo&&this.yomo.send("offline",{id:this.id}),this.mousemoveSubscription&&(this.mousemoveSubscription.unsubscribe(),this.mousemoveSubscription=void 0),this.mousePositionSubscription&&(this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=void 0),this.onlineSubscription&&(this.onlineSubscription.unsubscribe(),this.onlineSubscription=void 0),this.latencySubscription&&(this.latencySubscription.unsubscribe(),this.latencySubscription=void 0),e.next=7,new Promise((function(e){setTimeout(e,500)}));case 7:return e.abrupt("return",e.sent);case 8:case"end":return e.stop()}}),e,this)})));return function(){return e.apply(this,arguments)}}(),n.sendMessage=function(e){this.yomo&&this.yomo.send("text",{id:this.id,message:e})},n.online=function(e){e.send("online",{id:this.id,x:0,y:0,name:this.name,avatar:this.avatar})},n.subscribeOnline=function(e){var t=this;return e.on$("online").subscribe((function(){e.send("sync",{id:t.id,x:t.x,y:t.y,name:t.name,avatar:t.avatar})}))},n.subscribeMousemove=function(){var t=this;return r.fromEvent(document,"mousemove").subscribe((function(n){var r=n.clientX,o=n.clientY;e.prototype.move.call(t,r,o),t.onMove({mouseX:r,mouseY:o})}))},n.subscribeMousePosition=function(e){var t=this;return r.fromEvent(document,"mousemove").pipe(o.map((function(e){var n,r,o=(n=e.clientY,{scaleX:e.clientX/(r=f()).width,scaleY:n/r.height});return{id:t.id,x:o.scaleX,y:o.scaleY}}))).subscribe(e.ofRoom("001","movement"))},t}(h),d=function(e){function t(t){var n=t.name,r=t.avatar;return e.call(this,t.id,t.x,t.y,void 0===n?"":n,void 0===r?"":r)||this}c(t,e);var n=t.prototype;return n.goOnline=function(t){this.movementMessageSubscription=this.subscribeMovement(t),this.textMessageSubscription=this.subscribeTextMessage(t),this.latencySubscription=e.prototype.subscribeLatency.call(this,t)},n.unsubscribe=function(){this.textMessageSubscription&&(this.textMessageSubscription.unsubscribe(),this.textMessageSubscription=void 0),this.movementMessageSubscription&&(this.movementMessageSubscription.unsubscribe(),this.movementMessageSubscription=void 0),this.latencySubscription&&(this.latencySubscription.unsubscribe(),this.latencySubscription=void 0)},n.onTextMessage=function(e){},n.subscribeTextMessage=function(e){var t=this;return e.on$("text").pipe(o.filter((function(e){return e.id===t.id}))).subscribe((function(e){t.onTextMessage(e.message)}))},n.subscribeMovement=function(t){var n=this;return t.on$("movement").pipe(o.filter((function(e){return e.id===n.id})),o.map((function(e){return t=e.y,{mouseX:e.x*(n=f()).width,mouseY:t*n.height};var t,n}))).subscribe((function(t){var r=t.mouseX,o=t.mouseY;e.prototype.move.call(n,r,o),n.onMove({mouseX:r,mouseY:o})}))},t}(h),v=function(e){var n=e.presenceURL,r=e.presenceAuth,a=e.name,c=e.avatar,u=t.useState(null),f=u[0],h=u[1],v=t.useState(new Map),m=v[0],y=v[1];t.useEffect((function(){var e="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})),t=new p({id:e,x:0,y:0,name:a||"",avatar:c||""});h(t);var u=new i.Presence(n,{auth:r});u.on("connected",(function(){u.toRoom("001"),u.on$("online").pipe(o.filter((function(t){return t.id!==e}))).subscribe((function(e){y((function(t){if(t.has(e.id))return t;var n=new Map(t),r=new d(e);return r.goOnline(u),n.set(r.id,r),n}))})),u.on("offline",(function(e){y((function(t){var n=new Map(t),r=n.get(e.id);return r&&r.unsubscribe(),n.delete(e.id),n}))})),u.on$("sync").pipe(o.filter((function(t){return t.id!==e}))).subscribe((function(e){y((function(t){if(t.has(e.id))return t;var n=new Map(t),r=new d(e);return r.goOnline(u),n.set(r.id,r),n}))})),t.goOnline(u)}));var f=function(){var e=s(l.mark((function e(){return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.goOffline();case 2:u.close();case 3:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return window.addEventListener("unload",f),function(){f(),window.removeEventListener("unload",f)}}),[]);var b=[];return m.forEach((function(e){b.push(e)})),{me:f,others:b}},m=function(e){var n=t.useRef(null);return t.useEffect((function(){var t=function(e){n.current&&n.current.setAttribute("style","transform: translate3d("+e.mouseX+"px, "+e.mouseY+"px, 0);")};t({mouseX:e.x,mouseY:e.y}),e.onMove=function(e){t(e)}}),[e]),n},y=function(e){var n=t.useState({meshId:"",latency:0,backgroundColor:"green"}),r=n[0],o=n[1];return t.useEffect((function(){e.onGetLatency=function(e){if(e.latency){var t="green";e.latency>100&&e.latency<200&&(t="#FFB02A"),e.latency>300&&(t="red"),o({backgroundColor:t,meshId:e.meshId,latency:e.latency})}}}),[]),r},b=function(e){var r=e.cursor,o=e.theme,i=m(r),a=t.useState(!1),s=a[0],c=a[1],u=t.useState(""),l=u[0],f=u[1],h=y(r),p=t.useCallback((function(e){"Slash"===e.code&&c(!0),"Escape"===e.code&&(c(!1),f(""),r.sendMessage(""))}),[]),d=t.useCallback((function(e){var t=e.target.value;"/"!==t&&(f(t),r.sendMessage(t))}),[]);return t.useEffect((function(){return document.addEventListener("keydown",p),function(){document.removeEventListener("keydown",p)}}),[]),t.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(x,{color:r.color}),h.latency>0&&n.createElement("div",{className:"online-cursor-wrapper__latency"},"📍 ",h.meshId," ",n.createElement("span",{style:{backgroundColor:h.backgroundColor}},h.latency,"ms")),r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),s&&n.createElement("div",{className:"online-cursor-wrapper__input-box "+("light"===o?"light":"dark")},n.createElement("span",null,l),n.createElement("input",{autoFocus:!0,placeholder:"Say something",value:l,onChange:d})))}),[s,l,h])},g=function(e){var r=e.cursor,o=e.theme,i=m(r),a=t.useState(r.name),s=a[0],c=a[1],u=y(r);return t.useEffect((function(){r.onTextMessage=function(e){c(e)}}),[]),t.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(x,{color:r.color}),u.latency>0&&n.createElement("div",{className:"online-cursor-wrapper__latency"},"📍 ",u.meshId," ",n.createElement("span",{style:{backgroundColor:u.backgroundColor}},u.latency,"ms")),r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),s&&n.createElement("div",{className:"online-cursor-wrapper__text "+("light"===o?"light":"dark")},s))}),[s,u])};function x(e){var r=e.color;return t.useMemo((function(){return n.createElement("svg",{shapeRendering:"geometricPrecision",xmlns:"http://www.w3.org/2000/svg",fill:r},n.createElement("path",{fill:"#666",d:"M9.63 6.9a1 1 0 011.27-1.27l11.25 3.75a1 1 0 010 1.9l-4.68 1.56a1 1 0 00-.63.63l-1.56 4.68a1 1 0 01-1.9 0L9.63 6.9z"}),n.createElement("path",{stroke:"#fff",strokeWidth:"1.5",d:"M11.13 4.92a1.75 1.75 0 00-2.2 2.21l3.74 11.26a1.75 1.75 0 003.32 0l1.56-4.68a.25.25 0 01.16-.16L22.4 12a1.75 1.75 0 000-3.32L11.13 4.92z"}))}),[r])}exports.default=t.memo((function(e){var t=e.theme,r=void 0===t?"dark":t,o=v({presenceURL:e.presenceURL,presenceAuth:e.presenceAuth,name:e.name,avatar:e.avatar}),i=o.me;return i?n.createElement("div",{className:"online-cursor-wrapper"},o.others.map((function(e){return n.createElement(g,{key:e.id,cursor:e,theme:r})})),n.createElement(b,{cursor:i,theme:r})):null})),exports.useOnlineCursor=v,exports.useRenderPosition=m;
 //# sourceMappingURL=react-cursor-chat.cjs.production.min.js.map

dist/react-cursor-chat.esm.js

@@ -896,2 +896,16 @@ import React, { useState, useEffect, useRef, memo, useCallback, useMemo } from 'react';
 
+  _proto.onGetLatency = function onGetLatency(_data) {};
+
+  _proto.subscribeLatency = function subscribeLatency(yomo) {
+    var _this = this;
+
+    return yomo.on$('latency').subscribe(function (data) {
+      if (data.id !== _this.id) {
+        return;
+      }
+
+      _this.onGetLatency(data);
+    });
+  };
+
   return Cursor;
@@ -930,2 +944,3 @@ }();
     this.mousePositionSubscription = this.subscribeMousePosition(yomo);
+    this.latencySubscription = _Cursor.prototype.subscribeLatency.call(this, yomo);
   };
@@ -960,3 +975,8 @@
 
-              _context.next = 6;
+              if (this.latencySubscription) {
+                this.latencySubscription.unsubscribe();
+                this.latencySubscription = undefined;
+              }
+
+              _context.next = 7;
               return new Promise(function (resolve) {
@@ -966,6 +986,6 @@ setTimeout(resolve, 500);
 
-            case 6:
+            case 7:
               return _context.abrupt("return", _context.sent);
 
-            case 7:
+            case 8:
             case "end":
@@ -1075,2 +1095,3 @@ return _context.stop();
     this.textMessageSubscription = this.subscribeTextMessage(yomo);
+    this.latencySubscription = _Cursor.prototype.subscribeLatency.call(this, yomo);
   };
@@ -1088,2 +1109,7 @@
     }
+
+    if (this.latencySubscription) {
+      this.latencySubscription.unsubscribe();
+      this.latencySubscription = undefined;
+    }
   };
@@ -1127,3 +1153,4 @@
 var useOnlineCursor = function useOnlineCursor(_ref) {
-  var socketURL = _ref.socketURL,
+  var presenceURL = _ref.presenceURL,
+      presenceAuth = _ref.presenceAuth,
       name = _ref.name,
@@ -1150,3 +1177,5 @@ avatar = _ref.avatar;
     setMe(me);
-    var yomo = new Presence(socketURL);
+    var yomo = new Presence(presenceURL, {
+      auth: presenceAuth
+    });
     yomo.on('connected', function () {
@@ -1264,2 +1293,35 @@ yomo.toRoom('001');
 
+var useLatency = function useLatency(cursor) {
+  var _useState = useState({
+    meshId: '',
+    latency: 0,
+    backgroundColor: 'green'
+  }),
+      latencyData = _useState[0],
+      setLatencyData = _useState[1];
+
+  useEffect(function () {
+    cursor.onGetLatency = function (data) {
+      if (data.latency) {
+        var backgroundColor = 'green';
+
+        if (data.latency > 100 && data.latency < 200) {
+          backgroundColor = '#FFB02A';
+        }
+
+        if (data.latency > 300) {
+          backgroundColor = 'red';
+        }
+
+        setLatencyData({
+          backgroundColor: backgroundColor,
+          meshId: data.meshId,
+          latency: data.latency
+        });
+      }
+    };
+  }, []);
+  return latencyData;
+};
+
 var MeCursor = function MeCursor(_ref) {
@@ -1278,2 +1340,3 @@ var cursor = _ref.cursor,
 
+  var latencyData = useLatency(cursor);
   var onKeydown = useCallback(function (e) {
@@ -1312,3 +1375,9 @@ if (e.code === 'Slash') {
       color: cursor.color
-    }), cursor.avatar && React.createElement("img", {
+    }), latencyData.latency > 0 && React.createElement("div", {
+      className: 'online-cursor-wrapper__latency'
+    }, "\uD83D\uDCCD ", latencyData.meshId, " ", React.createElement("span", {
+      style: {
+        backgroundColor: latencyData.backgroundColor
+      }
+    }, latencyData.latency, "ms")), cursor.avatar && React.createElement("img", {
       className: "online-cursor-wrapper__avatar",
@@ -1325,3 +1394,3 @@ src: cursor.avatar,
     })));
-  }, [showInput, inputValue]);
+  }, [showInput, inputValue, latencyData]);
 };
@@ -1338,2 +1407,3 @@
 
+  var latencyData = useLatency(cursor);
   useEffect(function () {
@@ -1350,3 +1420,9 @@ cursor.onTextMessage = function (msg) {
       color: cursor.color
-    }), cursor.avatar && React.createElement("img", {
+    }), latencyData.latency > 0 && React.createElement("div", {
+      className: 'online-cursor-wrapper__latency'
+    }, "\uD83D\uDCCD ", latencyData.meshId, " ", React.createElement("span", {
+      style: {
+        backgroundColor: latencyData.backgroundColor
+      }
+    }, latencyData.latency, "ms")), cursor.avatar && React.createElement("img", {
       className: "online-cursor-wrapper__avatar",
@@ -1358,7 +1434,8 @@ src: cursor.avatar,
     }, msg));
-  }, [msg]);
+  }, [msg, latencyData]);
 };
 
 var CursorChat = function CursorChat(_ref3) {
-  var socketURL = _ref3.socketURL,
+  var presenceURL = _ref3.presenceURL,
+      presenceAuth = _ref3.presenceAuth,
       name = _ref3.name,
@@ -1370,3 +1447,4 @@ avatar = _ref3.avatar,
   var _useOnlineCursor = useOnlineCursor({
-    socketURL: socketURL,
+    presenceURL: presenceURL,
+    presenceAuth: presenceAuth,
     name: name,
@@ -1373,0 +1451,0 @@ avatar: avatar

dist/types/index.d.ts

@@ -24,1 +24,6 @@ export declare type CursorMessage = {
 };
+export declare type Latency = {
+    id: string;
+    meshId: string;
+    latency: number;
+};

package.json

 {
   "name": "@yomo/react-cursor-chat",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A react component for cursor chat",
@@ -62,3 +62,3 @@ "keywords": [
   "dependencies": {
-    "@yomo/presencejs": "^0.0.5",
+    "@yomo/presencejs": "^0.0.6",
     "react": ">=16",
@@ -65,0 +65,0 @@ "react-dom": "^17.0.2",

README.md

@@ -25,6 +25,7 @@ # react-cursor-chat
     avatar="https://avatars.githubusercontent.com/u/67308985?s=200&v=4"
-/>
+/>;
 ```
 
--   `socketURL: string`: to set the WebSocket service address.
+-   `presenceURL: string`: to set the WebSocket service address.
+-   `presenceAuth: { type: 'publickey' | 'token'; publicKey?: string; endpoint?: '/api/auth'; }`: to set `presence` service Auth
 -   `avatar?: string`: to set avatar.
@@ -69,9 +70,6 @@ -   `name?: string`: to set name.
 // Exporting your custom components
-export const YourComponent = ({
-    socketURL,
-    name,
-    avatar
-}) => {
+export const YourComponent = ({ presenceURL, presenceAuth, name, avatar }) => {
     const { me, others } = useOnlineCursor({
-        socketURL,
+        presenceURL,
+        presenceAuth,
         name,
@@ -78,0 +76,0 @@ avatar,

src/cursor/cursor.ts

@@ -0,3 +1,4 @@
+import { Presence } from '@yomo/presencejs';
 import { stringToColor } from '../helper';
-import { MousePosition } from '../types';
+import { Latency, MousePosition } from '../types';
 
@@ -33,2 +34,13 @@ export default class Cursor {
     onMove(_mousePosition: MousePosition) {}
+
+    onGetLatency(_data: Latency) {}
+
+    subscribeLatency(yomo: Presence) {
+        return yomo.on$<Latency>('latency').subscribe(data => {
+            if (data.id !== this.id) {
+                return;
+            }
+            this.onGetLatency(data);
+        });
+    }
 }

src/cursor/me.ts

@@ -13,2 +13,3 @@ import { fromEvent, Subscription } from 'rxjs';
     private mousePositionSubscription: Subscription | undefined;
+    private latencySubscription: Subscription | undefined;
 
@@ -40,2 +41,3 @@ constructor({
         this.mousePositionSubscription = this.subscribeMousePosition(yomo);
+        this.latencySubscription = super.subscribeLatency(yomo);
     }
@@ -65,2 +67,7 @@
 
+        if (this.latencySubscription) {
+            this.latencySubscription.unsubscribe();
+            this.latencySubscription = undefined;
+        }
+
         return await new Promise(resolve => {
@@ -67,0 +74,0 @@ setTimeout(resolve, 500);

src/cursor/others.ts

@@ -10,2 +10,3 @@ import { Subscription } from 'rxjs';
     private movementMessageSubscription: Subscription | undefined;
+    private latencySubscription: Subscription | undefined;
 
@@ -31,2 +32,3 @@ constructor({
         this.textMessageSubscription = this.subscribeTextMessage(yomo);
+        this.latencySubscription = super.subscribeLatency(yomo);
     }
@@ -44,2 +46,7 @@
         }
+
+        if (this.latencySubscription) {
+            this.latencySubscription.unsubscribe();
+            this.latencySubscription = undefined;
+        }
     }
@@ -46,0 +53,0 @@

src/hooks/useOnlineCursor.ts

@@ -12,7 +12,15 @@ import { useEffect, useState } from 'react';
 const useOnlineCursor = ({
-    socketURL,
+    presenceURL,
+    presenceAuth,
     name,
     avatar,
 }: {
-    socketURL: string;
+    presenceURL: string;
+    presenceAuth: {
+        type: 'publickey' | 'token';
+        // The public key in your Allegro Mesh project.
+        publicKey?: string;
+        // api for getting access token
+        endpoint?: string;
+    };
     name?: string;
@@ -39,3 +47,5 @@ avatar?: string;
 
-        const yomo = new Presence(socketURL);
+        const yomo = new Presence(presenceURL, {
+            auth: presenceAuth,
+        });
 
@@ -42,0 +52,0 @@ yomo.on('connected', () => {

src/types/index.ts

@@ -28,1 +28,7 @@ export type CursorMessage = {
 };
+
+export type Latency = {
+    id: string;
+    meshId: string;
+    latency: number;
+};

No alert changes

Improved metrics

Total package byte prevSize

372966

increased by7.63%

Number of package files

32

increased by6.67%

Lines of code

3375

increased by8.31%

Worsened metrics

Number of lines in readme file

120

decreased by-1.64%

Dependency changes

• + Added@yomo/presencejs@0.0.6(transitive)

• - Removed@yomo/presencejs@0.0.5(transitive)

• Updated@yomo/presencejs@^0.0.6