@sprig-technologies/sprig-browser 2.14.0

package/controller/iframe.js

@@ -0,0 +1,184 @@
+/* globals window, UserLeap, document */
+
+import eventEmitter from '../shared/eventEmitter';
+import { ulEvents } from '../shared/ulEvents';
+
+if (window.UserLeap && window.Sprig) {
+  if (window.Sprig._gtm) {
+    // if sdk installation snippet references UserLeap, but Google Tag Manager (GTM) references Sprig,
+    // overwrite Sprig by assigning it the value of UserLeap to make sure Sprig receives the full functionality without losing any configuration
+    window.Sprig = window.UserLeap;
+  } else {
+    // if sdk installation snippet references Sprig, but Google Tag Manager (GTM) references UserLeap,
+    // overwrite UserLeap by assigning it the value of Sprig to make sure Sprig receives the full functionality without losing any configuration
+    window.UserLeap = window.Sprig;
+  }
+}
+// for an all-new GTM or snippet-based installation referencing Sprig,
+// assign Sprig to UserLeap so that when functionality is defined on UserLeap, it's accessible on Sprig.
+if (!window.UserLeap) window.UserLeap = window.Sprig;
+// for a legacy GTM or snippet-based installation referencing UserLeap,
+// assign UserLeap to Sprig so that the functionality is accessible on Sprig, too.
+if (!window.Sprig) window.Sprig = window.UserLeap;
+
+const LIGHT_OVERLAY_BACKGROUND_COLOR = 'rgba(255,255,255, 0.95)';
+const DARK_OVERLAY_BACKGROUND_COLOR = 'rgba(0,0,0,0.9)';
+
+export function createContainer() {
+  // Create home container
+  UserLeap.container = document.createElement('div');
+  UserLeap.container.className = 'ul-container';
+  document.body.appendChild(UserLeap.container);
+}
+export function removeContainer(initiator) {
+  const container = UserLeap.container;
+  if (!container) return;
+  try {
+    document.body.removeChild(container);
+    UserLeap.container = null;
+    eventEmitter.emit(ulEvents.SURVEY_LIFE_CYCLE, { state: 'dismissed' });
+    eventEmitter.emit(ulEvents.SURVEY_CLOSED, { name: ulEvents.SURVEY_CLOSED, initiator });
+  } catch (err) {
+    console.warn(`[UserLeap] (ERR-412) Error removing UserLeap container by ${initiator} ` + container);
+    UserLeap.reportError('dismissActiveSurvey', err);
+  }
+}
+
+export function removeContainerOnClose() {
+  eventEmitter.subscribe(ulEvents.SURVEY_WILL_CLOSE, ({ initiator }) => {
+    removeContainer(initiator);
+  });
+}
+
+/**
+ * Create iframe
+ * @return {Object}
+ */
+export function createFrame(productConfig, useMobileStyling) {
+  const WIDTH = '360px';
+  const MARGIN = '0px';
+  const frameId = 'ul-frame';
+
+  createContainer();
+  // Create iframe for application
+  const iframe = document.createElement('iframe');
+  iframe.id = frameId;
+  iframe.setAttribute('title', 'Sprig User Feedback Dialog');
+  const hasOverlay = configureFrame(iframe, productConfig, useMobileStyling);
+  eventEmitter.subscribe(ulEvents.SURVEY_FADING_OUT, () => {
+    Object.assign(UserLeap.container.style, { 'background-color': 'rgba(0,0,0,0)' });
+  });
+  removeContainerOnClose();
+
+  function configureOverlayContainer(styleConfig, useMobileStyling) {
+    const defaultContainerStyle = {
+      position: 'fixed',
+      overflow: 'auto',
+      top: '0px',
+      left: '0px',
+      display: 'none', // overwritten after view is loaded, to prevent blocking website until we can display the survey.
+      height: '100%',
+      width: '100%',
+      transition: 'background-color 0.3s ease-out',
+      zIndex: 2147483646,
+    };
+
+    const containerStyle = { ...defaultContainerStyle };
+    const overlayStyleConfig = useMobileStyling ? styleConfig.overlayStyleMobile : styleConfig.overlayStyle;
+    containerStyle['background-color'] =
+      overlayStyleConfig === 'light' ? LIGHT_OVERLAY_BACKGROUND_COLOR : DARK_OVERLAY_BACKGROUND_COLOR;
+
+    if (!useMobileStyling) containerStyle.margin = 'auto';
+    Object.assign(UserLeap.container.style, containerStyle);
+  }
+
+  function configureFrame(iframe, productConfig, useMobileStyling) {
+    const defaultFrameStyle = {
+      position: 'fixed',
+      bottom: '0px',
+      right: MARGIN,
+      border: 0,
+      backgroundColor: 'rgba(0,0,0,0)',
+      zIndex: 2147483646,
+    };
+
+    const styleConfig = Object.assign({}, productConfig, UserLeap);
+    let framePositionStyle;
+    let hasOverlay = false;
+
+    if (useMobileStyling) {
+      if (UserLeap.windowDimensions && UserLeap.windowDimensions.width) {
+        defaultFrameStyle.width = `${UserLeap.windowDimensions.width}px`;
+      } else {
+        defaultFrameStyle.width = '100%';
+      }
+
+      if (UserLeap.windowDimensions && UserLeap.windowDimensions.height) {
+        defaultFrameStyle.maxHeight = `${UserLeap.windowDimensions.height - 20}px`;
+      } else if (UserLeap.maxHeight) {
+        defaultFrameStyle.maxHeight = UserLeap.maxHeight;
+      } else {
+        defaultFrameStyle.maxHeight = `${document.body.clientHeight - 20}px`;
+      }
+
+      if (['light', 'dark'].includes(styleConfig.overlayStyleMobile)) {
+        hasOverlay = true;
+      }
+    } else {
+      defaultFrameStyle.width = WIDTH;
+      defaultFrameStyle.maxHeight = UserLeap.maxHeight || '66vh';
+      if (styleConfig.framePosition === 'bottomLeft') {
+        framePositionStyle = { left: MARGIN };
+      } else if (styleConfig.framePosition === 'topLeft') {
+        framePositionStyle = { left: MARGIN, top: '0px' };
+      } else if (styleConfig.framePosition === 'topRight') {
+        framePositionStyle = { top: '0px' };
+      } else if (styleConfig.framePosition === 'center') {
+        hasOverlay = true;
+        framePositionStyle = { margin: 'auto', position: 'static' };
+        defaultFrameStyle.maxHeight = null;
+      }
+    }
+
+    if (hasOverlay) configureOverlayContainer(styleConfig, useMobileStyling);
+    Object.assign(iframe.style, defaultFrameStyle, framePositionStyle);
+    return hasOverlay;
+  }
+  /**
+   * Set iframe height
+   * @param {Number} height
+   */
+  iframe.setHeight = (height) => {
+    if (parseInt(iframe.style.height) != height) {
+      iframe.style.height = `${height}px`;
+      eventEmitter.emit(ulEvents.SURVEY_HEIGHT, {
+        name: ulEvents.SURVEY_HEIGHT,
+        contentFrameHeight: iframe.clientHeight,
+      });
+    }
+  };
+
+  UserLeap.container.appendChild(iframe);
+  if (productConfig && (useMobileStyling ? productConfig.exitOnOverlayClickMobile : productConfig.exitOnOverlayClick)) {
+    UserLeap.container.onclick = () => {
+      eventEmitter.emit(ulEvents.CLOSE_SURVEY_ON_OVERLAY_CLICK);
+    };
+  }
+  eventEmitter.emit(ulEvents.SURVEY_LIFE_CYCLE, { state: 'presented' });
+  eventEmitter.emit(ulEvents.SURVEY_PRESENTED, { name: ulEvents.SURVEY_PRESENTED });
+
+  // Inject the application frame
+  const contentWinDoc = iframe.contentWindow.document;
+  contentWinDoc.open('text/html', 'replace'),
+    contentWinDoc.write('<!doctype html><head></head><body style="background-color: rgba(0,0,0,0)"></body></html>'),
+    contentWinDoc.close();
+
+  const contentWinDocHead = contentWinDoc.head;
+
+  return {
+    frameId,
+    contentWinDocHead,
+    contentWindow: iframe.contentWindow,
+    hasOverlay,
+  };
+}

