feat(replay): create a wrapper class to init rrweb player alongside video replayer

static/app/components/replays/replayContext.tsx

@@ -15,6 +15,7 @@ import type {
   ReplayPrefs,
 } from 'sentry/components/replays/preferences/replayPreferences';
 import useReplayHighlighting from 'sentry/components/replays/useReplayHighlighting';
+import {WrapperReplayer} from 'sentry/components/replays/wrapperReplayer';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import clamp from 'sentry/utils/number/clamp';
 import type useInitialOffsetMs from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
@@ -26,7 +27,6 @@ import useProjectFromId from 'sentry/utils/useProjectFromId';
 import {useUser} from 'sentry/utils/useUser';
 
 import {CanvasReplayerPlugin} from './canvasReplayerPlugin';
-import {VideoReplayer} from './videoReplayer';
 
 type Dimensions = {height: number; width: number};
 type RootElem = null | HTMLDivElement;
@@ -474,34 +474,43 @@ function ProviderNonMemo({
         return null;
       }
 
-      // check if this is a video replay and if we can use the video replayer
+      // check if this is a video replay and if we can use the video (wrapper) replayer
       if (!isVideoReplay || !videoEvents || !startTimestampMs) {
         return null;
       }
 
-      const inst = new VideoReplayer(videoEvents, {
-        videoApiPrefix: `/api/0/projects/${
-          organization.slug
-        }/${projectSlug}/replays/${replay?.getReplay().id}/videos/`,
-        root,
-        start: startTimestampMs,
-        onFinished: setReplayFinished,
-        onLoaded: event => {
-          const {videoHeight, videoWidth} = event.target;
-          if (!videoHeight || !videoWidth) {
-            return;
-          }
-          setDimensions({
-            height: videoHeight,
-            width: videoWidth,
-          });
-        },
-        onBuffer: buffering => {
-          setVideoBuffering(buffering);
-        },
-        clipWindow,
-        durationMs,
-      });
+      // This is a wrapper class that wraps both the VideoReplayer
+      // and the rrweb Replayer
+      const inst = new WrapperReplayer(
+        {videoEvents, events: events ?? []},
+        {
+          // video specific
+          videoApiPrefix: `/api/0/projects/${
+            organization.slug
+          }/${projectSlug}/replays/${replay?.getReplay().id}/videos/`,
+          start: startTimestampMs,
+          onFinished: setReplayFinished,
+          onLoaded: event => {
+            const {videoHeight, videoWidth} = event.target;
+            if (!videoHeight || !videoWidth) {
+              return;
+            }
+            setDimensions({
+              height: videoHeight,
+              width: videoWidth,
+            });
+          },
+          onBuffer: buffering => {
+            setVideoBuffering(buffering);
+          },
+          clipWindow,
+          durationMs,
+          // rrweb specific
+          theme,
+          // common to both
+          root,
+        }
+      );
       // `.current` is marked as readonly, but it's safe to set the value from
       // inside a `useEffect` hook.
       // See: https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
@@ -520,6 +529,7 @@ function ProviderNonMemo({
       isFetching,
       isVideoReplay,
       videoEvents,
+      events,
       organization.slug,
       projectSlug,
       replay,
@@ -528,6 +538,7 @@ function ProviderNonMemo({
       startTimeOffsetMs,
       clipWindow,
       durationMs,
+      theme,
     ]
   );
 

static/app/components/replays/replayPlayer.tsx

@@ -282,6 +282,19 @@ const SentryPlayerRoot = styled(PlayerRoot)`
       height: 10px;
     }
   }
+
+  &.video-replayer {
+    .replayer-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .replayer-wrapper > iframe {
+      opacity: 0;
+    }
+  }
 `;
 
 const Overlay = styled('div')`

static/app/components/replays/videoReplayer.tsx

@@ -24,7 +24,7 @@ interface VideoReplayerOptions {
   clipWindow?: ClipWindow;
 }
 
-interface VideoReplayerConfig {
+export interface VideoReplayerConfig {
   /**
    * Not supported, only here to maintain compat w/ rrweb player
    */

static/app/components/replays/wrapperReplayer.tsx

@@ -0,0 +1,158 @@
+import type {Theme} from '@emotion/react';
+import {type eventWithTime, Replayer} from '@sentry-internal/rrweb';
+
+import {
+  VideoReplayer,
+  type VideoReplayerConfig,
+} from 'sentry/components/replays/videoReplayer';
+import type {ClipWindow, VideoEvent} from 'sentry/utils/replays/types';
+
+type RootElem = HTMLDivElement | null;
+
+interface WrapperReplayerOptions {
+  durationMs: number;
+  onBuffer: (isBuffering: boolean) => void;
+  onFinished: () => void;
+  onLoaded: (event: any) => void;
+  root: RootElem;
+  start: number;
+  theme: Theme;
+  videoApiPrefix: string;
+  clipWindow?: ClipWindow;
+}
+
+/**
+ * A wrapper replayer that wraps both VideoReplayer and the rrweb Replayer.
+ * We need both instances in order to render the video playback alongside gestures.
+ */
+export class WrapperReplayer {
+  public config: VideoReplayerConfig = {
+    skipInactive: false,
+    speed: 1.0,
+  };
+  public iframe = {};
+  public videoInst: VideoReplayer;
+  public rrwebInst: Replayer;
+
+  constructor(
+    {videoEvents, events}: {events: eventWithTime[]; videoEvents: VideoEvent[]},
+    {
+      root,
+      start,
+      videoApiPrefix,
+      onBuffer,
+      onFinished,
+      onLoaded,
+      clipWindow,
+      durationMs,
+      theme,
+    }: WrapperReplayerOptions
+  ) {
+    this.videoInst = new VideoReplayer(videoEvents, {
+      videoApiPrefix,
+      root,
+      start,
+      onFinished,
+      onLoaded,
+      onBuffer,
+      clipWindow,
+      durationMs,
+    });
+
+    root?.classList.add('video-replayer');
+
+    const modifiedEvents: eventWithTime[] = [];
+    events.forEach((e, idx) => {
+      modifiedEvents.push(e);
+      if (e.type === 4) {
+        // Create a mock full snapshot event, in order to render rrweb gestures properly
+        // Need to add one for every meta event we see
+        // The hardcoded data.node.id here should match the ID of the data being sent
+        // in the `positions` arrays
+        const fullSnapshotEvent = {
+          type: 2,
+          data: {
+            node: {
+              type: 0,
+              childNodes: [
+                {
+                  type: 1,
+                  name: 'html',
+                  publicId: '',
+                  systemId: '',
+                  id: 0,
+                },
+                {
+                  type: 2,
+                  tagName: 'html',
+                  attributes: {
+                    lang: 'en',
+                  },
+                  childNodes: [],
+                  id: 0,
+                },
+              ],
+              id: 0,
+            },
+            initialOffset: {
+              left: 0,
+              top: 0,
+            },
+          },
+          timestamp: events[idx].timestamp,
+        };
+        modifiedEvents.push(fullSnapshotEvent);
+      }
+    });
+
+    this.rrwebInst = new Replayer(modifiedEvents, {
+      root: root as Element,
+      blockClass: 'sentry-block',
+      mouseTail: {
+        duration: 0.75 * 1000,
+        lineCap: 'round',
+        lineWidth: 2,
+        strokeStyle: theme.purple200,
+      },
+      plugins: [],
+      skipInactive: false,
+      speed: this.config.speed,
+    });
+  }
+
+  public destroy() {
+    this.videoInst.destroy();
+    this.rrwebInst.destroy();
+  }
+
+  /**
+   * Returns the current video time, using the video's external timer.
+   */
+  public getCurrentTime() {
+    return this.videoInst.getCurrentTime();
+  }
+
+  /**
+   * Play both the rrweb and video player.
+   */
+  public play(videoOffsetMs: number) {
+    this.videoInst.play(videoOffsetMs);
+    this.rrwebInst.play(videoOffsetMs);
+  }
+
+  /**
+   * Pause both the rrweb and video player.
+   */
+  public pause(videoOffsetMs: number) {
+    this.videoInst.pause(videoOffsetMs);
+    this.rrwebInst.pause(videoOffsetMs);
+  }
+
+  /**
+   * Equivalent to rrweb's `setConfig()`, but here we only support the `speed` configuration.
+   */
+  public setConfig(config: Partial<VideoReplayerConfig>): void {
+    this.videoInst.setConfig(config);
+    this.rrwebInst.setConfig(config);
+  }
+}