v6.8.1

demo/bb.css

@@ -1626,7 +1626,7 @@ textarea.bb-feedback-required {
 }
 
 .bb-capture-editor-notrecording .bb-capture-editor-borderlayer {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .bb-capture-editor-recording .bb-capture-dismiss {

demo/index.html

@@ -169,6 +169,7 @@ <h2>Gleap SDK for the Web</h2>
         >In less than a minute you can add our Gleap SDK to your App or WebApp.
         Install our SDK, build and run. A piece of cake.</span
       >
+      <div id="rand"></div>
     </div>
     <!-- index.js as found in build/index.js -->
     <script src="index.js"></script>

demo/main.js

@@ -1,8 +1,23 @@
 const Gleap = window.Gleap;
 
 // Gleap.setApiUrl("http://localhost:9000");
-Gleap.initialize("Y0ASDsS3Se1PJG1aYNIblrFMMX4zGgig");
+Gleap.initialize("ogWhNhuiZcGWrva5nlDS8l7a78OfaLlV");
 Gleap.identify(123, {
   email: "[email protected]",
   name: "Lukas",
 });
+
+/*function makeid(length) {
+  var result           = '';
+  var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  var charactersLength = characters.length;
+  for ( var i = 0; i < length; i++ ) {
+    result += characters.charAt(Math.floor(Math.random() * 
+charactersLength));
+ }
+ return result;
+}
+
+setInterval(() => {
+  document.getElementById("rand").innerText = makeid(1000);
+}, 1);*/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "6.8.0",
+  "version": "6.8.1",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

src/MarkerManager.js

@@ -346,12 +346,6 @@ export default class MarkerManager {
 
     this.setupColorPicker();
     this.setupToolbar();
-
-    if (this.type === "capture") {
-      setTimeout(function () {
-        self.screenRecorder.startScreenRecording();
-      }, 500);
-    }
   }
 
   setupColorPicker() {
@@ -645,6 +639,12 @@ export default class MarkerManager {
     };
 
     // Setup screen recorder
-    this.screenRecorder = new ScreenRecorder(this.captureRenderer.bind(this));
+    this.screenRecorder = new ScreenRecorder(
+      this.captureRenderer.bind(this),
+      translateText(
+        "You denied access to screen sharing. Please turn it on in your browser settings.",
+        this.overrideLanguage
+      )
+    );
   }
 }

src/ReplayConstants.js

@@ -12,3 +12,28 @@ export const REPLAYREC_MOUSE_UP = "u";
 export const REPLAYREC_REMOVE = "v";
 export const REPLAYREC_SCROLL = "s";
 export const REPLAYREC_MAINSCROLL = "x";
+
+export function gleapRoughSizeOfObject(object) {
+  var objectList = [];
+  var stack = [object];
+  var bytes = 0;
+
+  while (stack.length) {
+    var value = stack.pop();
+
+    if (typeof value === "boolean") {
+      bytes += 4;
+    } else if (typeof value === "string") {
+      bytes += value.length * 2;
+    } else if (typeof value === "number") {
+      bytes += 8;
+    } else if (typeof value === "object" && objectList.indexOf(value) === -1) {
+      objectList.push(value);
+
+      for (var i in value) {
+        stack.push(value[i]);
+      }
+    }
+  }
+  return bytes / 1024 / 1024;
+}

src/ReplayRecFrame.js

@@ -136,7 +136,17 @@ export default class ReplayRecFrame {
       this.initialState = serializedNode;
       this.initialActions = initialActions;
 
-      this.observer = new MutationObserver(rec.observerCallback);
+      // Fix for patched mutation observer.
+      var GleapMutationObserver = MutationObserver;
+      if (
+        window &&
+        window.Zone &&
+        window[window.Zone.__symbol__("MutationObserver")]
+      ) {
+        GleapMutationObserver =
+          window[window.Zone.__symbol__("MutationObserver")];
+      }
+      this.observer = new GleapMutationObserver(rec.observerCallback);
       this.observer.observe(node, {
         attributes: true,
         characterData: true,

src/ReplayRecorder.js

@@ -1,5 +1,6 @@
 import ReplayRecFrame from "./ReplayRecFrame";
 import {
+  gleapRoughSizeOfObject,
   REPLAYREC_ADD,
   REPLAYREC_ATTR,
   REPLAYREC_CANVAS_DATA,
@@ -29,7 +30,7 @@ export default class ReplayRecorder {
   }
 
   isFull() {
-    if (this.actions && this.actions.length > 7000) {
+    if (this.actions && gleapRoughSizeOfObject(this.actions) > 10) {
       return true;
     }
     return false;
@@ -150,7 +151,6 @@ export default class ReplayRecorder {
 
   fetchItemResource = (src) => {
     const self = this;
-
     return new Promise((resolve, reject) => {
       if (src) {
         var xhr = new XMLHttpRequest();

src/ScreenRecorder.js

@@ -12,9 +12,11 @@ export class ScreenRecorder {
   maxRecordTime = 180;
   recordTime = 0;
   recordingTimer = null;
+  permissionErrorText = "";
 
-  constructor(rerender) {
+  constructor(rerender, permissionErrorText) {
     this.rerender = rerender;
+    this.permissionErrorText = permissionErrorText;
     if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
       this.available = false;
     }
@@ -54,7 +56,8 @@ export class ScreenRecorder {
 
         self.rerender();
       })
-      .catch(function (displayErr) {
+      .catch(function (err) {
+        window.alert(self.permissionErrorText);
         self.rerender();
       });
   };
@@ -95,7 +98,6 @@ export class ScreenRecorder {
         self.audioMuted = false;
         self.audioAvailable = true;
         self.handleRecord({ stream: self.stream });
-
         self.rerender();
       })
       .catch(function (audioErr) {

src/css/index.css

@@ -1626,7 +1626,7 @@ textarea.bb-feedback-required {
 }
 
 .bb-capture-editor-notrecording .bb-capture-editor-borderlayer {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .bb-capture-editor-recording .bb-capture-dismiss {

webpack.config.js

@@ -38,7 +38,7 @@ module.exports = {
   devServer: {
     open: true,
     hot: true,
-    host: "0.0.0.0",
+    host: "localhost",
     static: path.join(__dirname, "demo"),
     port: 4444,
   },