package/controller/index.js

@@ -0,0 +1,3 @@
+/*global __bs*/
+import sprigInitializer from './controller';
+sprigInitializer(__bs);

package/controller/queue.js

@@ -0,0 +1,96 @@
+/* globals UserLeap */
+import 'core-js';
+
+// Queue is an intermediatator for calls from developers
+// integrating the userleap. Before the library loads,
+// the snippet stores calls in a simple array.
+// Once the library is initialized, the simple array
+// is replaced by a Queue. All stored actions are processed,
+// and subsequent actions are processed immediately.
+//
+// Pause functionality is used internally to enable UI actions
+// to be delayed while Userleap is 'muted'
+UserLeap.Queue = class {
+  constructor(ul, queue) {
+    this.ul = ul;
+    this.paused = false;
+    this.queue = [];
+    this.flush(queue);
+  }
+
+  flush(queue) {
+    const length = queue.length;
+    if (length) {
+      for (let i = 0; i < length; i++) {
+        this.push(queue[i]);
+      }
+    }
+  }
+
+  isPaused() {
+    return this.paused;
+  }
+
+  pause() {
+    this.paused = true;
+  }
+
+  unpause() {
+    this.paused = false;
+    const queue = this.queue.slice(); //copies
+    this.empty();
+    this.flush(queue);
+  }
+
+  // push methods meant to make queue a drop-in
+  // replacement for the Array that's used pre-init.
+  push(action) {
+    if (!this.paused) {
+      // Queue is not paused. Perform the specified action
+      if (action instanceof Function) {
+        // Action is a closure
+        action();
+      } else {
+        // Action is an array
+        const args = Array.prototype.slice.call(action, 1);
+        const actionName = action[0];
+        const actionFunc = this.ul[actionName];
+        if (actionFunc && actionFunc instanceof Function) {
+          this.ul[actionName].apply(this.ul, args);
+        } else {
+          if (actionName) {
+            console.warn('[UserLeap] (ERR-100) No valid UserLeap action called', actionName);
+          }
+        }
+      }
+    } else {
+      // Queue is paused. Store the action in the queue
+      this.queue.push(action);
+    }
+  }
+
+  // Enqueue a closure to be performed by the queue
+  // This is primarily designed to be used to enable
+  // internal behaviors to be paused when the library
+  // is muted, and resume correctly when the mute is over
+  perform(func) {
+    if (!this.paused) {
+      return func();
+    } else {
+      let a;
+      const p = new Promise(function(resolve) {
+        a = function() {
+          resolve(func());
+        };
+      });
+      this.queue.push(a);
+      return p;
+    }
+  }
+  /**
+   * Removes all queued items
+   */
+  empty() {
+    this.queue.length = 0;
+  }
+};

