Cleanup.

Author: boehlerlukas

demo/bb.css

@@ -170,7 +170,7 @@
   font-family: "Inter", sans-serif;
   border-radius: 21px;
   box-sizing: border-box;
-  padding: 8px 15px;
+  padding: 8px 12px;
   width: auto;
   margin-top: 5px;
   margin-right: 8px;
@@ -1614,6 +1614,10 @@ textarea.bb-feedback-required {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+.bb-capture-editor-recording .bb-capture-dismiss {
+  display: none;
+}
+
 .bb-capture-editor-item-inactive {
   opacity: 0.3;
   cursor: not-allowed !important;
@@ -1762,7 +1766,7 @@ textarea.bb-feedback-required {
 .bb-capture-preview-buttons {
   display: flex;
   justify-content: space-between;
-  padding: 16px;
+  padding: 14px;
 }
 
 .bb-capture-preview-retrybutton {

src/FeedbackForm.js

@@ -660,13 +660,21 @@ export const hookForm = function (formOptions, submitForm, overrideLanguage) {
                 manager.clear();
                 captureItemsContainer.style.display = "flex";
                 selectedItem.style.display = "none";
-
-                // asdf
               };
             }
           });
         };
       }
+
+      // Wire autostart.
+      if (formItem.autostartDrawing) {
+        const captureButton = document.querySelector(
+          '.bb-feedback-capture-item[data-type="screenshot"]'
+        );
+        if (captureButton) {
+          captureButton.click();
+        }
+      }
     }
     if (formItem.type === "upload") {
       const formFileUploadInput = document.querySelector(

src/Gleap.js

@@ -51,6 +51,7 @@ class Gleap {
   widgetCallback = null;
   overrideLanguage = "";
   screenshot = null;
+  autostartDrawing = false;
   actionLog = [];
   logArray = [];
   customData = {};
@@ -959,6 +960,7 @@ class Gleap {
           name: "capture",
           type: "capture",
           enableScreenshot: true,
+          autostartDrawing: instance.autostartDrawing,
           enableCapture: feedbackOptions.enableUserScreenRecording
             ? true
             : false,
@@ -996,6 +998,10 @@ class Gleap {
       }
     }
 
+    // Disable autostart drawing for the next call.
+    instance.autostartDrawing = false;
+
+    // Stop bug analytics.
     instance.stopBugReportingAnalytics();
 
     if (instance.silentBugReport) {
@@ -1376,6 +1382,7 @@ class Gleap {
         (char === "i" || char === "I" || char === 73) &&
         self.shortcutsEnabled
       ) {
+        self.autostartDrawing = true;
         Gleap.startFeedbackFlow();
       }
     };

src/MarkerManager.js

@@ -36,6 +36,11 @@ export default class MarkerManager {
       ScrollStopper.enableScroll();
     }
 
+    // Stop screenrecording.
+    if (this.screenRecorder) {
+      this.screenRecorder.stopScreenRecording();
+    }
+
     // Unregister ESC listener
     this.unregisterListeners();
 

src/ScreenRecorder.js

@@ -203,11 +203,14 @@ export class ScreenRecorder {
       type: "video/mp4",
     });
 
-    document.querySelector(".bb-capture-preview video").src =
-      URL.createObjectURL(completeBlob);
-
-    this.audioAvailable = true;
-    this.isRecording = false;
-    this.rerender();
+    const previewVideoElement = document.querySelector(
+      ".bb-capture-preview video"
+    );
+    if (previewVideoElement) {
+      previewVideoElement.src = URL.createObjectURL(completeBlob);
+      this.audioAvailable = true;
+      this.isRecording = false;
+      this.rerender();
+    }
   };
 }

src/UI.js

@@ -71,6 +71,10 @@ export const injectStyledCSS = (
     .bb-capture-preview-retrybutton {
       color: ${contrastBackgroundColor};
       border-radius: ${buttonBorderRadius}px;
+      background-color: ${backgroundColorHover};
+    }
+    .bb-capture-preview-retrybutton:hover {
+      background-color: ${hoverHoverColor};
     }
     .bb-feedback-dialog-success svg {
       box-shadow: inset 0px 0px 0px ${primaryColor};
@@ -84,9 +88,6 @@ export const injectStyledCSS = (
     .bb-feedback-dialog-success svg circle {
       stroke: ${primaryColor};
     }
-    .bb-capture-preview-retrybutton:hover {
-      background-color: ${backgroundColorHover};
-    }
     .bb-capture-dismiss {
       background-color: ${primaryColor};
       border-bottom-left-radius: ${formItemSmallBorderRadius}px;