Add support for Android view capturing in Session Replay

packages/core/android/build.gradle

@@ -169,10 +169,10 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   compileOnly "com.squareup.okhttp3:okhttp:3.12.13"
 
-  implementation "com.datadoghq:dd-sdk-android-rum:2.2.0"
-  implementation "com.datadoghq:dd-sdk-android-logs:2.2.0"
-  implementation "com.datadoghq:dd-sdk-android-trace:2.2.0"
-  implementation "com.datadoghq:dd-sdk-android-webview:2.2.0"
+  implementation "com.datadoghq:dd-sdk-android-rum:2.3.0"
+  implementation "com.datadoghq:dd-sdk-android-logs:2.3.0"
+  implementation "com.datadoghq:dd-sdk-android-trace:2.3.0"
+  implementation "com.datadoghq:dd-sdk-android-webview:2.3.0"
   testImplementation "org.junit.platform:junit-platform-launcher:1.6.2"
   testImplementation "org.junit.jupiter:junit-jupiter-api:5.6.2"
   testImplementation "org.junit.jupiter:junit-jupiter-engine:5.6.2"

packages/core/android/src/test/kotlin/com/datadog/tools/unit/forge/TelemetryConfigurationEventForgeryFactory.kt

@@ -62,6 +62,7 @@ internal class TelemetryConfigurationEventForgeryFactory :
                     forge.aNullable { aBool() },
                     forge.aNullable { aBool() },
                     forge.aNullable { aBool() },
+                    forge.aNullable { aBool() },
                     forge.aNullable { aString() },
                     forge.aNullable { aBool() },
                     forge.aNullable { aBool() },

packages/react-native-session-replay/android/build.gradle

@@ -167,7 +167,7 @@ dependencies {
     api "com.facebook.react:react-android:$reactNativeVersion"
   }
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.datadoghq:dd-sdk-android-session-replay:2.2.0"
+  implementation "com.datadoghq:dd-sdk-android-session-replay:2.3.0"
 
   testImplementation "org.junit.platform:junit-platform-launcher:1.6.2"
   testImplementation "org.junit.jupiter:junit-jupiter-api:5.6.2"

packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ColorUtils.kt

@@ -0,0 +1,22 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+private const val HEX_COLOR_INCLUDING_ALPHA_LENGTH: Int = 8
+
+internal fun formatAsRgba(backgroundColor: Int): String {
+    val colorHexString = Integer.toHexString(backgroundColor)
+    return "#${convertArgbToRgba(colorHexString)}"
+}
+
+private fun convertArgbToRgba(hexString: String): String {
+    return if (hexString.length == HEX_COLOR_INCLUDING_ALPHA_LENGTH) {
+        hexString.substring(2, 8) + hexString.substring(0, 2)
+    } else {
+        hexString
+    }
+}

packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt

