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

Comparing version 0.1.5 to 0.1.6

dist/cursor/me.d.ts

@@ -20,2 +20,3 @@ import Presence from '@yomo/presencejs';
     private subscribeMousePosition;
+    private subscribeVisibility;
 }

dist/hooks/useOnlineCursor.d.ts

 import Me from '../cursor/me';
-import Others from '../cursor/others';
+import Other from '../cursor/other';
 declare const useOnlineCursor: ({ presenceURL, presenceAuthEndpoint, room, name, avatar, }: {
@@ -11,4 +11,4 @@ presenceURL: string;
     me: Me | null;
-    others: Others[];
+    others: Other[];
 };
 export default useOnlineCursor;

dist/hooks/useRenderPosition.d.ts

@@ -1,5 +0,5 @@
-/// <reference types="react" />
-import Others from '../cursor/others';
+import { RefObject } from 'react';
+import Other from '../cursor/other';
 import Me from '../cursor/me';
-declare const useRenderPosition: (cursor: Me | Others) => import("react").RefObject<HTMLDivElement>;
+declare const useRenderPosition: (cursor: Me | Other, refContainer?: RefObject<HTMLDivElement> | undefined) => RefObject<HTMLDivElement>;
 export default useRenderPosition;

dist/Latency.d.ts

 /// <reference types="react" />
 import Me from './cursor/me';
-import Others from './cursor/others';
+import Other from './cursor/other';
 declare const Latency: ({ cursor, showLatency, }: {
-    cursor: Me | Others;
+    cursor: Me | Other;
     showLatency: boolean;
 }) => JSX.Element | null;
 export default Latency;

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

@@ -948,5 +948,7 @@ 'use strict';
 
+    var visibilitySubscription = this.subscribeVisibility(yomo);
     this.subscription.add(onlineSubscription);
     this.subscription.add(mousePositionSubscription);
     this.subscription.add(latencySubscription);
+    this.subscription.add(visibilitySubscription);
   };
@@ -1063,9 +1065,27 @@
 
+  _proto.subscribeVisibility = function subscribeVisibility(yomo) {
+    var _this5 = this;
+
+    var visibilityChange$ = rxjs.fromEvent(document, 'visibilitychange');
+    return visibilityChange$.pipe(operators.map(function () {
+      var event;
+      if (document.hidden) event = 'leave';else event = 'enter';
+      return {
+        event: event
+      };
+    })).subscribe(function (_ref2) {
+      var event = _ref2.event;
+      yomo.send(event, {
+        id: _this5.id
+      });
+    });
+  };
+
   return Me;
 }(Cursor);
 
