chore: Added flag for mobile replay

frontend/src/lib/constants.tsx

@@ -142,7 +142,7 @@ export const FEATURE_FLAGS = {
     POSTHOG_3000_NAV: 'posthog-3000-nav', // owner: @Twixes
     ENABLE_PROMPTS: 'enable-prompts', // owner: @lharries
     FEEDBACK_SCENE: 'feedback-scene', // owner: @lharries
-    NOTEBOOKS: 'notebooks', // owner: #team-monitoring
+    NOTEBOOKS: 'notebooks', // owner: #team-replay
     EARLY_ACCESS_FEATURE_SITE_BUTTON: 'early-access-feature-site-button', // owner: @neilkakkar
     HEDGEHOG_MODE_DEBUG: 'hedgehog-mode-debug', // owner: @benjackwhite
     GENERIC_SIGNUP_BENEFITS: 'generic-signup-benefits', // experiment, owner: @raquelmsmith
@@ -160,25 +160,26 @@ export const FEATURE_FLAGS = {
     PRODUCT_SPECIFIC_ONBOARDING: 'product-specific-onboarding', // owner: @raquelmsmith
     REDIRECT_SIGNUPS_TO_INSTANCE: 'redirect-signups-to-instance', // owner: @raquelmsmith
     APPS_AND_EXPORTS_UI: 'apps-and-exports-ui', // owner: @benjackwhite
-    SESSION_REPLAY_CORS_PROXY: 'session-replay-cors-proxy', // owner: #team-monitoring
+    SESSION_REPLAY_CORS_PROXY: 'session-replay-cors-proxy', // owner: #team-replay
     HOGQL_INSIGHTS_LIFECYCLE: 'hogql-insights-lifecycle', // owner: @mariusandra
     HOGQL_INSIGHTS_TRENDS: 'hogql-insights-trends', // owner: @Gilbert09
     HOGQL_INSIGHT_LIVE_COMPARE: 'hogql-insight-live-compare', // owner: @mariusandra
     BI_VIZ: 'bi_viz', // owner: @Gilbert09
     WEBHOOKS_DENYLIST: 'webhooks-denylist', // owner: #team-pipeline
     SURVEYS_RESULTS_VISUALIZATIONS: 'surveys-results-visualizations', // owner: @jurajmajerik
     SURVEYS_PAYGATES: 'surveys-paygates',
-    CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
+    CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-replay
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
     PIPELINE_UI: 'pipeline-ui', // owner: #team-pipeline
-    NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-monitoring
-    SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-monitoring
+    NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-replay
+    SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-replay
     PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas
     MULTI_PROJECT_FEATURE_FLAGS: 'multi-project-feature-flags', // owner: @jurajmajerik #team-feature-success
-    NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-monitoring
+    NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-replay
     FEATURE_FLAG_COHORT_CREATION: 'feature-flag-cohort-creation', // owner: @neilkakkar #team-feature-success
     INSIGHT_HORIZONTAL_CONTROLS: 'insight-horizontal-controls', // owner: @benjackwhite
     ALWAYS_SHOW_SEEKBAR_PREVIEW: 'always-show-seekbar-preview', // owner: @pauldambra
+    SESSION_REPLAY_MOBILE: 'session-replay-mobile', // owner: #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts

@@ -4,7 +4,9 @@ import { captureException } from '@sentry/react'
 import { actions, connect, defaults, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { Dayjs, dayjs } from 'lib/dayjs'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { toParams } from 'lib/utils'
 import { chainToElements } from 'lib/utils/elements-chain'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
@@ -41,9 +43,10 @@ let postHogEEModule: PostHogEE
 
 const parseEncodedSnapshots = async (
     items: (EncodedRecordingSnapshot | string)[],
-    sessionId: string
+    sessionId: string,
+    withMobileTransformer: boolean
 ): Promise<RecordingSnapshot[]> => {
-    if (!postHogEEModule) {
+    if (!postHogEEModule && withMobileTransformer) {
         postHogEEModule = await posthogEE()
     }
     return items.flatMap((l) => {
@@ -167,6 +170,7 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
     key(({ sessionRecordingId }) => sessionRecordingId || 'no-session-recording-id'),
     connect({
         logic: [eventUsageLogic],
+        values: [featureFlagLogic, ['featureFlags']],
     }),
     defaults({
         sessionPlayerMetaData: null as SessionRecordingType | null,
@@ -342,7 +346,11 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                         )
 
                         data.snapshots = prepareRecordingSnapshots(
-                            await parseEncodedSnapshots(encodedResponse, props.sessionRecordingId),
+                            await parseEncodedSnapshots(
+                                encodedResponse,
+                                props.sessionRecordingId,
+                                !!values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
+                            ),
                             values.sessionPlayerSnapshotData?.snapshots ?? []
                         )
                     } else {
@@ -354,7 +362,11 @@ export const sessionRecordingDataLogic = kea<sessionRecordingDataLogicType>([
                         const response = await api.recordings.listSnapshots(props.sessionRecordingId, params)
                         if (response.snapshots) {
                             data.snapshots = prepareRecordingSnapshots(
-                                await parseEncodedSnapshots(response.snapshots, props.sessionRecordingId),
+                                await parseEncodedSnapshots(
+                                    response.snapshots,
+                                    props.sessionRecordingId,
+                                    !!values.featureFlags[FEATURE_FLAGS.SESSION_REPLAY_MOBILE]
+                                ),
                                 values.sessionPlayerSnapshotData?.snapshots ?? []
                             )
                         }