@@ -27,6 +27,7 @@ class DdSessionReplayImplementation(
     fun enable(replaySampleRate: Double, defaultPrivacyLevel: String, promise: Promise) {
         val configuration = SessionReplayConfiguration.Builder(replaySampleRate.toFloat())
             .setPrivacy(buildPrivacy(defaultPrivacyLevel))
+            .addExtensionSupport(ReactNativeSessionReplayExtensionSupport())
             .build()
         sessionReplayProvider().enable(configuration)
         promise.resolve(null)

packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/LongExt.kt

@@ -0,0 +1,15 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+internal fun Long.convertToDensityNormalized(density: Float): Long {
+    return if (density == 0f) {
+        this
+    } else {
+        (this / density).toLong()
+    }
+}

packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupport.kt

@@ -0,0 +1,27 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import android.view.View
+import com.datadog.android.sessionreplay.ExtensionSupport
+import com.datadog.android.sessionreplay.SessionReplayPrivacy
+import com.datadog.android.sessionreplay.internal.recorder.OptionSelectorDetector
+import com.datadog.android.sessionreplay.internal.recorder.mapper.WireframeMapper
+import com.facebook.react.views.view.ReactViewGroup
+
+internal class ReactNativeSessionReplayExtensionSupport : ExtensionSupport {
+
+    override fun getCustomViewMappers(): Map<SessionReplayPrivacy, Map<Class<*>, WireframeMapper<View, *>>> {
+        return mapOf(SessionReplayPrivacy.ALLOW to mapOf(
+            ReactViewGroup::class.java to ReactViewGroupMapper() as WireframeMapper<View, *>
+        ))
+    }
+
+    override fun getOptionSelectorDetectors(): List<OptionSelectorDetector> {
+        return listOf()
+    }
+}

packages/react-native-session-replay/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactViewGroupMapper.kt

@@ -0,0 +1,87 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import android.annotation.SuppressLint
+import com.datadog.android.sessionreplay.internal.AsyncJobStatusCallback
+import com.datadog.android.sessionreplay.internal.recorder.MappingContext
+import com.datadog.android.sessionreplay.internal.recorder.mapper.BaseWireframeMapper
+import com.datadog.android.sessionreplay.internal.recorder.mapper.TraverseAllChildrenMapper
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.facebook.react.uimanager.Spacing
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+internal class ReactViewGroupMapper :
+    BaseWireframeMapper<ReactViewGroup, MobileSegment.Wireframe>(),
+    TraverseAllChildrenMapper<ReactViewGroup, MobileSegment.Wireframe> {
+
+    override fun map(
+        view: ReactViewGroup,
+        mappingContext: MappingContext,
+        asyncJobStatusCallback: AsyncJobStatusCallback
+    ): List<MobileSegment.Wireframe> {
+        val pixelDensity = mappingContext.systemInformation.screenDensity
+
+        val viewGlobalBounds = resolveViewGlobalBounds(
+            view,
+            pixelDensity
+        )
+
+        val backgroundDrawable = view.background
+
+        // view.alpha is the value of the opacity prop on the js side
+        val opacity = view.alpha
+
+        val (shapeStyle, border) =
+            if (backgroundDrawable is ReactViewBackgroundDrawable) {
+                resolveRNShapeStyleAndBorder(
+                    view = view,
+                    backgroundDrawable = backgroundDrawable,
+                    opacity = opacity,
+                    pixelDensity = pixelDensity
+                )
+        } else {
+            backgroundDrawable?.resolveShapeStyleAndBorder(opacity) ?: (null to null)
+        }
+
+        return listOf(
+            MobileSegment.Wireframe.ShapeWireframe(
+                resolveViewId(view),
+                viewGlobalBounds.x,
+                viewGlobalBounds.y,
+                viewGlobalBounds.width,
+                viewGlobalBounds.height,
+                shapeStyle = shapeStyle,
+                border = border
+            )
+        )
+    }
+
+    @SuppressLint("VisibleForTests")
+    private fun resolveRNShapeStyleAndBorder(
+        view: ReactViewGroup,
+        backgroundDrawable: ReactViewBackgroundDrawable,
+        opacity: Float,
+        pixelDensity: Float
+    ): Pair<MobileSegment.ShapeStyle, MobileSegment.ShapeBorder> {
+        val backgroundColor = view.backgroundColor
+        val colorHexString = formatAsRgba(backgroundColor)
+        val cornerRadius = backgroundDrawable.fullBorderRadius.toLong().convertToDensityNormalized(pixelDensity)
+        val borderWidth = backgroundDrawable.fullBorderWidth.toLong().convertToDensityNormalized(pixelDensity)
+        val borderColor = formatAsRgba(backgroundDrawable.getBorderColor(Spacing.ALL))
+
+        return MobileSegment.ShapeStyle(
+            backgroundColor = colorHexString,
+            opacity = opacity,
+            cornerRadius = cornerRadius
+        ) to MobileSegment.ShapeBorder(
+            color = borderColor,
+            width = borderWidth
+        )
+    }
+}

packages/react-native-session-replay/android/src/test/kotlin/com/datadog/reactnative/sessionreplay/ColorUtilsTest.kt

@@ -0,0 +1,42 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+package com.datadog.reactnative.sessionreplay
+
+import fr.xgouchet.elmyr.junit5.ForgeExtension
+import org.assertj.core.api.Assertions.assertThat
+import org.junit.jupiter.api.Test
+import org.junit.jupiter.api.extension.ExtendWith
+import org.junit.jupiter.api.extension.Extensions
+import org.mockito.junit.jupiter.MockitoExtension
+import org.mockito.junit.jupiter.MockitoSettings
+import org.mockito.quality.Strictness
+
+@Extensions(
+    ExtendWith(MockitoExtension::class),
+    ExtendWith(ForgeExtension::class)
+)
+@MockitoSettings(strictness = Strictness.LENIENT)
+internal class ColorUtilsTest {
+
+    @Test
+    fun `M return without alpha W formatAsRgba { color without alpha }`() {
+        // When
+        val hexColor = formatAsRgba(16711680)
+
+        // Then
+        assertThat(hexColor).isEqualTo("#ff0000")
+    }
+
+    @Test
+    fun `M resolve with alpha W formatAsRgba { color with alpha }`() {
+        // When
+        val hexColor = formatAsRgba(1717960806)
+
+        // Then
+        assertThat(hexColor).isEqualTo("#66006666")
+    }
+}