feat: Refactor screenshot capture for improved performance and reliability

This commit refactors the `captureScreenshot` method in `ScreenshotCapturer`
to improve performance and reliability. The changes include:

-   **Synchronous Setup:** The method now performs synchronous operations first
    (getting context, render object, calculating pixel ratio, and getting the
    initial image) before executing the main process asynchronously. This
    ensures that the initial setup is done on the main UI thread, as required.

-   **Asynchronous Processing:** The main image processing and masking logic
    are now executed asynchronously using a `Future` and `Completer`,
    preventing UI jank.

-   **Snapshot Management:** The `_views` Expando is replaced with a
    `SnapshotManager` to manage the status of the view, improving code
    organization and maintainability.

Author: thisames

lib/src/posthog_widget_widget.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:posthog_flutter/posthog_flutter.dart';
 import 'package:posthog_flutter/src/replay/mask/posthog_mask_controller.dart';
+import 'package:posthog_flutter/src/util/logging.dart';
 
 import 'replay/change_detector.dart';
 import 'replay/native_communicator.dart';
@@ -65,14 +66,11 @@ class PostHogWidgetState extends State<PostHogWidget> {
   }
 
   Future<void> _generateSnapshot() async {
-    final isSessionReplayActive =
-        await _nativeCommunicator?.isSessionReplayActive() ?? false;
-    if (!isSessionReplayActive) {
-      return;
-    }
-
+    // Ensure no asynchronous calls occur before this function,
+    // as it relies on a consistent state.
     final imageInfo = await _screenshotCapturer?.captureScreenshot();
     if (imageInfo == null) {
+      printIfDebug('Error: Failed to capture screenshot.');
       return;
     }
 

lib/src/replay/element_parsers/element_data.dart

@@ -16,24 +16,20 @@ class ElementData {
     children?.add(elementData);
   }
 
-  List<Rect> extractRects([bool isRoot = true]) {
-    List<Rect> rects = [];
-
-    if (!isRoot) {
-      rects.add(rect);
-    }
+  List<ElementData> extractRects([bool isRoot = true]) {
+    List<ElementData> rects = [];
 
     if (children != null) {
       for (var child in children ?? []) {
         if (child.children == null) {
-          rects.add(child.rect);
+          rects.add(child);
           continue;
         } else if ((child.children?.length ?? 0) > 1) {
           for (var grandChild in child.children ?? []) {
-            rects.add(grandChild.rect);
+            rects.add(grandChild);
           }
         } else {
-          rects.add(child.rect);
+          rects.add(child);
         }
       }
     }

lib/src/replay/mask/image_mask_painter.dart

@@ -1,35 +1,18 @@
-import 'dart:ui' as ui;
 import 'package:flutter/material.dart';
+import 'package:posthog_flutter/src/replay/element_parsers/element_data.dart';
 
 class ImageMaskPainter {
-  Future<ui.Image> drawMaskedImage(
-      ui.Image image, List<Rect> rects, double pixelRatio) async {
-    final recorder = ui.PictureRecorder();
-    final canvas = Canvas(recorder);
-    final paint = Paint();
-
-    canvas.drawImage(image, Offset.zero, paint);
-
-    final rectPaint = Paint()
-      ..color = Colors.black
-      ..style = PaintingStyle.fill;
-
-    for (Rect rect in rects) {
-      Rect scaledRect = Rect.fromLTRB(
-        rect.left * pixelRatio,
-        rect.top * pixelRatio,
-        rect.right * pixelRatio,
-        rect.bottom * pixelRatio,
-      );
-      canvas.drawRect(scaledRect, rectPaint);
+  void drawMaskedImage(
+      Canvas canvas, List<ElementData> items, double pixelRatio) {
+    final paint = Paint()..style = PaintingStyle.fill;
+    for (var elementData in items) {
+      paint.color = Colors.black;
+      final scaled = Rect.fromLTRB(
+          elementData.rect.left * pixelRatio,
+          elementData.rect.top * pixelRatio,
+          elementData.rect.right * pixelRatio,
+          elementData.rect.bottom * pixelRatio);
+      canvas.drawRect(scaled, paint);
     }
-
-    final picture = recorder.endRecording();
-
-    final maskedImage = await picture.toImage(
-      (image.width * pixelRatio).round(),
-      (image.height * pixelRatio).round(),
-    );
-    return maskedImage;
   }
 }

lib/src/replay/mask/posthog_mask_controller.dart

@@ -1,5 +1,3 @@
-import 'dart:async';
-
 import 'package:flutter/material.dart';
 import 'package:posthog_flutter/posthog_flutter.dart';
 import 'package:posthog_flutter/src/replay/element_parsers/element_data.dart';
@@ -10,6 +8,7 @@ import 'package:posthog_flutter/src/replay/element_parsers/element_data_factory.
 import 'package:posthog_flutter/src/replay/element_parsers/element_object_parser.dart';
 import 'package:posthog_flutter/src/replay/element_parsers/root_element_provider.dart';
 import 'package:posthog_flutter/src/replay/mask/widget_elements_decipher.dart';
+import 'package:posthog_flutter/src/util/logging.dart';
 
 class PostHogMaskController {
   late final Map<String, ElementParser> parsers;
@@ -32,15 +31,41 @@ class PostHogMaskController {
       PostHogMaskController._privateConstructor(
           Posthog().config?.sessionReplayConfig);
 
-  Future<List<Rect>?> getCurrentScreenRects() async {
+  /// Extracts a flattened list of [ElementData] objects representing the
+  /// renderable elements in the widget tree.
+  ///
+  /// This method traverses the tree of [ElementData] objects and returns a
+  /// list of elements that have no children or only one child.
+  ///
+  /// The method is designed to extract the elements that are directly
+  /// renderable on the screen.
+  ///
+  /// **Returns:**
+  ///   - `List<ElementData>`: A list of [ElementData] objects representing the
+  ///     renderable elements.
+  ///
+  List<ElementData>? getCurrentWidgetsElements() {
     final BuildContext? context = containerKey.currentContext;
 
     if (context == null) {
+      printIfDebug('Error: containerKey.currentContext is null.');
       return null;
     }
-    final ElementData? widgetElementsTree =
-        _widgetScraper.parseRenderTree(context);
 
-    return widgetElementsTree?.extractRects();
+    try {
+      final ElementData? widgetElementsTree =
+          _widgetScraper.parseRenderTree(context);
+
+      if (widgetElementsTree == null) {
+        printIfDebug('Error: widgetElementsTree is null after parsing.');
+        return null;
+      }
+
+      return widgetElementsTree.extractRects();
+    } catch (e) {
+      printIfDebug(
+          'Error during render tree parsing or rectangle extraction: $e');
+      return null;
+    }
   }
 }