-var Others = /*#__PURE__*/function (_Cursor) {
-  _inheritsLoose(Others, _Cursor);
+var Other = /*#__PURE__*/function (_Cursor) {
+  _inheritsLoose(Other, _Cursor);
 
-  function Others(_ref) {
+  function Other(_ref) {
     var id = _ref.id,
@@ -1081,3 +1101,3 @@ x = _ref.x,
 
-  var _proto = Others.prototype;
+  var _proto = Other.prototype;
 
@@ -1090,4 +1110,8 @@ _proto.goOnline = function goOnline(yomo) {
 
+    var leaveSubscription = this.subscribeLeave(yomo);
+    var enterSubscription = this.subscribeEnter(yomo);
     this.subscription.add(textMessageSubscription);
     this.subscription.add(latencySubscription);
+    this.subscription.add(leaveSubscription);
+    this.subscription.add(enterSubscription);
   };
@@ -1133,3 +1157,31 @@
 
-  return Others;
+  _proto.subscribeLeave = function subscribeLeave(yomo) {
+    var _this3 = this;
+
+    return yomo.on$('leave').pipe(operators.filter(function (data) {
+      return data.id === _this3.id;
+    })).subscribe(function () {
+      _this3.onLeave();
+    });
+  };
+
+  _proto.subscribeEnter = function subscribeEnter(yomo) {
+    var _this4 = this;
+
+    return yomo.on$('enter').pipe(operators.filter(function (data) {
+      return data.id === _this4.id;
+    })).subscribe(function () {
+      _this4.onEnter();
+    });
+  };
+
+  _proto.onLeave = function onLeave() {
+    throw new Error('Method not implemented.');
+  };
+
+  _proto.onEnter = function onEnter() {
+    throw new Error('Method not implemented.');
+  };
+
+  return Other;
 }(Cursor);
@@ -1149,4 +1201,4 @@
   var _useState2 = React.useState(new Map()),
-      othersMap = _useState2[0],
-      setOthersMap = _useState2[1];
+      otherMap = _useState2[0],
+      setOtherMap = _useState2[1];
 
@@ -1177,3 +1229,3 @@ React.useEffect(function () {
       })).subscribe(function (data) {
-        setOthersMap(function (old) {
+        setOtherMap(function (old) {
           if (old.has(data.id)) {
@@ -1184,5 +1236,5 @@ return old;
           var cursorMap = new Map(old);
-          var others = new Others(data);
-          others.goOnline(yomo);
-          cursorMap.set(others.id, others);
+          var other = new Other(data);
+          other.goOnline(yomo);
+          cursorMap.set(other.id, other);
           return cursorMap;
@@ -1192,8 +1244,8 @@ });
       yomo.on('offline', function (data) {
-        setOthersMap(function (old) {
+        setOtherMap(function (old) {
           var cursorMap = new Map(old);
-          var others = cursorMap.get(data.id);
+          var other = cursorMap.get(data.id);
 
-          if (others) {
-            others.unsubscribe();
+          if (other) {
+            other.unsubscribe();
           }
@@ -1204,3 +1256,3 @@
         });
-      }); // Answer server query, when others others go online, server will ask otherss' states,
+      }); // Answer server query, when other other go online, server will ask others states,
       // this is the response
@@ -1211,3 +1263,3 @@
       })).subscribe(function (data) {
-        setOthersMap(function (old) {
+        setOtherMap(function (old) {
           if (old.has(data.id)) {
@@ -1218,5 +1270,5 @@ return old;
           var cursorMap = new Map(old);
-          var others = new Others(data);
-          others.goOnline(yomo);
-          cursorMap.set(others.id, others);
+          var other = new Other(data);
+          other.goOnline(yomo);
+          cursorMap.set(other.id, other);
           return cursorMap;
@@ -1260,3 +1312,3 @@ });
   var others = [];
-  othersMap.forEach(function (value) {
+  otherMap.forEach(function (value) {
     others.push(value);
@@ -1365,8 +1417,8 @@ });
 
-var useRenderPosition = function useRenderPosition(cursor) {
-  var refContainer = React.useRef(null);
+var useRenderPosition = function useRenderPosition(cursor, refContainer) {
+  var finaliRefContainer = refContainer || React.useRef(null);
   React.useEffect(function () {
     var renderPosition = function renderPosition(position) {
-      if (refContainer.current) {
-        refContainer.current.setAttribute('style', "transform: translate3d(" + position.mouseX + "px, " + position.mouseY + "px, 0);");
+      if (finaliRefContainer.current) {
+        finaliRefContainer.current.style.setProperty('transform', "translate3d(" + position.mouseX + "px, " + position.mouseY + "px, 0)");
       }
@@ -1384,9 +1436,30 @@ };
   }, [cursor]);
-  return refContainer;
+  return finaliRefContainer;
 };
 
-var OthersCursor = function OthersCursor(_ref) {
+var useRenderOpacity = function useRenderOpacity(cursor, refContainer) {
+  var finaliRefContainer = refContainer || React.useRef(null);
+  React.useEffect(function () {
+    var renderOpacity = function renderOpacity(opacity) {
+      if (finaliRefContainer.current) {
+        finaliRefContainer.current.style.setProperty('opacity', String(opacity));
+      }
+    };
+
+    cursor.onLeave = function () {
+      renderOpacity(0.5);
+    };
+
+    cursor.onEnter = function () {
+      renderOpacity(1);
+    };
+  }, [cursor]);
+  return finaliRefContainer;
+};
+
+var OtherCursor = function OtherCursor(_ref) {
   var cursor = _ref.cursor,
       showLatency = _ref.showLatency;
   var refContainer = useRenderPosition(cursor);
+  useRenderOpacity(cursor, refContainer);
 
@@ -1430,2 +1503,15 @@ var _useState = React.useState(''),
 
+var OthersCursors = function OthersCursors(_ref) {
+  var others = _ref.others,
+      _ref$showLatency = _ref.showLatency,
+      showLatency = _ref$showLatency === void 0 ? false : _ref$showLatency;
+  return React__default.createElement(React__default.Fragment, null, others.map(function (item) {
+    return React__default.createElement(OtherCursor, {
+      key: item.id,
+      cursor: item,
+      showLatency: showLatency
+    });
+  }));
+};
+
 var MeCursor = function MeCursor(_ref) {
@@ -1530,8 +1616,5 @@ var cursor = _ref.cursor,
     className: "online-cursor-wrapper"
-  }, others.map(function (item) {
-    return React__default.createElement(OthersCursor, {
-      key: item.id,
-      cursor: item,
-      showLatency: showLatency
-    });
+  }, React__default.createElement(OthersCursors, {
+    others: others,
+    showLatency: showLatency
   }), React__default.createElement(MeCursor, {
@@ -1538,0 +1621,0 @@ cursor: me,

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

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=require("rxjs/operators"),o=e(require("@yomo/presencejs")),i=require("rxjs");function a(e,t,n,r,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void n(e)}c.done?t(s):Promise.resolve(s).then(r,o)}function c(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function c(e){a(i,r,o,c,s,"next",e)}function s(e){a(i,r,o,c,s,"throw",e)}c(void 0)}))}}function s(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 c(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{c({},"")}catch(e){c=function(e,t,n){return e[t]=n}}function s(e,t,n,r){var o=Object.create((t&&t.prototype instanceof f?t:f).prototype),i=new L(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 c=b(a,n);if(c){if(c===l)continue;return c}}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 s=u(e,t,n);if("normal"===s.type){if(r=n.done?"completed":"suspendedYield",s.arg===l)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(r="completed",n.method="throw",n.arg=s.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=s;var l={};function f(){}function h(){}function p(){}var d={};c(d,o,(function(){return this}));var m=Object.getPrototypeOf,v=m&&m(m(_([])));v&&v!==t&&n.call(v,o)&&(d=v);var y=p.prototype=f.prototype=Object.create(d);function g(e){["next","throw","return"].forEach((function(t){c(e,t,(function(e){return this._invoke(t,e)}))}))}function w(e,t){var r;this._invoke=function(o,i){function a(){return new t((function(r,a){!function r(o,i,a,c){var s=u(e[o],e,i);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?t.resolve(f.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(f).then((function(e){l.value=e,a(l)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function b(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,b(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 x(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 L(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(x,this),this.reset(!0)}function _(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,c(y,"constructor",p),c(p,"constructor",h),h.displayName=c(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,c(e,a,"GeneratorFunction")),e.prototype=Object.create(y),e},e.awrap=function(e){return{__await:e}},g(w.prototype),c(w.prototype,i,(function(){return this})),e.AsyncIterator=w,e.async=function(t,n,r,o,i){void 0===i&&(i=Promise);var a=new w(s(t,n,r,o),i);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},g(y),c(y,a,"Generator"),c(y,o,(function(){return this})),c(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.prototype={constructor:L,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 c=n.call(i,"catchLoc"),s=n.call(i,"finallyLoc");if(c&&s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!s)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:_(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).subscription=n.subscribeMousemove(),n}s(t,e);var n=t.prototype;return n.goOnline=function(t){this.yomo=t,this.online(t);var n=this.subscribeOnline(t),r=this.subscribeMousePosition(t),o=e.prototype.subscribeLatency.call(this,t);this.subscription.add(n),this.subscription.add(r),this.subscription.add(o)},n.goOffline=function(){var e=c(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.subscription&&this.subscription.unsubscribe(),e.next=4,new Promise((function(e){setTimeout(e,500)}));case 4:return e.abrupt("return",e.sent);case 5: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 i.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 i.fromEvent(document,"mousemove").pipe(r.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((function(t){e.send("movement",t)}))},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}s(t,e);var n=t.prototype;return n.goOnline=function(t){this.subscription=this.subscribeMovement(t);var n=this.subscribeTextMessage(t),r=e.prototype.subscribeLatency.call(this,t);this.subscription.add(n),this.subscription.add(r)},n.unsubscribe=function(){this.subscription&&this.subscription.unsubscribe()},n.onTextMessage=function(e){},n.subscribeTextMessage=function(e){var t=this;return e.on$("text").pipe(r.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(r.filter((function(e){return e.id===n.id})),r.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),m=function(e){var n=e.presenceURL,i=e.presenceAuthEndpoint,a=e.room,s=e.name,u=e.avatar,f=t.useState(null),h=f[0],m=f[1],v=t.useState(new Map),y=v[0],g=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:s||"",avatar:u||""});m(t);var f=new o(n,{auth:{type:"token",endpoint:i}});f.on("connected",(function(){a&&f.toRoom(a),f.on$("online").pipe(r.filter((function(t){return t.id!==e}))).subscribe((function(e){g((function(t){if(t.has(e.id))return t;var n=new Map(t),r=new d(e);return r.goOnline(f),n.set(r.id,r),n}))})),f.on("offline",(function(e){g((function(t){var n=new Map(t),r=n.get(e.id);return r&&r.unsubscribe(),n.delete(e.id),n}))})),f.on$("sync").pipe(r.filter((function(t){return t.id!==e}))).subscribe((function(e){g((function(t){if(t.has(e.id))return t;var n=new Map(t),r=new d(e);return r.goOnline(f),n.set(r.id,r),n}))})),t.goOnline(f)}));var h=function(){var e=c(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:f.close();case 3:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return window.addEventListener("unload",h),function(){h(),window.removeEventListener("unload",h)}}),[a]);var w=[];return y.forEach((function(e){w.push(e)})),{me:h,others:w}};function v(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])}var y=/^[a-z]{2}$/i,g=function(e){var r,o=e.cursor,i=e.showLatency,a=t.useState({meshId:"",latency:0,backgroundColor:"green"}),c=a[0],s=a[1];return t.useEffect((function(){i?o.onGetLatency=function(e){if(e.latency){var t="green";e.latency>=200&&e.latency<300&&(t="#FFB02A"),e.latency>=300&&(t="red"),s({backgroundColor:t,meshId:e.meshId,latency:e.latency})}}:(o.onGetLatency=function(e){},s({meshId:"",latency:0,backgroundColor:"green"}))}),[i]),0===c.latency?null:n.createElement("div",{className:"online-cursor-wrapper__latency-box"},n.createElement("span",{className:"online-cursor-wrapper__meshId"},(r=c.meshId)&&y.test(r)&&String&&String.fromCodePoint?String.fromCodePoint.apply(String,r.split("").map((function(e){return 127397+e.charCodeAt(0)}))):""," ",c.meshId),n.createElement("span",{className:"online-cursor-wrapper__latency",style:{backgroundColor:c.backgroundColor}},c.latency,"ms"))},w=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},b=function(e){var r=e.cursor,o=e.showLatency,i=w(r),a=t.useState(""),c=a[0],s=a[1];return t.useEffect((function(){r.onTextMessage=function(e){s(e)}}),[]),t.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(v,{color:r.color}),n.createElement(g,{cursor:r,showLatency:o}),n.createElement("div",{className:"online-cursor-wrapper__tail-box",style:{borderBottomLeftRadius:c?30:15}},n.createElement("div",{className:"online-cursor-wrapper__user"},r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),r.name&&n.createElement("span",{className:"online-cursor-wrapper__name"},r.name)),c&&n.createElement("div",{className:"online-cursor-wrapper__text"},c)))}),[c,o])},x=function(e){var r=e.cursor,o=e.showLatency,i=w(r),a=t.useState(!1),c=a[0],s=a[1],u=t.useState(""),l=u[0],f=u[1],h=t.useCallback((function(e){var t=e.target.value;"/"!==t&&(f(t),r.sendMessage(t))}),[]);return t.useEffect((function(){var e=function(e){"Slash"===e.code&&s(!0),"Escape"===e.code&&(s(!1),f(""),r.sendMessage(""))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[]),t.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(v,{color:r.color}),n.createElement(g,{cursor:r,showLatency:o}),n.createElement("div",{className:"online-cursor-wrapper__tail-box",style:{borderBottomLeftRadius:c?30:15}},n.createElement("div",{className:"online-cursor-wrapper__user"},r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),r.name&&n.createElement("span",{className:"online-cursor-wrapper__name"},r.name)),c&&n.createElement("div",{className:"online-cursor-wrapper__input-box"},n.createElement("span",null,l),n.createElement("input",{autoFocus:!0,placeholder:"Say something",value:l,onChange:h}))))}),[c,l,o])};exports.default=t.memo((function(e){var t=e.showLatency,r=void 0!==t&&t,o=m({presenceURL:e.presenceURL,presenceAuthEndpoint:e.presenceAuthEndpoint,room:e.room,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(b,{key:e.id,cursor:e,showLatency:r})})),n.createElement(x,{cursor:i,showLatency:r})):null})),exports.useOnlineCursor=m,exports.useRenderPosition=w;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=require("rxjs/operators"),o=e(require("@yomo/presencejs")),i=require("rxjs");function a(e,t,n,r,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void n(e)}c.done?t(s):Promise.resolve(s).then(r,o)}function c(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function c(e){a(i,r,o,c,s,"next",e)}function s(e){a(i,r,o,c,s,"throw",e)}c(void 0)}))}}function s(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 c(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{c({},"")}catch(e){c=function(e,t,n){return e[t]=n}}function s(e,t,n,r){var o=Object.create((t&&t.prototype instanceof f?t:f).prototype),i=new L(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 c=w(a,n);if(c){if(c===l)continue;return c}}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 s=u(e,t,n);if("normal"===s.type){if(r=n.done?"completed":"suspendedYield",s.arg===l)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(r="completed",n.method="throw",n.arg=s.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=s;var l={};function f(){}function h(){}function p(){}var d={};c(d,o,(function(){return this}));var v=Object.getPrototypeOf,m=v&&v(v(_([])));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){c(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,c){var s=u(e[o],e,i);if("throw"!==s.type){var l=s.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?t.resolve(f.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(f).then((function(e){l.value=e,a(l)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function w(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,w(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 x(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 L(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(x,this),this.reset(!0)}function _(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,c(y,"constructor",p),c(p,"constructor",h),h.displayName=c(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,c(e,a,"GeneratorFunction")),e.prototype=Object.create(y),e},e.awrap=function(e){return{__await:e}},b(g.prototype),c(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(s(t,n,r,o),i);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},b(y),c(y,a,"Generator"),c(y,o,(function(){return this})),c(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.prototype={constructor:L,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 c=n.call(i,"catchLoc"),s=n.call(i,"finallyLoc");if(c&&s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!s)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:_(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).subscription=n.subscribeMousemove(),n}s(t,e);var n=t.prototype;return n.goOnline=function(t){this.yomo=t,this.online(t);var n=this.subscribeOnline(t),r=this.subscribeMousePosition(t),o=e.prototype.subscribeLatency.call(this,t),i=this.subscribeVisibility(t);this.subscription.add(n),this.subscription.add(r),this.subscription.add(o),this.subscription.add(i)},n.goOffline=function(){var e=c(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.subscription&&this.subscription.unsubscribe(),e.next=4,new Promise((function(e){setTimeout(e,500)}));case 4:return e.abrupt("return",e.sent);case 5: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 i.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 i.fromEvent(document,"mousemove").pipe(r.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((function(t){e.send("movement",t)}))},n.subscribeVisibility=function(e){var t=this;return i.fromEvent(document,"visibilitychange").pipe(r.map((function(){return{event:document.hidden?"leave":"enter"}}))).subscribe((function(n){e.send(n.event,{id:t.id})}))},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}s(t,e);var n=t.prototype;return n.goOnline=function(t){this.subscription=this.subscribeMovement(t);var n=this.subscribeTextMessage(t),r=e.prototype.subscribeLatency.call(this,t),o=this.subscribeLeave(t),i=this.subscribeEnter(t);this.subscription.add(n),this.subscription.add(r),this.subscription.add(o),this.subscription.add(i)},n.unsubscribe=function(){this.subscription&&this.subscription.unsubscribe()},n.onTextMessage=function(e){},n.subscribeTextMessage=function(e){var t=this;return e.on$("text").pipe(r.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(r.filter((function(e){return e.id===n.id})),r.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})}))},n.subscribeLeave=function(e){var t=this;return e.on$("leave").pipe(r.filter((function(e){return e.id===t.id}))).subscribe((function(){t.onLeave()}))},n.subscribeEnter=function(e){var t=this;return e.on$("enter").pipe(r.filter((function(e){return e.id===t.id}))).subscribe((function(){t.onEnter()}))},n.onLeave=function(){throw new Error("Method not implemented.")},n.onEnter=function(){throw new Error("Method not implemented.")},t}(h),v=function(e){var n=e.presenceURL,i=e.presenceAuthEndpoint,a=e.room,s=e.name,u=e.avatar,f=t.useState(null),h=f[0],v=f[1],m=t.useState(new Map),y=m[0],b=m[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:s||"",avatar:u||""});v(t);var f=new o(n,{auth:{type:"token",endpoint:i}});f.on("connected",(function(){a&&f.toRoom(a),f.on$("online").pipe(r.filter((function(t){return t.id!==e}))).subscribe((function(e){b((function(t){if(t.has(e.id))return t;var n=new Map(t),r=new d(e);return r.goOnline(f),n.set(r.id,r),n}))})),f.on("offline",(function(e){b((function(t){var n=new Map(t),r=n.get(e.id);return r&&r.unsubscribe(),n.delete(e.id),n}))})),f.on$("sync").pipe(r.filter((function(t){return t.id!==e}))).subscribe((function(e){b((function(t){if(t.has(e.id))return t;var n=new Map(t),r=new d(e);return r.goOnline(f),n.set(r.id,r),n}))})),t.goOnline(f)}));var h=function(){var e=c(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:f.close();case 3:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return window.addEventListener("unload",h),function(){h(),window.removeEventListener("unload",h)}}),[a]);var g=[];return y.forEach((function(e){g.push(e)})),{me:h,others:g}};function m(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])}var y=/^[a-z]{2}$/i,b=function(e){var r,o=e.cursor,i=e.showLatency,a=t.useState({meshId:"",latency:0,backgroundColor:"green"}),c=a[0],s=a[1];return t.useEffect((function(){i?o.onGetLatency=function(e){if(e.latency){var t="green";e.latency>=200&&e.latency<300&&(t="#FFB02A"),e.latency>=300&&(t="red"),s({backgroundColor:t,meshId:e.meshId,latency:e.latency})}}:(o.onGetLatency=function(e){},s({meshId:"",latency:0,backgroundColor:"green"}))}),[i]),0===c.latency?null:n.createElement("div",{className:"online-cursor-wrapper__latency-box"},n.createElement("span",{className:"online-cursor-wrapper__meshId"},(r=c.meshId)&&y.test(r)&&String&&String.fromCodePoint?String.fromCodePoint.apply(String,r.split("").map((function(e){return 127397+e.charCodeAt(0)}))):""," ",c.meshId),n.createElement("span",{className:"online-cursor-wrapper__latency",style:{backgroundColor:c.backgroundColor}},c.latency,"ms"))},g=function(e,n){var r=n||t.useRef(null);return t.useEffect((function(){var t=function(e){r.current&&r.current.style.setProperty("transform","translate3d("+e.mouseX+"px, "+e.mouseY+"px, 0)")};t({mouseX:e.x,mouseY:e.y}),e.onMove=function(e){t(e)}}),[e]),r},w=function(e){var r=e.cursor,o=e.showLatency,i=g(r);!function(e,n){var r=n||t.useRef(null);t.useEffect((function(){var t=function(e){r.current&&r.current.style.setProperty("opacity",String(e))};e.onLeave=function(){t(.5)},e.onEnter=function(){t(1)}}),[e])}(r,i);var a=t.useState(""),c=a[0],s=a[1];return t.useEffect((function(){r.onTextMessage=function(e){s(e)}}),[]),t.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(m,{color:r.color}),n.createElement(b,{cursor:r,showLatency:o}),n.createElement("div",{className:"online-cursor-wrapper__tail-box",style:{borderBottomLeftRadius:c?30:15}},n.createElement("div",{className:"online-cursor-wrapper__user"},r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),r.name&&n.createElement("span",{className:"online-cursor-wrapper__name"},r.name)),c&&n.createElement("div",{className:"online-cursor-wrapper__text"},c)))}),[c,o])},x=function(e){var t=e.showLatency,r=void 0!==t&&t;return n.createElement(n.Fragment,null,e.others.map((function(e){return n.createElement(w,{key:e.id,cursor:e,showLatency:r})})))},E=function(e){var r=e.cursor,o=e.showLatency,i=g(r),a=t.useState(!1),c=a[0],s=a[1],u=t.useState(""),l=u[0],f=u[1],h=t.useCallback((function(e){var t=e.target.value;"/"!==t&&(f(t),r.sendMessage(t))}),[]);return t.useEffect((function(){var e=function(e){"Slash"===e.code&&s(!0),"Escape"===e.code&&(s(!1),f(""),r.sendMessage(""))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[]),t.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(m,{color:r.color}),n.createElement(b,{cursor:r,showLatency:o}),n.createElement("div",{className:"online-cursor-wrapper__tail-box",style:{borderBottomLeftRadius:c?30:15}},n.createElement("div",{className:"online-cursor-wrapper__user"},r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),r.name&&n.createElement("span",{className:"online-cursor-wrapper__name"},r.name)),c&&n.createElement("div",{className:"online-cursor-wrapper__input-box"},n.createElement("span",null,l),n.createElement("input",{autoFocus:!0,placeholder:"Say something",value:l,onChange:h}))))}),[c,l,o])};exports.default=t.memo((function(e){var t=e.showLatency,r=void 0!==t&&t,o=v({presenceURL:e.presenceURL,presenceAuthEndpoint:e.presenceAuthEndpoint,room:e.room,name:e.name,avatar:e.avatar}),i=o.me;return i?n.createElement("div",{className:"online-cursor-wrapper"},n.createElement(x,{others:o.others,showLatency:r}),n.createElement(E,{cursor:i,showLatency:r})):null})),exports.useOnlineCursor=v,exports.useRenderPosition=g;
 //# sourceMappingURL=react-cursor-chat.cjs.production.min.js.map

dist/react-cursor-chat.esm.js

@@ -941,5 +941,7 @@ import React, { useState, useEffect, useMemo, useRef, useCallback, memo } from 'react';
 
+    var visibilitySubscription = this.subscribeVisibility(yomo);
     this.subscription.add(onlineSubscription);
     this.subscription.add(mousePositionSubscription);
     this.subscription.add(latencySubscription);
+    this.subscription.add(visibilitySubscription);
   };
@@ -1056,9 +1058,27 @@
 
+  _proto.subscribeVisibility = function subscribeVisibility(yomo) {
+    var _this5 = this;
+
+    var visibilityChange$ = fromEvent(document, 'visibilitychange');
+    return visibilityChange$.pipe(map(function () {
+      var event;
+      if (document.hidden) event = 'leave';else event = 'enter';
+      return {
+        event: event
+      };
+    })).subscribe(function (_ref2) {
+      var event = _ref2.event;
+      yomo.send(event, {
+        id: _this5.id
+      });
+    });
+  };
+
   return Me;
 }(Cursor);
 
-var Others = /*#__PURE__*/function (_Cursor) {
-  _inheritsLoose(Others, _Cursor);
+var Other = /*#__PURE__*/function (_Cursor) {
+  _inheritsLoose(Other, _Cursor);
 
-  function Others(_ref) {
+  function Other(_ref) {
     var id = _ref.id,
@@ -1074,3 +1094,3 @@ x = _ref.x,
 
-  var _proto = Others.prototype;
+  var _proto = Other.prototype;
 
@@ -1083,4 +1103,8 @@ _proto.goOnline = function goOnline(yomo) {
 
+    var leaveSubscription = this.subscribeLeave(yomo);
+    var enterSubscription = this.subscribeEnter(yomo);
     this.subscription.add(textMessageSubscription);
     this.subscription.add(latencySubscription);
+    this.subscription.add(leaveSubscription);
+    this.subscription.add(enterSubscription);
   };
@@ -1126,3 +1150,31 @@
 
-  return Others;
+  _proto.subscribeLeave = function subscribeLeave(yomo) {
+    var _this3 = this;
+
+    return yomo.on$('leave').pipe(filter(function (data) {
+      return data.id === _this3.id;
+    })).subscribe(function () {
+      _this3.onLeave();
+    });
+  };
+
+  _proto.subscribeEnter = function subscribeEnter(yomo) {
+    var _this4 = this;
+
+    return yomo.on$('enter').pipe(filter(function (data) {
+      return data.id === _this4.id;
+    })).subscribe(function () {
+      _this4.onEnter();
+    });
+  };
+
+  _proto.onLeave = function onLeave() {
+    throw new Error('Method not implemented.');
+  };
+
+  _proto.onEnter = function onEnter() {
+    throw new Error('Method not implemented.');
+  };
+
+  return Other;
 }(Cursor);
@@ -1142,4 +1194,4 @@
   var _useState2 = useState(new Map()),
-      othersMap = _useState2[0],
-      setOthersMap = _useState2[1];
+      otherMap = _useState2[0],
+      setOtherMap = _useState2[1];
 
@@ -1170,3 +1222,3 @@ useEffect(function () {
       })).subscribe(function (data) {
-        setOthersMap(function (old) {
+        setOtherMap(function (old) {
           if (old.has(data.id)) {
@@ -1177,5 +1229,5 @@ return old;
           var cursorMap = new Map(old);
-          var others = new Others(data);
-          others.goOnline(yomo);
-          cursorMap.set(others.id, others);
+          var other = new Other(data);
+          other.goOnline(yomo);
+          cursorMap.set(other.id, other);
           return cursorMap;
@@ -1185,8 +1237,8 @@ });
       yomo.on('offline', function (data) {
-        setOthersMap(function (old) {
+        setOtherMap(function (old) {
           var cursorMap = new Map(old);
-          var others = cursorMap.get(data.id);
+          var other = cursorMap.get(data.id);
 
-          if (others) {
-            others.unsubscribe();
+          if (other) {
+            other.unsubscribe();
           }
@@ -1197,3 +1249,3 @@
         });
-      }); // Answer server query, when others others go online, server will ask otherss' states,
+      }); // Answer server query, when other other go online, server will ask others states,
       // this is the response
@@ -1204,3 +1256,3 @@
       })).subscribe(function (data) {
-        setOthersMap(function (old) {
+        setOtherMap(function (old) {
           if (old.has(data.id)) {
@@ -1211,5 +1263,5 @@ return old;
           var cursorMap = new Map(old);
-          var others = new Others(data);
-          others.goOnline(yomo);
-          cursorMap.set(others.id, others);
+          var other = new Other(data);
+          other.goOnline(yomo);
+          cursorMap.set(other.id, other);
           return cursorMap;
@@ -1253,3 +1305,3 @@ });
   var others = [];
-  othersMap.forEach(function (value) {
+  otherMap.forEach(function (value) {
     others.push(value);
@@ -1358,8 +1410,8 @@ });
 
-var useRenderPosition = function useRenderPosition(cursor) {
-  var refContainer = useRef(null);
+var useRenderPosition = function useRenderPosition(cursor, refContainer) {
+  var finaliRefContainer = refContainer || useRef(null);
   useEffect(function () {
     var renderPosition = function renderPosition(position) {
-      if (refContainer.current) {
-        refContainer.current.setAttribute('style', "transform: translate3d(" + position.mouseX + "px, " + position.mouseY + "px, 0);");
+      if (finaliRefContainer.current) {
+        finaliRefContainer.current.style.setProperty('transform', "translate3d(" + position.mouseX + "px, " + position.mouseY + "px, 0)");
       }
@@ -1377,9 +1429,30 @@ };
   }, [cursor]);
-  return refContainer;
+  return finaliRefContainer;
 };
 
-var OthersCursor = function OthersCursor(_ref) {
+var useRenderOpacity = function useRenderOpacity(cursor, refContainer) {
+  var finaliRefContainer = refContainer || useRef(null);
+  useEffect(function () {
+    var renderOpacity = function renderOpacity(opacity) {
+      if (finaliRefContainer.current) {
+        finaliRefContainer.current.style.setProperty('opacity', String(opacity));
+      }
+    };
+
+    cursor.onLeave = function () {
+      renderOpacity(0.5);
+    };
+
+    cursor.onEnter = function () {
+      renderOpacity(1);
+    };
+  }, [cursor]);
+  return finaliRefContainer;
+};
+
+var OtherCursor = function OtherCursor(_ref) {
   var cursor = _ref.cursor,
       showLatency = _ref.showLatency;
   var refContainer = useRenderPosition(cursor);
+  useRenderOpacity(cursor, refContainer);
 
@@ -1423,2 +1496,15 @@ var _useState = useState(''),
 
+var OthersCursors = function OthersCursors(_ref) {
+  var others = _ref.others,
+      _ref$showLatency = _ref.showLatency,
+      showLatency = _ref$showLatency === void 0 ? false : _ref$showLatency;
+  return React.createElement(React.Fragment, null, others.map(function (item) {
+    return React.createElement(OtherCursor, {
+      key: item.id,
+      cursor: item,
+      showLatency: showLatency
+    });
+  }));
+};
+
 var MeCursor = function MeCursor(_ref) {
@@ -1523,8 +1609,5 @@ var cursor = _ref.cursor,
     className: "online-cursor-wrapper"
-  }, others.map(function (item) {
-    return React.createElement(OthersCursor, {
-      key: item.id,
-      cursor: item,
-      showLatency: showLatency
-    });
+  }, React.createElement(OthersCursors, {
+    others: others,
+    showLatency: showLatency
   }), React.createElement(MeCursor, {
@@ -1531,0 +1614,0 @@ cursor: me,

package.json

 {
   "name": "@yomo/react-cursor-chat",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere. based on Presencejs.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -46,5 +46,5 @@ # @yomo/react-cursor-chat
 
-Login with your Github account on `https://presencejs.yomo.run`, will get a free `app_id` and `app_secret`
+Login with your Github account on `https://presencejs.yomo.run`, and you will get a free `app_id` and `app_secret`.
 
-then, add `.env.local` like:
+Then, create a file named `.env.local` and add the following in it:
 
@@ -56,2 +56,4 @@ ```bash
 
+**Note** - Don't copy the `app_id` and `app_secret` examples mentioned above. Replace it with the one that you will see on your screen. 
+
 ### Integrate to your project
@@ -88,5 +90,5 @@
 
-If react-cursor-chat color matches with your website background color and your users must get confused with.
+If react-cursor-chat color matches with your website background color, your users might get confused with it.
 
-There are built-in styles in the `@yomo/react-cursor-chat` component: **`apricot-yellow`** and **`hairy-green`**, you should import one of them to use in your web application.
+There are built-in styles in the `@yomo/react-cursor-chat` component: **`apricot-yellow`** and **`hairy-green`**. You should import one of them to use in your web application.
 
@@ -93,0 +95,0 @@ **`hairy-green`**

src/cursor/me.ts

@@ -35,5 +35,7 @@ import { fromEvent, Subscription } from 'rxjs';
         const latencySubscription = super.subscribeLatency(yomo);
+        const visibilitySubscription = this.subscribeVisibility(yomo);
         this.subscription.add(onlineSubscription);
         this.subscription.add(mousePositionSubscription);
         this.subscription.add(latencySubscription);
+        this.subscription.add(visibilitySubscription)
     }
@@ -119,2 +121,24 @@
     }
+
+    private subscribeVisibility(yomo: Presence) {
+        const visibilityChange$ = fromEvent<MouseEvent>(
+            document,
+            'visibilitychange'
+        );
+
+        return visibilityChange$
+            .pipe(
+                map(() => {
+                    let event: 'leave' | 'enter';
+                    if (document.hidden) event = 'leave';
+                    else event = 'enter';
+                    return {
+                        event
+                    };
+                })
+            )
+            .subscribe(({ event }) => {
+                yomo.send(event, { id: this.id });
+            });
+    }
 }

src/hooks/useOnlineCursor.ts

@@ -5,3 +5,3 @@ import { useEffect, useState } from 'react';
 import Me from '../cursor/me';
-import Others from '../cursor/others';
+import Other from '../cursor/other';
 import { uuidv4 } from '../helper';
@@ -24,4 +24,4 @@ import { CursorMessage, OfflineMessage } from '../types';
     const [me, setMe] = useState<Me | null>(null);
-    const [othersMap, setOthersMap] = useState<Map<string, Others>>(
-        new Map<string, Others>()
+    const [otherMap, setOtherMap] = useState<Map<string, Other>>(
+        new Map<string, Other>()
     );
@@ -57,3 +57,3 @@
                 .subscribe(data => {
-                    setOthersMap(old => {
+                    setOtherMap(old => {
                         if (old.has(data.id)) {
@@ -63,5 +63,5 @@ return old;
                         const cursorMap = new Map(old);
-                        const others = new Others(data);
-                        others.goOnline(yomo);
-                        cursorMap.set(others.id, others);
+                        const other = new Other(data);
+                        other.goOnline(yomo);
+                        cursorMap.set(other.id, other);
                         return cursorMap;
@@ -72,7 +72,7 @@ });
             yomo.on<OfflineMessage>('offline', data => {
-                setOthersMap(old => {
+                setOtherMap(old => {
                     const cursorMap = new Map(old);
-                    const others = cursorMap.get(data.id);
-                    if (others) {
-                        others.unsubscribe();
+                    const other = cursorMap.get(data.id);
+                    if (other) {
+                        other.unsubscribe();
                     }
@@ -84,3 +84,3 @@ cursorMap.delete(data.id);
 
-            // Answer server query, when others others go online, server will ask otherss' states,
+            // Answer server query, when other other go online, server will ask others states,
             // this is the response
@@ -90,3 +90,3 @@ yomo.on$<CursorMessage>('sync')
                 .subscribe(data => {
-                    setOthersMap(old => {
+                    setOtherMap(old => {
                         if (old.has(data.id)) {
@@ -96,5 +96,5 @@ return old;
                         const cursorMap = new Map(old);
-                        const others = new Others(data);
-                        others.goOnline(yomo);
-                        cursorMap.set(others.id, others);
+                        const other = new Other(data);
+                        other.goOnline(yomo);
+                        cursorMap.set(other.id, other);
                         return cursorMap;
@@ -122,5 +122,5 @@ });
 
-    const others: Others[] = [];
+    const others: Other[] = [];
 
-    othersMap.forEach(value => {
+    otherMap.forEach(value => {
         others.push(value);
@@ -127,0 +127,0 @@ });

src/hooks/useRenderPosition.ts

@@ -1,16 +0,13 @@
-import { useEffect, useRef } from 'react';
-import Others from '../cursor/others';
+import { RefObject, useEffect, useRef } from 'react';
+import Other from '../cursor/other';
 import Me from '../cursor/me';
 import { MousePosition } from '../types';
 
-const useRenderPosition = (cursor: Me | Others) => {
-    const refContainer = useRef<HTMLDivElement>(null);
+const useRenderPosition = (cursor: Me | Other, refContainer?: RefObject<HTMLDivElement>) => {
+    const finaliRefContainer = refContainer || useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         const renderPosition = (position: MousePosition) => {
-            if (refContainer.current) {
-                refContainer.current.setAttribute(
-                    'style',
-                    `transform: translate3d(${position.mouseX}px, ${position.mouseY}px, 0);`
-                );
+            if (finaliRefContainer.current) {
+                finaliRefContainer.current.style.setProperty('transform', `translate3d(${position.mouseX}px, ${position.mouseY}px, 0)`);
             }
@@ -26,5 +23,5 @@ };
 
-    return refContainer;
+    return finaliRefContainer;
 };
 
 export default useRenderPosition;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

417989

increased by6.26%

Number of package files

49

increased by8.89%

Lines of code

3866

increased by6.68%

Number of lines in readme file

269

increased by0.75%

Worsened metrics

Number of medium supply chain risk alerts

4

increased by33.33%

No dependency changes