Updated screenshot API to pico.

Author: boehlerlukas

build/index.css

@@ -1,6 +1,6 @@
 {
   "name": "bugbattle",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "main": "build/index.js",
   "types": "index.d.ts",
   "scripts": {
@@ -150,6 +150,6 @@
     ]
   },
   "dependencies": {
-    "html2canvas": "^1.0.0-rc.7"
+    "@gripeless/pico": "^1.0.1"
   }
 }

build/index.css.map

@@ -18,7 +18,7 @@ <h1>JavaScript Demo</h1>
       <h2>Bugbattle SDK for the Web</h2>
     </div>
     <div class="header-container-image">
-      <img class="head-image" src="./pexels-christina-morillo-1181467.jpg" />
+      <img class="head-image" src="pexels-christina-morillo-1181467.jpg" />
     </div>
   </div>
   <div class="content">
@@ -30,13 +30,14 @@ <h2>Bugbattle SDK for the Web</h2>
     <span>No more wasting time trying to reproduce a bug. Bugbattle reports automatically contain a replay video,
       session data, logs and more. Even better: You can add custom data to your bug details.</span>
     <br /><br />
-    <span>In less than a minute you can add our Bugbattle SDK to your App or WebApp. Install our SDK, build and run. A piece of cake.</span>
+    <span>In less than a minute you can add our Bugbattle SDK to your App or WebApp. Install our SDK, build and run. A
+      piece of cake.</span>
     <br /><br />
     <a id="feedback-button">Report feedback</a>
     <a onclick="console.error('Fake error');">Fake critical error</a>
     <br />
     <span>What are you waiting for?</span>
-      <br />
+    <br />
     <a class="buttonlink" href="https://www.bugbattle.io/">Get started</a>
   </div>
 </body>

build/index.js

@@ -4,7 +4,7 @@ import BugBattle from './../lib';
 class App {
   constructor() {
     // Initialize the SDK.
-    BugBattle.initialize("8hWXOj5yeZxweCgnyxYTXqJ1qFlu0N4U", BugBattle.FEEDBACK_BUTTON);
+    BugBattle.initialize("NF0AbayNnRfrT6QsB3uGAi6ANdd8WeX4", BugBattle.FEEDBACK_BUTTON);
 
     // Set's the app's build number.
     BugBattle.setMainColor('#FEAB39');
@@ -33,6 +33,10 @@ class App {
         BugBattle.startBugReporting();
       }
     }
+
+    console.log("asdf");
+    console.warn("asdf");
+    console.error("asdf");
   }
 }
 

build/index.js.map

@@ -1,5 +1,5 @@
 import "./css/App.css";
-import html2canvas from "html2canvas";
+import { dataURL } from "@gripeless/pico";
 
 class BugBattle {
   apiUrl = "https://api.bugbattle.io";
@@ -214,7 +214,7 @@ class BugBattle {
     }
   }
 
-  addLog(args, type) {
+  addLog(args, priority) {
     if (!args) {
       return;
     }
@@ -226,7 +226,7 @@ class BugBattle {
     this.logArray.push({
       log: log,
       date: new Date(),
-      type: type,
+      priority,
     });
   }
 
@@ -245,20 +245,20 @@ class BugBattle {
 
       return {
         log: function () {
-          self.addLog(arguments, "log");
+          self.addLog(arguments, "INFO");
           origConsole.log && origConsole.log.apply(origConsole, arguments);
         },
         warn: function () {
-          self.addLog(arguments, "warns");
+          self.addLog(arguments, "WARNING");
           origConsole.warn && origConsole.warn.apply(origConsole, arguments);
         },
         error: function () {
-          self.addLog(arguments, "error");
+          self.addLog(arguments, "ERROR");
           origConsole.error && origConsole.error.apply(origConsole, arguments);
           self.startCrashFlow();
         },
         info: function (v) {
-          self.addLog(arguments, "info");
+          self.addLog(arguments, "INFO");
           origConsole.info && origConsole.info.apply(origConsole, arguments);
         },
       };
@@ -283,7 +283,7 @@ class BugBattle {
 
     var elem = document.createElement("div");
     elem.className = "bugbattle--feedback-dialog-container";
-    elem.setAttribute("data-html2canvas-ignore", "true");
+    elem.setAttribute("data-ignore-bb", "true");
     elem.innerHTML = `<div class='bugbattle--feedback-dialog'>
       <div class="bugbattle--feedback-dialog-header">
         <div></div>
@@ -328,7 +328,7 @@ class BugBattle {
 
     var elem = document.createElement("div");
     elem.className = "bugbattle--feedback-dialog-container";
-    elem.setAttribute("data-html2canvas-ignore", "true");
+    elem.setAttribute("data-ignore-bb", "true");
     elem.innerHTML = `<div class='bugbattle--feedback-dialog'>
       <div class="bugbattle--feedback-dialog-header">
         <div></div>
@@ -477,25 +477,19 @@ class BugBattle {
       self.preScreenshotCleanup();
 
       window.scrollTo(self.snapshotPosition.x, self.snapshotPosition.y);
-      html2canvas(document.body, {
-        x: self.snapshotPosition.x,
-        y: self.snapshotPosition.y,
-        width: window.innerWidth,
-        height: window.innerHeight,
-        letterRendering: 1,
-        allowTaint: true,
-        useCORS: false,
-        logging: false,
-        imageTimeout: 15000,
-        proxy: "https://jsproxy.bugbattle.io/",
+
+      dataURL(window, {
+        ignore: ['[data-ignore-bb~="true"]'],
       })
-        .then(function (canvas) {
-          if (canvas) {
-            self.screenshot = canvas.toDataURL();
+        .then((screen) => {
+          if (screen && screen.value) {
+            self.screenshot = screen.value;
             self.prepareScreenshot();
+          } else {
+            self.showError();
           }
         })
-        .catch(function () {
+        .catch((exp) => {
           self.showError();
         });
     };
@@ -828,7 +822,7 @@ class BugBattle {
     const self = this;
     var bugReportingEditor = document.createElement("div");
     bugReportingEditor.className = "bugbattle-screenshot-editor-container";
-    bugReportingEditor.setAttribute("data-html2canvas-ignore", "true");
+    bugReportingEditor.setAttribute("data-ignore-bb", "true");
     bugReportingEditor.innerHTML = `
       <div class='bugbattle-screenshot-editor-container-inner'>
         <div class='bugbattle-screenshot-editor-borderlayer'></div>