UNPKG

@webrtc-remote-control/react

Version:

Thin abstraction layer above peerjs that will let you be more productive at making WebRTC data channels based apps.

3 lines (2 loc) 11.1 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).webrtcRemoteControlReact={},e.React)}(this,function(e,t){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/n(t);function o(e){var t={exports:{}};return e(t,t.exports),t.exports}var i="function"==typeof Symbol&&Symbol.for,c=i?Symbol.for("react.element"):60103,s=i?Symbol.for("react.portal"):60106,a=i?Symbol.for("react.fragment"):60107,u=i?Symbol.for("react.strict_mode"):60108,f=i?Symbol.for("react.profiler"):60114,l=i?Symbol.for("react.provider"):60109,p=i?Symbol.for("react.context"):60110,m=i?Symbol.for("react.async_mode"):60111,d=i?Symbol.for("react.concurrent_mode"):60111,y=i?Symbol.for("react.forward_ref"):60112,h=i?Symbol.for("react.suspense"):60113,v=i?Symbol.for("react.suspense_list"):60120,b=i?Symbol.for("react.memo"):60115,g=i?Symbol.for("react.lazy"):60116,w=i?Symbol.for("react.block"):60121,_=i?Symbol.for("react.fundamental"):60117,S=i?Symbol.for("react.responder"):60118,P=i?Symbol.for("react.scope"):60119;function C(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case c:switch(e=e.type){case m:case d:case a:case f:case u:case h:return e;default:switch(e=e&&e.$$typeof){case p:case y:case g:case b:case l:return e;default:return t}}case s:return t}}}function x(e){return C(e)===d}var E={AsyncMode:m,ConcurrentMode:d,ContextConsumer:p,ContextProvider:l,Element:c,ForwardRef:y,Fragment:a,Lazy:g,Memo:b,Portal:s,Profiler:f,StrictMode:u,Suspense:h,isAsyncMode:function(e){return x(e)||C(e)===m},isConcurrentMode:x,isContextConsumer:function(e){return C(e)===p},isContextProvider:function(e){return C(e)===l},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===c},isForwardRef:function(e){return C(e)===y},isFragment:function(e){return C(e)===a},isLazy:function(e){return C(e)===g},isMemo:function(e){return C(e)===b},isPortal:function(e){return C(e)===s},isProfiler:function(e){return C(e)===f},isStrictMode:function(e){return C(e)===u},isSuspense:function(e){return C(e)===h},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===f||e===u||e===h||e===v||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===b||e.$$typeof===l||e.$$typeof===p||e.$$typeof===y||e.$$typeof===_||e.$$typeof===S||e.$$typeof===P||e.$$typeof===w)},typeOf:C};function T(){}function I(){}o(function(e,t){}),o(function(e){e.exports=E}),I.resetWarningCache=T;var O=o(function(e){e.exports=function(){function e(e,t,n,r,o,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:I,resetWarningCache:T};return n.PropTypes=n,n}()}),R=o(function(e){var t=Object.prototype.hasOwnProperty,n="~";function r(){}function o(e,t,n){this.fn=e,this.context=t,this.once=n||!1}function i(e,t,r,i,c){if("function"!=typeof r)throw new TypeError("The listener must be a function");var s=new o(r,i||e,c),a=n?n+t:t;return e._events[a]?e._events[a].fn?e._events[a]=[e._events[a],s]:e._events[a].push(s):(e._events[a]=s,e._eventsCount++),e}function c(e,t){0==--e._eventsCount?e._events=new r:delete e._events[t]}function s(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(n=!1)),s.prototype.eventNames=function(){var e,r,o=[];if(0===this._eventsCount)return o;for(r in e=this._events)t.call(e,r)&&o.push(n?r.slice(1):r);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(e)):o},s.prototype.listeners=function(e){var t=this._events[n?n+e:e];if(!t)return[];if(t.fn)return[t.fn];for(var r=0,o=t.length,i=new Array(o);r<o;r++)i[r]=t[r].fn;return i},s.prototype.listenerCount=function(e){var t=this._events[n?n+e:e];return t?t.fn?1:t.length:0},s.prototype.emit=function(e,t,r,o,i,c){var s=n?n+e:e;if(!this._events[s])return!1;var a,u,f=this._events[s],l=arguments.length;if(f.fn){switch(f.once&&this.removeListener(e,f.fn,void 0,!0),l){case 1:return f.fn.call(f.context),!0;case 2:return f.fn.call(f.context,t),!0;case 3:return f.fn.call(f.context,t,r),!0;case 4:return f.fn.call(f.context,t,r,o),!0;case 5:return f.fn.call(f.context,t,r,o,i),!0;case 6:return f.fn.call(f.context,t,r,o,i,c),!0}for(u=1,a=new Array(l-1);u<l;u++)a[u-1]=arguments[u];f.fn.apply(f.context,a)}else{var p,m=f.length;for(u=0;u<m;u++)switch(f[u].once&&this.removeListener(e,f[u].fn,void 0,!0),l){case 1:f[u].fn.call(f[u].context);break;case 2:f[u].fn.call(f[u].context,t);break;case 3:f[u].fn.call(f[u].context,t,r);break;case 4:f[u].fn.call(f[u].context,t,r,o);break;default:if(!a)for(p=1,a=new Array(l-1);p<l;p++)a[p-1]=arguments[p];f[u].fn.apply(f[u].context,a)}}return!0},s.prototype.on=function(e,t,n){return i(this,e,t,n,!1)},s.prototype.once=function(e,t,n){return i(this,e,t,n,!0)},s.prototype.removeListener=function(e,t,r,o){var i=n?n+e:e;if(!this._events[i])return this;if(!t)return c(this,i),this;var s=this._events[i];if(s.fn)s.fn!==t||o&&!s.once||r&&s.context!==r||c(this,i);else{for(var a=0,u=[],f=s.length;a<f;a++)(s[a].fn!==t||o&&!s[a].once||r&&s[a].context!==r)&&u.push(s[a]);u.length?this._events[i]=1===u.length?u[0]:u:c(this,i)}return this},s.prototype.removeAllListeners=function(e){var t;return e?this._events[t=n?n+e:e]&&c(this,t):(this._events=new r,this._eventsCount=0),this},s.prototype.off=s.prototype.removeListener,s.prototype.addListener=s.prototype.on,s.prefixed=n,s.EventEmitter=s,e.exports=s});function $(){return $=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},$.apply(this,arguments)}function j(){var e="from-webrtc-remote-control";return{isConnectionFromRemote:function(t){return t.metadata===e},connMetadata:e}}function F(e){var t=void 0===e?{}:e,n=t.sessionStorageKey,r=function(e){var t=void 0===e?{mapping:{},withTechicalErrorMessage:!0}:e,n=t.withTechicalErrorMessage,r=$({"browser-incompatible":"Your browser doesn't support WebRTC features, please try with a recent browser.",disconnected:"You are disconnected and can't make any more peer connection, please reload.",network:"It seems you're experimenting some network problems.","peer-unavailable":"The peer you were connected to seems to have lost connection, try to reload it.","server-error":"An error occured on the signaling server. Sorry, try to come back later.",default:function(e){return"An error occured"+(e.type?" - type: "+e.type:"")}},t.mapping);return function(e){var t=r[e.type]||("function"==typeof r.default?r.default(e):r.default);return t&&e.message&&n?t+" ("+e.message+")":t}}(t.humanErrors),o=j().isConnectionFromRemote,i=function(e){return void 0===e&&(e="webrtc-remote-control-peer-id"),{getPeerId:function(){return sessionStorage.getItem(e)},setPeerIdToSessionStorage:function(t){sessionStorage.setItem(e,t)}}}(n);return{humanizeError:r,isConnectionFromRemote:o,getPeerId:i.getPeerId,setPeerIdToSessionStorage:i.setPeerIdToSessionStorage}}var k={__proto__:null,default:function(e){var t=e.isConnectionFromRemote,n=e.setPeerIdToSessionStorage;return{humanizeError:e.humanizeError,isConnectionFromRemote:t,getPeerId:e.getPeerId,bindConnection:function(e){return new Promise(function(r){var o=new R,i=new Map,c={sendTo:function(e,t){var n=i.get(e);return n?n.send(t):null},sendAll:function(e){[].concat(i.values()).forEach(function(t){t.send(e)})},on:o.on.bind(o),off:o.off.bind(o)};e.on("open",function(e){n(e),r(c)}),e.on("connection",function(e){t(e)&&(i.set(e.peer,e),e.on("open",function(){o.emit("remote.connect",{id:e.peer}),console.log("connections",i)}),e.on("data",function(t){o.emit("data",{id:e.peer,from:"remote"},t)}),e.on("close",function(){i.delete(e.peer),o.emit("remote.disconnect",{id:e.peer}),console.log("connections",i)}))})})}}},prepareUtils:F},z={__proto__:null,default:function(e){var t=e.setPeerIdToSessionStorage;return{humanizeError:e.humanizeError,getPeerId:e.getPeerId,bindConnection:function(e,n){return new Promise(function(r){var o=null,i=new R,c={send:function(e){o?o.send(e):console.warning("You called `send` with no connection")},on:i.on.bind(i),off:i.off.bind(i)},s=function t(r){o=null,o=function(e,t,n,r){var o=j(),i=e.connect(t,{serialization:"json",metadata:o.connMetadata});return i.on("open",function(){"function"==typeof r&&r()}),i.on("data",function(e){n.emit("data",{from:"master"},e)}),i}(e,n,i,r),o.on("close",function(){i.emit("remote.disconnect",{id:e.id}),t(function(){i.emit("remote.reconnect",{id:e.id})})})};e.on("open",function(e){t(e),s(function(){return r(c)}),o.on("error",function(e){console.log("conn.error",e)}),window.addEventListener("beforeunload",function(){o&&o.disconnect&&o.disconnect()})})})}}},prepareUtils:F},M=t.createContext();function L(e){var n=e.children,o=e.sessionStorageKey,i=e.humanErrors,c=e.mode,s=e.masterPeerId,a=e.init,u=["master","remote"];if(!u.includes(c))throw new Error('Unsupported "'+c+'" mode. Only '+u.map(function(e){return'"'+e+'"'}).join(", ")+" accepted.");if("master"===c&&s)throw console.log(typeof s),new Error('`masterPeerId` prop not allowed in "master" mode - "'+s+'" was passed.');if("remote"===c&&!s)throw new Error('`masterPeerId` prop required in "remote" mode.');var f=F({sessionStorageKey:o,humanErrors:i}),l=t.useRef({peer:null,promise:null,mode:c,masterPeerId:s});return t.useEffect(function(){return l.current.mode=c,l.current.humanizeError=f.humanizeError,"master"===c&&(l.current.isConnectionFromRemote=f.isConnectionFromRemote),l.current.peer=a({humanizeError:f.humanizeError,getPeerId:f.getPeerId,isConnectionFromRemote:"master"===c?f.isConnectionFromRemote:void 0}),l.current.promise=("master"===c?k:z).default(f).bindConnection(l.current.peer,z?s:void 0),l.current.promise.then(function(){}),function(){l.current&&l.current.peer.disconnect()}},[c,s,a,f]),/*#__PURE__*/r.default.createElement(M.Provider,{value:l.current},n)}function A(){return A=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},A.apply(this,arguments)}L.propTypes={children:O.any,sessionStorageKey:O.string,humanErrors:O.object,mode:O.oneOf(["master","remote"]),masterPeerId:O.string,init:O.func},e.WebRTCRemoteControlProvider=L,e.usePeer=function(){var e=t.useState(!1),n=e[0],r=e[1],o=t.useState(!1)[1],i=t.useContext(M),c=t.useRef(null);return t.useEffect(function(){Promise.resolve().then(function(){var e;o(!0),null==i||null==(e=i.promise)||e.then(function(e){c.current=e,r(!0)})})},[]),A({ready:n,api:c.current},i)}}); //# sourceMappingURL=webrtc-remote-control-react.umd.prod.js.map