@viibe/impulse-integration-js 2.2.3 → 2.3.1

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "actions": []
+}

package/dist/index.js

@@ -1 +1 @@
-(()=>{var t={579:t=>{function e(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var n=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.host=e.host,this.origin=/^localhost/.test(this.host)?"http://".concat(this.host):"https://".concat(this.host),this.source=e.source,this.handlers={},window.addEventListener("message",this.onMessage.bind(this))}var n,o;return n=t,o=[{key:"createCallIframe",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var e=this.createCallUrl(t),n=document.createElement("iframe");return n.style="border: 0;width: calc(100% - 1rem);margin: 0.5rem;",n.src=e,n.allow="geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;",n}},{key:"createCallUrl",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.clipboard,n=void 0!==e&&e,o=t.components,i=t.links,a=t.o2m,r=void 0!==a&&a,s=t.ticket,c=t.token,l=t.locale,u="".concat(this.origin,"/integration/features/call"),d=new URLSearchParams({resize:"true",source:this.source});if(null!=s&&s.title&&d.set("title",s.title),null!=s&&s.integration&&d.set("thirdPartyId",s.integration.id),i){var h=i instanceof Array?i.map((function(t){return"".concat(t.category,":").concat(t.value)})).join(","):String(i);d.set("links",h)}if(c&&d.set("token",c),l&&d.set("locale",l),o){var f=o instanceof Array?o.join(","):String(o);d.set("components",f)}return d.set("clipboard",Boolean(n)),d.set("o2m",Boolean(r)),u+"?".concat(d)}},{key:"isViibeEvent",value:function(t){return Boolean(t.isTrusted&&0===t.origin.indexOf(this.origin))}},{key:"dispatch",value:function(t,e){var n=this.handlers[t];return n?n.map((function(t){return t(e)})):null}},{key:"onMessage",value:function(t){return this.isViibeEvent(t)?t.data&&t.data.event&&t.data.payload?this.dispatch(t.data.event,t.data.payload):t.data&&t.data.token?this.dispatch("authentication:token",t.data.token):t.data&&t.data.error?this.dispatch("authentication:error",t.data.error):null:null}},{key:"on",value:function(t,e){(this.handlers[t]=this.handlers[t]||[]).push(e)}},{key:"authenticate",value:function(t){var e=this,n="".concat(this.origin,"/api/auth/login/").concat(t),o=window.screen.width/2-240,i=window.screen.height/2-300,a=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no","width=".concat(480),"height=".concat(600),"top=".concat(i),"left=".concat(o)];return new Promise((function(t,o){var i=window.open(n,"Authorization",a.join(", ")),r=setInterval((function(){i.closed&&(c(),s())}),100),s=function(){o("User closed window")},c=function(){window.removeEventListener("message",l),clearInterval(r)},l=function(n){if(!e.isViibeEvent(n))return null;n.data.token&&(c(),t(n.data.token)),n.data.error&&(c(),o(n.data.error))};window.addEventListener("message",l)}))}}],o&&e(n.prototype,o),t}();"undefined"!=typeof window&&(window.Viibe=n),t.exports=n}},e={},n=function n(o){var i=e[o];if(void 0!==i)return i.exports;var a=e[o]={exports:{}};return t[o](a,a.exports,n),a.exports}(579);module.exports=n})();
+(()=>{var t={579:t=>{function e(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var n=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.handlers=[],this.host=e.host,this.origin=/^localhost/.test(this.host)?"http://".concat(this.host):"https://".concat(this.host),this.source=e.source,window.addEventListener("message",this.onMessage.bind(this))}var n,o;return n=t,o=[{key:"createCallIframe",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var e=this.createCallUrl(t),n=document.createElement("iframe");return n.name="viibe-"+Math.floor(1e4*Math.random()),n.style="border: 0;width: calc(100% - 1rem);margin: 0.5rem;",n.src=e,n.allow="geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;",n}},{key:"createCallUrl",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.clipboard,n=void 0!==e&&e,o=t.components,a=t.links,i=t.o2m,r=void 0!==i&&i,s=t.ticket,c=t.token,l=t.locale,u="".concat(this.origin,"/integration/features/call"),d=new URLSearchParams({resize:"true",source:this.source});if(null!=s&&s.title&&d.set("title",s.title),null!=s&&s.integration&&d.set("thirdPartyId",s.integration.id),a){var h=a instanceof Array?a.map((function(t){return"".concat(t.category,":").concat(t.value)})).join(","):String(a);d.set("links",h)}if(c&&d.set("token",c),l&&d.set("locale",l),o){var f=o instanceof Array?o.join(","):String(o);d.set("components",f)}return d.set("clipboard",Boolean(n)),d.set("o2m",Boolean(r)),u+"?".concat(d)}},{key:"isViibeEvent",value:function(t){return Boolean(t.isTrusted&&0===t.origin.indexOf(this.origin))}},{key:"dispatch",value:function(t,e,n){return this.handlers.filter((function(e){return e.eventName===t&&(!e.windowName||e.windowName===n)})).map((function(t){return t.func(e)}))}},{key:"onMessage",value:function(t){return this.isViibeEvent(t)?t.data&&t.data.event&&t.data.payload?this.dispatch(t.data.event,t.data.payload,t.data.windowName):t.data&&t.data.token?this.dispatch("authentication:token",t.data.token):t.data&&t.data.error?this.dispatch("authentication:error",t.data.error):null:null}},{key:"on",value:function(t,e,n){"string"==typeof t&&"function"==typeof e&&void 0===n&&(n=e,e=t,t=null);var o={eventName:e,windowName:t?t.name:null,func:n};this.handlers.push(o)}},{key:"authenticate",value:function(t){var e=this,n="".concat(this.origin,"/api/auth/login/").concat(t),o=window.screen.width/2-240,a=window.screen.height/2-300,i=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no","width=".concat(480),"height=".concat(600),"top=".concat(a),"left=".concat(o)];return new Promise((function(t,o){var a=window.open(n,"Authorization",i.join(", "));a||o("Failed to open window");var r=setInterval((function(){a.closed&&(c(),s())}),100),s=function(){o("User closed window")},c=function(){window.removeEventListener("message",l),clearInterval(r)},l=function(n){if(!e.isViibeEvent(n))return null;n.data.token&&(c(),t(n.data.token)),n.data.error&&(c(),o(n.data.error))};window.addEventListener("message",l)}))}}],o&&e(n.prototype,o),t}();"undefined"!=typeof window&&(window.Viibe=n),t.exports=n}},e={},n=function n(o){var a=e[o];if(void 0!==a)return a.exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}(579);module.exports=n})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viibe/impulse-integration-js",
-  "version": "2.2.3",
+  "version": "2.3.1",
   "description": "ViiBE integration in js native",
   "main": "index.js",
   "publishConfig": {

package/src/index.js

@@ -1,10 +1,21 @@
 class Viibe {
 
+  /**
+   * @typedef Handler
+   * @type {object}
+   * @property {string} eventName The name of the event to handle
+   * @property {string} windowName The name of the window / iframe to listen to
+   * @property {Function} func The function to trigger when an event is received
+   */
+
   constructor(options) {
+    /**
+     * @type {Handler[]}
+     */
+    this.handlers = []
     this.host = options.host
     this.origin = /^localhost/.test(this.host) ? `http://${this.host}` : `https://${this.host}`
     this.source = options.source
-    this.handlers = {}
 
     window.addEventListener('message', this.onMessage.bind(this))
   }
@@ -16,6 +27,7 @@ class Viibe {
     const src = this.createCallUrl(options)
 
     const iframe = document.createElement('iframe')
+    iframe.name = 'viibe-' + Math.floor(Math.random() * 10000)
     iframe.style = 'border: 0;width: calc(100% - 1rem);margin: 0.5rem;'
     iframe.src = src
     iframe.allow = 'geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;'
@@ -58,15 +70,15 @@ class Viibe {
 
     if (components) {
       let componentsParams = (components instanceof Array)
-      ? components.join(',')
-      : String(components)
+        ? components.join(',')
+        : String(components)
 
       params.set('components', componentsParams)
     }
 
     params.set('clipboard', Boolean(clipboard))
     params.set('o2m', Boolean(o2m))
-    
+
     src += `?${params}`;
 
     return src
@@ -76,39 +88,80 @@ class Viibe {
     return Boolean(event.isTrusted && event.origin.indexOf(this.origin) === 0)
   }
 
-  dispatch(eventName, payload) {
-    const eventHandlers = this.handlers[eventName];
-    if(!eventHandlers) {
-      return null
-    }
-    return eventHandlers.map(handler => handler(payload))
+  /**
+   * Dispatches an event ie calls handlers corresponding to that event.
+   * Handlers with not windowName will be triggered regardless of the origin windowName
+   * Otherwise, the event will be triggered only if the handler windowName and the event windowName correspond
+   * 
+   * @param {string} eventName 
+   * @param {any} payload 
+   * @param {string} windowName 
+   * @returns 
+   */
+  dispatch(eventName, payload, windowName) {
+    return this.handlers
+      .filter(handler => 
+        handler.eventName === eventName
+        && (!handler.windowName || (handler.windowName === windowName))
+      )
+      .map(handler => handler.func(payload))
   }
 
+  /**
+   * Handles postMessages / events received on the current window
+   * @param {any} event 
+   * @returns 
+   */
   onMessage(event) {
-    if(!this.isViibeEvent(event)) {
+    if (!this.isViibeEvent(event)) {
       return null
     }
 
-    if(event.data && event.data.event && event.data.payload) {
-      return this.dispatch(event.data.event, event.data.payload)
+    if (event.data && event.data.event && event.data.payload) {
+      return this.dispatch(event.data.event, event.data.payload, event.data.windowName)
     }
 
     // FIXME: legacy authentication messages
-    if(event.data && event.data.token) {
+    if (event.data && event.data.token) {
       return this.dispatch('authentication:token', event.data.token)
     }
-    if(event.data && event.data.error) {
+    if (event.data && event.data.error) {
       return this.dispatch('authentication:error', event.data.error)
     }
 
     return null
   }
 
-  on(eventName, handler) {
-    const eventHandlers = this.handlers[eventName] = this.handlers[eventName] || []
-    eventHandlers.push(handler);
+  /**
+   * Registers an event handler.
+   * Can be either called with 2 arguments (eventName and handler) to catch events from all iframes 
+   * or with 3 arguments (iframe, eventName, handler) to catch events from only that iframe
+   * @param {HTMLIFrameElement} [iframe] 
+   * @param {string} eventName 
+   * @param {Function} handler 
+   */
+  on(iframe, eventName, func) {
+    if (typeof iframe === 'string' 
+    && typeof eventName === 'function' 
+    && typeof func === 'undefined') {
+      func = eventName;
+      eventName = iframe;
+      iframe = null;
+    }
+
+    const handler = {
+      eventName,
+      windowName: iframe ? iframe.name : null,
+      func,
+    }
+    this.handlers.push(handler);
   }
-  
+
+  /**
+   * Initiates an oauth login in a popup using the passed provider
+   * @param {string} provider A strategy name from the Viibe API (see /strategies API)
+   * @returns 
+   */
   authenticate(provider) {
     const src = `${this.origin}/api/auth/login/${provider}`
     const width = 480
@@ -134,47 +187,57 @@ class Viibe {
 
     return new Promise((resolve, reject) => {
       const win = window.open(src, 'Authorization', windowParams.join(', '))
-      
+
+      if (!win) {
+        reject('Failed to open window')
+      }
+
+      // pings the login window to check if it was closed
       const closeCheck = setInterval(() => {
-        if(win.closed) {
+        if (win.closed) {
           destroy();
           onClose();
         }
+
       }, 100)
 
+      // triggered if the window was closed
       const onClose = () => {
         reject('User closed window')
       }
 
+      // completes the process, either because the user closes or because the authentication completed
+      // cleans intervals and event listeners
       const destroy = () => {
         window.removeEventListener('message', onMessage)
         clearInterval(closeCheck)
       }
 
+      // triggered when a message is received on the current window
       const onMessage = event => {
-        if(!this.isViibeEvent(event)) {
+        if (!this.isViibeEvent(event)) {
           return null
         }
-        if(event.data.token) {
+        if (event.data.token) {
           destroy();
           resolve(event.data.token)
         }
-        if(event.data.error) {
+        if (event.data.error) {
           destroy();
           reject(event.data.error)
         }
       }
-      
+
       window.addEventListener('message', onMessage)
     })
-    
+
   }
 
 }
 
-if(typeof window !== 'undefined') {
+if (typeof window !== 'undefined') {
   window.Viibe = Viibe
 }
-if(typeof module !== 'undefined') {
+if (typeof module !== 'undefined') {
   module.exports = Viibe
 }