package/controller/recordingAPI/index.js

@@ -0,0 +1,166 @@
+/* global navigator, MediaRecorder, UpChunk, File, Blob*/
+/*
+recording api requirements
+- check for and request for permissions
+- handle recording exceptions (premature closing)
+- track start end times
+- show splash for permissions
+*/
+export const PERMISSION = {
+  CAMERA: 'camera',
+  MICROPHONE: 'microphone',
+  SCREEN: 'screen',
+};
+
+export const STREAM_TYPE = {
+  AV: 'av',
+  SCREEN_CAPTURE: 'screen_capture',
+};
+/**
+ * Gets the local audio stream of the current caller
+ * @param callbacks - an object to set the success/error behavior
+ * @returns {void}
+ */
+
+async function getAVStream(permissionDescriptor) {
+  try {
+    return navigator.mediaDevices.getUserMedia(permissionDescriptor);
+  } catch (err) {
+    console.log('oops got an error:' + err);
+    return false;
+  }
+}
+
+const createUpload = async (body) => {
+  const response = await fetch(`https://api-staging.sprig.com/2/environments/integrations/upload`, {
+    method: 'POST',
+    cache: 'no-cache',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (response.ok) {
+    const uploadResponse = await response.json();
+    console.log(`create upload response ${response}`);
+    return uploadResponse.upload.url;
+  } else {
+    return null;
+  }
+};
+
+const recorder = {
+  grantedPermissions: [],
+  streams: [],
+  recorders: [],
+  startingTimeOnTask: undefined,
+  configure(eventEmitter) {
+    eventEmitter.subscribe('permission', async (payload) => {
+      const stream = await this.requestPermissions(payload.permissionDescriptors);
+      payload.callback(stream);
+    });
+    eventEmitter.subscribe('taskComplete', (payload) => {
+      console.log('congrats you have ' + payload.completed ? 'completed' : 'given up' + ' the task');
+      //doesn't necessarily stop when the next question also requires media
+      const body = {
+        surveyId: 5105,
+        updatedAt: new Date().toISOString(),
+        mediaType: 'video',
+      };
+      this.recorders.map((recorder) => {
+        recorder.stop();
+      });
+      this.recorders.map(async (recorder) => {
+        recorder.stream.getTracks().map((track) => {
+          track.stop();
+        });
+
+        const url = await createUpload(body);
+        if (!url) return;
+        const blob = new Blob(recorder.chunks, { type: 'video/webm' });
+        const upload = UpChunk.createUpload({
+          // endpoint computed from backend separately and hacked together
+          endpoint: url,
+          file: new File([blob], `recording video ${Date.now()}`),
+          chunkSize: 5120, // Uploads the file in ~5mb chunks
+        });
+        upload.startTime = Date.now();
+
+        // subscribe to events
+        upload.on('error', (err) => {
+          console.log(`upload error ${err}`);
+        });
+
+        upload.on('progress', (progress) => {
+          console.log(progress);
+        });
+
+        upload.on('success', () => {
+          console.log('uploaded!');
+        });
+      });
+    });
+    eventEmitter.subscribe('trackTime', (payload) => {
+      if (payload.timetracker === 'start') {
+        this.startingTimeOnTask = new Date();
+      } else {
+        const currentTime = new Date();
+        console.log(`task duration ${currentTime.getTime() - this.startingTimeOnTask.getTime()} ms`);
+      }
+    });
+  },
+
+  // TODO clean up this logic and combine the permission request and exception handling
+  async requestPermissions(permissions) {
+    // unsupported permissions
+    if (!permissions.every((val) => Object.values(PERMISSION).includes(val))) return false;
+    const streamResults = {};
+    const recordingOptions = {
+      audioBitsPerSecond: 128000,
+      videoBitsPerSecond: 2500000,
+      // mimeType: 'video/webm',
+    };
+    if (permissions.includes(PERMISSION.CAMERA) || permissions.includes(PERMISSION.MICROPHONE)) {
+      const stream = await getAVStream({
+        video: permissions.includes(PERMISSION.CAMERA),
+        audio: permissions.includes(PERMISSION.MICROPHONE),
+      });
+      if (stream && this.grantedPermissions.length === 0) {
+        [PERMISSION.CAMERA, PERMISSION.MICROPHONE].every(
+          (val) => permissions.includes(val) && this.grantedPermissions.push(val)
+        );
+      }
+      console.log('avstream successful');
+      console.log(stream);
+      streamResults[STREAM_TYPE.AV] = stream;
+      const mediaRecorder = new MediaRecorder(stream, recordingOptions);
+      mediaRecorder.chunks = [];
+      mediaRecorder.ondataavailable = function(e) {
+        mediaRecorder.chunks.push(e.data);
+      };
+      mediaRecorder.start();
+      this.recorders.push(mediaRecorder);
+      this.streams.push(stream);
+    }
+    if (permissions.includes(PERMISSION.SCREEN)) {
+      const captureStream = await navigator.mediaDevices.getDisplayMedia({
+        video: {
+          cursor: 'always',
+        },
+      });
+      console.log(captureStream);
+      const audioTrack = this.streams[0].getAudioTracks()[0];
+      captureStream.addTrack(audioTrack);
+      streamResults[STREAM_TYPE.SCREEN_CAPTURE] = captureStream;
+      const mediaRecorder = new MediaRecorder(captureStream, recordingOptions);
+      mediaRecorder.chunks = [];
+      mediaRecorder.ondataavailable = function(e) {
+        mediaRecorder.chunks.push(e.data);
+      };
+      mediaRecorder.start();
+      this.recorders.push(mediaRecorder);
+      this.streams.push(captureStream);
+    }
+    return streamResults;
+  },
+};
+
+export default recorder;

package/controller/recordingAPI/permissionStubs.json

@@ -0,0 +1,65 @@
+{
+  "questions": [
+  {
+      "name": 103850,
+      "props": {
+          "message": "get your video/audio permissions",
+          "options": [],
+          "routingOptions": [],
+          "properties": {
+              "captionText": "click this button",
+              "buttonText": "get permission",
+              "permissions": ["microphone", "camera"],
+              "showVideoPlayer": true
+          }
+      },
+      "type": "av_permission",
+      "surveyId": 1234
+  },
+  {
+    "name": 103851,
+    "props": {
+        "message": "get your screen permissions",
+        "options": [],
+        "routingOptions": [],
+        "properties": {
+            "captionText": "click this button",
+            "buttonText": "get permission",
+            "permissions": ["screen"]
+        }
+    },
+    "type": "screen_permission",
+    "surveyId": 1234
+  },
+  {
+    "name": 103852,
+    "props": {
+        "message": "record task",
+        "options": [],
+        "routingOptions": [],
+        "properties": {
+            "captionText": "get started",
+            "buttonText": "get started",
+            "timetracker": "start"
+        }
+    },
+    "type": "record_task_start",
+    "surveyId": 1234
+  },
+  {
+    "name": 103853,
+    "props": {
+        "message": "complete task",
+        "options": [],
+        "routingOptions": [],
+        "properties": {
+            "captionText": "get started",
+            "completeText": "complete task",
+            "buttonText": "I give up",
+            "timetracker": "end"
+        }
+    },
+    "type": "record_task_finish",
+    "surveyId": 1234
+  }
+]}