@viibe/impulse-integration-js 2.2.5 → 2.3.0

package/.vscode/settings.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viibe/impulse-integration-js",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "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,52 +187,57 @@ class Viibe {
 
     return new Promise((resolve, reject) => {
       const win = window.open(src, 'Authorization', windowParams.join(', '))
-      
-      if(!win) {
+
+      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
 }